import * as i0 from '@angular/core';
import { input, signal, inject, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, NgControl, FormsModule } from '@angular/forms';
import { Select } from 'primeng/select';
import * as mtIcons from '@masterteam/icons/assets/select-icons.json';
import { Icon } from '@masterteam/icons';
import { FieldValidation } from '@masterteam/components/field-validation';
import { isInvalid } from '@masterteam/components';

class IconField {
    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    icons = mtIcons?.regular ?? [];
    selectedIcon = signal(null, ...(ngDevMode ? [{ debugName: "selectedIcon" }] : []));
    requiredValidator = Validators.required;
    ngControl = inject(NgControl, { self: true });
    isInvalid = isInvalid;
    constructor() {
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
        effect(() => {
            if (this.ngControl.control && this.required()) {
                this.ngControl.control.addValidators(Validators.required);
                this.ngControl.control.updateValueAndValidity();
            }
        });
    }
    onTouched = () => { };
    onChange = () => { };
    writeValue(value) {
        this.selectedIcon.set(value);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    onChangeIcon(icon) {
        this.selectedIcon.set(icon);
        this.onChange(icon);
    }
    validate(c) {
        return c.errors;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IconField, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: IconField, isStandalone: true, selector: "mt-icon-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, ngImport: i0, template: "@if (label()) {\n  <label\n    (click)=\"dropdown.show(); dropdown.focus()\"\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n    [for]=\"ngControl?.name || label()\"\n    >{{ label() }}</label\n  >\n}\n<p-select\n  #dropdown\n  [options]=\"icons\"\n  [filter]=\"false\"\n  filterBy=\"name\"\n  [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\n  appendTo=\"body\"\n  (onBlur)=\"onTouched()\"\n  (ngModelChange)=\"onChangeIcon($event)\"\n  [ngModel]=\"selectedIcon()\"\n  [invalid]=\"isInvalid(ngControl?.control)\"\n  placeholder=\"Select Icon\"\n  styleClass=\"w-full\"\n  panelStyleClass=\"icon-select-panel\"\n>\n  <ng-template let-icon #selectedItem>\n    @if (icon) {\n      <div class=\"flex items-center justify-center text-2xl\">\n        <mt-icon [icon]=\"icon\" />\n      </div>\n    } @else {\n      <div class=\"flex items-center justify-center\">Select Icon</div>\n    }\n  </ng-template>\n  <ng-template let-icon #item>\n    <div class=\"w-full h-full flex items-center justify-center text-lg\">\n      <mt-icon [icon]=\"icon\" />\n    </div>\n  </ng-template>\n</p-select>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", styles: ["::ng-deep .icon-select-panel .p-select-list-container .p-select-list{display:grid;grid-template-columns:repeat(7,1fr);padding-inline:calc(var(--spacing) * 2);gap:.5rem}::ng-deep .icon-select-panel .p-select-list-container .p-select-list .p-select-option{padding:.25rem;border-radius:var(--p-select-option-border-radius);width:2.5rem;height:2.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: IconField, decorators: [{
            type: Component,
            args: [{ selector: 'mt-icon-field', imports: [FormsModule, Select, Icon, FieldValidation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'grid gap-1',
                    }, template: "@if (label()) {\n  <label\n    (click)=\"dropdown.show(); dropdown.focus()\"\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n    [for]=\"ngControl?.name || label()\"\n    >{{ label() }}</label\n  >\n}\n<p-select\n  #dropdown\n  [options]=\"icons\"\n  [filter]=\"false\"\n  filterBy=\"name\"\n  [inputId]=\"ngControl?.name ? ngControl?.name?.toString() : label()\"\n  appendTo=\"body\"\n  (onBlur)=\"onTouched()\"\n  (ngModelChange)=\"onChangeIcon($event)\"\n  [ngModel]=\"selectedIcon()\"\n  [invalid]=\"isInvalid(ngControl?.control)\"\n  placeholder=\"Select Icon\"\n  styleClass=\"w-full\"\n  panelStyleClass=\"icon-select-panel\"\n>\n  <ng-template let-icon #selectedItem>\n    @if (icon) {\n      <div class=\"flex items-center justify-center text-2xl\">\n        <mt-icon [icon]=\"icon\" />\n      </div>\n    } @else {\n      <div class=\"flex items-center justify-center\">Select Icon</div>\n    }\n  </ng-template>\n  <ng-template let-icon #item>\n    <div class=\"w-full h-full flex items-center justify-center text-lg\">\n      <mt-icon [icon]=\"icon\" />\n    </div>\n  </ng-template>\n</p-select>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", styles: ["::ng-deep .icon-select-panel .p-select-list-container .p-select-list{display:grid;grid-template-columns:repeat(7,1fr);padding-inline:calc(var(--spacing) * 2);gap:.5rem}::ng-deep .icon-select-panel .p-select-list-container .p-select-list .p-select-option{padding:.25rem;border-radius:var(--p-select-option-border-radius);width:2.5rem;height:2.5rem}\n"] }]
        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });

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

export { IconField };
//# sourceMappingURL=masterteam-components-icon-field.mjs.map
