@ng-matero/extensions 19.3.3 → 19.4.1
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/alert/alert.d.ts +1 -1
- package/fesm2022/mtxAlert.mjs +6 -9
- package/fesm2022/mtxAlert.mjs.map +1 -1
- package/fesm2022/mtxDatetimepicker.mjs +4 -0
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2022/mtxGrid.mjs +27 -35
- package/fesm2022/mtxGrid.mjs.map +1 -1
- package/fesm2022/mtxPhotoviewer.mjs +4 -4
- package/fesm2022/mtxPhotoviewer.mjs.map +1 -1
- package/grid/_grid-theme.scss +0 -3
- package/grid/column-resize/resizable-directives/resizable.d.ts +2 -2
- package/grid/expansion-toggle.d.ts +0 -2
- package/grid/grid.scss +1 -0
- package/package.json +22 -22
- 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/alert/alert.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as i0 from "@angular/core";
|
|
|
3
3
|
export type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
|
|
4
4
|
export declare class MtxAlert {
|
|
5
5
|
private _changeDetectorRef;
|
|
6
|
-
get
|
|
6
|
+
get hostClassList(): string;
|
|
7
7
|
/** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
|
|
8
8
|
type: MtxAlertType;
|
|
9
9
|
/** Whether to display an inline close button. */
|
package/fesm2022/mtxAlert.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy,
|
|
2
|
+
import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
import { MatIconButton } from '@angular/material/button';
|
|
5
5
|
|
|
@@ -15,27 +15,24 @@ class MtxAlert {
|
|
|
15
15
|
/** Event emitted when the alert closed. */
|
|
16
16
|
this.closed = new EventEmitter();
|
|
17
17
|
}
|
|
18
|
-
get
|
|
19
|
-
return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;
|
|
18
|
+
get hostClassList() {
|
|
19
|
+
return `mtx-alert mtx-alert-${this.type} mat-elevation-z${this.elevation}`;
|
|
20
20
|
}
|
|
21
21
|
_onClosed() {
|
|
22
22
|
this._changeDetectorRef.markForCheck();
|
|
23
23
|
this.closed.emit(this);
|
|
24
24
|
}
|
|
25
25
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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
|
|
26
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 mat-icon-button 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]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
27
27
|
}
|
|
28
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlert, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
|
|
31
|
-
'class': '
|
|
31
|
+
'[class]': 'hostClassList',
|
|
32
32
|
'[class.mtx-alert-dismissible]': 'dismissible',
|
|
33
33
|
'role': 'alert',
|
|
34
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 mat-icon-button 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
|
-
}], propDecorators: {
|
|
36
|
-
type: HostBinding,
|
|
37
|
-
args: ['class']
|
|
38
|
-
}], type: [{
|
|
35
|
+
}], propDecorators: { type: [{
|
|
39
36
|
type: Input
|
|
40
37
|
}], dismissible: [{
|
|
41
38
|
type: Input,
|
|
@@ -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
|
|
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 mat-icon-button 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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"}
|
|
@@ -1471,6 +1471,10 @@ class MtxTimeView {
|
|
|
1471
1471
|
this.clockViewChange.emit(this.clockView);
|
|
1472
1472
|
}
|
|
1473
1473
|
_onActiveDateChange(date) {
|
|
1474
|
+
// On mobile devices, inputs fail to blur properly when trigger touchstart event.
|
|
1475
|
+
// https://github.com/ng-matero/extensions/issues/425
|
|
1476
|
+
this.hourInputElement?.nativeElement.blur();
|
|
1477
|
+
this.minuteInputElement?.nativeElement.blur();
|
|
1474
1478
|
this._activeDate = date;
|
|
1475
1479
|
this.activeDateChange.emit(date);
|
|
1476
1480
|
}
|