@ng-matero/extensions 13.3.0 → 13.3.2
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/colorpicker/colorpicker-toggle.d.ts +7 -5
- package/datetimepicker/datetimepicker-toggle.d.ts +3 -3
- package/esm2020/colorpicker/colorpicker-toggle.mjs +29 -18
- package/esm2020/datetimepicker/datetimepicker-toggle.mjs +23 -16
- package/esm2020/datetimepicker/datetimepicker.mjs +6 -4
- package/esm2020/grid/grid.component.mjs +3 -3
- package/esm2020/select/select.component.mjs +4 -4
- package/fesm2015/mtxColorpicker.mjs +27 -14
- package/fesm2015/mtxColorpicker.mjs.map +1 -1
- package/fesm2015/mtxDatetimepicker.mjs +29 -18
- package/fesm2015/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2015/mtxGrid.mjs +2 -2
- package/fesm2015/mtxGrid.mjs.map +1 -1
- package/fesm2015/mtxSelect.mjs +4 -4
- package/fesm2015/mtxSelect.mjs.map +1 -1
- package/fesm2020/mtxColorpicker.mjs +25 -14
- package/fesm2020/mtxColorpicker.mjs.map +1 -1
- package/fesm2020/mtxDatetimepicker.mjs +27 -18
- package/fesm2020/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2020/mtxGrid.mjs +2 -2
- package/fesm2020/mtxGrid.mjs.map +1 -1
- package/fesm2020/mtxSelect.mjs +3 -4
- package/fesm2020/mtxSelect.mjs.map +1 -1
- package/grid/grid.component.d.ts +9 -9
- package/package.json +1 -1
- package/select/select.component.d.ts +1 -1
|
@@ -6,7 +6,7 @@ import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
|
|
|
6
6
|
import * as i3 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
import * as i0 from '@angular/core';
|
|
9
|
-
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, InjectionToken, ViewChild, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
|
|
9
|
+
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, InjectionToken, ViewChild, forwardRef, Directive, Attribute, ContentChild, NgModule } from '@angular/core';
|
|
10
10
|
import * as i3$1 from '@angular/material/button';
|
|
11
11
|
import { MatButtonModule } from '@angular/material/button';
|
|
12
12
|
import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
|
|
@@ -1609,7 +1609,7 @@ class MtxDatetimepicker {
|
|
|
1609
1609
|
/** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
|
|
1610
1610
|
this._backdropHarnessClass = `${this.id}-backdrop`;
|
|
1611
1611
|
this._inputStateChanges = Subscription.EMPTY;
|
|
1612
|
-
this._type = '
|
|
1612
|
+
this._type = 'datetime';
|
|
1613
1613
|
this._touchUi = false;
|
|
1614
1614
|
/** Preferred position of the datetimepicker in the X axis. */
|
|
1615
1615
|
this.xPosition = 'start';
|
|
@@ -1672,7 +1672,7 @@ class MtxDatetimepicker {
|
|
|
1672
1672
|
return this._type;
|
|
1673
1673
|
}
|
|
1674
1674
|
set type(value) {
|
|
1675
|
-
this._type = value || '
|
|
1675
|
+
this._type = value || 'datetime';
|
|
1676
1676
|
}
|
|
1677
1677
|
/**
|
|
1678
1678
|
* Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
|
|
@@ -1773,7 +1773,9 @@ class MtxDatetimepicker {
|
|
|
1773
1773
|
return;
|
|
1774
1774
|
}
|
|
1775
1775
|
if (this._componentRef) {
|
|
1776
|
-
this.
|
|
1776
|
+
const instance = this._componentRef.instance;
|
|
1777
|
+
instance._startExitAnimation();
|
|
1778
|
+
instance._animationDone.pipe(take(1)).subscribe(() => this._destroyOverlay());
|
|
1777
1779
|
}
|
|
1778
1780
|
const completeClose = () => {
|
|
1779
1781
|
// The `_opened` could've been reset already if
|
|
@@ -2325,10 +2327,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
2325
2327
|
}]
|
|
2326
2328
|
}] });
|
|
2327
2329
|
class MtxDatetimepickerToggle {
|
|
2328
|
-
constructor(_intl, _changeDetectorRef) {
|
|
2330
|
+
constructor(_intl, _changeDetectorRef, defaultTabIndex) {
|
|
2329
2331
|
this._intl = _intl;
|
|
2330
2332
|
this._changeDetectorRef = _changeDetectorRef;
|
|
2331
2333
|
this._stateChanges = Subscription.EMPTY;
|
|
2334
|
+
const parsedTabIndex = Number(defaultTabIndex);
|
|
2335
|
+
this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
|
|
2332
2336
|
}
|
|
2333
2337
|
/** Whether the toggle button is disabled. */
|
|
2334
2338
|
get disabled() {
|
|
@@ -2361,29 +2365,34 @@ class MtxDatetimepickerToggle {
|
|
|
2361
2365
|
const inputDisabled = this.datetimepicker && this.datetimepicker.datetimepickerInput
|
|
2362
2366
|
? this.datetimepicker.datetimepickerInput._disabledChange
|
|
2363
2367
|
: of();
|
|
2368
|
+
const datetimepickerToggled = this.datetimepicker
|
|
2369
|
+
? merge(this.datetimepicker.openedStream, this.datetimepicker.closedStream)
|
|
2370
|
+
: of();
|
|
2364
2371
|
this._stateChanges.unsubscribe();
|
|
2365
|
-
this._stateChanges = merge(
|
|
2366
|
-
this._intl.changes,
|
|
2367
|
-
datetimepickerDisabled,
|
|
2368
|
-
inputDisabled,
|
|
2369
|
-
]).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
2372
|
+
this._stateChanges = merge(this._intl.changes, datetimepickerDisabled, inputDisabled, datetimepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
2370
2373
|
}
|
|
2371
2374
|
}
|
|
2372
|
-
/** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: i1$1.MatDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2373
|
-
/** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "
|
|
2375
|
+
/** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: i1$1.MatDatepickerIntl }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2376
|
+
/** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n [attr.aria-label]=\"_intl.openCalendarLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\">\n\n <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n <svg *ngSwitchCase=\"'time'\"\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path\n d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n </path>\n </svg>\n <svg *ngSwitchCase=\"'datetime'\"\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path\n d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n </path>\n </svg>\n <svg *ngSwitchDefault\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n </svg>\n </ng-container>\n\n <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2374
2377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
|
|
2375
2378
|
type: Component,
|
|
2376
2379
|
args: [{ selector: 'mtx-datetimepicker-toggle', host: {
|
|
2377
2380
|
'class': 'mtx-datetimepicker-toggle',
|
|
2378
|
-
|
|
2379
|
-
// consumer may have provided, while still being able to receive focus.
|
|
2380
|
-
'[attr.tabindex]': 'disabled ? null : -1',
|
|
2381
|
+
'[attr.tabindex]': 'null',
|
|
2381
2382
|
'[class.mtx-datetimepicker-toggle-active]': 'datetimepicker && datetimepicker.opened',
|
|
2382
2383
|
'[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
|
|
2383
2384
|
'[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2385
|
+
// Used by the test harness to tie this toggle to its datetimepicker.
|
|
2386
|
+
'[attr.data-mtx-calendar]': 'datetimepicker ? datetimepicker.id : null',
|
|
2387
|
+
// Bind the `click` on the host, rather than the inner `button`, so that we can call
|
|
2388
|
+
// `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
|
|
2389
|
+
// it so that the input doesn't get focused automatically by the form field (See #21836).
|
|
2390
|
+
'(click)': '_open($event)',
|
|
2391
|
+
}, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n [attr.aria-label]=\"_intl.openCalendarLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\">\n\n <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n <svg *ngSwitchCase=\"'time'\"\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path\n d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n </path>\n </svg>\n <svg *ngSwitchCase=\"'datetime'\"\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path\n d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n </path>\n </svg>\n <svg *ngSwitchDefault\n class=\"mtx-datetimepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\">\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path\n d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n </svg>\n </ng-container>\n\n <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"] }]
|
|
2392
|
+
}], ctorParameters: function () { return [{ type: i1$1.MatDatepickerIntl }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
2393
|
+
type: Attribute,
|
|
2394
|
+
args: ['tabindex']
|
|
2395
|
+
}] }]; }, propDecorators: { datetimepicker: [{
|
|
2387
2396
|
type: Input,
|
|
2388
2397
|
args: ['for']
|
|
2389
2398
|
}], tabIndex: [{
|