@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

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

@@ -0,0 +1,225 @@
+import * as i0 from '@angular/core';
+import { QueryList, inject, ChangeDetectorRef, forwardRef, HostBinding, ContentChildren, Input, 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 { MatIcon } from '@angular/material/icon';
+import * as i2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSelectSearchComponent } from '@onemrvapublic/design-system/mat-select-search';
+
+let NEXT_ID = 0;
+class OnemrvaMatMultiSelectComponent extends MatFormFieldControl {
+    get opacity() {
+        return this.disabled ? 0.4 : 1;
+    }
+    onFocus() {
+        this.focused = true;
+        this.stateChanges.next();
+    }
+    onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    constructor() {
+        super();
+        this.counter = 0;
+        this._values = [];
+        this.stateChanges = new Subject();
+        this.multiple = true;
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.role = 'select';
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.label = '';
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.invalid = false;
+        this.showFilter = true;
+        this.selectionToggle = true;
+        // eslint-disable-next-line @angular-eslint/no-input-rename
+        this.dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
+        this.searchFilter = new FormControl('');
+        this.matOptions = new QueryList();
+        this.onDestroy$ = new Subject();
+        this.focused = false;
+        this.translate = inject(TranslateService);
+        this.cd = inject(ChangeDetectorRef);
+        // Function to call when the rating changes.
+        this.onChange = (_values) => {
+            //
+        };
+        // Function to call when the input is touched (when a star is clicked).
+        this.onTouched = () => {
+            //
+        };
+        this.optionSize = 0;
+        setTimeout(() => {
+            this.focused = false;
+        }, 3000);
+    }
+    // Allows Angular to update the model (rating).
+    // Update the model and changes needed for the view here.
+    writeValue(values) {
+        if (this.multiple) {
+            this.counter = 0;
+            if (Array.isArray(values))
+                this.counter = values.length;
+            //else if (Array.isArray(this._values)) this.counter = this._values.length;
+        }
+        this._values = values;
+        this.onChange(this._values);
+    }
+    // Allows Angular to register a function to call when the model (rating) changes.
+    // Save the function as a property to call later here.
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    // Allows Angular to register a function to call when the input has been touched.
+    // Save the function as a property to call later here.
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    isAllSelected() {
+        return this.counter === this.matOptions.length;
+    }
+    selectAll() {
+        this._values = this.matOptions.map(option => {
+            return option.value;
+        });
+        this.formControl.setValue(this._values);
+    }
+    isNoneSelected() {
+        return this.counter === 0;
+    }
+    deselectAll(_$event) {
+        this._values = [];
+        this.formControl.setValue(this._values);
+    }
+    onContainerClick(_event) {
+        //
+    }
+    setDescribedByIds(_ids) {
+        //
+    }
+    ngOnDestroy() {
+        this.onDestroy$.next('');
+        this.onDestroy$.complete();
+    }
+    ngOnInit() {
+        this.matOptions$ = this.searchFilter.valueChanges.pipe(debounceTime(200), startWith(''), map((value) => {
+            this.optionSize = this.matOptions.length;
+            if (this._values !== null) {
+                this.counter = this._values.length;
+            }
+            if (value === '') {
+                return this.matOptions.filter(_o => {
+                    return true;
+                });
+            }
+            return this.matOptions.filter(option => {
+                return option?._text?.nativeElement.innerHTML
+                    .toLowerCase()
+                    .includes(value.toLowerCase());
+            });
+        }));
+        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;
+            this.counter = 0;
+            this.searchFilter.updateValueAndValidity({ emitEvent: true });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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: [
+            {
+                provide: MatFormFieldControl,
+                useExisting: OnemrvaMatMultiSelectComponent,
+                multi: false,
+            },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onemrva-mat-multi-select', providers: [
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: OnemrvaMatMultiSelectComponent,
+                            multi: false,
+                        },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OnemrvaMatMultiSelectComponent),
+                            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']
+            }] } });
+
+class OnemrvaMatMultiSelectModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatMultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatMultiSelectModule, imports: [OnemrvaMatMultiSelectComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatMultiSelectModule, imports: [OnemrvaMatMultiSelectComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatMultiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [OnemrvaMatMultiSelectComponent],
+                    exports: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OnemrvaMatMultiSelectComponent, OnemrvaMatMultiSelectModule };
+//# sourceMappingURL=onemrvapublic-design-system-mat-multi-select.mjs.map

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

@@ -0,0 +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\">&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","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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"}

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

@@ -0,0 +1,169 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, HostBinding, ViewChild, Input, ChangeDetectionStrategy, Component, input, 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.cd = inject(ChangeDetectorRef);
+    }
+    get isHighlighted() {
+        return this.highlighted;
+    }
+    get isHighlighted2() {
+        return !this.highlighted && this.isExpanded;
+    }
+    get indentArray() {
+        return Array(this.level).fill(0);
+    }
+    ngAfterViewInit() {
+        this.matExpansionPanel?.afterCollapse.subscribe(() => {
+            this.highlighted = false;
+            this.isExpanded = false;
+            this.cd.markForCheck();
+        });
+        this.matExpansionPanel?.afterExpand.subscribe(() => {
+            this.isExpanded = true;
+            this.cd.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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 button{border-left:.5rem solid var(--mat-sys-tertiary);font-weight:600;background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item.active button 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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 button{border-left:.5rem solid var(--mat-sys-tertiary);font-weight:600;background:var(--mat-sys-surface-container-low)}:host .mobile-menu-item.active button 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']
+            }] } });
+
+class OnemrvaMatNavigationTreeComponent {
+    constructor() {
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        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.1.7", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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: [""], 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNavigationTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onemrva-mat-navigation-tree', imports: [OnemrvaMatNavigationItemComponent], encapsulation: ViewEncapsulation.None, 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" }]
+        }] });
+
+class OnemrvaMatNavigationComponent {
+    constructor() {
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : []));
+        this.translate = input(true, ...(ngDevMode ? [{ debugName: "translate" }] : []));
+        this.router = inject(Router);
+        this.router.events
+            .pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            this.updateNavigationState(this.items(), event.urlAfterRedirects);
+        });
+    }
+    updateNavigationState(items, url) {
+        // First, reset all states
+        this.resetNavigationStates(items);
+        // Find the active item and build the path to it
+        const activePath = this.findActiveItemPath(items, url, []);
+        if (activePath.length > 0) {
+            // Set the highest parent (first item in path - level 0) as highlighted
+            if (activePath.length > 0) {
+                activePath[0].highlighted = true;
+            }
+            // Set opened to true for all parents to expand the path to the active item
+            for (let i = 0; i < activePath.length - 1; i++) {
+                activePath[i].opened = true;
+            }
+        }
+    }
+    resetNavigationStates(items) {
+        for (const item of items) {
+            item.highlighted = false;
+            item.opened = false;
+            if (item.children) {
+                this.resetNavigationStates(item.children);
+            }
+        }
+    }
+    findActiveItemPath(items, url, currentPath) {
+        for (const item of items) {
+            const newPath = [...currentPath, item];
+            if (item.routerLink && item.routerLink === url) {
+                return newPath;
+            }
+            if (item.children) {
+                const childPath = this.findActiveItemPath(item.children, url, newPath);
+                if (childPath.length > 0) {
+                    return childPath;
+                }
+            }
+        }
+        return [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", 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{min-width:250px}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-medium)}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.1.7", 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{min-width:250px}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-medium)}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: () => [] });
+
+/*
+ * Public API Surface of mat-sticker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OnemrvaMatNavigationComponent, OnemrvaMatNavigationItemComponent };
+//# sourceMappingURL=onemrvapublic-design-system-mat-navigation.mjs.map

package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"onemrvapublic-design-system-mat-navigation.mjs","sources":["../../../../projects/onemrva/design-system/mat-navigation/src/mat-navigation-item/onemrva-mat-navigation-item.component.ts","../../../../projects/onemrva/design-system/mat-navigation/src/mat-navigation-item/onemrva-mat-navigation-item.component.html","../../../../projects/onemrva/design-system/mat-navigation/src/mat-navigation-tree/onemrva-mat-navigation-tree.component.ts","../../../../projects/onemrva/design-system/mat-navigation/src/mat-navigation-tree/onemrva-mat-navigation-tree.component.html","../../../../projects/onemrva/design-system/mat-navigation/src/onemrva-mat-navigation.component.ts","../../../../projects/onemrva/design-system/mat-navigation/src/onemrva-mat-navigation.component.html","../../../../projects/onemrva/design-system/mat-navigation/index.ts","../../../../projects/onemrva/design-system/mat-navigation/onemrvapublic-design-system-mat-navigation.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChildren,\n  effect,\n  HostBinding,\n  inject,\n  Input,\n  OnInit,\n  QueryList,\n  ViewChild,\n} from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatExpansionPanel } from '@angular/material/expansion';\nimport { NgClass } from '@angular/common';\nimport { NavItem } from './onemrva-nav-item';\nimport { TranslatePipe } from '@ngx-translate/core';\n\n@Component({\n  selector: 'onemrva-mat-navigation-item',\n  templateUrl: 'onemrva-mat-navigation-item.component.html',\n  styleUrl: 'onemrva-mat-navigation-item.component.scss',\n  imports: [\n    MatIcon,\n    RouterLinkActive,\n    RouterLink,\n    MatExpansionPanel,\n    NgClass,\n    TranslatePipe,\n  ],\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OnemrvaMatNavigationItemComponent implements AfterViewInit {\n  @Input()\n  public routerLink: string | undefined;\n  @Input()\n  public routerLinkActiveOptions?: any;\n  @Input()\n  public dataCy?: string;\n  @Input()\n  public baseRouteForActiveMenu?: string;\n  @Input()\n  public label = '';\n  @Input()\n  public icon?: string;\n  @Input() level = 0;\n  @Input() highlighted: boolean | undefined;\n  @Input() opened: boolean | undefined;\n  @Input() children: NavItem[] | undefined;\n  @Input() customNgClass: any;\n  @Input() translate = true;\n\n  @ViewChild(MatExpansionPanel) matExpansionPanel?: MatExpansionPanel;\n\n  isExpanded = false;\n\n  @HostBinding('class.highlighted')\n  get isHighlighted() {\n    return this.highlighted;\n  }\n  @HostBinding('class.highlighted2')\n  get isHighlighted2() {\n    return !this.highlighted && this.isExpanded;\n  }\n\n  get indentArray(): number[] {\n    return Array(this.level).fill(0);\n  }\n\n  cd = inject(ChangeDetectorRef);\n\n  ngAfterViewInit(): void {\n    this.matExpansionPanel?.afterCollapse.subscribe(() => {\n      this.highlighted = false;\n      this.isExpanded = false;\n      this.cd.markForCheck();\n    });\n    this.matExpansionPanel?.afterExpand.subscribe(() => {\n      this.isExpanded = true;\n      this.cd.markForCheck();\n    });\n  }\n}\n","@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","import {\n  AfterViewInit,\n  Component,\n  effect,\n  inject,\n  input,\n  OnDestroy,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { OnemrvaMatNavigationItemComponent } from '../mat-navigation-item/onemrva-mat-navigation-item.component';\nimport { NavItem } from '../mat-navigation-item/onemrva-nav-item';\nimport { ActivatedRoute, NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs/operators';\nimport { Subscription } from 'rxjs';\n\n@Component({\n  selector: 'onemrva-mat-navigation-tree',\n  templateUrl: 'onemrva-mat-navigation-tree.component.html',\n  styleUrl: 'onemrva-mat-navigation-tree.component.scss',\n  imports: [OnemrvaMatNavigationItemComponent],\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n})\nexport class OnemrvaMatNavigationTreeComponent {\n  items = input<NavItem[]>([]);\n  level = input<number>(0);\n  translate = input<boolean>(true);\n}\n","@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","import { Component, inject, input, ViewEncapsulation } from '@angular/core';\nimport { NavItem } from './mat-navigation-item/onemrva-nav-item';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs/operators';\nimport { OnemrvaMatNavigationTreeComponent } from './mat-navigation-tree/onemrva-mat-navigation-tree.component';\n\n@Component({\n  selector: 'onemrva-mat-navigation',\n  templateUrl: 'onemrva-mat-navigation.component.html',\n  styleUrl: 'onemrva-mat-navigation.component.scss',\n  imports: [OnemrvaMatNavigationTreeComponent],\n  encapsulation: ViewEncapsulation.None,\n  standalone: true,\n})\nexport class OnemrvaMatNavigationComponent {\n  items = input<NavItem[]>([]);\n  level = input<number>(0);\n  translate = input<boolean>(true);\n  router: Router = inject(Router);\n\n  constructor() {\n    this.router.events\n      .pipe(filter(event => event instanceof NavigationEnd))\n      .subscribe((event: NavigationEnd) => {\n        this.updateNavigationState(this.items(), event.urlAfterRedirects);\n      });\n  }\n\n  private updateNavigationState(items: NavItem[], url: string): void {\n    // First, reset all states\n    this.resetNavigationStates(items);\n\n    // Find the active item and build the path to it\n    const activePath = this.findActiveItemPath(items, url, []);\n\n    if (activePath.length > 0) {\n      // Set the highest parent (first item in path - level 0) as highlighted\n      if (activePath.length > 0) {\n        activePath[0].highlighted = true;\n      }\n\n      // Set opened to true for all parents to expand the path to the active item\n      for (let i = 0; i < activePath.length - 1; i++) {\n        activePath[i].opened = true;\n      }\n    }\n  }\n\n  private resetNavigationStates(items: NavItem[]): void {\n    for (const item of items) {\n      item.highlighted = false;\n      item.opened = false;\n      if (item.children) {\n        this.resetNavigationStates(item.children);\n      }\n    }\n  }\n\n  private findActiveItemPath(\n    items: NavItem[],\n    url: string,\n    currentPath: NavItem[],\n  ): NavItem[] {\n    for (const item of items) {\n      const newPath = [...currentPath, item];\n\n      if (item.routerLink && item.routerLink === url) {\n        return newPath;\n      }\n\n      if (item.children) {\n        const childPath = this.findActiveItemPath(item.children, url, newPath);\n        if (childPath.length > 0) {\n          return childPath;\n        }\n      }\n    }\n\n    return [];\n  }\n}\n","<onemrva-mat-navigation-tree\n  [items]=\"items()\"\n  [level]=\"level() + 1\"\n></onemrva-mat-navigation-tree>\n","/*\n * Public API Surface of mat-sticker\n */\n\nexport * from './src/onemrva-mat-navigation.component';\nexport * from './src/mat-navigation-item/onemrva-nav-item';\nexport * from './src/mat-navigation-item/onemrva-mat-navigation-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/onemrvapublic-design-system-mat-notification.mjs

@@ -0,0 +1,103 @@
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, HostBinding, Input, Output, Component } from '@angular/core';
+import * as i1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject, takeUntil } from 'rxjs';
+
+class OnemrvaMatNotificationComponent {
+    /** @hidden @internal */
+    get _closed() {
+        return !this._isOpen;
+    }
+    constructor() {
+        this.message = '';
+        this.closable = true;
+        this._isOpen = true;
+        this.notificationClose = new EventEmitter();
+        this.id = `onemrva-mat-notification`;
+        this.dataCy = 'onemrva-mat-notification';
+        /**
+         * Returns the `aria-label` attribute of the component.
+         *
+         * @example
+         * ```typescript
+         * let ariaLabel = this.avatar.ariaLabel;
+         * ```
+         *
+         */
+        this.ariaLive = 'assertive';
+        /**
+         * Returns the `role` attribute of the component.
+         *
+         * @example
+         * ```typescript
+         * let avatarRole = this.avatar.role;
+         * ```
+         */
+        this.role = 'alert';
+        this.destroyNotifier$ = new Subject();
+        this.isSmall = false;
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.breakpointObserver
+            .observe([Breakpoints.XSmall, Breakpoints.Small])
+            .pipe(takeUntil(this.destroyNotifier$))
+            .subscribe((state) => {
+            if (state.matches) {
+                this.isSmall = true;
+            }
+            else {
+                this.isSmall = false;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroyNotifier$.next();
+        this.destroyNotifier$.complete();
+    }
+    closeNotification() {
+        this._isOpen = false;
+        this.notificationClose.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: OnemrvaMatNotificationComponent, isStandalone: true, selector: "onemrva-mat-notification", inputs: { message: "message", closable: "closable", id: "id", dataCy: "dataCy" }, outputs: { notificationClose: "notificationClose" }, host: { properties: { "class.collapse-notification": "this._closed", "attr.id": "this.id", "attr.data-cy": "this.dataCy", "attr.aria-live": "this.ariaLive", "attr.role": "this.role" } }, ngImport: i0, template: "<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host{position:fixed;top:var(--layout-header-height, 0);left:0;right:0;transition:max-height .4s ease-out;max-height:100vh;overflow:hidden;z-index:401;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border-bottom:1px solid var(--mat-sys-primary)}:host .onemrva-mat-notification{position:relative}:host .onemrva-mat-notification .onemrva-mat-notification-content{font:var(--mat-sys-body-medium);padding:var(--double-spacer) var(--spacer) var(--double-spacer) var(--spacer)}:host .onemrva-mat-notification .onemrva-mat-notification-content:before{margin-right:var(--double-spacer);margin-top:var(--quarter-spacer)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OnemrvaMatNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'onemrva-mat-notification', standalone: true, imports: [CommonModule, TranslateModule, MatIconModule], template: "<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n", styles: [":host{position:fixed;top:var(--layout-header-height, 0);left:0;right:0;transition:max-height .4s ease-out;max-height:100vh;overflow:hidden;z-index:401;background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container);border-bottom:1px solid var(--mat-sys-primary)}:host .onemrva-mat-notification{position:relative}:host .onemrva-mat-notification .onemrva-mat-notification-content{font:var(--mat-sys-body-medium);padding:var(--double-spacer) var(--spacer) var(--double-spacer) var(--spacer)}:host .onemrva-mat-notification .onemrva-mat-notification-content:before{margin-right:var(--double-spacer);margin-top:var(--quarter-spacer)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { message: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], notificationClose: [{
+                type: Output
+            }], _closed: [{
+                type: HostBinding,
+                args: ['class.collapse-notification']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], dataCy: [{
+                type: HostBinding,
+                args: ['attr.data-cy']
+            }, {
+                type: Input
+            }], ariaLive: [{
+                type: HostBinding,
+                args: ['attr.aria-live']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OnemrvaMatNotificationComponent };
+//# sourceMappingURL=onemrvapublic-design-system-mat-notification.mjs.map

package/fesm2022/onemrvapublic-design-system-mat-notification.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"onemrvapublic-design-system-mat-notification.mjs","sources":["../../../../projects/onemrva/design-system/mat-notification/src/onemrva-mat-notification.component.ts","../../../../projects/onemrva/design-system/mat-notification/src/onemrva-mat-notification.component.html","../../../../projects/onemrva/design-system/mat-notification/onemrvapublic-design-system-mat-notification.ts"],"sourcesContent":["import {\n  BreakpointObserver,\n  Breakpoints,\n  BreakpointState,\n} from '@angular/cdk/layout';\nimport { CommonModule } from '@angular/common';\nimport {\n  Component,\n  EventEmitter,\n  HostBinding,\n  inject,\n  Input,\n  OnDestroy,\n  Output,\n} from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { Subject, takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'onemrva-mat-notification',\n  templateUrl: 'onemrva-mat-notification.component.html',\n  styleUrl: 'onemrva-mat-notification.component.scss',\n  standalone: true,\n  imports: [CommonModule, TranslateModule, MatIconModule],\n})\nexport class OnemrvaMatNotificationComponent implements OnDestroy {\n  @Input() message = '';\n  @Input() closable = true;\n\n  _isOpen = true;\n\n  @Output()\n  notificationClose = new EventEmitter<void>();\n\n  /** @hidden @internal */\n  @HostBinding('class.collapse-notification')\n  public get _closed(): boolean {\n    return !this._isOpen;\n  }\n\n  @HostBinding('attr.id')\n  @Input()\n  public id = `onemrva-mat-notification`;\n\n  @HostBinding('attr.data-cy')\n  @Input()\n  dataCy = 'onemrva-mat-notification';\n\n  /**\n   * Returns the `aria-label` attribute of the component.\n   *\n   * @example\n   * ```typescript\n   * let ariaLabel = this.avatar.ariaLabel;\n   * ```\n   *\n   */\n  @HostBinding('attr.aria-live')\n  public ariaLive = 'assertive';\n\n  /**\n   * Returns the `role` attribute of the component.\n   *\n   * @example\n   * ```typescript\n   * let avatarRole = this.avatar.role;\n   * ```\n   */\n  @HostBinding('attr.role')\n  public role = 'alert';\n\n  private destroyNotifier$ = new Subject<void>();\n  isSmall = false;\n  public breakpointObserver = inject(BreakpointObserver);\n\n  constructor() {\n    this.breakpointObserver\n      .observe([Breakpoints.XSmall, Breakpoints.Small])\n      .pipe(takeUntil(this.destroyNotifier$))\n      .subscribe((state: BreakpointState) => {\n        if (state.matches) {\n          this.isSmall = true;\n        } else {\n          this.isSmall = false;\n        }\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroyNotifier$.next();\n    this.destroyNotifier$.complete();\n  }\n\n  closeNotification() {\n    this._isOpen = false;\n    this.notificationClose.emit();\n  }\n}\n","<div class=\"onemrva-mat-notification container\">\n  <div class=\"onemrva-mat-notification-content show-icon\">\n    @if (message !== '') {\n      {{ message | translate }}\n    }\n    <ng-content></ng-content>\n    @if (closable || isSmall) {\n      <mat-icon\n        class=\"close-notification float-right clickable mr\"\n        (click)=\"closeNotification()\"\n      >\n        close\n      </mat-icon>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}