@ng-matero/extensions 13.3.0 → 13.3.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/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/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/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/package.json +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';
|
|
@@ -1617,7 +1617,7 @@ class MtxDatetimepicker {
|
|
|
1617
1617
|
/** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
|
|
1618
1618
|
this._backdropHarnessClass = `${this.id}-backdrop`;
|
|
1619
1619
|
this._inputStateChanges = Subscription.EMPTY;
|
|
1620
|
-
this._type = '
|
|
1620
|
+
this._type = 'datetime';
|
|
1621
1621
|
this._touchUi = false;
|
|
1622
1622
|
/** Preferred position of the datetimepicker in the X axis. */
|
|
1623
1623
|
this.xPosition = 'start';
|
|
@@ -1680,7 +1680,7 @@ class MtxDatetimepicker {
|
|
|
1680
1680
|
return this._type;
|
|
1681
1681
|
}
|
|
1682
1682
|
set type(value) {
|
|
1683
|
-
this._type = value || '
|
|
1683
|
+
this._type = value || 'datetime';
|
|
1684
1684
|
}
|
|
1685
1685
|
/**
|
|
1686
1686
|
* Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
|
|
@@ -1781,7 +1781,9 @@ class MtxDatetimepicker {
|
|
|
1781
1781
|
return;
|
|
1782
1782
|
}
|
|
1783
1783
|
if (this._componentRef) {
|
|
1784
|
-
this.
|
|
1784
|
+
const instance = this._componentRef.instance;
|
|
1785
|
+
instance._startExitAnimation();
|
|
1786
|
+
instance._animationDone.pipe(take(1)).subscribe(() => this._destroyOverlay());
|
|
1785
1787
|
}
|
|
1786
1788
|
const completeClose = () => {
|
|
1787
1789
|
// The `_opened` could've been reset already if
|
|
@@ -2337,10 +2339,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
|
|
|
2337
2339
|
}]
|
|
2338
2340
|
}] });
|
|
2339
2341
|
class MtxDatetimepickerToggle {
|
|
2340
|
-
constructor(_intl, _changeDetectorRef) {
|
|
2342
|
+
constructor(_intl, _changeDetectorRef, defaultTabIndex) {
|
|
2341
2343
|
this._intl = _intl;
|
|
2342
2344
|
this._changeDetectorRef = _changeDetectorRef;
|
|
2343
2345
|
this._stateChanges = Subscription.EMPTY;
|
|
2346
|
+
const parsedTabIndex = Number(defaultTabIndex);
|
|
2347
|
+
this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
|
|
2344
2348
|
}
|
|
2345
2349
|
/** Whether the toggle button is disabled. */
|
|
2346
2350
|
get disabled() {
|
|
@@ -2373,29 +2377,36 @@ class MtxDatetimepickerToggle {
|
|
|
2373
2377
|
const inputDisabled = this.datetimepicker && this.datetimepicker.datetimepickerInput
|
|
2374
2378
|
? this.datetimepicker.datetimepickerInput._disabledChange
|
|
2375
2379
|
: of();
|
|
2380
|
+
const datetimepickerToggled = this.datetimepicker
|
|
2381
|
+
? merge(this.datetimepicker.openedStream, this.datetimepicker.closedStream)
|
|
2382
|
+
: of();
|
|
2376
2383
|
this._stateChanges.unsubscribe();
|
|
2377
|
-
this._stateChanges = merge(
|
|
2378
|
-
this._intl.changes,
|
|
2379
|
-
datetimepickerDisabled,
|
|
2380
|
-
inputDisabled,
|
|
2381
|
-
]).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
2384
|
+
this._stateChanges = merge(this._intl.changes, datetimepickerDisabled, inputDisabled, datetimepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
2382
2385
|
}
|
|
2383
2386
|
}
|
|
2384
|
-
/** @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 });
|
|
2385
|
-
/** @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: { "
|
|
2387
|
+
/** @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 });
|
|
2388
|
+
/** @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 });
|
|
2386
2389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
|
|
2387
2390
|
type: Component,
|
|
2388
2391
|
args: [{ selector: 'mtx-datetimepicker-toggle', host: {
|
|
2389
2392
|
'class': 'mtx-datetimepicker-toggle',
|
|
2390
|
-
|
|
2391
|
-
// consumer may have provided, while still being able to receive focus.
|
|
2392
|
-
'[attr.tabindex]': 'disabled ? null : -1',
|
|
2393
|
+
'[attr.tabindex]': 'null',
|
|
2393
2394
|
'[class.mtx-datetimepicker-toggle-active]': 'datetimepicker && datetimepicker.opened',
|
|
2394
2395
|
'[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
|
|
2395
2396
|
'[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2397
|
+
// Used by the test harness to tie this toggle to its datetimepicker.
|
|
2398
|
+
'[attr.data-mtx-calendar]': 'datetimepicker ? datetimepicker.id : null',
|
|
2399
|
+
// Bind the `click` on the host, rather than the inner `button`, so that we can call
|
|
2400
|
+
// `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
|
|
2401
|
+
// it so that the input doesn't get focused automatically by the form field (See #21836).
|
|
2402
|
+
'(click)': '_open($event)',
|
|
2403
|
+
}, 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"] }]
|
|
2404
|
+
}], ctorParameters: function () {
|
|
2405
|
+
return [{ type: i1$1.MatDatepickerIntl }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
2406
|
+
type: Attribute,
|
|
2407
|
+
args: ['tabindex']
|
|
2408
|
+
}] }];
|
|
2409
|
+
}, propDecorators: { datetimepicker: [{
|
|
2399
2410
|
type: Input,
|
|
2400
2411
|
args: ['for']
|
|
2401
2412
|
}], tabIndex: [{
|