@yuuvis/client-framework 3.11.1 → 3.12.0

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

@@ -6,7 +6,7 @@ import { FormControl, Validators, ReactiveFormsModule, FormBuilder, NG_VALUE_ACC
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
 import * as i1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import { SystemService, TranslateService, Classification, TranslatePipe, Situation, Operator, OperatorLabel, Utils, CatalogService, LocaleNumberPipe, FileSizePipe, IdmService, UserService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
+import { SystemService, TranslateService, Classification, TranslatePipe, Situation, Operator, OperatorLabel, Utils, CatalogService, LocaleNumberPipe, FileSizePipe, IdmService, UserService, 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';
@@ -33,6 +33,7 @@ import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framewo
 import * as i2$2 from '@yuuvis/client-framework/autocomplete';
 import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
 import { map as map$1, catchError } from 'rxjs/operators';
+import { ShellService } from '@yuuvis/client-shell-core';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i1$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
@@ -1049,7 +1050,6 @@ class NumberComponent extends AbstractMatFormField {
         this.#dRef = inject(DestroyRef);
         this.translate = inject(TranslateService);
         // innerValue: string | null = null;
-        this.validationErrors = [];
         this.transformPipe = new LocaleNumberPipe(this.translate);
         this.innerCtrl = new FormControl(null);
         this.ngControl = injectNgControl(this);
@@ -1130,27 +1130,54 @@ class NumberComponent extends AbstractMatFormField {
     }
     // called when the input looses focus
     format() {
-        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
-            this.innerCtrl.patchValue(this.transformPipe.numberToString(this.value, this.#grouping(), this.groupPattern(), this.#scale()), { emitEvent: false });
+        // The blur handler runs before Angular's value accessor marks the control as
+        // touched, so mark it explicitly to make sure the error becomes visible.
+        this.innerCtrl.markAsTouched();
+        if (!this.readonly() && typeof this.value === 'number' && this.innerCtrl.valid) {
+            const formatted = this.transformPipe.numberToString(this.value, this.#grouping(), this.groupPattern(), this.#scale());
+            this.innerCtrl.patchValue(formatted, { emitEvent: false });
         }
+        this.#syncErrorState();
     }
     // called when the input get focus
     unformat() {
-        if (!this.readonly() && typeof this.value === 'number' && this.validationErrors.length === 0) {
+        if (!this.readonly() && typeof this.value === 'number' && this.innerCtrl.valid) {
             this.innerCtrl.patchValue(this.transformPipe.transform(this.value, false), {
                 emitEvent: false
             });
         }
     }
+    /**
+     * Mirrors the inner control's validity onto the component's `errorState` and the
+     * hosting `ngControl`. Invoked from the `statusChanges` subscription and from
+     * `format()` (blur): blur re-formats via an `emitEvent: false` patch, which does
+     * not fire `statusChanges`, so the error state has to be refreshed by hand there.
+     */
+    #syncErrorState() {
+        this.errorState = FormUtils.getErrorState(this.innerCtrl);
+        if (this.ngControl?.control) {
+            this.ngControl.control.setErrors(this.innerCtrl.errors);
+        }
+    }
+    /** Updates the model value and notifies the form, but only when it actually changed. */
+    #setValue(val) {
+        if (this.value !== val) {
+            this.value = val;
+            this.propagateChange(this.value);
+        }
+    }
     #getValidator() {
         return (control) => {
-            this.validationErrors = [];
+            // Pure validator: derive errors from the control value only, never mutate
+            // component state here. State written as a side-effect gets out of sync
+            // with the displayed value (validators also run on `emitEvent: false` writes).
+            const errors = [];
             if (Utils.isEmpty(control.value))
                 return null;
             const val = this.transformPipe.stringToNumber(control.value);
             // general number validation
             if (isNaN(val) || typeof val !== 'number') {
-                this.validationErrors.push({ key: 'number' });
+                errors.push({ key: 'number' });
             }
             else {
                 const split = control.value.replaceAll(this.transformPipe.separator, '').split(this.transformPipe.decimalSeparator);
@@ -1158,28 +1185,27 @@ class NumberComponent extends AbstractMatFormField {
                 if (this.#precision() !== undefined) {
                     const prePointDigits = this.#precision() - this.#scale();
                     if (split[0]?.length > prePointDigits) {
-                        this.validationErrors.push({ key: 'precision', params: { prePointDigits } });
+                        errors.push({ key: 'precision', params: { prePointDigits } });
                     }
                 }
                 // check scale
                 if (this.#scale() && split[1]?.length > this.#scale()) {
-                    this.validationErrors.push({ key: 'scale', params: { scale: this.#scale() } });
+                    errors.push({ key: 'scale', params: { scale: this.#scale() } });
                 }
                 // min max
                 if (!_a.betweenTwoNumbers(val, this.minValue(), this.maxValue())) {
                     if (Utils.isEmpty(this.minValue())) {
-                        this.validationErrors.push({ key: 'maxvalue', params: { maxValue: this.maxValue() } });
+                        errors.push({ key: 'maxvalue', params: { maxValue: this.maxValue() } });
                     }
                     else if (Utils.isEmpty(this.maxValue())) {
-                        this.validationErrors.push({ key: 'minvalue', params: { minValue: this.minValue() } });
+                        errors.push({ key: 'minvalue', params: { minValue: this.minValue() } });
                     }
                     else {
-                        this.validationErrors.push({ key: 'minmax', params: { minValue: this.minValue(), maxValue: this.maxValue() } });
+                        errors.push({ key: 'minmax', params: { minValue: this.minValue(), maxValue: this.maxValue() } });
                     }
                 }
             }
-            const e = Utils.arrayToObject(this.validationErrors, 'key', (err) => ({ valid: false, ...err }));
-            return this.validationErrors.length ? e : null;
+            return errors.length ? Utils.arrayToObject(errors, 'key', (err) => ({ valid: false, ...err })) : null;
         };
     }
     ngOnInit() {
@@ -1188,25 +1214,20 @@ class NumberComponent extends AbstractMatFormField {
         if (this.required)
             validators.push(Validators.required);
         this.innerCtrl.setValidators(validators);
-        this.innerCtrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
-            this.errorState = FormUtils.getErrorState(this.innerCtrl);
-            if (this.ngControl?.control) {
-                this.ngControl.control.setErrors(this.innerCtrl.errors);
-            }
-        });
+        this.innerCtrl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => this.#syncErrorState());
         this.innerCtrl.updateValueAndValidity();
         this.innerCtrl.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
             if (Utils.isEmpty(v)) {
-                this.value = null;
-                this.propagateChange(this.value);
+                this.#setValue(null);
             }
-            else {
+            else if (this.innerCtrl.valid) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                const val = this.transformPipe.stringToNumber(v);
-                if (this.validationErrors.length === 0 && this.value !== val) {
-                    this.value = val;
-                    this.propagateChange(this.value);
-                }
+                this.#setValue(this.transformPipe.stringToNumber(v));
+            }
+            else {
+                // Invalid input: do not keep the previous value silently in the background —
+                // clear the model so the form value matches what the user sees (an error).
+                this.#setValue(null);
             }
         });
     }
@@ -2116,6 +2137,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'yuv-range-select-filesize', standalone: true, imports: [MatSelectModule, ReactiveFormsModule], providers: [{ provide: MatFormFieldControl, useExisting: RangeSelectFilesizeComponent }], template: "<mat-select [panelWidth]=\"null\" [hideSingleSelectionIndicator]=\"true\" [formControl]=\"fc\">\n  @for (o of options(); track $index) {\n    <mat-option [value]=\"o.value\">{{ o.label }}</mat-option>\n  }\n</mat-select>\n", styles: [":host{display:flex}:host mat-select{flex:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }] } });
 
+/** Escape single quotes and backslashes for safe embedding in a CMIS statement. */
+function escapeCmis(value) {
+    return value.replace(/'/g, "''").replace(/\\/g, '\\\\');
+}
+/**
+ * Form input for references to other dms objects. As the user types, a CMIS
+ * fulltext search (narrowed to the allowed target types from the field's
+ * `id:reference[...]` classification) provides suggestions. The selected object
+ * id(s) are stored; on load they are resolved back to display chips.
+ *
+ * ## Label retrieval
+ *
+ * The chip label shown for a referenced object is its resolved object-config
+ * title, not a raw property. Both search hits and objects resolved on load are
+ * turned into a {@link ReferenceEntry} by `#toEntryFromDms`, which asks
+ * {@link ObjectConfigService.getResolvedObjectConfig} for the title of the
+ * object's data. The tricky part is picking the right config: reference targets
+ * are usually secondary object types (SOTs) applied to a generic primary type,
+ * and the title-defining config is keyed by the SOT's virtual config id (colons
+ * replaced by dots, e.g. `appCasem.caseDocument`) inside the owning app's
+ * bucket — not under the primary object type id. `#resolveConfigType` therefore
+ * probes each allowed target type the hit actually carries (as primary type or
+ * SOT), trying the dotted and raw config ids, and uses the first bucket that
+ * defines one; it falls back to the primary object type's default config, and
+ * ultimately to the raw object id when no title can be resolved. Objects that
+ * cannot be fetched at all (e.g. deleted or access-denied) become `notFound`
+ * entries labelled with their id.
+ *
+ * ## Opening a reference entry
+ *
+ * A chip can be opened only when a loaded feature app claims responsibility for
+ * the referenced object's type. `#openAppId` maps the entry's `objectTypeId` to
+ * an owning app id via {@link ObjectConfigService.getAppIdForType}, and
+ * `canOpen` gates the action on {@link ShellService.canOpenObjectFor} (and on the
+ * entry not being `notFound`) — this drives whether the chip is rendered as an
+ * openable link. Invoking `open` delegates to {@link ShellService.openObject},
+ * passing the app id and the entry's cached `data` so the app can route to /
+ * display the object without an extra fetch.
+ *
+ * @example
+ * <yuv-reference [multiselect]="true" [classifications]="['id:reference[appCasem:correctionDocument]']" />
+ */
+class ReferenceComponent extends AbstractMatFormField {
+    constructor() {
+        super(...arguments);
+        this.#system = inject(SystemService);
+        this.#search = inject(SearchService);
+        this.#dms = inject(DmsService);
+        this.#objectConfig = inject(ObjectConfigService);
+        this.#shell = inject(ShellService);
+        this.#dRef = inject(DestroyRef);
+        this.busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.acFormControl = new FormControl(undefined);
+        this.ngControl = injectNgControl(this);
+        this._innerValue = [];
+        this.autocompleteRes = [];
+        /**
+         * 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(undefined, ...(ngDevMode ? [{ debugName: "situation" }] : /* istanbul ignore next */ []));
+        /**
+         * Indicator that multiple references could be selected, they will be rendered as chips (default: false).
+         */
+        this.multiselect = input(false, ...(ngDevMode ? [{ debugName: "multiselect" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional semantics for the form element. The `id:reference[...]` classification
+         * restricts the suggestions to the target types listed in the brackets.
+         */
+        this.classifications = input(undefined, ...(ngDevMode ? [{ debugName: "classifications" }] : /* istanbul ignore next */ []));
+        /**
+         * Will prevent the input from being changed (default: false)
+         */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * Minimal number of characters to trigger the search (default: 2)
+         */
+        this.minChars = input(2, ...(ngDevMode ? [{ debugName: "minChars" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximal number of suggestions for the given search term (default: 10)
+         */
+        this.maxSuggestions = input(10, ...(ngDevMode ? [{ debugName: "maxSuggestions" }] : /* istanbul ignore next */ []));
+        /** Allowed target object/secondary object types parsed from the classification. */
+        this.#allowedTargetTypes = computed(() => {
+            const c = this.classifications();
+            return c?.length ? this.#system.getClassifications(c).get(Classification.STRING_REFERENCE)?.options ?? [] : [];
+        }, ...(ngDevMode ? [{ debugName: "#allowedTargetTypes" }] : /* istanbul ignore next */ []));
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.propagateChange = (_) => { };
+    }
+    #system;
+    #search;
+    #dms;
+    #objectConfig;
+    #shell;
+    #dRef;
+    set innerValue(iv) {
+        this._innerValue = iv || [];
+    }
+    get innerValue() {
+        return this._innerValue;
+    }
+    /** Allowed target object/secondary object types parsed from the classification. */
+    #allowedTargetTypes;
+    writeValue(value) {
+        this.value = value;
+        const ids = value ? (Array.isArray(value) ? value : [value]) : [];
+        if (ids.length) {
+            this.resolveFn(ids);
+        }
+        else {
+            this.value = null;
+            this.innerValue = [];
+            this.acFormControl.setValue([], { emitEvent: false });
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.acFormControl.disable();
+        }
+        else {
+            this.acFormControl.enable();
+        }
+        this.disabled = isDisabled;
+    }
+    propagate() {
+        this.value = this.multiselect() ? this.innerValue.map((v) => v.id) : this.innerValue[0]?.id;
+        this.propagateChange(this.value);
+    }
+    /** Resolve stored object ids back to display entries. */
+    resolveFn(ids) {
+        this.#dms
+            .getDmsObjects(ids)
+            .pipe(catchError(() => of([])))
+            .subscribe((objs) => {
+            const byId = new Map(objs.map((o) => [o.id, o]));
+            const entries = ids.map((id) => {
+                const o = byId.get(id);
+                return o instanceof DmsObject
+                    ? this.#toEntryFromDms(o)
+                    : { id, objectTypeId: '', title: id, data: {}, notFound: true };
+            });
+            this.#updateAutocompleteControl(entries);
+        });
+    }
+    #updateAutocompleteControl(data) {
+        this.innerValue = data;
+        const mapped = data.map((n) => ({ label: n.title, value: n }));
+        this.acFormControl.setValue(this.multiselect() ? mapped : mapped.slice(0, 1), { emitEvent: false });
+        this.acFormControl.updateValueAndValidity({ emitEvent: false });
+    }
+    autocompleteFn(query) {
+        if (query.length < this.minChars()) {
+            this.autocompleteRes = [];
+            return;
+        }
+        const types = this.#allowedTargetTypes();
+        // A reference target type may be a hit's primary object type OR be carried in its
+        // `system:secondaryObjectTypeIds` (a floating SOT applied to an object of a different
+        // primary type). Match both columns so hits are not missed in the latter case.
+        const quoted = types.map((type) => `'${escapeCmis(type)}'`).join(', ');
+        const typeCond = types.length
+            ? `objectTypeId IN (${quoted}) OR ${BaseObjectTypeField.SECONDARY_OBJECT_TYPE_IDS} IN (${quoted})`
+            : '';
+        const where = [typeCond ? `(${typeCond})` : '', `CONTAINS('${escapeCmis(query)}*')`].filter(Boolean).join(' AND ');
+        const statement = `SELECT * FROM system:object WHERE ${where}`;
+        this.busy.set(true);
+        this.#search
+            .searchCmis(statement, this.maxSuggestions())
+            .pipe(catchError(() => of({ items: [] })))
+            .subscribe((res) => {
+            this.busy.set(false);
+            this.autocompleteRes = res.items
+                .map((i) => this.#toEntry(i))
+                .filter((e) => !this.innerValue.some((v) => v.id === e.id))
+                .map((e) => ({ label: e.title, value: e }));
+        });
+    }
+    #toEntry(item) {
+        return this.#toEntryFromDms(new DmsObject(item));
+    }
+    #toEntryFromDms(dms) {
+        const { type, bucket } = this.#resolveConfigType(dms);
+        const roc = this.#objectConfig.getResolvedObjectConfig(dms.data, type, bucket);
+        return {
+            id: dms.id,
+            objectTypeId: dms.objectTypeId,
+            title: roc?.title?.value || dms.id,
+            data: dms.data
+        };
+    }
+    /**
+     * Pick the object config type + bucket used to resolve a hit's display label.
+     *
+     * Reference targets are typically secondary object types (SOTs) applied to a
+     * generic primary type (e.g. an `appCasem:caseDocument` SOT carried by a
+     * `system:document`). The config that defines the display title is keyed by the
+     * SOT's virtual config id — conventionally the SOT id with colons replaced by
+     * dots (`appCasem.caseDocument`) — and stored in the owning app's bucket, never
+     * under the primary object type id. Resolving by `dms.objectTypeId` alone
+     * therefore misses it and the label falls back to the raw object id.
+     *
+     * For each allowed target type the hit actually carries (as its primary type or
+     * a SOT) we probe the dotted and raw config ids and use the first that a bucket
+     * defines. Falls back to the primary object type (default config) when nothing
+     * matches.
+     */
+    #resolveConfigType(dms) {
+        const carried = new Set([dms.objectTypeId, ...dms.sots]);
+        const candidateIds = this.#allowedTargetTypes()
+            .filter((t) => carried.has(t))
+            .flatMap((t) => (t.includes(':') ? [t.replace(/:/g, '.'), t] : [t]));
+        for (const id of candidateIds) {
+            const bucket = this.#objectConfig.findBucketForConfigType(id);
+            if (bucket)
+                return { type: { id }, bucket };
+        }
+        return { type: { id: dms.objectTypeId } };
+    }
+    /** App id able to open the referenced object, if any. */
+    #openAppId(entry) {
+        return entry.objectTypeId ? this.#objectConfig.getAppIdForType(entry.objectTypeId) : undefined;
+    }
+    /** Whether the referenced object can be opened by a loaded app. */
+    canOpen(entry) {
+        return !entry.notFound && this.#shell.canOpenObjectFor(this.#openAppId(entry));
+    }
+    /** Open the referenced object via the owning app's registered open handler. */
+    open(entry) {
+        const appId = this.#openAppId(entry);
+        if (appId && this.#shell.canOpenObjectFor(appId)) {
+            this.#shell.openObject(appId, entry.data);
+        }
+    }
+    ngOnInit() {
+        if (this.required)
+            this.acFormControl.setValidators(Validators.required);
+        this.acFormControl.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe(() => {
+            this.errorState = FormUtils.getErrorState(this.acFormControl);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.acFormControl.errors);
+            }
+        });
+        this.acFormControl.updateValueAndValidity({ emitEvent: false });
+        this.acFormControl.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            const items = Array.isArray(v) ? v : v ? [v] : [];
+            this.innerValue = items.map((i) => i.value);
+            this.propagate();
+        });
+    }
+    ngOnDestroy() {
+        super.onNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ReferenceComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ReferenceComponent, isStandalone: true, selector: "yuv-reference", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxSuggestions: { classPropertyName: "maxSuggestions", publicName: "maxSuggestions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: ReferenceComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [minLength]=\"minChars()\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"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    @if (item.value) {\n      <span class=\"option\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [class.notFound]=\"item.value.notFound\" [matTooltip]=\"item.value.title\">\n        {{ item.value.title || '...' }}\n        @if (canOpen(item.value)) {\n          <mat-icon\n            class=\"open ymt-icon--size-s\"\n            (click)=\"open(item.value); $event.stopPropagation()\"\n            [matTooltip]=\"'yuv.form.element.reference.open.title' | translate\"\n          >\n            open_in_new\n          </mat-icon>\n        }\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.reference.classify.icon.title' | translate\">link</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip{display:inline-flex;align-items:center;gap:.25em}:host .chip .open{cursor:pointer;color:var(--ymt-text-color-subtle)}:host .chip .open:hover{color:var(--ymt-primary)}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i2$2.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc", "acBlur"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ReferenceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-reference', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, YuvAutocompleteModule, MatIconModule, MatTooltipModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: ReferenceComponent }], template: "<yuv-autocomplete\n  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [minLength]=\"minChars()\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"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    @if (item.value) {\n      <span class=\"option\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [class.notFound]=\"item.value.notFound\" [matTooltip]=\"item.value.title\">\n        {{ item.value.title || '...' }}\n        @if (canOpen(item.value)) {\n          <mat-icon\n            class=\"open ymt-icon--size-s\"\n            (click)=\"open(item.value); $event.stopPropagation()\"\n            [matTooltip]=\"'yuv.form.element.reference.open.title' | translate\"\n          >\n            open_in_new\n          </mat-icon>\n        }\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.reference.classify.icon.title' | translate\">link</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip{display:inline-flex;align-items:center;gap:.25em}:host .chip .open{cursor:pointer;color:var(--ymt-text-color-subtle)}:host .chip .open:hover{color:var(--ymt-primary)}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}: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 }] }], classifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "classifications", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], maxSuggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSuggestions", required: false }] }] } });
+
 /**
  * Creates form input for strings. Based on the input values different kinds of inputs will be generated.
  *
@@ -2455,5 +2741,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, StringComponent, YuvFormsModule };
+export { CatalogComponent, DataGridComponent, DatetimeComponent, DatetimeRangeComponent, DynamicCatalogComponent, FormUtils, I18nCatalogComponent, NumberComponent, NumberRangeComponent, OrganizationComponent, OrganizationSetComponent, RangeSelectDateComponent, RangeSelectFilesizeComponent, ReferenceComponent, StringComponent, YuvFormsModule };
 //# sourceMappingURL=yuuvis-client-framework-forms.mjs.map