@ng-matero/extensions 21.3.0 → 22.0.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 +7 -7
- package/fesm2022/mtxButton.mjs +10 -10
- package/fesm2022/mtxButton.mjs.map +1 -1
- package/fesm2022/mtxCheckboxGroup.mjs +35 -9
- package/fesm2022/mtxCheckboxGroup.mjs.map +1 -1
- package/fesm2022/mtxColorpicker.mjs +21 -21
- package/fesm2022/mtxColorpicker.mjs.map +1 -1
- package/fesm2022/mtxColumnResize.mjs +43 -43
- package/fesm2022/mtxCore.mjs +22 -22
- package/fesm2022/mtxCore.mjs.map +1 -1
- package/fesm2022/mtxDatetimepicker.mjs +64 -63
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2022/mtxDialog.mjs +10 -10
- package/fesm2022/mtxDrawer.mjs +11 -11
- package/fesm2022/mtxDrawer.mjs.map +1 -1
- package/fesm2022/mtxGrid.mjs +72 -72
- package/fesm2022/mtxGrid.mjs.map +1 -1
- package/fesm2022/mtxLoader.mjs +7 -7
- package/fesm2022/mtxPhotoviewer.mjs +7 -7
- package/fesm2022/mtxPopover.mjs +29 -35
- package/fesm2022/mtxPopover.mjs.map +1 -1
- package/fesm2022/mtxProgress.mjs +7 -7
- package/fesm2022/mtxSelect.mjs +95 -91
- package/fesm2022/mtxSelect.mjs.map +1 -1
- package/fesm2022/mtxSplit.mjs +10 -10
- package/fesm2022/mtxTooltip.mjs +10 -10
- package/package.json +9 -7
- package/select/select.scss +131 -150
- package/types/mtxCheckboxGroup.d.ts +5 -0
- package/types/mtxColorpicker.d.ts +1 -1
- package/types/mtxDatetimepicker.d.ts +1 -1
- package/types/mtxGrid.d.ts +1 -1
- package/types/mtxPopover.d.ts +2 -3
- package/types/mtxSelect.d.ts +32 -29
- package/types/mtxSplit.d.ts +1 -1
- package/types/mtxTooltip.d.ts +2 -2
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: "22.0.3", ngImport: i0, type: MtxLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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: "22.0.3", 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: "21.2.5", 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: "22.0.3", ngImport: i0, type: MtxLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
62
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: MtxLoaderModule, imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader], exports: [MtxLoader] }); }
|
|
63
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", 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: "22.0.3", ngImport: i0, type: MtxLoaderModule, decorators: [{
|
|
66
66
|
type: NgModule,
|
|
67
67
|
args: [{
|
|
68
68
|
imports: [CommonModule, MatProgressSpinnerModule, MatProgressBarModule, MtxLoader],
|
|
@@ -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: "22.0.3", ngImport: i0, type: MtxPhotoviewer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
43
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.0.3", 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: "22.0.3", 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: "21.2.5", 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: "22.0.3", ngImport: i0, type: MtxPhotoviewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
67
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: MtxPhotoviewerModule, imports: [MtxPhotoviewer], exports: [MtxPhotoviewer] }); }
|
|
68
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPhotoviewerModule }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPhotoviewerModule, decorators: [{
|
|
71
71
|
type: NgModule,
|
|
72
72
|
args: [{
|
|
73
73
|
imports: [MtxPhotoviewer],
|
package/fesm2022/mtxPopover.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader, A11yModule
|
|
|
2
2
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { InjectionToken,
|
|
5
|
+
import { InjectionToken, inject, TemplateRef, ApplicationRef, Injector, ViewContainerRef, DOCUMENT, ChangeDetectorRef, Directive, ElementRef, NgZone, EventEmitter, booleanAttribute, ContentChild, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
6
6
|
import { ESCAPE, hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
|
|
7
7
|
import { _animationsDisabled } from '@angular/material/core';
|
|
8
8
|
import { Subject, Subscription, of, merge } from 'rxjs';
|
|
@@ -17,13 +17,13 @@ import { filter, take } from 'rxjs/operators';
|
|
|
17
17
|
*/
|
|
18
18
|
const MTX_POPOVER_CONTENT = new InjectionToken('MtxPopoverContent');
|
|
19
19
|
class _MtxPopoverContentBase {
|
|
20
|
-
constructor(
|
|
21
|
-
this._template =
|
|
22
|
-
this._appRef =
|
|
23
|
-
this._injector =
|
|
24
|
-
this._viewContainerRef =
|
|
25
|
-
this._document =
|
|
26
|
-
this._changeDetectorRef =
|
|
20
|
+
constructor() {
|
|
21
|
+
this._template = inject(TemplateRef);
|
|
22
|
+
this._appRef = inject(ApplicationRef);
|
|
23
|
+
this._injector = inject(Injector);
|
|
24
|
+
this._viewContainerRef = inject(ViewContainerRef);
|
|
25
|
+
this._document = inject(DOCUMENT);
|
|
26
|
+
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
27
27
|
/** Emits when the popover content has been attached. */
|
|
28
28
|
this._attached = new Subject();
|
|
29
29
|
}
|
|
@@ -49,10 +49,7 @@ class _MtxPopoverContentBase {
|
|
|
49
49
|
// by Angular. This causes the `@ContentChildren` for popover items within the popover to
|
|
50
50
|
// not be updated by Angular. By explicitly marking for check here, we tell Angular that
|
|
51
51
|
// it needs to check for new popover items and update the `@ContentChild` in `MtxPopover`.
|
|
52
|
-
|
|
53
|
-
if (this._changeDetectorRef) {
|
|
54
|
-
this._changeDetectorRef.markForCheck();
|
|
55
|
-
}
|
|
52
|
+
this._changeDetectorRef.markForCheck();
|
|
56
53
|
this._portal.attach(this._outlet, context);
|
|
57
54
|
this._attached.next();
|
|
58
55
|
}
|
|
@@ -70,23 +67,20 @@ class _MtxPopoverContentBase {
|
|
|
70
67
|
this._outlet.dispose();
|
|
71
68
|
}
|
|
72
69
|
}
|
|
73
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
74
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
70
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: _MtxPopoverContentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
71
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: _MtxPopoverContentBase, isStandalone: true, ngImport: i0 }); }
|
|
75
72
|
}
|
|
76
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: _MtxPopoverContentBase, decorators: [{
|
|
77
74
|
type: Directive
|
|
78
|
-
}]
|
|
79
|
-
type: Inject,
|
|
80
|
-
args: [DOCUMENT]
|
|
81
|
-
}] }, { type: i0.ChangeDetectorRef }] });
|
|
75
|
+
}] });
|
|
82
76
|
/**
|
|
83
77
|
* Popover content that will be rendered lazily once the popover is opened.
|
|
84
78
|
*/
|
|
85
79
|
class MtxPopoverContent extends _MtxPopoverContentBase {
|
|
86
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
87
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
80
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverContent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
81
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxPopoverContent, isStandalone: true, selector: "ng-template[mtxPopoverContent]", providers: [{ provide: MTX_POPOVER_CONTENT, useExisting: MtxPopoverContent }], usesInheritance: true, ngImport: i0 }); }
|
|
88
82
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverContent, decorators: [{
|
|
90
84
|
type: Directive,
|
|
91
85
|
args: [{
|
|
92
86
|
selector: 'ng-template[mtxPopoverContent]',
|
|
@@ -391,10 +385,10 @@ class MtxPopover {
|
|
|
391
385
|
}
|
|
392
386
|
this._changeDetectorRef.markForCheck();
|
|
393
387
|
}
|
|
394
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
395
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
388
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
389
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", 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 }); }
|
|
396
390
|
}
|
|
397
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopover, decorators: [{
|
|
398
392
|
type: Component,
|
|
399
393
|
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"] }]
|
|
400
394
|
}], propDecorators: { backdropClass: [{
|
|
@@ -465,10 +459,10 @@ class MtxPopoverTarget {
|
|
|
465
459
|
constructor() {
|
|
466
460
|
this.elementRef = inject(ElementRef);
|
|
467
461
|
}
|
|
468
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
469
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
462
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverTarget, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
463
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: MtxPopoverTarget, isStandalone: true, selector: "mtx-popover-target, [mtxPopoverTarget]", exportAs: ["mtxPopoverTarget"], ngImport: i0 }); }
|
|
470
464
|
}
|
|
471
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverTarget, decorators: [{
|
|
472
466
|
type: Directive,
|
|
473
467
|
args: [{
|
|
474
468
|
selector: 'mtx-popover-target, [mtxPopoverTarget]',
|
|
@@ -886,10 +880,10 @@ class MtxPopoverTrigger {
|
|
|
886
880
|
}
|
|
887
881
|
return this._portal;
|
|
888
882
|
}
|
|
889
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
890
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
883
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
884
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", 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 }); }
|
|
891
885
|
}
|
|
892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverTrigger, decorators: [{
|
|
893
887
|
type: Directive,
|
|
894
888
|
args: [{
|
|
895
889
|
selector: '[mtx-popover-trigger-for], [mtxPopoverTriggerFor]',
|
|
@@ -924,19 +918,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
|
|
|
924
918
|
}] } });
|
|
925
919
|
|
|
926
920
|
class MtxPopoverModule {
|
|
927
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
928
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
921
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
922
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverModule, imports: [CommonModule,
|
|
929
923
|
OverlayModule,
|
|
930
924
|
A11yModule,
|
|
931
925
|
MtxPopover,
|
|
932
926
|
MtxPopoverTrigger,
|
|
933
927
|
MtxPopoverTarget,
|
|
934
928
|
MtxPopoverContent], exports: [MtxPopover, MtxPopoverTrigger, MtxPopoverTarget, MtxPopoverContent] }); }
|
|
935
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
929
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverModule, imports: [CommonModule,
|
|
936
930
|
OverlayModule,
|
|
937
931
|
A11yModule] }); }
|
|
938
932
|
}
|
|
939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: MtxPopoverModule, decorators: [{
|
|
940
934
|
type: NgModule,
|
|
941
935
|
args: [{
|
|
942
936
|
imports: [
|