@yuuvis/client-framework 0.6.5

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

@@ -0,0 +1,209 @@
+import { ActiveDescendantKeyManager, A11yModule } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, Input, HostBinding, HostListener, contentChildren, effect, input, output, HostAttributeToken, Component, ViewEncapsulation } from '@angular/core';
+
+class ListItemDirective {
+    constructor() {
+        this.#elRef = inject(ElementRef);
+        this.active = false;
+        this._selected = false;
+    }
+    #elRef;
+    set selected(s) {
+        this._selected = s;
+    }
+    onHostClick(evt) {
+        if (!this.disabled && this.onClick) {
+            this.#elRef.nativeElement.parentElement.focus();
+            this.onClick(evt);
+        }
+    }
+    setActiveStyles() {
+        this.active = true;
+        this.#scrollIntoView();
+    }
+    setInactiveStyles() {
+        this.active = false;
+    }
+    #scrollIntoView() {
+        const el = this.#elRef.nativeElement;
+        const { bottom, top, left, right } = el.getBoundingClientRect();
+        const containerRect = this.#elRef.nativeElement.parentElement.getBoundingClientRect();
+        const offsetY = top <= containerRect.top
+            ? containerRect.top - top > 0
+                ? (containerRect.top - top) * -1
+                : 0
+            : bottom - containerRect.bottom > 0
+                ? bottom - containerRect.bottom
+                : 0;
+        const offsetX = left <= containerRect.left
+            ? containerRect.left - left > 0
+                ? (containerRect.left - left) * -1
+                : 0
+            : right - containerRect.right > 0
+                ? right - containerRect.right
+                : 0;
+        if (offsetX || offsetY)
+            this.#elRef.nativeElement.parentElement.scrollBy(offsetX, offsetY);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ListItemDirective, isStandalone: true, selector: "[yuvListItem]", inputs: { disabled: "disabled", active: "active", selected: "selected" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "attr.aria-current": "this.active", "attr.aria-selected": "this._selected" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvListItem]',
+                    standalone: true
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-current']
+            }], _selected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], selected: [{
+                type: Input
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * Component rendering a simple list of items. It supports keyboard
+ * navigation as well as accessability. To create a list just wrapp
+ * `yuvListItem` elements into this component:
+ *
+ * ```ts
+ * <yuv-list (itemSelect)="itemSelected($event)">
+ *   <div yuvListItem>Entry #1</div>
+ *   <div yuvListItem>Entry #2</div>
+ * </yuv-list>
+ * ```
+ */
+class ListComponent {
+    constructor() {
+        this.#dir = inject(Directionality);
+        this.items = contentChildren(ListItemDirective);
+        this.#itemsEffect = effect(() => {
+            if (this._keyManager)
+                this._keyManager.destroy();
+            this._keyManager = this.horizontal
+                ? new ActiveDescendantKeyManager(this.items()).withWrap().withHorizontalOrientation(this.#dir.value)
+                : new ActiveDescendantKeyManager(this.items()).withWrap();
+            this.items().forEach((item, index) => {
+                item.onClick = (evt) => {
+                    this.select(index, evt.shiftKey, evt.ctrlKey);
+                };
+                item.active = false;
+            });
+            if (this._lastSelection !== undefined && this._lastSelection <= this.items().length) {
+                this.select(this._lastSelection);
+            }
+        });
+        this._selection = [];
+        this.multiselect = input(false);
+        this.itemSelect = output();
+        this.itemFocus = output();
+        // autoselectFirst: boolean = (inject(new HostAttributeToken('autoselectFirst'), { optional: true }) || 'false') === 'true';
+        this.selectOnEnter = (inject(new HostAttributeToken('selectOnEnter'), { optional: true }) || 'false') === 'true';
+        this.horizontal = (inject(new HostAttributeToken('horizontal'), { optional: true }) || 'false') === 'true';
+        this.disableSelection = input(false);
+    }
+    #dir;
+    onKeydown(event) {
+        if (this.disableSelection())
+            return;
+        if (event.code === 'Escape') {
+            this.clear();
+        }
+        if (event.code === 'Space' || (this.selectOnEnter && event.code === 'Enter')) {
+            const aii = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;
+            if (aii >= 0) {
+                this._select(aii);
+                this._emitSelection();
+            }
+        }
+        else
+            this._keyManager?.onKeydown(event);
+    }
+    #itemsEffect;
+    select(index, shiftKey = false, ctrlKey = false) {
+        if (this.disableSelection())
+            return;
+        if (this._keyManager) {
+            this._keyManager.setActiveItem(index);
+        }
+        this._select(index, shiftKey, ctrlKey);
+        this._emitSelection();
+    }
+    clear() {
+        if (this._selection.length !== 0) {
+            this._select(-1);
+            this._keyManager.setActiveItem(-1);
+            this._emitSelection();
+        }
+    }
+    _select(index, shiftKey = false, ctrlKey = false) {
+        if (index === -1)
+            this._selection = [];
+        else {
+            if (this.multiselect()) {
+                this._selection = this._selection.filter((i) => i !== index);
+                if (ctrlKey) {
+                    // if ctrl key add to selection
+                    this._selection.push(index);
+                }
+                else if (shiftKey) {
+                    // add range
+                    if (this._lastSelection) {
+                        for (let i = this._lastSelection < index ? this._lastSelection : index; i < (this._lastSelection > index ? this._lastSelection : index); i++) {
+                            this._selection.push(i);
+                        }
+                    }
+                    else {
+                        this._selection = [index];
+                    }
+                }
+                else {
+                    this._selection = [index];
+                }
+            }
+            else
+                this._selection = [index];
+        }
+        this._lastSelection = this._selection.length === 0 ? undefined : index;
+        this._selection.sort();
+        this.items().forEach((item, i) => (item.selected = this._selection.includes(i)));
+    }
+    _emitSelection() {
+        this.itemSelect.emit(this._selection);
+    }
+    ngOnDestroy() {
+        this._keyManager?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ListComponent, isStandalone: true, selector: "yuv-list", inputs: { multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, disableSelection: { classPropertyName: "disableSelection", publicName: "disableSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", itemFocus: "itemFocus" }, host: { attributes: { "role": "listbox", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "items", predicate: ListItemDirective, isSignal: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["yuv-list{--_list-item-border-color: var(--list-item-border-color, var(--panel-divider-color));--_list-item-selected-background: var(--list-item-selected-background, var(--item-selected-background-color));--_list-item-selected-border-color: var(--list-item-selected-border-color, var(--color-accent));--_list-item-current-background: var(--list-item-current-background, var(--item-focus-background-color));--_list-item-current-border-color: var(--list-item-current-border-color, var(--panel-divider-color));display:block;max-height:100%;overflow-y:auto}yuv-list [yuvListItem][aria-current=true]{background-color:var(--_list-item-current-background);border-color:var(--_list-item-current-border-color)}yuv-list [yuvListItem][aria-selected=true]{background-color:var(--_list-item-selected-background);border-color:var(--_list-item-selected-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-list', standalone: true, imports: [CommonModule, A11yModule], template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, host: {
+                        role: 'listbox',
+                        tabindex: '0'
+                    }, styles: ["yuv-list{--_list-item-border-color: var(--list-item-border-color, var(--panel-divider-color));--_list-item-selected-background: var(--list-item-selected-background, var(--item-selected-background-color));--_list-item-selected-border-color: var(--list-item-selected-border-color, var(--color-accent));--_list-item-current-background: var(--list-item-current-background, var(--item-focus-background-color));--_list-item-current-border-color: var(--list-item-current-border-color, var(--panel-divider-color));display:block;max-height:100%;overflow-y:auto}yuv-list [yuvListItem][aria-current=true]{background-color:var(--_list-item-current-background);border-color:var(--_list-item-current-border-color)}yuv-list [yuvListItem][aria-selected=true]{background-color:var(--_list-item-selected-background);border-color:var(--_list-item-selected-border-color)}\n"] }]
+        }], propDecorators: { onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListComponent, ListItemDirective };
+//# sourceMappingURL=yuuvis-client-framework-list.mjs.map

package/fesm2022/yuuvis-client-framework-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-client-framework-list.mjs","sources":["../../../../../libs/yuuvis/client-framework/list/src/lib/list-item.directive.ts","../../../../../libs/yuuvis/client-framework/list/src/lib/list.component.ts","../../../../../libs/yuuvis/client-framework/list/src/yuuvis-client-framework-list.ts"],"sourcesContent":["import { Highlightable } from '@angular/cdk/a11y';\nimport { Directive, ElementRef, HostBinding, HostListener, Input, inject } from '@angular/core';\n\n@Directive({\n  selector: '[yuvListItem]',\n  standalone: true\n})\nexport class ListItemDirective implements Highlightable {\n  #elRef = inject(ElementRef);\n\n  onClick?: (evt: MouseEvent) => void;\n\n  @Input() disabled?: boolean | undefined;\n  @Input() @HostBinding('attr.aria-current') active = false;\n\n  @HostBinding('attr.aria-selected') private _selected = false;\n  @Input()\n  set selected(s: boolean) {\n    this._selected = s;\n  }\n\n  @HostListener('click', ['$event']) onHostClick(evt: MouseEvent) {\n    if (!this.disabled && this.onClick) {\n      this.#elRef.nativeElement.parentElement.focus();\n      this.onClick(evt);\n    }\n  }\n\n  setActiveStyles(): void {\n    this.active = true;\n    this.#scrollIntoView();\n  }\n\n  setInactiveStyles(): void {\n    this.active = false;\n  }\n\n  #scrollIntoView() {\n    const el = this.#elRef.nativeElement as HTMLElement;\n    const { bottom, top, left, right } = el.getBoundingClientRect();\n    const containerRect = this.#elRef.nativeElement.parentElement.getBoundingClientRect();\n\n    const offsetY =\n      top <= containerRect.top\n        ? containerRect.top - top > 0\n          ? (containerRect.top - top) * -1\n          : 0\n        : bottom - containerRect.bottom > 0\n          ? bottom - containerRect.bottom\n          : 0;\n    const offsetX =\n      left <= containerRect.left\n        ? containerRect.left - left > 0\n          ? (containerRect.left - left) * -1\n          : 0\n        : right - containerRect.right > 0\n          ? right - containerRect.right\n          : 0;\n\n    if (offsetX || offsetY) (this.#elRef.nativeElement.parentElement as HTMLElement).scrollBy(offsetX, offsetY);\n  }\n}\n","import { A11yModule, ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport { Directionality } from '@angular/cdk/bidi';\nimport { CommonModule } from '@angular/common';\nimport { Component, HostAttributeToken, HostListener, OnDestroy, ViewEncapsulation, contentChildren, effect, inject, input, output } from '@angular/core';\nimport { ListItemDirective } from './list-item.directive';\n\n/**\n * Component rendering a simple list of items. It supports keyboard\n * navigation as well as accessability. To create a list just wrapp\n * `yuvListItem` elements into this component:\n *\n * ```ts\n * <yuv-list (itemSelect)=\"itemSelected($event)\">\n *   <div yuvListItem>Entry #1</div>\n *   <div yuvListItem>Entry #2</div>\n * </yuv-list>\n * ```\n */\n@Component({\n  selector: 'yuv-list',\n  standalone: true,\n  imports: [CommonModule, A11yModule],\n  template: '<ng-content></ng-content>',\n  styleUrl: './list.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'listbox',\n    tabindex: '0'\n  }\n})\nexport class ListComponent implements OnDestroy {\n  #dir = inject(Directionality);\n\n  @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent) {\n    if (this.disableSelection()) return;\n    if (event.code === 'Escape') {\n      this.clear();\n    }\n    if (event.code === 'Space' || (this.selectOnEnter && event.code === 'Enter')) {\n      const aii: number = this._keyManager.activeItemIndex !== null ? this._keyManager.activeItemIndex : -1;\n      if (aii >= 0) {\n        this._select(aii);\n        this._emitSelection();\n      }\n    } else this._keyManager?.onKeydown(event);\n  }\n  items = contentChildren(ListItemDirective);\n  #itemsEffect = effect(() => {\n    if (this._keyManager) this._keyManager.destroy();\n    this._keyManager = this.horizontal\n      ? new ActiveDescendantKeyManager(this.items()).withWrap().withHorizontalOrientation(this.#dir.value)\n      : new ActiveDescendantKeyManager(this.items()).withWrap();\n\n    this.items().forEach((item, index) => {\n      item.onClick = (evt: MouseEvent) => {\n        this.select(index, evt.shiftKey, evt.ctrlKey);\n      };\n      item.active = false;\n    });\n    if (this._lastSelection !== undefined && this._lastSelection <= this.items().length) {\n      this.select(this._lastSelection);\n    }\n  });\n  private _keyManager!: ActiveDescendantKeyManager<ListItemDirective>;\n  private _selection: number[] = [];\n  private _lastSelection?: number;\n\n  multiselect = input<boolean>(false);\n\n  itemSelect = output<number[]>();\n  itemFocus = output<number>();\n\n  // autoselectFirst: boolean = (inject(new HostAttributeToken('autoselectFirst'), { optional: true }) || 'false') === 'true';\n  selectOnEnter: boolean = (inject(new HostAttributeToken('selectOnEnter'), { optional: true }) || 'false') === 'true';\n  horizontal: boolean = (inject(new HostAttributeToken('horizontal'), { optional: true }) || 'false') === 'true';\n  disableSelection = input<boolean>(false);\n\n  select(index: number, shiftKey = false, ctrlKey = false) {\n    if (this.disableSelection()) return;\n    if (this._keyManager) {\n      this._keyManager.setActiveItem(index);\n    }\n    this._select(index, shiftKey, ctrlKey);\n    this._emitSelection();\n  }\n\n  clear() {\n    if (this._selection.length !== 0) {\n      this._select(-1);\n      this._keyManager.setActiveItem(-1);\n      this._emitSelection();\n    }\n  }\n\n  private _select(index: number, shiftKey = false, ctrlKey = false) {\n    if (index === -1) this._selection = [];\n    else {\n      if (this.multiselect()) {\n        this._selection = this._selection.filter((i) => i !== index);\n        if (ctrlKey) {\n          // if ctrl key add to selection\n          this._selection.push(index);\n        } else if (shiftKey) {\n          // add range\n          if (this._lastSelection) {\n            for (let i = this._lastSelection < index ? this._lastSelection : index; i < (this._lastSelection > index ? this._lastSelection : index); i++) {\n              this._selection.push(i);\n            }\n          } else {\n            this._selection = [index];\n          }\n        } else {\n          this._selection = [index];\n        }\n      } else this._selection = [index];\n    }\n    this._lastSelection = this._selection.length === 0 ? undefined : index;\n    this._selection.sort();\n\n    this.items().forEach((item: ListItemDirective, i: number) => (item.selected = this._selection.includes(i)));\n  }\n\n  private _emitSelection() {\n    this.itemSelect.emit(this._selection);\n  }\n\n  ngOnDestroy(): void {\n    this._keyManager?.destroy();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/yuuvis-client-framework-metadata-form.mjs

@@ -0,0 +1,302 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, signal, input, effect, untracked, Component, ViewEncapsulation, TemplateRef, Directive, Input } from '@angular/core';
+import { Situation, SystemService, TranslateService, Utils } from '@yuuvis/client-core';
+import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i1 from '@yuuvis/client-framework/common';
+import { injectNgControl, NoopValueAccessorDirective } from '@yuuvis/client-framework/common';
+import { FormInputComponent, StringComponent, OrganizationComponent, NumberComponent, NumberRangeComponent, DatetimeComponent, DatetimeRangeComponent, CatalogComponent } from '@yuuvis/client-framework/forms';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@yuuvis/components/checkbox';
+import { YvcCheckboxModule } from '@yuuvis/components/checkbox';
+
+/**
+ * Registration service for form elements rendered within an object form.
+ */
+class MetadataFormElementRegistry {
+    constructor() {
+        this._defaults = {};
+        this._edit = {};
+        this._search = {};
+        this._create = {};
+    }
+    /**
+     * Get a template to render a certain form element
+     * @param propertyType The internal type to get the template for
+     * @param situation Form situation
+     * @returns TemplateRef or undefined
+     */
+    getElementTemplate(propertyType, situation = Situation.EDIT) {
+        let cmps = { ...this._defaults, ...this._edit };
+        if (situation === Situation.SEARCH)
+            cmps = { ...this._defaults, ...this._edit, ...this._search };
+        else if (situation === Situation.CREATE)
+            cmps = { ...this._defaults, ...this._edit, ...this._create };
+        return cmps[propertyType];
+    }
+    /**
+     * Register an object form element for a certain internal type. You might add a new component
+     * or overwrite an existung one.
+     * @param propertyType The internal type to provide the component for
+     * @param component The component
+     * @param situation Form situation to provide thew form element for (defaults to EDIT)
+     */
+    addElementTemplate(propertyType, templateRef, situation = Situation.EDIT) {
+        if (propertyType && templateRef) {
+            switch (situation) {
+                case Situation.SEARCH: {
+                    this._search[propertyType] = templateRef;
+                    break;
+                }
+                case Situation.CREATE: {
+                    this._create[propertyType] = templateRef;
+                    break;
+                }
+                default: {
+                    this._edit[propertyType] = templateRef;
+                }
+            }
+        }
+    }
+    /**
+     * Remove a registered form element.
+     * @param propertyType The internal type to remove the component for
+     * @param situation Form situation to provide thew form element for (defaults to EDIT)
+     */
+    removeElementTemplate(propertyType, situation = Situation.EDIT) {
+        switch (situation) {
+            case Situation.SEARCH: {
+                delete this._search[propertyType];
+                break;
+            }
+            case Situation.CREATE: {
+                delete this._create[propertyType];
+                break;
+            }
+            default: {
+                delete this._edit[propertyType];
+            }
+        }
+    }
+    /**
+     * Register default form element component. Usually this will be done by the object
+     * form component itself.
+     * @param propertyType The internal type to provide the component for
+     * @param component The default component
+     */
+    _addDefaultElementTemplate(propertyType, templateRef) {
+        if (propertyType && templateRef) {
+            this._defaults[propertyType] = templateRef;
+        }
+    }
+    /**
+     * Remove a registered default form element.
+     * @param propertyType The internal type to remove the component for
+     */
+    _removeDefaultElementTemplate(propertyType) {
+        delete this._defaults[propertyType];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataFormElementRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataFormElementRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataFormElementRegistry, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MetadataFormFieldComponent {
+    constructor() {
+        this.#registry = inject(MetadataFormElementRegistry);
+        this.#system = inject(SystemService);
+        this.translate = inject(TranslateService);
+        this._subs = [];
+        this.ngControl = injectNgControl();
+        this.elementTemplate = signal(undefined);
+        this.errors = null;
+        this.label = '';
+        this.readonly = false;
+        this.formField = input.required({ alias: 'field' });
+        this.#fieldEffect = effect(() => {
+            const field = this.formField();
+            untracked(() => {
+                this.elementTemplate.set(this.#registry.getElementTemplate(field._internalType, this.situation()));
+                this.label = this.#system.getLocalizedLabel(field.name) || field.name;
+                // TODO: set readonly state based on ...????... schema?
+                this.readonly = false;
+                this.ngControl.statusChanges;
+                this.fetchTags();
+            });
+        });
+        /**
+         * Form situation, if not set default will be 'EDIT'
+         */
+        this.situation = input(Situation.EDIT);
+    }
+    #registry;
+    #system;
+    #fieldEffect;
+    fetchTags() {
+        this.tag = undefined;
+        if (this.situation() === Situation.CREATE &&
+            (Utils.hasProperty(this.formField(), 'defaultvaluefunction') || Utils.hasProperty(this.formField(), 'defaultvalue'))) {
+            this.tag =
+                this.formField().defaultvaluefunction === 'EXTRACTION'
+                    ? {
+                        label: 'ex',
+                        title: this.translate.instant('yuv.object-form-element.tag.ex')
+                    }
+                    : {
+                        label: 'df',
+                        title: this.translate.instant('yuv.object-form-element.tag.df')
+                    };
+        }
+    }
+    _getErrorLabel(error, params) {
+        switch (error) {
+            case 'daterange':
+                return this.translate.instant('yuv.object-form-element.error.daterange.invalid', params);
+            case 'daterangeorder':
+                return this.translate.instant('yuv.object-form-element.error.daterangeorder.invalid', params);
+            case 'numberrange':
+                return this.translate.instant('yuv.object-form-element.error.numberrange.invalid', params);
+            case 'numberrangeorder':
+                return this.translate.instant('yuv.object-form-element.error.numberrangeorder.invalid', params);
+            case 'number':
+                return this.translate.instant('yuv.object-form-element.error.number', params);
+            case 'precision':
+                return this.translate.instant('yuv.object-form-element.error.number.precision', params);
+            case 'scale':
+                return this.translate.instant('yuv.object-form-element.error.number.scale', params);
+            case 'regex':
+                return this.translate.instant('yuv.object-form-element.error.string.regex.nomatch', params);
+            case 'pattern':
+                return this.translate.instant('yuv.object-form-element.error.string.regex.nomatch', params);
+            case 'classificationemail':
+                return this.translate.instant('yuv.object-form-element.error.string.classification.email', params);
+            case 'classificationphone':
+                return this.translate.instant('yuv.object-form-element.error.string.classification.phone', params);
+            case 'classificationurl':
+                return this.translate.instant('yuv.object-form-element.error.string.classification.url', params);
+            case 'onlyWhitespaces':
+                return this.translate.instant('yuv.object-form-element.error.string.whitespaces', params);
+            case 'datecontrol':
+                return this.translate.instant('yuv.object-form-element.error.date.invalid', params);
+            case 'required':
+                return this.translate.instant('yuv.object-form-element.error.required', params);
+            case 'maxlength':
+                return this.translate.instant('yuv.object-form-element.error.maxlength', params);
+            case 'minlength':
+                return this.translate.instant('yuv.object-form-element.error.minlength', params);
+            case 'minmax':
+                return this.translate.instant('yuv.object-form-element.error.minmax', params);
+            case 'minvalue':
+                return this.translate.instant('yuv.object-form-element.error.minvalue', params);
+            case 'maxvalue':
+                return this.translate.instant('yuv.object-form-element.error.maxvalue', params);
+            case 'empty':
+                return this.translate.instant('yuv.object-form-element.recent-activities.list.empty', params);
+            default:
+                return this.translate.instant(error, params);
+        }
+    }
+    ngOnInit() {
+        if (this.ngControl.statusChanges)
+            this._subs.push(this.ngControl.statusChanges.subscribe(() => {
+                this.errors = this.ngControl.control.errors
+                    ? Object.keys(this.ngControl.control.errors).map((key) => {
+                        return this.ngControl.control.errors ? this._getErrorLabel(key, this.ngControl.control.errors[key].params) : null;
+                    })
+                    : null;
+            }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach((s) => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MetadataFormFieldComponent, isStandalone: true, selector: "yuv-metadata-form-field", inputs: { formField: { classPropertyName: "formField", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "yuv-metadata-form-field" }, hostDirectives: [{ directive: i1.NoopValueAccessorDirective }], ngImport: i0, template: "@let field = formField();\n@if (field) {\n  @let et = elementTemplate();\n  <div class=\"form-field t-{{ field._internalType }}\" #formField [attr.data-name]=\"field.name\" [ngClass]=\"{ disabled: !!readonly }\">\n    @if (et) {\n      <yuv-form-input\n        [ngClass]=\"{ checkbox: field._internalType === 'boolean' }\"\n        [tag]=\"tag\"\n        [label]=\"label\"\n        [required]=\"field.required\"\n        [invalid]=\"!!errors\"\n        [disabled]=\"readonly\"\n      >\n        <ng-container *ngTemplateOutlet=\"et; context: { $implicit: { situation: situation(), ngControl: ngControl.control, field } }\"></ng-container>\n      </yuv-form-input>\n    } @else {\n      <em>\n        <strong>{{ field._internalType }}</strong>\n      </em>\n    }\n\n    <!-- the fields description -->\n    @if (field.description) {\n      <div class=\"description\">\n        {{ field.description }}\n      </div>\n    }\n\n    <!-- error/validation messages -->\n    @if (errors) {\n      <div class=\"err-msg\">\n        <div>{{ errors[errors['length'] - 1] }}</div>\n      </div>\n    }\n  </div>\n}\n", styles: [".yuv-metadata-form-field{display:inline-block}.yuv-metadata-form-field .form-field{margin-block-end:1px;border-radius:.25em}.yuv-metadata-form-field .form-field .description{border:0;font-size:var(--font-hint);color:var(--text-color-caption);font-style:italic;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 8) 0 calc(var(--app-pane-padding) / 8)}.yuv-metadata-form-field .form-field .err-msg{font-size:var(--font-hint);color:var(--color-error);padding:calc(var(--app-pane-padding) / 4) 0;border:0}.yuv-metadata-form-field .form-field .table{flex-flow:column;align-items:flex-start;border:1px solid var(--panel-divider-color)}.yuv-metadata-form-field .form-field .table .label{padding-bottom:calc(var(--app-pane-padding) / 4)}.yuv-metadata-form-field .form-field .table.invalid{border:1px solid var(--color-error)}.yuv-metadata-form-field .form-field.inlineError .err-msg{display:none}.yuv-metadata-form-field.ng-dirty:not(.ng-invalid)>.form-field:not(.focused) .fe-wrapper>label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormInputComponent, selector: "yuv-form-input", inputs: ["label", "tag", "description", "invalid", "disabled", "required"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-metadata-form-field', standalone: true, imports: [NgClass, NgTemplateOutlet, FormInputComponent], hostDirectives: [NoopValueAccessorDirective], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'yuv-metadata-form-field'
+                    }, template: "@let field = formField();\n@if (field) {\n  @let et = elementTemplate();\n  <div class=\"form-field t-{{ field._internalType }}\" #formField [attr.data-name]=\"field.name\" [ngClass]=\"{ disabled: !!readonly }\">\n    @if (et) {\n      <yuv-form-input\n        [ngClass]=\"{ checkbox: field._internalType === 'boolean' }\"\n        [tag]=\"tag\"\n        [label]=\"label\"\n        [required]=\"field.required\"\n        [invalid]=\"!!errors\"\n        [disabled]=\"readonly\"\n      >\n        <ng-container *ngTemplateOutlet=\"et; context: { $implicit: { situation: situation(), ngControl: ngControl.control, field } }\"></ng-container>\n      </yuv-form-input>\n    } @else {\n      <em>\n        <strong>{{ field._internalType }}</strong>\n      </em>\n    }\n\n    <!-- the fields description -->\n    @if (field.description) {\n      <div class=\"description\">\n        {{ field.description }}\n      </div>\n    }\n\n    <!-- error/validation messages -->\n    @if (errors) {\n      <div class=\"err-msg\">\n        <div>{{ errors[errors['length'] - 1] }}</div>\n      </div>\n    }\n  </div>\n}\n", styles: [".yuv-metadata-form-field{display:inline-block}.yuv-metadata-form-field .form-field{margin-block-end:1px;border-radius:.25em}.yuv-metadata-form-field .form-field .description{border:0;font-size:var(--font-hint);color:var(--text-color-caption);font-style:italic;padding:calc(var(--app-pane-padding) / 8) calc(var(--app-pane-padding) / 8) 0 calc(var(--app-pane-padding) / 8)}.yuv-metadata-form-field .form-field .err-msg{font-size:var(--font-hint);color:var(--color-error);padding:calc(var(--app-pane-padding) / 4) 0;border:0}.yuv-metadata-form-field .form-field .table{flex-flow:column;align-items:flex-start;border:1px solid var(--panel-divider-color)}.yuv-metadata-form-field .form-field .table .label{padding-bottom:calc(var(--app-pane-padding) / 4)}.yuv-metadata-form-field .form-field .table.invalid{border:1px solid var(--color-error)}.yuv-metadata-form-field .form-field.inlineError .err-msg{display:none}.yuv-metadata-form-field.ng-dirty:not(.ng-invalid)>.form-field:not(.focused) .fe-wrapper>label{background-color:var(--color-dirty-background);color:var(--color-dirty-font)!important}\n"] }]
+        }] });
+
+/**
+ * Directive to be applied to a `ng-template`. It will register the template as a
+ * form element used by object-form component.
+ *
+ * Context is provided with the following fields:
+ * - situation: form situation 'EDIT', 'CREATE', 'SEARCH'
+ * - field: ObjectTypeField
+ * - ngControl: Reactive FormControl
+ *
+ * @example
+ * <ng-template yuvMetadataElementTemplate propertyType="boolean:switch" let-ctx>...</ng-template>
+ *
+ */
+class MetadataElementTemplateDirective {
+    constructor() {
+        this.registry = inject(MetadataFormElementRegistry);
+        this.template = inject((TemplateRef));
+        this.situation = Situation.EDIT;
+    }
+    ngOnInit() {
+        if (this.yuvMetadataElementTemplate === 'default')
+            this.registry._addDefaultElementTemplate(this.propertyType, this.template);
+        else
+            this.registry.addElementTemplate(this.propertyType, this.template, this.situation);
+    }
+    ngOnDestroy() {
+        if (this.yuvMetadataElementTemplate === 'default')
+            this.registry._removeDefaultElementTemplate(this.propertyType);
+        else
+            this.registry.removeElementTemplate(this.propertyType, this.situation);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataElementTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MetadataElementTemplateDirective, isStandalone: true, selector: "[yuvMetadataElementTemplate]", inputs: { yuvMetadataElementTemplate: "yuvMetadataElementTemplate", propertyType: "propertyType", situation: "situation" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataElementTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[yuvMetadataElementTemplate]',
+                    standalone: true,
+                }]
+        }], propDecorators: { yuvMetadataElementTemplate: [{
+                type: Input
+            }], propertyType: [{
+                type: Input
+            }], situation: [{
+                type: Input
+            }] } });
+
+class MetadataDefaultTemplatesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataDefaultTemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MetadataDefaultTemplatesComponent, isStandalone: true, selector: "yuv-metadata-default-templates", ngImport: i0, template: "<!-- form element templates -->\n<!-- STRING -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"string\" let-ctx>\n\n  <yuv-string\n      [situation]=\"ctx.situation\"\n      [formControl]=\"ctx.ngControl\"\n      [attr.data-name]=\"ctx.field.name\"\n      [multiselect]=\"ctx.field.cardinality === 'multi' || ctx.situation === 'SEARCH'\"\n      [rows]=\"ctx.field.rows\"\n      [classifications]=\"ctx.field.classifications\"\n      [regex]=\"ctx.field.regex\"\n      [readonly]=\"ctx.field.readonly\"\n      [minLength]=\"ctx.field.minLength\"\n      [maxLength]=\"ctx.field.maxLength\"\n    > \n    </yuv-string>\n</ng-template>\n\n<!-- ORGANIZATION -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"string:organization\" let-ctx>\n <yuv-organization\n      [situation]=\"ctx.situation\"\n      [multiselect]=\"ctx.field.cardinality === 'multi' || ctx.situation === 'SEARCH'\"\n      (userSelect)=\"ctx.field.dataMeta = $event\"\n      [formControl]=\"ctx.ngControl\"\n      [attr.data-name]=\"ctx.field.name\"\n      [classifications]=\"ctx.field.classifications\"\n      [readonly]=\"ctx.field.readonly\"\n    >\n    </yuv-organization>\n</ng-template>\n\n<!-- INTEGER -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"integer\" let-ctx>\n  @if (ctx.situation !== 'SEARCH') {\n<yuv-number\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"0\"\n        [grouping]=\"ctx.field.grouping\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n        [classifications]=\"ctx.field.classifications\"\n      >\n      </yuv-number> \n  } @else {\n    \n    <yuv-number-range\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"0\"\n        [grouping]=\"ctx.field.grouping\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [pattern]=\"ctx.field.pattern\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n        [classifications]=\"ctx.field.classifications\"\n      ></yuv-number-range>\n  }\n</ng-template>\n\n<!-- DECIMAL -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"decimal\" let-ctx>\n  @if (ctx.situation !== 'SEARCH') {\n  <yuv-number\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"ctx.field.scale\"\n        [grouping]=\"ctx.field.grouping\"\n        [pattern]=\"ctx.field.pattern\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n      >\n        >\n      </yuv-number>\n  } @else {\n    <yuv-number-range\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"ctx.field.scale\"\n        [pattern]=\"ctx.field.pattern\"\n        [grouping]=\"ctx.field.grouping\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n      ></yuv-number-range>\n  }\n</ng-template>\n\n<!-- BOOLEAN -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"boolean\" let-ctx>\n  <yvc-checkbox\n    [formControl]=\"ctx.ngControl\"\n    [attr.data-name]=\"ctx.field.name\"\n    [readonly]=\"ctx.field.readonly\"\n    [tristate]=\"ctx.field.tristate === false ? false : true\"\n  ></yvc-checkbox>\n</ng-template>\n\n<!-- BOOLEAN SWITCH -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"boolean:switch\" let-ctx>\n  <yvc-checkbox\n    [formControl]=\"ctx.ngControl\"\n    switch=\"true\"\n    [attr.data-name]=\"ctx.field.name\"\n    [readonly]=\"ctx.field.readonly\"\n    [tristate]=\"ctx.field.tristate === false ? false : true\"\n  ></yvc-checkbox>\n</ng-template>\n\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"datetime\" let-ctx>\n  @if (ctx.situation !== 'SEARCH') {\n    <yuv-datetime\n    [readonly]=\"ctx.field.readonly\"\n    [withTime]=\"ctx.field.resolution !== 'date'\"\n    [formControl]=\"ctx.ngControl\"\n    [attr.data-name]=\"ctx.field.name\"\n    ></yuv-datetime> \n  } @else {\n    <yuv-datetime-range\n        [readonly]=\"ctx.field.readonly\"\n        [withTime]=\"ctx.field.resolution !== 'date'\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n      ></yuv-datetime-range> \n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: StringComponent, selector: "yuv-string", inputs: ["multiselect", "rows", "readonly", "autofocus", "classifications", "situation", "regex", "minLength", "maxLength"] }, { kind: "component", type: OrganizationComponent, selector: "yuv-organization", inputs: ["placeholder", "situation", "multiselect", "classifications", "readonly", "autofocus", "appendTo", "excludeMe", "withMetadata"], outputs: ["userSelect"] }, { kind: "component", type: NumberComponent, selector: "yuv-number", inputs: ["scale", "precision", "grouping", "groupPattern", "readonly", "minValue", "maxValue", "classifications"] }, { kind: "component", type: NumberRangeComponent, selector: "yuv-number-range", inputs: ["scale", "precision", "grouping", "pattern", "readonly", "classifications", "minValue", "maxValue"] }, { kind: "component", type: DatetimeComponent, selector: "yuv-datetime", inputs: ["onlyFutureDates", "readonly", "withTime"] }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator"] }, { kind: "directive", type: MetadataElementTemplateDirective, selector: "[yuvMetadataElementTemplate]", inputs: ["yuvMetadataElementTemplate", "propertyType", "situation"] }, { kind: "ngmodule", type: YvcCheckboxModule }, { kind: "component", type: i2.CheckboxComponent, selector: "yvc-checkbox", inputs: ["tristate", "readonly"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataDefaultTemplatesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuv-metadata-default-templates', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormInputComponent,
+                        CatalogComponent,
+                        StringComponent,
+                        OrganizationComponent,
+                        NumberComponent,
+                        NumberRangeComponent,
+                        DatetimeComponent,
+                        DatetimeRangeComponent,
+                        MetadataElementTemplateDirective,
+                        YvcCheckboxModule
+                    ], template: "<!-- form element templates -->\n<!-- STRING -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"string\" let-ctx>\n\n  <yuv-string\n      [situation]=\"ctx.situation\"\n      [formControl]=\"ctx.ngControl\"\n      [attr.data-name]=\"ctx.field.name\"\n      [multiselect]=\"ctx.field.cardinality === 'multi' || ctx.situation === 'SEARCH'\"\n      [rows]=\"ctx.field.rows\"\n      [classifications]=\"ctx.field.classifications\"\n      [regex]=\"ctx.field.regex\"\n      [readonly]=\"ctx.field.readonly\"\n      [minLength]=\"ctx.field.minLength\"\n      [maxLength]=\"ctx.field.maxLength\"\n    > \n    </yuv-string>\n</ng-template>\n\n<!-- ORGANIZATION -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"string:organization\" let-ctx>\n <yuv-organization\n      [situation]=\"ctx.situation\"\n      [multiselect]=\"ctx.field.cardinality === 'multi' || ctx.situation === 'SEARCH'\"\n      (userSelect)=\"ctx.field.dataMeta = $event\"\n      [formControl]=\"ctx.ngControl\"\n      [attr.data-name]=\"ctx.field.name\"\n      [classifications]=\"ctx.field.classifications\"\n      [readonly]=\"ctx.field.readonly\"\n    >\n    </yuv-organization>\n</ng-template>\n\n<!-- INTEGER -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"integer\" let-ctx>\n  @if (ctx.situation !== 'SEARCH') {\n<yuv-number\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"0\"\n        [grouping]=\"ctx.field.grouping\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n        [classifications]=\"ctx.field.classifications\"\n      >\n      </yuv-number> \n  } @else {\n    \n    <yuv-number-range\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"0\"\n        [grouping]=\"ctx.field.grouping\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [pattern]=\"ctx.field.pattern\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n        [classifications]=\"ctx.field.classifications\"\n      ></yuv-number-range>\n  }\n</ng-template>\n\n<!-- DECIMAL -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"decimal\" let-ctx>\n  @if (ctx.situation !== 'SEARCH') {\n  <yuv-number\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"ctx.field.scale\"\n        [grouping]=\"ctx.field.grouping\"\n        [pattern]=\"ctx.field.pattern\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n      >\n        >\n      </yuv-number>\n  } @else {\n    <yuv-number-range\n        [readonly]=\"ctx.field.readonly\"\n        [precision]=\"ctx.field.precision\"\n        [scale]=\"ctx.field.scale\"\n        [pattern]=\"ctx.field.pattern\"\n        [grouping]=\"ctx.field.grouping\"\n        [minValue]=\"ctx.field.minValue\"\n        [maxValue]=\"ctx.field.maxValue\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n      ></yuv-number-range>\n  }\n</ng-template>\n\n<!-- BOOLEAN -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"boolean\" let-ctx>\n  <yvc-checkbox\n    [formControl]=\"ctx.ngControl\"\n    [attr.data-name]=\"ctx.field.name\"\n    [readonly]=\"ctx.field.readonly\"\n    [tristate]=\"ctx.field.tristate === false ? false : true\"\n  ></yvc-checkbox>\n</ng-template>\n\n<!-- BOOLEAN SWITCH -->\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"boolean:switch\" let-ctx>\n  <yvc-checkbox\n    [formControl]=\"ctx.ngControl\"\n    switch=\"true\"\n    [attr.data-name]=\"ctx.field.name\"\n    [readonly]=\"ctx.field.readonly\"\n    [tristate]=\"ctx.field.tristate === false ? false : true\"\n  ></yvc-checkbox>\n</ng-template>\n\n<ng-template yuvMetadataElementTemplate=\"default\" propertyType=\"datetime\" let-ctx>\n  @if (ctx.situation !== 'SEARCH') {\n    <yuv-datetime\n    [readonly]=\"ctx.field.readonly\"\n    [withTime]=\"ctx.field.resolution !== 'date'\"\n    [formControl]=\"ctx.ngControl\"\n    [attr.data-name]=\"ctx.field.name\"\n    ></yuv-datetime> \n  } @else {\n    <yuv-datetime-range\n        [readonly]=\"ctx.field.readonly\"\n        [withTime]=\"ctx.field.resolution !== 'date'\"\n        [formControl]=\"ctx.ngControl\"\n        [attr.data-name]=\"ctx.field.name\"\n      ></yuv-datetime-range> \n  }\n</ng-template>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MetadataDefaultTemplatesComponent, MetadataFormElementRegistry, MetadataFormFieldComponent };
+//# sourceMappingURL=yuuvis-client-framework-metadata-form.mjs.map