@masterteam/components 0.0.170 → 0.0.171

package/fesm2022/masterteam-components-location-field.mjs

@@ -0,0 +1,315 @@
+import * as i0 from '@angular/core';
+import { input, inject, effect, ChangeDetectionStrategy, Component, signal, viewChild, computed } from '@angular/core';
+import { HttpClient, HttpBackend, HttpParams } from '@angular/common/http';
+import * as i1 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, NgControl, FormsModule } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
+import * as i2 from 'primeng/autocomplete';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import * as i4 from 'primeng/inputgroup';
+import { InputGroupModule } from 'primeng/inputgroup';
+import * as i5 from 'primeng/inputgroupaddon';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { Subject, debounceTime, tap, switchMap, take, of, finalize, catchError } from 'rxjs';
+import { FieldValidation } from '@masterteam/components/field-validation';
+import { isInvalid } from '@masterteam/components';
+import { Tooltip } from '@masterteam/components/tooltip';
+import { ModalService } from '@masterteam/components/modal';
+import { Icon } from '@masterteam/icons';
+import { Button } from '@masterteam/components/button';
+import { ModalRef } from '@masterteam/components/dialog';
+import { NumberField } from '@masterteam/components/number-field';
+import { TextField } from '@masterteam/components/text-field';
+import * as i3 from 'primeng/api';
+
+function normalizeLocationValue(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return null;
+        try {
+            return normalizeLocationValue(JSON.parse(trimmed));
+        }
+        catch {
+            return {
+                display_name: trimmed,
+                address: trimmed,
+            };
+        }
+    }
+    if (typeof value !== 'object') {
+        return {
+            display_name: String(value),
+            address: String(value),
+        };
+    }
+    const source = value;
+    const lat = source['lat'];
+    const lon = source['lon'] ?? source['lng'];
+    const displayName = readString(source['display_name']) ??
+        readString(source['displayName']) ??
+        readString(source['address']) ??
+        readString(source['name']);
+    return {
+        ...source,
+        ...(displayName ? { display_name: displayName, address: displayName } : {}),
+        ...(lat !== undefined ? { lat: lat } : {}),
+        ...(lon !== undefined
+            ? { lon: lon, lng: lon }
+            : {}),
+    };
+}
+function getLocationDisplayName(value) {
+    return value?.display_name?.trim() || value?.address?.trim() || '';
+}
+function getLocationLongitude(value) {
+    return value?.lon ?? value?.lng;
+}
+function readString(value) {
+    return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+class LocationManualDialog {
+    initialValue = input(null, ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    form = new FormGroup({
+        display_name: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required],
+        }),
+        longitude: new FormControl(null, {
+            validators: [
+                Validators.required,
+                Validators.min(-180),
+                Validators.max(180),
+            ],
+        }),
+        latitude: new FormControl(null, {
+            validators: [
+                Validators.required,
+                Validators.min(-90),
+                Validators.max(90),
+            ],
+        }),
+    });
+    constructor() {
+        effect(() => {
+            const value = normalizeLocationValue(this.initialValue());
+            this.form.patchValue({
+                display_name: getLocationDisplayName(value),
+                longitude: coerceNumber(getLocationLongitude(value)),
+                latitude: coerceNumber(value?.lat),
+            }, { emitEvent: false });
+        });
+    }
+    cancel() {
+        this.ref.close(null);
+    }
+    save() {
+        if (this.form.invalid) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        const raw = this.form.getRawValue();
+        this.ref.close(normalizeLocationValue({
+            display_name: raw.display_name,
+            address: raw.display_name,
+            lon: raw.longitude,
+            lng: raw.longitude,
+            lat: raw.latitude,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LocationManualDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: LocationManualDialog, isStandalone: true, selector: "mt-location-manual-dialog", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  [class]=\"modal.contentClass + ' flex flex-col gap-4 p-4'\"\n>\n  <mt-text-field\n    [label]=\"'components.locationField.displayName' | transloco\"\n    [placeholder]=\"'components.locationField.displayName' | transloco\"\n    formControlName=\"display_name\"\n    [required]=\"true\"\n  />\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n    <mt-number-field\n      [label]=\"'components.locationField.longitude' | transloco\"\n      [placeholder]=\"'components.locationField.longitude' | transloco\"\n      [min]=\"-180\"\n      [max]=\"180\"\n      formControlName=\"longitude\"\n      [required]=\"true\"\n    />\n    <mt-number-field\n      [label]=\"'components.locationField.latitude' | transloco\"\n      [placeholder]=\"'components.locationField.latitude' | transloco\"\n      [min]=\"-90\"\n      [max]=\"90\"\n      formControlName=\"latitude\"\n      [required]=\"true\"\n    />\n  </div>\n</form>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button\n    [label]=\"'components.locationField.cancel' | transloco\"\n    variant=\"outlined\"\n    (onClick)=\"cancel()\"\n  />\n  <mt-button\n    [label]=\"'components.locationField.save' | transloco\"\n    severity=\"primary\"\n    [disabled]=\"form.invalid\"\n    (onClick)=\"save()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LocationManualDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-location-manual-dialog', imports: [ReactiveFormsModule, TranslocoPipe, Button, TextField, NumberField], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n  [formGroup]=\"form\"\n  [class]=\"modal.contentClass + ' flex flex-col gap-4 p-4'\"\n>\n  <mt-text-field\n    [label]=\"'components.locationField.displayName' | transloco\"\n    [placeholder]=\"'components.locationField.displayName' | transloco\"\n    formControlName=\"display_name\"\n    [required]=\"true\"\n  />\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n    <mt-number-field\n      [label]=\"'components.locationField.longitude' | transloco\"\n      [placeholder]=\"'components.locationField.longitude' | transloco\"\n      [min]=\"-180\"\n      [max]=\"180\"\n      formControlName=\"longitude\"\n      [required]=\"true\"\n    />\n    <mt-number-field\n      [label]=\"'components.locationField.latitude' | transloco\"\n      [placeholder]=\"'components.locationField.latitude' | transloco\"\n      [min]=\"-90\"\n      [max]=\"90\"\n      formControlName=\"latitude\"\n      [required]=\"true\"\n    />\n  </div>\n</form>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button\n    [label]=\"'components.locationField.cancel' | transloco\"\n    variant=\"outlined\"\n    (onClick)=\"cancel()\"\n  />\n  <mt-button\n    [label]=\"'components.locationField.save' | transloco\"\n    severity=\"primary\"\n    [disabled]=\"form.invalid\"\n    (onClick)=\"save()\"\n  />\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }] } });
+function coerceNumber(value) {
+    if (value === null || value === undefined || value === '') {
+        return null;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+class LocationField {
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    minLength = input(2, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    configuration = input(null, ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
+    searchUrl = input('https://nominatim.openstreetmap.org/search', ...(ngDevMode ? [{ debugName: "searchUrl" }] : /* istanbul ignore next */ []));
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    requiredValidator = Validators.required;
+    autocomplete = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => getLocationDisplayName(this.value()), ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    resolvedSearchUrl = computed(() => {
+        const configuredUrl = this.configuration()?.nominatimBaseUrl;
+        return typeof configuredUrl === 'string' && configuredUrl.trim()
+            ? configuredUrl
+            : (this.searchUrl() ?? 'https://nominatim.openstreetmap.org/search');
+    }, ...(ngDevMode ? [{ debugName: "resolvedSearchUrl" }] : /* istanbul ignore next */ []));
+    countryName = computed(() => {
+        const country = this.configuration()?.country;
+        if (typeof country === 'string')
+            return country.trim();
+        return country?.name?.trim() ?? '';
+    }, ...(ngDevMode ? [{ debugName: "countryName" }] : /* istanbul ignore next */ []));
+    countryCode = computed(() => {
+        const country = this.configuration()?.country;
+        if (typeof country === 'object')
+            return country?.code?.trim() ?? '';
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "countryCode" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const config = this.configuration();
+        const country = config?.country;
+        if (typeof config?.viewBox === 'string' && config.viewBox.trim()) {
+            return config.viewBox;
+        }
+        if (typeof country === 'object' && country?.viewBox?.trim()) {
+            return country.viewBox;
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    ngControl = null;
+    isInvalid = isInvalid;
+    modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    http = new HttpClient(inject(HttpBackend));
+    searchTerms = new Subject();
+    onTouched = () => { };
+    onModelChange = () => { };
+    constructor() {
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        effect(() => {
+            if (this.ngControl?.control && this.required()) {
+                this.ngControl.control.addValidators(Validators.required);
+                this.ngControl.control.updateValueAndValidity({ emitEvent: false });
+            }
+        });
+        this.searchTerms
+            .pipe(takeUntilDestroyed(), debounceTime(250), tap(() => this.loading.set(true)), switchMap((term) => this.searchLocations(term)))
+            .subscribe((items) => this.suggestions.set(items));
+    }
+    search(event) {
+        this.searchTerms.next(event.query);
+    }
+    onFocus() {
+        if (this.suggestions().length > 0) {
+            this.autocomplete()?.show();
+        }
+    }
+    onSelect(event) {
+        this.setValue(normalizeLocationValue(event.value));
+    }
+    onClear() {
+        this.setValue(null);
+        this.suggestions.set([]);
+    }
+    openManualDialog() {
+        if (this.disabled() || this.readonly())
+            return;
+        const ref = this.modal.openModal(LocationManualDialog, 'dialog', {
+            header: this.transloco.translate('components.locationField.manualHeader'),
+            styleClass: '!w-[40rem] max-w-[96vw]',
+            dismissableMask: true,
+            inputValues: {
+                initialValue: this.value(),
+            },
+        });
+        ref.onClose.pipe(take(1)).subscribe((result) => {
+            const next = normalizeLocationValue(result);
+            if (!next)
+                return;
+            this.setValue(next);
+        });
+    }
+    writeValue(value) {
+        this.value.set(normalizeLocationValue(value));
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
+    setValue(value) {
+        this.value.set(value);
+        this.onModelChange(value);
+        this.onTouched();
+    }
+    searchLocations(term) {
+        const trimmed = term?.trim();
+        if (!trimmed || trimmed.length < this.minLength()) {
+            this.loading.set(false);
+            return of([]);
+        }
+        const countryName = this.countryName();
+        const query = countryName && !trimmed.toLowerCase().includes(countryName.toLowerCase())
+            ? `${trimmed}, ${countryName}`
+            : trimmed;
+        let params = new HttpParams()
+            .set('q', query)
+            .set('format', 'json')
+            .set('addressdetails', '1')
+            .set('limit', '10')
+            .set('accept-language', this.transloco.getActiveLang() || 'en');
+        const viewBox = this.viewBox();
+        if (viewBox) {
+            params = params.set('bounded', '1').set('viewbox', viewBox);
+        }
+        const countryCode = this.countryCode();
+        if (countryCode) {
+            params = params.set('countrycodes', countryCode.toLowerCase());
+        }
+        return this.http.get(this.resolvedSearchUrl(), { params }).pipe(finalize(() => this.loading.set(false)), catchError((error) => {
+            console.error('Location search failed:', error);
+            return of([]);
+        }), switchMap((items) => of(items
+            .map((item) => normalizeLocationValue(item))
+            .filter((item) => item !== null))));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LocationField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: LocationField, isStandalone: true, selector: "mt-location-field", inputs: { hint: { classPropertyName: "hint", publicName: "hint", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, searchUrl: { classPropertyName: "searchUrl", publicName: "searchUrl", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label() || hint()) {\n  <div class=\"mb-1 flex items-center gap-1\">\n    @if (label()) {\n      <label\n        [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n        [for]=\"ngControl?.name || label()\"\n      >\n        {{ label() }}\n      </label>\n    }\n    @if (hint()) {\n      <span\n        class=\"inline-flex text-surface-400\"\n        [mtTooltip]=\"hint()\"\n        tooltipPosition=\"top\"\n      >\n        <mt-icon icon=\"general.help-circle\" />\n      </span>\n    }\n  </div>\n}\n\n<div class=\"relative\">\n  <p-inputgroup>\n    <p-autoComplete\n      #autocomplete=\"\"\n      [suggestions]=\"suggestions()\"\n      (completeMethod)=\"search($event)\"\n      (onSelect)=\"onSelect($event)\"\n      (onClear)=\"onClear()\"\n      (onFocus)=\"onFocus()\"\n      (onBlur)=\"onTouched()\"\n      [ngModel]=\"value()\"\n      [disabled]=\"disabled() || readonly()\"\n      [id]=\"ngControl?.name || label()\"\n      [invalid]=\"isInvalid(ngControl?.control)\"\n      [placeholder]=\"'components.locationField.search' | transloco\"\n      [optionLabel]=\"'display_name'\"\n      [minLength]=\"minLength()\"\n      [forceSelection]=\"true\"\n      class=\"w-full\"\n      appendTo=\"body\"\n      styleClass=\"w-full\"\n    >\n      <ng-template let-location pTemplate=\"item\">\n        <div class=\"flex min-w-0 items-start gap-2\">\n          <mt-icon icon=\"map.marker-pin-01\" class=\"mt-0.5 shrink-0 text-xl\" />\n          <span class=\"min-w-0 text-wrap text-sm leading-5\">\n            {{ location.display_name }}\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template let-location pTemplate=\"selecteditem\">\n        <span class=\"min-w-0 truncate\">{{ location?.display_name }}</span>\n      </ng-template>\n    </p-autoComplete>\n\n    <p-inputgroup-addon>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-full items-center justify-center text-surface-500 transition-colors hover:text-primary-500 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"disabled() || readonly()\"\n        [mtTooltip]=\"'components.locationField.enterManually' | transloco\"\n        tooltipPosition=\"top\"\n        (click)=\"openManualDialog()\"\n      >\n        <mt-icon icon=\"general.edit-03\" />\n      </button>\n    </p-inputgroup-addon>\n  </p-inputgroup>\n\n  @if (loading()) {\n    <mt-icon\n      icon=\"general.loading-01\"\n      class=\"absolute end-12 top-1/2 -translate-y-1/2 animate-spin bg-white\"\n    />\n  }\n</div>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\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: "ngmodule", type: AutoCompleteModule }, { kind: "component", type: i2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: InputGroupModule }, { kind: "component", type: i4.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: InputGroupAddonModule }, { kind: "component", type: i5.InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: LocationField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-location-field', imports: [
+                        FormsModule,
+                        AutoCompleteModule,
+                        InputGroupModule,
+                        InputGroupAddonModule,
+                        FieldValidation,
+                        Tooltip,
+                        Icon,
+                        TranslocoPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'grid gap-1',
+                    }, template: "@if (label() || hint()) {\n  <div class=\"mb-1 flex items-center gap-1\">\n    @if (label()) {\n      <label\n        [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n        [for]=\"ngControl?.name || label()\"\n      >\n        {{ label() }}\n      </label>\n    }\n    @if (hint()) {\n      <span\n        class=\"inline-flex text-surface-400\"\n        [mtTooltip]=\"hint()\"\n        tooltipPosition=\"top\"\n      >\n        <mt-icon icon=\"general.help-circle\" />\n      </span>\n    }\n  </div>\n}\n\n<div class=\"relative\">\n  <p-inputgroup>\n    <p-autoComplete\n      #autocomplete=\"\"\n      [suggestions]=\"suggestions()\"\n      (completeMethod)=\"search($event)\"\n      (onSelect)=\"onSelect($event)\"\n      (onClear)=\"onClear()\"\n      (onFocus)=\"onFocus()\"\n      (onBlur)=\"onTouched()\"\n      [ngModel]=\"value()\"\n      [disabled]=\"disabled() || readonly()\"\n      [id]=\"ngControl?.name || label()\"\n      [invalid]=\"isInvalid(ngControl?.control)\"\n      [placeholder]=\"'components.locationField.search' | transloco\"\n      [optionLabel]=\"'display_name'\"\n      [minLength]=\"minLength()\"\n      [forceSelection]=\"true\"\n      class=\"w-full\"\n      appendTo=\"body\"\n      styleClass=\"w-full\"\n    >\n      <ng-template let-location pTemplate=\"item\">\n        <div class=\"flex min-w-0 items-start gap-2\">\n          <mt-icon icon=\"map.marker-pin-01\" class=\"mt-0.5 shrink-0 text-xl\" />\n          <span class=\"min-w-0 text-wrap text-sm leading-5\">\n            {{ location.display_name }}\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template let-location pTemplate=\"selecteditem\">\n        <span class=\"min-w-0 truncate\">{{ location?.display_name }}</span>\n      </ng-template>\n    </p-autoComplete>\n\n    <p-inputgroup-addon>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-full items-center justify-center text-surface-500 transition-colors hover:text-primary-500 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"disabled() || readonly()\"\n        [mtTooltip]=\"'components.locationField.enterManually' | transloco\"\n        tooltipPosition=\"top\"\n        (click)=\"openManualDialog()\"\n      >\n        <mt-icon icon=\"general.edit-03\" />\n      </button>\n    </p-inputgroup-addon>\n  </p-inputgroup>\n\n  @if (loading()) {\n    <mt-icon\n      icon=\"general.loading-01\"\n      class=\"absolute end-12 top-1/2 -translate-y-1/2 animate-spin bg-white\"\n    />\n  }\n</div>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n" }]
+        }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], searchUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchUrl", required: false }] }], autocomplete: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LocationField, LocationManualDialog, getLocationDisplayName, getLocationLongitude, normalizeLocationValue };
+//# sourceMappingURL=masterteam-components-location-field.mjs.map

package/fesm2022/masterteam-components-location-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-location-field.mjs","sources":["../../../../packages/masterteam/components/location-field/location-value.ts","../../../../packages/masterteam/components/location-field/location-manual-dialog.ts","../../../../packages/masterteam/components/location-field/location-manual-dialog.html","../../../../packages/masterteam/components/location-field/location-field.ts","../../../../packages/masterteam/components/location-field/location-field.html","../../../../packages/masterteam/components/location-field/masterteam-components-location-field.ts"],"sourcesContent":["export interface LocationValue {\n  display_name?: string;\n  address?: string;\n  lat?: string | number;\n  lon?: string | number;\n  lng?: string | number;\n  [key: string]: unknown;\n}\n\nexport function normalizeLocationValue(value: unknown): LocationValue | null {\n  if (value === null || value === undefined || value === '') {\n    return null;\n  }\n\n  if (typeof value === 'string') {\n    const trimmed = value.trim();\n    if (!trimmed) return null;\n\n    try {\n      return normalizeLocationValue(JSON.parse(trimmed));\n    } catch {\n      return {\n        display_name: trimmed,\n        address: trimmed,\n      };\n    }\n  }\n\n  if (typeof value !== 'object') {\n    return {\n      display_name: String(value),\n      address: String(value),\n    };\n  }\n\n  const source = value as Record<string, unknown>;\n  const lat = source['lat'];\n  const lon = source['lon'] ?? source['lng'];\n  const displayName =\n    readString(source['display_name']) ??\n    readString(source['displayName']) ??\n    readString(source['address']) ??\n    readString(source['name']);\n\n  return {\n    ...source,\n    ...(displayName ? { display_name: displayName, address: displayName } : {}),\n    ...(lat !== undefined ? { lat: lat as string | number } : {}),\n    ...(lon !== undefined\n      ? { lon: lon as string | number, lng: lon as string | number }\n      : {}),\n  };\n}\n\nexport function getLocationDisplayName(value: LocationValue | null): string {\n  return value?.display_name?.trim() || value?.address?.trim() || '';\n}\n\nexport function getLocationLongitude(\n  value: LocationValue | null,\n): string | number | undefined {\n  return value?.lon ?? value?.lng;\n}\n\nfunction readString(value: unknown): string | undefined {\n  return typeof value === 'string' && value.trim() ? value.trim() : undefined;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  input,\n} from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { TranslocoPipe } from '@jsverse/transloco';\nimport { Button } from '@masterteam/components/button';\nimport { ModalRef } from '@masterteam/components/dialog';\nimport { ModalService } from '@masterteam/components/modal';\nimport { NumberField } from '@masterteam/components/number-field';\nimport { TextField } from '@masterteam/components/text-field';\nimport {\n  getLocationDisplayName,\n  getLocationLongitude,\n  LocationValue,\n  normalizeLocationValue,\n} from './location-value';\n\n@Component({\n  selector: 'mt-location-manual-dialog',\n  imports: [ReactiveFormsModule, TranslocoPipe, Button, TextField, NumberField],\n  templateUrl: './location-manual-dialog.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LocationManualDialog {\n  readonly initialValue = input<LocationValue | null>(null);\n\n  protected readonly modal = inject(ModalService);\n  private readonly ref = inject(ModalRef);\n\n  protected readonly form = new FormGroup({\n    display_name: new FormControl('', {\n      nonNullable: true,\n      validators: [Validators.required],\n    }),\n    longitude: new FormControl<number | null>(null, {\n      validators: [\n        Validators.required,\n        Validators.min(-180),\n        Validators.max(180),\n      ],\n    }),\n    latitude: new FormControl<number | null>(null, {\n      validators: [\n        Validators.required,\n        Validators.min(-90),\n        Validators.max(90),\n      ],\n    }),\n  });\n\n  constructor() {\n    effect(() => {\n      const value = normalizeLocationValue(this.initialValue());\n      this.form.patchValue(\n        {\n          display_name: getLocationDisplayName(value),\n          longitude: coerceNumber(getLocationLongitude(value)),\n          latitude: coerceNumber(value?.lat),\n        },\n        { emitEvent: false },\n      );\n    });\n  }\n\n  protected cancel(): void {\n    this.ref.close(null);\n  }\n\n  protected save(): void {\n    if (this.form.invalid) {\n      this.form.markAllAsTouched();\n      return;\n    }\n\n    const raw = this.form.getRawValue();\n    this.ref.close(\n      normalizeLocationValue({\n        display_name: raw.display_name,\n        address: raw.display_name,\n        lon: raw.longitude,\n        lng: raw.longitude,\n        lat: raw.latitude,\n      }),\n    );\n  }\n}\n\nfunction coerceNumber(value: unknown): number | null {\n  if (value === null || value === undefined || value === '') {\n    return null;\n  }\n\n  const parsed = Number(value);\n  return Number.isFinite(parsed) ? parsed : null;\n}\n","<form\n  [formGroup]=\"form\"\n  [class]=\"modal.contentClass + ' flex flex-col gap-4 p-4'\"\n>\n  <mt-text-field\n    [label]=\"'components.locationField.displayName' | transloco\"\n    [placeholder]=\"'components.locationField.displayName' | transloco\"\n    formControlName=\"display_name\"\n    [required]=\"true\"\n  />\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n    <mt-number-field\n      [label]=\"'components.locationField.longitude' | transloco\"\n      [placeholder]=\"'components.locationField.longitude' | transloco\"\n      [min]=\"-180\"\n      [max]=\"180\"\n      formControlName=\"longitude\"\n      [required]=\"true\"\n    />\n    <mt-number-field\n      [label]=\"'components.locationField.latitude' | transloco\"\n      [placeholder]=\"'components.locationField.latitude' | transloco\"\n      [min]=\"-90\"\n      [max]=\"90\"\n      formControlName=\"latitude\"\n      [required]=\"true\"\n    />\n  </div>\n</form>\n\n<div [class]=\"modal.footerClass\">\n  <mt-button\n    [label]=\"'components.locationField.cancel' | transloco\"\n    variant=\"outlined\"\n    (onClick)=\"cancel()\"\n  />\n  <mt-button\n    [label]=\"'components.locationField.save' | transloco\"\n    severity=\"primary\"\n    [disabled]=\"form.invalid\"\n    (onClick)=\"save()\"\n  />\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { HttpBackend, HttpClient, HttpParams } from '@angular/common/http';\nimport {\n  ControlValueAccessor,\n  FormsModule,\n  NgControl,\n  Validators,\n} from '@angular/forms';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { TranslocoPipe, TranslocoService } from '@jsverse/transloco';\nimport { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';\nimport { InputGroupModule } from 'primeng/inputgroup';\nimport { InputGroupAddonModule } from 'primeng/inputgroupaddon';\nimport {\n  catchError,\n  debounceTime,\n  finalize,\n  of,\n  Subject,\n  switchMap,\n  take,\n  tap,\n} from 'rxjs';\nimport { FieldValidation } from '@masterteam/components/field-validation';\nimport { isInvalid } from '@masterteam/components';\nimport { Tooltip } from '@masterteam/components/tooltip';\nimport { ModalService } from '@masterteam/components/modal';\nimport { Icon } from '@masterteam/icons';\nimport { LocationManualDialog } from './location-manual-dialog';\nimport {\n  getLocationDisplayName,\n  LocationValue,\n  normalizeLocationValue,\n} from './location-value';\n\nexport interface LocationFieldConfiguration {\n  country?: string | { name?: string; code?: string; viewBox?: string };\n  viewBox?: string;\n  nominatimBaseUrl?: string;\n  [key: string]: unknown;\n}\n\n@Component({\n  selector: 'mt-location-field',\n  imports: [\n    FormsModule,\n    AutoCompleteModule,\n    InputGroupModule,\n    InputGroupAddonModule,\n    FieldValidation,\n    Tooltip,\n    Icon,\n    TranslocoPipe,\n  ],\n  templateUrl: './location-field.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'grid gap-1',\n  },\n})\nexport class LocationField implements ControlValueAccessor {\n  readonly hint = input<string>();\n  readonly label = input<string>();\n  readonly placeholder = input<string>();\n  readonly readonly = input<boolean>(false);\n  readonly required = input<boolean>(false);\n  readonly minLength = input<number>(2);\n  readonly configuration = input<LocationFieldConfiguration | null>(null);\n  readonly searchUrl = input<string | undefined>(\n    'https://nominatim.openstreetmap.org/search',\n  );\n\n  protected readonly value = signal<LocationValue | null>(null);\n  protected readonly suggestions = signal<LocationValue[]>([]);\n  protected readonly disabled = signal(false);\n  protected readonly loading = signal(false);\n  protected readonly requiredValidator = Validators.required;\n  protected readonly autocomplete = viewChild<AutoComplete>('autocomplete');\n\n  protected readonly displayValue = computed(() =>\n    getLocationDisplayName(this.value()),\n  );\n\n  protected readonly resolvedSearchUrl = computed(() => {\n    const configuredUrl = this.configuration()?.nominatimBaseUrl;\n    return typeof configuredUrl === 'string' && configuredUrl.trim()\n      ? configuredUrl\n      : (this.searchUrl() ?? 'https://nominatim.openstreetmap.org/search');\n  });\n\n  protected readonly countryName = computed(() => {\n    const country = this.configuration()?.country;\n    if (typeof country === 'string') return country.trim();\n    return country?.name?.trim() ?? '';\n  });\n\n  protected readonly countryCode = computed(() => {\n    const country = this.configuration()?.country;\n    if (typeof country === 'object') return country?.code?.trim() ?? '';\n    return '';\n  });\n\n  protected readonly viewBox = computed(() => {\n    const config = this.configuration();\n    const country = config?.country;\n    if (typeof config?.viewBox === 'string' && config.viewBox.trim()) {\n      return config.viewBox;\n    }\n    if (typeof country === 'object' && country?.viewBox?.trim()) {\n      return country.viewBox;\n    }\n    return '';\n  });\n\n  public ngControl: NgControl | null = null;\n  protected readonly isInvalid = isInvalid;\n\n  private readonly modal = inject(ModalService);\n  private readonly transloco = inject(TranslocoService);\n  private readonly http = new HttpClient(inject(HttpBackend));\n  private readonly searchTerms = new Subject<string>();\n\n  protected onTouched: () => void = () => {};\n  private onModelChange: (value: LocationValue | null) => void = () => {};\n\n  constructor() {\n    this.ngControl = inject(NgControl, { self: true, optional: true });\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n\n    effect(() => {\n      if (this.ngControl?.control && this.required()) {\n        this.ngControl.control.addValidators(Validators.required);\n        this.ngControl.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n\n    this.searchTerms\n      .pipe(\n        takeUntilDestroyed(),\n        debounceTime(250),\n        tap(() => this.loading.set(true)),\n        switchMap((term) => this.searchLocations(term)),\n      )\n      .subscribe((items) => this.suggestions.set(items));\n  }\n\n  protected search(event: { query: string }): void {\n    this.searchTerms.next(event.query);\n  }\n\n  protected onFocus(): void {\n    if (this.suggestions().length > 0) {\n      this.autocomplete()?.show();\n    }\n  }\n\n  protected onSelect(event: {\n    originalEvent: Event;\n    value: LocationValue;\n  }): void {\n    this.setValue(normalizeLocationValue(event.value));\n  }\n\n  protected onClear(): void {\n    this.setValue(null);\n    this.suggestions.set([]);\n  }\n\n  protected openManualDialog(): void {\n    if (this.disabled() || this.readonly()) return;\n\n    const ref = this.modal.openModal(LocationManualDialog, 'dialog', {\n      header: this.transloco.translate('components.locationField.manualHeader'),\n      styleClass: '!w-[40rem] max-w-[96vw]',\n      dismissableMask: true,\n      inputValues: {\n        initialValue: this.value(),\n      },\n    });\n\n    ref.onClose.pipe(take(1)).subscribe((result: unknown) => {\n      const next = normalizeLocationValue(result);\n      if (!next) return;\n      this.setValue(next);\n    });\n  }\n\n  writeValue(value: unknown): void {\n    this.value.set(normalizeLocationValue(value));\n  }\n\n  registerOnChange(fn: (value: LocationValue | null) => void): void {\n    this.onModelChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean): void {\n    this.disabled.set(disabled);\n  }\n\n  private setValue(value: LocationValue | null): void {\n    this.value.set(value);\n    this.onModelChange(value);\n    this.onTouched();\n  }\n\n  private searchLocations(term: string) {\n    const trimmed = term?.trim();\n    if (!trimmed || trimmed.length < this.minLength()) {\n      this.loading.set(false);\n      return of<LocationValue[]>([]);\n    }\n\n    const countryName = this.countryName();\n    const query =\n      countryName && !trimmed.toLowerCase().includes(countryName.toLowerCase())\n        ? `${trimmed}, ${countryName}`\n        : trimmed;\n\n    let params = new HttpParams()\n      .set('q', query)\n      .set('format', 'json')\n      .set('addressdetails', '1')\n      .set('limit', '10')\n      .set('accept-language', this.transloco.getActiveLang() || 'en');\n\n    const viewBox = this.viewBox();\n    if (viewBox) {\n      params = params.set('bounded', '1').set('viewbox', viewBox);\n    }\n\n    const countryCode = this.countryCode();\n    if (countryCode) {\n      params = params.set('countrycodes', countryCode.toLowerCase());\n    }\n\n    return this.http.get<unknown[]>(this.resolvedSearchUrl(), { params }).pipe(\n      finalize(() => this.loading.set(false)),\n      catchError((error) => {\n        console.error('Location search failed:', error);\n        return of<unknown[]>([]);\n      }),\n      switchMap((items) =>\n        of(\n          items\n            .map((item) => normalizeLocationValue(item))\n            .filter((item): item is LocationValue => item !== null),\n        ),\n      ),\n    );\n  }\n}\n","@if (label() || hint()) {\n  <div class=\"mb-1 flex items-center gap-1\">\n    @if (label()) {\n      <label\n        [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n        [for]=\"ngControl?.name || label()\"\n      >\n        {{ label() }}\n      </label>\n    }\n    @if (hint()) {\n      <span\n        class=\"inline-flex text-surface-400\"\n        [mtTooltip]=\"hint()\"\n        tooltipPosition=\"top\"\n      >\n        <mt-icon icon=\"general.help-circle\" />\n      </span>\n    }\n  </div>\n}\n\n<div class=\"relative\">\n  <p-inputgroup>\n    <p-autoComplete\n      #autocomplete=\"\"\n      [suggestions]=\"suggestions()\"\n      (completeMethod)=\"search($event)\"\n      (onSelect)=\"onSelect($event)\"\n      (onClear)=\"onClear()\"\n      (onFocus)=\"onFocus()\"\n      (onBlur)=\"onTouched()\"\n      [ngModel]=\"value()\"\n      [disabled]=\"disabled() || readonly()\"\n      [id]=\"ngControl?.name || label()\"\n      [invalid]=\"isInvalid(ngControl?.control)\"\n      [placeholder]=\"'components.locationField.search' | transloco\"\n      [optionLabel]=\"'display_name'\"\n      [minLength]=\"minLength()\"\n      [forceSelection]=\"true\"\n      class=\"w-full\"\n      appendTo=\"body\"\n      styleClass=\"w-full\"\n    >\n      <ng-template let-location pTemplate=\"item\">\n        <div class=\"flex min-w-0 items-start gap-2\">\n          <mt-icon icon=\"map.marker-pin-01\" class=\"mt-0.5 shrink-0 text-xl\" />\n          <span class=\"min-w-0 text-wrap text-sm leading-5\">\n            {{ location.display_name }}\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template let-location pTemplate=\"selecteditem\">\n        <span class=\"min-w-0 truncate\">{{ location?.display_name }}</span>\n      </ng-template>\n    </p-autoComplete>\n\n    <p-inputgroup-addon>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-full items-center justify-center text-surface-500 transition-colors hover:text-primary-500 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"disabled() || readonly()\"\n        [mtTooltip]=\"'components.locationField.enterManually' | transloco\"\n        tooltipPosition=\"top\"\n        (click)=\"openManualDialog()\"\n      >\n        <mt-icon icon=\"general.edit-03\" />\n      </button>\n    </p-inputgroup-addon>\n  </p-inputgroup>\n\n  @if (loading()) {\n    <mt-icon\n      icon=\"general.loading-01\"\n      class=\"absolute end-12 top-1/2 -translate-y-1/2 animate-spin bg-white\"\n    />\n  }\n</div>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-multi-select-field.mjs

@@ -238,13 +238,13 @@ class MultiSelectField {
             optionOrValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MultiSelectField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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      @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    }\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.2.8", 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" }]
+                    }, 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      @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    }\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 }]