@yuuvis/client-framework 3.22.0 → 3.23.0

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

@@ -9,7 +9,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { SystemService, TranslateService, Classification, TranslatePipe, Situation, Utils, Operator, OperatorLabel, CatalogService, LocaleNumberPipe, FileSizePipe, IdmService, UserService, AppCacheService, FREE_TEXT_OPTION, USER_ID_REGEX, STORAGE_ROLES_KEY, SearchUtils, LocaleDatePipe, SearchService, DmsService, ObjectConfigService, DmsObject, BaseObjectTypeField, ClassificationPrefix } from '@yuuvis/client-core';
 import { AbstractMatFormField, injectNgControl, FormTranslateService, DialogComponent, ScrollButtonsComponent } from '@yuuvis/client-framework/common';
 import * as i1$3 from '@angular/common';
-import { NgClass, CommonModule } from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i2 from '@angular/material/icon';
@@ -152,6 +152,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'yuv-catalog', imports: [MatSelectModule, ReactiveFormsModule, TranslatePipe], providers: [{ provide: MatFormFieldControl, useExisting: CatalogComponent }], template: "<mat-select [multiple]=\"multiple()\" [disabled]=\"readonly()\" [formControl]=\"formCtrl\">\n  @if (!multiple() && !required) {\n    <mat-option [value]=\"null\">{{ 'yuv.form.element.catalog.option.none' | translate }}</mat-option>\n  }\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 }] }] } });
 
+const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+/**
+ * Form input for a color value. Renders a hex text input alongside a native color picker
+ * swatch; both stay in sync. The value is a hex color string (e.g. `#2A70AC`).
+ *
+ * Implements `ControlValueAccessor` so it can be used within Angular forms and Material form
+ * fields.
+ *
+ * @example
+ * <mat-form-field>
+ *   <mat-label>Primary color</mat-label>
+ *   <yuv-color formControlName="primaryColor"></yuv-color>
+ * </mat-form-field>
+ */
+class ColorComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#dRef = inject(DestroyRef);
+        /** the color swatch (native `<input type="color">`, always a full 6-digit hex) */
+        this.colorFc = new FormControl('#000000', { nonNullable: true });
+        /** the editable hex text input (source of truth for the value) */
+        this.textFc = new FormControl(null);
+        this.ngControl = injectNgControl(this);
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #dRef;
+    writeValue(value) {
+        this.value = value;
+        this.textFc.setValue(value ?? null, { emitEvent: false });
+        if (value && HEX_PATTERN.test(value)) {
+            this.colorFc.setValue(value, { emitEvent: false });
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched() { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.colorFc.disable();
+            this.textFc.disable();
+        }
+        else {
+            this.colorFc.enable();
+            this.textFc.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        const validators = [(control) => this.#hexValidator(control.value)];
+        if (this.required)
+            validators.push(() => (this.value ? null : { required: true }));
+        this.textFc.setValidators(validators);
+        this.textFc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
+            this.errorState = FormUtils.getErrorState(this.textFc);
+            this.ngControl?.control?.setErrors(this.textFc.errors);
+        });
+        // hex text drives the value; keep the swatch in sync when the text is a valid hex
+        this.textFc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            const hex = v?.trim() || null;
+            this.value = hex;
+            if (hex && HEX_PATTERN.test(hex)) {
+                this.colorFc.setValue(hex, { emitEvent: false });
+            }
+            this.propagateChange(hex);
+        });
+        // swatch changes update the hex text (which re-propagates)
+        this.colorFc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.textFc.setValue(v);
+        });
+        this.textFc.updateValueAndValidity();
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    #hexValidator(value) {
+        if (!value)
+            return null;
+        return HEX_PATTERN.test(value.trim()) ? null : { color: { valid: false } };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: ColorComponent, isStandalone: true, selector: "yuv-color", providers: [{ provide: MatFormFieldControl, useExisting: ColorComponent }], usesInheritance: true, ngImport: i0, template: "<span class=\"yuv-color\">\n  <label class=\"yuv-color__swatch\" [style.background-color]=\"colorFc.value\">\n    <input type=\"color\" [formControl]=\"colorFc\" aria-hidden=\"true\" tabindex=\"-1\" />\n  </label>\n  <input class=\"yuv-color__hex\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [formControl]=\"textFc\" />\n</span>\n", styles: [".yuv-color{display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);width:100%;margin-block-start:var(--ymt-spacing-xs)}.yuv-color__swatch{position:relative;flex:0 0 auto;inline-size:var(--ymt-sizing-m);block-size:var(--ymt-sizing-m);border-radius:var(--ymt-corner-xs);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);overflow:hidden;cursor:pointer;outline:2px solid currentColor;outline-offset:-1px}.yuv-color__swatch input[type=color]{position:absolute;inset:0;inline-size:100%;block-size:100%;padding:0;border:none;opacity:0;cursor:pointer}.yuv-color__hex{flex:1 1 auto;min-inline-size:0;border:none;outline:none;background:transparent;color:var(--ymt-text-color);font:var(--ymt-font-body)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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.20", ngImport: i0, type: ColorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-color', standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: ColorComponent }], template: "<span class=\"yuv-color\">\n  <label class=\"yuv-color__swatch\" [style.background-color]=\"colorFc.value\">\n    <input type=\"color\" [formControl]=\"colorFc\" aria-hidden=\"true\" tabindex=\"-1\" />\n  </label>\n  <input class=\"yuv-color__hex\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [formControl]=\"textFc\" />\n</span>\n", styles: [".yuv-color{display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);width:100%;margin-block-start:var(--ymt-spacing-xs)}.yuv-color__swatch{position:relative;flex:0 0 auto;inline-size:var(--ymt-sizing-m);block-size:var(--ymt-sizing-m);border-radius:var(--ymt-corner-xs);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);overflow:hidden;cursor:pointer;outline:2px solid currentColor;outline-offset:-1px}.yuv-color__swatch input[type=color]{position:absolute;inset:0;inline-size:100%;block-size:100%;padding:0;border:none;opacity:0;cursor:pointer}.yuv-color__hex{flex:1 1 auto;min-inline-size:0;border:none;outline:none;background:transparent;color:var(--ymt-text-color);font:var(--ymt-font-body)}\n"] }]
+        }] });
+
 class EditTableDataComponent {
     constructor() {
         this.#fb = inject(FormBuilder);
@@ -1062,6 +1152,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
         }], ctorParameters: () => [], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], propertyName: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertyName", 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 }] }] } });
 
 var _a;
+/**
+ * Splits a number into the digits of its mantissa and its decimal exponent, so that
+ * digit counting stays correct for values JavaScript renders in exponential notation
+ * (`1e-7`, `1e21`).
+ */
+function splitDigits(value) {
+    const [mantissa, exponent] = Math.abs(value).toString().split('e');
+    const [intPart, fractionPart = ''] = mantissa.split('.');
+    return { intPart, fractionPart, exponent: Number(exponent ?? 0) };
+}
+/** Decimal places of a number: `12.5` → 1, `12` → 0, `1e-7` → 7. */
+function decimalPlaces(value) {
+    const { fractionPart, exponent } = splitDigits(value);
+    return Math.max(0, fractionPart.length - exponent);
+}
+/** Digits before the decimal separator, sign excluded: `-1234.5` → 4, `0.5` → 1. */
+function integerDigits(value) {
+    const { intPart, exponent } = splitDigits(value);
+    return Math.max(1, intPart.length + exponent);
+}
 /**
  * Creates form input for number values.
  *
@@ -1207,16 +1317,16 @@ class NumberComponent extends AbstractMatFormField {
                 errors.push({ key: 'number' });
             }
             else {
-                const split = control.value.replaceAll(this.transformPipe.separator, '').split(this.transformPipe.decimalSeparator);
+                // Digits are counted on the parsed value, never on the typed text: the text
+                // carries locale separators, a sign and — for the filesize classification —
+                // a unit ("1.5 MB"), none of which say anything about the value being stored.
                 // check precision
-                if (this.#precision() !== undefined) {
-                    const prePointDigits = this.#precision() - this.#scale();
-                    if (split[0]?.length > prePointDigits) {
-                        errors.push({ key: 'precision', params: { prePointDigits } });
-                    }
+                const prePointDigits = this.#precision() - this.#scale();
+                if (integerDigits(val) > prePointDigits) {
+                    errors.push({ key: 'precision', params: { prePointDigits } });
                 }
-                // check scale
-                if (this.#scale() && split[1]?.length > this.#scale()) {
+                // check scale: a scale of 0 (set explicitly or left unset) allows no decimals at all
+                if (decimalPlaces(val) > this.#scale()) {
                     errors.push({ key: 'scale', params: { scale: this.#scale() } });
                 }
                 // min max
@@ -1632,7 +1742,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
             args: [{ selector: 'yuv-organization-set', imports: [FormsModule, YuvAutocompleteModule, MatTooltipModule, MatIconModule, ReactiveFormsModule, TranslatePipe$1], providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], template: "<yuv-autocomplete\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  (autocompleteFnc)=\"autocompleteFn($event)\"\n  [multiple]=\"true\"\n  [maxItems]=\"multiselect() ? -1 : 1\"\n>\n  <!-- template for item inside the dropdown -->\n  <ng-template #optionTemplate let-item>\n    <span class=\"chip\">{{ item.value.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || item.label || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"] }]
         }], propDecorators: { situation: [{ type: i0.Input, args: [{ isSignal: true, alias: "situation", required: false }] }], multiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiselect", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], withMetadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "withMetadata", required: false }] }], autocompleteMinLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocompleteMinLength", required: false }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], types: [{ type: i0.Input, args: [{ isSignal: true, alias: "types", required: false }] }] } });
 
-const mapOrganizationNode = (innerValue, excludeUserId) => map$1((nodes) => nodes
+/**
+ * Maps IDM results to autocomplete items. The `user` / `role` discriminator is supplied by the
+ * caller instead of being inferred from the node's shape: the organization set already carries
+ * a correct `type`, and every result of `queryUser()` is a user by definition.
+ */
+const mapOrganizationNode = (innerValue, nodeType, excludeUserId) => map$1((nodes) => nodes
     .filter((node) => !innerValue?.some((value) => value?.id === node.id))
     // `excludeMe` cannot be left to the backend: `/idm/search` has no such parameter at all,
     // and `/idm/users?excludeMe=true` is not guaranteed to honour it. Dropping the current
@@ -1644,7 +1759,7 @@ const mapOrganizationNode = (innerValue, excludeUserId) => map$1((nodes) => node
     value: {
         id: node.id,
         title: node.title,
-        type: 'user' in node ? 'user' : 'role'
+        type: nodeType(node)
     }
 })));
 /**
@@ -1928,10 +2043,10 @@ class OrganizationComponent extends AbstractMatFormField {
         this.acFormControl.updateValueAndValidity({ emitEvent: false });
     }
     #resolveOrganization(query, excludeMe, filterRoles) {
-        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrganizationNode(this.innerValue, excludeMe ? this.#ownUserId() : undefined), catchError(() => of([])));
+        return this.#userService.queryUser(query, excludeMe, filterRoles).pipe(mapOrganizationNode(this.innerValue, () => 'user', excludeMe ? this.#ownUserId() : undefined), catchError(() => of([])));
     }
     #resolveOrganizationSet(query, excludeMe, filterRoles) {
-        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue, excludeMe ? this.#ownUserId() : undefined), catchError(() => of([])));
+        return this.#idmService.queryOrganizationEntity(query, filterRoles).pipe(mapOrganizationNode(this.innerValue, (node) => node.type, excludeMe ? this.#ownUserId() : undefined), catchError(() => of([])));
     }
     /** Id of the signed-in user — the value {@link excludeMe} filters out of the suggestions. */
     #ownUserId() {
@@ -2878,5 +2993,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, ReferenceComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, ColorComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, ReferenceComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map