@yuuvis/client-framework 2.3.11 → 2.3.13

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

@@ -3,7 +3,7 @@ import { CommonModule, DecimalPipe, DatePipe, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, signal, input, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, computed, effect, untracked, viewChild, DestroyRef, Input, output, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormGroup, FormControl } from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormGroup, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i3 from '@angular/material/icon';
@@ -49,13 +49,11 @@ class EditTableDataComponent {
         this.tableForm = this.#fb.group({});
         this.isInnerTableForm = input(true);
         this.formElement = this.#dialogData.formElement || {};
-        this.columns = (this.formElement['elements'] || []).map((c) => {
-            return {
-                ...c,
-                propertyType: c.type,
-                _internalType: this.#system.getInternalFormElementType(c.type, c.classification)
-            };
-        });
+        this.columns = (this.formElement['elements'] || []).map((c) => ({
+            ...c,
+            propertyType: c.type,
+            _internalType: this.#system.getInternalFormElementType(c.type, c.classifications)
+        }));
         this.#elementData = this.#dialogData.elementData || {};
         this.situation = this.#dialogData.situation || Situation.EDIT;
         this.header = this.#dialogData.label || '';
@@ -383,11 +381,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DatetimeComponent extends AbstractMatFormField {
+    #localeEffect;
     constructor() {
-        super(...arguments);
+        super();
         this.translate = inject(TranslateService$1);
         this.pickerCmp = viewChild.required(DatepickerComponent);
         this.ngControl = injectNgControl(this);
+        this.fc = new FormControl(null);
         this._locale = signal(this.translate.currentLang);
         this.locale = input(this.translate.currentLang);
         this.#localeEffect = effect(() => {
@@ -411,10 +411,12 @@ class DatetimeComponent extends AbstractMatFormField {
         this.withTime = input(false);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.validationChange = () => { };
+        this.fc.valueChanges.subscribe((v) => this.onValueChange(v));
+        this.fc.statusChanges.subscribe((v) => {
+            this.errorState = v === 'INVALID';
+            this.ngControl?.control?.setErrors(this.errorState ? { invalid: true } : null);
+        });
     }
-    #localeEffect;
     #setLabels() {
         this.labels = {
             calendarApply: this.translate.instant('yuv.form.element.datetime.calendar.select'),
@@ -448,9 +450,6 @@ class DatetimeComponent extends AbstractMatFormField {
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
-    registerOnValidatorChange(fn) {
-        this.validationChange = fn;
-    }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched() { }
     onValueChange(e) {
@@ -461,13 +460,13 @@ class DatetimeComponent extends AbstractMatFormField {
         this.#setLabels();
         this.translate.onLangChange.subscribe((e) => this._locale.set(e.lang));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", 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  [ngModelOptions]=\"{ standalone: true }\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onValueChange($event)\"\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: 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: YuvDatepickerModule }, { kind: "component", type: i2$2.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvDatepickerModule }, { kind: "component", type: i2$2.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'yuv-datetime', standalone: true, imports: [FormsModule, YuvDatepickerModule, MatInputModule, MatDatepickerModule], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [ngModelOptions]=\"{ standalone: true }\"\n  [(ngModel)]=\"value\"\n  (ngModelChange)=\"onValueChange($event)\"\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"] }]
-        }] });
+            args: [{ selector: 'yuv-datetime', standalone: true, imports: [ReactiveFormsModule, YuvDatepickerModule, MatInputModule, MatDatepickerModule], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], 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"] }]
+        }], ctorParameters: () => [] });
 
 class DatetimeRangeComponent extends AbstractMatFormField {
     constructor() {
@@ -1976,6 +1975,10 @@ class CatalogComponent extends AbstractMatFormField {
                 }
             });
         });
+        /**
+         * 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
@@ -2021,14 +2024,12 @@ class CatalogComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CatalogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: false, 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\">{{ o }}</mat-option>\n  }\n</mat-select>\n", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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\">{{ o }}</mat-option>\n  }\n</mat-select>\n", 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.14", ngImport: i0, type: CatalogComponent, decorators: [{
             type: Component,
             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" }]
-        }], propDecorators: { situation: [{
-                type: Input
-            }] } });
+        }] });
 
 const formElementCmps = [
     StringComponent,