@ng-matero/extensions 20.3.1 → 21.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mtxAlert.mjs +8 -8
- package/fesm2022/mtxAlert.mjs.map +1 -1
- package/fesm2022/mtxButton.mjs +7 -7
- package/fesm2022/mtxButton.mjs.map +1 -1
- package/fesm2022/mtxCheckboxGroup.mjs +7 -7
- package/fesm2022/mtxCheckboxGroup.mjs.map +1 -1
- package/fesm2022/mtxColorpicker.mjs +35 -128
- package/fesm2022/mtxColorpicker.mjs.map +1 -1
- package/fesm2022/mtxColumnResize.mjs +43 -43
- package/fesm2022/mtxColumnResize.mjs.map +1 -1
- package/fesm2022/mtxCore.mjs +21 -21
- package/fesm2022/mtxCore.mjs.map +1 -1
- package/fesm2022/mtxDatetimepicker.mjs +72 -265
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2022/mtxDialog.mjs +11 -11
- package/fesm2022/mtxDialog.mjs.map +1 -1
- package/fesm2022/mtxDrawer.mjs +27 -88
- package/fesm2022/mtxDrawer.mjs.map +1 -1
- package/fesm2022/mtxGrid.mjs +75 -75
- package/fesm2022/mtxGrid.mjs.map +1 -1
- package/fesm2022/mtxLoader.mjs +7 -7
- package/fesm2022/mtxLoader.mjs.map +1 -1
- package/fesm2022/mtxPhotoviewer.mjs +7 -7
- package/fesm2022/mtxPhotoviewer.mjs.map +1 -1
- package/fesm2022/mtxPopover.mjs +93 -188
- package/fesm2022/mtxPopover.mjs.map +1 -1
- package/fesm2022/mtxProgress.mjs +8 -8
- package/fesm2022/mtxProgress.mjs.map +1 -1
- package/fesm2022/mtxSelect.mjs +53 -60
- package/fesm2022/mtxSelect.mjs.map +1 -1
- package/fesm2022/mtxSplit.mjs +10 -10
- package/fesm2022/mtxSplit.mjs.map +1 -1
- package/fesm2022/mtxTooltip.mjs +38 -127
- package/fesm2022/mtxTooltip.mjs.map +1 -1
- package/package.json +35 -35
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/{colorpicker/index.d.ts → types/mtxColorpicker.d.ts} +12 -40
- package/{datetimepicker/index.d.ts → types/mtxDatetimepicker.d.ts} +5 -33
- package/{drawer/index.d.ts → types/mtxDrawer.d.ts} +12 -13
- package/{grid/index.d.ts → types/mtxGrid.d.ts} +5 -6
- package/{popover/index.d.ts → types/mtxPopover.d.ts} +2 -38
- package/{select/index.d.ts → types/mtxSelect.d.ts} +2 -3
- package/{tooltip/index.d.ts → types/mtxTooltip.d.ts} +9 -41
- /package/{alert/index.d.ts → types/mtxAlert.d.ts} +0 -0
- /package/{button/index.d.ts → types/mtxButton.d.ts} +0 -0
- /package/{checkbox-group/index.d.ts → types/mtxCheckboxGroup.d.ts} +0 -0
- /package/{column-resize/index.d.ts → types/mtxColumnResize.d.ts} +0 -0
- /package/{core/index.d.ts → types/mtxCore.d.ts} +0 -0
- /package/{dialog/index.d.ts → types/mtxDialog.d.ts} +0 -0
- /package/{loader/index.d.ts → types/mtxLoader.d.ts} +0 -0
- /package/{photoviewer/index.d.ts → types/mtxPhotoviewer.d.ts} +0 -0
- /package/{progress/index.d.ts → types/mtxProgress.d.ts} +0 -0
- /package/{split/index.d.ts → types/mtxSplit.d.ts} +0 -0
- /package/{index.d.ts → types/ng-matero-extensions.d.ts} +0 -0
package/fesm2022/mtxLoader.mjs
CHANGED
|
@@ -26,10 +26,10 @@ class MtxLoader {
|
|
|
26
26
|
/** Whether the loader has a backdrop. */
|
|
27
27
|
this.hasBackdrop = true;
|
|
28
28
|
}
|
|
29
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
30
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
29
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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 }); }
|
|
31
31
|
}
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxLoader, decorators: [{
|
|
33
33
|
type: Component,
|
|
34
34
|
args: [{ selector: 'mtx-loader', exportAs: 'mtxLoader', host: {
|
|
35
35
|
'class': 'mtx-loader',
|
|
@@ -58,11 +58,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
58
58
|
}] } });
|
|
59
59
|
|
|
60
60
|
class MtxLoaderModule {
|
|
61
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
62
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
63
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
61
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
62
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader], exports: [MtxLoader] }); }
|
|
63
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader] }); }
|
|
64
64
|
}
|
|
65
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxLoaderModule, decorators: [{
|
|
66
66
|
type: NgModule,
|
|
67
67
|
args: [{
|
|
68
68
|
imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader],
|
|
@@ -1 +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 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":";;;;;;MA4Ba,SAAS,CAAA;AAbtB,IAAA,WAAA,GAAA;AAcU,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC;;QAG7C,
|
|
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 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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"}
|
|
@@ -39,10 +39,10 @@ class MtxPhotoviewer {
|
|
|
39
39
|
initPhotoViewer() {
|
|
40
40
|
this.photoviewerInstance = new PhotoViewer(this.images, this.options);
|
|
41
41
|
}
|
|
42
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
43
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
42
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPhotoviewer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
43
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.1", 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 }); }
|
|
44
44
|
}
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPhotoviewer, decorators: [{
|
|
46
46
|
type: Directive,
|
|
47
47
|
args: [{
|
|
48
48
|
selector: '[mtxPhotoviewer]',
|
|
@@ -63,11 +63,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
63
63
|
}] } });
|
|
64
64
|
|
|
65
65
|
class MtxPhotoviewerModule {
|
|
66
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
67
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
68
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
66
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPhotoviewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
67
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxPhotoviewerModule, imports: [MtxPhotoviewer], exports: [MtxPhotoviewer] }); }
|
|
68
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPhotoviewerModule }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPhotoviewerModule, decorators: [{
|
|
71
71
|
type: NgModule,
|
|
72
72
|
args: [{
|
|
73
73
|
imports: [MtxPhotoviewer],
|
|
@@ -1 +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 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 host: {\n '(click)': 'onClick($event)',\n },\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 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":";;;;MAkBa,cAAc,CAAA;AAP3B,IAAA,WAAA,GAAA;AAQU,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAsB,UAAU,CAAC;QAG7D,
|
|
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 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 host: {\n '(click)': 'onClick($event)',\n },\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 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
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, DOCUMENT, Inject, Directive, inject, Injector, ChangeDetectorRef, ElementRef, NgZone, EventEmitter, ANIMATION_MODULE_TYPE, TemplateRef, booleanAttribute, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewContainerRef, NgModule } from '@angular/core';
|
|
3
|
-
import { CommonModule } from '@angular/common';
|
|
4
|
-
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
5
1
|
import { CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader, A11yModule } from '@angular/cdk/a11y';
|
|
2
|
+
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import * as i0 from '@angular/core';
|
|
5
|
+
import { InjectionToken, DOCUMENT, Inject, Directive, inject, ChangeDetectorRef, ElementRef, NgZone, EventEmitter, TemplateRef, booleanAttribute, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, ViewContainerRef, NgModule } from '@angular/core';
|
|
6
6
|
import { ESCAPE, hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
|
|
7
|
+
import { _animationsDisabled } from '@angular/material/core';
|
|
7
8
|
import { Subject, Subscription, of, merge } from 'rxjs';
|
|
8
9
|
import { TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
9
10
|
import { Directionality } from '@angular/cdk/bidi';
|
|
@@ -69,10 +70,10 @@ class _MtxPopoverContentBase {
|
|
|
69
70
|
this._outlet.dispose();
|
|
70
71
|
}
|
|
71
72
|
}
|
|
72
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
73
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
73
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: _MtxPopoverContentBase, deps: [{ token: i0.TemplateRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
74
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: _MtxPopoverContentBase, isStandalone: true, ngImport: i0 }); }
|
|
74
75
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: _MtxPopoverContentBase, decorators: [{
|
|
76
77
|
type: Directive
|
|
77
78
|
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
|
78
79
|
type: Inject,
|
|
@@ -82,10 +83,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
82
83
|
* Popover content that will be rendered lazily once the popover is opened.
|
|
83
84
|
*/
|
|
84
85
|
class MtxPopoverContent extends _MtxPopoverContentBase {
|
|
85
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
86
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
86
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverContent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
87
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: MtxPopoverContent, isStandalone: true, selector: "ng-template[mtxPopoverContent]", providers: [{ provide: MTX_POPOVER_CONTENT, useExisting: MtxPopoverContent }], usesInheritance: true, ngImport: i0 }); }
|
|
87
88
|
}
|
|
88
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverContent, decorators: [{
|
|
89
90
|
type: Directive,
|
|
90
91
|
args: [{
|
|
91
92
|
selector: 'ng-template[mtxPopoverContent]',
|
|
@@ -123,77 +124,17 @@ function throwMtxPopoverInvalidPositionEnd() {
|
|
|
123
124
|
/** Injection token to be used to override the default options for `mtx-popover`. */
|
|
124
125
|
const MTX_POPOVER_DEFAULT_OPTIONS = new InjectionToken('mtx-popover-default-options', {
|
|
125
126
|
providedIn: 'root',
|
|
126
|
-
factory:
|
|
127
|
-
});
|
|
128
|
-
/**
|
|
129
|
-
* @docs-private
|
|
130
|
-
* @deprecated No longer used, will be removed.
|
|
131
|
-
* @breaking-change 21.0.0
|
|
132
|
-
*/
|
|
133
|
-
function MTX_POPOVER_DEFAULT_OPTIONS_FACTORY() {
|
|
134
|
-
return {
|
|
127
|
+
factory: () => ({
|
|
135
128
|
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
136
|
-
}
|
|
137
|
-
}
|
|
129
|
+
}),
|
|
130
|
+
});
|
|
138
131
|
let popoverPanelUid = 0;
|
|
139
132
|
/** Name of the enter animation `@keyframes`. */
|
|
140
133
|
const ENTER_ANIMATION = '_mtx-popover-enter';
|
|
141
134
|
/** Name of the exit animation `@keyframes`. */
|
|
142
135
|
const EXIT_ANIMATION = '_mtx-popover-exit';
|
|
143
136
|
class MtxPopover {
|
|
144
|
-
/** Popover's position. */
|
|
145
|
-
get position() {
|
|
146
|
-
return this._position;
|
|
147
|
-
}
|
|
148
|
-
set position(value) {
|
|
149
|
-
if (!['before', 'after', 'above', 'below'].includes(value[0])) {
|
|
150
|
-
throwMtxPopoverInvalidPositionStart();
|
|
151
|
-
}
|
|
152
|
-
if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
|
|
153
|
-
throwMtxPopoverInvalidPositionEnd();
|
|
154
|
-
}
|
|
155
|
-
this._position = value;
|
|
156
|
-
this.setPositionClasses();
|
|
157
|
-
}
|
|
158
|
-
/**
|
|
159
|
-
* This method takes classes set on the host mtx-popover element and applies them on the
|
|
160
|
-
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
161
|
-
* to style the containing popover from outside the component.
|
|
162
|
-
* @param classes list of class names
|
|
163
|
-
*/
|
|
164
|
-
set panelClass(classes) {
|
|
165
|
-
const previousPanelClass = this._previousPanelClass;
|
|
166
|
-
const newClassList = { ...this._classList };
|
|
167
|
-
if (previousPanelClass && previousPanelClass.length) {
|
|
168
|
-
previousPanelClass.split(' ').forEach((className) => {
|
|
169
|
-
newClassList[className] = false;
|
|
170
|
-
});
|
|
171
|
-
}
|
|
172
|
-
this._previousPanelClass = classes;
|
|
173
|
-
if (classes && classes.length) {
|
|
174
|
-
classes.split(' ').forEach((className) => {
|
|
175
|
-
newClassList[className] = true;
|
|
176
|
-
});
|
|
177
|
-
this._elementRef.nativeElement.className = '';
|
|
178
|
-
this.setPositionClasses();
|
|
179
|
-
}
|
|
180
|
-
this._classList = newClassList;
|
|
181
|
-
}
|
|
182
|
-
/**
|
|
183
|
-
* This method takes classes set on the host mtx-popover element and applies them on the
|
|
184
|
-
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
185
|
-
* to style the containing popover from outside the component.
|
|
186
|
-
* @deprecated Use `panelClass` instead.
|
|
187
|
-
* @breaking-change 8.0.0
|
|
188
|
-
*/
|
|
189
|
-
get classList() {
|
|
190
|
-
return this.panelClass;
|
|
191
|
-
}
|
|
192
|
-
set classList(classes) {
|
|
193
|
-
this.panelClass = classes;
|
|
194
|
-
}
|
|
195
137
|
constructor() {
|
|
196
|
-
this._injector = inject(Injector);
|
|
197
138
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
198
139
|
this._elementRef = inject(ElementRef);
|
|
199
140
|
this._unusedNgZone = inject(NgZone);
|
|
@@ -201,7 +142,7 @@ class MtxPopover {
|
|
|
201
142
|
this._elevationPrefix = 'mat-elevation-z';
|
|
202
143
|
this._baseElevation = null;
|
|
203
144
|
/** Whether animations are currently disabled. */
|
|
204
|
-
this._animationsDisabled =
|
|
145
|
+
this._animationsDisabled = _animationsDisabled();
|
|
205
146
|
/** Config object to be passed into the popover's class. */
|
|
206
147
|
this._classList = {};
|
|
207
148
|
/** Current state of the panel animation. */
|
|
@@ -250,8 +191,57 @@ class MtxPopover {
|
|
|
250
191
|
/** Event emitted when the popover is closed. */
|
|
251
192
|
this.closed = new EventEmitter();
|
|
252
193
|
this.panelId = `mtx-popover-panel-${popoverPanelUid++}`;
|
|
253
|
-
|
|
254
|
-
|
|
194
|
+
}
|
|
195
|
+
/** Popover's position. */
|
|
196
|
+
get position() {
|
|
197
|
+
return this._position;
|
|
198
|
+
}
|
|
199
|
+
set position(value) {
|
|
200
|
+
if (!['before', 'after', 'above', 'below'].includes(value[0])) {
|
|
201
|
+
throwMtxPopoverInvalidPositionStart();
|
|
202
|
+
}
|
|
203
|
+
if (!['before', 'after', 'above', 'below', 'center'].includes(value[1])) {
|
|
204
|
+
throwMtxPopoverInvalidPositionEnd();
|
|
205
|
+
}
|
|
206
|
+
this._position = value;
|
|
207
|
+
this.setPositionClasses();
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* This method takes classes set on the host mtx-popover element and applies them on the
|
|
211
|
+
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
212
|
+
* to style the containing popover from outside the component.
|
|
213
|
+
* @param classes list of class names
|
|
214
|
+
*/
|
|
215
|
+
set panelClass(classes) {
|
|
216
|
+
const previousPanelClass = this._previousPanelClass;
|
|
217
|
+
const newClassList = { ...this._classList };
|
|
218
|
+
if (previousPanelClass && previousPanelClass.length) {
|
|
219
|
+
previousPanelClass.split(' ').forEach((className) => {
|
|
220
|
+
newClassList[className] = false;
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
this._previousPanelClass = classes;
|
|
224
|
+
if (classes && classes.length) {
|
|
225
|
+
classes.split(' ').forEach((className) => {
|
|
226
|
+
newClassList[className] = true;
|
|
227
|
+
});
|
|
228
|
+
this._elementRef.nativeElement.className = '';
|
|
229
|
+
this.setPositionClasses();
|
|
230
|
+
}
|
|
231
|
+
this._classList = newClassList;
|
|
232
|
+
}
|
|
233
|
+
/**
|
|
234
|
+
* This method takes classes set on the host mtx-popover element and applies them on the
|
|
235
|
+
* popover template that displays in the overlay container. Otherwise, it's difficult
|
|
236
|
+
* to style the containing popover from outside the component.
|
|
237
|
+
* @deprecated Use `panelClass` instead.
|
|
238
|
+
* @breaking-change 8.0.0
|
|
239
|
+
*/
|
|
240
|
+
get classList() {
|
|
241
|
+
return this.panelClass;
|
|
242
|
+
}
|
|
243
|
+
set classList(classes) {
|
|
244
|
+
this.panelClass = classes;
|
|
255
245
|
}
|
|
256
246
|
ngOnInit() {
|
|
257
247
|
this.setPositionClasses();
|
|
@@ -401,13 +391,13 @@ class MtxPopover {
|
|
|
401
391
|
}
|
|
402
392
|
this._changeDetectorRef.markForCheck();
|
|
403
393
|
}
|
|
404
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
405
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
394
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
395
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", 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-animations-disabled]=\"_animationsDisabled\"\n [class.mtx-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.mtx-popover-panel-animating]=\"_isAnimating\"\n [class.mtx-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\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: ["@keyframes _mtx-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _mtx-popover-exit{0%{opacity:1}to{opacity:0}}.mtx-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_mtx-popover-enter .12s cubic-bezier(0,0,.2,1);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.mtx-popover-panel-exit-animation{animation:_mtx-popover-exit .1s 25ms linear forwards}.mtx-popover-panel.mtx-popover-panel-animations-disabled{animation:none}.mtx-popover-panel.mtx-popover-panel-animating{pointer-events:none}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
406
396
|
}
|
|
407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopover, decorators: [{
|
|
408
398
|
type: Component,
|
|
409
399
|
args: [{ selector: 'mtx-popover', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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-animations-disabled]=\"_animationsDisabled\"\n [class.mtx-popover-panel-exit-animation]=\"_panelAnimationState === 'void'\"\n [class.mtx-popover-panel-animating]=\"_isAnimating\"\n [class.mtx-popover-panel-without-arrow]=\"hideArrow\"\n (keydown)=\"_handleKeydown($event)\"\n (click)=\"_handleClick()\"\n (mouseover)=\"_handleMouseOver()\"\n (mouseleave)=\"_handleMouseLeave()\"\n tabindex=\"-1\"\n role=\"dialog\"\n (animationstart)=\"_onAnimationStart($event.animationName)\"\n (animationend)=\"_onAnimationDone($event.animationName)\"\n (animationcancel)=\"_onAnimationDone($event.animationName)\"\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: ["@keyframes _mtx-popover-enter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}@keyframes _mtx-popover-exit{0%{opacity:1}to{opacity:0}}.mtx-popover-panel{position:relative;max-height:calc(100vh - 48px);padding:8px;font-size:inherit;outline:0;animation:_mtx-popover-enter .12s cubic-bezier(0,0,.2,1);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.mtx-popover-panel-exit-animation{animation:_mtx-popover-exit .1s 25ms linear forwards}.mtx-popover-panel.mtx-popover-panel-animations-disabled{animation:none}.mtx-popover-panel.mtx-popover-panel-animating{pointer-events:none}.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"] }]
|
|
410
|
-
}],
|
|
400
|
+
}], propDecorators: { backdropClass: [{
|
|
411
401
|
type: Input
|
|
412
402
|
}], ariaLabel: [{
|
|
413
403
|
type: Input,
|
|
@@ -471,6 +461,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
471
461
|
args: [MTX_POPOVER_CONTENT]
|
|
472
462
|
}] } });
|
|
473
463
|
|
|
464
|
+
class MtxPopoverTarget {
|
|
465
|
+
constructor() {
|
|
466
|
+
this.elementRef = inject(ElementRef);
|
|
467
|
+
}
|
|
468
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
469
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: MtxPopoverTarget, isStandalone: true, selector: "mtx-popover-target, [mtxPopoverTarget]", exportAs: ["mtxPopoverTarget"], ngImport: i0 }); }
|
|
470
|
+
}
|
|
471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverTarget, decorators: [{
|
|
472
|
+
type: Directive,
|
|
473
|
+
args: [{
|
|
474
|
+
selector: 'mtx-popover-target, [mtxPopoverTarget]',
|
|
475
|
+
exportAs: 'mtxPopoverTarget',
|
|
476
|
+
}]
|
|
477
|
+
}] });
|
|
478
|
+
|
|
474
479
|
/** Injection token that determines the scroll handling while the popover is open. */
|
|
475
480
|
const MTX_POPOVER_SCROLL_STRATEGY = new InjectionToken('mtx-popover-scroll-strategy', {
|
|
476
481
|
providedIn: 'root',
|
|
@@ -479,24 +484,6 @@ const MTX_POPOVER_SCROLL_STRATEGY = new InjectionToken('mtx-popover-scroll-strat
|
|
|
479
484
|
return () => overlay.scrollStrategies.reposition();
|
|
480
485
|
},
|
|
481
486
|
});
|
|
482
|
-
/**
|
|
483
|
-
* @docs-private
|
|
484
|
-
* @deprecated No longer used, will be removed.
|
|
485
|
-
* @breaking-change 21.0.0
|
|
486
|
-
*/
|
|
487
|
-
function MTX_POPOVER_SCROLL_STRATEGY_FACTORY(overlay) {
|
|
488
|
-
return () => overlay.scrollStrategies.reposition();
|
|
489
|
-
}
|
|
490
|
-
/**
|
|
491
|
-
* @docs-private
|
|
492
|
-
* @deprecated No longer used, will be removed.
|
|
493
|
-
* @breaking-change 21.0.0
|
|
494
|
-
*/
|
|
495
|
-
const MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
|
|
496
|
-
provide: MTX_POPOVER_SCROLL_STRATEGY,
|
|
497
|
-
deps: [Overlay],
|
|
498
|
-
useFactory: MTX_POPOVER_SCROLL_STRATEGY_FACTORY,
|
|
499
|
-
};
|
|
500
487
|
/**
|
|
501
488
|
* This directive is intended to be used in conjunction with an `mtx-popover` tag. It is
|
|
502
489
|
* responsible for toggling the display of the provided popover instance.
|
|
@@ -899,10 +886,10 @@ class MtxPopoverTrigger {
|
|
|
899
886
|
}
|
|
900
887
|
return this._portal;
|
|
901
888
|
}
|
|
902
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
903
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
889
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
890
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", 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 }); }
|
|
904
891
|
}
|
|
905
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverTrigger, decorators: [{
|
|
906
893
|
type: Directive,
|
|
907
894
|
args: [{
|
|
908
895
|
selector: '[mtx-popover-trigger-for], [mtxPopoverTriggerFor]',
|
|
@@ -936,35 +923,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
936
923
|
type: Output
|
|
937
924
|
}] } });
|
|
938
925
|
|
|
939
|
-
class MtxPopoverTarget {
|
|
940
|
-
constructor() {
|
|
941
|
-
this.elementRef = inject(ElementRef);
|
|
942
|
-
}
|
|
943
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
944
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MtxPopoverTarget, isStandalone: true, selector: "mtx-popover-target, [mtxPopoverTarget]", exportAs: ["mtxPopoverTarget"], ngImport: i0 }); }
|
|
945
|
-
}
|
|
946
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MtxPopoverTarget, decorators: [{
|
|
947
|
-
type: Directive,
|
|
948
|
-
args: [{
|
|
949
|
-
selector: 'mtx-popover-target, [mtxPopoverTarget]',
|
|
950
|
-
exportAs: 'mtxPopoverTarget',
|
|
951
|
-
}]
|
|
952
|
-
}] });
|
|
953
|
-
|
|
954
926
|
class MtxPopoverModule {
|
|
955
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
956
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
927
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
928
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverModule, imports: [CommonModule,
|
|
957
929
|
OverlayModule,
|
|
958
930
|
A11yModule,
|
|
959
931
|
MtxPopover,
|
|
960
932
|
MtxPopoverTrigger,
|
|
961
933
|
MtxPopoverTarget,
|
|
962
934
|
MtxPopoverContent], exports: [MtxPopover, MtxPopoverTrigger, MtxPopoverTarget, MtxPopoverContent] }); }
|
|
963
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
935
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverModule, imports: [CommonModule,
|
|
964
936
|
OverlayModule,
|
|
965
937
|
A11yModule] }); }
|
|
966
938
|
}
|
|
967
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
939
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxPopoverModule, decorators: [{
|
|
968
940
|
type: NgModule,
|
|
969
941
|
args: [{
|
|
970
942
|
imports: [
|
|
@@ -977,79 +949,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
977
949
|
MtxPopoverContent,
|
|
978
950
|
],
|
|
979
951
|
exports: [MtxPopover, MtxPopoverTrigger, MtxPopoverTarget, MtxPopoverContent],
|
|
980
|
-
providers: [MTX_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER],
|
|
981
952
|
}]
|
|
982
953
|
}] });
|
|
983
954
|
|
|
984
|
-
/**
|
|
985
|
-
* Animations used by the mtx-popover component.
|
|
986
|
-
* Animation duration and timing values are based on:
|
|
987
|
-
* https://material.io/guidelines/components/menus.html#menus-usage
|
|
988
|
-
* @docs-private
|
|
989
|
-
* @deprecated No longer used, will be removed.
|
|
990
|
-
* @breaking-change 21.0.0
|
|
991
|
-
*/
|
|
992
|
-
const mtxPopoverAnimations = {
|
|
993
|
-
// Represents:
|
|
994
|
-
// transformPopover: trigger('transformPopover', [
|
|
995
|
-
// state(
|
|
996
|
-
// 'void',
|
|
997
|
-
// style({
|
|
998
|
-
// opacity: 0,
|
|
999
|
-
// transform: 'scale(0.8)',
|
|
1000
|
-
// })
|
|
1001
|
-
// ),
|
|
1002
|
-
// transition(
|
|
1003
|
-
// 'void => enter',
|
|
1004
|
-
// animate(
|
|
1005
|
-
// '120ms cubic-bezier(0, 0, 0.2, 1)',
|
|
1006
|
-
// style({
|
|
1007
|
-
// opacity: 1,
|
|
1008
|
-
// transform: 'scale(1)',
|
|
1009
|
-
// })
|
|
1010
|
-
// )
|
|
1011
|
-
// ),
|
|
1012
|
-
// transition('* => void', animate('100ms 25ms linear', style({ opacity: 0 }))),
|
|
1013
|
-
// ]),
|
|
1014
|
-
/** Controls the animation of a popover component's transformation. */
|
|
1015
|
-
transformPopover: {
|
|
1016
|
-
type: 7,
|
|
1017
|
-
name: 'transformPopover',
|
|
1018
|
-
definitions: [
|
|
1019
|
-
{
|
|
1020
|
-
type: 0,
|
|
1021
|
-
name: 'void',
|
|
1022
|
-
styles: { type: 6, styles: { opacity: 0, transform: 'scale(0.8)' }, offset: null },
|
|
1023
|
-
options: null,
|
|
1024
|
-
},
|
|
1025
|
-
{
|
|
1026
|
-
type: 1,
|
|
1027
|
-
expr: 'void => enter',
|
|
1028
|
-
animation: {
|
|
1029
|
-
type: 4,
|
|
1030
|
-
styles: { type: 6, styles: { opacity: 1, transform: 'scale(1)' }, offset: null },
|
|
1031
|
-
timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
|
|
1032
|
-
},
|
|
1033
|
-
options: null,
|
|
1034
|
-
},
|
|
1035
|
-
{
|
|
1036
|
-
type: 1,
|
|
1037
|
-
expr: '* => void',
|
|
1038
|
-
animation: {
|
|
1039
|
-
type: 4,
|
|
1040
|
-
styles: { type: 6, styles: { opacity: 0 }, offset: null },
|
|
1041
|
-
timings: '100ms 25ms linear',
|
|
1042
|
-
},
|
|
1043
|
-
options: null,
|
|
1044
|
-
},
|
|
1045
|
-
],
|
|
1046
|
-
options: {},
|
|
1047
|
-
},
|
|
1048
|
-
};
|
|
1049
|
-
|
|
1050
955
|
/**
|
|
1051
956
|
* Generated bundle index. Do not edit.
|
|
1052
957
|
*/
|
|
1053
958
|
|
|
1054
|
-
export { MTX_POPOVER_CONTENT, MTX_POPOVER_DEFAULT_OPTIONS,
|
|
959
|
+
export { MTX_POPOVER_CONTENT, MTX_POPOVER_DEFAULT_OPTIONS, MTX_POPOVER_SCROLL_STRATEGY, MtxPopover, MtxPopoverContent, MtxPopoverModule, MtxPopoverTarget, MtxPopoverTrigger, _MtxPopoverContentBase };
|
|
1055
960
|
//# sourceMappingURL=mtxPopover.mjs.map
|