import * as i7 from '@angular/cdk/scrolling';
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
import * as i4$1 from '@angular/forms';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@aztrix/components/overlay';
import { ModalSize } from '@aztrix/components/overlay';
import * as i4 from '@aztrix/helpers';
import { fuzzySort, HelperPipesModule } from '@aztrix/helpers';
import * as i1 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import { BehaviorSubject, map, combineLatest, startWith, debounceTime, shareReplay, distinctUntilChanged, first } from 'rxjs';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i8 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i5 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i6 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { SpinnerModule } from '@aztrix/components/spinner';

class IconDetailSelectComponent {
    constructor() {
        this.selected = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconDetailSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconDetailSelectComponent, selector: "ax-icon-detail-select", inputs: { mainIcon: "mainIcon", icons: "icons", color: "color" }, outputs: { selected: "selected" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<button axButton icon-button class=\"main\" [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  <ax-icon class=\"icon\" [name]=\"mainIcon\"></ax-icon>\n</button>\n\n<button class=\"confirm\" axButton filled [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  {{ 'label.confirm' | translate }}\n</button>\n\n<div class=\"variants\">\n  <h2>{{ 'icon-select.variants' | translate }}</h2>\n\n  <div class=\"items\">\n    <button\n      axButton\n      icon-button\n      filled\n      class=\"item\"\n      [color]=\"color\"\n      *ngFor=\"let icon of icons\"\n      (click)=\"selected.next(icon)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon\"></ax-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;margin:.5rem}:host.primary .variants{background-color:var(--primary-color-500)}:host.secondary .variants{background-color:var(--secondary-color-500)}button.main{margin:0 auto;width:80px;height:80px}button.main .icon{width:60px;height:60px}button.confirm{display:block;margin:auto}.variants{display:flex;flex-direction:column;align-items:center;margin-top:1rem;padding:1rem;border-radius:5px;color:#fff;background-color:var(--font-color)}.items{display:flex;flex-wrap:wrap;justify-content:center}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconDetailSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-icon-detail-select', template: "<button axButton icon-button class=\"main\" [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  <ax-icon class=\"icon\" [name]=\"mainIcon\"></ax-icon>\n</button>\n\n<button class=\"confirm\" axButton filled [color]=\"color\" (click)=\"selected.next(mainIcon)\">\n  {{ 'label.confirm' | translate }}\n</button>\n\n<div class=\"variants\">\n  <h2>{{ 'icon-select.variants' | translate }}</h2>\n\n  <div class=\"items\">\n    <button\n      axButton\n      icon-button\n      filled\n      class=\"item\"\n      [color]=\"color\"\n      *ngFor=\"let icon of icons\"\n      (click)=\"selected.next(icon)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon\"></ax-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;margin:.5rem}:host.primary .variants{background-color:var(--primary-color-500)}:host.secondary .variants{background-color:var(--secondary-color-500)}button.main{margin:0 auto;width:80px;height:80px}button.main .icon{width:60px;height:60px}button.confirm{display:block;margin:auto}.variants{display:flex;flex-direction:column;align-items:center;margin-top:1rem;padding:1rem;border-radius:5px;color:#fff;background-color:var(--font-color)}.items{display:flex;flex-wrap:wrap;justify-content:center}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}\n"] }]
        }], propDecorators: { mainIcon: [{
                type: Input
            }], icons: [{
                type: Input
            }], color: [{
                type: HostBinding,
                args: ['class']
            }, {
                type: Input
            }], selected: [{
                type: Output
            }] } });

class IconSelectComponent {
    constructor(_elementRef, _iconService, _overlay) {
        this._elementRef = _elementRef;
        this._iconService = _iconService;
        this._overlay = _overlay;
        this.searchControl = new FormControl('');
        this.filteredControl = new FormControl(true);
        this.columnsPerRow$ = new BehaviorSubject(8);
        this._materialIcons$ = this._iconService.meta$.pipe(map((meta) => meta.filter((i) => i.namespace === 'material')));
        this._searchIcons$ = combineLatest([
            this.searchControl.valueChanges.pipe(startWith(''), debounceTime(300)),
            this.filteredControl.valueChanges.pipe(startWith(true)),
            this._materialIcons$,
        ]).pipe(map(([search, filtered, meta]) => {
            if (filtered) {
                meta = meta.filter((i) => i.groups?.includes('base'));
            }
            return fuzzySort(meta, search || '', ['name', 'aliases'], 0.3, Infinity);
        }), shareReplay(1));
        this.count$ = this._searchIcons$.pipe(map((icons) => icons?.length));
        this.rows$ = combineLatest([
            this._searchIcons$,
            this.columnsPerRow$.pipe(distinctUntilChanged()),
        ]).pipe(map(([icons, columnsPerRow]) => {
            return icons.reduce((prev, curr) => {
                const lastRow = prev[prev.length - 1];
                if (!lastRow || lastRow.length >= columnsPerRow) {
                    prev.push([]);
                }
                const currentLastRow = prev[prev.length - 1];
                currentLastRow.push(curr);
                return prev;
            }, []);
        }));
        this._resizeObserver$ = new ResizeObserver((entries) => {
            if (entries[0]?.contentBoxSize[0]) {
                this.columnsPerRow$.next(Math.floor((entries[0].contentBoxSize[0].inlineSize - 5) / 50));
            }
        });
    }
    ngAfterViewInit() {
        this._resizeObserver$.observe(this.viewport.elementRef.nativeElement);
    }
    ngOnDestroy() {
        this._resizeObserver$.disconnect();
    }
    select(name) {
        if (this.filteredControl.value) {
            this._materialIcons$.subscribe((meta) => {
                meta = meta.filter((i) => !i.groups?.includes('base'));
                const iconVariants = meta.filter((i) => i.name.startsWith(`${name}-`)).map((i) => i.name);
                if (iconVariants.length > 0) {
                    const modalRef = this._overlay.createModal(this._elementRef, IconDetailSelectComponent, {
                        modalSize: ModalSize.EXTRA_SMALL,
                        init: (modal) => {
                            modal.mainIcon = name;
                            modal.icons = iconVariants;
                            modal.color = this.color;
                            modal.selected.pipe(first()).subscribe((icon) => {
                                this._overlay.closeModal(modalRef);
                                this.form?.setValue(icon);
                            });
                        },
                    });
                }
                else {
                    this.form?.setValue(name);
                }
            });
        }
        else {
            this.form?.setValue(name);
        }
    }
    clear() {
        this.form?.setValue('');
        this._overlay.closeModal();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.IconService }, { token: i2.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconSelectComponent, selector: "ax-icon-select", inputs: { form: "form", color: "color" }, host: { properties: { "class": "this.color" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<div *ngIf=\"form?.value\" class=\"selected\">\n  <ax-icon matPrefix class=\"selected-icon icon\" [name]=\"form?.value\"></ax-icon>\n  <ax-button icon-button (click)=\"clear()\">\n    <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n  </ax-button>\n</div>\n\n<div class=\"search\">\n  <mat-form-field class=\"c-input\" appearance=\"outline\">\n    <ax-icon matPrefix class=\"icon\" name=\"magnify\"></ax-icon>\n    <input matInput autocomplete=\"off\" type=\"text\" class=\"input\" [formControl]=\"searchControl\" />\n    <button\n      matSuffix\n      axButton\n      icon-button\n      class=\"clear-button\"\n      aria-label=\"Clear\"\n      *ngIf=\"searchControl?.value?.length\"\n      (click)=\"searchControl.setValue('')\"\n    >\n      <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n    </button>\n    <mat-hint>{{ count$ | async }} {{ 'label.results' | translate }}</mat-hint>\n  </mat-form-field>\n\n  <button\n    class=\"filtered\"\n    axButton\n    icon-button\n    [filled]=\"filteredControl.value\"\n    (click)=\"filteredControl.setValue(!filteredControl.value)\"\n  >\n    <ax-icon class=\"icon\" [name]=\"filteredControl.value ? 'filter-off' : 'filter'\"></ax-icon>\n  </button>\n</div>\n\n<cdk-virtual-scroll-viewport #viewport class=\"viewport\" [itemSize]=\"50\">\n  <div class=\"row\" *cdkVirtualFor=\"let row of rows$ | async\">\n    <button\n      axButton\n      icon-button\n      class=\"item\"\n      [filled]=\"icon.name === form?.value\"\n      [color]=\"color\"\n      *ngFor=\"let icon of row\"\n      (click)=\"select(icon.name)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon.name\"></ax-icon>\n    </button>\n  </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;height:100%}:host.primary{color:var(--primary-color-500)}:host.secondary{color:var(--secondary-color-500)}.selected{display:flex;align-items:center;justify-content:center;padding-top:1rem}.selected .selected-icon{display:block;width:60px;height:60px}.search{display:flex;gap:1rem;padding:1rem 1rem 0;height:100px}.viewport{min-height:400px;height:calc(100% - 100px)}.filtered{margin-bottom:auto;margin-top:16px;flex-shrink:0}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}.row{display:flex;justify-content:center;height:50px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i7.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i7.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i8.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "component", type: i8.ButtonComponent, selector: "ax-button", inputs: ["url", "ariaLabel", "target"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-icon-select', template: "<div *ngIf=\"form?.value\" class=\"selected\">\n  <ax-icon matPrefix class=\"selected-icon icon\" [name]=\"form?.value\"></ax-icon>\n  <ax-button icon-button (click)=\"clear()\">\n    <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n  </ax-button>\n</div>\n\n<div class=\"search\">\n  <mat-form-field class=\"c-input\" appearance=\"outline\">\n    <ax-icon matPrefix class=\"icon\" name=\"magnify\"></ax-icon>\n    <input matInput autocomplete=\"off\" type=\"text\" class=\"input\" [formControl]=\"searchControl\" />\n    <button\n      matSuffix\n      axButton\n      icon-button\n      class=\"clear-button\"\n      aria-label=\"Clear\"\n      *ngIf=\"searchControl?.value?.length\"\n      (click)=\"searchControl.setValue('')\"\n    >\n      <ax-icon class=\"icon\" name=\"close\"></ax-icon>\n    </button>\n    <mat-hint>{{ count$ | async }} {{ 'label.results' | translate }}</mat-hint>\n  </mat-form-field>\n\n  <button\n    class=\"filtered\"\n    axButton\n    icon-button\n    [filled]=\"filteredControl.value\"\n    (click)=\"filteredControl.setValue(!filteredControl.value)\"\n  >\n    <ax-icon class=\"icon\" [name]=\"filteredControl.value ? 'filter-off' : 'filter'\"></ax-icon>\n  </button>\n</div>\n\n<cdk-virtual-scroll-viewport #viewport class=\"viewport\" [itemSize]=\"50\">\n  <div class=\"row\" *cdkVirtualFor=\"let row of rows$ | async\">\n    <button\n      axButton\n      icon-button\n      class=\"item\"\n      [filled]=\"icon.name === form?.value\"\n      [color]=\"color\"\n      *ngFor=\"let icon of row\"\n      (click)=\"select(icon.name)\"\n    >\n      <ax-icon class=\"icon\" [name]=\"icon.name\"></ax-icon>\n    </button>\n  </div>\n</cdk-virtual-scroll-viewport>\n", styles: [":host{display:block;height:100%}:host.primary{color:var(--primary-color-500)}:host.secondary{color:var(--secondary-color-500)}.selected{display:flex;align-items:center;justify-content:center;padding-top:1rem}.selected .selected-icon{display:block;width:60px;height:60px}.search{display:flex;gap:1rem;padding:1rem 1rem 0;height:100px}.viewport{min-height:400px;height:calc(100% - 100px)}.filtered{margin-bottom:auto;margin-top:16px;flex-shrink:0}button.item{width:50px;height:50px}button.item .icon{width:40px;height:40px;margin:5px}.row{display:flex;justify-content:center;height:50px}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IconService }, { type: i2.OverlayService }], propDecorators: { form: [{
                type: Input
            }], color: [{
                type: HostBinding,
                args: ['class']
            }, {
                type: Input
            }], viewport: [{
                type: ViewChild,
                args: [CdkVirtualScrollViewport]
            }] } });

class IconSelectModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IconSelectModule, declarations: [IconSelectComponent, IconDetailSelectComponent], imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            MatFormFieldModule,
            MatInputModule,
            ScrollingModule,
            SpinnerModule,
            IconsModule,
            ButtonModule,
            HelperPipesModule], exports: [IconSelectComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSelectModule, imports: [CommonModule,
            FormsModule,
            ReactiveFormsModule,
            MatFormFieldModule,
            MatInputModule,
            ScrollingModule,
            SpinnerModule,
            IconsModule,
            ButtonModule,
            HelperPipesModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [IconSelectComponent, IconDetailSelectComponent],
                    imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatFormFieldModule,
                        MatInputModule,
                        ScrollingModule,
                        SpinnerModule,
                        IconsModule,
                        ButtonModule,
                        HelperPipesModule,
                    ],
                    exports: [IconSelectComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { IconSelectComponent, IconSelectModule };
//# sourceMappingURL=aztrix-components-icon-select.mjs.map
