import * as i0 from '@angular/core';
import { input, EventEmitter, signal, inject, effect, HostBinding, Output, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, NgControl, FormsModule } from '@angular/forms';
import * as i2 from 'primeng/multiselect';
import { MultiSelectModule } from 'primeng/multiselect';
import { FieldValidation } from '@masterteam/components/field-validation';
import { isInvalid } from '@masterteam/components';
import { Avatar } from '@masterteam/components/avatar';

class MultiSelectField {
    multiSelect;
    field = input(true, ...(ngDevMode ? [{ debugName: "field" }] : []));
    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
    pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : []));
    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
    optionValue = input(...(ngDevMode ? [undefined, { debugName: "optionValue" }] : []));
    optionLabel = input(...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : []));
    filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : []));
    filterBy = input(...(ngDevMode ? [undefined, { debugName: "filterBy" }] : []));
    dataKey = input(...(ngDevMode ? [undefined, { debugName: "dataKey" }] : []));
    showClear = input(false, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
    display = input('chip', ...(ngDevMode ? [{ debugName: "display" }] : []));
    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
    maxSelectedLabels = input(7, ...(ngDevMode ? [{ debugName: "maxSelectedLabels" }] : []));
    group = input(false, ...(ngDevMode ? [{ debugName: "group" }] : []));
    optionGroupLabel = input('label', ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : []));
    optionGroupChildren = input('items', ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : []));
    optionIcon = input('icon', ...(ngDevMode ? [{ debugName: "optionIcon" }] : []));
    optionIconColor = input('color', ...(ngDevMode ? [{ debugName: "optionIconColor" }] : []));
    optionIconShape = input('shape', ...(ngDevMode ? [{ debugName: "optionIconShape" }] : []));
    optionAvatarShape = input('square', ...(ngDevMode ? [{ debugName: "optionAvatarShape" }] : []));
    optionGroupIcon = input('icon', ...(ngDevMode ? [{ debugName: "optionGroupIcon" }] : []));
    optionGroupIconColor = input('color', ...(ngDevMode ? [{ debugName: "optionGroupIconColor" }] : []));
    optionGroupIconShape = input('shape', ...(ngDevMode ? [{ debugName: "optionGroupIconShape" }] : []));
    optionGroupAvatarShape = input('square', ...(ngDevMode ? [{ debugName: "optionGroupAvatarShape" }] : []));
    onChange = new EventEmitter();
    styleClass;
    requiredValidator = Validators.required;
    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    onTouched = () => { };
    onModelChange = () => { };
    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();
            }
        });
    }
    applyInputsToMultiSelect() {
        Object.assign(this.multiSelect, this.pInputs());
    }
    ngOnInit() {
        this.styleClass = this.class();
        if (this.pInputs()) {
            this.applyInputsToMultiSelect();
        }
    }
    onValueChange(value) {
        this.onModelChange(value);
        this.value.set(value);
        this.onChange.emit(value);
    }
    ngOnChanges(changes) {
        if (changes['pInputs']) {
            this.applyInputsToMultiSelect();
        }
    }
    writeValue(value) {
        this.value.set(value);
        this.multiSelect.writeValue(value);
    }
    registerOnChange(fn) {
        this.onModelChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(disabled) {
        this.disabled.set(disabled);
    }
    isGrouped() {
        return this.group();
    }
    getOptionLabelValue(option) {
        const resolvedOption = this.resolveOption(option);
        if (resolvedOption == null)
            return '';
        const labelKey = this.optionLabel();
        if (labelKey && typeof resolvedOption === 'object') {
            return this.resolveNestedValue(resolvedOption, labelKey) ?? '';
        }
        return typeof resolvedOption === 'object'
            ? (resolvedOption.label ?? '')
            : String(resolvedOption);
    }
    getOptionIcon(option) {
        const resolvedOption = this.resolveOption(option);
        if (!resolvedOption || typeof resolvedOption !== 'object')
            return undefined;
        return resolvedOption[this.optionIcon()];
    }
    shouldRenderOptionColorSwatch(option) {
        return !!this.getOptionSwatchColor(option) && !this.getOptionIcon(option);
    }
    getOptionSwatchColor(option) {
        return this.resolveDisplayColor(this.getOptionColor(option));
    }
    getOptionAvatarBackground(option) {
        return this.getAvatarBackgroundByColor(this.getOptionColor(option));
    }
    getOptionAvatarColor(option) {
        return this.getAvatarColorByColor(this.getOptionColor(option));
    }
    getOptionAvatarShape(option) {
        const resolvedOption = this.resolveOption(option);
        if (!resolvedOption || typeof resolvedOption !== 'object') {
            return this.normalizeAvatarShape(this.optionAvatarShape());
        }
        return this.normalizeAvatarShape(resolvedOption[this.optionIconShape()] ?? this.optionAvatarShape());
    }
    getGroupLabelValue(group) {
        if (group == null)
            return '';
        const groupLabelKey = this.optionGroupLabel();
        if (groupLabelKey && typeof group === 'object') {
            return group[groupLabelKey] ?? '';
        }
        return typeof group === 'object' ? (group.label ?? '') : String(group);
    }
    getGroupIcon(group) {
        if (!group || typeof group !== 'object')
            return undefined;
        return group[this.optionGroupIcon()];
    }
    shouldRenderGroupColorSwatch(group) {
        return !!this.getGroupSwatchColor(group) && !this.getGroupIcon(group);
    }
    getGroupSwatchColor(group) {
        return this.resolveDisplayColor(this.getGroupColor(group));
    }
    getGroupAvatarBackground(group) {
        return this.getAvatarBackgroundByColor(this.getGroupColor(group));
    }
    getGroupAvatarColor(group) {
        return this.getAvatarColorByColor(this.getGroupColor(group));
    }
    getGroupAvatarShape(group) {
        if (!group || typeof group !== 'object') {
            return this.normalizeAvatarShape(this.optionGroupAvatarShape());
        }
        return this.normalizeAvatarShape(group[this.optionGroupIconShape()] ?? this.optionGroupAvatarShape());
    }
    getOptionColor(option) {
        const resolvedOption = this.resolveOption(option);
        if (!resolvedOption || typeof resolvedOption !== 'object')
            return undefined;
        return resolvedOption[this.optionIconColor()];
    }
    getGroupColor(group) {
        if (!group || typeof group !== 'object')
            return undefined;
        return group[this.optionGroupIconColor()];
    }
    getAvatarBackgroundByColor(color) {
        if (!color)
            return null;
        if (color.startsWith('#'))
            return `${color}1a`;
        return `var(--p-${color}-100)`;
    }
    getAvatarColorByColor(color) {
        if (!color)
            return null;
        if (color.startsWith('#'))
            return color;
        return `var(--p-${color}-600)`;
    }
    formatSelectedItems(values) {
        const selectedValues = values ?? [];
        return selectedValues
            .map((value) => this.getOptionLabelValue(value))
            .filter(Boolean)
            .join(', ');
    }
    resolveDisplayColor(color) {
        if (!color)
            return null;
        if (color.startsWith('#') ||
            color.startsWith('rgb') ||
            color.startsWith('hsl') ||
            color.startsWith('var(')) {
            return color;
        }
        return `var(--p-${color}-500)`;
    }
    normalizeAvatarShape(shape) {
        return shape === 'square' ? 'square' : 'circle';
    }
    resolveNestedValue(obj, path) {
        if (!path.includes('.')) {
            return obj[path];
        }
        return path.split('.').reduce((current, key) => current?.[key], obj);
    }
    resolveOption(optionOrValue) {
        if (optionOrValue == null || typeof optionOrValue === 'object') {
            return optionOrValue;
        }
        const options = this.options() ?? [];
        const optionValueKey = this.optionValue();
        if (!optionValueKey) {
            return (options.find((option) => option === optionOrValue) ?? optionOrValue);
        }
        if (this.group()) {
            const groupChildrenKey = this.optionGroupChildren();
            for (const group of options) {
                const children = group?.[groupChildrenKey];
                if (!Array.isArray(children))
                    continue;
                const match = children.find((item) => item?.[optionValueKey] === optionOrValue);
                if (match)
                    return match;
            }
            return optionOrValue;
        }
        return (options.find((option) => option?.[optionValueKey] === optionOrValue) ??
            optionOrValue);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MultiSelectField, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MultiSelectField, isStandalone: true, selector: "mt-multi-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, optionIcon: { classPropertyName: "optionIcon", publicName: "optionIcon", isSignal: true, isRequired: false, transformFunction: null }, optionIconColor: { classPropertyName: "optionIconColor", publicName: "optionIconColor", isSignal: true, isRequired: false, transformFunction: null }, optionIconShape: { classPropertyName: "optionIconShape", publicName: "optionIconShape", isSignal: true, isRequired: false, transformFunction: null }, optionAvatarShape: { classPropertyName: "optionAvatarShape", publicName: "optionAvatarShape", isSignal: true, isRequired: false, transformFunction: null }, optionGroupIcon: { classPropertyName: "optionGroupIcon", publicName: "optionGroupIcon", isSignal: true, isRequired: false, transformFunction: null }, optionGroupIconColor: { classPropertyName: "optionGroupIconColor", publicName: "optionGroupIconColor", isSignal: true, isRequired: false, transformFunction: null }, optionGroupIconShape: { classPropertyName: "optionGroupIconShape", publicName: "optionGroupIconShape", isSignal: true, isRequired: false, transformFunction: null }, optionGroupAvatarShape: { classPropertyName: "optionGroupAvatarShape", publicName: "optionGroupAvatarShape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label()) {\r\n  <label\r\n    (click)=\"multiSelect?.show()\"\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n<p-multiSelect\r\n  #multiSelect\r\n  [ngModel]=\"value()\"\r\n  (ngModelChange)=\"onValueChange($event)\"\r\n  [options]=\"options()\"\r\n  [display]=\"display()\"\r\n  [optionLabel]=\"optionLabel()\"\r\n  [optionValue]=\"optionValue()\"\r\n  [group]=\"isGrouped()\"\r\n  [optionGroupLabel]=\"optionGroupLabel()\"\r\n  [optionGroupChildren]=\"optionGroupChildren()\"\r\n  (onBlur)=\"onTouched()\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  [inputId]=\"ngControl?.name?.toString() || label()\"\r\n  [invalid]=\"isInvalid(ngControl?.control)\"\r\n  placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n  [filter]=\"filter()\"\r\n  [filterBy]=\"filterBy()\"\r\n  [dataKey]=\"dataKey()\"\r\n  styleClass=\"w-full\"\r\n  appendTo=\"body\"\r\n  [showClear]=\"showClear()\"\r\n  [maxSelectedLabels]=\"maxSelectedLabels\"\r\n>\r\n  <ng-template let-selectedOptions #selecteditems>\r\n    @if (!selectedOptions?.length) {\r\n      <span class=\"text-color-secondary\">{{\r\n        placeholder() ?? label() ?? \"\"\r\n      }}</span>\r\n    } @else if (display() === \"chip\") {\r\n      <div class=\"flex flex-wrap gap-2 py-1\">\r\n        @for (selected of selectedOptions; track $index) {\r\n          <span\r\n            class=\"inline-flex items-center gap-2 rounded-full border border-surface-200 bg-surface-50 px-2.5 py-1 text-sm\"\r\n          >\r\n            @if (shouldRenderOptionColorSwatch(selected)) {\r\n              <span\r\n                class=\"h-3 w-3 shrink-0 rounded-[4px] border border-surface-300\"\r\n                [style.backgroundColor]=\"getOptionSwatchColor(selected)\"\r\n              ></span>\r\n            } @else if (getOptionIcon(selected)) {\r\n              <mt-avatar\r\n                [style.--p-avatar-background]=\"\r\n                  getOptionAvatarBackground(selected)\r\n                \"\r\n                [style.--p-avatar-color]=\"getOptionAvatarColor(selected)\"\r\n                [icon]=\"getOptionIcon(selected)\"\r\n                [shape]=\"getOptionAvatarShape(selected)\"\r\n                size=\"normal\"\r\n              />\r\n            }\r\n            <span>{{ getOptionLabelValue(selected) }}</span>\r\n          </span>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ formatSelectedItems(selectedOptions) }}</span>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template let-group #group>\r\n    <div class=\"flex items-center gap-2\">\r\n      @if (shouldRenderGroupColorSwatch(group)) {\r\n        <span\r\n          class=\"h-3 w-3 shrink-0 rounded-[4px] border border-surface-300\"\r\n          [style.backgroundColor]=\"getGroupSwatchColor(group)\"\r\n        ></span>\r\n      } @else if (getGroupIcon(group)) {\r\n        <mt-avatar\r\n          [style.--p-avatar-background]=\"getGroupAvatarBackground(group)\"\r\n          [style.--p-avatar-color]=\"getGroupAvatarColor(group)\"\r\n          [icon]=\"getGroupIcon(group)\"\r\n          [shape]=\"getGroupAvatarShape(group)\"\r\n          size=\"normal\"\r\n        />\r\n      }\r\n      <span class=\"font-medium\">{{ getGroupLabelValue(group) }}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template let-option #item>\r\n    <div class=\"flex items-center gap-2\">\r\n      @if (shouldRenderOptionColorSwatch(option)) {\r\n        <span\r\n          class=\"h-3 w-3 shrink-0 rounded-[4px] border border-surface-300\"\r\n          [style.backgroundColor]=\"getOptionSwatchColor(option)\"\r\n        ></span>\r\n      } @else if (getOptionIcon(option)) {\r\n        <mt-avatar\r\n          [style.--p-avatar-background]=\"getOptionAvatarBackground(option)\"\r\n          [style.--p-avatar-color]=\"getOptionAvatarColor(option)\"\r\n          [icon]=\"getOptionIcon(option)\"\r\n          [shape]=\"getOptionAvatarShape(option)\"\r\n          size=\"normal\"\r\n        />\r\n      }\r\n      <span>{{ getOptionLabelValue(option) }}</span>\r\n    </div>\r\n  </ng-template>\r\n</p-multiSelect>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], 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: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MultiSelectField, decorators: [{
            type: Component,
            args: [{ selector: 'mt-multi-select-field', standalone: true, imports: [FormsModule, MultiSelectModule, FieldValidation, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'grid gap-1',
                    }, template: "@if (label()) {\r\n  <label\r\n    (click)=\"multiSelect?.show()\"\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n<p-multiSelect\r\n  #multiSelect\r\n  [ngModel]=\"value()\"\r\n  (ngModelChange)=\"onValueChange($event)\"\r\n  [options]=\"options()\"\r\n  [display]=\"display()\"\r\n  [optionLabel]=\"optionLabel()\"\r\n  [optionValue]=\"optionValue()\"\r\n  [group]=\"isGrouped()\"\r\n  [optionGroupLabel]=\"optionGroupLabel()\"\r\n  [optionGroupChildren]=\"optionGroupChildren()\"\r\n  (onBlur)=\"onTouched()\"\r\n  [disabled]=\"disabled() || readonly()\"\r\n  [inputId]=\"ngControl?.name?.toString() || label()\"\r\n  [invalid]=\"isInvalid(ngControl?.control)\"\r\n  placeholder=\"{{ placeholder() ?? label() ?? '' }}\"\r\n  [filter]=\"filter()\"\r\n  [filterBy]=\"filterBy()\"\r\n  [dataKey]=\"dataKey()\"\r\n  styleClass=\"w-full\"\r\n  appendTo=\"body\"\r\n  [showClear]=\"showClear()\"\r\n  [maxSelectedLabels]=\"maxSelectedLabels\"\r\n>\r\n  <ng-template let-selectedOptions #selecteditems>\r\n    @if (!selectedOptions?.length) {\r\n      <span class=\"text-color-secondary\">{{\r\n        placeholder() ?? label() ?? \"\"\r\n      }}</span>\r\n    } @else if (display() === \"chip\") {\r\n      <div class=\"flex flex-wrap gap-2 py-1\">\r\n        @for (selected of selectedOptions; track $index) {\r\n          <span\r\n            class=\"inline-flex items-center gap-2 rounded-full border border-surface-200 bg-surface-50 px-2.5 py-1 text-sm\"\r\n          >\r\n            @if (shouldRenderOptionColorSwatch(selected)) {\r\n              <span\r\n                class=\"h-3 w-3 shrink-0 rounded-[4px] border border-surface-300\"\r\n                [style.backgroundColor]=\"getOptionSwatchColor(selected)\"\r\n              ></span>\r\n            } @else if (getOptionIcon(selected)) {\r\n              <mt-avatar\r\n                [style.--p-avatar-background]=\"\r\n                  getOptionAvatarBackground(selected)\r\n                \"\r\n                [style.--p-avatar-color]=\"getOptionAvatarColor(selected)\"\r\n                [icon]=\"getOptionIcon(selected)\"\r\n                [shape]=\"getOptionAvatarShape(selected)\"\r\n                size=\"normal\"\r\n              />\r\n            }\r\n            <span>{{ getOptionLabelValue(selected) }}</span>\r\n          </span>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ formatSelectedItems(selectedOptions) }}</span>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template let-group #group>\r\n    <div class=\"flex items-center gap-2\">\r\n      @if (shouldRenderGroupColorSwatch(group)) {\r\n        <span\r\n          class=\"h-3 w-3 shrink-0 rounded-[4px] border border-surface-300\"\r\n          [style.backgroundColor]=\"getGroupSwatchColor(group)\"\r\n        ></span>\r\n      } @else if (getGroupIcon(group)) {\r\n        <mt-avatar\r\n          [style.--p-avatar-background]=\"getGroupAvatarBackground(group)\"\r\n          [style.--p-avatar-color]=\"getGroupAvatarColor(group)\"\r\n          [icon]=\"getGroupIcon(group)\"\r\n          [shape]=\"getGroupAvatarShape(group)\"\r\n          size=\"normal\"\r\n        />\r\n      }\r\n      <span class=\"font-medium\">{{ getGroupLabelValue(group) }}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template let-option #item>\r\n    <div class=\"flex items-center gap-2\">\r\n      @if (shouldRenderOptionColorSwatch(option)) {\r\n        <span\r\n          class=\"h-3 w-3 shrink-0 rounded-[4px] border border-surface-300\"\r\n          [style.backgroundColor]=\"getOptionSwatchColor(option)\"\r\n        ></span>\r\n      } @else if (getOptionIcon(option)) {\r\n        <mt-avatar\r\n          [style.--p-avatar-background]=\"getOptionAvatarBackground(option)\"\r\n          [style.--p-avatar-color]=\"getOptionAvatarColor(option)\"\r\n          [icon]=\"getOptionIcon(option)\"\r\n          [shape]=\"getOptionAvatarShape(option)\"\r\n          size=\"normal\"\r\n        />\r\n      }\r\n      <span>{{ getOptionLabelValue(option) }}</span>\r\n    </div>\r\n  </ng-template>\r\n</p-multiSelect>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
        }], ctorParameters: () => [], propDecorators: { multiSelect: [{
                type: ViewChild,
                args: ['multiSelect', { static: true }]
            }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputs", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], optionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIcon", required: false }] }], optionIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIconColor", required: false }] }], optionIconShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionIconShape", required: false }] }], optionAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionAvatarShape", required: false }] }], optionGroupIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupIcon", required: false }] }], optionGroupIconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupIconColor", required: false }] }], optionGroupIconShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupIconShape", required: false }] }], optionGroupAvatarShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupAvatarShape", required: false }] }], onChange: [{
                type: Output
            }], styleClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

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

export { MultiSelectField };
//# sourceMappingURL=masterteam-components-multi-select-field.mjs.map
