@ng-matero/extensions 18.4.1 → 19.0.1

package/fesm2022/mtxLoader.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 class MtxLoader {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /** The loader's type. Can be `spinner` or `progressbar` */
         this.type = 'spinner';
         /** Theme color palette for the component. */
@@ -26,16 +26,16 @@ class MtxLoader {
         /** Whether the loader has a backdrop. */
         this.hasBackdrop = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxLoader, isStandalone: true, selector: "mtx-loader", inputs: { type: "type", color: "color", mode: "mode", strokeWidth: "strokeWidth", diameter: "diameter", bufferValue: "bufferValue", value: "value", loading: ["loading", "loading", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute] }, host: { properties: { "class.mtx-loader-loading": "loading" }, classAttribute: "mtx-loader" }, exportAs: ["mtxLoader"], ngImport: i0, template: "@if (loading && hasBackdrop) {\n  <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n  <div class=\"mtx-loader-main\">\n    @if (type==='spinner') {\n      <mat-spinner\n        [color]=\"color\"\n        [strokeWidth]=\"strokeWidth\"\n        [diameter]=\"diameter\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\">\n      </mat-spinner>\n    }\n    @if (type==='progressbar') {\n      <mat-progress-bar\n        [color]=\"color\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n        [bufferValue]=\"bufferValue\">\n      </mat-progress-bar>\n    }\n  </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:210;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:200;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color)}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxLoader, isStandalone: true, selector: "mtx-loader", inputs: { type: "type", color: "color", mode: "mode", strokeWidth: "strokeWidth", diameter: "diameter", bufferValue: "bufferValue", value: "value", loading: ["loading", "loading", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute] }, host: { properties: { "class.mtx-loader-loading": "loading" }, classAttribute: "mtx-loader" }, exportAs: ["mtxLoader"], ngImport: i0, template: "@if (loading && hasBackdrop) {\n  <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n  <div class=\"mtx-loader-main\">\n    @if (type === 'spinner') {\n      <mat-spinner\n        [color]=\"color\"\n        [strokeWidth]=\"strokeWidth\"\n        [diameter]=\"diameter\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n      ></mat-spinner>\n    }\n    @if (type === 'progressbar') {\n      <mat-progress-bar\n        [color]=\"color\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n        [bufferValue]=\"bufferValue\"\n      ></mat-progress-bar>\n    }\n  </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:210;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:200;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color, color-mix(in srgb, var(--mat-sys-surface) 75%, transparent))}\n"], dependencies: [{ kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxLoader, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-loader', exportAs: 'mtxLoader', host: {
                         'class': 'mtx-loader',
                         '[class.mtx-loader-loading]': 'loading',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatProgressSpinner, MatProgressBar], template: "@if (loading && hasBackdrop) {\n  <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n  <div class=\"mtx-loader-main\">\n    @if (type==='spinner') {\n      <mat-spinner\n        [color]=\"color\"\n        [strokeWidth]=\"strokeWidth\"\n        [diameter]=\"diameter\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\">\n      </mat-spinner>\n    }\n    @if (type==='progressbar') {\n      <mat-progress-bar\n        [color]=\"color\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n        [bufferValue]=\"bufferValue\">\n      </mat-progress-bar>\n    }\n  </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:210;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:200;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinner, MatProgressBar], template: "@if (loading && hasBackdrop) {\n  <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n  <div class=\"mtx-loader-main\">\n    @if (type === 'spinner') {\n      <mat-spinner\n        [color]=\"color\"\n        [strokeWidth]=\"strokeWidth\"\n        [diameter]=\"diameter\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n      ></mat-spinner>\n    }\n    @if (type === 'progressbar') {\n      <mat-progress-bar\n        [color]=\"color\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n        [bufferValue]=\"bufferValue\"\n      ></mat-progress-bar>\n    }\n  </div>\n}\n<ng-content></ng-content>\n", styles: [".mtx-loader{position:relative;display:block;width:100%;height:100%}.mtx-loader-main{position:absolute;top:0;left:0;z-index:210;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.mtx-loader-main .mat-mdc-spinner{position:relative}.mtx-loader-main .mat-mdc-progress-bar{position:absolute;top:0;left:0;width:100%}.mtx-loader-backdrop{position:absolute;top:0;left:0;z-index:200;display:block;width:100%;height:100%;content:\"\";background-color:var(--mtx-loader-backdrop-background-color, color-mix(in srgb, var(--mat-sys-surface) 75%, transparent))}\n"] }]
+        }], propDecorators: { type: [{
                 type: Input
             }], color: [{
                 type: Input
@@ -58,11 +58,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxLoaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader], exports: [MtxLoader] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader], exports: [MtxLoader] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxLoaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxLoaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader],

package/fesm2022/mtxLoader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mtxLoader.mjs","sources":["../../../projects/extensions/loader/loader.ts","../../../projects/extensions/loader/loader.html","../../../projects/extensions/loader/loader-module.ts","../../../projects/extensions/loader/mtxLoader.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  ViewEncapsulation,\n  booleanAttribute,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatProgressBar, ProgressBarMode } from '@angular/material/progress-bar';\nimport { MatProgressSpinner, ProgressSpinnerMode } from '@angular/material/progress-spinner';\n\nexport type MtxLoaderType = 'spinner' | 'progressbar';\n\n@Component({\n  selector: 'mtx-loader',\n  exportAs: 'mtxLoader',\n  host: {\n    'class': 'mtx-loader',\n    '[class.mtx-loader-loading]': 'loading',\n  },\n  templateUrl: './loader.html',\n  styleUrl: './loader.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [MatProgressSpinner, MatProgressBar],\n})\nexport class MtxLoader {\n  /** The loader's type. Can be `spinner` or `progressbar` */\n  @Input() type: MtxLoaderType = 'spinner';\n\n  /** Theme color palette for the component. */\n  @Input() color: ThemePalette = 'primary';\n\n  /** Mode of the progress circle or the progress bar. */\n  @Input() mode: ProgressSpinnerMode | ProgressBarMode = 'indeterminate';\n\n  /** Stroke width of the spinner loader. */\n  @Input() strokeWidth = 4;\n\n  /** The diameter of the spinner loader (will set width and height of svg). */\n  @Input() diameter = 48;\n\n  /** Buffer value of the progressbar loader. */\n  @Input() bufferValue = 0;\n\n  /** Value of the progress circle or the progress bar. */\n  @Input() value = 0;\n\n  /** Whether the loader is loading. */\n  @Input({ transform: booleanAttribute }) loading = true;\n\n  /** Whether the loader has a backdrop. */\n  @Input({ transform: booleanAttribute }) hasBackdrop = true;\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n}\n","@if (loading && hasBackdrop) {\n  <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n  <div class=\"mtx-loader-main\">\n    @if (type==='spinner') {\n      <mat-spinner\n        [color]=\"color\"\n        [strokeWidth]=\"strokeWidth\"\n        [diameter]=\"diameter\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\">\n      </mat-spinner>\n    }\n    @if (type==='progressbar') {\n      <mat-progress-bar\n        [color]=\"color\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n        [bufferValue]=\"bufferValue\">\n      </mat-progress-bar>\n    }\n  </div>\n}\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\nimport { MtxLoader } from './loader';\n\n@NgModule({\n  imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader],\n  exports: [MtxLoader],\n})\nexport class MtxLoaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mtxLoader.mjs","sources":["../../../projects/extensions/loader/loader.ts","../../../projects/extensions/loader/loader.html","../../../projects/extensions/loader/loader-module.ts","../../../projects/extensions/loader/mtxLoader.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  ViewEncapsulation,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatProgressBar, ProgressBarMode } from '@angular/material/progress-bar';\nimport { MatProgressSpinner, ProgressSpinnerMode } from '@angular/material/progress-spinner';\n\nexport type MtxLoaderType = 'spinner' | 'progressbar';\n\n@Component({\n  selector: 'mtx-loader',\n  exportAs: 'mtxLoader',\n  host: {\n    'class': 'mtx-loader',\n    '[class.mtx-loader-loading]': 'loading',\n  },\n  templateUrl: './loader.html',\n  styleUrl: './loader.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatProgressSpinner, MatProgressBar],\n})\nexport class MtxLoader {\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n\n  /** The loader's type. Can be `spinner` or `progressbar` */\n  @Input() type: MtxLoaderType = 'spinner';\n\n  /** Theme color palette for the component. */\n  @Input() color: ThemePalette = 'primary';\n\n  /** Mode of the progress circle or the progress bar. */\n  @Input() mode: ProgressSpinnerMode | ProgressBarMode = 'indeterminate';\n\n  /** Stroke width of the spinner loader. */\n  @Input() strokeWidth = 4;\n\n  /** The diameter of the spinner loader (will set width and height of svg). */\n  @Input() diameter = 48;\n\n  /** Buffer value of the progressbar loader. */\n  @Input() bufferValue = 0;\n\n  /** Value of the progress circle or the progress bar. */\n  @Input() value = 0;\n\n  /** Whether the loader is loading. */\n  @Input({ transform: booleanAttribute }) loading = true;\n\n  /** Whether the loader has a backdrop. */\n  @Input({ transform: booleanAttribute }) hasBackdrop = true;\n}\n","@if (loading && hasBackdrop) {\n  <div class=\"mtx-loader-backdrop\"></div>\n}\n@if (loading) {\n  <div class=\"mtx-loader-main\">\n    @if (type === 'spinner') {\n      <mat-spinner\n        [color]=\"color\"\n        [strokeWidth]=\"strokeWidth\"\n        [diameter]=\"diameter\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n      ></mat-spinner>\n    }\n    @if (type === 'progressbar') {\n      <mat-progress-bar\n        [color]=\"color\"\n        [mode]=\"$any(mode)\"\n        [value]=\"value\"\n        [bufferValue]=\"bufferValue\"\n      ></mat-progress-bar>\n    }\n  </div>\n}\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\nimport { MtxLoader } from './loader';\n\n@NgModule({\n  imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader],\n  exports: [MtxLoader],\n})\nexport class MtxLoaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/mtxPhotoviewer.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, Directive, Input, HostListener, NgModule } from '@angular/core';
+import { inject, ElementRef, booleanAttribute, Directive, Input, HostListener, NgModule } from '@angular/core';
 import PhotoViewer from 'photoviewer';
 
 class MtxPhotoviewer {
-    constructor(_elementRef) {
-        this._elementRef = _elementRef;
+    constructor() {
+        this._elementRef = inject(ElementRef);
         this.images = [];
         this.embed = false;
     }
@@ -39,17 +39,16 @@ class MtxPhotoviewer {
     initPhotoViewer() {
         this.photoviewerInstance = new PhotoViewer(this.images, this.options);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPhotoviewer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: MtxPhotoviewer, isStandalone: true, selector: "[mtxPhotoviewer]", inputs: { images: ["mtxPhotoviewerItems", "images"], options: ["mtxPhotoviewerOptions", "options"], embed: ["mtxPhotoviewerEmbed", "embed", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, exportAs: ["mtxPhotoviewer"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPhotoviewer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.4", type: MtxPhotoviewer, isStandalone: true, selector: "[mtxPhotoviewer]", inputs: { images: ["mtxPhotoviewerItems", "images"], options: ["mtxPhotoviewerOptions", "options"], embed: ["mtxPhotoviewerEmbed", "embed", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" } }, exportAs: ["mtxPhotoviewer"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPhotoviewer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPhotoviewer, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxPhotoviewer]',
                     exportAs: 'mtxPhotoviewer',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { images: [{
+        }], propDecorators: { images: [{
                 type: Input,
                 args: ['mtxPhotoviewerItems']
             }], options: [{
@@ -64,11 +63,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxPhotoviewerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPhotoviewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxPhotoviewerModule, imports: [MtxPhotoviewer], exports: [MtxPhotoviewer] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPhotoviewerModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPhotoviewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxPhotoviewerModule, imports: [MtxPhotoviewer], exports: [MtxPhotoviewer] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPhotoviewerModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPhotoviewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPhotoviewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MtxPhotoviewer],

package/fesm2022/mtxPhotoviewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mtxPhotoviewer.mjs","sources":["../../../projects/extensions/photoviewer/photoviewer.ts","../../../projects/extensions/photoviewer/photoviewer-module.ts","../../../projects/extensions/photoviewer/mtxPhotoviewer.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  HostListener,\n  Input,\n  OnDestroy,\n  OnInit,\n  booleanAttribute,\n} from '@angular/core';\nimport PhotoViewer from 'photoviewer';\n\n@Directive({\n  selector: '[mtxPhotoviewer]',\n  exportAs: 'mtxPhotoviewer',\n  standalone: true,\n})\nexport class MtxPhotoviewer implements OnInit, OnDestroy {\n  @Input('mtxPhotoviewerItems')\n  images: PhotoViewer.Img[] = [];\n\n  @Input('mtxPhotoviewerOptions')\n  options?: PhotoViewer.Options;\n\n  @Input({ alias: 'mtxPhotoviewerEmbed', transform: booleanAttribute })\n  embed = false;\n\n  photoviewerInstance?: PhotoViewer;\n\n  constructor(private _elementRef: ElementRef<Element>) {}\n\n  ngOnInit(): void {\n    const { nativeElement } = this._elementRef;\n\n    if (this.embed) {\n      this.options = {\n        appendTo: nativeElement,\n        positionFixed: false,\n        modalWidth: nativeElement.clientWidth,\n        modalHeight: nativeElement.clientHeight,\n        ...this.options,\n      };\n      this.initPhotoViewer();\n    } else {\n      if (this.images.length === 0 && nativeElement.nodeName === 'IMG') {\n        const img = nativeElement as HTMLImageElement;\n        this.images = [{ title: img.title || img.alt, src: img.src }];\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.photoviewerInstance?.close();\n  }\n\n  @HostListener('click', ['$event'])\n  onClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (!this.embed) {\n      this.initPhotoViewer();\n    }\n  }\n\n  initPhotoViewer() {\n    this.photoviewerInstance = new PhotoViewer(this.images, this.options);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { MtxPhotoviewer } from './photoviewer';\n\n@NgModule({\n  imports: [MtxPhotoviewer],\n  exports: [MtxPhotoviewer],\n})\nexport class MtxPhotoviewerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mtxPhotoviewer.mjs","sources":["../../../projects/extensions/photoviewer/photoviewer.ts","../../../projects/extensions/photoviewer/photoviewer-module.ts","../../../projects/extensions/photoviewer/mtxPhotoviewer.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  HostListener,\n  Input,\n  OnDestroy,\n  OnInit,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport PhotoViewer from 'photoviewer';\n\n@Directive({\n  selector: '[mtxPhotoviewer]',\n  exportAs: 'mtxPhotoviewer',\n})\nexport class MtxPhotoviewer implements OnInit, OnDestroy {\n  private _elementRef = inject<ElementRef<Element>>(ElementRef);\n\n  @Input('mtxPhotoviewerItems')\n  images: PhotoViewer.Img[] = [];\n\n  @Input('mtxPhotoviewerOptions')\n  options?: PhotoViewer.Options;\n\n  @Input({ alias: 'mtxPhotoviewerEmbed', transform: booleanAttribute })\n  embed = false;\n\n  photoviewerInstance?: PhotoViewer;\n\n  ngOnInit(): void {\n    const { nativeElement } = this._elementRef;\n\n    if (this.embed) {\n      this.options = {\n        appendTo: nativeElement,\n        positionFixed: false,\n        modalWidth: nativeElement.clientWidth,\n        modalHeight: nativeElement.clientHeight,\n        ...this.options,\n      };\n      this.initPhotoViewer();\n    } else {\n      if (this.images.length === 0 && nativeElement.nodeName === 'IMG') {\n        const img = nativeElement as HTMLImageElement;\n        this.images = [{ title: img.title || img.alt, src: img.src }];\n      }\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.photoviewerInstance?.close();\n  }\n\n  @HostListener('click', ['$event'])\n  onClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (!this.embed) {\n      this.initPhotoViewer();\n    }\n  }\n\n  initPhotoViewer() {\n    this.photoviewerInstance = new PhotoViewer(this.images, this.options);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { MtxPhotoviewer } from './photoviewer';\n\n@NgModule({\n  imports: [MtxPhotoviewer],\n  exports: [MtxPhotoviewer],\n})\nexport class MtxPhotoviewerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/mtxPopover.mjs

@@ -1,16 +1,14 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Inject, EventEmitter, booleanAttribute, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, inject, Optional, NgModule } from '@angular/core';
+import { InjectionToken, Directive, Inject, inject, ElementRef, NgZone, EventEmitter, booleanAttribute, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ViewContainerRef, ChangeDetectorRef, NgModule } from '@angular/core';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from '@angular/cdk/a11y';
-import { CdkTrapFocus, isFakeMousedownFromScreenReader, A11yModule } from '@angular/cdk/a11y';
+import { CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader, A11yModule } from '@angular/cdk/a11y';
 import { ESCAPE, hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Subject, Subscription, of, merge } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
+import { Directionality } from '@angular/cdk/bidi';
 import { filter, take, takeUntil } from 'rxjs/operators';
-import * as i2 from '@angular/cdk/bidi';
 
 /**
  * Below are all the animations for the mtx-popover component.
@@ -97,10 +95,10 @@ class _MtxPopoverContentBase {
             this._outlet.dispose();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: _MtxPopoverContentBase, deps: [{ token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: _MtxPopoverContentBase, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: _MtxPopoverContentBase, deps: [{ token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: _MtxPopoverContentBase, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: _MtxPopoverContentBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: _MtxPopoverContentBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
@@ -110,15 +108,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Popover content that will be rendered lazily once the popover is opened.
  */
 class MtxPopoverContent extends _MtxPopoverContentBase {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverContent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxPopoverContent, isStandalone: true, selector: "ng-template[mtxPopoverContent]", providers: [{ provide: MTX_POPOVER_CONTENT, useExisting: MtxPopoverContent }], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverContent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxPopoverContent, isStandalone: true, selector: "ng-template[mtxPopoverContent]", providers: [{ provide: MTX_POPOVER_CONTENT, useExisting: MtxPopoverContent }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[mtxPopoverContent]',
                     providers: [{ provide: MTX_POPOVER_CONTENT, useExisting: MtxPopoverContent }],
-                    standalone: true,
                 }]
         }] });
 
@@ -162,61 +159,10 @@ function MTX_POPOVER_DEFAULT_OPTIONS_FACTORY() {
 }
 let popoverPanelUid = 0;
 class MtxPopover {
-    /** Popover's position. */
-    get position() {
-        return this._position;
-    }
-    set position(value) {
-        if (!['before', 'after', 'above', 'below'].includes(value[0])) {
-            throwMtxPopoverInvalidPositionStart();
-        }
-        if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
-            throwMtxPopoverInvalidPositionEnd();
-        }
-        this._position = value;
-        this.setPositionClasses();
-    }
-    /**
-     * This method takes classes set on the host mtx-popover element and applies them on the
-     * popover template that displays in the overlay container. Otherwise, it's difficult
-     * to style the containing popover from outside the component.
-     * @param classes list of class names
-     */
-    set panelClass(classes) {
-        const previousPanelClass = this._previousPanelClass;
-        const newClassList = { ...this._classList };
-        if (previousPanelClass && previousPanelClass.length) {
-            previousPanelClass.split(' ').forEach((className) => {
-                newClassList[className] = false;
-            });
-        }
-        this._previousPanelClass = classes;
-        if (classes && classes.length) {
-            classes.split(' ').forEach((className) => {
-                newClassList[className] = true;
-            });
-            this._elementRef.nativeElement.className = '';
-            this.setPositionClasses();
-        }
-        this._classList = newClassList;
-    }
-    /**
-     * This method takes classes set on the host mtx-popover element and applies them on the
-     * popover template that displays in the overlay container. Otherwise, it's difficult
-     * to style the containing popover from outside the component.
-     * @deprecated Use `panelClass` instead.
-     * @breaking-change 8.0.0
-     */
-    get classList() {
-        return this.panelClass;
-    }
-    set classList(classes) {
-        this.panelClass = classes;
-    }
-    constructor(_elementRef, _unusedNgZone, _defaultOptions) {
-        this._elementRef = _elementRef;
-        this._unusedNgZone = _unusedNgZone;
-        this._defaultOptions = _defaultOptions;
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._unusedNgZone = inject(NgZone);
+        this._defaultOptions = inject(MTX_POPOVER_DEFAULT_OPTIONS);
         this._elevationPrefix = 'mat-elevation-z';
         this._baseElevation = null;
         /** Config object to be passed into the popover's class. */
@@ -268,6 +214,57 @@ class MtxPopover {
         this.closed = new EventEmitter();
         this.panelId = `mtx-popover-panel-${popoverPanelUid++}`;
     }
+    /** Popover's position. */
+    get position() {
+        return this._position;
+    }
+    set position(value) {
+        if (!['before', 'after', 'above', 'below'].includes(value[0])) {
+            throwMtxPopoverInvalidPositionStart();
+        }
+        if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
+            throwMtxPopoverInvalidPositionEnd();
+        }
+        this._position = value;
+        this.setPositionClasses();
+    }
+    /**
+     * This method takes classes set on the host mtx-popover element and applies them on the
+     * popover template that displays in the overlay container. Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @param classes list of class names
+     */
+    set panelClass(classes) {
+        const previousPanelClass = this._previousPanelClass;
+        const newClassList = { ...this._classList };
+        if (previousPanelClass && previousPanelClass.length) {
+            previousPanelClass.split(' ').forEach((className) => {
+                newClassList[className] = false;
+            });
+        }
+        this._previousPanelClass = classes;
+        if (classes && classes.length) {
+            classes.split(' ').forEach((className) => {
+                newClassList[className] = true;
+            });
+            this._elementRef.nativeElement.className = '';
+            this.setPositionClasses();
+        }
+        this._classList = newClassList;
+    }
+    /**
+     * This method takes classes set on the host mtx-popover element and applies them on the
+     * popover template that displays in the overlay container. Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @deprecated Use `panelClass` instead.
+     * @breaking-change 8.0.0
+     */
+    get classList() {
+        return this.panelClass;
+    }
+    set classList(classes) {
+        this.panelClass = classes;
+    }
     ngOnInit() {
         this.setPositionClasses();
     }
@@ -393,16 +390,13 @@ class MtxPopover {
     _onAnimationStart(event) {
         this._isAnimating = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopover, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MTX_POPOVER_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxPopover, isStandalone: true, selector: "mtx-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: ["class", "panelClass"], classList: "classList" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: MTX_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["mtxPopover"], ngImport: i0, template: "<ng-template>\n  <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n  <div\n    [id]=\"panelId\"\n    class=\"mtx-popover-panel\"\n    [class]=\"_classList\"\n    [class.mtx-popover-panel-without-arrow]=\"hideArrow\"\n    (keydown)=\"_handleKeydown($event)\"\n    (click)=\"_handleClick()\"\n    (mouseover)=\"_handleMouseOver()\"\n    (mouseleave)=\"_handleMouseLeave()\"\n    [@transformPopover]=\"_panelAnimationState\"\n    (@transformPopover.start)=\"_onAnimationStart($event)\"\n    (@transformPopover.done)=\"_onAnimationDone($event)\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.aria-describedby]=\"ariaDescribedby || null\"\n    [cdkTrapFocus]=\"focusTrapEnabled\"\n    [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\n    <div class=\"mtx-popover-content\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideArrow) {\n      <div class=\"mtx-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n    }\n  </div>\n</ng-template>\n", styles: [".mtx-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;border-radius:var(--mtx-popover-container-shape, var(--mat-app-corner-extra-small));background-color:var(--mtx-popover-background-color, var(--mat-app-surface-container));color:var(--mtx-popover-text-color, var(--mat-app-on-surface))}.mtx-popover-panel[class*=mtx-popover-below]{margin-top:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-above]{margin-bottom:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.mtx-popover-panel.mtx-popover-panel-without-arrow{margin:0}.mtx-popover-direction-arrow{position:absolute}.mtx-popover-direction-arrow:before,.mtx-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.mtx-popover-direction-arrow:before{border-color:var(--mtx-popover-outline-color, var(--mat-app-surface-container))}.mtx-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--mtx-popover-background-color, var(--mat-app-surface-container))}[class*=mtx-popover-below] .mtx-popover-direction-arrow,[class*=mtx-popover-above] .mtx-popover-direction-arrow{width:1em}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-above] .mtx-popover-direction-arrow:after{right:1px;left:auto}[class*=mtx-popover-below] .mtx-popover-direction-arrow{top:0}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow{bottom:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow,[class*=mtx-popover-after] .mtx-popover-direction-arrow{height:1em}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{top:1px}[class*=mtx-popover-before] .mtx-popover-direction-arrow{right:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=mtx-popover-after] .mtx-popover-direction-arrow{left:0}[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [transformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxPopover, isStandalone: true, selector: "mtx-popover", inputs: { backdropClass: "backdropClass", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], triggerEvent: "triggerEvent", enterDelay: "enterDelay", leaveDelay: "leaveDelay", position: "position", xOffset: "xOffset", yOffset: "yOffset", arrowWidth: "arrowWidth", arrowHeight: "arrowHeight", arrowOffsetX: "arrowOffsetX", arrowOffsetY: "arrowOffsetY", hideArrow: ["hideArrow", "hideArrow", booleanAttribute], closeOnPanelClick: ["closeOnPanelClick", "closeOnPanelClick", booleanAttribute], closeOnBackdropClick: ["closeOnBackdropClick", "closeOnBackdropClick", booleanAttribute], focusTrapEnabled: ["focusTrapEnabled", "focusTrapEnabled", booleanAttribute], focusTrapAutoCaptureEnabled: ["focusTrapAutoCaptureEnabled", "focusTrapAutoCaptureEnabled", booleanAttribute], hasBackdrop: ["hasBackdrop", "hasBackdrop", booleanAttribute], panelClass: ["class", "panelClass"], classList: "classList" }, outputs: { closed: "closed" }, queries: [{ propertyName: "lazyContent", first: true, predicate: MTX_POPOVER_CONTENT, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["mtxPopover"], ngImport: i0, template: "<ng-template>\n  <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n  <div\n    [id]=\"panelId\"\n    class=\"mtx-popover-panel\"\n    [class]=\"_classList\"\n    [class.mtx-popover-panel-without-arrow]=\"hideArrow\"\n    (keydown)=\"_handleKeydown($event)\"\n    (click)=\"_handleClick()\"\n    (mouseover)=\"_handleMouseOver()\"\n    (mouseleave)=\"_handleMouseLeave()\"\n    [@transformPopover]=\"_panelAnimationState\"\n    (@transformPopover.start)=\"_onAnimationStart($event)\"\n    (@transformPopover.done)=\"_onAnimationDone($event)\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.aria-describedby]=\"ariaDescribedby || null\"\n    [cdkTrapFocus]=\"focusTrapEnabled\"\n    [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n  >\n    <div class=\"mtx-popover-content\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideArrow) {\n      <div class=\"mtx-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n    }\n  </div>\n</ng-template>\n", styles: [".mtx-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;border-radius:var(--mtx-popover-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--mtx-popover-background-color, var(--mat-sys-surface-container));color:var(--mtx-popover-text-color, var(--mat-sys-on-surface))}.mtx-popover-panel[class*=mtx-popover-below]{margin-top:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-above]{margin-bottom:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.mtx-popover-panel.mtx-popover-panel-without-arrow{margin:0}.mtx-popover-direction-arrow{position:absolute}.mtx-popover-direction-arrow:before,.mtx-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.mtx-popover-direction-arrow:before{border-color:var(--mtx-popover-outline-color, var(--mat-sys-surface-container))}.mtx-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--mtx-popover-background-color, var(--mat-sys-surface-container))}[class*=mtx-popover-below] .mtx-popover-direction-arrow,[class*=mtx-popover-above] .mtx-popover-direction-arrow{width:1em}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-above] .mtx-popover-direction-arrow:after{right:1px;left:auto}[class*=mtx-popover-below] .mtx-popover-direction-arrow{top:0}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow{bottom:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow,[class*=mtx-popover-after] .mtx-popover-direction-arrow{height:1em}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{top:1px}[class*=mtx-popover-before] .mtx-popover-direction-arrow{right:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=mtx-popover-after] .mtx-popover-direction-arrow{left:0}[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [transformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'mtx-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [transformPopover], exportAs: 'mtxPopover', standalone: true, imports: [CdkTrapFocus], template: "<ng-template>\n  <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n  <div\n    [id]=\"panelId\"\n    class=\"mtx-popover-panel\"\n    [class]=\"_classList\"\n    [class.mtx-popover-panel-without-arrow]=\"hideArrow\"\n    (keydown)=\"_handleKeydown($event)\"\n    (click)=\"_handleClick()\"\n    (mouseover)=\"_handleMouseOver()\"\n    (mouseleave)=\"_handleMouseLeave()\"\n    [@transformPopover]=\"_panelAnimationState\"\n    (@transformPopover.start)=\"_onAnimationStart($event)\"\n    (@transformPopover.done)=\"_onAnimationDone($event)\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.aria-describedby]=\"ariaDescribedby || null\"\n    [cdkTrapFocus]=\"focusTrapEnabled\"\n    [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\">\n    <div class=\"mtx-popover-content\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideArrow) {\n      <div class=\"mtx-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n    }\n  </div>\n</ng-template>\n", styles: [".mtx-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;border-radius:var(--mtx-popover-container-shape, var(--mat-app-corner-extra-small));background-color:var(--mtx-popover-background-color, var(--mat-app-surface-container));color:var(--mtx-popover-text-color, var(--mat-app-on-surface))}.mtx-popover-panel[class*=mtx-popover-below]{margin-top:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-above]{margin-bottom:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.mtx-popover-panel.mtx-popover-panel-without-arrow{margin:0}.mtx-popover-direction-arrow{position:absolute}.mtx-popover-direction-arrow:before,.mtx-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.mtx-popover-direction-arrow:before{border-color:var(--mtx-popover-outline-color, var(--mat-app-surface-container))}.mtx-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--mtx-popover-background-color, var(--mat-app-surface-container))}[class*=mtx-popover-below] .mtx-popover-direction-arrow,[class*=mtx-popover-above] .mtx-popover-direction-arrow{width:1em}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-above] .mtx-popover-direction-arrow:after{right:1px;left:auto}[class*=mtx-popover-below] .mtx-popover-direction-arrow{top:0}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow{bottom:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow,[class*=mtx-popover-after] .mtx-popover-direction-arrow{height:1em}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{top:1px}[class*=mtx-popover-before] .mtx-popover-direction-arrow{right:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=mtx-popover-after] .mtx-popover-direction-arrow{left:0}[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MTX_POPOVER_DEFAULT_OPTIONS]
-                }] }], propDecorators: { backdropClass: [{
+            args: [{ selector: 'mtx-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [transformPopover], exportAs: 'mtxPopover', imports: [CdkTrapFocus], template: "<ng-template>\n  <!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n  <div\n    [id]=\"panelId\"\n    class=\"mtx-popover-panel\"\n    [class]=\"_classList\"\n    [class.mtx-popover-panel-without-arrow]=\"hideArrow\"\n    (keydown)=\"_handleKeydown($event)\"\n    (click)=\"_handleClick()\"\n    (mouseover)=\"_handleMouseOver()\"\n    (mouseleave)=\"_handleMouseLeave()\"\n    [@transformPopover]=\"_panelAnimationState\"\n    (@transformPopover.start)=\"_onAnimationStart($event)\"\n    (@transformPopover.done)=\"_onAnimationDone($event)\"\n    tabindex=\"-1\"\n    role=\"dialog\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    [attr.aria-describedby]=\"ariaDescribedby || null\"\n    [cdkTrapFocus]=\"focusTrapEnabled\"\n    [cdkTrapFocusAutoCapture]=\"focusTrapAutoCaptureEnabled\"\n  >\n    <div class=\"mtx-popover-content\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideArrow) {\n      <div class=\"mtx-popover-direction-arrow\" [style]=\"arrowStyles\"></div>\n    }\n  </div>\n</ng-template>\n", styles: [".mtx-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;border-radius:var(--mtx-popover-container-shape, var(--mat-sys-corner-extra-small));background-color:var(--mtx-popover-background-color, var(--mat-sys-surface-container));color:var(--mtx-popover-text-color, var(--mat-sys-on-surface))}.mtx-popover-panel[class*=mtx-popover-below]{margin-top:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-above]{margin-bottom:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-before]{margin-right:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-before]{margin-right:auto;margin-left:calc(.5em + 2px)}.mtx-popover-panel[class*=mtx-popover-after]{margin-left:calc(.5em + 2px)}[dir=rtl] .mtx-popover-panel[class*=mtx-popover-after]{margin-left:auto;margin-right:calc(.5em + 2px)}.mtx-popover-panel.mtx-popover-panel-without-arrow{margin:0}.mtx-popover-direction-arrow{position:absolute}.mtx-popover-direction-arrow:before,.mtx-popover-direction-arrow:after{position:absolute;display:inline-block;content:\"\";border-width:.5em;border-style:solid}.mtx-popover-direction-arrow:before{border-color:var(--mtx-popover-outline-color, var(--mat-sys-surface-container))}.mtx-popover-direction-arrow:after{border-width:calc(.5em - 1px);border-color:var(--mtx-popover-background-color, var(--mat-sys-surface-container))}[class*=mtx-popover-below] .mtx-popover-direction-arrow,[class*=mtx-popover-above] .mtx-popover-direction-arrow{width:1em}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{border-left-color:transparent;border-right-color:transparent}[class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{left:1px}[dir=rtl] [class*=mtx-popover-below] .mtx-popover-direction-arrow:after,[dir=rtl] [class*=mtx-popover-above] .mtx-popover-direction-arrow:after{right:1px;left:auto}[class*=mtx-popover-below] .mtx-popover-direction-arrow{top:0}[class*=mtx-popover-below] .mtx-popover-direction-arrow:before,[class*=mtx-popover-below] .mtx-popover-direction-arrow:after{bottom:0;border-top-width:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow{bottom:0}[class*=mtx-popover-above] .mtx-popover-direction-arrow:before,[class*=mtx-popover-above] .mtx-popover-direction-arrow:after{top:0;border-bottom-width:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow,[class*=mtx-popover-after] .mtx-popover-direction-arrow{height:1em}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-top-color:transparent;border-bottom-color:transparent}[class*=mtx-popover-before] .mtx-popover-direction-arrow:after,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{top:1px}[class*=mtx-popover-before] .mtx-popover-direction-arrow{right:0}[class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow{right:auto;left:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{left:auto;right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:before{border-right-width:.5em}[dir=rtl] [class*=mtx-popover-before] .mtx-popover-direction-arrow:after{border-right-width:calc(.5em - 1px)}[class*=mtx-popover-after] .mtx-popover-direction-arrow{left:0}[class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:0;border-left-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow{left:auto;right:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before,[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{right:auto;left:0;border-right-width:0}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:before{border-left-width:.5em}[dir=rtl] [class*=mtx-popover-after] .mtx-popover-direction-arrow:after{border-left-width:calc(.5em - 1px)}\n"] }]
+        }], propDecorators: { backdropClass: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input,
@@ -489,6 +483,28 @@ const MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
  * responsible for toggling the display of the provided popover instance.
  */
 class MtxPopoverTrigger {
+    constructor() {
+        this._overlay = inject(Overlay);
+        this._elementRef = inject(ElementRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._dir = inject(Directionality, { optional: true });
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._focusMonitor = inject(FocusMonitor);
+        this._overlayRef = null;
+        this._popoverOpen = false;
+        this._halt = false;
+        this._positionSubscription = Subscription.EMPTY;
+        this._popoverCloseSubscription = Subscription.EMPTY;
+        this._closingActionsSubscription = Subscription.EMPTY;
+        this._scrollStrategy = inject(MTX_POPOVER_SCROLL_STRATEGY);
+        // Tracking input type is necessary so it's possible to only auto-focus
+        // the first item of the list when the popover is opened via the keyboard
+        this._openedBy = undefined;
+        /** Event emitted when the associated popover is opened. */
+        this.popoverOpened = new EventEmitter();
+        /** Event emitted when the associated popover is closed. */
+        this.popoverClosed = new EventEmitter();
+    }
     /** References the popover instance that the trigger is associated with. */
     get popover() {
         return this._popover;
@@ -505,28 +521,6 @@ class MtxPopoverTrigger {
             });
         }
     }
-    constructor(_overlay, _elementRef, _viewContainerRef, scrollStrategy, _dir, _changeDetectorRef, _focusMonitor) {
-        this._overlay = _overlay;
-        this._elementRef = _elementRef;
-        this._viewContainerRef = _viewContainerRef;
-        this._dir = _dir;
-        this._changeDetectorRef = _changeDetectorRef;
-        this._focusMonitor = _focusMonitor;
-        this._overlayRef = null;
-        this._popoverOpen = false;
-        this._halt = false;
-        this._positionSubscription = Subscription.EMPTY;
-        this._popoverCloseSubscription = Subscription.EMPTY;
-        this._closingActionsSubscription = Subscription.EMPTY;
-        // Tracking input type is necessary so it's possible to only auto-focus
-        // the first item of the list when the popover is opened via the keyboard
-        this._openedBy = undefined;
-        /** Event emitted when the associated popover is opened. */
-        this.popoverOpened = new EventEmitter();
-        /** Event emitted when the associated popover is closed. */
-        this.popoverClosed = new EventEmitter();
-        this._scrollStrategy = scrollStrategy;
-    }
     ngAfterContentInit() {
         this._checkPopover();
         this._setCurrentConfig();
@@ -741,7 +735,7 @@ class MtxPopoverTrigger {
             backdropClass: this.popover.backdropClass || 'cdk-overlay-transparent-backdrop',
             panelClass: this.popover.overlayPanelClass,
             scrollStrategy: this._scrollStrategy(),
-            direction: this._dir,
+            direction: this._dir || undefined,
         });
     }
     _getTargetElement() {
@@ -890,10 +884,10 @@ class MtxPopoverTrigger {
         }
         return this._portal;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverTrigger, deps: [{ token: i1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: MTX_POPOVER_SCROLL_STRATEGY }, { token: i2.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i3.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxPopoverTrigger, isStandalone: true, selector: "[mtx-popover-trigger-for], [mtxPopoverTriggerFor]", inputs: { popover: ["mtxPopoverTriggerFor", "popover"], popoverData: ["mtxPopoverTriggerData", "popoverData"], targetElement: ["mtxPopoverTargetAt", "targetElement"], triggerEvent: ["mtxPopoverTriggerOn", "triggerEvent"] }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter($event)", "mouseleave": "_handleMouseLeave($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen", "attr.aria-controls": "popoverOpen ? popover.panelId : null" } }, exportAs: ["mtxPopoverTrigger"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxPopoverTrigger, isStandalone: true, selector: "[mtx-popover-trigger-for], [mtxPopoverTriggerFor]", inputs: { popover: ["mtxPopoverTriggerFor", "popover"], popoverData: ["mtxPopoverTriggerData", "popoverData"], targetElement: ["mtxPopoverTargetAt", "targetElement"], triggerEvent: ["mtxPopoverTriggerOn", "triggerEvent"] }, outputs: { popoverOpened: "popoverOpened", popoverClosed: "popoverClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "_handleClick($event)", "mouseenter": "_handleMouseEnter($event)", "mouseleave": "_handleMouseLeave($event)", "mousedown": "_handleMousedown($event)", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-expanded": "popoverOpen", "attr.aria-controls": "popoverOpen ? popover.panelId : null" } }, exportAs: ["mtxPopoverTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtx-popover-trigger-for], [mtxPopoverTriggerFor]',
@@ -908,14 +902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '(mousedown)': '_handleMousedown($event)',
                         '(keydown)': '_handleKeydown($event)',
                     },
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MTX_POPOVER_SCROLL_STRATEGY]
-                }] }, { type: i2.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i3.FocusMonitor }], propDecorators: { popover: [{
+        }], propDecorators: { popover: [{
                 type: Input,
                 args: ['mtxPopoverTriggerFor']
             }], popoverData: [{
@@ -934,35 +922,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxPopoverTarget {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
+        this.elementRef = inject(ElementRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverTarget, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: MtxPopoverTarget, isStandalone: true, selector: "mtx-popover-target, [mtxPopoverTarget]", exportAs: ["mtxPopoverTarget"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: MtxPopoverTarget, isStandalone: true, selector: "mtx-popover-target, [mtxPopoverTarget]", exportAs: ["mtxPopoverTarget"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverTarget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverTarget, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mtx-popover-target, [mtxPopoverTarget]',
                     exportAs: 'mtxPopoverTarget',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+        }] });
 
 class MtxPopoverModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             MtxPopover,
             MtxPopoverTrigger,
             MtxPopoverTarget,
             MtxPopoverContent], exports: [MtxPopover, MtxPopoverTrigger, MtxPopoverTarget, MtxPopoverContent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverModule, providers: [MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverModule, providers: [MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
             OverlayModule,
             A11yModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPopoverModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxPopoverModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [