@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/fesm2022/onemrvapublic-design-system-shared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, InjectionToken, Injectable, HostListener, Directive, HostBinding, Input, EventEmitter, Output, TemplateRef, ViewContainerRef, Renderer2, ComponentFactoryResolver, input, Pipe, RendererFactory2, NgModule, ErrorHandler } from '@angular/core';
+import { inject, ElementRef, Component, InjectionToken, Injectable, Directive, input, computed, output, TemplateRef, ViewContainerRef, DestroyRef, signal, Pipe, RendererFactory2, NgModule, ErrorHandler } from '@angular/core';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/tooltip';
@@ -27,10 +27,10 @@ class ClipboardIconComponent {
         this._elementRef = inject(ElementRef);
         this.clipboardService = inject(Clipboard);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClipboardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ClipboardIconComponent, isStandalone: true, selector: "lib-clipboard-icon", ngImport: i0, template: "<mat-icon [matTooltip]=\"'TEST'\">content_copy</mat-icon>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ClipboardIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ClipboardIconComponent, isStandalone: true, selector: "lib-clipboard-icon", ngImport: i0, template: "<mat-icon [matTooltip]=\"'TEST'\">content_copy</mat-icon>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClipboardIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ClipboardIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-clipboard-icon', standalone: true, imports: [MatIconModule, MatTooltipModule], template: "<mat-icon [matTooltip]=\"'TEST'\">content_copy</mat-icon>\n" }]
         }] });
@@ -250,10 +250,10 @@ class WebComponentOverlayContainer {
         this._document.body.appendChild(containerwrap);
         this._containerElement = container;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WebComponentOverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WebComponentOverlayContainer, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: WebComponentOverlayContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: WebComponentOverlayContainer, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WebComponentOverlayContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: WebComponentOverlayContainer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -382,7 +382,6 @@ const HttpRequestCache = (optionsHandler) => {
 
 class DigitOnlyDirective {
     onKeyDown(event) {
-        const e = event;
         const allowedKey = [
             '0',
             '1',
@@ -409,67 +408,45 @@ class DigitOnlyDirective {
             'Home',
             'End',
         ];
-        if (allowedKey.indexOf(e.key) >= 0)
+        if (allowedKey.includes(event.key))
             return;
-        // HWKTODO manage ctrl Z and ctrl U
         const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
-        if (e.ctrlKey && allowedCtrlShortcuts.indexOf(e.key) >= 0)
+        if (event.ctrlKey && allowedCtrlShortcuts.includes(event.key))
             return;
-        e.preventDefault();
+        event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DigitOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: DigitOnlyDirective, isStandalone: true, selector: "[digitOnly]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DigitOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DigitOnlyDirective, isStandalone: true, selector: "[digitOnly]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DigitOnlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DigitOnlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[digitOnly]',
                     standalone: true,
+                    host: {
+                        '(keydown)': 'onKeyDown($event)',
+                    },
                 }]
-        }], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+        }] });
 
 /**
  * Conditionally adds component to the tree if screen width matches at least one size in input
  */
 class OnemRvaColorDirective {
     constructor() {
-        this.color = '';
-    }
-    /** @hidden @internal */
-    get _isPrimary() {
-        return this.color === OnemrvaMatColor.PRIMARY;
-    }
-    /** @hidden @internal */
-    get _isAccent() {
-        return this.color === OnemrvaMatColor.ACCENT;
-    }
-    /** @hidden @internal */
-    get _isError() {
-        return this.color === OnemrvaMatColor.ERROR;
-    }
-    /** @hidden @internal */
-    get _isWarn() {
-        return this.color === OnemrvaMatColor.WARN;
-    }
-    /** @hidden @internal */
-    get _isSuccess() {
-        return this.color === OnemrvaMatColor.SUCCESS;
-    }
-    /** @hidden @internal */
-    get _isInfo() {
-        return this.color === OnemrvaMatColor.INFO;
-    }
-    /** @hidden @internal */
-    get _isNeutral() {
-        return this.color === OnemrvaMatColor.NEUTRAL;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnemRvaColorDirective, isStandalone: true, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: { color: "color" }, host: { properties: { "class.mat-primary": "this._isPrimary", "class.mat-accent": "this._isAccent", "class.mat-error": "this._isError", "class.mat-warn": "this._isWarn", "class.mat-success": "this._isSuccess", "class.mat-info": "this._isInfo", "class.mat-neutral": "this._isNeutral" } }, ngImport: i0 }); }
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.isPrimary = computed(() => this.color() === OnemrvaMatColor.PRIMARY, ...(ngDevMode ? [{ debugName: "isPrimary" }] : []));
+        this.isAccent = computed(() => this.color() === OnemrvaMatColor.ACCENT, ...(ngDevMode ? [{ debugName: "isAccent" }] : []));
+        this.isError = computed(() => this.color() === OnemrvaMatColor.ERROR, ...(ngDevMode ? [{ debugName: "isError" }] : []));
+        this.isWarn = computed(() => this.color() === OnemrvaMatColor.WARN, ...(ngDevMode ? [{ debugName: "isWarn" }] : []));
+        this.isSuccess = computed(() => this.color() === OnemrvaMatColor.SUCCESS, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+        this.isInfo = computed(() => this.color() === OnemrvaMatColor.INFO, ...(ngDevMode ? [{ debugName: "isInfo" }] : []));
+        this.isNeutral = computed(() => this.color() === OnemrvaMatColor.NEUTRAL, ...(ngDevMode ? [{ debugName: "isNeutral" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: OnemRvaColorDirective, isStandalone: true, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.mat-primary": "isPrimary()", "class.mat-accent": "isAccent()", "class.mat-error": "isError()", "class.mat-warn": "isWarn()", "class.mat-success": "isSuccess()", "class.mat-info": "isInfo()", "class.mat-neutral": "isNeutral()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'onemrva-mat-selectable-box[color],' +
@@ -491,66 +468,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         'mat-chip-option[color]' +
                         'mat-hint[color],',
                     standalone: true,
+                    host: {
+                        '[class.mat-primary]': 'isPrimary()',
+                        '[class.mat-accent]': 'isAccent()',
+                        '[class.mat-error]': 'isError()',
+                        '[class.mat-warn]': 'isWarn()',
+                        '[class.mat-success]': 'isSuccess()',
+                        '[class.mat-info]': 'isInfo()',
+                        '[class.mat-neutral]': 'isNeutral()',
+                    },
                 }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], _isPrimary: [{
-                type: HostBinding,
-                args: ['class.mat-primary']
-            }], _isAccent: [{
-                type: HostBinding,
-                args: ['class.mat-accent']
-            }], _isError: [{
-                type: HostBinding,
-                args: ['class.mat-error']
-            }], _isWarn: [{
-                type: HostBinding,
-                args: ['class.mat-warn']
-            }], _isSuccess: [{
-                type: HostBinding,
-                args: ['class.mat-success']
-            }], _isInfo: [{
-                type: HostBinding,
-                args: ['class.mat-info']
-            }], _isNeutral: [{
-                type: HostBinding,
-                args: ['class.mat-neutral']
-            }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class MatRowClickableDirective extends OnemRvaColorDirective {
     constructor() {
         super(...arguments);
-        this.matRowClickable = new EventEmitter();
-        this.cssClass = true;
+        this.matRowClickable = output();
+        this.clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+        this._isClickable = computed(() => this.clickable(), ...(ngDevMode ? [{ debugName: "_isClickable" }] : []));
     }
     click() {
+        if (!this.clickable())
+            return;
         this.matRowClickable.emit();
     }
-    /** @hidden @internal */
-    get _isClickable() {
-        return this.matRowClickable.observed;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatRowClickableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatRowClickableDirective, isStandalone: true, selector: "tr[matRowClickable]", outputs: { matRowClickable: "matRowClickable" }, host: { listeners: { "click": "click($event)" }, properties: { "class.clickable": "this._isClickable", "class.onemrva-clickable-row": "this.cssClass" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatRowClickableDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: MatRowClickableDirective, isStandalone: true, selector: "tr[matRowClickable]", inputs: { clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { matRowClickable: "matRowClickable" }, host: { listeners: { "click": "click()" }, properties: { "class.clickable": "_isClickable()", "class.onemrva-clickable-row": "true" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatRowClickableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatRowClickableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'tr[matRowClickable]',
                     standalone: true,
+                    host: {
+                        '[class.clickable]': '_isClickable()',
+                        '[class.onemrva-clickable-row]': 'true',
+                        '(click)': 'click()',
+                    },
                 }]
-        }], propDecorators: { matRowClickable: [{
-                type: Output
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], _isClickable: [{
-                type: HostBinding,
-                args: ['class.clickable']
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class.onemrva-clickable-row']
-            }] } });
+        }], propDecorators: { matRowClickable: [{ type: i0.Output, args: ["matRowClickable"] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] } });
 
 /**
  * Conditionally adds component to the tree if screen width matches at least one size in input
@@ -560,10 +516,11 @@ class IfWidthIsDirective {
         this.breakpointObserver = inject(BreakpointObserver);
         this._templateRef = inject(TemplateRef);
         this._viewContainer = inject(ViewContainerRef);
+        this.ifWidthIs = input.required(...(ngDevMode ? [{ debugName: "ifWidthIs" }] : []));
     }
     ngOnInit() {
         this.breakpointObserver
-            .observe([...this.ifWidthIs])
+            .observe([...this.ifWidthIs()])
             .subscribe((state) => {
             this._viewContainer.clear();
             if (state.matches) {
@@ -571,18 +528,16 @@ class IfWidthIsDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IfWidthIsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: IfWidthIsDirective, isStandalone: true, selector: "[ifWidthIs]", inputs: { ifWidthIs: "ifWidthIs" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IfWidthIsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: IfWidthIsDirective, isStandalone: true, selector: "[ifWidthIs]", inputs: { ifWidthIs: { classPropertyName: "ifWidthIs", publicName: "ifWidthIs", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IfWidthIsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IfWidthIsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ifWidthIs]',
                     standalone: true,
                 }]
-        }], propDecorators: { ifWidthIs: [{
-                type: Input
-            }] } });
+        }], propDecorators: { ifWidthIs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ifWidthIs", required: true }] }] } });
 
 const UNDO_STACK_MAX_LENGTH = 50;
 /**
@@ -595,6 +550,7 @@ const UNDO_STACK_MAX_LENGTH = 50;
 class OnemrvaMaskDirective {
     constructor() {
         this.el = inject(ElementRef);
+        this.onemrvamask = input.required(...(ngDevMode ? [{ debugName: "onemrvamask" }] : []));
         this.inputStack = ['']; // Stack for undo/redo
         this.stackIdx = 0; // Current index in undo/redo stack
         this.markForDelete = false;
@@ -651,7 +607,7 @@ class OnemrvaMaskDirective {
          */
         if (this.markForDelete) {
             const isCompliantAfterDeletion = [...this.el.nativeElement.value].findIndex((char, idx) => {
-                const rule = this.onemrvamask[idx];
+                const rule = this.onemrvamask()[idx];
                 if (rule === null || rule === undefined)
                     return true;
                 if (isNaN(char) && char.toLowerCase() === char.toUpperCase())
@@ -668,19 +624,19 @@ class OnemrvaMaskDirective {
             .filter(char => isAllowed('A', char)) // Necessary when several special char in a row
             .reduce((newValue, char) => {
             let idx = newValue.length;
-            const rule = this.onemrvamask[idx];
+            const rule = this.onemrvamask()[idx];
             if (rule === null || rule === undefined)
                 return newValue;
             newValue = !isAllowed(rule, char) ? newValue : newValue + char;
             // Add all trailing special characters
-            let nextRule = this.onemrvamask[++idx];
+            let nextRule = this.onemrvamask()[++idx];
             let i = 0;
             while (nextRule !== null &&
                 nextRule !== undefined &&
                 ['0', 'A', 'S', 'U', 'L'].indexOf(nextRule) < 0) {
                 i++;
                 newValue += nextRule;
-                nextRule = this.onemrvamask[++idx];
+                nextRule = this.onemrvamask()[++idx];
                 if (i > 50)
                     break;
             }
@@ -689,12 +645,12 @@ class OnemrvaMaskDirective {
         this.el.nativeElement.value = compliantValue;
         // Step 3 - Find the new cursor position. If the last new character is just before special character, move the caret after
         let idx = selectionStart;
-        let nextRule = this.onemrvamask[idx];
+        let nextRule = this.onemrvamask()[idx];
         while (nextRule !== null &&
             nextRule !== undefined &&
             ['0', 'A', 'S', 'U', 'L'].indexOf(nextRule) < 0) {
             idx++;
-            nextRule = this.onemrvamask[idx];
+            nextRule = this.onemrvamask()[idx];
             if (nextRule !== null &&
                 nextRule &&
                 ['0', 'A', 'S', 'U', 'L'].indexOf(nextRule) < 0) {
@@ -724,7 +680,7 @@ class OnemrvaMaskDirective {
                  *         If the user tries to delete '/', the caret will move just before ')'
                  */
                 while (i > 0) {
-                    const previousRule = this.onemrvamask[i - 1];
+                    const previousRule = this.onemrvamask()[i - 1];
                     if (['0', 'A', 'S', 'U', 'L'].indexOf(previousRule) < 0) {
                         i--;
                     }
@@ -736,24 +692,20 @@ class OnemrvaMaskDirective {
         }
         this.markForDelete = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnemrvaMaskDirective, isStandalone: true, selector: "[onemrvamask]", inputs: { onemrvamask: "onemrvamask" }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: OnemrvaMaskDirective, isStandalone: true, selector: "[onemrvamask]", inputs: { onemrvamask: { classPropertyName: "onemrvamask", publicName: "onemrvamask", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeyDown($event)", "input": "onInput($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[onemrvamask]',
                     standalone: true,
+                    host: {
+                        '(keydown)': 'onKeyDown($event)',
+                        '(input)': 'onInput($event)',
+                    },
                 }]
-        }], propDecorators: { onemrvamask: [{
-                type: Input
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onInput: [{
-                type: HostListener,
-                args: ['input', ['$event']]
-            }] } });
+        }], propDecorators: { onemrvamask: [{ type: i0.Input, args: [{ isSignal: true, alias: "onemrvamask", required: true }] }] } });
 function isAllowed(rule, character) {
     switch (rule) {
         // Any digit
@@ -786,57 +738,57 @@ function isAllowed(rule, character) {
  */
 class OnemRvaClipboardDirective {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.factory = inject(ComponentFactoryResolver);
+        this.elementRef = inject((ElementRef));
         this.vcRef = inject(ViewContainerRef);
-        this.clipboardService = inject(Clipboard);
-        this.class = '';
-        this.clipboard = '';
-        const miFactory = this.factory.resolveComponentFactory(ClipboardIconComponent);
-        this.icon = this.vcRef.createComponent(miFactory);
-        this.iconEl = this.icon.injector.get(ClipboardIconComponent)._elementRef.nativeElement;
+        this.destroyRef = inject(DestroyRef);
+        this.clipboard = input.required(...(ngDevMode ? [{ debugName: "clipboard" }] : []));
+        this.hostClass = signal('', ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
+        this.iconRef = null;
+        this.destroyRef.onDestroy(() => {
+            this.iconRef?.destroy();
+            this.iconRef = null;
+        });
     }
-    ngOnInit() {
+    ngAfterViewInit() {
+        this.initializeClipboardIcon();
+    }
+    initializeClipboardIcon() {
         this.vcRef.clear();
-        this.renderer.appendChild(this.elementRef.nativeElement, this.iconEl);
+        this.iconRef = this.vcRef.createComponent(ClipboardIconComponent);
+        const iconElement = this.iconRef.location.nativeElement;
+        this.elementRef.nativeElement.appendChild(iconElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnemRvaClipboardDirective, isStandalone: true, selector: "span[clipboard]", inputs: { clipboard: "clipboard" }, host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: OnemRvaClipboardDirective, isStandalone: true, selector: "span[clipboard]", inputs: { clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "button", "tabindex": "0" }, properties: { "class": "hostClass()", "attr.aria-label": "\"Copy to clipboard\"" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaClipboardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaClipboardDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'span[clipboard]',
                     standalone: true,
+                    host: {
+                        '[class]': 'hostClass()',
+                        role: 'button',
+                        tabindex: '0',
+                        '[attr.aria-label]': '"Copy to clipboard"',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], clipboard: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: true }] }] } });
 
-/**
- * Conditionally adds component to the tree if screen width matches at least one size in input
- */
 class OnemRvaIconRightDirective {
-    constructor() {
-        this.class = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaIconRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnemRvaIconRightDirective, isStandalone: true, selector: "button[iconRight]", host: { properties: { "class.onemrva-icon-right": "this.class" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaIconRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OnemRvaIconRightDirective, isStandalone: true, selector: "button[iconRight]", host: { classAttribute: "onemrva-icon-right" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaIconRightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaIconRightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[iconRight]',
                     standalone: true,
+                    host: {
+                        class: 'onemrva-icon-right',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.onemrva-icon-right']
-            }] } });
+        }] });
 
 class OnemrvaDateFormatDirective {
     constructor() {
@@ -845,15 +797,13 @@ class OnemrvaDateFormatDirective {
     }
     onPaste(event) {
         const input = this.el.nativeElement;
-        // Get pasted content
         const pasted = event.clipboardData?.getData('text/plain') || '';
         const digitsOnly = pasted.replace(/\D/g, '');
         if (!digitsOnly) {
-            event.preventDefault(); // Ignore invalid paste
+            event.preventDefault();
             return;
         }
-        event.preventDefault(); // Stop default paste
-        // Start at current caret position
+        event.preventDefault();
         let pos = input.selectionStart ?? 0;
         const chars = input.value.split('');
         let digitIndex = 0;
@@ -867,30 +817,23 @@ class OnemrvaDateFormatDirective {
         }
         input.value = chars.join('');
         this.emitInputEvent(input);
-        // Set caret after the last replaced character
         this.setCaretToNextEditable(pos);
     }
     onCut(event) {
         const input = this.el.nativeElement;
         const start = input.selectionStart ?? 0;
         const end = input.selectionEnd ?? 0;
-        // Capture the selected value (optional: log or store it)
         const cutText = input.value.substring(start, end);
-        // Replace the selected portion with underscores (skip slashes)
         const chars = input.value.split('');
         for (let i = start; i < end; i++) {
             if (this.template[i] !== '/') {
                 chars[i] = '_';
             }
         }
-        // Update input value
         input.value = chars.join('');
         this.emitInputEvent(input);
-        // Move caret to next editable position
         this.setCaretToNextEditable(start);
-        // Prevent default cut behavior from modifying content further
         event.preventDefault();
-        // ✅ Optionally copy to clipboard manually (optional)
         if (event.clipboardData) {
             event.clipboardData.setData('text/plain', cutText.replace(/\//g, ''));
         }
@@ -904,7 +847,6 @@ class OnemrvaDateFormatDirective {
     }
     onClick() {
         const input = this.el.nativeElement;
-        // Only reposition the caret if there's no selection (start === end)
         const selectionStart = input.selectionStart ?? 0;
         const selectionEnd = input.selectionEnd ?? 0;
         if (selectionStart === selectionEnd) {
@@ -920,22 +862,19 @@ class OnemrvaDateFormatDirective {
         const input = this.el.nativeElement;
         let pos = input.selectionStart ?? 0;
         const allowedCtrlShortcuts = ['a', 'c', 'x', 'v'];
-        if (event.ctrlKey && allowedCtrlShortcuts.indexOf(event.key) >= 0) {
+        if (event.ctrlKey && allowedCtrlShortcuts.includes(event.key)) {
             if (event.key === 'x' && input.value === '') {
                 input.value = this.template;
                 this.emitInputEvent(input);
             }
             return;
         }
-        // Allow navigation
         if (['ArrowLeft', 'ArrowRight', 'Tab'].includes(event.key))
             return;
-        // Handle Backspace or Delete with selection
         if (event.key === 'Backspace' || event.key === 'Delete') {
             event.preventDefault();
             const start = input.selectionStart ?? 0;
             const end = input.selectionEnd ?? start;
-            // If there's a selection
             if (end > start) {
                 const chars = input.value.split('');
                 for (let i = start; i < end; i++) {
@@ -948,7 +887,6 @@ class OnemrvaDateFormatDirective {
                 this.setCaretToNextEditable(start);
                 return;
             }
-            // If no selection, handle as usual (delete previous or next char)
             let pos = start;
             if (event.key === 'Backspace' && pos > 0) {
                 do {
@@ -969,14 +907,9 @@ class OnemrvaDateFormatDirective {
                 return;
             }
         }
-        // Handle Slash `/` key
-        if (event.key === '/' ||
-            event.key === '.' ||
-            event.key === '-' ||
-            event.key === ' ') {
+        if (['/', '.', '-', ' '].includes(event.key)) {
             event.preventDefault();
             if (pos === 1 || pos === 4) {
-                // Typing `/` at end of day field
                 const currentVal = input.value.substring(pos - 1, pos);
                 if (!currentVal.includes('_')) {
                     this.replaceCharAt(input, pos - 1, '0');
@@ -985,11 +918,8 @@ class OnemrvaDateFormatDirective {
                     return;
                 }
             }
-            // Default: just skip to next editable section if allowed
-            //this.setCaretToNextEditable(pos + 1);
             return;
         }
-        // Handle Backspace
         if (event.key === 'Backspace') {
             event.preventDefault();
             if (pos === 0)
@@ -1002,17 +932,14 @@ class OnemrvaDateFormatDirective {
             this.emitInputEvent(input);
             return;
         }
-        // Allow only digits
         if (!/^\d$/.test(event.key)) {
             event.preventDefault();
             return;
         }
-        // Prevent typing beyond mask
         if (pos >= this.template.length) {
             event.preventDefault();
             return;
         }
-        // Skip slashes forward
         while (this.template[pos] === '/' && pos < this.template.length) {
             pos++;
         }
@@ -1021,12 +948,10 @@ class OnemrvaDateFormatDirective {
         this.setCaretToNextEditable(pos + 1);
         this.emitInputEvent(input);
     }
+    onBlur() { } // eslint-disable-line @typescript-eslint/no-empty-function
     emitInputEvent(input) {
         input.dispatchEvent(new Event('input', { bubbles: true }));
     }
-    onBlur() {
-        // Optionally keep the mask visible on blur — do nothing
-    }
     replaceCharAt(input, index, char) {
         const value = input.value.split('');
         value[index] = char;
@@ -1039,55 +964,34 @@ class OnemrvaDateFormatDirective {
         }
         input.setSelectionRange(pos, pos);
     }
-    sanitizeDateInput(input) {
-        if (typeof input !== 'string')
-            return '';
-        return input
-            .replace(/[.\s-]/g, '/') // Replace dot, space, dash with slash
-            .replace(/[^0-9/]/g, '')
-            .replace('//', ''); // Remove everything except digits and slash
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaDateFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnemrvaDateFormatDirective, isStandalone: true, selector: "[onemrvaDateFormat]", host: { listeners: { "paste": "onPaste($event)", "cut": "onCut($event)", "focus": "onFocus()", "click": "onClick()", "keydown": "onKeyDown($event)", "blur": "onBlur()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaDateFormatDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: OnemrvaDateFormatDirective, isStandalone: true, selector: "[onemrvaDateFormat]", host: { listeners: { "paste": "onPaste($event)", "cut": "onCut($event)", "focus": "onFocus()", "click": "onClick()", "keydown": "onKeyDown($event)", "blur": "onBlur()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaDateFormatDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaDateFormatDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[onemrvaDateFormat]',
                     standalone: true,
+                    host: {
+                        '(paste)': 'onPaste($event)',
+                        '(cut)': 'onCut($event)',
+                        '(focus)': 'onFocus()',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(blur)': 'onBlur()',
+                    },
                 }]
-        }], propDecorators: { onPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], onCut: [{
-                type: HostListener,
-                args: ['cut', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
+        }] });
 
 class OnemRvaReadonlyDirective {
     constructor() {
         this.readonly = input(true, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.isReadOnly = computed(() => this.readonly(), ...(ngDevMode ? [{ debugName: "isReadOnly" }] : []));
     }
-    /** @hidden @internal */
-    get isReadOnly() {
-        return this.readonly();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaReadonlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: OnemRvaReadonlyDirective, isStandalone: true, selector: "form[readonly], mat-checkbox[readonly], mat-radio-group[readonly], mat-form-field[readonly], onemrva-mat-input-phone[readonly],onemrva-mat-task-list[readonly],onemrva-mat-selectable-box[readonly],onemrva-mat-choice-chip[readonly],onemrva-mat-input-birthplace[readonly],onemrva-mat-input-country[readonly],onemrva-mat-input-enterprise-number[readonly]", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.onemrva-readonly": "this.isReadOnly" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaReadonlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: OnemRvaReadonlyDirective, isStandalone: true, selector: "form[readonly], mat-checkbox[readonly], mat-radio-group[readonly], mat-form-field[readonly], onemrva-mat-input-phone[readonly],onemrva-mat-task-list[readonly],onemrva-mat-selectable-box[readonly],onemrva-mat-choice-chip[readonly],onemrva-mat-input-birthplace[readonly],onemrva-mat-input-country[readonly],onemrva-mat-input-enterprise-number[readonly]", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.onemrva-readonly": "isReadOnly()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaReadonlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaReadonlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'form[readonly], ' +
@@ -1102,66 +1006,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         'onemrva-mat-input-country[readonly],' +
                         'onemrva-mat-input-enterprise-number[readonly]',
                     standalone: true,
+                    host: {
+                        '[class.onemrva-readonly]': 'isReadOnly()',
+                    },
                 }]
-        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], isReadOnly: [{
-                type: HostBinding,
-                args: ['class.onemrva-readonly']
-            }] } });
+        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
-/**
- * Conditionally adds component to the tree if screen width matches at least one size in input
- */
 class OnemRvaSizeDirective {
     constructor() {
-        this.size = '';
-    }
-    /** @hidden @internal */
-    get _isXSmall() {
-        return this.size === OnemrvaMatSize.XSMALL;
-    }
-    /** @hidden @internal */
-    get _isSmall() {
-        return this.size === OnemrvaMatSize.SMALL;
-    }
-    /** @hidden @internal */
-    get _isLarge() {
-        return this.size === OnemrvaMatSize.LARGE;
-    }
-    /** @hidden @internal */
-    get _isXLarge() {
-        return this.size === OnemrvaMatSize.XLARGE;
-    }
-    /** @hidden @internal */
-    get _isXXLarge() {
-        return this.size === OnemrvaMatSize.XXLARGE;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnemRvaSizeDirective, isStandalone: true, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: { size: "size" }, host: { properties: { "class.xsmall": "this._isXSmall", "class.small": "this._isSmall", "class.large": "this._isLarge", "class.xlarge": "this._isXLarge", "class.xxlarge": "this._isXXLarge" } }, ngImport: i0 }); }
+        this.size = input('', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.isXSmall = computed(() => this.size() === OnemrvaMatSize.XSMALL, ...(ngDevMode ? [{ debugName: "isXSmall" }] : []));
+        this.isSmall = computed(() => this.size() === OnemrvaMatSize.SMALL, ...(ngDevMode ? [{ debugName: "isSmall" }] : []));
+        this.isLarge = computed(() => this.size() === OnemrvaMatSize.LARGE, ...(ngDevMode ? [{ debugName: "isLarge" }] : []));
+        this.isXLarge = computed(() => this.size() === OnemrvaMatSize.XLARGE, ...(ngDevMode ? [{ debugName: "isXLarge" }] : []));
+        this.isXXLarge = computed(() => this.size() === OnemrvaMatSize.XXLARGE, ...(ngDevMode ? [{ debugName: "isXXLarge" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: OnemRvaSizeDirective, isStandalone: true, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xsmall": "isXSmall()", "class.small": "isSmall()", "class.large": "isLarge()", "class.xlarge": "isXLarge()", "class.xxlarge": "isXXLarge()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaSizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaSizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]',
                     standalone: true,
+                    host: {
+                        '[class.xsmall]': 'isXSmall()',
+                        '[class.small]': 'isSmall()',
+                        '[class.large]': 'isLarge()',
+                        '[class.xlarge]': 'isXLarge()',
+                        '[class.xxlarge]': 'isXXLarge()',
+                    },
                 }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], _isXSmall: [{
-                type: HostBinding,
-                args: ['class.xsmall']
-            }], _isSmall: [{
-                type: HostBinding,
-                args: ['class.small']
-            }], _isLarge: [{
-                type: HostBinding,
-                args: ['class.large']
-            }], _isXLarge: [{
-                type: HostBinding,
-                args: ['class.xlarge']
-            }], _isXXLarge: [{
-                type: HostBinding,
-                args: ['class.xxlarge']
-            }] } });
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 const directives = [
     DigitOnlyDirective,
@@ -1283,10 +1159,10 @@ class OnemrvaBcePipe {
             return '?01?.???.???';
         return `${strOut.substring(0, 4)}.${strOut.substring(4, 7)}.${strOut.substring(7, 10)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaBcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaBcePipe, isStandalone: true, name: "onemrvaBce" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaBcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaBcePipe, isStandalone: true, name: "onemrvaBce" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaBcePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaBcePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'onemrvaBce',
@@ -1301,10 +1177,10 @@ class OnemrvaNissPipe {
             return '??01??/???-??';
         return `${strOut.substring(0, 6)}/${strOut.substring(6, 9)}-${strOut.substring(9, 11)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaNissPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaNissPipe, isStandalone: true, name: "onemrvaNiss" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaNissPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaNissPipe, isStandalone: true, name: "onemrvaNiss" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaNissPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaNissPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'onemrvaNiss',
@@ -1336,10 +1212,10 @@ class CommonCountryLookupService {
             return country || null;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonCountryLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonCountryLookupService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CommonCountryLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CommonCountryLookupService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CommonCountryLookupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CommonCountryLookupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1364,10 +1240,10 @@ class CacheService {
         //console.log("DELETE " + key);
         localStorage.removeItem(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CacheService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CacheService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1455,8 +1331,8 @@ class OnemRvaCDNService {
             this.renderer.appendChild(document.head, link);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNService, providedIn: 'root' }); }
 }
 __decorate([
     HttpRequestCache(cdnService => ({
@@ -1465,7 +1341,7 @@ __decorate([
         ttl: 3600000,
     }))
 ], OnemRvaCDNService.prototype, "fetch", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1524,10 +1400,10 @@ class OnemRvaCDNCountryService {
             });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNCountryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNCountryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNCountryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNCountryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNCountryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNCountryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1565,10 +1441,10 @@ class OnemRvaCDNMimeService {
             });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNMimeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNMimeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNMimeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNMimeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaCDNMimeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaCDNMimeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1590,10 +1466,10 @@ class OnemRvaOSMService {
             .set('limit', limit);
         return this.http.get(this.nominatimUrl, { params });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaOSMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaOSMService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaOSMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaOSMService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemRvaOSMService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemRvaOSMService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1611,10 +1487,10 @@ class OnemrvaErrorHandler {
         //   verticalPosition: this.verticalPosition,
         // });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaErrorHandler }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaErrorHandler }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaErrorHandler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaErrorHandler, decorators: [{
             type: Injectable
         }] });
 
@@ -1778,11 +1654,11 @@ const phoneNumberValidator = () => {
 };
 
 class OnemrvaSharedModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaSharedModule, imports: [DigitOnlyDirective, MatRowClickableDirective, OnemRvaClipboardDirective, OnemRvaIconRightDirective, IfWidthIsDirective, OnemRvaColorDirective, OnemrvaMaskDirective, OnemrvaDateFormatDirective, OnemRvaReadonlyDirective], exports: [DigitOnlyDirective, MatRowClickableDirective, OnemRvaClipboardDirective, OnemRvaIconRightDirective, IfWidthIsDirective, OnemRvaColorDirective, OnemrvaMaskDirective, OnemrvaDateFormatDirective, OnemRvaReadonlyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaSharedModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaSharedModule, imports: [DigitOnlyDirective, MatRowClickableDirective, OnemRvaClipboardDirective, OnemRvaIconRightDirective, IfWidthIsDirective, OnemRvaColorDirective, OnemrvaMaskDirective, OnemrvaDateFormatDirective, OnemRvaReadonlyDirective], exports: [DigitOnlyDirective, MatRowClickableDirective, OnemRvaClipboardDirective, OnemRvaIconRightDirective, IfWidthIsDirective, OnemRvaColorDirective, OnemrvaMaskDirective, OnemrvaDateFormatDirective, OnemRvaReadonlyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaSharedModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaSharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...directives],
@@ -1842,10 +1718,10 @@ class OnemrvaNativeDateAdapter extends NativeDateAdapter {
         this.destroyNotifier$.next();
         this.destroyNotifier$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaNativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaNativeDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaNativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaNativeDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaNativeDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaNativeDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2108,10 +1984,10 @@ class OnemrvaLuxonDateAdapter extends DateAdapter {
             outputCalendar: this._defaultOutputCalendar,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLuxonDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLuxonDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLuxonDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLuxonDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaLuxonDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaLuxonDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });