@yuuvis/client-framework 2.3.23 → 2.3.25

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

@@ -1942,6 +1942,7 @@ class CatalogComponent extends AbstractMatFormField {
         super(...arguments);
         this.#system = inject(SystemService);
         this.#dRef = inject(DestroyRef);
+        this.translate = inject(TranslateService);
         this.readonly = input(false);
         this.multiple = input(false);
         this._options = signal([]);
@@ -1959,8 +1960,13 @@ class CatalogComponent extends AbstractMatFormField {
             const cls = this.classifications();
             untracked(() => {
                 const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG);
+                const ceTranslate = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG_I18N);
                 if (ce && ce.options) {
-                    this._options.set(ce.options);
+                    this.#setOptions(ce.options, false);
+                }
+                // i18n catalog
+                if (ceTranslate && ceTranslate.options) {
+                    this.#setOptions(ceTranslate.options, true);
                 }
             });
         });
@@ -1981,6 +1987,14 @@ class CatalogComponent extends AbstractMatFormField {
         this.value = val;
         this.propagateChange(this.value);
     }
+    #setOptions(options, translate) {
+        if (translate) {
+            this._options.set(options.map((o) => this.translate.instant(o)));
+        }
+        else {
+            this._options.set(options);
+        }
+    }
     writeValue(value) {
         this.value = value;
     }
@@ -2020,6 +2034,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'yuv-catalog', imports: [CommonModule, 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\">{{ o }}</mat-option>\n  }\n</mat-select>\n" }]
         }] });
 
+/**
+ * Form element for selecting one or multiple i18n catalog values.
+ * Having a classification of `i18n:catalog[one, two, three]` configured on the metadata field
+ * will automatically populate the options from the catalog. The options will be translated
+ * using the catalogs static values adding a prefix, the property name an the value itself.
+ * E.g. for property name `status` and option value `open` the label key will be `catalog:status:open_label`.
+ */
+class I18nCatalogComponent extends AbstractMatFormField {
+    #system;
+    #dRef;
+    #optionsEffect;
+    #classificationEffect;
+    constructor() {
+        super();
+        this.#system = inject(SystemService);
+        this.#dRef = inject(DestroyRef);
+        this.translate = inject(TranslateService);
+        this.readonly = input(false);
+        this.multiple = input(false);
+        this.propertyName = input(undefined);
+        this._options = signal([]);
+        this.options = input([]);
+        this.#optionsEffect = effect(() => {
+            untracked(() => {
+                this.#setOptions(this.options());
+            });
+        });
+        /**
+         * Additional semantics for the form element.
+         */
+        this.classifications = input([]);
+        this.#classificationEffect = effect(() => {
+            const cls = this.classifications();
+            untracked(() => {
+                const ce = this.#system.getClassifications(cls).get(Classification.STRING_CATALOG_I18N);
+                if (ce && ce.options) {
+                    this.#setOptions(ce.options);
+                }
+            });
+        });
+        /**
+         * 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();
+        this.ngControl = injectNgControl(this);
+        this.fc = new FormControl(undefined);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
+            // re-apply options to trigger translation
+            this.#setOptions(this.options());
+        });
+    }
+    #onValueChange(val) {
+        this.value = val;
+        this.propagateChange(this.value);
+    }
+    #setOptions(options) {
+        this._options.set(options.map((o) => ({
+            label: this.#translateOption(o),
+            value: o
+        })));
+    }
+    #translateOption(option) {
+        // labelkey: 'catalog:status:open_label' for option 'open'
+        // This will be derived fom a prefix the property name if available and this option itself
+        return this.#system.getLocalizedLabel(`catalog:${this.propertyName() || ''}:${option}`) || option;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.fc.disable();
+        }
+        else {
+            this.fc.enable();
+        }
+    }
+    ngOnInit() {
+        if (this.required)
+            this.fc.setValidators(Validators.required);
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = FormUtils.getErrorState(this.fc);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.fc.errors);
+            }
+        });
+        this.fc.updateValueAndValidity();
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.#onValueChange(v));
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: I18nCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: I18nCatalogComponent, isStandalone: true, selector: "yuv-i18n-catalog", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, propertyName: { classPropertyName: "propertyName", publicName: "propertyName", 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: I18nCatalogComponent }], 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>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: I18nCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-i18n-catalog', imports: [CommonModule, MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: I18nCatalogComponent }], 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>" }]
+        }], ctorParameters: () => [] });
+
 const formElementCmps = [
     StringComponent,
     NumberComponent,
@@ -2028,7 +2149,8 @@ const formElementCmps = [
     DatetimeRangeComponent,
     OrganizationComponent,
     StringComponent,
-    CatalogComponent
+    CatalogComponent,
+    I18nCatalogComponent
 ];
 /**
  * Module for the forms library.
@@ -2042,14 +2164,16 @@ class YuvFormsModule {
             DatetimeRangeComponent,
             OrganizationComponent,
             StringComponent,
-            CatalogComponent], exports: [StringComponent,
+            CatalogComponent,
+            I18nCatalogComponent], exports: [StringComponent,
             NumberComponent,
             NumberRangeComponent,
             DatetimeComponent,
             DatetimeRangeComponent,
             OrganizationComponent,
             StringComponent,
-            CatalogComponent] }); }
+            CatalogComponent,
+            I18nCatalogComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvFormsModule, imports: [formElementCmps] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvFormsModule, decorators: [{
@@ -2064,5 +2188,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, FormUtils, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map