@ng-matero/extensions 20.3.0 → 21.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 +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 +27 -101
- 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 +76 -267
- 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 +39 -39
- 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} +3 -29
- package/{datetimepicker/index.d.ts → types/mtxDatetimepicker.d.ts} +6 -34
- 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/mtxAlert.mjs
CHANGED
|
@@ -22,16 +22,16 @@ class MtxAlert {
|
|
|
22
22
|
this._changeDetectorRef.markForCheck();
|
|
23
23
|
this.closed.emit(this);
|
|
24
24
|
}
|
|
25
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
26
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
25
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxAlert, isStandalone: true, selector: "mtx-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClassList", "class.mtx-alert-dismissible": "dismissible" } }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n </button>\n </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-sys-surface-container));color:var(--mtx-alert-text-color, var(--mat-sys-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color, light-dark(#abc7ff, #005cbb));background-color:var(--mtx-alert-info-background-color, light-dark(#d7e3ff, #002f65));color:var(--mtx-alert-info-text-color, light-dark(#002f65, #d7e3ff))}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color, light-dark(#02e600, #026e00));background-color:var(--mtx-alert-success-background-color, light-dark(#cbffb8, #013a00));color:var(--mtx-alert-success-text-color, light-dark(#013a00, #cbffb8))}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color, light-dark(#cdcd00, #626200));background-color:var(--mtx-alert-warning-background-color, light-dark(#fffeac, #323200));color:var(--mtx-alert-warning-text-color, light-dark(#323200, #fffeac))}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color, light-dark(#ffb4a8, #c00100));background-color:var(--mtx-alert-danger-background-color, light-dark(#ffdad4, #690100));color:var(--mtx-alert-danger-text-color, light-dark(#690100, #ffdad4))}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxAlert, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
|
|
31
31
|
'[class]': 'hostClassList',
|
|
32
32
|
'[class.mtx-alert-dismissible]': 'dismissible',
|
|
33
33
|
'role': 'alert',
|
|
34
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button
|
|
34
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n </button>\n </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-sys-surface-container));color:var(--mtx-alert-text-color, var(--mat-sys-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color, light-dark(#abc7ff, #005cbb));background-color:var(--mtx-alert-info-background-color, light-dark(#d7e3ff, #002f65));color:var(--mtx-alert-info-text-color, light-dark(#002f65, #d7e3ff))}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color, light-dark(#02e600, #026e00));background-color:var(--mtx-alert-success-background-color, light-dark(#cbffb8, #013a00));color:var(--mtx-alert-success-text-color, light-dark(#013a00, #cbffb8))}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color, light-dark(#cdcd00, #626200));background-color:var(--mtx-alert-warning-background-color, light-dark(#fffeac, #323200));color:var(--mtx-alert-warning-text-color, light-dark(#323200, #fffeac))}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color, light-dark(#ffb4a8, #c00100));background-color:var(--mtx-alert-danger-background-color, light-dark(#ffdad4, #690100));color:var(--mtx-alert-danger-text-color, light-dark(#690100, #ffdad4))}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"] }]
|
|
35
35
|
}], propDecorators: { type: [{
|
|
36
36
|
type: Input
|
|
37
37
|
}], dismissible: [{
|
|
@@ -44,11 +44,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
44
44
|
}] } });
|
|
45
45
|
|
|
46
46
|
class MtxAlertModule {
|
|
47
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
49
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
47
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
48
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
|
|
49
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert] }); }
|
|
50
50
|
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxAlertModule, decorators: [{
|
|
52
52
|
type: NgModule,
|
|
53
53
|
args: [{
|
|
54
54
|
imports: [CommonModule, MtxAlert],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mtxAlert.mjs","sources":["../../../projects/extensions/alert/alert.ts","../../../projects/extensions/alert/alert.html","../../../projects/extensions/alert/alert-module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n selector: 'mtx-alert',\n exportAs: 'mtxAlert',\n host: {\n '[class]': 'hostClassList',\n '[class.mtx-alert-dismissible]': 'dismissible',\n 'role': 'alert',\n },\n templateUrl: './alert.html',\n styleUrl: './alert.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatIconButton],\n})\nexport class MtxAlert {\n private _changeDetectorRef = inject(ChangeDetectorRef);\n\n get hostClassList() {\n return `mtx-alert mtx-alert-${this.type} mat-elevation-z${this.elevation}`;\n }\n\n /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */\n @Input() type: MtxAlertType = 'default';\n\n /** Whether to display an inline close button. */\n @Input({ transform: booleanAttribute }) dismissible = false;\n\n /** The alert's elevation (0~24). */\n @Input() elevation = 0;\n\n /** Event emitted when the alert closed. */\n @Output() closed = new EventEmitter<MtxAlert>();\n\n _onClosed(): void {\n this._changeDetectorRef.markForCheck();\n this.closed.emit(this);\n }\n}\n","<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button
|
|
1
|
+
{"version":3,"file":"mtxAlert.mjs","sources":["../../../projects/extensions/alert/alert.ts","../../../projects/extensions/alert/alert.html","../../../projects/extensions/alert/alert-module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n selector: 'mtx-alert',\n exportAs: 'mtxAlert',\n host: {\n '[class]': 'hostClassList',\n '[class.mtx-alert-dismissible]': 'dismissible',\n 'role': 'alert',\n },\n templateUrl: './alert.html',\n styleUrl: './alert.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [MatIconButton],\n})\nexport class MtxAlert {\n private _changeDetectorRef = inject(ChangeDetectorRef);\n\n get hostClassList() {\n return `mtx-alert mtx-alert-${this.type} mat-elevation-z${this.elevation}`;\n }\n\n /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */\n @Input() type: MtxAlertType = 'default';\n\n /** Whether to display an inline close button. */\n @Input({ transform: booleanAttribute }) dismissible = false;\n\n /** The alert's elevation (0~24). */\n @Input() elevation = 0;\n\n /** Event emitted when the alert closed. */\n @Output() closed = new EventEmitter<MtxAlert>();\n\n _onClosed(): void {\n this._changeDetectorRef.markForCheck();\n this.closed.emit(this);\n }\n}\n","<ng-content></ng-content>\n@if (dismissible) {\n <div class=\"mtx-alert-close\">\n <button matIconButton type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n <path\n d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n />\n </svg>\n </button>\n </div>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlert } from './alert';\n\n@NgModule({\n imports: [CommonModule, MtxAlert],\n exports: [MtxAlert],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/fesm2022/mtxButton.mjs
CHANGED
|
@@ -53,10 +53,10 @@ class MatButtonLoading {
|
|
|
53
53
|
this.spinner = null;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
57
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
56
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MatButtonLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
57
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.1", type: MatButtonLoading, isStandalone: true, selector: "[mat-button][loading], [matButton][loading],\n [mat-raised-button][loading],\n [mat-stroked-button][loading],\n [mat-flat-button][loading],\n [mat-icon-button][loading], [matIconButton][loading],\n [mat-fab][loading], [matFab][loading],\n [mat-mini-fab][loading], [matMiniFab][loading]", inputs: { loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], color: "color" }, usesOnChanges: true, ngImport: i0 }); }
|
|
58
58
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MatButtonLoading, decorators: [{
|
|
60
60
|
type: Directive,
|
|
61
61
|
args: [{
|
|
62
62
|
selector: `[mat-button][loading], [matButton][loading],
|
|
@@ -78,11 +78,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
78
78
|
}] } });
|
|
79
79
|
|
|
80
80
|
class MtxButtonModule {
|
|
81
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
82
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
83
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
81
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
82
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
|
|
83
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
|
|
84
84
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxButtonModule, decorators: [{
|
|
86
86
|
type: NgModule,
|
|
87
87
|
args: [{
|
|
88
88
|
imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mtxButton.mjs","sources":["../../../projects/extensions/button/button-loading.ts","../../../projects/extensions/button/button-module.ts","../../../projects/extensions/button/mtxButton.ts"],"sourcesContent":["import {\n ComponentRef,\n Directive,\n ElementRef,\n Input,\n OnChanges,\n Renderer2,\n SimpleChanges,\n ViewContainerRef,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\n\n@Directive({\n selector: `[mat-button][loading], [matButton][loading],\n [mat-raised-button][loading],\n [mat-stroked-button][loading],\n [mat-flat-button][loading],\n [mat-icon-button][loading], [matIconButton][loading],\n [mat-fab][loading], [matFab][loading],\n [mat-mini-fab][loading], [matMiniFab][loading]`,\n})\nexport class MatButtonLoading implements OnChanges {\n private _elementRef = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n private _viewContainerRef = inject(ViewContainerRef);\n private _renderer = inject(Renderer2);\n\n private spinner: ComponentRef<MatProgressSpinner> | null = null;\n\n @Input({ transform: booleanAttribute }) loading = false;\n\n @Input({ transform: booleanAttribute }) disabled = false;\n\n @Input() color: ThemePalette;\n\n ngOnChanges(changes: SimpleChanges): void {\n if (!changes.loading) {\n return;\n }\n\n if (changes.loading.currentValue) {\n this._elementRef.nativeElement.classList.add('mat-button-loading');\n\n if (!this.disabled) {\n setTimeout(() => {\n this._elementRef.nativeElement.classList.add('mat-mdc-button-disabled');\n this._elementRef.nativeElement.setAttribute('disabled', 'true');\n });\n }\n\n this.createSpinner();\n } else if (!changes.loading.firstChange) {\n this._elementRef.nativeElement.classList.remove('mat-button-loading');\n\n if (!this.disabled) {\n setTimeout(() => {\n this._elementRef.nativeElement.classList.remove('mat-mdc-button-disabled');\n this._elementRef.nativeElement.removeAttribute('disabled');\n });\n }\n\n this.destroySpinner();\n }\n }\n\n private createSpinner(): void {\n if (!this.spinner) {\n this.spinner = this._viewContainerRef.createComponent(MatProgressSpinner);\n this.spinner.instance.color = this.color;\n this.spinner.instance.diameter = 24;\n this.spinner.instance.mode = 'indeterminate';\n this._renderer.appendChild(\n this._elementRef.nativeElement,\n this.spinner.instance._elementRef.nativeElement\n );\n }\n }\n\n private destroySpinner(): void {\n if (this.spinner) {\n this.spinner.destroy();\n this.spinner = null;\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonLoading } from './button-loading';\n\n@NgModule({\n imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],\n exports: [MatButtonLoading],\n})\nexport class MtxButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAwBa,gBAAgB,CAAA;AAT7B,IAAA,WAAA,GAAA;AAUU,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAgC,UAAU,CAAC;AAC/D,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC5C,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAE7B,
|
|
1
|
+
{"version":3,"file":"mtxButton.mjs","sources":["../../../projects/extensions/button/button-loading.ts","../../../projects/extensions/button/button-module.ts","../../../projects/extensions/button/mtxButton.ts"],"sourcesContent":["import {\n ComponentRef,\n Directive,\n ElementRef,\n Input,\n OnChanges,\n Renderer2,\n SimpleChanges,\n ViewContainerRef,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\n\n@Directive({\n selector: `[mat-button][loading], [matButton][loading],\n [mat-raised-button][loading],\n [mat-stroked-button][loading],\n [mat-flat-button][loading],\n [mat-icon-button][loading], [matIconButton][loading],\n [mat-fab][loading], [matFab][loading],\n [mat-mini-fab][loading], [matMiniFab][loading]`,\n})\nexport class MatButtonLoading implements OnChanges {\n private _elementRef = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n private _viewContainerRef = inject(ViewContainerRef);\n private _renderer = inject(Renderer2);\n\n private spinner: ComponentRef<MatProgressSpinner> | null = null;\n\n @Input({ transform: booleanAttribute }) loading = false;\n\n @Input({ transform: booleanAttribute }) disabled = false;\n\n @Input() color: ThemePalette;\n\n ngOnChanges(changes: SimpleChanges): void {\n if (!changes.loading) {\n return;\n }\n\n if (changes.loading.currentValue) {\n this._elementRef.nativeElement.classList.add('mat-button-loading');\n\n if (!this.disabled) {\n setTimeout(() => {\n this._elementRef.nativeElement.classList.add('mat-mdc-button-disabled');\n this._elementRef.nativeElement.setAttribute('disabled', 'true');\n });\n }\n\n this.createSpinner();\n } else if (!changes.loading.firstChange) {\n this._elementRef.nativeElement.classList.remove('mat-button-loading');\n\n if (!this.disabled) {\n setTimeout(() => {\n this._elementRef.nativeElement.classList.remove('mat-mdc-button-disabled');\n this._elementRef.nativeElement.removeAttribute('disabled');\n });\n }\n\n this.destroySpinner();\n }\n }\n\n private createSpinner(): void {\n if (!this.spinner) {\n this.spinner = this._viewContainerRef.createComponent(MatProgressSpinner);\n this.spinner.instance.color = this.color;\n this.spinner.instance.diameter = 24;\n this.spinner.instance.mode = 'indeterminate';\n this._renderer.appendChild(\n this._elementRef.nativeElement,\n this.spinner.instance._elementRef.nativeElement\n );\n }\n }\n\n private destroySpinner(): void {\n if (this.spinner) {\n this.spinner.destroy();\n this.spinner = null;\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonLoading } from './button-loading';\n\n@NgModule({\n imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],\n exports: [MatButtonLoading],\n})\nexport class MtxButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -198,8 +198,8 @@ class MtxCheckboxGroup {
|
|
|
198
198
|
}
|
|
199
199
|
this._getSelectedItems(index);
|
|
200
200
|
}
|
|
201
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
202
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
201
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
202
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxCheckboxGroup, isStandalone: true, selector: "mtx-checkbox-group", inputs: { trackBy: "trackBy", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: ["showSelectAll", "showSelectAll", booleanAttribute], selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
|
|
203
203
|
{
|
|
204
204
|
provide: NG_VALUE_ACCESSOR,
|
|
205
205
|
useExisting: forwardRef((() => MtxCheckboxGroup)),
|
|
@@ -207,7 +207,7 @@ class MtxCheckboxGroup {
|
|
|
207
207
|
},
|
|
208
208
|
], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["mtxCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n <mat-checkbox\n class=\"mtx-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n >\n {{ selectAllLabel }}\n </mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n <mat-checkbox\n class=\"mtx-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [ngModelOptions]=\"{ standalone: true }\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n >\n {{ option[bindLabel] | toObservable | async }}\n </mat-checkbox>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
209
209
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxCheckboxGroup, decorators: [{
|
|
211
211
|
type: Component,
|
|
212
212
|
args: [{ selector: 'mtx-checkbox-group', exportAs: 'mtxCheckboxGroup', host: {
|
|
213
213
|
class: 'mtx-checkbox-group',
|
|
@@ -244,11 +244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
244
244
|
}] } });
|
|
245
245
|
|
|
246
246
|
class MtxCheckboxGroupModule {
|
|
247
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
248
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
249
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
247
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
248
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup], exports: [MtxCheckboxGroup, MtxPipesModule] }); }
|
|
249
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
|
|
250
250
|
}
|
|
251
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
|
|
252
252
|
type: NgModule,
|
|
253
253
|
args: [{
|
|
254
254
|
imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mtxCheckboxGroup.mjs","sources":["../../../projects/extensions/checkbox-group/checkbox-group.ts","../../../projects/extensions/checkbox-group/checkbox-group.html","../../../projects/extensions/checkbox-group/checkbox-group-module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { AsyncPipe } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n QueryList,\n TrackByFunction,\n ViewEncapsulation,\n booleanAttribute,\n forwardRef,\n inject,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\n\nimport { MtxToObservablePipe } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroupOption } from './interfaces';\n\nexport class MtxCheckboxBase {\n constructor(\n public label?: any,\n public value?: any\n ) {}\n}\n\n@Component({\n selector: 'mtx-checkbox-group',\n exportAs: 'mtxCheckboxGroup',\n host: {\n class: 'mtx-checkbox-group',\n },\n templateUrl: './checkbox-group.html',\n styleUrl: './checkbox-group.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MtxCheckboxGroup),\n multi: true,\n },\n ],\n imports: [FormsModule, MatCheckbox, MtxToObservablePipe, AsyncPipe],\n})\nexport class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {\n private _changeDetectorRef = inject(ChangeDetectorRef);\n private _focusMonitor = inject(FocusMonitor);\n private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n // TODO: support ng-content for checkbox-group\n @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n _checkboxes!: QueryList<MatCheckbox>;\n\n /**\n * Tracking function that will be used to check the differences in data changes. Used similarly\n * to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data\n * relative to the function to know if a row should be added/removed/moved.\n * Accepts a function that takes two parameters, `index` and `item`.\n */\n @Input()\n get trackBy() {\n return this._trackByFn;\n }\n set trackBy(fn: TrackByFunction<any> | undefined) {\n if (fn != null && typeof fn !== 'function') {\n console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);\n }\n this._trackByFn = fn;\n }\n private _trackByFn?: TrackByFunction<any>;\n\n @Input()\n get items() {\n return this._items;\n }\n set items(value: any[]) {\n // store the original data with deep clone\n this._originalItems = JSON.parse(JSON.stringify(value));\n this._items = value.map(option => {\n return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n });\n\n // update the state of selectAll when items changed\n this.writeValue(this.selectedItems);\n }\n private _items: any[] = [];\n private _originalItems: any[] = [];\n\n @Input() bindLabel = 'label';\n\n @Input() bindValue = 'value';\n\n @Input({ transform: booleanAttribute }) showSelectAll = false;\n\n @Input() selectAllLabel = 'Select All';\n\n @Input()\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n if (fn != null && typeof fn !== 'function') {\n throw Error('`compareWith` must be a function.');\n }\n\n this._compareWith = fn;\n }\n private _compareWith?: (o1: any, o2: any) => boolean;\n\n @Input({ transform: booleanAttribute }) disabled = false;\n\n @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n selectAll = false;\n selectAllIndeterminate = false;\n\n selectedItems: MtxCheckboxGroupOption[] = [];\n\n _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n _onTouched: () => void = () => null;\n\n ngAfterViewInit() {\n this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n if (!focusOrigin) {\n // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n // Angular does not expect events to be raised during change detection, so any state change\n // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n // telling the form control it has been touched until the next tick.\n Promise.resolve().then(() => {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n });\n }\n });\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: MtxCheckboxGroupOption) {\n const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n try {\n const compareValue = option[this.bindValue] === value;\n return this._compareWith ? this._compareWith(option, value) : compareValue;\n } catch (error) {\n console.warn(error);\n return false;\n }\n });\n\n if (correspondingOption) {\n correspondingOption.checked = true;\n }\n\n return correspondingOption;\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: any[]): void {\n this.items.forEach(item => (item.checked = false));\n\n if (value) {\n if (!Array.isArray(value)) {\n throw Error('Value must be an array.');\n }\n\n value.forEach(currentValue => this._selectValue(currentValue));\n this.selectedItems = value;\n }\n\n this._checkMasterCheckboxState();\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => Record<string, unknown>): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: () => Record<string, unknown>): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this._changeDetectorRef.markForCheck();\n }\n\n private _checkMasterCheckboxState() {\n if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => !option.checked)\n ) {\n this.selectAll = false;\n this.selectAllIndeterminate = false;\n } else if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => option.checked)\n ) {\n this.selectAll = true;\n this.selectAllIndeterminate = false;\n } else {\n this.selectAllIndeterminate = true;\n }\n }\n\n private _getSelectedItems(index: number) {\n this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n if (this._compareWith) {\n this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n );\n } else {\n this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n }\n\n this._onChange(this.selectedItems);\n\n this.change.emit({ model: this.selectedItems, index });\n }\n\n /** Handle normal checkbox toggle */\n _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n this._checkMasterCheckboxState();\n this._getSelectedItems(index);\n }\n\n /** Handle master checkbox toggle */\n _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n this.selectAll = !this.selectAll;\n this.selectAllIndeterminate = false;\n\n if (this.selectAll) {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = true));\n } else {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = !!option.disabled));\n }\n\n this._getSelectedItems(index);\n }\n\n _trackBy = (index: number, item: any) => {\n return this.trackBy ? this.trackBy(index, item) : item;\n };\n}\n","@if (showSelectAll) {\n <mat-checkbox\n class=\"mtx-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n >\n {{ selectAllLabel }}\n </mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n <mat-checkbox\n class=\"mtx-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [ngModelOptions]=\"{ standalone: true }\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n >\n {{ option[bindLabel] | toObservable | async }}\n </mat-checkbox>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxPipesModule } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroup } from './checkbox-group';\n\n@NgModule({\n imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],\n exports: [MtxCheckboxGroup, MtxPipesModule],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mtxCheckboxGroup.mjs","sources":["../../../projects/extensions/checkbox-group/checkbox-group.ts","../../../projects/extensions/checkbox-group/checkbox-group.html","../../../projects/extensions/checkbox-group/checkbox-group-module.ts","../../../projects/extensions/checkbox-group/mtxCheckboxGroup.ts"],"sourcesContent":["import { FocusMonitor } from '@angular/cdk/a11y';\nimport { AsyncPipe } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n QueryList,\n TrackByFunction,\n ViewEncapsulation,\n booleanAttribute,\n forwardRef,\n inject,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\n\nimport { MtxToObservablePipe } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroupOption } from './interfaces';\n\nexport class MtxCheckboxBase {\n constructor(\n public label?: any,\n public value?: any\n ) {}\n}\n\n@Component({\n selector: 'mtx-checkbox-group',\n exportAs: 'mtxCheckboxGroup',\n host: {\n class: 'mtx-checkbox-group',\n },\n templateUrl: './checkbox-group.html',\n styleUrl: './checkbox-group.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => MtxCheckboxGroup),\n multi: true,\n },\n ],\n imports: [FormsModule, MatCheckbox, MtxToObservablePipe, AsyncPipe],\n})\nexport class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {\n private _changeDetectorRef = inject(ChangeDetectorRef);\n private _focusMonitor = inject(FocusMonitor);\n private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n // TODO: support ng-content for checkbox-group\n @ContentChildren(forwardRef(() => MatCheckbox), { descendants: true })\n _checkboxes!: QueryList<MatCheckbox>;\n\n /**\n * Tracking function that will be used to check the differences in data changes. Used similarly\n * to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data\n * relative to the function to know if a row should be added/removed/moved.\n * Accepts a function that takes two parameters, `index` and `item`.\n */\n @Input()\n get trackBy() {\n return this._trackByFn;\n }\n set trackBy(fn: TrackByFunction<any> | undefined) {\n if (fn != null && typeof fn !== 'function') {\n console.warn(`trackBy must be a function, but received ${JSON.stringify(fn)}.`);\n }\n this._trackByFn = fn;\n }\n private _trackByFn?: TrackByFunction<any>;\n\n @Input()\n get items() {\n return this._items;\n }\n set items(value: any[]) {\n // store the original data with deep clone\n this._originalItems = JSON.parse(JSON.stringify(value));\n this._items = value.map(option => {\n return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);\n });\n\n // update the state of selectAll when items changed\n this.writeValue(this.selectedItems);\n }\n private _items: any[] = [];\n private _originalItems: any[] = [];\n\n @Input() bindLabel = 'label';\n\n @Input() bindValue = 'value';\n\n @Input({ transform: booleanAttribute }) showSelectAll = false;\n\n @Input() selectAllLabel = 'Select All';\n\n @Input()\n get compareWith() {\n return this._compareWith;\n }\n set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined) {\n if (fn != null && typeof fn !== 'function') {\n throw Error('`compareWith` must be a function.');\n }\n\n this._compareWith = fn;\n }\n private _compareWith?: (o1: any, o2: any) => boolean;\n\n @Input({ transform: booleanAttribute }) disabled = false;\n\n @Output() change = new EventEmitter<{ model: MtxCheckboxGroupOption[]; index: number }>();\n\n selectAll = false;\n selectAllIndeterminate = false;\n\n selectedItems: MtxCheckboxGroupOption[] = [];\n\n _onChange: (value: MtxCheckboxGroupOption[]) => void = () => null;\n _onTouched: () => void = () => null;\n\n ngAfterViewInit() {\n this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {\n if (!focusOrigin) {\n // When a focused element becomes disabled, the browser *immediately* fires a blur event.\n // Angular does not expect events to be raised during change detection, so any state change\n // (such as a form control's 'ng-touched') will cause a changed-after-checked error.\n // See https://github.com/angular/angular/issues/17793. To work around this, we defer\n // telling the form control it has been touched until the next tick.\n Promise.resolve().then(() => {\n this._onTouched();\n this._changeDetectorRef.markForCheck();\n });\n }\n });\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this._elementRef);\n }\n\n /**\n * Finds and selects and option based on its value.\n * @returns Option that has the corresponding value.\n */\n private _selectValue(value: MtxCheckboxGroupOption) {\n const correspondingOption = (this.items as MtxCheckboxGroupOption[]).find(option => {\n try {\n const compareValue = option[this.bindValue] === value;\n return this._compareWith ? this._compareWith(option, value) : compareValue;\n } catch (error) {\n console.warn(error);\n return false;\n }\n });\n\n if (correspondingOption) {\n correspondingOption.checked = true;\n }\n\n return correspondingOption;\n }\n\n /**\n * Sets the model value. Implemented as part of ControlValueAccessor.\n * @param value New value to be written to the model.\n */\n writeValue(value: any[]): void {\n this.items.forEach(item => (item.checked = false));\n\n if (value) {\n if (!Array.isArray(value)) {\n throw Error('Value must be an array.');\n }\n\n value.forEach(currentValue => this._selectValue(currentValue));\n this.selectedItems = value;\n }\n\n this._checkMasterCheckboxState();\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Registers a callback to be triggered when the model value changes.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => Record<string, unknown>): void {\n this._onChange = fn;\n }\n\n /**\n * Registers a callback to be triggered when the control is touched.\n * Implemented as part of ControlValueAccessor.\n * @param fn Callback to be registered.\n */\n registerOnTouched(fn: () => Record<string, unknown>): void {\n this._onTouched = fn;\n }\n\n /**\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this._changeDetectorRef.markForCheck();\n }\n\n private _checkMasterCheckboxState() {\n if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => !option.checked)\n ) {\n this.selectAll = false;\n this.selectAllIndeterminate = false;\n } else if (\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .every(option => option.checked)\n ) {\n this.selectAll = true;\n this.selectAllIndeterminate = false;\n } else {\n this.selectAllIndeterminate = true;\n }\n }\n\n private _getSelectedItems(index: number) {\n this.selectedItems = (this.items as MtxCheckboxGroupOption[]).filter(option => option.checked);\n\n if (this._compareWith) {\n this.selectedItems = (this._originalItems as MtxCheckboxGroupOption[]).filter(option =>\n this.selectedItems.find(selectedOption => this._compareWith!(option, selectedOption))\n );\n } else {\n this.selectedItems = this.selectedItems.map(option => option[this.bindValue]);\n }\n\n this._onChange(this.selectedItems);\n\n this.change.emit({ model: this.selectedItems, index });\n }\n\n /** Handle normal checkbox toggle */\n _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void {\n this._checkMasterCheckboxState();\n this._getSelectedItems(index);\n }\n\n /** Handle master checkbox toggle */\n _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void {\n this.selectAll = !this.selectAll;\n this.selectAllIndeterminate = false;\n\n if (this.selectAll) {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = true));\n } else {\n (this.items as MtxCheckboxGroupOption[])\n .filter(option => option.checked || !option.disabled)\n .forEach(option => (option.checked = !!option.disabled));\n }\n\n this._getSelectedItems(index);\n }\n\n _trackBy = (index: number, item: any) => {\n return this.trackBy ? this.trackBy(index, item) : item;\n };\n}\n","@if (showSelectAll) {\n <mat-checkbox\n class=\"mtx-checkbox-master\"\n [checked]=\"selectAll\"\n [(indeterminate)]=\"selectAllIndeterminate\"\n [disabled]=\"disabled\"\n (change)=\"_updateMasterCheckboxState($event, -1)\"\n >\n {{ selectAllLabel }}\n </mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n <mat-checkbox\n class=\"mtx-checkbox-normal\"\n [(ngModel)]=\"option.checked\"\n [ngModelOptions]=\"{ standalone: true }\"\n [aria-describedby]=\"option.ariaDescribedby\"\n [aria-label]=\"option.ariaLabel\"\n [aria-labelledby]=\"option.ariaLabelledby\"\n [color]=\"option.color\"\n [disabled]=\"option.disabled || disabled\"\n [disableRipple]=\"option.disableRipple\"\n [labelPosition]=\"option.labelPosition\"\n [required]=\"option.required\"\n (change)=\"_updateNormalCheckboxState($event, i)\"\n >\n {{ option[bindLabel] | toObservable | async }}\n </mat-checkbox>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { MtxPipesModule } from '@ng-matero/extensions/core';\nimport { MtxCheckboxGroup } from './checkbox-group';\n\n@NgModule({\n imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],\n exports: [MtxCheckboxGroup, MtxPipesModule],\n})\nexport class MtxCheckboxGroupModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,12 +3,13 @@ import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
|
3
3
|
import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
4
4
|
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { InjectionToken, inject, ElementRef,
|
|
6
|
+
import { InjectionToken, inject, ElementRef, ChangeDetectorRef, NgZone, Renderer2, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewContainerRef, DOCUMENT, EventEmitter, Injector, afterNextRender, booleanAttribute, Output, forwardRef, Directive, HostAttributeToken, ViewChild, ContentChild, NgModule } from '@angular/core';
|
|
7
7
|
import { MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
8
8
|
import * as i1 from 'ngx-color/chrome';
|
|
9
9
|
import { ColorChromeModule } from 'ngx-color/chrome';
|
|
10
10
|
import { Directionality } from '@angular/cdk/bidi';
|
|
11
11
|
import { hasModifierKey, ESCAPE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
|
|
12
|
+
import { _animationsDisabled } from '@angular/material/core';
|
|
12
13
|
import { Subject, Subscription, merge, of } from 'rxjs';
|
|
13
14
|
import { take, filter } from 'rxjs/operators';
|
|
14
15
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
@@ -26,28 +27,10 @@ const MTX_COLORPICKER_SCROLL_STRATEGY = new InjectionToken('mtx-colorpicker-scro
|
|
|
26
27
|
return () => overlay.scrollStrategies.reposition();
|
|
27
28
|
},
|
|
28
29
|
});
|
|
29
|
-
/**
|
|
30
|
-
* @docs-private
|
|
31
|
-
* @deprecated No longer used, will be removed.
|
|
32
|
-
* @breaking-change 21.0.0
|
|
33
|
-
*/
|
|
34
|
-
function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay) {
|
|
35
|
-
return () => overlay.scrollStrategies.reposition();
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* @docs-private
|
|
39
|
-
* @deprecated No longer used, will be removed.
|
|
40
|
-
* @breaking-change 21.0.0
|
|
41
|
-
*/
|
|
42
|
-
const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
|
|
43
|
-
provide: MTX_COLORPICKER_SCROLL_STRATEGY,
|
|
44
|
-
deps: [Overlay],
|
|
45
|
-
useFactory: MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY,
|
|
46
|
-
};
|
|
47
30
|
class MtxColorpickerContent {
|
|
48
31
|
constructor() {
|
|
49
32
|
this._elementRef = inject(ElementRef);
|
|
50
|
-
this._animationsDisabled =
|
|
33
|
+
this._animationsDisabled = _animationsDisabled();
|
|
51
34
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
52
35
|
this._ngZone = inject(NgZone);
|
|
53
36
|
/** Emits when an animation has finished. */
|
|
@@ -106,10 +89,10 @@ class MtxColorpickerContent {
|
|
|
106
89
|
hsv: new TinyColor(e.color.hsv).toHsvString(),
|
|
107
90
|
}[this.picker.format];
|
|
108
91
|
}
|
|
109
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
110
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
92
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
93
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxColorpickerContent, isStandalone: true, selector: "mtx-colorpicker-content", inputs: { color: "color" }, host: { properties: { "class": "color ? \"mat-\" + color : \"\"", "class.mtx-colorpicker-content-animations-enabled": "!_animationsDisabled" }, classAttribute: "mtx-colorpicker-content" }, exportAs: ["mtxColorpickerContent"], ngImport: i0, template: "@if (picker.content) {\n <ng-template [ngTemplateOutlet]=\"picker.content\"></ng-template>\n} @else {\n <color-chrome\n [color]=\"picker.selected\"\n (onChangeComplete)=\"picker.select(getColorString($event))\"\n />\n}\n", styles: ["@keyframes _mtx-colorpicker-content-dropdown-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _mtx-colorpicker-content-exit{0%{opacity:1}to{opacity:0}}.mtx-colorpicker-content{display:block;border-radius:4px}.mtx-colorpicker-content.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-dropdown-enter .12s cubic-bezier(0,0,.2,1)}.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled{animation:_mtx-colorpicker-content-exit .1s linear}\n"], dependencies: [{ kind: "ngmodule", type: ColorChromeModule }, { kind: "component", type: i1.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
111
94
|
}
|
|
112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerContent, decorators: [{
|
|
113
96
|
type: Component,
|
|
114
97
|
args: [{ selector: 'mtx-colorpicker-content', host: {
|
|
115
98
|
'class': 'mtx-colorpicker-content',
|
|
@@ -372,10 +355,10 @@ class MtxColorpicker {
|
|
|
372
355
|
(this.pickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW));
|
|
373
356
|
})));
|
|
374
357
|
}
|
|
375
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
376
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
358
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
359
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.1", type: MtxColorpicker, isStandalone: true, selector: "mtx-colorpicker", inputs: { content: "content", disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute], opened: ["opened", "opened", booleanAttribute], color: "color", format: "format" }, outputs: { openedStream: "opened", closedStream: "closed" }, exportAs: ["mtxColorpicker"], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
377
360
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpicker, decorators: [{
|
|
379
362
|
type: Component,
|
|
380
363
|
args: [{
|
|
381
364
|
selector: 'mtx-colorpicker',
|
|
@@ -566,7 +549,8 @@ class MtxColorpickerInput {
|
|
|
566
549
|
}
|
|
567
550
|
this._onTouched();
|
|
568
551
|
}
|
|
569
|
-
_onInput(
|
|
552
|
+
_onInput(event) {
|
|
553
|
+
const value = event.target.value;
|
|
570
554
|
const nextValue = value;
|
|
571
555
|
this._value = nextValue;
|
|
572
556
|
this._cvaOnChange(nextValue);
|
|
@@ -584,14 +568,14 @@ class MtxColorpickerInput {
|
|
|
584
568
|
_formatValue(value) {
|
|
585
569
|
this._elementRef.nativeElement.value = value ? value : '';
|
|
586
570
|
}
|
|
587
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
588
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
571
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
572
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.1", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
|
|
589
573
|
MTX_COLORPICKER_VALUE_ACCESSOR,
|
|
590
574
|
MTX_COLORPICKER_VALIDATORS,
|
|
591
575
|
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxColorpickerInput },
|
|
592
576
|
], exportAs: ["mtxColorpickerInput"], ngImport: i0 }); }
|
|
593
577
|
}
|
|
594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerInput, decorators: [{
|
|
595
579
|
type: Directive,
|
|
596
580
|
args: [{
|
|
597
581
|
selector: 'input[mtxColorpicker]',
|
|
@@ -605,7 +589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
605
589
|
'[attr.aria-haspopup]': '_picker ? "dialog" : null',
|
|
606
590
|
'[attr.aria-owns]': '(_picker?.opened && _picker.id) || null',
|
|
607
591
|
'[disabled]': 'disabled',
|
|
608
|
-
'(input)': '_onInput($event
|
|
592
|
+
'(input)': '_onInput($event)',
|
|
609
593
|
'(change)': '_onChange()',
|
|
610
594
|
'(blur)': '_onBlur()',
|
|
611
595
|
'(keydown)': '_onKeydown($event)',
|
|
@@ -629,10 +613,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
629
613
|
|
|
630
614
|
/** Can be used to override the icon of a `mtxColorpickerToggle`. */
|
|
631
615
|
class MtxColorpickerToggleIcon {
|
|
632
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
633
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
616
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
617
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.1", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
|
|
634
618
|
}
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
|
|
636
620
|
type: Directive,
|
|
637
621
|
args: [{
|
|
638
622
|
selector: '[mtxColorpickerToggleIcon]',
|
|
@@ -684,10 +668,10 @@ class MtxColorpickerToggle {
|
|
|
684
668
|
this._stateChanges.unsubscribe();
|
|
685
669
|
this._stateChanges = merge(pickerDisabled, inputDisabled, pickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
686
670
|
}
|
|
687
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
688
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
671
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
672
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n #button\n matIconButton\n type=\"button\"\n [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\"\n>\n @if (!_customIcon) {\n <svg\n class=\"mtx-colorpicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n />\n </svg>\n }\n\n <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors:active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
689
673
|
}
|
|
690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
|
|
691
675
|
type: Component,
|
|
692
676
|
args: [{ selector: 'mtx-colorpicker-toggle', host: {
|
|
693
677
|
'class': 'mtx-colorpicker-toggle',
|
|
@@ -699,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
699
683
|
// `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
|
|
700
684
|
// it so that the input doesn't get focused automatically by the form field (See #21836).
|
|
701
685
|
'(click)': '_open($event)',
|
|
702
|
-
}, exportAs: 'mtxColorpickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<button\n #button\n
|
|
686
|
+
}, exportAs: 'mtxColorpickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<button\n #button\n matIconButton\n type=\"button\"\n [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\"\n>\n @if (!_customIcon) {\n <svg\n class=\"mtx-colorpicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n >\n <path\n d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\"\n />\n </svg>\n }\n\n <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors:active){.mtx-colorpicker-toggle-default-icon{color:CanvasText}}\n"] }]
|
|
703
687
|
}], ctorParameters: () => [], propDecorators: { picker: [{
|
|
704
688
|
type: Input,
|
|
705
689
|
args: ['for']
|
|
@@ -723,8 +707,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
723
707
|
}] } });
|
|
724
708
|
|
|
725
709
|
class MtxColorpickerModule {
|
|
726
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
727
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
710
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
711
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
|
|
728
712
|
OverlayModule,
|
|
729
713
|
A11yModule,
|
|
730
714
|
PortalModule,
|
|
@@ -739,7 +723,7 @@ class MtxColorpickerModule {
|
|
|
739
723
|
MtxColorpickerInput,
|
|
740
724
|
MtxColorpickerToggle,
|
|
741
725
|
MtxColorpickerToggleIcon] }); }
|
|
742
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
726
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
|
|
743
727
|
OverlayModule,
|
|
744
728
|
A11yModule,
|
|
745
729
|
PortalModule,
|
|
@@ -748,7 +732,7 @@ class MtxColorpickerModule {
|
|
|
748
732
|
MtxColorpickerContent,
|
|
749
733
|
MtxColorpickerToggle] }); }
|
|
750
734
|
}
|
|
751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MtxColorpickerModule, decorators: [{
|
|
752
736
|
type: NgModule,
|
|
753
737
|
args: [{
|
|
754
738
|
imports: [
|
|
@@ -771,70 +755,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
|
|
|
771
755
|
MtxColorpickerToggle,
|
|
772
756
|
MtxColorpickerToggleIcon,
|
|
773
757
|
],
|
|
774
|
-
providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
|
|
775
758
|
}]
|
|
776
759
|
}] });
|
|
777
760
|
|
|
778
|
-
/**
|
|
779
|
-
* Animations used by the colorpicker.
|
|
780
|
-
* @docs-private
|
|
781
|
-
* @deprecated No longer used, will be removed.
|
|
782
|
-
* @breaking-change 21.0.0
|
|
783
|
-
*/
|
|
784
|
-
const mtxColorpickerAnimations = {
|
|
785
|
-
// Represents:
|
|
786
|
-
// transformPanel: trigger('transformPanel', [
|
|
787
|
-
// transition(
|
|
788
|
-
// 'void => enter-dropdown',
|
|
789
|
-
// animate(
|
|
790
|
-
// '120ms cubic-bezier(0, 0, 0.2, 1)',
|
|
791
|
-
// keyframes([
|
|
792
|
-
// style({ opacity: 0, transform: 'scale(1, 0.8)' }),
|
|
793
|
-
// style({ opacity: 1, transform: 'scale(1, 1)' }),
|
|
794
|
-
// ])
|
|
795
|
-
// )
|
|
796
|
-
// ),
|
|
797
|
-
// transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
|
|
798
|
-
// ]),
|
|
799
|
-
/** Transforms the height of the colorpicker's panel. */
|
|
800
|
-
transformPanel: {
|
|
801
|
-
type: 7,
|
|
802
|
-
name: 'transformPanel',
|
|
803
|
-
definitions: [
|
|
804
|
-
{
|
|
805
|
-
type: 1,
|
|
806
|
-
expr: 'void => enter-dropdown',
|
|
807
|
-
animation: {
|
|
808
|
-
type: 4,
|
|
809
|
-
styles: {
|
|
810
|
-
type: 5,
|
|
811
|
-
steps: [
|
|
812
|
-
{ type: 6, styles: { opacity: 0, transform: 'scale(1, 0.8)' }, offset: null },
|
|
813
|
-
{ type: 6, styles: { opacity: 1, transform: 'scale(1, 1)' }, offset: null },
|
|
814
|
-
],
|
|
815
|
-
},
|
|
816
|
-
timings: '120ms cubic-bezier(0, 0, 0.2, 1)',
|
|
817
|
-
},
|
|
818
|
-
options: null,
|
|
819
|
-
},
|
|
820
|
-
{
|
|
821
|
-
type: 1,
|
|
822
|
-
expr: '* => void',
|
|
823
|
-
animation: {
|
|
824
|
-
type: 4,
|
|
825
|
-
styles: { type: 6, styles: { opacity: 0 }, offset: null },
|
|
826
|
-
timings: '100ms linear',
|
|
827
|
-
},
|
|
828
|
-
options: null,
|
|
829
|
-
},
|
|
830
|
-
],
|
|
831
|
-
options: {},
|
|
832
|
-
},
|
|
833
|
-
};
|
|
834
|
-
|
|
835
761
|
/**
|
|
836
762
|
* Generated bundle index. Do not edit.
|
|
837
763
|
*/
|
|
838
764
|
|
|
839
|
-
export { MTX_COLORPICKER_SCROLL_STRATEGY,
|
|
765
|
+
export { MTX_COLORPICKER_SCROLL_STRATEGY, MTX_COLORPICKER_VALIDATORS, MTX_COLORPICKER_VALUE_ACCESSOR, MtxColorpicker, MtxColorpickerContent, MtxColorpickerInput, MtxColorpickerModule, MtxColorpickerToggle, MtxColorpickerToggleIcon };
|
|
840
766
|
//# sourceMappingURL=mtxColorpicker.mjs.map
|