@yuuvis/client-framework 3.2.2 → 3.4.0

package/fesm2022/yuuvis-client-framework-forms.mjs

@@ -48,40 +48,45 @@ class CatalogComponent extends AbstractMatFormField {
         super(...arguments);
         this.#system = inject(SystemService);
         this.#dRef = inject(DestroyRef);
-        this.translate = inject(TranslateService);
+        this.#translate = inject(TranslateService);
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         this._options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
         this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional semantics for the form element.
+         */
+        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
+        /**
+         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation
+         * of the form element will be turned off, so you are able to enter search terms that do not
+         * meet the elements validators.
+         */
+        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
+        this.ngControl = injectNgControl(this);
+        this.formCtrl = new FormControl(undefined);
         this.#optionsEffect = effect(() => {
             untracked(() => {
                 this.#setOptions(this.options() || [], false);
             });
         }, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Additional semantics for the form element.
-         */
-        this.classifications = input([], ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
         this.#classificationEffect = effect(() => {
             const cls = this.classifications();
             untracked(() => {
-                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG);
-                if (ce && ce.options) {
-                    this.#setOptions(ce.options, false);
+                const cle = this.#system
+                    .getClassifications(cls)
+                    .get(Classification.STRING_CATALOG);
+                if (cle?.options) {
+                    this.#setOptions(cle.options, false);
                 }
             });
         }, ...(ngDevMode ? [{ debugName: "#classificationEffect" }] : /* istanbul ignore next */ []));
-        /**
-         * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
-         */
-        this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
-        this.ngControl = injectNgControl(this);
-        this.fc = new FormControl(undefined);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
     }
     #system;
     #dRef;
+    #translate;
     #optionsEffect;
     #classificationEffect;
     #onValueChange(val) {
@@ -90,57 +95,60 @@ class CatalogComponent extends AbstractMatFormField {
     }
     #setOptions(options, translate) {
         if (translate) {
-            this._options.set(options.map((o) => ({
-                label: this.translate.instant(o),
-                value: o
+            this._options.set(options.map((opt) => ({
+                label: this.#translate.instant(opt),
+                value: opt
             })));
         }
         else {
-            this._options.set(options.map((o) => ({
-                label: o,
-                value: o
+            this._options.set(options.map((opt) => ({
+                label: opt,
+                value: opt
             })));
         }
     }
     writeValue(value) {
         this.value = value;
-        this.fc.setValue(value, { emitEvent: false });
+        this.formCtrl.setValue(value, { emitEvent: false });
     }
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    registerOnTouched(fn) { }
+    registerOnTouched() { }
     setDisabledState(isDisabled) {
         if (isDisabled) {
-            this.fc.disable();
+            this.formCtrl.disable();
         }
         else {
-            this.fc.enable();
+            this.formCtrl.enable();
         }
         this.disabled = isDisabled;
     }
     ngOnInit() {
         if (this.required)
-            this.fc.setValidators(Validators.required);
-        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
-            this.errorState = FormUtils.getErrorState(this.fc);
+            this.formCtrl.setValidators(Validators.required);
+        this.formCtrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
+            this.errorState = FormUtils.getErrorState(this.formCtrl);
             if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.fc.errors);
+                this.ngControl.control.setErrors(this.formCtrl.errors);
             }
         });
-        this.fc.updateValueAndValidity();
-        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
+        this.formCtrl.updateValueAndValidity();
+        this.formCtrl.valueChanges
+            .pipe(takeUntilDestroyed(this.#dRef))
+            .subscribe((value) => this.#onValueChange(value));
     }
     ngOnDestroy() {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CatalogComponent, isStandalone: true, selector: "yuv-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"formCtrl\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CatalogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"fc\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
+            args: [{ selector: 'yuv-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"formCtrl\">\n  @for (o of _options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
         }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
 
 class EditTableDataComponent {
@@ -527,25 +535,6 @@ class DatetimeComponent extends AbstractMatFormField {
     }
     #dRef;
     #localeEffect;
-    // constructor() {
-    //   super();
-    //   this.fc.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.onValueChange(v));
-    //   this.fc.statusChanges.pipe(takeUntilDestroyed()).subscribe((v) => {
-    //     this.errorState = FormUtils.getErrorState(this.fc);
-    //     if (this.ngControl?.control) {
-    //       this.ngControl.control.setErrors(this.fc.errors);
-    //     }
-    //     // this.errorState = v === 'INVALID';
-    //     // this.ngControl?.control?.setErrors(this.errorState ? { datecontrol: true } : null);
-    //   });
-    // }
-    #setLabels() {
-        this.labels = {
-            calendarApply: this.translate.instant('yuv.form.element.datetime.calendar.select'),
-            calendarCancel: this.translate.instant('yuv.form.element.datetime.calendar.cancel'),
-            shortcut: { today: this.translate.instant('yuv.form.element.datetime.calendar.today') }
-        };
-    }
     openCalendar() {
         this.pickerCmp().openCalendar();
     }
@@ -563,14 +552,6 @@ class DatetimeComponent extends AbstractMatFormField {
         // this.fc.setValue(this.value, { emitEvent: false });
         this.fc.patchValue(this.value, { emitEvent: false, onlySelf: true });
     }
-    #propagate(value) {
-        let propagateValue = value;
-        if (propagateValue && !this.withTime()) {
-            // returns a string in the format 'yyyy-MM-dd' like expected for resolution date
-            propagateValue = `${propagateValue.getFullYear()}-${(propagateValue.getMonth() + 1).toString().padStart(2, '0')}-${propagateValue.getDate().toString().padStart(2, '0')}`;
-        }
-        this.propagateChange(propagateValue);
-    }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
@@ -591,15 +572,32 @@ class DatetimeComponent extends AbstractMatFormField {
     ngOnInit() {
         this.focusHandled.set(true);
         this.#setLabels();
-        this.translate.onLangChange.subscribe((e) => this._locale.set(e.lang));
-        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.onValueChange(v));
-        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+        this.translate.onLangChange.subscribe((evt) => this._locale.set(evt.lang));
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((value) => this.onValueChange(value));
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
             this.errorState = FormUtils.getErrorState(this.fc);
             if (this.ngControl?.control) {
                 this.ngControl.control.setErrors(this.fc.errors);
             }
         });
     }
+    #setLabels() {
+        this.labels = {
+            calendarApply: this.translate.instant('yuv.form.element.datetime.calendar.select'),
+            calendarCancel: this.translate.instant('yuv.form.element.datetime.calendar.cancel'),
+            shortcut: { today: this.translate.instant('yuv.form.element.datetime.calendar.today') }
+        };
+    }
+    #propagate(value) {
+        let propagateValue = value;
+        if (propagateValue && !this.withTime()) {
+            // returns a string in the format 'yyyy-MM-dd' like expected for resolution date
+            const month = (propagateValue.getMonth() + 1).toString().padStart(2, '0');
+            const day = propagateValue.getDate().toString().padStart(2, '0');
+            propagateValue = `${propagateValue.getFullYear()}-${month}-${day}`;
+        }
+        this.propagateChange(propagateValue);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: DatetimeComponent, isStandalone: true, selector: "yuv-datetime", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], viewQueries: [{ propertyName: "pickerCmp", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [formControl]=\"fc\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvDatepickerModule }, { kind: "component", type: i2$1.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
 }
@@ -777,6 +775,8 @@ class DynamicCatalogComponent extends AbstractMatFormField {
     #dRef;
     #translate;
     #currentLang;
+    #ctrlValue;
+    #optionIsActiveValidator;
     #optionsResource;
     constructor() {
         super();
@@ -787,14 +787,62 @@ class DynamicCatalogComponent extends AbstractMatFormField {
         this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
         this.#currentLang = signal(this.#translate.getCurrentLang(), ...(ngDevMode ? [{ debugName: "#currentLang" }] : /* istanbul ignore next */ []));
+        this.#ctrlValue = signal(undefined, ...(ngDevMode ? [{ debugName: "#ctrlValue" }] : /* istanbul ignore next */ []));
+        this.#optionIsActiveValidator = (control) => {
+            const val = control.value;
+            if (val === null || val === undefined || val === '' || (Array.isArray(val) && val.length === 0))
+                return null;
+            const opts = this.options();
+            const values = Array.isArray(val) ? val : [val];
+            const hasInvalid = values.some((v) => {
+                const opt = opts.find((o) => o.value === v);
+                return !opt || opt.disabled || opt.invalid;
+            });
+            return hasInvalid ? { invalidValue: true } : null;
+        };
         this.#optionsResource = rxResource({
-            params: computed(() => ({ catalog: this.catalog(), locale: this.#currentLang() })),
-            stream: ({ params }) => this.#catalogService.getEntries(params.catalog, { locale: params.locale }).pipe(map((res) => res.entries.map((entry) => ({
+            defaultValue: [],
+            params: computed(() => ({
+                catalog: this.catalog(),
+                situation: this.situation(),
+                locale: this.#currentLang()
+            })),
+            stream: ({ params }) => this.#catalogService
+                .getEntries(params.catalog, {
+                locale: params.locale,
+                includeInvalidEntries: true //params.situation === 'SEARCH' // include all entries in search situation
+            })
+                .pipe(map((res) => res.entries.map((entry) => ({
                 value: entry.name,
+                disabled: entry._state !== 'active', // disable entries that are not active
                 label: this.#resolveLabel(entry, params.locale)
-            }))))
+            }))), map((res) => {
+                const current = this.value;
+                const currentValues = Array.isArray(current) ? current : current ? [current] : [];
+                // pre-set values that are not part of the entries (e.g. deleted entry)
+                // get appended to the options list and marked as invalid.
+                for (const v of currentValues) {
+                    if (!res.find((opt) => opt.value === v)) {
+                        res.push({ value: v, disabled: true, invalid: true, label: v });
+                    }
+                }
+                return res;
+            }))
         });
         this.options = this.#optionsResource.value;
+        this.selectedDisplay = computed(() => {
+            const val = this.#ctrlValue();
+            if (val === null || val === undefined || val === '')
+                return [];
+            const opts = this.options();
+            const values = Array.isArray(val) ? val : [val];
+            return values.map((v) => {
+                const opt = opts.find((o) => o.value === v);
+                if (!opt)
+                    return { value: v, label: v, invalid: true };
+                return { value: v, label: opt.label, invalid: !!opt.invalid || !!opt.disabled };
+            });
+        }, ...(ngDevMode ? [{ debugName: "selectedDisplay" }] : /* istanbul ignore next */ []));
         /**
          * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation
          * validation of the form element will be turned off, so you are able to enter
@@ -802,13 +850,19 @@ class DynamicCatalogComponent extends AbstractMatFormField {
          */
         this.situation = input(...(ngDevMode ? [undefined, { debugName: "situation" }] : /* istanbul ignore next */ []));
         this.ngControl = injectNgControl(this);
-        this.ctrl = new FormControl(undefined);
+        this.ctrl = new FormControl(undefined, this.#optionIsActiveValidator);
         // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/explicit-module-boundary-types
         this.propagateChange = (fnc) => { };
         this.#translate.onLangChange.pipe(takeUntilDestroyed()).subscribe((evt) => this.#currentLang.set(evt.lang));
+        // re-run validation once options have resolved (writeValue may run before the catalog response arrives)
+        effect(() => {
+            this.options();
+            this.ctrl.updateValueAndValidity({ emitEvent: false });
+        });
     }
     writeValue(value) {
         this.value = value;
+        this.#ctrlValue.set(value);
         this.ctrl.setValue(value, { emitEvent: false });
     }
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
@@ -827,8 +881,15 @@ class DynamicCatalogComponent extends AbstractMatFormField {
         this.disabled = isDisabled;
     }
     ngOnInit() {
+        const validators = [this.#optionIsActiveValidator];
         if (this.required)
-            this.ctrl.setValidators(Validators.required);
+            validators.push(Validators.required);
+        // Mirror the parent FormControl's validators so the inner ctrl evaluates
+        // the same rules the host's NgControl does. Read lazily — picks up
+        // validators added after init.
+        validators.push((control) => this.ngControl?.control?.validator?.(control) ?? null);
+        this.ctrl.setValidators(validators);
+        this.ctrl.setAsyncValidators((control) => this.ngControl?.control?.asyncValidator?.(control) ?? of(null));
         this.ctrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
             this.errorState = FormUtils.getErrorState(this.ctrl);
             if (this.ngControl?.control) {
@@ -844,6 +905,7 @@ class DynamicCatalogComponent extends AbstractMatFormField {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     #onValueChange(val) {
         this.value = val;
+        this.#ctrlValue.set(val);
         this.propagateChange(this.value);
     }
     #resolveLabel(entry, locale) {
@@ -851,11 +913,11 @@ class DynamicCatalogComponent extends AbstractMatFormField {
         return locs.find((loc) => loc.locale === locale)?.label || locs[0]?.label || entry.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DynamicCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DynamicCatalogComponent, isStandalone: true, selector: "yuv-dynamic-catalog", inputs: { catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DynamicCatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"ctrl\">\n  @for (o of options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DynamicCatalogComponent, isStandalone: true, selector: "yuv-dynamic-catalog", inputs: { catalog: { classPropertyName: "catalog", publicName: "catalog", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DynamicCatalogComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"ctrl\">\n  <mat-select-trigger>\n    @if (multiple()) {\n      @for (s of selectedDisplay(); track s.value; let last = $last) {\n        <span [class.invalid]=\"s.invalid\">{{ s.label }}</span>@if (!last) {<span>, </span>}\n      }\n    } @else {\n      @if (selectedDisplay()[0]; as s) {\n        <span [class.invalid]=\"s.invalid\">{{ s.label }}</span>\n      }\n    }\n  </mat-select-trigger>\n  @for (o of options(); track o.value) {\n    <mat-option [disabled]=\"o.disabled\" [class.invalid]=\"o.invalid\" [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: ["mat-option.invalid,.invalid{color:var(--ymt-danger)}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DynamicCatalogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-dynamic-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: DynamicCatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"ctrl\">\n  @for (o of options(); track o) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n" }]
+            args: [{ selector: 'yuv-dynamic-catalog', imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: DynamicCatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"ctrl\">\n  <mat-select-trigger>\n    @if (multiple()) {\n      @for (s of selectedDisplay(); track s.value; let last = $last) {\n        <span [class.invalid]=\"s.invalid\">{{ s.label }}</span>@if (!last) {<span>, </span>}\n      }\n    } @else {\n      @if (selectedDisplay()[0]; as s) {\n        <span [class.invalid]=\"s.invalid\">{{ s.label }}</span>\n      }\n    }\n  </mat-select-trigger>\n  @for (o of options(); track o.value) {\n    <mat-option [disabled]=\"o.disabled\" [class.invalid]=\"o.invalid\" [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: ["mat-option.invalid,.invalid{color:var(--ymt-danger)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { catalog: [{ type: i0.Input, args: [{ isSignal: true, alias: "catalog", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }] } });
 
 /**