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

package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-mat-pop-over.mjs","sources":["../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over-trigger.component.ts","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over-content.component.ts","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.component.ts","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.component.html","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.module.ts","../../../../projects/onemrva/design-system/mat-pop-over/onemrvapublic-design-system-mat-pop-over.ts"],"sourcesContent":["import { Component, Input, TemplateRef, ViewChild } from '@angular/core';\n\nlet index = 0;\n\n@Component({\n  selector: 'onemrva-mat-pop-over-trigger',\n  template: '<ng-template><ng-content></ng-content></ng-template>',\n  standalone: true,\n})\nexport class OnemrvaMatPopOverTriggerComponent {\n  @Input() dataCy = `onemrvaMatPopOverTrigger_${++index}`;\n\n  @ViewChild(TemplateRef) template?: TemplateRef<any>;\n}\n","import { Component, Input, TemplateRef, ViewChild } from '@angular/core';\n\nlet index = 0;\n\n@Component({\n  selector: 'onemrva-mat-pop-over-content',\n  template: '<ng-template><ng-content></ng-content></ng-template>',\n  standalone: true,\n})\nexport class OnemrvaMatPopOverContentComponent {\n  @Input() dataCy = `onemrvaMatPopOverContent_${++index}`;\n\n  @ViewChild(TemplateRef) template?: TemplateRef<any>;\n}\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  inject,\n  Input,\n} from '@angular/core';\nimport { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';\nimport { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nlet NEXT_ID = 0;\n@Component({\n  selector: 'onemrva-mat-pop-over',\n  styleUrls: ['./onemrva-mat-pop-over.component.scss'],\n  templateUrl: 'onemrva-mat-pop-over.component.html',\n  standalone: true,\n  imports: [NgTemplateOutlet, NgClass],\n})\nexport class OnemrvaMatPopOverComponent implements AfterViewInit {\n  isOpen = false;\n\n  @Input() position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' =\n    'bottom-right';\n\n  @Input() dataCyTrigger = 'onemrva-po-trigger';\n  @Input() dataCyPo = 'onemrva-po';\n\n  @Input() poId: string = this.dataCyPo + '-' + NEXT_ID++; // HTML id for the trigger\n\n  @ContentChild(OnemrvaMatPopOverTriggerComponent)\n  trigger?: OnemrvaMatPopOverTriggerComponent;\n\n  @ContentChild(OnemrvaMatPopOverContentComponent)\n  content?: OnemrvaMatPopOverContentComponent;\n\n  private readonly cd = inject(ChangeDetectorRef);\n\n  ngAfterViewInit(): void {\n    this.cd.detectChanges();\n  }\n\n  togglePopOver() {\n    this.isOpen = !this.isOpen;\n  }\n\n  closePopOver() {\n    this.isOpen = false;\n  }\n}\n","<div class=\"onemrva-pop-over\">\n  @if (isOpen) {\n    <div class=\"onemrva-overlay\" tabindex=\"1\" (click)=\"closePopOver()\"></div>\n  }\n  <a\n    tabindex=\"1\"\n    class=\"onemrva-pop-over-trigger\"\n    (click)=\"togglePopOver()\"\n    [attr.data-cy]=\"dataCyTrigger\"\n    role=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [id]=\"poId\"\n  >\n    @if (trigger?.template; as tpl) {\n      <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n    }\n  </a>\n\n  @if (isOpen) {\n    @if (content?.template; as tpl) {\n      <div\n        class=\"onemrva-pop-over-frame\"\n        [ngClass]=\"position\"\n        [attr.data-cy]=\"dataCyPo\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"poId\"\n      >\n        <div class=\"onemrva-pop-over-content\" [ngClass]=\"position\">\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\n        </div>\n      </div>\n    }\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatPopOverComponent } from './onemrva-mat-pop-over.component';\nimport { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';\nimport { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';\n\nconst components = [\n  OnemrvaMatPopOverComponent,\n  OnemrvaMatPopOverContentComponent,\n  OnemrvaMatPopOverTriggerComponent,\n];\n\n@NgModule({\n  declarations: [],\n  imports: [...components],\n  exports: [...components],\n})\nexport class OnemrvaMatPopOverModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["index"],"mappings":"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"}
+{"version":3,"file":"onemrvapublic-design-system-mat-pop-over.mjs","sources":["../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over-trigger.component.ts","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over-content.component.ts","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.component.ts","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.component.html","../../../../projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.module.ts","../../../../projects/onemrva/design-system/mat-pop-over/onemrvapublic-design-system-mat-pop-over.ts"],"sourcesContent":["import { Component, TemplateRef, input, viewChild } from '@angular/core';\n\nlet index = 0;\n\n@Component({\n  selector: 'onemrva-mat-pop-over-trigger',\n  template: '<ng-template><ng-content /></ng-template>',\n  standalone: true,\n})\nexport class OnemrvaMatPopOverTriggerComponent {\n  readonly dataCy = input(`onemrvaMatPopOverTrigger_${++index}`);\n\n  readonly template = viewChild(TemplateRef);\n}\n","import { Component, TemplateRef, input, viewChild } from '@angular/core';\n\nlet index = 0;\n\n@Component({\n  selector: 'onemrva-mat-pop-over-content',\n  template: '<ng-template><ng-content /></ng-template>',\n  standalone: true,\n})\nexport class OnemrvaMatPopOverContentComponent {\n  readonly dataCy = input(`onemrvaMatPopOverContent_${++index}`);\n\n  readonly template = viewChild(TemplateRef);\n}\n","import {\n  AfterViewInit,\n  ChangeDetectorRef,\n  Component,\n  inject,\n  input,\n  contentChild,\n} from '@angular/core';\nimport { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';\nimport { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nlet NEXT_ID = 0;\n@Component({\n  selector: 'onemrva-mat-pop-over',\n  styleUrls: ['./onemrva-mat-pop-over.component.scss'],\n  templateUrl: 'onemrva-mat-pop-over.component.html',\n  standalone: true,\n  imports: [NgTemplateOutlet, NgClass],\n})\nexport class OnemrvaMatPopOverComponent implements AfterViewInit {\n  isOpen = false;\n\n  readonly position = input<\n    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  >('bottom-right');\n\n  readonly dataCyTrigger = input('onemrva-po-trigger');\n  readonly dataCyPo = input('onemrva-po');\n\n  readonly poId = input<string>(this.dataCyPo + '-' + NEXT_ID++); // HTML id for the trigger\n\n  readonly trigger = contentChild(OnemrvaMatPopOverTriggerComponent);\n\n  readonly content = contentChild(OnemrvaMatPopOverContentComponent);\n\n  private readonly cd = inject(ChangeDetectorRef);\n\n  ngAfterViewInit(): void {\n    this.cd.detectChanges();\n  }\n\n  togglePopOver() {\n    this.isOpen = !this.isOpen;\n  }\n\n  closePopOver() {\n    this.isOpen = false;\n  }\n}\n","<div class=\"onemrva-pop-over\">\n  @if (isOpen) {\n    <div class=\"onemrva-overlay\" tabindex=\"1\" (click)=\"closePopOver()\"></div>\n  }\n  <a\n    tabindex=\"1\"\n    class=\"onemrva-pop-over-trigger\"\n    (click)=\"togglePopOver()\"\n    [attr.data-cy]=\"dataCyTrigger()\"\n    role=\"button\"\n    [attr.aria-expanded]=\"isOpen\"\n    [id]=\"poId()\"\n  >\n    @if (trigger()?.template(); as tpl) {\n      <ng-container *ngTemplateOutlet=\"tpl\" />\n    }\n  </a>\n\n  @if (isOpen) {\n    @if (content()?.template(); as tpl) {\n      <div\n        class=\"onemrva-pop-over-frame\"\n        [ngClass]=\"position()\"\n        [attr.data-cy]=\"dataCyPo()\"\n        role=\"region\"\n        [attr.aria-labelledby]=\"poId()\"\n      >\n        <div class=\"onemrva-pop-over-content\" [ngClass]=\"position()\">\n          <ng-container *ngTemplateOutlet=\"tpl\" />\n        </div>\n      </div>\n    }\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatPopOverComponent } from './onemrva-mat-pop-over.component';\nimport { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';\nimport { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';\n\nconst components = [\n  OnemrvaMatPopOverComponent,\n  OnemrvaMatPopOverContentComponent,\n  OnemrvaMatPopOverTriggerComponent,\n];\n\n@NgModule({\n  declarations: [],\n  imports: [...components],\n  exports: [...components],\n})\nexport class OnemrvaMatPopOverModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["index"],"mappings":"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"}

package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs

@@ -1,48 +1,36 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Component } from '@angular/core';
-import { tap, map } from 'rxjs';
+import { input, computed, Component } from '@angular/core';
 
+function clampToPercent(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(100, value));
+}
 class OnemrvaMatProgressBarComponent {
     constructor() {
-        this.dataCy = 'onemrva-mat-progress-bar';
-        this.role = 'progressbar';
-        this.ariaLabel = 'progress bar';
-        this.success = false;
-    }
-    ngOnInit() {
-        this.progress$ = this.value$.pipe(tap(value => {
-            this.success = value >= 100;
-        }), map(v => (v < 0 ? '0%' : v > 100 ? '100%' : v + '%')));
-        if (!this.label$) {
-            this.label$ = this.progress$;
-        }
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.dataCy = input('onemrva-mat-progress-bar', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+        this.ariaLabel = input('progress bar', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+        this.progressNumber = computed(() => clampToPercent(this.value()), ...(ngDevMode ? [{ debugName: "progressNumber" }] : []));
+        this.progressValue = computed(() => `${this.progressNumber()}%`, ...(ngDevMode ? [{ debugName: "progressValue" }] : []));
+        this.isSuccess = computed(() => this.progressNumber() >= 100, ...(ngDevMode ? [{ debugName: "isSuccess" }] : []));
+        this.labelText = computed(() => {
+            const lbl = this.label()?.trim();
+            return lbl ? lbl : this.progressValue();
+        }, ...(ngDevMode ? [{ debugName: "labelText" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: OnemrvaMatProgressBarComponent, isStandalone: true, selector: "onemrva-mat-progress-bar", inputs: { label$: "label$", value$: "value$", dataCy: "dataCy", ariaLabel: "ariaLabel" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "class.mat-success": "this.success" } }, ngImport: i0, template: "<div class=\"onemrva-progress-bar\">\n  <span class=\"onemrva-progress-bar-label\">{{ label$ | async }}</span>\n\n  <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n    <div\n      class=\"onemrva-progress-bar-inner\"\n      [ngStyle]=\"{ width: progress$ | async }\"\n      [ngClass]=\"{ 'progress-success': (value$ | async)! >= 100 }\"\n      [attr.data-cy]=\"dataCy\"\n      [attr.value]=\"progress$ | async\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:block}:host .onemrva-progress-bar .onemrva-progress-bar-outer{height:.25rem;border-radius:var(--button-border-radius);box-sizing:border-box;overflow:hidden;background-color:var(--mat-sys-outline-variant)}:host .onemrva-progress-bar .onemrva-progress-bar-outer .onemrva-progress-bar-inner{background-color:var(--mat-sys-primary);height:.25rem;box-sizing:border-box;border-radius:var(--button-border-radius);transition:width .3s ease-out}:host .onemrva-progress-bar-label{font-size:var(--mat-sys-label-small)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: OnemrvaMatProgressBarComponent, isStandalone: true, selector: "onemrva-mat-progress-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"progressbar\"", "attr.aria-label": "ariaLabel()", "class.mat-success": "isSuccess()" } }, ngImport: i0, template: "<div class=\"onemrva-progress-bar\">\n  <span class=\"onemrva-progress-bar-label\">{{ labelText() }}</span>\n\n  <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n    <div\n      class=\"onemrva-progress-bar-inner\"\n      [style.width]=\"progressValue()\"\n      [class.progress-success]=\"isSuccess()\"\n      [attr.data-cy]=\"dataCy()\"\n      [attr.value]=\"progressValue()\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:block}:host .onemrva-progress-bar .onemrva-progress-bar-outer{height:.25rem;border-radius:var(--button-border-radius);box-sizing:border-box;overflow:hidden;background-color:var(--mat-sys-outline-variant)}:host .onemrva-progress-bar .onemrva-progress-bar-outer .onemrva-progress-bar-inner{background-color:var(--mat-sys-primary);height:.25rem;box-sizing:border-box;border-radius:var(--button-border-radius);transition:width .3s ease-out}:host .onemrva-progress-bar-label{font-size:var(--mat-sys-label-small)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnemrvaMatProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'onemrva-mat-progress-bar', standalone: true, imports: [CommonModule], template: "<div class=\"onemrva-progress-bar\">\n  <span class=\"onemrva-progress-bar-label\">{{ label$ | async }}</span>\n\n  <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n    <div\n      class=\"onemrva-progress-bar-inner\"\n      [ngStyle]=\"{ width: progress$ | async }\"\n      [ngClass]=\"{ 'progress-success': (value$ | async)! >= 100 }\"\n      [attr.data-cy]=\"dataCy\"\n      [attr.value]=\"progress$ | async\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:block}:host .onemrva-progress-bar .onemrva-progress-bar-outer{height:.25rem;border-radius:var(--button-border-radius);box-sizing:border-box;overflow:hidden;background-color:var(--mat-sys-outline-variant)}:host .onemrva-progress-bar .onemrva-progress-bar-outer .onemrva-progress-bar-inner{background-color:var(--mat-sys-primary);height:.25rem;box-sizing:border-box;border-radius:var(--button-border-radius);transition:width .3s ease-out}:host .onemrva-progress-bar-label{font-size:var(--mat-sys-label-small)}\n"] }]
-        }], propDecorators: { label$: [{
-                type: Input
-            }], value$: [{
-                type: Input
-            }], dataCy: [{
-                type: Input
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], ariaLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }, {
-                type: Input
-            }], success: [{
-                type: HostBinding,
-                args: ['class.mat-success']
-            }] } });
+            args: [{ selector: 'onemrva-mat-progress-bar', standalone: true, host: {
+                        '[attr.role]': '"progressbar"',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class.mat-success]': 'isSuccess()',
+                    }, template: "<div class=\"onemrva-progress-bar\">\n  <span class=\"onemrva-progress-bar-label\">{{ labelText() }}</span>\n\n  <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n    <div\n      class=\"onemrva-progress-bar-inner\"\n      [style.width]=\"progressValue()\"\n      [class.progress-success]=\"isSuccess()\"\n      [attr.data-cy]=\"dataCy()\"\n      [attr.value]=\"progressValue()\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:block}:host .onemrva-progress-bar .onemrva-progress-bar-outer{height:.25rem;border-radius:var(--button-border-radius);box-sizing:border-box;overflow:hidden;background-color:var(--mat-sys-outline-variant)}:host .onemrva-progress-bar .onemrva-progress-bar-outer .onemrva-progress-bar-inner{background-color:var(--mat-sys-primary);height:.25rem;box-sizing:border-box;border-radius:var(--button-border-radius);transition:width .3s ease-out}:host .onemrva-progress-bar-label{font-size:var(--mat-sys-label-small)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system-mat-progress-bar.mjs","sources":["../../../../projects/onemrva/design-system/mat-progress-bar/src/onemrva-mat-progress-bar.component.ts","../../../../projects/onemrva/design-system/mat-progress-bar/src/onemrva-mat-progress-bar.component.html","../../../../projects/onemrva/design-system/mat-progress-bar/onemrvapublic-design-system-mat-progress-bar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { map, Observable, tap } from 'rxjs';\n\n@Component({\n  selector: 'onemrva-mat-progress-bar',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: 'onemrva-mat-progress-bar.component.html',\n  styleUrl: 'onemrva-mat-progress-bar.component.scss',\n})\nexport class OnemrvaMatProgressBarComponent implements OnInit {\n  @Input() label$?: Observable<string>;\n  @Input() value$!: Observable<number>;\n  @Input() dataCy = 'onemrva-mat-progress-bar';\n\n  @HostBinding('attr.role')\n  public role = 'progressbar';\n\n  @HostBinding('attr.aria-label')\n  @Input()\n  public ariaLabel = 'progress bar';\n\n  progress$!: Observable<string>;\n\n  ngOnInit() {\n    this.progress$ = this.value$.pipe(\n      tap(value => {\n        this.success = value >= 100;\n      }),\n      map(v => (v < 0 ? '0%' : v > 100 ? '100%' : v + '%')),\n    );\n\n    if (!this.label$) {\n      this.label$ = this.progress$;\n    }\n  }\n\n  @HostBinding('class.mat-success')\n  success = false;\n}\n","<div class=\"onemrva-progress-bar\">\n  <span class=\"onemrva-progress-bar-label\">{{ label$ | async }}</span>\n\n  <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n    <div\n      class=\"onemrva-progress-bar-inner\"\n      [ngStyle]=\"{ width: progress$ | async }\"\n      [ngClass]=\"{ 'progress-success': (value$ | async)! >= 100 }\"\n      [attr.data-cy]=\"dataCy\"\n      [attr.value]=\"progress$ | async\"\n    ></div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAWa,8BAA8B,CAAA;AAP3C,IAAA,WAAA,GAAA;QAUW,IAAA,CAAA,MAAM,GAAG,0BAA0B;QAGrC,IAAA,CAAA,IAAI,GAAG,aAAa;QAIpB,IAAA,CAAA,SAAS,GAAG,cAAc;QAkBjC,IAAA,CAAA,OAAO,GAAG,KAAK;AAChB,IAAA;IAfC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAC/B,GAAG,CAAC,KAAK,IAAG;AACV,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK,IAAI,GAAG;AAC7B,QAAA,CAAC,CAAC,EACF,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CACtD;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS;QAC9B;IACF;+GAzBW,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAA9B,8BAA8B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECX3C,mdAaA,EAAA,MAAA,EAAA,CAAA,6gBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDNY,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAIX,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAP1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,UAAA,EACxB,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,mdAAA,EAAA,MAAA,EAAA,CAAA,6gBAAA,CAAA,EAAA;;sBAKtB;;sBACA;;sBACA;;sBAEA,WAAW;uBAAC,WAAW;;sBAGvB,WAAW;uBAAC,iBAAiB;;sBAC7B;;sBAkBA,WAAW;uBAAC,mBAAmB;;;AEtClC;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system-mat-progress-bar.mjs","sources":["../../../../projects/onemrva/design-system/mat-progress-bar/src/onemrva-mat-progress-bar.component.ts","../../../../projects/onemrva/design-system/mat-progress-bar/src/onemrva-mat-progress-bar.component.html","../../../../projects/onemrva/design-system/mat-progress-bar/onemrvapublic-design-system-mat-progress-bar.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\nfunction clampToPercent(value: number): number {\n  if (!Number.isFinite(value)) return 0;\n  return Math.max(0, Math.min(100, value));\n}\n\n@Component({\n  selector: 'onemrva-mat-progress-bar',\n  standalone: true,\n  templateUrl: 'onemrva-mat-progress-bar.component.html',\n  styleUrl: 'onemrva-mat-progress-bar.component.scss',\n  host: {\n    '[attr.role]': '\"progressbar\"',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[class.mat-success]': 'isSuccess()',\n  },\n})\nexport class OnemrvaMatProgressBarComponent {\n  readonly label = input<string>('');\n  readonly value = input.required<number>();\n  readonly dataCy = input('onemrva-mat-progress-bar');\n  readonly ariaLabel = input('progress bar');\n\n  readonly progressNumber = computed(() => clampToPercent(this.value()));\n  readonly progressValue = computed(() => `${this.progressNumber()}%`);\n  readonly isSuccess = computed(() => this.progressNumber() >= 100);\n\n  readonly labelText = computed(() => {\n    const lbl = this.label()?.trim();\n    return lbl ? lbl : this.progressValue();\n  });\n}\n","<div class=\"onemrva-progress-bar\">\n  <span class=\"onemrva-progress-bar-label\">{{ labelText() }}</span>\n\n  <div class=\"onemrva-progress-bar-outer mt-s\" #onemrvaProgressBar>\n    <div\n      class=\"onemrva-progress-bar-inner\"\n      [style.width]=\"progressValue()\"\n      [class.progress-success]=\"isSuccess()\"\n      [attr.data-cy]=\"dataCy()\"\n      [attr.value]=\"progressValue()\"\n    ></div>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA,SAAS,cAAc,CAAC,KAAa,EAAA;AACnC,IAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;AAAE,QAAA,OAAO,CAAC;AACrC,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC1C;MAaa,8BAA8B,CAAA;AAX3C,IAAA,WAAA,GAAA;AAYW,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC;AACzB,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAU;AAChC,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,0BAA0B,kDAAC;AAC1C,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,cAAc,qDAAC;AAEjC,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,0DAAC;AAC7D,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,cAAc,EAAE,CAAA,CAAA,CAAG,yDAAC;AAC3D,QAAA,IAAA,CAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,IAAI,GAAG,qDAAC;AAExD,QAAA,IAAA,CAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;YACjC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;AAChC,YAAA,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE;AACzC,QAAA,CAAC,qDAAC;AACH,IAAA;8GAdY,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,8sBClB3C,ibAaA,EAAA,MAAA,EAAA,CAAA,6gBAAA,CAAA,EAAA,CAAA,CAAA;;2FDKa,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAX1C,SAAS;+BACE,0BAA0B,EAAA,UAAA,EACxB,IAAI,EAAA,IAAA,EAGV;AACJ,wBAAA,aAAa,EAAE,eAAe;AAC9B,wBAAA,mBAAmB,EAAE,aAAa;AAClC,wBAAA,qBAAqB,EAAE,aAAa;AACrC,qBAAA,EAAA,QAAA,EAAA,ibAAA,EAAA,MAAA,EAAA,CAAA,6gBAAA,CAAA,EAAA;;;AEhBH;;AAEG;;;;"}

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

@@ -1,7 +1,7 @@
 import { A, Z, ZERO, NINE, SPACE, HOME, END, ENTER, ESCAPE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, EventEmitter, QueryList, inject, ChangeDetectorRef, ElementRef, forwardRef, ContentChild, ViewChild, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Directive, InjectionToken, input, output, viewChild, ElementRef, contentChild, QueryList, inject, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatOption } from '@angular/material/core';
@@ -9,7 +9,7 @@ import { MatFormField } from '@angular/material/form-field';
 import { MatSelect } from '@angular/material/select';
 import { BehaviorSubject, of, combineLatest, Subject } from 'rxjs';
 import { switchMap, map, startWith, delay, takeUntil, take, tap, filter } from 'rxjs/operators';
-import { NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIcon } from '@angular/material/icon';
@@ -26,10 +26,10 @@ import { MatDivider } from '@angular/material/divider';
  * </mat-select-search>
  */
 class MatSelectSearchClearDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatSelectSearchClearDirective, isStandalone: true, selector: "[matSelectSearchClear]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchClearDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MatSelectSearchClearDirective, isStandalone: true, selector: "[matSelectSearchClear]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchClearDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchClearDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matSelectSearchClear]',
@@ -81,10 +81,10 @@ const MAT_SELECTSEARCH_DEFAULT_OPTIONS = new InjectionToken('mat-selectsearch-de
  * </mat-select-search>
  */
 class MatSelectNoEntriesFoundDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectNoEntriesFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: MatSelectNoEntriesFoundDirective, isStandalone: true, selector: "[matSelectNoEntriesFound]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectNoEntriesFoundDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MatSelectNoEntriesFoundDirective, isStandalone: true, selector: "[matSelectNoEntriesFound]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectNoEntriesFoundDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectNoEntriesFoundDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matSelectNoEntriesFound]',
@@ -112,53 +112,61 @@ class MatSelectSearchComponent {
     }
     constructor() {
         /** Label of the search placeholder */
-        this.placeholderLabel = 'Search';
+        this.placeholderLabel = input('Search', ...(ngDevMode ? [{ debugName: "placeholderLabel" }] : []));
         /** Type of the search input field */
-        this.type = 'text';
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
         /** Font-based icon used for displaying Close-Icon */
-        this.closeIcon = 'close';
+        this.closeIcon = input('close', ...(ngDevMode ? [{ debugName: "closeIcon" }] : []));
         /** Svg-based icon used for displaying Close-Icon. If set, closeIcon is overridden */
-        this.closeSvgIcon = '';
+        this.closeSvgIcon = input('', ...(ngDevMode ? [{ debugName: "closeSvgIcon" }] : []));
         /** Label to be shown when no entries are found. Set to null if no message should be shown. */
-        this.noEntriesFoundLabel = 'Nothing found';
+        this.noEntriesFoundLabel = input('Nothing found', ...(ngDevMode ? [{ debugName: "noEntriesFoundLabel" }] : []));
         /**
          * Whether or not the search field should be cleared after the dropdown menu is closed.
          */
-        this.clearSearchInput = true;
+        this.clearSearchInput = input(true, ...(ngDevMode ? [{ debugName: "clearSearchInput" }] : []));
         /** Whether to show the search-in-progress indicator */
-        this.searching = false;
+        this.searching = input(false, ...(ngDevMode ? [{ debugName: "searching" }] : []));
         /** Disables initial focusing of the input field */
-        this.disableInitialFocus = false;
+        this.disableInitialFocus = input(false, ...(ngDevMode ? [{ debugName: "disableInitialFocus" }] : []));
         /** Enable clear input on escape pressed */
-        this.enableClearOnEscapePressed = false;
+        this.enableClearOnEscapePressed = input(false, ...(ngDevMode ? [{ debugName: "enableClearOnEscapePressed" }] : []));
         /**
          * Prevents home / end key being propagated to mat-select,
          * allowing to move the cursor within the search input instead of navigating the options
          */
-        this.preventHomeEndKeyPropagation = false;
+        this.preventHomeEndKeyPropagation = input(false, ...(ngDevMode ? [{ debugName: "preventHomeEndKeyPropagation" }] : []));
         /** Disables scrolling to active options when option list changes. Useful for server-side search */
-        this.disableScrollToActiveOnOptionsChanged = false;
+        this.disableScrollToActiveOnOptionsChanged = input(false, ...(ngDevMode ? [{ debugName: "disableScrollToActiveOnOptionsChanged" }] : []));
         /** Adds 508 screen reader support for search box */
-        this.ariaLabel = 'dropdown search';
+        this.ariaLabel = input('dropdown search', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
         /** Whether to show Select All Checkbox (for mat-select[multi=true]) */
-        this.showToggleAllCheckbox = false;
+        this.showToggleAllCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showToggleAllCheckbox" }] : []));
         /** select all checkbox checked state */
-        this.toggleAllCheckboxChecked = false;
+        this.toggleAllCheckboxChecked = input(false, ...(ngDevMode ? [{ debugName: "toggleAllCheckboxChecked" }] : []));
         /** select all checkbox indeterminate state */
-        this.toggleAllCheckboxIndeterminate = false;
+        this.toggleAllCheckboxIndeterminate = input(false, ...(ngDevMode ? [{ debugName: "toggleAllCheckboxIndeterminate" }] : []));
         /** Display a message in a tooltip on the toggle-all checkbox */
-        this.toggleAllCheckboxTooltipMessage = '';
+        this.toggleAllCheckboxTooltipMessage = input('', ...(ngDevMode ? [{ debugName: "toggleAllCheckboxTooltipMessage" }] : []));
         /** Define the position of the tooltip on the toggle-all checkbox. */
-        this.toggleAllCheckboxTooltipPosition = 'below';
+        this.toggleAllCheckboxTooltipPosition = input('below', ...(ngDevMode ? [{ debugName: "toggleAllCheckboxTooltipPosition" }] : []));
         /** Show/Hide the search clear button of the search input */
-        this.hideClearSearchButton = false;
+        this.hideClearSearchButton = input(false, ...(ngDevMode ? [{ debugName: "hideClearSearchButton" }] : []));
         /**
          * Always restore selected options on selectionChange for mode multi (e.g. for lazy loading/infinity scrolling).
          * Defaults to false, so selected options are only restored while filtering is active.
          */
-        this.alwaysRestoreSelectedOptionsMulti = false;
+        this.alwaysRestoreSelectedOptionsMulti = input(false, ...(ngDevMode ? [{ debugName: "alwaysRestoreSelectedOptionsMulti" }] : []));
         /** Output emitter to send to parent component with the toggle all boolean */
-        this.toggleAll = new EventEmitter();
+        this.toggleAll = output();
+        /** Reference to the search input field */
+        this.searchSelectInput = viewChild('searchSelectInput', { ...(ngDevMode ? { debugName: "searchSelectInput" } : {}), read: ElementRef });
+        /** Reference to the search input field */
+        this.innerSelectSearch = viewChild('innerSelectSearch', { ...(ngDevMode ? { debugName: "innerSelectSearch" } : {}), read: ElementRef });
+        /** Reference to custom search input clear icon */
+        this.clearIcon = contentChild(MatSelectSearchClearDirective, ...(ngDevMode ? [{ debugName: "clearIcon" }] : []));
+        /** Reference to custom no entries found element */
+        this.noEntriesFound = contentChild(MatSelectNoEntriesFoundDirective, ...(ngDevMode ? [{ debugName: "noEntriesFound" }] : []));
         this.onTouched = (_) => {
             //
         };
@@ -173,7 +181,7 @@ class MatSelectSearchComponent {
             this._formControl.valueChanges,
             this.optionsLength$,
         ]).pipe(map(([_, optionsLength]) => {
-            return (this.noEntriesFoundLabel !== '' &&
+            return (this.noEntriesFoundLabel() !== '' &&
                 optionsLength === this.getOptionsLengthOffset());
         }));
         /** Subject that emits when the component has been destroyed. */
@@ -218,13 +226,13 @@ class MatSelectSearchComponent {
             if (opened) {
                 this.updateInputWidth();
                 // focus the search field when opening
-                if (!this.disableInitialFocus) {
+                if (!this.disableInitialFocus()) {
                     this._focus();
                 }
             }
             else {
                 // clear it when closing
-                if (this.clearSearchInput) {
+                if (this.clearSearchInput()) {
                     this._reset();
                 }
             }
@@ -316,7 +324,7 @@ class MatSelectSearchComponent {
         this._onDestroy.complete();
     }
     _isToggleAllCheckboxVisible() {
-        return this.matSelect.multiple && this.showToggleAllCheckbox;
+        return this.matSelect.multiple && this.showToggleAllCheckbox();
     }
     /**
      * Handles the key down event with MatSelect.
@@ -329,7 +337,7 @@ class MatSelectSearchComponent {
             (event.keyCode >= A && event.keyCode <= Z) ||
             (event.keyCode >= ZERO && event.keyCode <= NINE) ||
             event.keyCode === SPACE ||
-            (this.preventHomeEndKeyPropagation &&
+            (this.preventHomeEndKeyPropagation() &&
                 (event.keyCode === HOME || event.keyCode === END))) {
             event.stopPropagation();
         }
@@ -338,7 +346,7 @@ class MatSelectSearchComponent {
             setTimeout(() => this._focus());
         }
         // Special case if click Escape, if input is empty, close the dropdown, if not, empty out the search field
-        if (this.enableClearOnEscapePressed === true &&
+        if (this.enableClearOnEscapePressed() &&
             event.keyCode === ESCAPE &&
             this.value) {
             this._reset(true);
@@ -360,7 +368,7 @@ class MatSelectSearchComponent {
                 const temp = this._options.toArray();
                 this.activeDescendant = temp[index]._getHostElement();
                 this.activeDescendant.setAttribute('aria-selected', 'true');
-                this.searchSelectInput?.nativeElement.setAttribute('aria-activedescendant', ariaActiveDescendantId);
+                this.searchSelectInput()?.nativeElement.setAttribute('aria-activedescendant', ariaActiveDescendantId);
             }
         }
     }
@@ -384,7 +392,8 @@ class MatSelectSearchComponent {
      * Focuses the search input field
      */
     _focus() {
-        if (!this.searchSelectInput || !this.matSelect.panel) {
+        const searchSelectInput = this.searchSelectInput();
+        if (!searchSelectInput || !this.matSelect.panel) {
             return;
         }
         // save and restore scrollTop of panel, since it will be reset by focus()
@@ -392,7 +401,7 @@ class MatSelectSearchComponent {
         const panel = this.matSelect.panel.nativeElement;
         const scrollTop = panel.scrollTop;
         // focus
-        this.searchSelectInput.nativeElement.focus();
+        searchSelectInput.nativeElement.focus();
         panel.scrollTop = scrollTop;
     }
     /**
@@ -427,7 +436,7 @@ class MatSelectSearchComponent {
             .subscribe(values => {
             let restoreSelectedValues = false;
             if (this.matSelect.multiple) {
-                if ((this.alwaysRestoreSelectedOptionsMulti ||
+                if ((this.alwaysRestoreSelectedOptionsMulti() ||
                     (this._formControl.value && this._formControl.value.length)) &&
                     this.previousSelectedValues &&
                     Array.isArray(this.previousSelectedValues)) {
@@ -457,10 +466,11 @@ class MatSelectSearchComponent {
      *  And support all Operation Systems
      */
     updateInputWidth() {
-        if (!this.innerSelectSearch || !this.innerSelectSearch.nativeElement) {
+        const innerSelectSearch = this.innerSelectSearch();
+        if (!innerSelectSearch || !innerSelectSearch.nativeElement) {
             return;
         }
-        let element = this.innerSelectSearch.nativeElement;
+        let element = innerSelectSearch.nativeElement;
         if (element.parentElement !== null) {
             let panelElement = null;
             while ((element = element.parentElement)) {
@@ -470,7 +480,7 @@ class MatSelectSearchComponent {
                 }
             }
             if (panelElement !== null) {
-                this.innerSelectSearch.nativeElement.style.width =
+                innerSelectSearch.nativeElement.style.width =
                     panelElement.clientWidth + 'px';
             }
         }
@@ -488,18 +498,18 @@ class MatSelectSearchComponent {
     }
     unselectActiveDescendant() {
         this.activeDescendant?.removeAttribute('aria-selected');
-        this.searchSelectInput?.nativeElement.removeAttribute('aria-activedescendant');
+        this.searchSelectInput()?.nativeElement.removeAttribute('aria-activedescendant');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MatSelectSearchComponent, isStandalone: true, selector: "mat-select-search", inputs: { placeholderLabel: "placeholderLabel", type: "type", closeIcon: "closeIcon", closeSvgIcon: "closeSvgIcon", noEntriesFoundLabel: "noEntriesFoundLabel", clearSearchInput: "clearSearchInput", searching: "searching", disableInitialFocus: "disableInitialFocus", enableClearOnEscapePressed: "enableClearOnEscapePressed", preventHomeEndKeyPropagation: "preventHomeEndKeyPropagation", disableScrollToActiveOnOptionsChanged: "disableScrollToActiveOnOptionsChanged", ariaLabel: "ariaLabel", showToggleAllCheckbox: "showToggleAllCheckbox", toggleAllCheckboxChecked: "toggleAllCheckboxChecked", toggleAllCheckboxIndeterminate: "toggleAllCheckboxIndeterminate", toggleAllCheckboxTooltipMessage: "toggleAllCheckboxTooltipMessage", toggleAllCheckboxTooltipPosition: "toggleAllCheckboxTooltipPosition", hideClearSearchButton: "hideClearSearchButton", alwaysRestoreSelectedOptionsMulti: "alwaysRestoreSelectedOptionsMulti" }, outputs: { toggleAll: "toggleAll" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MatSelectSearchComponent, isStandalone: true, selector: "mat-select-search", inputs: { placeholderLabel: { classPropertyName: "placeholderLabel", publicName: "placeholderLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, closeSvgIcon: { classPropertyName: "closeSvgIcon", publicName: "closeSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, noEntriesFoundLabel: { classPropertyName: "noEntriesFoundLabel", publicName: "noEntriesFoundLabel", isSignal: true, isRequired: false, transformFunction: null }, clearSearchInput: { classPropertyName: "clearSearchInput", publicName: "clearSearchInput", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", isSignal: true, isRequired: false, transformFunction: null }, disableInitialFocus: { classPropertyName: "disableInitialFocus", publicName: "disableInitialFocus", isSignal: true, isRequired: false, transformFunction: null }, enableClearOnEscapePressed: { classPropertyName: "enableClearOnEscapePressed", publicName: "enableClearOnEscapePressed", isSignal: true, isRequired: false, transformFunction: null }, preventHomeEndKeyPropagation: { classPropertyName: "preventHomeEndKeyPropagation", publicName: "preventHomeEndKeyPropagation", isSignal: true, isRequired: false, transformFunction: null }, disableScrollToActiveOnOptionsChanged: { classPropertyName: "disableScrollToActiveOnOptionsChanged", publicName: "disableScrollToActiveOnOptionsChanged", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAllCheckbox: { classPropertyName: "showToggleAllCheckbox", publicName: "showToggleAllCheckbox", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxChecked: { classPropertyName: "toggleAllCheckboxChecked", publicName: "toggleAllCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxIndeterminate: { classPropertyName: "toggleAllCheckboxIndeterminate", publicName: "toggleAllCheckboxIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxTooltipMessage: { classPropertyName: "toggleAllCheckboxTooltipMessage", publicName: "toggleAllCheckboxTooltipMessage", isSignal: true, isRequired: false, transformFunction: null }, toggleAllCheckboxTooltipPosition: { classPropertyName: "toggleAllCheckboxTooltipPosition", publicName: "toggleAllCheckboxTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, hideClearSearchButton: { classPropertyName: "hideClearSearchButton", publicName: "hideClearSearchButton", isSignal: true, isRequired: false, transformFunction: null }, alwaysRestoreSelectedOptionsMulti: { classPropertyName: "alwaysRestoreSelectedOptionsMulti", publicName: "alwaysRestoreSelectedOptionsMulti", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleAll: "toggleAll" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatSelectSearchComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "clearIcon", first: true, predicate: MatSelectSearchClearDirective, descendants: true }, { propertyName: "noEntriesFound", first: true, predicate: MatSelectNoEntriesFoundDirective, descendants: true }], viewQueries: [{ propertyName: "searchSelectInput", first: true, predicate: ["searchSelectInput"], descendants: true, read: ElementRef, static: true }, { propertyName: "innerSelectSearch", first: true, predicate: ["innerSelectSearch"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<!--\nCopyright (c) 2018 Bithost GmbH All Rights Reserved.\n\nUse of this source code is governed by an MIT-style license that can be\nfound in the LICENSE file at https://angular.io/license\n-->\n<!-- Placeholder to adjust vertical offset of the mat-option elements -->\n<input matInput class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: the  mat-datepicker-content mat-tab-header are needed to inherit the material theme colors, see PR #22 -->\n<div\n  #innerSelectSearch\n  class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\"\n  [ngClass]=\"{\n    'mat-select-search-inner-multiple': matSelect.multiple,\n    'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible(),\n  }\"\n>\n  @if (_isToggleAllCheckboxVisible()) {\n    <mat-checkbox\n      class=\"mat-select-search-toggle-all-checkbox\"\n      [checked]=\"toggleAllCheckboxChecked\"\n      [indeterminate]=\"toggleAllCheckboxIndeterminate\"\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage\"\n      matTooltipClass=\"ngx-mat-select-search-toggle-all-tooltip\"\n      [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\n      (change)=\"_emitSelectAllBooleanToParent($event.checked)\"\n    ></mat-checkbox>\n  }\n  <input\n    class=\"mat-select-search-input\"\n    autocomplete=\"off\"\n    [type]=\"type\"\n    [formControl]=\"_formControl\"\n    #searchSelectInput\n    (keydown)=\"_handleKeydown($event)\"\n    (keyup)=\"_handleKeyup($event)\"\n    (blur)=\"onBlur()\"\n    [placeholder]=\"placeholderLabel\"\n    [attr.aria-label]=\"ariaLabel\"\n  />\n  @if (value === '' && !searching) {\n    <mat-icon class=\"suffix\">search</mat-icon>\n  }\n  @if (searching) {\n    <mat-spinner class=\"mat-select-search-spinner\" diameter=\"16\"></mat-spinner>\n  }\n  @if (!hideClearSearchButton && value && !searching) {\n    <button\n      mat-icon-button\n      aria-label=\"Clear\"\n      (click)=\"_reset(true)\"\n      class=\"mat-select-search-clear\"\n    >\n      @if (clearIcon) {\n        <ng-content select=\"[matSelectSearchClear]\"></ng-content>\n      } @else {\n        <mat-icon [svgIcon]=\"closeSvgIcon\">\n          {{ !closeSvgIcon ? closeIcon : null }}\n        </mat-icon>\n      }\n    </button>\n  }\n\n  <ng-content select=\".mat-select-search-custom-header-content\"></ng-content>\n\n  <mat-divider></mat-divider>\n</div>\n\n@if (_showNoEntriesFound$ | async) {\n  <div class=\"mat-select-search-no-entries-found\">\n    @if (noEntriesFound) {\n      <ng-content select=\"[matSelectNoEntriesFound]\"></ng-content>\n    } @else {\n      {{ noEntriesFoundLabel }}\n    }\n  </div>\n}\n", styles: [":host .mat-select-search-hidden{visibility:hidden}:host .mat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none}:host .mat-select-search-inner.mat-select-search-inner-multiple.mat-select-search-inner-toggle-all{display:flex;align-items:center}:host .suffix{position:absolute;top:var(--spacer-and-half);right:var(--spacer)}:host .mat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:var(--mat-sys-surface);line-height:var(--input-height);height:var(--input-height);padding:var(--spacer)}:host-context([dir=rtl]) :host .mat-select-search-input{padding-right:var(--double-spacer)}:host .mat-select-search-inner-toggle-all .mat-select-search-input{padding-left:var(--half-spacer)}:host .mat-select-search-no-entries-found{padding-top:var(--spacer);padding-bottom:var(--spacer)}:host .mat-select-search-clear{position:absolute;right:var(--half-spacer);top:0}:host-context([dir=rtl]) :host .mat-select-search-clear{right:auto;left:var(--half-spacer)}:host .mat-select-search-spinner{position:absolute;right:var(--double-spacer);top:calc(50% - var(--spacer))}:host-context([dir=rtl]) :host .mat-select-search-spinner{right:auto;left:var(--double-spacer)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "clearIcon", first: true, predicate: MatSelectSearchClearDirective, descendants: true, isSignal: true }, { propertyName: "noEntriesFound", first: true, predicate: MatSelectNoEntriesFoundDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchSelectInput", first: true, predicate: ["searchSelectInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "innerSelectSearch", first: true, predicate: ["innerSelectSearch"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!--\nCopyright (c) 2018 Bithost GmbH All Rights Reserved.\n\nUse of this source code is governed by an MIT-style license that can be\nfound in the LICENSE file at https://angular.io/license\n-->\n<!-- Placeholder to adjust vertical offset of the mat-option elements -->\n<input matInput class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: the  mat-datepicker-content mat-tab-header are needed to inherit the material theme colors, see PR #22 -->\n<div\n  #innerSelectSearch\n  class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\"\n  [class]=\"{\n    'mat-select-search-inner-multiple': matSelect.multiple,\n    'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible(),\n  }\"\n>\n  @if (_isToggleAllCheckboxVisible()) {\n    <mat-checkbox\n      class=\"mat-select-search-toggle-all-checkbox\"\n      [checked]=\"toggleAllCheckboxChecked()\"\n      [indeterminate]=\"toggleAllCheckboxIndeterminate()\"\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage()\"\n      matTooltipClass=\"ngx-mat-select-search-toggle-all-tooltip\"\n      [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition()\"\n      (change)=\"_emitSelectAllBooleanToParent($event.checked)\"\n    />\n  }\n  <input\n    class=\"mat-select-search-input\"\n    autocomplete=\"off\"\n    [type]=\"type()\"\n    [formControl]=\"_formControl\"\n    #searchSelectInput\n    (keydown)=\"_handleKeydown($event)\"\n    (keyup)=\"_handleKeyup($event)\"\n    (blur)=\"onBlur()\"\n    [placeholder]=\"placeholderLabel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n  />\n  @if (value === '' && !searching()) {\n    <mat-icon class=\"suffix\">search</mat-icon>\n  }\n  @if (searching()) {\n    <mat-spinner class=\"mat-select-search-spinner\" diameter=\"16\" />\n  }\n  @if (!hideClearSearchButton() && value && !searching()) {\n    <button\n      mat-icon-button\n      aria-label=\"Clear\"\n      (click)=\"_reset(true)\"\n      class=\"mat-select-search-clear\"\n    >\n      @if (clearIcon()) {\n        <ng-content select=\"[matSelectSearchClear]\" />\n      } @else {\n        <mat-icon [svgIcon]=\"closeSvgIcon()\">\n          {{ !closeSvgIcon() ? closeIcon() : null }}\n        </mat-icon>\n      }\n    </button>\n  }\n\n  <ng-content select=\".mat-select-search-custom-header-content\" />\n\n  <mat-divider />\n</div>\n\n@if (_showNoEntriesFound$ | async) {\n  <div class=\"mat-select-search-no-entries-found\">\n    @if (noEntriesFound()) {\n      <ng-content select=\"[matSelectNoEntriesFound]\" />\n    } @else {\n      {{ noEntriesFoundLabel() }}\n    }\n  </div>\n}\n", styles: [":host .mat-select-search-hidden{visibility:hidden}:host .mat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none}:host .mat-select-search-inner.mat-select-search-inner-multiple.mat-select-search-inner-toggle-all{display:flex;align-items:center}:host .suffix{position:absolute;top:var(--spacer-and-half);right:var(--spacer)}:host .mat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:var(--mat-sys-surface);line-height:var(--input-height);height:var(--input-height);padding:var(--spacer)}:host-context([dir=rtl]) :host .mat-select-search-input{padding-right:var(--double-spacer)}:host .mat-select-search-inner-toggle-all .mat-select-search-input{padding-left:var(--half-spacer)}:host .mat-select-search-no-entries-found{padding-top:var(--spacer);padding-bottom:var(--spacer)}:host .mat-select-search-clear{position:absolute;right:var(--half-spacer);top:0}:host-context([dir=rtl]) :host .mat-select-search-clear{right:auto;left:var(--half-spacer)}:host .mat-select-search-spinner{position:absolute;right:var(--double-spacer);top:calc(50% - var(--spacer))}:host-context([dir=rtl]) :host .mat-select-search-spinner{right:auto;left:var(--double-spacer)}\n"], dependencies: [{ kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-select-search', providers: [
                         {
@@ -508,7 +518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             multi: true,
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        NgClass,
                         MatCheckbox,
                         MatTooltip,
                         ReactiveFormsModule,
@@ -518,60 +527,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         MatInput,
                         MatDivider,
                         AsyncPipe,
-                    ], template: "<!--\nCopyright (c) 2018 Bithost GmbH All Rights Reserved.\n\nUse of this source code is governed by an MIT-style license that can be\nfound in the LICENSE file at https://angular.io/license\n-->\n<!-- Placeholder to adjust vertical offset of the mat-option elements -->\n<input matInput class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: the  mat-datepicker-content mat-tab-header are needed to inherit the material theme colors, see PR #22 -->\n<div\n  #innerSelectSearch\n  class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\"\n  [ngClass]=\"{\n    'mat-select-search-inner-multiple': matSelect.multiple,\n    'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible(),\n  }\"\n>\n  @if (_isToggleAllCheckboxVisible()) {\n    <mat-checkbox\n      class=\"mat-select-search-toggle-all-checkbox\"\n      [checked]=\"toggleAllCheckboxChecked\"\n      [indeterminate]=\"toggleAllCheckboxIndeterminate\"\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage\"\n      matTooltipClass=\"ngx-mat-select-search-toggle-all-tooltip\"\n      [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\n      (change)=\"_emitSelectAllBooleanToParent($event.checked)\"\n    ></mat-checkbox>\n  }\n  <input\n    class=\"mat-select-search-input\"\n    autocomplete=\"off\"\n    [type]=\"type\"\n    [formControl]=\"_formControl\"\n    #searchSelectInput\n    (keydown)=\"_handleKeydown($event)\"\n    (keyup)=\"_handleKeyup($event)\"\n    (blur)=\"onBlur()\"\n    [placeholder]=\"placeholderLabel\"\n    [attr.aria-label]=\"ariaLabel\"\n  />\n  @if (value === '' && !searching) {\n    <mat-icon class=\"suffix\">search</mat-icon>\n  }\n  @if (searching) {\n    <mat-spinner class=\"mat-select-search-spinner\" diameter=\"16\"></mat-spinner>\n  }\n  @if (!hideClearSearchButton && value && !searching) {\n    <button\n      mat-icon-button\n      aria-label=\"Clear\"\n      (click)=\"_reset(true)\"\n      class=\"mat-select-search-clear\"\n    >\n      @if (clearIcon) {\n        <ng-content select=\"[matSelectSearchClear]\"></ng-content>\n      } @else {\n        <mat-icon [svgIcon]=\"closeSvgIcon\">\n          {{ !closeSvgIcon ? closeIcon : null }}\n        </mat-icon>\n      }\n    </button>\n  }\n\n  <ng-content select=\".mat-select-search-custom-header-content\"></ng-content>\n\n  <mat-divider></mat-divider>\n</div>\n\n@if (_showNoEntriesFound$ | async) {\n  <div class=\"mat-select-search-no-entries-found\">\n    @if (noEntriesFound) {\n      <ng-content select=\"[matSelectNoEntriesFound]\"></ng-content>\n    } @else {\n      {{ noEntriesFoundLabel }}\n    }\n  </div>\n}\n", styles: [":host .mat-select-search-hidden{visibility:hidden}:host .mat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none}:host .mat-select-search-inner.mat-select-search-inner-multiple.mat-select-search-inner-toggle-all{display:flex;align-items:center}:host .suffix{position:absolute;top:var(--spacer-and-half);right:var(--spacer)}:host .mat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:var(--mat-sys-surface);line-height:var(--input-height);height:var(--input-height);padding:var(--spacer)}:host-context([dir=rtl]) :host .mat-select-search-input{padding-right:var(--double-spacer)}:host .mat-select-search-inner-toggle-all .mat-select-search-input{padding-left:var(--half-spacer)}:host .mat-select-search-no-entries-found{padding-top:var(--spacer);padding-bottom:var(--spacer)}:host .mat-select-search-clear{position:absolute;right:var(--half-spacer);top:0}:host-context([dir=rtl]) :host .mat-select-search-clear{right:auto;left:var(--half-spacer)}:host .mat-select-search-spinner{position:absolute;right:var(--double-spacer);top:calc(50% - var(--spacer))}:host-context([dir=rtl]) :host .mat-select-search-spinner{right:auto;left:var(--double-spacer)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholderLabel: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], closeIcon: [{
-                type: Input
-            }], closeSvgIcon: [{
-                type: Input
-            }], noEntriesFoundLabel: [{
-                type: Input
-            }], clearSearchInput: [{
-                type: Input
-            }], searching: [{
-                type: Input
-            }], disableInitialFocus: [{
-                type: Input
-            }], enableClearOnEscapePressed: [{
-                type: Input
-            }], preventHomeEndKeyPropagation: [{
-                type: Input
-            }], disableScrollToActiveOnOptionsChanged: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], showToggleAllCheckbox: [{
-                type: Input
-            }], toggleAllCheckboxChecked: [{
-                type: Input
-            }], toggleAllCheckboxIndeterminate: [{
-                type: Input
-            }], toggleAllCheckboxTooltipMessage: [{
-                type: Input
-            }], toggleAllCheckboxTooltipPosition: [{
-                type: Input
-            }], hideClearSearchButton: [{
-                type: Input
-            }], alwaysRestoreSelectedOptionsMulti: [{
-                type: Input
-            }], toggleAll: [{
-                type: Output
-            }], searchSelectInput: [{
-                type: ViewChild,
-                args: ['searchSelectInput', { read: ElementRef, static: true }]
-            }], innerSelectSearch: [{
-                type: ViewChild,
-                args: ['innerSelectSearch', { read: ElementRef, static: true }]
-            }], clearIcon: [{
-                type: ContentChild,
-                args: [MatSelectSearchClearDirective]
-            }], noEntriesFound: [{
-                type: ContentChild,
-                args: [MatSelectNoEntriesFoundDirective]
-            }] } });
+                    ], template: "<!--\nCopyright (c) 2018 Bithost GmbH All Rights Reserved.\n\nUse of this source code is governed by an MIT-style license that can be\nfound in the LICENSE file at https://angular.io/license\n-->\n<!-- Placeholder to adjust vertical offset of the mat-option elements -->\n<input matInput class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: the  mat-datepicker-content mat-tab-header are needed to inherit the material theme colors, see PR #22 -->\n<div\n  #innerSelectSearch\n  class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\"\n  [class]=\"{\n    'mat-select-search-inner-multiple': matSelect.multiple,\n    'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible(),\n  }\"\n>\n  @if (_isToggleAllCheckboxVisible()) {\n    <mat-checkbox\n      class=\"mat-select-search-toggle-all-checkbox\"\n      [checked]=\"toggleAllCheckboxChecked()\"\n      [indeterminate]=\"toggleAllCheckboxIndeterminate()\"\n      [matTooltip]=\"toggleAllCheckboxTooltipMessage()\"\n      matTooltipClass=\"ngx-mat-select-search-toggle-all-tooltip\"\n      [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition()\"\n      (change)=\"_emitSelectAllBooleanToParent($event.checked)\"\n    />\n  }\n  <input\n    class=\"mat-select-search-input\"\n    autocomplete=\"off\"\n    [type]=\"type()\"\n    [formControl]=\"_formControl\"\n    #searchSelectInput\n    (keydown)=\"_handleKeydown($event)\"\n    (keyup)=\"_handleKeyup($event)\"\n    (blur)=\"onBlur()\"\n    [placeholder]=\"placeholderLabel()\"\n    [attr.aria-label]=\"ariaLabel()\"\n  />\n  @if (value === '' && !searching()) {\n    <mat-icon class=\"suffix\">search</mat-icon>\n  }\n  @if (searching()) {\n    <mat-spinner class=\"mat-select-search-spinner\" diameter=\"16\" />\n  }\n  @if (!hideClearSearchButton() && value && !searching()) {\n    <button\n      mat-icon-button\n      aria-label=\"Clear\"\n      (click)=\"_reset(true)\"\n      class=\"mat-select-search-clear\"\n    >\n      @if (clearIcon()) {\n        <ng-content select=\"[matSelectSearchClear]\" />\n      } @else {\n        <mat-icon [svgIcon]=\"closeSvgIcon()\">\n          {{ !closeSvgIcon() ? closeIcon() : null }}\n        </mat-icon>\n      }\n    </button>\n  }\n\n  <ng-content select=\".mat-select-search-custom-header-content\" />\n\n  <mat-divider />\n</div>\n\n@if (_showNoEntriesFound$ | async) {\n  <div class=\"mat-select-search-no-entries-found\">\n    @if (noEntriesFound()) {\n      <ng-content select=\"[matSelectNoEntriesFound]\" />\n    } @else {\n      {{ noEntriesFoundLabel() }}\n    }\n  </div>\n}\n", styles: [":host .mat-select-search-hidden{visibility:hidden}:host .mat-select-search-inner{position:absolute;top:0;left:0;width:100%;z-index:100;font-size:inherit;box-shadow:none}:host .mat-select-search-inner.mat-select-search-inner-multiple.mat-select-search-inner-toggle-all{display:flex;align-items:center}:host .suffix{position:absolute;top:var(--spacer-and-half);right:var(--spacer)}:host .mat-select-search-input{box-sizing:border-box;width:100%;border:none;font-family:inherit;font-size:inherit;color:currentColor;outline:none;background:var(--mat-sys-surface);line-height:var(--input-height);height:var(--input-height);padding:var(--spacer)}:host-context([dir=rtl]) :host .mat-select-search-input{padding-right:var(--double-spacer)}:host .mat-select-search-inner-toggle-all .mat-select-search-input{padding-left:var(--half-spacer)}:host .mat-select-search-no-entries-found{padding-top:var(--spacer);padding-bottom:var(--spacer)}:host .mat-select-search-clear{position:absolute;right:var(--half-spacer);top:0}:host-context([dir=rtl]) :host .mat-select-search-clear{right:auto;left:var(--half-spacer)}:host .mat-select-search-spinner{position:absolute;right:var(--double-spacer);top:calc(50% - var(--spacer))}:host-context([dir=rtl]) :host .mat-select-search-spinner{right:auto;left:var(--double-spacer)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholderLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], closeSvgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeSvgIcon", required: false }] }], noEntriesFoundLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noEntriesFoundLabel", required: false }] }], clearSearchInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchInput", required: false }] }], searching: [{ type: i0.Input, args: [{ isSignal: true, alias: "searching", required: false }] }], disableInitialFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialFocus", required: false }] }], enableClearOnEscapePressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableClearOnEscapePressed", required: false }] }], preventHomeEndKeyPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventHomeEndKeyPropagation", required: false }] }], disableScrollToActiveOnOptionsChanged: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableScrollToActiveOnOptionsChanged", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showToggleAllCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAllCheckbox", required: false }] }], toggleAllCheckboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxChecked", required: false }] }], toggleAllCheckboxIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxIndeterminate", required: false }] }], toggleAllCheckboxTooltipMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxTooltipMessage", required: false }] }], toggleAllCheckboxTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAllCheckboxTooltipPosition", required: false }] }], hideClearSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClearSearchButton", required: false }] }], alwaysRestoreSelectedOptionsMulti: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysRestoreSelectedOptionsMulti", required: false }] }], toggleAll: [{ type: i0.Output, args: ["toggleAll"] }], searchSelectInput: [{ type: i0.ViewChild, args: ['searchSelectInput', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], innerSelectSearch: [{ type: i0.ViewChild, args: ['innerSelectSearch', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], clearIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MatSelectSearchClearDirective), { isSignal: true }] }], noEntriesFound: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MatSelectNoEntriesFoundDirective), { isSignal: true }] }] } });
 
 /**
  * Copyright (c) 2018 Bithost GmbH All Rights Reserved.
@@ -580,15 +541,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * found in the LICENSE file at https://angular.io/license
  */
 class MatSelectSearchModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchModule, imports: [MatSelectSearchComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchModule, imports: [MatSelectSearchComponent,
             MatSelectSearchClearDirective,
             MatSelectNoEntriesFoundDirective], exports: [MatSelectSearchComponent,
             MatSelectSearchClearDirective,
             MatSelectNoEntriesFoundDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchModule, imports: [MatSelectSearchComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchModule, imports: [MatSelectSearchComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MatSelectSearchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MatSelectSearchModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [