npm - @onemrvapublic/design-system - Versions diffs - 20.11.3 → 21.0.0-develop.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (205) hide show

package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs CHANGED Viewed

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { QueryList, inject, ChangeDetectorRef, forwardRef, HostBinding, ContentChildren, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { input, contentChildren, computed, inject, ChangeDetectorRef, forwardRef, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { TranslateService, TranslatePipe } from '@ngx-translate/core';
 import { MatOption } from '@angular/material/core';
 import { Subject, debounceTime, startWith, map, takeUntil } from 'rxjs';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -14,9 +14,6 @@ import { MatSelectSearchComponent } from '@onemrvapublic/design-system/mat-selec
 let NEXT_ID = 0;
 class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
-    get opacity() {
-        return this.disabled ? 0.4 : 1;
-    }
     onFocus() {
         this.focused = true;
         this.stateChanges.next();
@@ -30,20 +27,22 @@ class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
         this.counter = 0;
         this._values = [];
         this.stateChanges = new Subject();
-        this.multiple = true;
+        this.multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : []));
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.role = 'select';
+        this.role = input('select', { ...(ngDevMode ? { debugName: "role" } : {}), alias: 'attr.role' });
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.label = '';
+        this.label = input('', { ...(ngDevMode ? { debugName: "label" } : {}), alias: 'attr.aria-label' });
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.invalid = false;
-        this.showFilter = true;
-        this.selectionToggle = true;
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), alias: 'attr.aria-invalid' });
+        this.showFilter = input(true, ...(ngDevMode ? [{ debugName: "showFilter" }] : []));
+        this.selectionToggle = input(true, ...(ngDevMode ? [{ debugName: "selectionToggle" }] : []));
         // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
+        this.dataCy = input(`onemrva-mat-multi-select-${NEXT_ID++}`, { ...(ngDevMode ? { debugName: "dataCy" } : {}), alias: 'attr.data-cy' });
         this.searchFilter = new FormControl('');
-        this.matOptions = new QueryList();
+        this.matOptions = contentChildren(MatOption, ...(ngDevMode ? [{ debugName: "matOptions" }] : []));
         this.onDestroy$ = new Subject();
+        this._opacity = computed(() => (this.disabled ? 0.4 : 1), ...(ngDevMode ? [{ debugName: "_opacity" }] : []));
         this.focused = false;
         this.translate = inject(TranslateService);
         this.cd = inject(ChangeDetectorRef);
@@ -63,7 +62,7 @@ class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
     // Allows Angular to update the model (rating).
     // Update the model and changes needed for the view here.
     writeValue(values) {
-        if (this.multiple) {
+        if (this.multiple()) {
             this.counter = 0;
             if (Array.isArray(values))
                 this.counter = values.length;
@@ -83,20 +82,20 @@ class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
         this.onTouched = fn;
     }
     isAllSelected() {
-        return this.counter === this.matOptions.length;
+        return this.counter === this.matOptions().length;
     }
     selectAll() {
-        this._values = this.matOptions.map(option => {
+        this._values = this.matOptions().map(option => {
             return option.value;
         });
-        this.formControl.setValue(this._values);
+        this.formControl().setValue(this._values);
     }
     isNoneSelected() {
         return this.counter === 0;
     }
     deselectAll(_$event) {
         this._values = [];
-        this.formControl.setValue(this._values);
+        this.formControl().setValue(this._values);
     }
     onContainerClick(_event) {
         //
@@ -110,37 +109,38 @@ class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
     }
     ngOnInit() {
         this.matOptions$ = this.searchFilter.valueChanges.pipe(debounceTime(200), startWith(''), map((value) => {
-            this.optionSize = this.matOptions.length;
+            this.optionSize = this.matOptions().length;
             if (this._values !== null) {
                 this.counter = this._values.length;
             }
             if (value === '') {
-                return this.matOptions.filter(_o => {
+                return this.matOptions().filter(_o => {
                     return true;
                 });
             }
-            return this.matOptions.filter(option => {
+            return this.matOptions().filter(option => {
                 return option?._text?.nativeElement.innerHTML
                     .toLowerCase()
                     .includes(value.toLowerCase());
             });
         }));
-        this.formControl.valueChanges
-            .pipe(takeUntil(this.onDestroy$))
+        this.formControl()
+            .valueChanges.pipe(takeUntil(this.onDestroy$))
             .subscribe(values => {
             this._values = values;
             this.counter = this._values.length;
         });
     }
     ngAfterContentChecked() {
-        if (this.matOptions.length !== this.optionSize) {
-            this.optionSize = this.matOptions.length;
+        const matOptions = this.matOptions();
+        if (matOptions.length !== this.optionSize) {
+            this.optionSize = matOptions.length;
             this.counter = 0;
             this.searchFilter.updateValueAndValidity({ emitEvent: true });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: OnemrvaMatMultiSelectComponent, isStandalone: true, selector: "onemrva-mat-multi-select", inputs: { multiple: "multiple", formControl: "formControl", role: ["attr.role", "role"], label: ["attr.aria-label", "label"], invalid: ["attr.aria-invalid", "invalid"], showFilter: "showFilter", selectionToggle: "selectionToggle", dataCy: ["attr.data-cy", "dataCy"] }, host: { properties: { "style.opacity": "this.opacity" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OnemrvaMatMultiSelectComponent, isStandalone: true, selector: "onemrva-mat-multi-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, role: { classPropertyName: "role", publicName: "attr.role", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "attr.aria-label", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "attr.aria-invalid", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, selectionToggle: { classPropertyName: "selectionToggle", publicName: "selectionToggle", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "attr.data-cy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.opacity": "_opacity()" } }, providers: [
             {
                 provide: MatFormFieldControl,
                 useExisting: OnemrvaMatMultiSelectComponent,
@@ -151,11 +151,13 @@ class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
                 useExisting: forwardRef(() => OnemrvaMatMultiSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "matOptions", predicate: MatOption }], usesInheritance: true, ngImport: i0, template: "<mat-select\n  [multiple]=\"multiple\"\n  [formControl]=\"formControl\"\n  [attr.data-cy]=\"dataCy\"\n  [attr.aria-label]=\"label\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n>\n  @if (multiple && selectionToggle) {\n    <div class=\"selection-choice text-right\">\n      <a\n        tabindex=\"1\"\n        [ngClass]=\"{ 'mat-disabled': isAllSelected() }\"\n        (click)=\"selectAll()\"\n        >{{ 'select.select.all' | translate }}</a\n      ><span class=\"separator\">&nbsp;&nbsp;|&nbsp;&nbsp;</span>\n      <a\n        tabindex=\"2\"\n        [ngClass]=\"{ 'mat-disabled': isNoneSelected() }\"\n        (click)=\"deselectAll($event)\"\n        >{{ 'select.deselect.all' | translate }}</a\n      >\n    </div>\n  }\n  <div class=\"option-list\">\n    @if (showFilter) {\n      <mat-option>\n        <mat-select-search\n          [formControl]=\"searchFilter\"\n          ariaLabel=\"{{ 'select.search.filter' | translate }}\"\n          noEntriesFoundLabel=\"{{ 'select.search.notFound' | translate }}\"\n          placeholderLabel=\"{{ 'select.search.filter' | translate }}\"\n        ></mat-select-search>\n      </mat-option>\n    }\n    @for (matOption of matOptions$ | async; track matOption.value) {\n      <ng-container>\n        <mat-option\n          [disabled]=\"matOption.disabled\"\n          [value]=\"matOption.value\"\n          [attr.data-cy]=\"matOption._getHostElement().dataset['cy']\"\n        >\n          {{ matOption._text?.nativeElement?.textContent }}\n        </mat-option>\n      </ng-container>\n    }\n  </div>\n</mat-select>\n@if (multiple && counter > 0) {\n  <div class=\"mat-select-counter float-right position-absolute text-center\">\n    <span class=\"text\">{{ counter }}</span\n    ><mat-icon (click)=\"deselectAll($event)\">close</mat-icon>\n  </div>\n}\n", styles: [":host{display:inline-block;width:100%}:host .mat-select-counter{top:var(--spacer);right:var(--triple-spacer);display:block;padding:var(--quarter-spacer) var(--half-spacer) var(--quarter-spacer) var(--spacer);background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);min-width:var(--triple-spacer);font-family:var(--brand-font);border:1px solid var(--mat-sys-primary);border-radius:var(--button-border-radius)}:host .mat-select-counter span.text{font-family:var(--sys-label-large-font);font-style:normal;font-weight:500;font-size:.75rem;line-height:1.25rem}:host .mat-select-counter mat-icon{font-size:.75rem;height:.75rem;width:.75rem;line-height:1rem;padding:0 var(--quarter-spacer) 0 var(--quarter-spacer);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatSelectSearchComponent, selector: "mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        ], queries: [{ propertyName: "matOptions", predicate: MatOption, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-select\n  [multiple]=\"multiple()\"\n  [formControl]=\"formControl()\"\n  [attr.data-cy]=\"dataCy()\"\n  [attr.aria-label]=\"label()\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n>\n  @if (multiple() && selectionToggle()) {\n    <div class=\"selection-choice text-right\">\n      <a\n        tabindex=\"1\"\n        [class.mat-disabled]=\"isAllSelected()\"\n        (click)=\"selectAll()\"\n        >{{ 'select.select.all' | translate }}</a\n      ><span class=\"separator\">&nbsp;&nbsp;|&nbsp;&nbsp;</span>\n      <a\n        tabindex=\"2\"\n        [class.mat-disabled]=\"isNoneSelected()\"\n        (click)=\"deselectAll($event)\"\n        >{{ 'select.deselect.all' | translate }}</a\n      >\n    </div>\n  }\n  <div class=\"option-list\">\n    @if (showFilter()) {\n      <mat-option>\n        <mat-select-search\n          [formControl]=\"searchFilter\"\n          ariaLabel=\"{{ 'select.search.filter' | translate }}\"\n          noEntriesFoundLabel=\"{{ 'select.search.notFound' | translate }}\"\n          placeholderLabel=\"{{ 'select.search.filter' | translate }}\"\n        />\n      </mat-option>\n    }\n    @for (matOption of matOptions$ | async; track matOption.value) {\n      <ng-container>\n        <mat-option\n          [disabled]=\"matOption.disabled\"\n          [value]=\"matOption.value\"\n          [attr.data-cy]=\"matOption._getHostElement().dataset['cy']\"\n        >\n          {{ matOption._text?.nativeElement?.textContent }}\n        </mat-option>\n      </ng-container>\n    }\n  </div>\n</mat-select>\n@if (multiple() && counter > 0) {\n  <div class=\"mat-select-counter float-right position-absolute text-center\">\n    <span class=\"text\">{{ counter }}</span\n    ><mat-icon (click)=\"deselectAll($event)\">close</mat-icon>\n  </div>\n}\n", styles: [":host{display:inline-block;width:100%}:host .mat-select-counter{top:var(--spacer);right:var(--triple-spacer);display:block;padding:var(--quarter-spacer) var(--half-spacer) var(--quarter-spacer) var(--spacer);background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);min-width:var(--triple-spacer);font-family:var(--brand-font);border:1px solid var(--mat-sys-primary);border-radius:var(--button-border-radius)}:host .mat-select-counter span.text{font-family:var(--sys-label-large-font);font-style:normal;font-weight:500;font-size:.75rem;line-height:1.25rem}:host .mat-select-counter mat-icon{font-size:.75rem;height:.75rem;width:.75rem;line-height:1rem;padding:0 var(--quarter-spacer) 0 var(--quarter-spacer);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatSelectSearchComponent, selector: "mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-multi-select', providers: [
+            args: [{ selector: 'onemrva-mat-multi-select', host: {
+                        '[style.opacity]': '_opacity()',
+                    }, providers: [
                         {
                             provide: MatFormFieldControl,
                             useExisting: OnemrvaMatMultiSelectComponent,
@@ -167,48 +169,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             multi: true,
                         },
                     ], imports: [
-                        NgClass,
                         TranslatePipe,
                         ReactiveFormsModule,
                         MatSelectModule,
                         AsyncPipe,
                         MatIcon,
                         MatSelectSearchComponent,
-                    ], standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<mat-select\n  [multiple]=\"multiple\"\n  [formControl]=\"formControl\"\n  [attr.data-cy]=\"dataCy\"\n  [attr.aria-label]=\"label\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n>\n  @if (multiple && selectionToggle) {\n    <div class=\"selection-choice text-right\">\n      <a\n        tabindex=\"1\"\n        [ngClass]=\"{ 'mat-disabled': isAllSelected() }\"\n        (click)=\"selectAll()\"\n        >{{ 'select.select.all' | translate }}</a\n      ><span class=\"separator\">&nbsp;&nbsp;|&nbsp;&nbsp;</span>\n      <a\n        tabindex=\"2\"\n        [ngClass]=\"{ 'mat-disabled': isNoneSelected() }\"\n        (click)=\"deselectAll($event)\"\n        >{{ 'select.deselect.all' | translate }}</a\n      >\n    </div>\n  }\n  <div class=\"option-list\">\n    @if (showFilter) {\n      <mat-option>\n        <mat-select-search\n          [formControl]=\"searchFilter\"\n          ariaLabel=\"{{ 'select.search.filter' | translate }}\"\n          noEntriesFoundLabel=\"{{ 'select.search.notFound' | translate }}\"\n          placeholderLabel=\"{{ 'select.search.filter' | translate }}\"\n        ></mat-select-search>\n      </mat-option>\n    }\n    @for (matOption of matOptions$ | async; track matOption.value) {\n      <ng-container>\n        <mat-option\n          [disabled]=\"matOption.disabled\"\n          [value]=\"matOption.value\"\n          [attr.data-cy]=\"matOption._getHostElement().dataset['cy']\"\n        >\n          {{ matOption._text?.nativeElement?.textContent }}\n        </mat-option>\n      </ng-container>\n    }\n  </div>\n</mat-select>\n@if (multiple && counter > 0) {\n  <div class=\"mat-select-counter float-right position-absolute text-center\">\n    <span class=\"text\">{{ counter }}</span\n    ><mat-icon (click)=\"deselectAll($event)\">close</mat-icon>\n  </div>\n}\n", styles: [":host{display:inline-block;width:100%}:host .mat-select-counter{top:var(--spacer);right:var(--triple-spacer);display:block;padding:var(--quarter-spacer) var(--half-spacer) var(--quarter-spacer) var(--spacer);background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);min-width:var(--triple-spacer);font-family:var(--brand-font);border:1px solid var(--mat-sys-primary);border-radius:var(--button-border-radius)}:host .mat-select-counter span.text{font-family:var(--sys-label-large-font);font-style:normal;font-weight:500;font-size:.75rem;line-height:1.25rem}:host .mat-select-counter mat-icon{font-size:.75rem;height:.75rem;width:.75rem;line-height:1rem;padding:0 var(--quarter-spacer) 0 var(--quarter-spacer);cursor:pointer}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { multiple: [{
-                type: Input
-            }], formControl: [{
-                type: Input
-            }], role: [{
-                type: Input,
-                args: ['attr.role']
-            }], label: [{
-                type: Input,
-                args: ['attr.aria-label']
-            }], invalid: [{
-                type: Input,
-                args: ['attr.aria-invalid']
-            }], showFilter: [{
-                type: Input
-            }], selectionToggle: [{
-                type: Input
-            }], dataCy: [{
-                type: Input,
-                args: ['attr.data-cy']
-            }], matOptions: [{
-                type: ContentChildren,
-                args: [MatOption]
-            }], opacity: [{
-                type: HostBinding,
-                args: ['style.opacity']
-            }] } });
+                    ], standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<mat-select\n  [multiple]=\"multiple()\"\n  [formControl]=\"formControl()\"\n  [attr.data-cy]=\"dataCy()\"\n  [attr.aria-label]=\"label()\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n>\n  @if (multiple() && selectionToggle()) {\n    <div class=\"selection-choice text-right\">\n      <a\n        tabindex=\"1\"\n        [class.mat-disabled]=\"isAllSelected()\"\n        (click)=\"selectAll()\"\n        >{{ 'select.select.all' | translate }}</a\n      ><span class=\"separator\">&nbsp;&nbsp;|&nbsp;&nbsp;</span>\n      <a\n        tabindex=\"2\"\n        [class.mat-disabled]=\"isNoneSelected()\"\n        (click)=\"deselectAll($event)\"\n        >{{ 'select.deselect.all' | translate }}</a\n      >\n    </div>\n  }\n  <div class=\"option-list\">\n    @if (showFilter()) {\n      <mat-option>\n        <mat-select-search\n          [formControl]=\"searchFilter\"\n          ariaLabel=\"{{ 'select.search.filter' | translate }}\"\n          noEntriesFoundLabel=\"{{ 'select.search.notFound' | translate }}\"\n          placeholderLabel=\"{{ 'select.search.filter' | translate }}\"\n        />\n      </mat-option>\n    }\n    @for (matOption of matOptions$ | async; track matOption.value) {\n      <ng-container>\n        <mat-option\n          [disabled]=\"matOption.disabled\"\n          [value]=\"matOption.value\"\n          [attr.data-cy]=\"matOption._getHostElement().dataset['cy']\"\n        >\n          {{ matOption._text?.nativeElement?.textContent }}\n        </mat-option>\n      </ng-container>\n    }\n  </div>\n</mat-select>\n@if (multiple() && counter > 0) {\n  <div class=\"mat-select-counter float-right position-absolute text-center\">\n    <span class=\"text\">{{ counter }}</span\n    ><mat-icon (click)=\"deselectAll($event)\">close</mat-icon>\n  </div>\n}\n", styles: [":host{display:inline-block;width:100%}:host .mat-select-counter{top:var(--spacer);right:var(--triple-spacer);display:block;padding:var(--quarter-spacer) var(--half-spacer) var(--quarter-spacer) var(--spacer);background:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);min-width:var(--triple-spacer);font-family:var(--brand-font);border:1px solid var(--mat-sys-primary);border-radius:var(--button-border-radius)}:host .mat-select-counter span.text{font-family:var(--sys-label-large-font);font-style:normal;font-weight:500;font-size:.75rem;line-height:1.25rem}:host .mat-select-counter mat-icon{font-size:.75rem;height:.75rem;width:.75rem;line-height:1rem;padding:0 var(--quarter-spacer) 0 var(--quarter-spacer);cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "attr.role", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "attr.aria-label", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "attr.aria-invalid", required: false }] }], showFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilter", required: false }] }], selectionToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionToggle", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "attr.data-cy", required: false }] }], matOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatOption), { isSignal: true }] }] } });
 class OnemrvaMatMultiSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatMultiSelectModule, imports: [OnemrvaMatMultiSelectComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatMultiSelectModule, imports: [OnemrvaMatMultiSelectComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatMultiSelectModule, imports: [OnemrvaMatMultiSelectComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatMultiSelectModule, imports: [OnemrvaMatMultiSelectComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatMultiSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatMultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"onemrvapublic-design-system-mat-multi-select.mjs","sources":["../../../../projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.component.ts","../../../../projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.component.html","../../../../projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.module.ts","../../../../projects/onemrva/design-system/mat-multi-select/onemrvapublic-design-system-mat-multi-select.ts"],"sourcesContent":["import {\n AfterContentChecked,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n forwardRef,\n HostBinding,\n inject,\n Input,\n OnDestroy,\n OnInit,\n QueryList,\n ViewEncapsulation,\n} from '@angular/core';\nimport {\n FormControl,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { MatFormFieldControl } from '@angular/material/form-field';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { MatOption } from '@angular/material/core';\nimport {\n debounceTime,\n map,\n Observable,\n startWith,\n Subject,\n takeUntil,\n} from 'rxjs';\nimport { AsyncPipe, NgClass } from '@angular/common';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatSelectSearchComponent } from '@onemrvapublic/design-system/mat-select-search';\n\nlet NEXT_ID = 0;\n\n@Component({\n selector: 'onemrva-mat-multi-select',\n templateUrl: 'onemrva-mat-multi-select.component.html',\n styleUrl: 'onemrva-mat-multi-select.component.scss',\n providers: [\n {\n provide: MatFormFieldControl,\n useExisting: OnemrvaMatMultiSelectComponent,\n multi: false,\n },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => OnemrvaMatMultiSelectComponent),\n multi: true,\n },\n ],\n imports: [\n NgClass,\n TranslatePipe,\n ReactiveFormsModule,\n MatSelectModule,\n AsyncPipe,\n MatIcon,\n MatSelectSearchComponent,\n ],\n standalone: true,\n encapsulation: ViewEncapsulation.Emulated,\n})\nexport class OnemrvaMatMultiSelectComponent\n extends MatFormFieldControl<any>\n implements OnInit, OnDestroy, AfterContentChecked\n{\n counter = 0;\n _values: any[] = [];\n public override stateChanges = new Subject<void>();\n\n @Input()\n multiple = true;\n\n @Input()\n formControl!: FormControl;\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('attr.role')\n public role = 'select';\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('attr.aria-label')\n public label = '';\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('attr.aria-invalid')\n public invalid = false;\n\n @Input()\n showFilter = true;\n\n @Input()\n selectionToggle = true;\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('attr.data-cy')\n public dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;\n\n searchFilter: FormControl = new FormControl<string>('');\n\n @ContentChildren(MatOption)\n matOptions: QueryList<MatOption> = new QueryList<MatOption>();\n matOptions$?: Observable<MatOption<any>[]>;\n onDestroy$: Subject<any> = new Subject<any>();\n\n @HostBinding('style.opacity')\n get opacity() {\n return this.disabled ? 0.4 : 1;\n }\n\n override focused = false;\n\n onFocus() {\n this.focused = true;\n this.stateChanges.next();\n }\n\n onBlur() {\n this.focused = false;\n this.stateChanges.next();\n }\n\n translate = inject(TranslateService);\n cd = inject(ChangeDetectorRef);\n\n constructor() {\n super();\n setTimeout(() => {\n this.focused = false;\n }, 3000);\n }\n\n // Function to call when the rating changes.\n onChange = (_values: any[]) => {\n //\n };\n\n // Function to call when the input is touched (when a star is clicked).\n onTouched = () => {\n //\n };\n\n // Allows Angular to update the model (rating).\n // Update the model and changes needed for the view here.\n writeValue(values: any[] \| any \| undefined \| null): void {\n if (this.multiple) {\n this.counter = 0;\n if (Array.isArray(values)) this.counter = values.length;\n //else if (Array.isArray(this._values)) this.counter = this._values.length;\n }\n this._values = values;\n this.onChange(this._values);\n }\n\n // Allows Angular to register a function to call when the model (rating) changes.\n // Save the function as a property to call later here.\n registerOnChange(fn: (value: any[]) => void): void {\n this.onChange = fn;\n }\n\n // Allows Angular to register a function to call when the input has been touched.\n // Save the function as a property to call later here.\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n isAllSelected() {\n return this.counter === this.matOptions.length;\n }\n\n selectAll() {\n this._values = this.matOptions.map(option => {\n return option.value;\n });\n this.formControl.setValue(this._values);\n }\n\n isNoneSelected() {\n return this.counter === 0;\n }\n\n deselectAll(_$event: MouseEvent) {\n this._values = [];\n this.formControl.setValue(this._values);\n }\n\n onContainerClick(_event: MouseEvent): void {\n //\n }\n\n setDescribedByIds(_ids: string[]): void {\n //\n }\n\n ngOnDestroy(): void {\n this.onDestroy$.next('');\n this.onDestroy$.complete();\n }\n\n optionSize = 0;\n\n ngOnInit(): void {\n this.matOptions$ = this.searchFilter.valueChanges.pipe(\n debounceTime(200),\n startWith(''),\n map((value: string) => {\n this.optionSize = this.matOptions.length;\n if (this._values !== null) {\n this.counter = this._values.length;\n }\n if (value === '') {\n return this.matOptions.filter(_o => {\n return true;\n });\n }\n return this.matOptions.filter(option => {\n return option?._text?.nativeElement.innerHTML\n .toLowerCase()\n .includes(value.toLowerCase());\n });\n }),\n );\n this.formControl.valueChanges\n .pipe(takeUntil(this.onDestroy$))\n .subscribe(values => {\n this._values = values;\n this.counter = this._values.length;\n });\n }\n\n ngAfterContentChecked(): void {\n if (this.matOptions.length !== this.optionSize) {\n this.optionSize = this.matOptions.length;\n this.counter = 0;\n this.searchFilter.updateValueAndValidity({ emitEvent: true });\n }\n }\n}\n","<mat-select\n [multiple]=\"multiple\"\n [formControl]=\"formControl\"\n [attr.data-cy]=\"dataCy\"\n [attr.aria-label]=\"label\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n>\n @if (multiple && selectionToggle) {\n <div class=\"selection-choice text-right\">\n <a\n tabindex=\"1\"\n [ngClass]=\"{ 'mat-disabled': isAllSelected() }\"\n (click)=\"selectAll()\"\n >{{ 'select.select.all' \| translate }}</a\n ><span class=\"separator\">  \|  </span>\n <a\n tabindex=\"2\"\n [ngClass]=\"{ 'mat-disabled': isNoneSelected() }\"\n (click)=\"deselectAll($event)\"\n >{{ 'select.deselect.all' \| translate }}</a\n >\n </div>\n }\n <div class=\"option-list\">\n @if (showFilter) {\n <mat-option>\n <mat-select-search\n [formControl]=\"searchFilter\"\n ariaLabel=\"{{ 'select.search.filter' \| translate }}\"\n noEntriesFoundLabel=\"{{ 'select.search.notFound' \| translate }}\"\n placeholderLabel=\"{{ 'select.search.filter' \| translate }}\"\n ></mat-select-search>\n </mat-option>\n }\n @for (matOption of matOptions$ \| async; track matOption.value) {\n <ng-container>\n <mat-option\n [disabled]=\"matOption.disabled\"\n [value]=\"matOption.value\"\n [attr.data-cy]=\"matOption._getHostElement().dataset['cy']\"\n >\n {{ matOption._text?.nativeElement?.textContent }}\n </mat-option>\n </ng-container>\n }\n </div>\n</mat-select>\n@if (multiple && counter > 0) {\n <div class=\"mat-select-counter float-right position-absolute text-center\">\n <span class=\"text\">{{ counter }}</span\n ><mat-icon (click)=\"deselectAll($event)\">close</mat-icon>\n </div>\n}\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatMultiSelectComponent } from './onemrva-mat-multi-select.component';\n\n@NgModule({\n declarations: [],\n imports: [OnemrvaMatMultiSelectComponent],\n exports: [],\n})\nexport class OnemrvaMatMultiSelectModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"onemrvapublic-design-system-mat-multi-select.mjs","sources":["../../../../projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.component.ts","../../../../projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.component.html","../../../../projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.module.ts","../../../../projects/onemrva/design-system/mat-multi-select/onemrvapublic-design-system-mat-multi-select.ts"],"sourcesContent":["import {\n AfterContentChecked,\n ChangeDetectorRef,\n Component,\n forwardRef,\n inject,\n OnDestroy,\n OnInit,\n ViewEncapsulation,\n input,\n contentChildren,\n computed,\n} from '@angular/core';\nimport {\n FormControl,\n NG_VALUE_ACCESSOR,\n ReactiveFormsModule,\n} from '@angular/forms';\nimport { MatFormFieldControl } from '@angular/material/form-field';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { MatOption } from '@angular/material/core';\nimport {\n debounceTime,\n map,\n Observable,\n startWith,\n Subject,\n takeUntil,\n} from 'rxjs';\nimport { AsyncPipe } from '@angular/common';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatSelectSearchComponent } from '@onemrvapublic/design-system/mat-select-search';\n\nlet NEXT_ID = 0;\n\n@Component({\n selector: 'onemrva-mat-multi-select',\n templateUrl: 'onemrva-mat-multi-select.component.html',\n styleUrl: 'onemrva-mat-multi-select.component.scss',\n host: {\n '[style.opacity]': '_opacity()',\n },\n providers: [\n {\n provide: MatFormFieldControl,\n useExisting: OnemrvaMatMultiSelectComponent,\n multi: false,\n },\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => OnemrvaMatMultiSelectComponent),\n multi: true,\n },\n ],\n imports: [\n TranslatePipe,\n ReactiveFormsModule,\n MatSelectModule,\n AsyncPipe,\n MatIcon,\n MatSelectSearchComponent,\n ],\n standalone: true,\n encapsulation: ViewEncapsulation.Emulated,\n})\nexport class OnemrvaMatMultiSelectComponent\n extends MatFormFieldControl<any>\n implements OnInit, OnDestroy, AfterContentChecked\n{\n counter = 0;\n _values: any[] = [];\n public override stateChanges = new Subject<void>();\n\n readonly multiple = input(true);\n\n readonly formControl = input.required<FormControl>();\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n public readonly role = input('select', { alias: 'attr.role' });\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n public readonly label = input('', { alias: 'attr.aria-label' });\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n public readonly invalid = input(false, { alias: 'attr.aria-invalid' });\n\n readonly showFilter = input(true);\n\n readonly selectionToggle = input(true);\n\n // eslint-disable-next-line @angular-eslint/no-input-rename\n public readonly dataCy = input(`onemrva-mat-multi-select-${NEXT_ID++}`, {\n alias: 'attr.data-cy',\n });\n\n searchFilter: FormControl = new FormControl<string>('');\n\n readonly matOptions = contentChildren(MatOption);\n matOptions$?: Observable<MatOption<any>[]>;\n onDestroy$: Subject<any> = new Subject<any>();\n\n readonly _opacity = computed(() => (this.disabled ? 0.4 : 1));\n\n override focused = false;\n\n onFocus() {\n this.focused = true;\n this.stateChanges.next();\n }\n\n onBlur() {\n this.focused = false;\n this.stateChanges.next();\n }\n\n translate = inject(TranslateService);\n cd = inject(ChangeDetectorRef);\n\n constructor() {\n super();\n setTimeout(() => {\n this.focused = false;\n }, 3000);\n }\n\n // Function to call when the rating changes.\n onChange = (_values: any[]) => {\n //\n };\n\n // Function to call when the input is touched (when a star is clicked).\n onTouched = () => {\n //\n };\n\n // Allows Angular to update the model (rating).\n // Update the model and changes needed for the view here.\n writeValue(values: any[] \| any \| undefined \| null): void {\n if (this.multiple()) {\n this.counter = 0;\n if (Array.isArray(values)) this.counter = values.length;\n //else if (Array.isArray(this._values)) this.counter = this._values.length;\n }\n this._values = values;\n this.onChange(this._values);\n }\n\n // Allows Angular to register a function to call when the model (rating) changes.\n // Save the function as a property to call later here.\n registerOnChange(fn: (value: any[]) => void): void {\n this.onChange = fn;\n }\n\n // Allows Angular to register a function to call when the input has been touched.\n // Save the function as a property to call later here.\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n isAllSelected() {\n return this.counter === this.matOptions().length;\n }\n\n selectAll() {\n this._values = this.matOptions().map(option => {\n return option.value;\n });\n this.formControl().setValue(this._values);\n }\n\n isNoneSelected() {\n return this.counter === 0;\n }\n\n deselectAll(_$event: MouseEvent) {\n this._values = [];\n this.formControl().setValue(this._values);\n }\n\n onContainerClick(_event: MouseEvent): void {\n //\n }\n\n setDescribedByIds(_ids: string[]): void {\n //\n }\n\n ngOnDestroy(): void {\n this.onDestroy$.next('');\n this.onDestroy$.complete();\n }\n\n optionSize = 0;\n\n ngOnInit(): void {\n this.matOptions$ = this.searchFilter.valueChanges.pipe(\n debounceTime(200),\n startWith(''),\n map((value: string) => {\n this.optionSize = this.matOptions().length;\n if (this._values !== null) {\n this.counter = this._values.length;\n }\n if (value === '') {\n return this.matOptions().filter(_o => {\n return true;\n });\n }\n return this.matOptions().filter(option => {\n return option?._text?.nativeElement.innerHTML\n .toLowerCase()\n .includes(value.toLowerCase());\n });\n }),\n );\n this.formControl()\n .valueChanges.pipe(takeUntil(this.onDestroy$))\n .subscribe(values => {\n this._values = values;\n this.counter = this._values.length;\n });\n }\n\n ngAfterContentChecked(): void {\n const matOptions = this.matOptions();\n if (matOptions.length !== this.optionSize) {\n this.optionSize = matOptions.length;\n this.counter = 0;\n this.searchFilter.updateValueAndValidity({ emitEvent: true });\n }\n }\n}\n","<mat-select\n [multiple]=\"multiple()\"\n [formControl]=\"formControl()\"\n [attr.data-cy]=\"dataCy()\"\n [attr.aria-label]=\"label()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n>\n @if (multiple() && selectionToggle()) {\n <div class=\"selection-choice text-right\">\n <a\n tabindex=\"1\"\n [class.mat-disabled]=\"isAllSelected()\"\n (click)=\"selectAll()\"\n >{{ 'select.select.all' \| translate }}</a\n ><span class=\"separator\">  \|  </span>\n <a\n tabindex=\"2\"\n [class.mat-disabled]=\"isNoneSelected()\"\n (click)=\"deselectAll($event)\"\n >{{ 'select.deselect.all' \| translate }}</a\n >\n </div>\n }\n <div class=\"option-list\">\n @if (showFilter()) {\n <mat-option>\n <mat-select-search\n [formControl]=\"searchFilter\"\n ariaLabel=\"{{ 'select.search.filter' \| translate }}\"\n noEntriesFoundLabel=\"{{ 'select.search.notFound' \| translate }}\"\n placeholderLabel=\"{{ 'select.search.filter' \| translate }}\"\n />\n </mat-option>\n }\n @for (matOption of matOptions$ \| async; track matOption.value) {\n <ng-container>\n <mat-option\n [disabled]=\"matOption.disabled\"\n [value]=\"matOption.value\"\n [attr.data-cy]=\"matOption._getHostElement().dataset['cy']\"\n >\n {{ matOption._text?.nativeElement?.textContent }}\n </mat-option>\n </ng-container>\n }\n </div>\n</mat-select>\n@if (multiple() && counter > 0) {\n <div class=\"mat-select-counter float-right position-absolute text-center\">\n <span class=\"text\">{{ counter }}</span\n ><mat-icon (click)=\"deselectAll($event)\">close</mat-icon>\n </div>\n}\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatMultiSelectComponent } from './onemrva-mat-multi-select.component';\n\n@NgModule({\n declarations: [],\n imports: [OnemrvaMatMultiSelectComponent],\n exports: [],\n})\nexport class OnemrvaMatMultiSelectModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkCA,IAAI,OAAO,GAAG,CAAC;AAgCT,MAAO,8BACX,SAAQ,mBAAwB,CAAA;IAuChC,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;IAC1B;AAKA,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;QAlDT,IAAA,CAAA,OAAO,GAAG,CAAC;QACX,IAAA,CAAA,OAAO,GAAU,EAAE;AACH,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,OAAO,EAAQ;AAEzC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,IAAI,oDAAC;AAEtB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,QAAQ,sDAAe;;QAGpC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,iDAAI,KAAK,EAAE,WAAW,EAAA,CAAG;;QAG9C,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE,kDAAI,KAAK,EAAE,iBAAiB,EAAA,CAAG;;QAG/C,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,KAAK,oDAAI,KAAK,EAAE,mBAAmB,EAAA,CAAG;AAE7D,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI,sDAAC;AAExB,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAC,IAAI,2DAAC;;AAGtB,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,CAAA,yBAAA,EAA4B,OAAO,EAAE,CAAA,CAAE,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,EAAA,GAAA,EAAA,CAAA,EACpE,KAAK,EAAE,cAAc,EAAA,CACrB;AAEF,QAAA,IAAA,CAAA,YAAY,GAAgB,IAAI,WAAW,CAAS,EAAE,CAAC;AAE9C,QAAA,IAAA,CAAA,UAAU,GAAG,eAAe,CAAC,SAAS,sDAAC;AAEhD,QAAA,IAAA,CAAA,UAAU,GAAiB,IAAI,OAAO,EAAO;QAEpC,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC,oDAAC;QAEpD,IAAA,CAAA,OAAO,GAAG,KAAK;AAYxB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC;AACpC,QAAA,IAAA,CAAA,EAAE,GAAG,MAAM,CAAC,iBAAiB,CAAC;;AAU9B,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,OAAc,KAAI;;AAE9B,QAAA,CAAC;;QAGD,IAAA,CAAA,SAAS,GAAG,MAAK;;AAEjB,QAAA,CAAC;QA2DD,IAAA,CAAA,UAAU,GAAG,CAAC;QAxEZ,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACtB,CAAC,EAAE,IAAI,CAAC;IACV;;;AAcA,IAAA,UAAU,CAAC,MAAsC,EAAA;AAC/C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC;AAChB,YAAA,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;AAAE,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM;;QAEzD;AACA,QAAA,IAAI,CAAC,OAAO,GAAG,MAAM;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B;;;AAIA,IAAA,gBAAgB,CAAC,EAA0B,EAAA;AACzC,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;;;AAIA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;IAEA,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM;IAClD;IAEA,SAAS,GAAA;AACP,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,MAAM,IAAG;YAC5C,OAAO,MAAM,CAAC,KAAK;AACrB,QAAA,CAAC,CAAC;QACF,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3C;IAEA,cAAc,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,OAAO,KAAK,CAAC;IAC3B;AAEA,IAAA,WAAW,CAAC,OAAmB,EAAA;AAC7B,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3C;AAEA,IAAA,gBAAgB,CAAC,MAAkB,EAAA;;IAEnC;AAEA,IAAA,iBAAiB,CAAC,IAAc,EAAA;;IAEhC;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE;IAC5B;IAIA,QAAQ,GAAA;QACN,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,CACpD,YAAY,CAAC,GAAG,CAAC,EACjB,SAAS,CAAC,EAAE,CAAC,EACb,GAAG,CAAC,CAAC,KAAa,KAAI;YACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM;AAC1C,YAAA,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;gBACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM;YACpC;AACA,YAAA,IAAI,KAAK,KAAK,EAAE,EAAE;gBAChB,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC,EAAE,IAAG;AACnC,oBAAA,OAAO,IAAI;AACb,gBAAA,CAAC,CAAC;YACJ;YACA,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,MAAM,CAAC,MAAM,IAAG;AACvC,gBAAA,OAAO,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC;AACjC,qBAAA,WAAW;AACX,qBAAA,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;AAClC,YAAA,CAAC,CAAC;QACJ,CAAC,CAAC,CACH;QACD,IAAI,CAAC,WAAW;aACb,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;aAC5C,SAAS,CAAC,MAAM,IAAG;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM;YACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM;AACpC,QAAA,CAAC,CAAC;IACN;IAEA,qBAAqB,GAAA;AACnB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;QACpC,IAAI,UAAU,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,EAAE;AACzC,YAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM;AACnC,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,sBAAsB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/D;IACF;8GArKW,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA9B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,YAAA,EAAA,EAAA,EAAA,SAAA,EAvB9B;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,mBAAmB;AAC5B,gBAAA,WAAW,EAAE,8BAA8B;AAC3C,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,8BAA8B,CAAC;AAC7D,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EA4CqC,SAAS,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClGjD,wzDAwDA,EAAA,MAAA,EAAA,CAAA,mvBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDCI,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,eAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,aAAA,EAAA,UAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,aAAA,EAAA,OAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,YAAA,EAAA,0BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEf,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,wBAAwB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,MAAA,EAAA,WAAA,EAAA,cAAA,EAAA,qBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,4BAAA,EAAA,8BAAA,EAAA,uCAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,0BAAA,EAAA,gCAAA,EAAA,iCAAA,EAAA,kCAAA,EAAA,uBAAA,EAAA,mCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EALxB,aAAa,6CAGb,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAOA,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBA9B1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,IAAA,EAG9B;AACJ,wBAAA,iBAAiB,EAAE,YAAY;qBAChC,EAAA,SAAA,EACU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,mBAAmB;AAC5B,4BAAA,WAAW,EAAA,8BAAgC;AAC3C,4BAAA,KAAK,EAAE,KAAK;AACb,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,oCAAoC,CAAC;AAC7D,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EAAA,OAAA,EACQ;wBACP,aAAa;wBACb,mBAAmB;wBACnB,eAAe;wBACf,SAAS;wBACT,OAAO;wBACP,wBAAwB;AACzB,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,aAAA,EACD,iBAAiB,CAAC,QAAQ,EAAA,QAAA,EAAA,wzDAAA,EAAA,MAAA,EAAA,CAAA,mvBAAA,CAAA,EAAA;85BAkCH,SAAS,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ME1FpC,2BAA2B,CAAA;8GAA3B,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAH5B,8BAA8B,CAAA,EAAA,CAAA,CAAA;AAG7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,YAH5B,8BAA8B,CAAA,EAAA,CAAA,CAAA;;2FAG7B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBALvC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,EAAE;oBAChB,OAAO,EAAE,CAAC,8BAA8B,CAAC;AACzC,oBAAA,OAAO,EAAE,EAAE;AACZ,iBAAA;;;ACPD;;AAEG;;;;"}

package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs CHANGED Viewed

@@ -1,87 +1,62 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, HostBinding, ViewChild, Input, ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';
+import { input, viewChild, signal, computed, inject, ChangeDetectorRef, ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { RouterLinkActive, RouterLink, Router, NavigationEnd } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { MatIcon } from '@angular/material/icon';
 import { MatExpansionPanel } from '@angular/material/expansion';
-import { NgClass } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 class OnemrvaMatNavigationItemComponent {
     constructor() {
-        this.label = '';
-        this.level = 0;
-        this.translate = true;
-        this.isExpanded = false;
+        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
+        this.routerLinkActiveOptions = input(...(ngDevMode ? [undefined, { debugName: "routerLinkActiveOptions" }] : []));
+        this.dataCy = input(...(ngDevMode ? [undefined, { debugName: "dataCy" }] : []));
+        this.baseRouteForActiveMenu = input(...(ngDevMode ? [undefined, { debugName: "baseRouteForActiveMenu" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+        this.highlighted = input(...(ngDevMode ? [undefined, { debugName: "highlighted" }] : []));
+        this.opened = input(...(ngDevMode ? [undefined, { debugName: "opened" }] : []));
+        this.children = input(...(ngDevMode ? [undefined, { debugName: "children" }] : []));
+        this.customNgClass = input(...(ngDevMode ? [undefined, { debugName: "customNgClass" }] : []));
+        this.translate = input(true, ...(ngDevMode ? [{ debugName: "translate" }] : []));
+        this._highlighted = this.highlighted();
+        this.matExpansionPanel = viewChild(MatExpansionPanel, ...(ngDevMode ? [{ debugName: "matExpansionPanel" }] : []));
+        this._isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
+        this._isHighlighted = computed(() => this.highlighted(), ...(ngDevMode ? [{ debugName: "_isHighlighted" }] : []));
+        this._isHighlighted2 = computed(() => !this.highlighted() && this._isExpanded(), ...(ngDevMode ? [{ debugName: "_isHighlighted2" }] : []));
         this.cd = inject(ChangeDetectorRef);
     }
-    get isHighlighted() {
-        return this.highlighted;
-    }
-    get isHighlighted2() {
-        return !this.highlighted && this.isExpanded;
-    }
     get indentArray() {
-        return Array(this.level).fill(0);
+        return Array(this.level()).fill(0);
     }
     ngAfterViewInit() {
-        this.matExpansionPanel?.afterCollapse.subscribe(() => {
-            this.highlighted = false;
-            this.isExpanded = false;
+        this.matExpansionPanel()?.afterCollapse.subscribe(() => {
+            this._highlighted = false;
+            this._isExpanded.set(false);
             this.cd.markForCheck();
         });
-        this.matExpansionPanel?.afterExpand.subscribe(() => {
-            this.isExpanded = true;
+        this.matExpansionPanel()?.afterExpand.subscribe(() => {
+            this._isExpanded.set(true);
             this.cd.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: OnemrvaMatNavigationItemComponent, isStandalone: true, selector: "onemrva-mat-navigation-item", inputs: { routerLink: "routerLink", routerLinkActiveOptions: "routerLinkActiveOptions", dataCy: "dataCy", baseRouteForActiveMenu: "baseRouteForActiveMenu", label: "label", icon: "icon", level: "level", highlighted: "highlighted", opened: "opened", children: "children", customNgClass: "customNgClass", translate: "translate" }, host: { properties: { "class.highlighted": "this.isHighlighted", "class.highlighted2": "this.isHighlighted2" } }, viewQueries: [{ propertyName: "matExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], ngImport: i0, template: "@if (routerLink) {\n  <button\n    [routerLink]=\"routerLink\"\n    [attr.data-cy]=\"dataCy\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    routerLinkActive=\"active\"\n    class=\"mobile-menu-item\"\n  >\n    @for (indent of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n    @if (icon) {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n    @if (translate && label.trim() !== '') {\n      <span [innerHTML]=\"label | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label\"></span>\n    }\n  </button>\n} @else {\n  <button\n    [ngClass]=\"{ 'mobile-menu-item': true, highlighted: highlighted === true }\"\n    [attr.data-cy]=\"dataCy\"\n    (click)=\"subMenu.toggle()\"\n  >\n    @for (indent of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n\n    @if (icon) {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n\n    @if (translate && label.trim() !== '') {\n      <span [innerHTML]=\"label | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label\"></span>\n    }\n\n    <mat-icon [ngClass]=\"{ end: true, opened: subMenu.expanded }\"\n      >arrow_drop_down</mat-icon\n    >\n  </button>\n  <mat-expansion-panel #subMenu [expanded]=\"opened\">\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n}\n", styles: [":host.highlighted2 .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary-container)}:host.highlighted .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer) var(--quad-spacer);border:none;box-shadow:none;align-items:center;text-align:left;cursor:pointer;font:var(--mat-sys-body-medium);text-decoration:none;color:var(--mat-sys-on-surface);border-left:.5rem solid transparent}:host .mobile-menu-item.active{border-left:.5rem solid var(--mat-sys-tertiary);font-weight:600;background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item.active mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 600,\"GRAD\" 0,\"opsz\" 24}:host .mobile-menu-item:hover,:host .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item mat-icon{margin-left:-4px;margin-right:var(--spacer);transition:transform .3s ease}:host .mobile-menu-item mat-icon.opened{transform:rotate(180deg)}:host .mobile-menu-item mat-icon.end{margin-left:auto}:host .mobile-menu-item .indent-spacer{width:var(--double-spacer);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OnemrvaMatNavigationItemComponent, isStandalone: true, selector: "onemrva-mat-navigation-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, baseRouteForActiveMenu: { classPropertyName: "baseRouteForActiveMenu", publicName: "baseRouteForActiveMenu", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null }, customNgClass: { classPropertyName: "customNgClass", publicName: "customNgClass", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.highlighted": "_isHighlighted()", "class.highlighted2": "_isHighlighted2()" } }, viewQueries: [{ propertyName: "matExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, isSignal: true }], ngImport: i0, template: "@if (routerLink()) {\n  <button\n    [routerLink]=\"routerLink()\"\n    [attr.data-cy]=\"dataCy()\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    routerLinkActive=\"active\"\n    class=\"mobile-menu-item\"\n  >\n    @for (_ of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n    @if (icon()) {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    @if (translate() && label().trim() !== '') {\n      <span [innerHTML]=\"label() | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label()\"></span>\n    }\n  </button>\n} @else {\n  <button\n    [class]=\"{ 'mobile-menu-item': true, highlighted: highlighted() === true }\"\n    [attr.data-cy]=\"dataCy()\"\n    (click)=\"subMenu.toggle()\"\n  >\n    @for (_ of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n\n    @if (icon()) {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n\n    @if (translate() && label().trim() !== '') {\n      <span [innerHTML]=\"label() | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label()\"></span>\n    }\n\n    <mat-icon [class]=\"{ end: true, opened: subMenu.expanded }\"\n      >arrow_drop_down</mat-icon\n    >\n  </button>\n  <mat-expansion-panel #subMenu [expanded]=\"opened()\">\n    <ng-content />\n  </mat-expansion-panel>\n}\n", styles: [":host.highlighted2 .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary-container)}:host.highlighted .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer) var(--quad-spacer);border:none;box-shadow:none;align-items:center;text-align:left;cursor:pointer;font:var(--mat-sys-body-medium);text-decoration:none;color:var(--mat-sys-on-surface);border-left:.5rem solid transparent}:host .mobile-menu-item.active{border-left:.5rem solid var(--mat-sys-tertiary);font-weight:600}:host .mobile-menu-item.active mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 600,\"GRAD\" 0,\"opsz\" 24}:host .mobile-menu-item.active{background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item:hover,:host .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item mat-icon{margin-left:-4px;margin-right:var(--spacer);transition:transform .3s ease}:host .mobile-menu-item mat-icon.opened{transform:rotate(180deg)}:host .mobile-menu-item mat-icon.end{margin-left:auto}:host .mobile-menu-item .indent-spacer{width:var(--double-spacer);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'onemrva-mat-navigation-item', imports: [
                         MatIcon,
                         RouterLinkActive,
                         RouterLink,
                         MatExpansionPanel,
-                        NgClass,
                         TranslatePipe,
-                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink) {\n  <button\n    [routerLink]=\"routerLink\"\n    [attr.data-cy]=\"dataCy\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    routerLinkActive=\"active\"\n    class=\"mobile-menu-item\"\n  >\n    @for (indent of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n    @if (icon) {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n    @if (translate && label.trim() !== '') {\n      <span [innerHTML]=\"label | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label\"></span>\n    }\n  </button>\n} @else {\n  <button\n    [ngClass]=\"{ 'mobile-menu-item': true, highlighted: highlighted === true }\"\n    [attr.data-cy]=\"dataCy\"\n    (click)=\"subMenu.toggle()\"\n  >\n    @for (indent of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n\n    @if (icon) {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n\n    @if (translate && label.trim() !== '') {\n      <span [innerHTML]=\"label | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label\"></span>\n    }\n\n    <mat-icon [ngClass]=\"{ end: true, opened: subMenu.expanded }\"\n      >arrow_drop_down</mat-icon\n    >\n  </button>\n  <mat-expansion-panel #subMenu [expanded]=\"opened\">\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n}\n", styles: [":host.highlighted2 .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary-container)}:host.highlighted .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer) var(--quad-spacer);border:none;box-shadow:none;align-items:center;text-align:left;cursor:pointer;font:var(--mat-sys-body-medium);text-decoration:none;color:var(--mat-sys-on-surface);border-left:.5rem solid transparent}:host .mobile-menu-item.active{border-left:.5rem solid var(--mat-sys-tertiary);font-weight:600;background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item.active mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 600,\"GRAD\" 0,\"opsz\" 24}:host .mobile-menu-item:hover,:host .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item mat-icon{margin-left:-4px;margin-right:var(--spacer);transition:transform .3s ease}:host .mobile-menu-item mat-icon.opened{transform:rotate(180deg)}:host .mobile-menu-item mat-icon.end{margin-left:auto}:host .mobile-menu-item .indent-spacer{width:var(--double-spacer);flex-shrink:0}\n"] }]
-        }], propDecorators: { routerLink: [{
-                type: Input
-            }], routerLinkActiveOptions: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }], baseRouteForActiveMenu: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], highlighted: [{
-                type: Input
-            }], opened: [{
-                type: Input
-            }], children: [{
-                type: Input
-            }], customNgClass: [{
-                type: Input
-            }], translate: [{
-                type: Input
-            }], matExpansionPanel: [{
-                type: ViewChild,
-                args: [MatExpansionPanel]
-            }], isHighlighted: [{
-                type: HostBinding,
-                args: ['class.highlighted']
-            }], isHighlighted2: [{
-                type: HostBinding,
-                args: ['class.highlighted2']
-            }] } });
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.highlighted]': '_isHighlighted()',
+                        '[class.highlighted2]': '_isHighlighted2()',
+                    }, template: "@if (routerLink()) {\n  <button\n    [routerLink]=\"routerLink()\"\n    [attr.data-cy]=\"dataCy()\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    routerLinkActive=\"active\"\n    class=\"mobile-menu-item\"\n  >\n    @for (_ of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n    @if (icon()) {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n    @if (translate() && label().trim() !== '') {\n      <span [innerHTML]=\"label() | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label()\"></span>\n    }\n  </button>\n} @else {\n  <button\n    [class]=\"{ 'mobile-menu-item': true, highlighted: highlighted() === true }\"\n    [attr.data-cy]=\"dataCy()\"\n    (click)=\"subMenu.toggle()\"\n  >\n    @for (_ of indentArray; track $index) {\n      <span class=\"indent-spacer\"></span>\n    }\n\n    @if (icon()) {\n      <mat-icon>{{ icon() }}</mat-icon>\n    }\n\n    @if (translate() && label().trim() !== '') {\n      <span [innerHTML]=\"label() | translate\"></span>\n    } @else {\n      <span [innerHTML]=\"label()\"></span>\n    }\n\n    <mat-icon [class]=\"{ end: true, opened: subMenu.expanded }\"\n      >arrow_drop_down</mat-icon\n    >\n  </button>\n  <mat-expansion-panel #subMenu [expanded]=\"opened()\">\n    <ng-content />\n  </mat-expansion-panel>\n}\n", styles: [":host.highlighted2 .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary-container)}:host.highlighted .mobile-menu-item{transition:border-left .4s ease;border-left:.5rem solid var(--mat-sys-tertiary)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer) var(--quad-spacer);border:none;box-shadow:none;align-items:center;text-align:left;cursor:pointer;font:var(--mat-sys-body-medium);text-decoration:none;color:var(--mat-sys-on-surface);border-left:.5rem solid transparent}:host .mobile-menu-item.active{border-left:.5rem solid var(--mat-sys-tertiary);font-weight:600}:host .mobile-menu-item.active mat-icon{font-variation-settings:\"FILL\" 1,\"wght\" 600,\"GRAD\" 0,\"opsz\" 24}:host .mobile-menu-item.active{background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item:hover,:host .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item mat-icon{margin-left:-4px;margin-right:var(--spacer);transition:transform .3s ease}:host .mobile-menu-item mat-icon.opened{transform:rotate(180deg)}:host .mobile-menu-item mat-icon.end{margin-left:auto}:host .mobile-menu-item .indent-spacer{width:var(--double-spacer);flex-shrink:0}\n"] }]
+        }], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], baseRouteForActiveMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseRouteForActiveMenu", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], highlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlighted", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }], customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], translate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translate", required: false }] }], matExpansionPanel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatExpansionPanel), { isSignal: true }] }] } });
 class OnemrvaMatNavigationTreeComponent {
     constructor() {
@@ -89,12 +64,12 @@ class OnemrvaMatNavigationTreeComponent {
         this.level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
         this.translate = input(true, ...(ngDevMode ? [{ debugName: "translate" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: OnemrvaMatNavigationTreeComponent, isStandalone: true, selector: "onemrva-mat-navigation-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      ></onemrva-mat-navigation-tree>\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationTreeComponent, selector: "onemrva-mat-navigation-tree", inputs: ["items", "level", "translate"] }, { kind: "component", type: OnemrvaMatNavigationItemComponent, selector: "onemrva-mat-navigation-item", inputs: ["routerLink", "routerLinkActiveOptions", "dataCy", "baseRouteForActiveMenu", "label", "icon", "level", "highlighted", "opened", "children", "customNgClass", "translate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: OnemrvaMatNavigationTreeComponent, isStandalone: true, selector: "onemrva-mat-navigation-tree", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      />\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationTreeComponent, selector: "onemrva-mat-navigation-tree", inputs: ["items", "level", "translate"] }, { kind: "component", type: OnemrvaMatNavigationItemComponent, selector: "onemrva-mat-navigation-item", inputs: ["routerLink", "routerLinkActiveOptions", "dataCy", "baseRouteForActiveMenu", "label", "icon", "level", "highlighted", "opened", "children", "customNgClass", "translate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-navigation-tree', imports: [OnemrvaMatNavigationItemComponent], standalone: true, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      ></onemrva-mat-navigation-tree>\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
+            args: [{ selector: 'onemrva-mat-navigation-tree', imports: [OnemrvaMatNavigationItemComponent], standalone: true, template: "@for (item of items(); track item) {\n  <onemrva-mat-navigation-item\n    [label]=\"item.label\"\n    [icon]=\"item.icon\"\n    [routerLink]=\"item.routerLink\"\n    [level]=\"level()\"\n    [dataCy]=\"item.dataCy\"\n    [highlighted]=\"item.highlighted\"\n    [children]=\"item.children\"\n    [opened]=\"item.opened\"\n    [translate]=\"translate()\"\n  >\n    @if (item.children?.length) {\n      <onemrva-mat-navigation-tree\n        [items]=\"item.children ?? []\"\n        [level]=\"level() + 1\"\n      />\n    }\n  </onemrva-mat-navigation-item>\n}\n", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], translate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translate", required: false }] }] } });
 class OnemrvaMatNavigationComponent {
@@ -149,12 +124,12 @@ class OnemrvaMatNavigationComponent {
         }
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: OnemrvaMatNavigationComponent, isStandalone: true, selector: "onemrva-mat-navigation", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<onemrva-mat-navigation-tree\n  [items]=\"items()\"\n  [level]=\"level() + 1\"\n></onemrva-mat-navigation-tree>\n", styles: ["onemrva-mat-navigation{display:flex;width:100%;max-height:calc(100vh - var(--layout-header-height));overflow-y:auto;padding:var(--double-spacer) 0}onemrva-mat-navigation .mat-expansion-panel-body{padding:0}onemrva-mat-navigation .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer);border:none;box-shadow:none;align-items:center;text-align:left;font:var(--mat-sys-body-large)}onemrva-mat-navigation .mobile-menu-item:active button,onemrva-mat-navigation .mobile-menu-item.active button{border-left:4px solid var(--mat-sys-tertiary)}onemrva-mat-navigation .mobile-menu-item:hover,onemrva-mat-navigation .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}onemrva-mat-navigation .mobile-menu-item mat-icon{margin-left:var(--half-spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon:first-child{margin-right:var(--spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon.end{margin-left:auto}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationTreeComponent, selector: "onemrva-mat-navigation-tree", inputs: ["items", "level", "translate"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: OnemrvaMatNavigationComponent, isStandalone: true, selector: "onemrva-mat-navigation", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<onemrva-mat-navigation-tree [items]=\"items()\" [level]=\"level() + 1\" />\n", styles: ["onemrva-mat-navigation{display:flex;width:100%;max-height:calc(100vh - var(--layout-header-height));overflow-y:auto;padding:var(--double-spacer) 0}onemrva-mat-navigation .mat-expansion-panel-body{padding:0}onemrva-mat-navigation .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer);border:none;box-shadow:none;align-items:center;text-align:left;font:var(--mat-sys-body-large)}onemrva-mat-navigation .mobile-menu-item:active button,onemrva-mat-navigation .mobile-menu-item.active button{border-left:4px solid var(--mat-sys-tertiary)}onemrva-mat-navigation .mobile-menu-item:hover,onemrva-mat-navigation .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}onemrva-mat-navigation .mobile-menu-item mat-icon{margin-left:var(--half-spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon:first-child{margin-right:var(--spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon.end{margin-left:auto}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationTreeComponent, selector: "onemrva-mat-navigation-tree", inputs: ["items", "level", "translate"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-navigation', imports: [OnemrvaMatNavigationTreeComponent], encapsulation: ViewEncapsulation.None, standalone: true, template: "<onemrva-mat-navigation-tree\n  [items]=\"items()\"\n  [level]=\"level() + 1\"\n></onemrva-mat-navigation-tree>\n", styles: ["onemrva-mat-navigation{display:flex;width:100%;max-height:calc(100vh - var(--layout-header-height));overflow-y:auto;padding:var(--double-spacer) 0}onemrva-mat-navigation .mat-expansion-panel-body{padding:0}onemrva-mat-navigation .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer);border:none;box-shadow:none;align-items:center;text-align:left;font:var(--mat-sys-body-large)}onemrva-mat-navigation .mobile-menu-item:active button,onemrva-mat-navigation .mobile-menu-item.active button{border-left:4px solid var(--mat-sys-tertiary)}onemrva-mat-navigation .mobile-menu-item:hover,onemrva-mat-navigation .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}onemrva-mat-navigation .mobile-menu-item mat-icon{margin-left:var(--half-spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon:first-child{margin-right:var(--spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon.end{margin-left:auto}\n"] }]
+            args: [{ selector: 'onemrva-mat-navigation', imports: [OnemrvaMatNavigationTreeComponent], encapsulation: ViewEncapsulation.None, standalone: true, template: "<onemrva-mat-navigation-tree [items]=\"items()\" [level]=\"level() + 1\" />\n", styles: ["onemrva-mat-navigation{display:flex;width:100%;max-height:calc(100vh - var(--layout-header-height));overflow-y:auto;padding:var(--double-spacer) 0}onemrva-mat-navigation .mat-expansion-panel-body{padding:0}onemrva-mat-navigation .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--double-spacer);border:none;box-shadow:none;align-items:center;text-align:left;font:var(--mat-sys-body-large)}onemrva-mat-navigation .mobile-menu-item:active button,onemrva-mat-navigation .mobile-menu-item.active button{border-left:4px solid var(--mat-sys-tertiary)}onemrva-mat-navigation .mobile-menu-item:hover,onemrva-mat-navigation .mobile-menu-item:focus{background:var(--mat-sys-surface-container-low)}onemrva-mat-navigation .mobile-menu-item mat-icon{margin-left:var(--half-spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon:first-child{margin-right:var(--spacer)}onemrva-mat-navigation .mobile-menu-item mat-icon.end{margin-left:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], translate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translate", required: false }] }] } });
 /*