@angular/material 19.1.0-next.2 → 19.1.0-rc.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/LICENSE +1 -1
- package/autocomplete/index.d.ts +6 -6
- package/badge/index.d.ts +2 -2
- package/button/index.d.ts +6 -4
- package/checkbox/index.d.ts +4 -4
- package/chips/index.d.ts +3 -3
- package/core/theming/_theming.scss +1 -1
- package/datepicker/index.d.ts +16 -39
- package/expansion/index.d.ts +2 -0
- package/fesm2022/autocomplete.mjs +54 -50
- package/fesm2022/autocomplete.mjs.map +1 -1
- package/fesm2022/badge.mjs +12 -12
- package/fesm2022/badge.mjs.map +1 -1
- package/fesm2022/bottom-sheet.mjs +10 -10
- package/fesm2022/button-toggle.mjs +10 -10
- package/fesm2022/button.mjs +41 -39
- package/fesm2022/button.mjs.map +1 -1
- package/fesm2022/card.mjs +46 -46
- package/fesm2022/checkbox.mjs +16 -16
- package/fesm2022/checkbox.mjs.map +1 -1
- package/fesm2022/chips.mjs +42 -42
- package/fesm2022/chips.mjs.map +1 -1
- package/fesm2022/core.mjs +65 -65
- package/fesm2022/core.mjs.map +1 -1
- package/fesm2022/datepicker.mjs +790 -798
- package/fesm2022/datepicker.mjs.map +1 -1
- package/fesm2022/dialog.mjs +25 -25
- package/fesm2022/divider.mjs +7 -7
- package/fesm2022/expansion.mjs +30 -28
- package/fesm2022/expansion.mjs.map +1 -1
- package/fesm2022/form-field.mjs +41 -39
- package/fesm2022/form-field.mjs.map +1 -1
- package/fesm2022/grid-list.mjs +22 -22
- package/fesm2022/icon/testing.mjs +7 -7
- package/fesm2022/icon.mjs +12 -12
- package/fesm2022/icon.mjs.map +1 -1
- package/fesm2022/input.mjs +26 -32
- package/fesm2022/input.mjs.map +1 -1
- package/fesm2022/list.mjs +63 -59
- package/fesm2022/list.mjs.map +1 -1
- package/fesm2022/menu.mjs +178 -133
- package/fesm2022/menu.mjs.map +1 -1
- package/fesm2022/paginator.mjs +21 -24
- package/fesm2022/paginator.mjs.map +1 -1
- package/fesm2022/progress-bar.mjs +14 -12
- package/fesm2022/progress-bar.mjs.map +1 -1
- package/fesm2022/progress-spinner.mjs +9 -9
- package/fesm2022/progress-spinner.mjs.map +1 -1
- package/fesm2022/radio.mjs +19 -18
- package/fesm2022/radio.mjs.map +1 -1
- package/fesm2022/select.mjs +10 -10
- package/fesm2022/select.mjs.map +1 -1
- package/fesm2022/sidenav.mjs +138 -114
- package/fesm2022/sidenav.mjs.map +1 -1
- package/fesm2022/slide-toggle.mjs +16 -16
- package/fesm2022/slide-toggle.mjs.map +1 -1
- package/fesm2022/slider.mjs +40 -41
- package/fesm2022/slider.mjs.map +1 -1
- package/fesm2022/snack-bar.mjs +22 -22
- package/fesm2022/sort.mjs +14 -14
- package/fesm2022/sort.mjs.map +1 -1
- package/fesm2022/stepper.mjs +37 -37
- package/fesm2022/stepper.mjs.map +1 -1
- package/fesm2022/table.mjs +59 -70
- package/fesm2022/table.mjs.map +1 -1
- package/fesm2022/tabs.mjs +66 -74
- package/fesm2022/tabs.mjs.map +1 -1
- package/fesm2022/timepicker.mjs +21 -17
- package/fesm2022/timepicker.mjs.map +1 -1
- package/fesm2022/toolbar.mjs +12 -12
- package/fesm2022/toolbar.mjs.map +1 -1
- package/fesm2022/tooltip.mjs +37 -28
- package/fesm2022/tooltip.mjs.map +1 -1
- package/fesm2022/tree.mjs +25 -25
- package/form-field/index.d.ts +5 -4
- package/icon/index.d.ts +4 -4
- package/input/index.d.ts +8 -5
- package/list/index.d.ts +8 -5
- package/menu/index.d.ts +13 -14
- package/package.json +2 -2
- package/paginator/index.d.ts +5 -5
- package/progress-bar/index.d.ts +6 -4
- package/progress-spinner/index.d.ts +4 -4
- package/radio/index.d.ts +8 -6
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/index.mjs +1 -1
- package/select/index.d.ts +1 -1
- package/sidenav/index.d.ts +12 -10
- package/slide-toggle/index.d.ts +4 -4
- package/slider/index.d.ts +6 -3
- package/stepper/index.d.ts +6 -6
- package/tabs/index.d.ts +12 -10
- package/timepicker/index.d.ts +1 -0
- package/toolbar/index.d.ts +2 -2
- package/tooltip/index.d.ts +3 -0
package/fesm2022/datepicker.mjs
CHANGED
|
@@ -16,7 +16,7 @@ import { _CdkPrivateStyleLoader, _VisuallyHiddenLoader } from '@angular/cdk/priv
|
|
|
16
16
|
import { startWith, take, filter } from 'rxjs/operators';
|
|
17
17
|
import { coerceStringArray } from '@angular/cdk/coercion';
|
|
18
18
|
import { trigger, transition, animate, keyframes, style, state } from '@angular/animations';
|
|
19
|
-
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, NgForm, FormGroupDirective, NgControl
|
|
19
|
+
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, ControlContainer, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
|
|
20
20
|
import { MAT_FORM_FIELD, MatFormFieldControl } from '@angular/material/form-field';
|
|
21
21
|
import { MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
|
|
22
22
|
|
|
@@ -80,10 +80,10 @@ class MatDatepickerIntl {
|
|
|
80
80
|
formatYearRangeLabel(start, end) {
|
|
81
81
|
return `${start} to ${end}`;
|
|
82
82
|
}
|
|
83
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
84
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
84
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerIntl, providedIn: 'root' });
|
|
85
85
|
}
|
|
86
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerIntl, decorators: [{
|
|
87
87
|
type: Injectable,
|
|
88
88
|
args: [{ providedIn: 'root' }]
|
|
89
89
|
}] });
|
|
@@ -549,10 +549,10 @@ class MatCalendarBody {
|
|
|
549
549
|
}
|
|
550
550
|
return null;
|
|
551
551
|
}
|
|
552
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
553
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.2", type: MatCalendarBody, isStandalone: true, selector: "[mat-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "mat-calendar-body" }, exportAs: ["matCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"mat-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{label}}\n </td>\n </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n <!--\n This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n table cells is maintained by setting the top and bottom padding as a percentage of the width\n (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mat-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n <!--\n Each gridcell in the calendar contains a button, which signals to assistive technology that the\n cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n background.\n -->\n @for (item of row; track item.id; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"mat-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mat-calendar-body-cell\"\n [ngClass]=\"item.cssClasses\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mat-calendar-body-disabled]=\"!item.enabled\"\n [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n (click)=\"_cellClicked(item, $event)\"\n (focus)=\"_emitActiveDateChange(item, $event)\">\n <span class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n {{item.displayValue}}\n </span>\n <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{startDateAccessibleName}}\n</span>\n<span [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{endDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonStartDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{comparisonDateAccessibleName}} {{startDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonEndDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{comparisonDateAccessibleName}} {{endDateAccessibleName}}\n</span>\n", styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mat-calendar-body-label{height:0;line-height:0;text-align:start;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:inherit;margin:0;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview{color:var(--mat-datepicker-calendar-date-preview-state-outline-color, var(--mat-sys-primary))}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-disabled-state-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mat-calendar-body-disabled{opacity:.5}}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px;color:var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mat-datepicker-calendar-date-outline-color, transparent)}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media(forced-colors: active){.mat-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media(hover: hover){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-selected.mat-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mat-datepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}.mat-calendar-body-in-range::before{background:var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container))}.mat-calendar-body-comparison-bridge-start::before,[dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%)}.mat-calendar-body-comparison-bridge-end::before,[dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%)}.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:var(--mat-datepicker-calendar-date-in-overlap-range-state-background-color, var(--mat-sys-secondary-container))}.mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:var(--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color, var(--mat-sys-secondary))}@media(forced-colors: active){.mat-datepicker-popup:not(:empty),.mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-selected{background:none}.mat-calendar-body-in-range::before,.mat-calendar-body-comparison-bridge-start::before,.mat-calendar-body-comparison-bridge-end::before{border-top:solid 1px;border-bottom:solid 1px}.mat-calendar-body-range-start::before{border-left:solid 1px}[dir=rtl] .mat-calendar-body-range-start::before{border-left:0;border-right:solid 1px}.mat-calendar-body-range-end::before{border-right:solid 1px}[dir=rtl] .mat-calendar-body-range-end::before{border-right:0;border-left:solid 1px}.mat-calendar-body-in-comparison-range::before{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-comparison-start::before{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-start::before{border-left:0;border-right:dashed 1px}.mat-calendar-body-comparison-end::before{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-end::before{border-right:0;border-left:dashed 1px}}"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
552
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
553
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.3", type: MatCalendarBody, isStandalone: true, selector: "[mat-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", startValue: "startValue", endValue: "endValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", isRange: "isRange", cellAspectRatio: "cellAspectRatio", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", previewStart: "previewStart", previewEnd: "previewEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedValueChange: "selectedValueChange", previewChange: "previewChange", activeDateChange: "activeDateChange", dragStarted: "dragStarted", dragEnded: "dragEnded" }, host: { classAttribute: "mat-calendar-body" }, exportAs: ["matCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!--\n If there's not enough space in the first row, create a separate label row. We mark this row as\n aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n <tr aria-hidden=\"true\">\n <td class=\"mat-calendar-body-label\"\n [attr.colspan]=\"numCols\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{label}}\n </td>\n </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track _trackRow(row); let rowIndex = $index) {\n <tr role=\"row\">\n <!--\n This cell is purely decorative, but we can't put `aria-hidden` or `role=\"presentation\"` on it,\n because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the\n table cells is maintained by setting the top and bottom padding as a percentage of the width\n (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mat-calendar-body-label\"\n [attr.colspan]=\"_firstRowOffset\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\">\n {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n </td>\n }\n <!--\n Each gridcell in the calendar contains a button, which signals to assistive technology that the\n cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for\n background.\n -->\n @for (item of row; track item.id; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"mat-calendar-body-cell-container\"\n [style.width]=\"_cellWidth\"\n [style.paddingTop]=\"_cellPadding\"\n [style.paddingBottom]=\"_cellPadding\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n >\n <button\n type=\"button\"\n class=\"mat-calendar-body-cell\"\n [ngClass]=\"item.cssClasses\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mat-calendar-body-disabled]=\"!item.enabled\"\n [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n [attr.aria-pressed]=\"_isSelected(item.compareValue)\"\n [attr.aria-current]=\"todayValue === item.compareValue ? 'date' : null\"\n [attr.aria-describedby]=\"_getDescribedby(item.compareValue)\"\n (click)=\"_cellClicked(item, $event)\"\n (focus)=\"_emitActiveDateChange(item, $event)\">\n <span class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n {{item.displayValue}}\n </span>\n <span class=\"mat-calendar-body-cell-preview\" aria-hidden=\"true\"></span>\n </button>\n </td>\n }\n </tr>\n}\n\n<span [id]=\"_startDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{startDateAccessibleName}}\n</span>\n<span [id]=\"_endDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{endDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonStartDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{comparisonDateAccessibleName}} {{startDateAccessibleName}}\n</span>\n<span [id]=\"_comparisonEndDateLabelId\" class=\"mat-calendar-body-hidden-label\">\n {{comparisonDateAccessibleName}} {{endDateAccessibleName}}\n</span>\n", styles: [".mat-calendar-body{min-width:224px}.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-outline-color, var(--mat-sys-primary))}.mat-calendar-body-label{height:0;line-height:0;text-align:start;padding-left:4.7142857143%;padding-right:4.7142857143%;font-size:var(--mat-datepicker-calendar-body-label-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-body-label-text-weight, var(--mat-sys-title-small-weight));color:var(--mat-datepicker-calendar-body-label-text-color, var(--mat-sys-on-surface))}.mat-calendar-body-hidden-label{display:none}.mat-calendar-body-cell-container{position:relative;height:0;line-height:0}.mat-calendar-body-cell{position:absolute;top:0;left:0;width:100%;height:100%;background:none;text-align:center;outline:none;font-family:inherit;margin:0;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size));-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mat-calendar-body-cell::-moz-focus-inner{border:0}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-cell-preview{content:\"\";position:absolute;top:5%;left:0;z-index:0;box-sizing:border-box;display:block;height:90%;width:100%}.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-start::after,.mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,.mat-calendar-body-comparison-start::after,.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:5%;width:95%;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-start:not(.mat-calendar-body-comparison-bridge-start)::before,[dir=rtl] .mat-calendar-body-comparison-start::after,[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{left:0;border-radius:0;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,.mat-calendar-body-comparison-end::after,.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}[dir=rtl] .mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,[dir=rtl] .mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-end:not(.mat-calendar-body-comparison-bridge-end)::before,[dir=rtl] .mat-calendar-body-comparison-end::after,[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{left:5%;border-radius:0;border-top-left-radius:999px;border-bottom-left-radius:999px}[dir=rtl] .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after{width:95%;border-top-right-radius:999px;border-bottom-right-radius:999px}.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,[dir=rtl] .mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after,[dir=rtl] .mat-calendar-body-comparison-end.mat-calendar-body-range-start::after{width:90%}.mat-calendar-body-in-preview{color:var(--mat-datepicker-calendar-date-preview-state-outline-color, var(--mat-sys-primary))}.mat-calendar-body-in-preview .mat-calendar-body-cell-preview{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-preview-start .mat-calendar-body-cell-preview{border-left:0;border-right:dashed 1px}.mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-preview-end .mat-calendar-body-cell-preview{border-right:0;border-left:dashed 1px}.mat-calendar-body-disabled{cursor:default}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:var(--mat-datepicker-calendar-date-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:var(--mat-datepicker-calendar-date-today-disabled-state-outline-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}@media(forced-colors: active){.mat-calendar-body-disabled{opacity:.5}}.mat-calendar-body-cell-content{top:5%;left:5%;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-style:solid;border-radius:999px;color:var(--mat-datepicker-calendar-date-text-color, var(--mat-sys-on-surface));border-color:var(--mat-datepicker-calendar-date-outline-color, transparent)}.mat-calendar-body-cell-content.mat-focus-indicator{position:absolute}@media(forced-colors: active){.mat-calendar-body-cell-content{border:none}}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-focus-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%), transparent))}@media(hover: hover){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--mat-datepicker-calendar-date-hover-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}}.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-state-background-color, var(--mat-sys-primary));color:var(--mat-datepicker-calendar-date-selected-state-text-color, var(--mat-sys-on-primary))}.mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:var(--mat-datepicker-calendar-date-selected-disabled-state-background-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-calendar-body-selected.mat-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mat-datepicker-calendar-date-today-selected-state-outline-color, var(--mat-sys-primary))}.mat-calendar-body-in-range::before{background:var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container))}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container))}.mat-calendar-body-comparison-bridge-start::before,[dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%)}.mat-calendar-body-comparison-bridge-end::before,[dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, var(--mat-datepicker-calendar-date-in-range-state-background-color, var(--mat-sys-primary-container)) 50%, var(--mat-datepicker-calendar-date-in-comparison-range-state-background-color, var(--mat-sys-tertiary-container)) 50%)}.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:var(--mat-datepicker-calendar-date-in-overlap-range-state-background-color, var(--mat-sys-secondary-container))}.mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:var(--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color, var(--mat-sys-secondary))}@media(forced-colors: active){.mat-datepicker-popup:not(:empty),.mat-calendar-body-cell:not(.mat-calendar-body-in-range) .mat-calendar-body-selected{outline:solid 1px}.mat-calendar-body-today{outline:dotted 1px}.mat-calendar-body-cell::before,.mat-calendar-body-cell::after,.mat-calendar-body-selected{background:none}.mat-calendar-body-in-range::before,.mat-calendar-body-comparison-bridge-start::before,.mat-calendar-body-comparison-bridge-end::before{border-top:solid 1px;border-bottom:solid 1px}.mat-calendar-body-range-start::before{border-left:solid 1px}[dir=rtl] .mat-calendar-body-range-start::before{border-left:0;border-right:solid 1px}.mat-calendar-body-range-end::before{border-right:solid 1px}[dir=rtl] .mat-calendar-body-range-end::before{border-right:0;border-left:solid 1px}.mat-calendar-body-in-comparison-range::before{border-top:dashed 1px;border-bottom:dashed 1px}.mat-calendar-body-comparison-start::before{border-left:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-start::before{border-left:0;border-right:dashed 1px}.mat-calendar-body-comparison-end::before{border-right:dashed 1px}[dir=rtl] .mat-calendar-body-comparison-end::before{border-right:0;border-left:dashed 1px}}"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
554
554
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatCalendarBody, decorators: [{
|
|
556
556
|
type: Component,
|
|
557
557
|
args: [{ selector: '[mat-calendar-body]', host: {
|
|
558
558
|
'class': 'mat-calendar-body',
|
|
@@ -699,10 +699,10 @@ class MatDateSelectionModel {
|
|
|
699
699
|
_isValidDateInstance(date) {
|
|
700
700
|
return this._adapter.isDateInstance(date) && this._adapter.isValid(date);
|
|
701
701
|
}
|
|
702
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
703
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
702
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateSelectionModel, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable });
|
|
703
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateSelectionModel });
|
|
704
704
|
}
|
|
705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
705
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateSelectionModel, decorators: [{
|
|
706
706
|
type: Injectable
|
|
707
707
|
}], ctorParameters: () => [{ type: undefined }, { type: i1.DateAdapter }] });
|
|
708
708
|
/**
|
|
@@ -737,10 +737,10 @@ class MatSingleDateSelectionModel extends MatDateSelectionModel {
|
|
|
737
737
|
clone.updateSelection(this.selection, this);
|
|
738
738
|
return clone;
|
|
739
739
|
}
|
|
740
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
741
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
740
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatSingleDateSelectionModel, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
741
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatSingleDateSelectionModel });
|
|
742
742
|
}
|
|
743
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
743
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatSingleDateSelectionModel, decorators: [{
|
|
744
744
|
type: Injectable
|
|
745
745
|
}], ctorParameters: () => [{ type: i1.DateAdapter }] });
|
|
746
746
|
/**
|
|
@@ -800,10 +800,10 @@ class MatRangeDateSelectionModel extends MatDateSelectionModel {
|
|
|
800
800
|
clone.updateSelection(this.selection, this);
|
|
801
801
|
return clone;
|
|
802
802
|
}
|
|
803
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
804
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
803
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatRangeDateSelectionModel, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
804
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatRangeDateSelectionModel });
|
|
805
805
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatRangeDateSelectionModel, decorators: [{
|
|
807
807
|
type: Injectable
|
|
808
808
|
}], ctorParameters: () => [{ type: i1.DateAdapter }] });
|
|
809
809
|
/** @docs-private */
|
|
@@ -902,10 +902,10 @@ class DefaultMatCalendarRangeStrategy {
|
|
|
902
902
|
}
|
|
903
903
|
return new DateRange(start, end);
|
|
904
904
|
}
|
|
905
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
906
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
905
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: DefaultMatCalendarRangeStrategy, deps: [{ token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
906
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: DefaultMatCalendarRangeStrategy });
|
|
907
907
|
}
|
|
908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: DefaultMatCalendarRangeStrategy, decorators: [{
|
|
909
909
|
type: Injectable
|
|
910
910
|
}], ctorParameters: () => [{ type: i1.DateAdapter }] });
|
|
911
911
|
/** @docs-private */
|
|
@@ -1347,10 +1347,10 @@ class MatMonthView {
|
|
|
1347
1347
|
_clearPreview() {
|
|
1348
1348
|
this._previewStart = this._previewEnd = null;
|
|
1349
1349
|
}
|
|
1350
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
1351
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.
|
|
1350
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatMonthView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.3", type: MatMonthView, isStandalone: true, selector: "mat-month-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName", activeDrag: "activeDrag" }, outputs: { selectedChange: "selectedChange", _userSelection: "_userSelection", dragStarted: "dragStarted", dragEnded: "dragEnded", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: MatCalendarBody, descendants: true }], exportAs: ["matMonthView"], usesOnChanges: true, ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n <thead class=\"mat-calendar-table-header\">\n <tr>\n @for (day of _weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{day.long}}</span>\n <span aria-hidden=\"true\">{{day.narrow}}</span>\n </th>\n }\n </tr>\n <tr aria-hidden=\"true\"><th class=\"mat-calendar-table-header-divider\" colspan=\"7\"></th></tr>\n </thead>\n <tbody mat-calendar-body\n [label]=\"_monthLabel\"\n [rows]=\"_weeks\"\n [todayValue]=\"_todayDate!\"\n [startValue]=\"_rangeStart!\"\n [endValue]=\"_rangeEnd!\"\n [comparisonStart]=\"_comparisonRangeStart\"\n [comparisonEnd]=\"_comparisonRangeEnd\"\n [previewStart]=\"_previewStart\"\n [previewEnd]=\"_previewEnd\"\n [isRange]=\"_isRange\"\n [labelMinRequiredCells]=\"3\"\n [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n [startDateAccessibleName]=\"startDateAccessibleName\"\n [endDateAccessibleName]=\"endDateAccessibleName\"\n (selectedValueChange)=\"_dateSelected($event)\"\n (activeDateChange)=\"_updateActiveDate($event)\"\n (previewChange)=\"_previewChanged($event)\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"_dragEnded($event)\"\n (keyup)=\"_handleCalendarBodyKeyup($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", dependencies: [{ kind: "component", type: MatCalendarBody, selector: "[mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1352
1352
|
}
|
|
1353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
1353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatMonthView, decorators: [{
|
|
1354
1354
|
type: Component,
|
|
1355
1355
|
args: [{ selector: 'mat-month-view', exportAs: 'matMonthView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n <thead class=\"mat-calendar-table-header\">\n <tr>\n @for (day of _weekdays; track day.id) {\n <th scope=\"col\">\n <span class=\"cdk-visually-hidden\">{{day.long}}</span>\n <span aria-hidden=\"true\">{{day.narrow}}</span>\n </th>\n }\n </tr>\n <tr aria-hidden=\"true\"><th class=\"mat-calendar-table-header-divider\" colspan=\"7\"></th></tr>\n </thead>\n <tbody mat-calendar-body\n [label]=\"_monthLabel\"\n [rows]=\"_weeks\"\n [todayValue]=\"_todayDate!\"\n [startValue]=\"_rangeStart!\"\n [endValue]=\"_rangeEnd!\"\n [comparisonStart]=\"_comparisonRangeStart\"\n [comparisonEnd]=\"_comparisonRangeEnd\"\n [previewStart]=\"_previewStart\"\n [previewEnd]=\"_previewEnd\"\n [isRange]=\"_isRange\"\n [labelMinRequiredCells]=\"3\"\n [activeCell]=\"_dateAdapter.getDate(activeDate) - 1\"\n [startDateAccessibleName]=\"startDateAccessibleName\"\n [endDateAccessibleName]=\"endDateAccessibleName\"\n (selectedValueChange)=\"_dateSelected($event)\"\n (activeDateChange)=\"_updateActiveDate($event)\"\n (previewChange)=\"_previewChanged($event)\"\n (dragStarted)=\"dragStarted.emit($event)\"\n (dragEnded)=\"_dragEnded($event)\"\n (keyup)=\"_handleCalendarBodyKeyup($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n" }]
|
|
1356
1356
|
}], ctorParameters: () => [], propDecorators: { activeDate: [{
|
|
@@ -1651,10 +1651,10 @@ class MatMultiYearView {
|
|
|
1651
1651
|
this._selectedYear = this._dateAdapter.getYear(value);
|
|
1652
1652
|
}
|
|
1653
1653
|
}
|
|
1654
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
1655
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
1654
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatMultiYearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1655
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatMultiYearView, isStandalone: true, selector: "mat-multi-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: MatCalendarBody, descendants: true }], exportAs: ["matMultiYearView"], ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n </thead>\n <tbody mat-calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"_selectedYear!\"\n [endValue]=\"_selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_getActiveCell()\"\n (selectedValueChange)=\"_yearSelected($event)\"\n (activeDateChange)=\"_updateActiveDate($event)\"\n (keyup)=\"_handleCalendarBodyKeyup($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", dependencies: [{ kind: "component", type: MatCalendarBody, selector: "[mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1656
1656
|
}
|
|
1657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
1657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatMultiYearView, decorators: [{
|
|
1658
1658
|
type: Component,
|
|
1659
1659
|
args: [{ selector: 'mat-multi-year-view', exportAs: 'matMultiYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n </thead>\n <tbody mat-calendar-body\n [rows]=\"_years\"\n [todayValue]=\"_todayYear\"\n [startValue]=\"_selectedYear!\"\n [endValue]=\"_selectedYear!\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_getActiveCell()\"\n (selectedValueChange)=\"_yearSelected($event)\"\n (activeDateChange)=\"_updateActiveDate($event)\"\n (keyup)=\"_handleCalendarBodyKeyup($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n" }]
|
|
1660
1660
|
}], ctorParameters: () => [], propDecorators: { activeDate: [{
|
|
@@ -2005,10 +2005,10 @@ class MatYearView {
|
|
|
2005
2005
|
this._selectedMonth = this._getMonthInCurrentYear(value);
|
|
2006
2006
|
}
|
|
2007
2007
|
}
|
|
2008
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2009
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
2008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatYearView, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatYearView, isStandalone: true, selector: "mat-year-view", inputs: { activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", monthSelected: "monthSelected", activeDateChange: "activeDateChange" }, viewQueries: [{ propertyName: "_matCalendarBody", first: true, predicate: MatCalendarBody, descendants: true }], exportAs: ["matYearView"], ngImport: i0, template: "<table class=\"mat-calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n </thead>\n <tbody mat-calendar-body\n [label]=\"_yearLabel\"\n [rows]=\"_months\"\n [todayValue]=\"_todayMonth!\"\n [startValue]=\"_selectedMonth!\"\n [endValue]=\"_selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n (selectedValueChange)=\"_monthSelected($event)\"\n (activeDateChange)=\"_updateActiveDate($event)\"\n (keyup)=\"_handleCalendarBodyKeyup($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n", dependencies: [{ kind: "component", type: MatCalendarBody, selector: "[mat-calendar-body]", inputs: ["label", "rows", "todayValue", "startValue", "endValue", "labelMinRequiredCells", "numCols", "activeCell", "isRange", "cellAspectRatio", "comparisonStart", "comparisonEnd", "previewStart", "previewEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedValueChange", "previewChange", "activeDateChange", "dragStarted", "dragEnded"], exportAs: ["matCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2010
2010
|
}
|
|
2011
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatYearView, decorators: [{
|
|
2012
2012
|
type: Component,
|
|
2013
2013
|
args: [{ selector: 'mat-year-view', exportAs: 'matYearView', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCalendarBody], template: "<table class=\"mat-calendar-table\" role=\"grid\">\n <thead aria-hidden=\"true\" class=\"mat-calendar-table-header\">\n <tr><th class=\"mat-calendar-table-header-divider\" colspan=\"4\"></th></tr>\n </thead>\n <tbody mat-calendar-body\n [label]=\"_yearLabel\"\n [rows]=\"_months\"\n [todayValue]=\"_todayMonth!\"\n [startValue]=\"_selectedMonth!\"\n [endValue]=\"_selectedMonth!\"\n [labelMinRequiredCells]=\"2\"\n [numCols]=\"4\"\n [cellAspectRatio]=\"4 / 7\"\n [activeCell]=\"_dateAdapter.getMonth(activeDate)\"\n (selectedValueChange)=\"_monthSelected($event)\"\n (activeDateChange)=\"_updateActiveDate($event)\"\n (keyup)=\"_handleCalendarBodyKeyup($event)\"\n (keydown)=\"_handleCalendarBodyKeydown($event)\">\n </tbody>\n</table>\n" }]
|
|
2014
2014
|
}], ctorParameters: () => [], propDecorators: { activeDate: [{
|
|
@@ -2152,10 +2152,10 @@ class MatCalendarHeader {
|
|
|
2152
2152
|
return [minYearLabel, maxYearLabel];
|
|
2153
2153
|
}
|
|
2154
2154
|
_periodButtonLabelId = inject(_IdGenerator).getId('mat-calendar-period-label-');
|
|
2155
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2156
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
2155
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2156
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatCalendarHeader, isStandalone: true, selector: "mat-calendar-header", exportAs: ["matCalendarHeader"], ngImport: i0, template: "<div class=\"mat-calendar-header\">\n <div class=\"mat-calendar-controls\">\n <!-- [Firefox Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1880533]\n Relocated label next to related button and made visually hidden via cdk-visually-hidden\n to enable label to appear in a11y tree for SR when using Firefox -->\n <span [id]=\"_periodButtonLabelId\" class=\"cdk-visually-hidden\" aria-live=\"polite\">{{periodButtonDescription}}</span>\n <button mat-button type=\"button\" class=\"mat-calendar-period-button\"\n (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n [attr.aria-describedby]=\"_periodButtonLabelId\">\n <span aria-hidden=\"true\">{{periodButtonText}}</span>\n <svg class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"calendar.currentView !== 'month'\"\n viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\">\n <polygon points=\"0,0 5,5 10,0\"/>\n </svg>\n </button>\n\n <div class=\"mat-calendar-spacer\"></div>\n\n <ng-content></ng-content>\n\n <button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\"\n [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n [attr.aria-label]=\"prevButtonLabel\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/>\n </svg>\n </button>\n\n <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\"\n [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n [attr.aria-label]=\"nextButtonLabel\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/>\n </svg>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2157
2157
|
}
|
|
2158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatCalendarHeader, decorators: [{
|
|
2159
2159
|
type: Component,
|
|
2160
2160
|
args: [{ selector: 'mat-calendar-header', exportAs: 'matCalendarHeader', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton], template: "<div class=\"mat-calendar-header\">\n <div class=\"mat-calendar-controls\">\n <!-- [Firefox Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1880533]\n Relocated label next to related button and made visually hidden via cdk-visually-hidden\n to enable label to appear in a11y tree for SR when using Firefox -->\n <span [id]=\"_periodButtonLabelId\" class=\"cdk-visually-hidden\" aria-live=\"polite\">{{periodButtonDescription}}</span>\n <button mat-button type=\"button\" class=\"mat-calendar-period-button\"\n (click)=\"currentPeriodClicked()\" [attr.aria-label]=\"periodButtonLabel\"\n [attr.aria-describedby]=\"_periodButtonLabelId\">\n <span aria-hidden=\"true\">{{periodButtonText}}</span>\n <svg class=\"mat-calendar-arrow\" [class.mat-calendar-invert]=\"calendar.currentView !== 'month'\"\n viewBox=\"0 0 10 5\" focusable=\"false\" aria-hidden=\"true\">\n <polygon points=\"0,0 5,5 10,0\"/>\n </svg>\n </button>\n\n <div class=\"mat-calendar-spacer\"></div>\n\n <ng-content></ng-content>\n\n <button mat-icon-button type=\"button\" class=\"mat-calendar-previous-button\"\n [disabled]=\"!previousEnabled()\" (click)=\"previousClicked()\"\n [attr.aria-label]=\"prevButtonLabel\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"/>\n </svg>\n </button>\n\n <button mat-icon-button type=\"button\" class=\"mat-calendar-next-button\"\n [disabled]=\"!nextEnabled()\" (click)=\"nextClicked()\"\n [attr.aria-label]=\"nextButtonLabel\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"/>\n </svg>\n </button>\n </div>\n</div>\n" }]
|
|
2161
2161
|
}], ctorParameters: () => [] });
|
|
@@ -2395,10 +2395,10 @@ class MatCalendar {
|
|
|
2395
2395
|
// only the first component type. See https://github.com/angular/components/issues/22996.
|
|
2396
2396
|
return this.monthView || this.yearView || this.multiYearView;
|
|
2397
2397
|
}
|
|
2398
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2399
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.
|
|
2398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.3", type: MatCalendar, isStandalone: true, selector: "mat-calendar", inputs: { headerComponent: "headerComponent", startAt: "startAt", startView: "startView", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd", startDateAccessibleName: "startDateAccessibleName", endDateAccessibleName: "endDateAccessibleName" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", viewChanged: "viewChanged", _userSelection: "_userSelection", _userDragDrop: "_userDragDrop" }, host: { classAttribute: "mat-calendar" }, providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER], viewQueries: [{ propertyName: "monthView", first: true, predicate: MatMonthView, descendants: true }, { propertyName: "yearView", first: true, predicate: MatYearView, descendants: true }, { propertyName: "multiYearView", first: true, predicate: MatMultiYearView, descendants: true }], exportAs: ["matCalendar"], usesOnChanges: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n @switch (currentView) {\n @case ('month') {\n <mat-month-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [dateClass]=\"dateClass\"\n [comparisonStart]=\"comparisonStart\"\n [comparisonEnd]=\"comparisonEnd\"\n [startDateAccessibleName]=\"startDateAccessibleName\"\n [endDateAccessibleName]=\"endDateAccessibleName\"\n (_userSelection)=\"_dateSelected($event)\"\n (dragStarted)=\"_dragStarted($event)\"\n (dragEnded)=\"_dragEnded($event)\"\n [activeDrag]=\"_activeDrag\"></mat-month-view>\n }\n\n @case ('year') {\n <mat-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [dateClass]=\"dateClass\"\n (monthSelected)=\"_monthSelectedInYearView($event)\"\n (selectedChange)=\"_goToDateInView($event, 'month')\"></mat-year-view>\n }\n\n @case ('multi-year') {\n <mat-multi-year-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [dateClass]=\"dateClass\"\n (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n (selectedChange)=\"_goToDateInView($event, 'year')\"></mat-multi-year-view>\n }\n }\n</div>\n", styles: [".mat-calendar{display:block;line-height:normal;font-family:var(--mat-datepicker-calendar-text-font, var(--mat-sys-body-medium-font));font-size:var(--mat-datepicker-calendar-text-size, var(--mat-sys-body-medium-size))}.mat-calendar-header{padding:8px 8px 0 8px}.mat-calendar-content{padding:0 8px 8px 8px;outline:none}.mat-calendar-controls{display:flex;align-items:center;margin:5% calc(4.7142857143% - 16px)}.mat-calendar-spacer{flex:1 1 auto}.mat-calendar-period-button{min-width:0;margin:0 8px;font-size:var(--mat-datepicker-calendar-period-button-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-period-button-text-weight, var(--mat-sys-title-small-weight));--mdc-text-button-label-text-color:var(--mat-datepicker-calendar-period-button-text-color, var(--mat-sys-on-surface-variant))}.mat-calendar-arrow{display:inline-block;width:10px;height:5px;margin:0 0 0 5px;vertical-align:middle;fill:var(--mat-datepicker-calendar-period-button-icon-color, var(--mat-sys-on-surface-variant))}.mat-calendar-arrow.mat-calendar-invert{transform:rotate(180deg)}[dir=rtl] .mat-calendar-arrow{margin:0 5px 0 0}@media(forced-colors: active){.mat-calendar-arrow{fill:CanvasText}}.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled),.mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled){color:var(--mat-datepicker-calendar-navigation-button-icon-color, var(--mat-sys-on-surface-variant))}[dir=rtl] .mat-calendar-previous-button,[dir=rtl] .mat-calendar-next-button{transform:rotate(180deg)}.mat-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mat-calendar-table-header th{text-align:center;padding:0 0 8px 0;color:var(--mat-datepicker-calendar-header-text-color, var(--mat-sys-on-surface-variant));font-size:var(--mat-datepicker-calendar-header-text-size, var(--mat-sys-title-small-size));font-weight:var(--mat-datepicker-calendar-header-text-weight, var(--mat-sys-title-small-weight))}.mat-calendar-table-header-divider{position:relative;height:1px}.mat-calendar-table-header-divider::after{content:\"\";position:absolute;top:0;left:-8px;right:-8px;height:1px;background:var(--mat-datepicker-calendar-header-divider-color, transparent)}.mat-calendar-body-cell-content::before{margin:calc(calc(var(--mat-focus-indicator-border-width, 3px) + 3px)*-1)}.mat-calendar-body-cell:focus .mat-focus-indicator::before{content:\"\"}"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: MatMonthView, selector: "mat-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName", "activeDrag"], outputs: ["selectedChange", "_userSelection", "dragStarted", "dragEnded", "activeDateChange"], exportAs: ["matMonthView"] }, { kind: "component", type: MatYearView, selector: "mat-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "monthSelected", "activeDateChange"], exportAs: ["matYearView"] }, { kind: "component", type: MatMultiYearView, selector: "mat-multi-year-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "yearSelected", "activeDateChange"], exportAs: ["matMultiYearView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2400
2400
|
}
|
|
2401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatCalendar, decorators: [{
|
|
2402
2402
|
type: Component,
|
|
2403
2403
|
args: [{ selector: 'mat-calendar', host: {
|
|
2404
2404
|
'class': 'mat-calendar',
|
|
@@ -2514,10 +2514,10 @@ class MatDatepickerContent {
|
|
|
2514
2514
|
_calendar;
|
|
2515
2515
|
/**
|
|
2516
2516
|
* Theme color of the internal calendar. This API is supported in M2 themes
|
|
2517
|
-
* only, it has no effect in M3 themes.
|
|
2517
|
+
* only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
|
|
2518
2518
|
*
|
|
2519
2519
|
* For information on applying color variants in M3, see
|
|
2520
|
-
* https://material.angular.io/guide/theming#
|
|
2520
|
+
* https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
|
|
2521
2521
|
*/
|
|
2522
2522
|
color;
|
|
2523
2523
|
/** Reference to the datepicker that created the overlay. */
|
|
@@ -2625,10 +2625,10 @@ class MatDatepickerContent {
|
|
|
2625
2625
|
this._changeDetectorRef.detectChanges();
|
|
2626
2626
|
}
|
|
2627
2627
|
}
|
|
2628
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
2628
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepickerContent, isStandalone: true, selector: "mat-datepicker-content", inputs: { color: "color" }, host: { listeners: { "@transformPanel.start": "_handleAnimationEvent($event)", "@transformPanel.done": "_handleAnimationEvent($event)" }, properties: { "class": "color ? \"mat-\" + color : \"\"", "@transformPanel": "_animationState", "class.mat-datepicker-content-touch": "datepicker.touchUi" }, classAttribute: "mat-datepicker-content" }, viewQueries: [{ propertyName: "_calendar", first: true, predicate: MatCalendar, descendants: true }], exportAs: ["matDatepickerContent"], ngImport: i0, template: "<div\n cdkTrapFocus\n role=\"dialog\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"_dialogLabelId ?? undefined\"\n class=\"mat-datepicker-content-container\"\n [class.mat-datepicker-content-container-with-custom-header]=\"datepicker.calendarHeaderComponent\"\n [class.mat-datepicker-content-container-with-actions]=\"_actionsPortal\">\n <mat-calendar\n [id]=\"datepicker.id\"\n [class]=\"datepicker.panelClass\"\n [startAt]=\"datepicker.startAt\"\n [startView]=\"datepicker.startView\"\n [minDate]=\"datepicker._getMinDate()\"\n [maxDate]=\"datepicker._getMaxDate()\"\n [dateFilter]=\"datepicker._getDateFilter()\"\n [headerComponent]=\"datepicker.calendarHeaderComponent\"\n [selected]=\"_getSelected()\"\n [dateClass]=\"datepicker.dateClass\"\n [comparisonStart]=\"comparisonStart\"\n [comparisonEnd]=\"comparisonEnd\"\n [@fadeInCalendar]=\"'enter'\"\n [startDateAccessibleName]=\"startDateAccessibleName\"\n [endDateAccessibleName]=\"endDateAccessibleName\"\n (yearSelected)=\"datepicker._selectYear($event)\"\n (monthSelected)=\"datepicker._selectMonth($event)\"\n (viewChanged)=\"datepicker._viewChanged($event)\"\n (_userSelection)=\"_handleUserSelection($event)\"\n (_userDragDrop)=\"_handleUserDragDrop($event)\"></mat-calendar>\n\n <ng-template [cdkPortalOutlet]=\"_actionsPortal\"></ng-template>\n\n <!-- Invisible close button for screen reader users. -->\n <button\n type=\"button\"\n mat-raised-button\n [color]=\"color || 'primary'\"\n class=\"mat-datepicker-close-button\"\n [class.cdk-visually-hidden]=\"!_closeButtonFocused\"\n (focus)=\"_closeButtonFocused = true\"\n (blur)=\"_closeButtonFocused = false\"\n (click)=\"datepicker.close()\">{{ _closeButtonText }}</button>\n</div>\n", styles: [".mat-datepicker-content{display:block;border-radius:4px;background-color:var(--mat-datepicker-calendar-container-background-color, var(--mat-sys-surface-container-high));color:var(--mat-datepicker-calendar-container-text-color, var(--mat-sys-on-surface));box-shadow:var(--mat-datepicker-calendar-container-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));border-radius:var(--mat-datepicker-calendar-container-shape, var(--mat-sys-corner-large))}.mat-datepicker-content .mat-calendar{width:296px;height:354px}.mat-datepicker-content .mat-datepicker-content-container-with-custom-header .mat-calendar{height:auto}.mat-datepicker-content .mat-datepicker-close-button{position:absolute;top:100%;left:0;margin-top:8px}.ng-animating .mat-datepicker-content .mat-datepicker-close-button{display:none}.mat-datepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mat-datepicker-content-touch{display:block;max-height:80vh;box-shadow:var(--mat-datepicker-calendar-container-touch-elevation-shadow, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));border-radius:var(--mat-datepicker-calendar-container-touch-shape, var(--mat-sys-corner-extra-large));position:relative;overflow:visible}.mat-datepicker-content-touch .mat-datepicker-content-container{min-height:312px;max-height:788px;min-width:250px;max-width:750px}.mat-datepicker-content-touch .mat-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mat-datepicker-content-touch .mat-datepicker-content-container{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-datepicker-content-touch .mat-datepicker-content-container{width:80vw;height:100vw}.mat-datepicker-content-touch .mat-datepicker-content-container-with-actions{height:115vw}}"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }], animations: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2630
2630
|
}
|
|
2631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
2631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerContent, decorators: [{
|
|
2632
2632
|
type: Component,
|
|
2633
2633
|
args: [{ selector: 'mat-datepicker-content', host: {
|
|
2634
2634
|
'class': 'mat-datepicker-content',
|
|
@@ -2670,10 +2670,10 @@ class MatDatepickerBase {
|
|
|
2670
2670
|
startView = 'month';
|
|
2671
2671
|
/**
|
|
2672
2672
|
* Theme color of the datepicker's calendar. This API is supported in M2 themes only, it
|
|
2673
|
-
* has no effect in M3 themes.
|
|
2673
|
+
* has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/datepicker/styling.
|
|
2674
2674
|
*
|
|
2675
2675
|
* For information on applying color variants in M3, see
|
|
2676
|
-
* https://material.angular.io/guide/theming#
|
|
2676
|
+
* https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
|
|
2677
2677
|
*/
|
|
2678
2678
|
get color() {
|
|
2679
2679
|
return (this._color || (this.datepickerInput ? this.datepickerInput.getThemePalette() : undefined));
|
|
@@ -3044,10 +3044,10 @@ class MatDatepickerBase {
|
|
|
3044
3044
|
ctrlShiftMetaModifiers.every((modifier) => !hasModifierKey(event, modifier))));
|
|
3045
3045
|
})));
|
|
3046
3046
|
}
|
|
3047
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3048
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-next.
|
|
3047
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3048
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-next.3", type: MatDatepickerBase, isStandalone: true, inputs: { calendarHeaderComponent: "calendarHeaderComponent", startAt: "startAt", startView: "startView", color: "color", touchUi: ["touchUi", "touchUi", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], xPosition: "xPosition", yPosition: "yPosition", restoreFocus: ["restoreFocus", "restoreFocus", booleanAttribute], dateClass: "dateClass", panelClass: "panelClass", opened: ["opened", "opened", booleanAttribute] }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected", viewChanged: "viewChanged", openedStream: "opened", closedStream: "closed" }, usesOnChanges: true, ngImport: i0 });
|
|
3049
3049
|
}
|
|
3050
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerBase, decorators: [{
|
|
3051
3051
|
type: Directive
|
|
3052
3052
|
}], ctorParameters: () => [], propDecorators: { calendarHeaderComponent: [{
|
|
3053
3053
|
type: Input
|
|
@@ -3096,13 +3096,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
|
|
|
3096
3096
|
// if angular adds support for `exportAs: '$implicit'` on directives.
|
|
3097
3097
|
/** Component responsible for managing the datepicker popup/dialog. */
|
|
3098
3098
|
class MatDatepicker extends MatDatepickerBase {
|
|
3099
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
3099
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepicker, isStandalone: true, selector: "mat-datepicker", providers: [
|
|
3101
3101
|
MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
|
|
3102
3102
|
{ provide: MatDatepickerBase, useExisting: MatDatepicker },
|
|
3103
3103
|
], exportAs: ["matDatepicker"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3104
3104
|
}
|
|
3105
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepicker, decorators: [{
|
|
3106
3106
|
type: Component,
|
|
3107
3107
|
args: [{
|
|
3108
3108
|
selector: 'mat-datepicker',
|
|
@@ -3385,10 +3385,10 @@ class MatDatepickerInputBase {
|
|
|
3385
3385
|
const filter = this._getDateFilter();
|
|
3386
3386
|
return !filter || filter(value);
|
|
3387
3387
|
}
|
|
3388
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3389
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-next.
|
|
3388
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3389
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.0-next.3", type: MatDatepickerInputBase, isStandalone: true, inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, usesOnChanges: true, ngImport: i0 });
|
|
3390
3390
|
}
|
|
3391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerInputBase, decorators: [{
|
|
3392
3392
|
type: Directive
|
|
3393
3393
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
3394
3394
|
type: Input
|
|
@@ -3553,14 +3553,14 @@ class MatDatepickerInput extends MatDatepickerInputBase {
|
|
|
3553
3553
|
_shouldHandleChangeEvent(event) {
|
|
3554
3554
|
return event.source !== this;
|
|
3555
3555
|
}
|
|
3556
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3557
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
3556
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3557
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepickerInput, isStandalone: true, selector: "input[matDatepicker]", inputs: { matDatepicker: "matDatepicker", min: "min", max: "max", dateFilter: ["matDatepickerFilter", "dateFilter"] }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_datepicker ? \"dialog\" : null", "attr.aria-owns": "_ariaOwns()", "attr.min": "min ? _dateAdapter.toIso8601(min) : null", "attr.max": "max ? _dateAdapter.toIso8601(max) : null", "attr.data-mat-calendar": "_datepicker ? _datepicker.id : null", "disabled": "disabled" }, classAttribute: "mat-datepicker-input" }, providers: [
|
|
3558
3558
|
MAT_DATEPICKER_VALUE_ACCESSOR,
|
|
3559
3559
|
MAT_DATEPICKER_VALIDATORS,
|
|
3560
3560
|
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
|
|
3561
3561
|
], exportAs: ["matDatepickerInput"], usesInheritance: true, ngImport: i0 });
|
|
3562
3562
|
}
|
|
3563
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerInput, decorators: [{
|
|
3564
3564
|
type: Directive,
|
|
3565
3565
|
args: [{
|
|
3566
3566
|
selector: 'input[matDatepicker]',
|
|
@@ -3599,10 +3599,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
|
|
|
3599
3599
|
|
|
3600
3600
|
/** Can be used to override the icon of a `matDatepickerToggle`. */
|
|
3601
3601
|
class MatDatepickerToggleIcon {
|
|
3602
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3603
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
3602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3603
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepickerToggleIcon, isStandalone: true, selector: "[matDatepickerToggleIcon]", ngImport: i0 });
|
|
3604
3604
|
}
|
|
3605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerToggleIcon, decorators: [{
|
|
3606
3606
|
type: Directive,
|
|
3607
3607
|
args: [{
|
|
3608
3608
|
selector: '[matDatepickerToggleIcon]',
|
|
@@ -3668,10 +3668,10 @@ class MatDatepickerToggle {
|
|
|
3668
3668
|
this._stateChanges.unsubscribe();
|
|
3669
3669
|
this._stateChanges = merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
|
|
3670
3670
|
}
|
|
3671
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3672
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.
|
|
3671
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3672
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0-next.3", type: MatDatepickerToggle, isStandalone: true, selector: "mat-datepicker-toggle", inputs: { datepicker: ["for", "datepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: "disableRipple" }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mat-datepicker-toggle-active": "datepicker && datepicker.opened", "class.mat-accent": "datepicker && datepicker.color === \"accent\"", "class.mat-warn": "datepicker && datepicker.color === \"warn\"", "attr.data-mat-calendar": "datepicker ? datepicker.id : null" }, classAttribute: "mat-datepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MatDatepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["matDatepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button\n #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"datepicker ? 'dialog' : null\"\n [attr.aria-label]=\"ariaLabel || _intl.openCalendarLabel\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n [disabled]=\"disabled\"\n [disableRipple]=\"disableRipple\">\n\n @if (!_customIcon) {\n <svg\n class=\"mat-datepicker-toggle-default-icon\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\">\n <path 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 }\n\n <ng-content select=\"[matDatepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-datepicker-toggle{pointer-events:auto;color:var(--mat-datepicker-toggle-icon-color, var(--mat-sys-on-surface-variant))}.mat-datepicker-toggle-active{color:var(--mat-datepicker-toggle-active-state-icon-color, var(--mat-sys-on-surface-variant))}@media(forced-colors: active){.mat-datepicker-toggle-default-icon{color:CanvasText}}"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3673
3673
|
}
|
|
3674
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
3674
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerToggle, decorators: [{
|
|
3675
3675
|
type: Component,
|
|
3676
3676
|
args: [{ selector: 'mat-datepicker-toggle', host: {
|
|
3677
3677
|
'class': 'mat-datepicker-toggle',
|
|
@@ -3707,819 +3707,811 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
|
|
|
3707
3707
|
args: ['button']
|
|
3708
3708
|
}] } });
|
|
3709
3709
|
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
// ```
|
|
3723
|
-
// 2. `aria-label` attribute (e.g. `<input aria-label="Departure"/>`)
|
|
3724
|
-
// 3. Label with `for`/`id`
|
|
3725
|
-
// ```
|
|
3726
|
-
// <!-- example using for/id -->
|
|
3727
|
-
// <label for="current-node">Label</label>
|
|
3728
|
-
// <input id="current-node"/>
|
|
3729
|
-
// ```
|
|
3730
|
-
// 4. `placeholder` attribute (e.g. `<input placeholder="06/03/1990"/>`)
|
|
3731
|
-
// 5. `title` attribute (e.g. `<input title="Check-In"/>`)
|
|
3732
|
-
// 6. text content
|
|
3733
|
-
// ```
|
|
3734
|
-
// <!-- example using text content -->
|
|
3735
|
-
// <label for="current-node"><span>Departure</span> Date</label>
|
|
3736
|
-
// <input id="current-node"/>
|
|
3737
|
-
// ```
|
|
3738
|
-
/**
|
|
3739
|
-
* Computes the *expected* ARIA accessible name for argument element based on [accname-1.2
|
|
3740
|
-
* specification](https://www.w3.org/TR/accname-1.2/). Implements a subset of accname-1.2,
|
|
3741
|
-
* and should only be used for the Datepicker's specific use case.
|
|
3742
|
-
*
|
|
3743
|
-
* Intended use:
|
|
3744
|
-
* This is not a general use implementation. Only implements the parts of accname-1.2 that are
|
|
3745
|
-
* required for the Datepicker's specific use case. This function is not intended for any other
|
|
3746
|
-
* use.
|
|
3747
|
-
*
|
|
3748
|
-
* Limitations:
|
|
3749
|
-
* - Only covers the needs of `matStartDate` and `matEndDate`. Does not support other use cases.
|
|
3750
|
-
* - See NOTES's in implementation for specific details on what parts of the accname-1.2
|
|
3751
|
-
* specification are not implemented.
|
|
3752
|
-
*
|
|
3753
|
-
* @param element {HTMLInputElement} native <input/> element of `matStartDate` or
|
|
3754
|
-
* `matEndDate` component. Corresponds to the 'Root Element' from accname-1.2
|
|
3755
|
-
*
|
|
3756
|
-
* @return expected ARIA accessible name of argument <input/>
|
|
3757
|
-
*/
|
|
3758
|
-
function _computeAriaAccessibleName(element) {
|
|
3759
|
-
return _computeAriaAccessibleNameInternal(element, true);
|
|
3760
|
-
}
|
|
3761
|
-
/**
|
|
3762
|
-
* Determine if argument node is an Element based on `nodeType` property. This function is safe to
|
|
3763
|
-
* use with server-side rendering.
|
|
3764
|
-
*/
|
|
3765
|
-
function ssrSafeIsElement(node) {
|
|
3766
|
-
return node.nodeType === Node.ELEMENT_NODE;
|
|
3767
|
-
}
|
|
3768
|
-
/**
|
|
3769
|
-
* Determine if argument node is an HTMLInputElement based on `nodeName` property. This funciton is
|
|
3770
|
-
* safe to use with server-side rendering.
|
|
3771
|
-
*/
|
|
3772
|
-
function ssrSafeIsHTMLInputElement(node) {
|
|
3773
|
-
return node.nodeName === 'INPUT';
|
|
3774
|
-
}
|
|
3775
|
-
/**
|
|
3776
|
-
* Determine if argument node is an HTMLTextAreaElement based on `nodeName` property. This
|
|
3777
|
-
* funciton is safe to use with server-side rendering.
|
|
3778
|
-
*/
|
|
3779
|
-
function ssrSafeIsHTMLTextAreaElement(node) {
|
|
3780
|
-
return node.nodeName === 'TEXTAREA';
|
|
3781
|
-
}
|
|
3782
|
-
/**
|
|
3783
|
-
* Calculate the expected ARIA accessible name for given DOM Node. Given DOM Node may be either the
|
|
3784
|
-
* "Root node" passed to `_computeAriaAccessibleName` or "Current node" as result of recursion.
|
|
3785
|
-
*
|
|
3786
|
-
* @return the accessible name of argument DOM Node
|
|
3787
|
-
*
|
|
3788
|
-
* @param currentNode node to determine accessible name of
|
|
3789
|
-
* @param isDirectlyReferenced true if `currentNode` is the root node to calculate ARIA accessible
|
|
3790
|
-
* name of. False if it is a result of recursion.
|
|
3791
|
-
*/
|
|
3792
|
-
function _computeAriaAccessibleNameInternal(currentNode, isDirectlyReferenced) {
|
|
3793
|
-
// NOTE: this differs from accname-1.2 specification.
|
|
3794
|
-
// - Does not implement Step 1. of accname-1.2: '''If `currentNode`'s role prohibits naming,
|
|
3795
|
-
// return the empty string ("")'''.
|
|
3796
|
-
// - Does not implement Step 2.A. of accname-1.2: '''if current node is hidden and not directly
|
|
3797
|
-
// referenced by aria-labelledby... return the empty string.'''
|
|
3798
|
-
// acc-name-1.2 Step 2.B.: aria-labelledby
|
|
3799
|
-
if (ssrSafeIsElement(currentNode) && isDirectlyReferenced) {
|
|
3800
|
-
const labelledbyIds = currentNode.getAttribute?.('aria-labelledby')?.split(/\s+/g) || [];
|
|
3801
|
-
const validIdRefs = labelledbyIds.reduce((validIds, id) => {
|
|
3802
|
-
const elem = document.getElementById(id);
|
|
3803
|
-
if (elem) {
|
|
3804
|
-
validIds.push(elem);
|
|
3805
|
-
}
|
|
3806
|
-
return validIds;
|
|
3807
|
-
}, []);
|
|
3808
|
-
if (validIdRefs.length) {
|
|
3809
|
-
return validIdRefs
|
|
3810
|
-
.map(idRef => {
|
|
3811
|
-
return _computeAriaAccessibleNameInternal(idRef, false);
|
|
3812
|
-
})
|
|
3813
|
-
.join(' ');
|
|
3814
|
-
}
|
|
3815
|
-
}
|
|
3816
|
-
// acc-name-1.2 Step 2.C.: aria-label
|
|
3817
|
-
if (ssrSafeIsElement(currentNode)) {
|
|
3818
|
-
const ariaLabel = currentNode.getAttribute('aria-label')?.trim();
|
|
3819
|
-
if (ariaLabel) {
|
|
3820
|
-
return ariaLabel;
|
|
3821
|
-
}
|
|
3710
|
+
class MatDateRangeInput {
|
|
3711
|
+
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
3712
|
+
_elementRef = inject(ElementRef);
|
|
3713
|
+
_dateAdapter = inject(DateAdapter, { optional: true });
|
|
3714
|
+
_formField = inject(MAT_FORM_FIELD, { optional: true });
|
|
3715
|
+
_closedSubscription = Subscription.EMPTY;
|
|
3716
|
+
_openedSubscription = Subscription.EMPTY;
|
|
3717
|
+
_startInput;
|
|
3718
|
+
_endInput;
|
|
3719
|
+
/** Current value of the range input. */
|
|
3720
|
+
get value() {
|
|
3721
|
+
return this._model ? this._model.selection : null;
|
|
3822
3722
|
}
|
|
3823
|
-
|
|
3824
|
-
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
if (currentNode.labels?.length) {
|
|
3831
|
-
return Array.from(currentNode.labels)
|
|
3832
|
-
.map(x => _computeAriaAccessibleNameInternal(x, false))
|
|
3833
|
-
.join(' ');
|
|
3834
|
-
}
|
|
3835
|
-
// use placeholder if available
|
|
3836
|
-
const placeholder = currentNode.getAttribute('placeholder')?.trim();
|
|
3837
|
-
if (placeholder) {
|
|
3838
|
-
return placeholder;
|
|
3839
|
-
}
|
|
3840
|
-
// use title if available
|
|
3841
|
-
const title = currentNode.getAttribute('title')?.trim();
|
|
3842
|
-
if (title) {
|
|
3843
|
-
return title;
|
|
3844
|
-
}
|
|
3723
|
+
/** Unique ID for the group. */
|
|
3724
|
+
id = inject(_IdGenerator).getId('mat-date-range-input-');
|
|
3725
|
+
/** Whether the control is focused. */
|
|
3726
|
+
focused = false;
|
|
3727
|
+
/** Whether the control's label should float. */
|
|
3728
|
+
get shouldLabelFloat() {
|
|
3729
|
+
return this.focused || !this.empty;
|
|
3845
3730
|
}
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
// within the label... then include the embedded control as part of the text alternative in
|
|
3849
|
-
// the following manner...'''. Step 2E applies to embedded controls such as textbox, listbox,
|
|
3850
|
-
// range, etc.
|
|
3851
|
-
// - does not implement acc-name-1.2 step 2.F.: check that '''role allows name from content''',
|
|
3852
|
-
// which applies to `currentNode` and its children.
|
|
3853
|
-
// - does not implement acc-name-1.2 Step 2.F.ii.: '''Check for CSS generated textual content'''
|
|
3854
|
-
// (e.g. :before and :after).
|
|
3855
|
-
// - does not implement acc-name-1.2 Step 2.I.: '''if the current node has a Tooltip attribute,
|
|
3856
|
-
// return its value'''
|
|
3857
|
-
// Return text content with whitespace collapsed into a single space character. Accomplish
|
|
3858
|
-
// acc-name-1.2 steps 2F, 2G, and 2H.
|
|
3859
|
-
return (currentNode.textContent || '').replace(/\s+/g, ' ').trim();
|
|
3860
|
-
}
|
|
3861
|
-
|
|
3862
|
-
/**
|
|
3863
|
-
* Used to provide the date range input wrapper component
|
|
3864
|
-
* to the parts without circular dependencies.
|
|
3865
|
-
*/
|
|
3866
|
-
const MAT_DATE_RANGE_INPUT_PARENT = new InjectionToken('MAT_DATE_RANGE_INPUT_PARENT');
|
|
3867
|
-
/**
|
|
3868
|
-
* Base class for the individual inputs that can be projected inside a `mat-date-range-input`.
|
|
3869
|
-
*/
|
|
3870
|
-
class MatDateRangeInputPartBase extends MatDatepickerInputBase {
|
|
3871
|
-
_rangeInput = inject(MAT_DATE_RANGE_INPUT_PARENT);
|
|
3872
|
-
_elementRef = inject(ElementRef);
|
|
3873
|
-
_defaultErrorStateMatcher = inject(ErrorStateMatcher);
|
|
3874
|
-
_injector = inject(Injector);
|
|
3875
|
-
_parentForm = inject(NgForm, { optional: true });
|
|
3876
|
-
_parentFormGroup = inject(FormGroupDirective, { optional: true });
|
|
3731
|
+
/** Name of the form control. */
|
|
3732
|
+
controlType = 'mat-date-range-input';
|
|
3877
3733
|
/**
|
|
3878
|
-
*
|
|
3734
|
+
* Implemented as a part of `MatFormFieldControl`.
|
|
3735
|
+
* Set the placeholder attribute on `matStartDate` and `matEndDate`.
|
|
3879
3736
|
* @docs-private
|
|
3880
3737
|
*/
|
|
3881
|
-
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
get errorStateMatcher() {
|
|
3886
|
-
return this._errorStateTracker.matcher;
|
|
3887
|
-
}
|
|
3888
|
-
set errorStateMatcher(value) {
|
|
3889
|
-
this._errorStateTracker.matcher = value;
|
|
3890
|
-
}
|
|
3891
|
-
/** Whether the input is in an error state. */
|
|
3892
|
-
get errorState() {
|
|
3893
|
-
return this._errorStateTracker.errorState;
|
|
3894
|
-
}
|
|
3895
|
-
set errorState(value) {
|
|
3896
|
-
this._errorStateTracker.errorState = value;
|
|
3897
|
-
}
|
|
3898
|
-
constructor() {
|
|
3899
|
-
super();
|
|
3900
|
-
this._errorStateTracker = new _ErrorStateTracker(this._defaultErrorStateMatcher, null, this._parentFormGroup, this._parentForm, this.stateChanges);
|
|
3738
|
+
get placeholder() {
|
|
3739
|
+
const start = this._startInput?._getPlaceholder() || '';
|
|
3740
|
+
const end = this._endInput?._getPlaceholder() || '';
|
|
3741
|
+
return start || end ? `${start} ${this.separator} ${end}` : '';
|
|
3901
3742
|
}
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
// circular dependency, because both `ControlValueAccessor` and `Validator` depend on the input
|
|
3906
|
-
// itself. Usually we can work around it for the CVA, but there's no API to do it for the
|
|
3907
|
-
// validator. We work around it here by injecting the `NgControl` in `ngOnInit`, after
|
|
3908
|
-
// everything has been resolved.
|
|
3909
|
-
const ngControl = this._injector.get(NgControl, null, { optional: true, self: true });
|
|
3910
|
-
if (ngControl) {
|
|
3911
|
-
this.ngControl = ngControl;
|
|
3912
|
-
this._errorStateTracker.ngControl = ngControl;
|
|
3913
|
-
}
|
|
3743
|
+
/** The range picker that this input is associated with. */
|
|
3744
|
+
get rangePicker() {
|
|
3745
|
+
return this._rangePicker;
|
|
3914
3746
|
}
|
|
3915
|
-
|
|
3916
|
-
if (
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
this.
|
|
3747
|
+
set rangePicker(rangePicker) {
|
|
3748
|
+
if (rangePicker) {
|
|
3749
|
+
this._model = rangePicker.registerInput(this);
|
|
3750
|
+
this._rangePicker = rangePicker;
|
|
3751
|
+
this._closedSubscription.unsubscribe();
|
|
3752
|
+
this._openedSubscription.unsubscribe();
|
|
3753
|
+
this._ariaOwns.set(this.rangePicker.opened ? rangePicker.id : null);
|
|
3754
|
+
this._closedSubscription = rangePicker.closedStream.subscribe(() => {
|
|
3755
|
+
this._startInput?._onTouched();
|
|
3756
|
+
this._endInput?._onTouched();
|
|
3757
|
+
this._ariaOwns.set(null);
|
|
3758
|
+
});
|
|
3759
|
+
this._openedSubscription = rangePicker.openedStream.subscribe(() => {
|
|
3760
|
+
this._ariaOwns.set(rangePicker.id);
|
|
3761
|
+
});
|
|
3762
|
+
this._registerModel(this._model);
|
|
3921
3763
|
}
|
|
3922
3764
|
}
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
this._elementRef.nativeElement.focus();
|
|
3934
|
-
}
|
|
3935
|
-
/** Gets the value that should be used when mirroring the input's size. */
|
|
3936
|
-
getMirrorValue() {
|
|
3937
|
-
const element = this._elementRef.nativeElement;
|
|
3938
|
-
const value = element.value;
|
|
3939
|
-
return value.length > 0 ? value : element.placeholder;
|
|
3940
|
-
}
|
|
3941
|
-
/** Refreshes the error state of the input. */
|
|
3942
|
-
updateErrorState() {
|
|
3943
|
-
this._errorStateTracker.updateErrorState();
|
|
3944
|
-
}
|
|
3945
|
-
/** Handles `input` events on the input element. */
|
|
3946
|
-
_onInput(value) {
|
|
3947
|
-
super._onInput(value);
|
|
3948
|
-
this._rangeInput._handleChildValueChange();
|
|
3949
|
-
}
|
|
3950
|
-
/** Opens the datepicker associated with the input. */
|
|
3951
|
-
_openPopup() {
|
|
3952
|
-
this._rangeInput._openDatepicker();
|
|
3765
|
+
_rangePicker;
|
|
3766
|
+
/** The id of the panel owned by this input. */
|
|
3767
|
+
_ariaOwns = signal(null);
|
|
3768
|
+
/** Whether the input is required. */
|
|
3769
|
+
get required() {
|
|
3770
|
+
return (this._required ??
|
|
3771
|
+
(this._isTargetRequired(this) ||
|
|
3772
|
+
this._isTargetRequired(this._startInput) ||
|
|
3773
|
+
this._isTargetRequired(this._endInput)) ??
|
|
3774
|
+
false);
|
|
3953
3775
|
}
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
return this._rangeInput.min;
|
|
3776
|
+
set required(value) {
|
|
3777
|
+
this._required = value;
|
|
3957
3778
|
}
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3779
|
+
_required;
|
|
3780
|
+
/** Function that can be used to filter out dates within the date range picker. */
|
|
3781
|
+
get dateFilter() {
|
|
3782
|
+
return this._dateFilter;
|
|
3961
3783
|
}
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
|
|
3784
|
+
set dateFilter(value) {
|
|
3785
|
+
const start = this._startInput;
|
|
3786
|
+
const end = this._endInput;
|
|
3787
|
+
const wasMatchingStart = start && start._matchesFilter(start.value);
|
|
3788
|
+
const wasMatchingEnd = end && end._matchesFilter(start.value);
|
|
3789
|
+
this._dateFilter = value;
|
|
3790
|
+
if (start && start._matchesFilter(start.value) !== wasMatchingStart) {
|
|
3791
|
+
start._validatorOnChange();
|
|
3792
|
+
}
|
|
3793
|
+
if (end && end._matchesFilter(end.value) !== wasMatchingEnd) {
|
|
3794
|
+
end._validatorOnChange();
|
|
3795
|
+
}
|
|
3965
3796
|
}
|
|
3966
|
-
|
|
3967
|
-
|
|
3797
|
+
_dateFilter;
|
|
3798
|
+
/** The minimum valid date. */
|
|
3799
|
+
get min() {
|
|
3800
|
+
return this._min;
|
|
3968
3801
|
}
|
|
3969
|
-
|
|
3970
|
-
|
|
3802
|
+
set min(value) {
|
|
3803
|
+
const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
|
|
3804
|
+
if (!this._dateAdapter.sameDate(validValue, this._min)) {
|
|
3805
|
+
this._min = validValue;
|
|
3806
|
+
this._revalidate();
|
|
3807
|
+
}
|
|
3971
3808
|
}
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
: this._rangeInput._startInput);
|
|
3977
|
-
opposite?._validatorOnChange();
|
|
3809
|
+
_min;
|
|
3810
|
+
/** The maximum valid date. */
|
|
3811
|
+
get max() {
|
|
3812
|
+
return this._max;
|
|
3978
3813
|
}
|
|
3979
|
-
|
|
3980
|
-
|
|
3981
|
-
|
|
3814
|
+
set max(value) {
|
|
3815
|
+
const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
|
|
3816
|
+
if (!this._dateAdapter.sameDate(validValue, this._max)) {
|
|
3817
|
+
this._max = validValue;
|
|
3818
|
+
this._revalidate();
|
|
3819
|
+
}
|
|
3982
3820
|
}
|
|
3983
|
-
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
type: Input
|
|
3990
|
-
}] } });
|
|
3991
|
-
/** Input for entering the start date in a `mat-date-range-input`. */
|
|
3992
|
-
class MatStartDate extends MatDateRangeInputPartBase {
|
|
3993
|
-
/** Validator that checks that the start date isn't after the end date. */
|
|
3994
|
-
_startValidator = (control) => {
|
|
3995
|
-
const start = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
|
|
3996
|
-
const end = this._model ? this._model.selection.end : null;
|
|
3997
|
-
return !start || !end || this._dateAdapter.compareDate(start, end) <= 0
|
|
3998
|
-
? null
|
|
3999
|
-
: { 'matStartDateInvalid': { 'end': end, 'actual': start } };
|
|
4000
|
-
};
|
|
4001
|
-
_validator = Validators.compose([...super._getValidators(), this._startValidator]);
|
|
4002
|
-
_getValueFromModel(modelValue) {
|
|
4003
|
-
return modelValue.start;
|
|
3821
|
+
_max;
|
|
3822
|
+
/** Whether the input is disabled. */
|
|
3823
|
+
get disabled() {
|
|
3824
|
+
return this._startInput && this._endInput
|
|
3825
|
+
? this._startInput.disabled && this._endInput.disabled
|
|
3826
|
+
: this._groupDisabled;
|
|
4004
3827
|
}
|
|
4005
|
-
|
|
4006
|
-
if (
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
else {
|
|
4010
|
-
return !change.oldValue?.start
|
|
4011
|
-
? !!change.selection.start
|
|
4012
|
-
: !change.selection.start ||
|
|
4013
|
-
!!this._dateAdapter.compareDate(change.oldValue.start, change.selection.start);
|
|
3828
|
+
set disabled(value) {
|
|
3829
|
+
if (value !== this._groupDisabled) {
|
|
3830
|
+
this._groupDisabled = value;
|
|
3831
|
+
this.stateChanges.next(undefined);
|
|
4014
3832
|
}
|
|
4015
3833
|
}
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
3834
|
+
_groupDisabled = false;
|
|
3835
|
+
/** Whether the input is in an error state. */
|
|
3836
|
+
get errorState() {
|
|
3837
|
+
if (this._startInput && this._endInput) {
|
|
3838
|
+
return this._startInput.errorState || this._endInput.errorState;
|
|
4020
3839
|
}
|
|
3840
|
+
return false;
|
|
4021
3841
|
}
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
this.
|
|
3842
|
+
/** Whether the datepicker input is empty. */
|
|
3843
|
+
get empty() {
|
|
3844
|
+
const startEmpty = this._startInput ? this._startInput.isEmpty() : false;
|
|
3845
|
+
const endEmpty = this._endInput ? this._endInput.isEmpty() : false;
|
|
3846
|
+
return startEmpty && endEmpty;
|
|
4026
3847
|
}
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
3848
|
+
/** Value for the `aria-describedby` attribute of the inputs. */
|
|
3849
|
+
_ariaDescribedBy = null;
|
|
3850
|
+
/** Date selection model currently registered with the input. */
|
|
3851
|
+
_model;
|
|
3852
|
+
/** Separator text to be shown between the inputs. */
|
|
3853
|
+
separator = '–';
|
|
3854
|
+
/** Start of the comparison range that should be shown in the calendar. */
|
|
3855
|
+
comparisonStart = null;
|
|
3856
|
+
/** End of the comparison range that should be shown in the calendar. */
|
|
3857
|
+
comparisonEnd = null;
|
|
3858
|
+
/**
|
|
3859
|
+
* Implemented as a part of `MatFormFieldControl`.
|
|
3860
|
+
* TODO(crisbeto): change type to `AbstractControlDirective` after #18206 lands.
|
|
3861
|
+
* @docs-private
|
|
3862
|
+
*/
|
|
3863
|
+
ngControl;
|
|
3864
|
+
/** Emits when the input's state has changed. */
|
|
3865
|
+
stateChanges = new Subject();
|
|
3866
|
+
/**
|
|
3867
|
+
* Disable the automatic labeling to avoid issues like #27241.
|
|
3868
|
+
* @docs-private
|
|
3869
|
+
*/
|
|
3870
|
+
disableAutomaticLabeling = true;
|
|
3871
|
+
constructor() {
|
|
3872
|
+
if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
3873
|
+
throw createMissingDateImplError('DateAdapter');
|
|
4039
3874
|
}
|
|
4040
|
-
|
|
4041
|
-
|
|
3875
|
+
// The datepicker module can be used both with MDC and non-MDC form fields. We have
|
|
3876
|
+
// to conditionally add the MDC input class so that the range picker looks correctly.
|
|
3877
|
+
if (this._formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
|
|
3878
|
+
this._elementRef.nativeElement.classList.add('mat-mdc-input-element', 'mat-mdc-form-field-input-control', 'mdc-text-field__input');
|
|
4042
3879
|
}
|
|
3880
|
+
// TODO(crisbeto): remove `as any` after #18206 lands.
|
|
3881
|
+
this.ngControl = inject(ControlContainer, { optional: true, self: true });
|
|
4043
3882
|
}
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2", ngImport: i0, type: MatStartDate, decorators: [{
|
|
4051
|
-
type: Directive,
|
|
4052
|
-
args: [{
|
|
4053
|
-
selector: 'input[matStartDate]',
|
|
4054
|
-
host: {
|
|
4055
|
-
'class': 'mat-start-date mat-date-range-input-inner',
|
|
4056
|
-
'[disabled]': 'disabled',
|
|
4057
|
-
'(input)': '_onInput($event.target.value)',
|
|
4058
|
-
'(change)': '_onChange()',
|
|
4059
|
-
'(keydown)': '_onKeydown($event)',
|
|
4060
|
-
'[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
|
|
4061
|
-
'[attr.aria-owns]': `_rangeInput._ariaOwns
|
|
4062
|
-
? _rangeInput._ariaOwns()
|
|
4063
|
-
: (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`,
|
|
4064
|
-
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
|
|
4065
|
-
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
|
|
4066
|
-
'(blur)': '_onBlur()',
|
|
4067
|
-
'type': 'text',
|
|
4068
|
-
},
|
|
4069
|
-
providers: [
|
|
4070
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },
|
|
4071
|
-
{ provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true },
|
|
4072
|
-
],
|
|
4073
|
-
// These need to be specified explicitly, because some tooling doesn't
|
|
4074
|
-
// seem to pick them up from the base class. See #20932.
|
|
4075
|
-
outputs: ['dateChange', 'dateInput'],
|
|
4076
|
-
}]
|
|
4077
|
-
}] });
|
|
4078
|
-
/** Input for entering the end date in a `mat-date-range-input`. */
|
|
4079
|
-
class MatEndDate extends MatDateRangeInputPartBase {
|
|
4080
|
-
/** Validator that checks that the end date isn't before the start date. */
|
|
4081
|
-
_endValidator = (control) => {
|
|
4082
|
-
const end = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
|
|
4083
|
-
const start = this._model ? this._model.selection.start : null;
|
|
4084
|
-
return !end || !start || this._dateAdapter.compareDate(end, start) >= 0
|
|
4085
|
-
? null
|
|
4086
|
-
: { 'matEndDateInvalid': { 'start': start, 'actual': end } };
|
|
4087
|
-
};
|
|
4088
|
-
_validator = Validators.compose([...super._getValidators(), this._endValidator]);
|
|
4089
|
-
_getValueFromModel(modelValue) {
|
|
4090
|
-
return modelValue.end;
|
|
3883
|
+
/**
|
|
3884
|
+
* Implemented as a part of `MatFormFieldControl`.
|
|
3885
|
+
* @docs-private
|
|
3886
|
+
*/
|
|
3887
|
+
setDescribedByIds(ids) {
|
|
3888
|
+
this._ariaDescribedBy = ids.length ? ids.join(' ') : null;
|
|
4091
3889
|
}
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
3890
|
+
/**
|
|
3891
|
+
* Implemented as a part of `MatFormFieldControl`.
|
|
3892
|
+
* @docs-private
|
|
3893
|
+
*/
|
|
3894
|
+
onContainerClick() {
|
|
3895
|
+
if (!this.focused && !this.disabled) {
|
|
3896
|
+
if (!this._model || !this._model.selection.start) {
|
|
3897
|
+
this._startInput.focus();
|
|
3898
|
+
}
|
|
3899
|
+
else {
|
|
3900
|
+
this._endInput.focus();
|
|
3901
|
+
}
|
|
4101
3902
|
}
|
|
4102
3903
|
}
|
|
4103
|
-
|
|
3904
|
+
ngAfterContentInit() {
|
|
3905
|
+
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
3906
|
+
if (!this._startInput) {
|
|
3907
|
+
throw Error('mat-date-range-input must contain a matStartDate input');
|
|
3908
|
+
}
|
|
3909
|
+
if (!this._endInput) {
|
|
3910
|
+
throw Error('mat-date-range-input must contain a matEndDate input');
|
|
3911
|
+
}
|
|
3912
|
+
}
|
|
4104
3913
|
if (this._model) {
|
|
4105
|
-
|
|
4106
|
-
this._model.updateSelection(range, this);
|
|
3914
|
+
this._registerModel(this._model);
|
|
4107
3915
|
}
|
|
3916
|
+
// We don't need to unsubscribe from this, because we
|
|
3917
|
+
// know that the input streams will be completed on destroy.
|
|
3918
|
+
merge(this._startInput.stateChanges, this._endInput.stateChanges).subscribe(() => {
|
|
3919
|
+
this.stateChanges.next(undefined);
|
|
3920
|
+
});
|
|
4108
3921
|
}
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
if (value.length > 0) {
|
|
4113
|
-
startInput.setSelectionRange(value.length, value.length);
|
|
3922
|
+
ngOnChanges(changes) {
|
|
3923
|
+
if (dateInputsHaveChanged(changes, this._dateAdapter)) {
|
|
3924
|
+
this.stateChanges.next(undefined);
|
|
4114
3925
|
}
|
|
4115
|
-
startInput.focus();
|
|
4116
3926
|
}
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
|
|
4120
|
-
|
|
4121
|
-
if (event.keyCode === BACKSPACE && !element.value) {
|
|
4122
|
-
this._moveCaretToEndOfStartInput();
|
|
4123
|
-
}
|
|
4124
|
-
// If the user hits LEFT (LTR) when at the start of the input (and no
|
|
4125
|
-
// selection), move the cursor to the end of the start input.
|
|
4126
|
-
else if (((event.keyCode === LEFT_ARROW && isLtr) || (event.keyCode === RIGHT_ARROW && !isLtr)) &&
|
|
4127
|
-
element.selectionStart === 0 &&
|
|
4128
|
-
element.selectionEnd === 0) {
|
|
4129
|
-
event.preventDefault();
|
|
4130
|
-
this._moveCaretToEndOfStartInput();
|
|
4131
|
-
}
|
|
4132
|
-
else {
|
|
4133
|
-
super._onKeydown(event);
|
|
4134
|
-
}
|
|
3927
|
+
ngOnDestroy() {
|
|
3928
|
+
this._closedSubscription.unsubscribe();
|
|
3929
|
+
this._openedSubscription.unsubscribe();
|
|
3930
|
+
this.stateChanges.complete();
|
|
4135
3931
|
}
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
|
|
4142
|
-
|
|
4143
|
-
|
|
4144
|
-
|
|
4145
|
-
|
|
4146
|
-
|
|
4147
|
-
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
'(keydown)': '_onKeydown($event)',
|
|
4152
|
-
'[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
|
|
4153
|
-
'[attr.aria-owns]': `_rangeInput._ariaOwns
|
|
4154
|
-
? _rangeInput._ariaOwns()
|
|
4155
|
-
: (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`,
|
|
4156
|
-
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
|
|
4157
|
-
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
|
|
4158
|
-
'(blur)': '_onBlur()',
|
|
4159
|
-
'type': 'text',
|
|
4160
|
-
},
|
|
4161
|
-
providers: [
|
|
4162
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },
|
|
4163
|
-
{ provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true },
|
|
4164
|
-
],
|
|
4165
|
-
// These need to be specified explicitly, because some tooling doesn't
|
|
4166
|
-
// seem to pick them up from the base class. See #20932.
|
|
4167
|
-
outputs: ['dateChange', 'dateInput'],
|
|
4168
|
-
}]
|
|
4169
|
-
}] });
|
|
4170
|
-
|
|
4171
|
-
class MatDateRangeInput {
|
|
4172
|
-
_changeDetectorRef = inject(ChangeDetectorRef);
|
|
4173
|
-
_elementRef = inject(ElementRef);
|
|
4174
|
-
_dateAdapter = inject(DateAdapter, { optional: true });
|
|
4175
|
-
_formField = inject(MAT_FORM_FIELD, { optional: true });
|
|
4176
|
-
_closedSubscription = Subscription.EMPTY;
|
|
4177
|
-
_openedSubscription = Subscription.EMPTY;
|
|
4178
|
-
/** Current value of the range input. */
|
|
4179
|
-
get value() {
|
|
4180
|
-
return this._model ? this._model.selection : null;
|
|
3932
|
+
/** Gets the date at which the calendar should start. */
|
|
3933
|
+
getStartValue() {
|
|
3934
|
+
return this.value ? this.value.start : null;
|
|
3935
|
+
}
|
|
3936
|
+
/** Gets the input's theme palette. */
|
|
3937
|
+
getThemePalette() {
|
|
3938
|
+
return this._formField ? this._formField.color : undefined;
|
|
3939
|
+
}
|
|
3940
|
+
/** Gets the element to which the calendar overlay should be attached. */
|
|
3941
|
+
getConnectedOverlayOrigin() {
|
|
3942
|
+
return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
|
|
3943
|
+
}
|
|
3944
|
+
/** Gets the ID of an element that should be used a description for the calendar overlay. */
|
|
3945
|
+
getOverlayLabelId() {
|
|
3946
|
+
return this._formField ? this._formField.getLabelId() : null;
|
|
4181
3947
|
}
|
|
4182
|
-
/**
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
|
|
4186
|
-
/** Whether the control's label should float. */
|
|
4187
|
-
get shouldLabelFloat() {
|
|
4188
|
-
return this.focused || !this.empty;
|
|
3948
|
+
/** Gets the value that is used to mirror the state input. */
|
|
3949
|
+
_getInputMirrorValue(part) {
|
|
3950
|
+
const input = part === 'start' ? this._startInput : this._endInput;
|
|
3951
|
+
return input ? input.getMirrorValue() : '';
|
|
4189
3952
|
}
|
|
4190
|
-
/**
|
|
4191
|
-
|
|
4192
|
-
|
|
4193
|
-
* Implemented as a part of `MatFormFieldControl`.
|
|
4194
|
-
* Set the placeholder attribute on `matStartDate` and `matEndDate`.
|
|
4195
|
-
* @docs-private
|
|
4196
|
-
*/
|
|
4197
|
-
get placeholder() {
|
|
4198
|
-
const start = this._startInput?._getPlaceholder() || '';
|
|
4199
|
-
const end = this._endInput?._getPlaceholder() || '';
|
|
4200
|
-
return start || end ? `${start} ${this.separator} ${end}` : '';
|
|
3953
|
+
/** Whether the input placeholders should be hidden. */
|
|
3954
|
+
_shouldHidePlaceholders() {
|
|
3955
|
+
return this._startInput ? !this._startInput.isEmpty() : false;
|
|
4201
3956
|
}
|
|
4202
|
-
/**
|
|
4203
|
-
|
|
4204
|
-
|
|
3957
|
+
/** Handles the value in one of the child inputs changing. */
|
|
3958
|
+
_handleChildValueChange() {
|
|
3959
|
+
this.stateChanges.next(undefined);
|
|
3960
|
+
this._changeDetectorRef.markForCheck();
|
|
4205
3961
|
}
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
this._rangePicker
|
|
4210
|
-
this._closedSubscription.unsubscribe();
|
|
4211
|
-
this._openedSubscription.unsubscribe();
|
|
4212
|
-
this._ariaOwns.set(this.rangePicker.opened ? rangePicker.id : null);
|
|
4213
|
-
this._closedSubscription = rangePicker.closedStream.subscribe(() => {
|
|
4214
|
-
this._startInput?._onTouched();
|
|
4215
|
-
this._endInput?._onTouched();
|
|
4216
|
-
this._ariaOwns.set(null);
|
|
4217
|
-
});
|
|
4218
|
-
this._openedSubscription = rangePicker.openedStream.subscribe(() => {
|
|
4219
|
-
this._ariaOwns.set(rangePicker.id);
|
|
4220
|
-
});
|
|
4221
|
-
this._registerModel(this._model);
|
|
3962
|
+
/** Opens the date range picker associated with the input. */
|
|
3963
|
+
_openDatepicker() {
|
|
3964
|
+
if (this._rangePicker) {
|
|
3965
|
+
this._rangePicker.open();
|
|
4222
3966
|
}
|
|
4223
3967
|
}
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
4227
|
-
|
|
4228
|
-
|
|
4229
|
-
return (this._required ??
|
|
4230
|
-
(this._isTargetRequired(this) ||
|
|
4231
|
-
this._isTargetRequired(this._startInput) ||
|
|
4232
|
-
this._isTargetRequired(this._endInput)) ??
|
|
4233
|
-
false);
|
|
3968
|
+
/** Whether the separate text should be hidden. */
|
|
3969
|
+
_shouldHideSeparator() {
|
|
3970
|
+
return ((!this._formField ||
|
|
3971
|
+
(this._formField.getLabelId() && !this._formField._shouldLabelFloat())) &&
|
|
3972
|
+
this.empty);
|
|
4234
3973
|
}
|
|
4235
|
-
|
|
4236
|
-
|
|
3974
|
+
/** Gets the value for the `aria-labelledby` attribute of the inputs. */
|
|
3975
|
+
_getAriaLabelledby() {
|
|
3976
|
+
const formField = this._formField;
|
|
3977
|
+
return formField && formField._hasFloatingLabel() ? formField._labelId : null;
|
|
4237
3978
|
}
|
|
4238
|
-
|
|
4239
|
-
|
|
4240
|
-
get dateFilter() {
|
|
4241
|
-
return this._dateFilter;
|
|
3979
|
+
_getStartDateAccessibleName() {
|
|
3980
|
+
return this._startInput._getAccessibleName();
|
|
4242
3981
|
}
|
|
4243
|
-
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
this.
|
|
4249
|
-
|
|
4250
|
-
|
|
3982
|
+
_getEndDateAccessibleName() {
|
|
3983
|
+
return this._endInput._getAccessibleName();
|
|
3984
|
+
}
|
|
3985
|
+
/** Updates the focused state of the range input. */
|
|
3986
|
+
_updateFocus(origin) {
|
|
3987
|
+
this.focused = origin !== null;
|
|
3988
|
+
this.stateChanges.next();
|
|
3989
|
+
}
|
|
3990
|
+
/** Re-runs the validators on the start/end inputs. */
|
|
3991
|
+
_revalidate() {
|
|
3992
|
+
if (this._startInput) {
|
|
3993
|
+
this._startInput._validatorOnChange();
|
|
4251
3994
|
}
|
|
4252
|
-
if (
|
|
4253
|
-
|
|
3995
|
+
if (this._endInput) {
|
|
3996
|
+
this._endInput._validatorOnChange();
|
|
4254
3997
|
}
|
|
4255
3998
|
}
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
3999
|
+
/** Registers the current date selection model with the start/end inputs. */
|
|
4000
|
+
_registerModel(model) {
|
|
4001
|
+
if (this._startInput) {
|
|
4002
|
+
this._startInput._registerModel(model);
|
|
4003
|
+
}
|
|
4004
|
+
if (this._endInput) {
|
|
4005
|
+
this._endInput._registerModel(model);
|
|
4006
|
+
}
|
|
4260
4007
|
}
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4265
|
-
|
|
4008
|
+
/** Checks whether a specific range input directive is required. */
|
|
4009
|
+
_isTargetRequired(target) {
|
|
4010
|
+
return target?.ngControl?.control?.hasValidator(Validators.required);
|
|
4011
|
+
}
|
|
4012
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateRangeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4013
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.0-next.3", type: MatDateRangeInput, isStandalone: true, selector: "mat-date-range-input", inputs: { rangePicker: "rangePicker", required: ["required", "required", booleanAttribute], dateFilter: "dateFilter", min: "min", max: "max", disabled: ["disabled", "disabled", booleanAttribute], separator: "separator", comparisonStart: "comparisonStart", comparisonEnd: "comparisonEnd" }, host: { attributes: { "role": "group" }, properties: { "class.mat-date-range-input-hide-placeholders": "_shouldHidePlaceholders()", "class.mat-date-range-input-required": "required", "attr.id": "id", "attr.aria-labelledby": "_getAriaLabelledby()", "attr.aria-describedby": "_ariaDescribedBy", "attr.data-mat-calendar": "rangePicker ? rangePicker.id : null" }, classAttribute: "mat-date-range-input" }, providers: [{ provide: MatFormFieldControl, useExisting: MatDateRangeInput }], exportAs: ["matDateRangeInput"], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"mat-date-range-input-container\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_updateFocus($event)\">\n <div class=\"mat-date-range-input-wrapper\">\n <ng-content select=\"input[matStartDate]\"></ng-content>\n <span\n class=\"mat-date-range-input-mirror\"\n aria-hidden=\"true\">{{_getInputMirrorValue('start')}}</span>\n </div>\n\n <span\n class=\"mat-date-range-input-separator\"\n [class.mat-date-range-input-separator-hidden]=\"_shouldHideSeparator()\">{{separator}}</span>\n\n <div class=\"mat-date-range-input-wrapper mat-date-range-input-end-wrapper\">\n <ng-content select=\"input[matEndDate]\"></ng-content>\n <span\n class=\"mat-date-range-input-mirror\"\n aria-hidden=\"true\">{{_getInputMirrorValue('end')}}</span>\n </div>\n</div>\n\n", styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px;color:var(--mat-datepicker-range-input-separator-color, var(--mat-sys-on-surface))}.mat-form-field-disabled .mat-date-range-input-separator{color:var(--mat-datepicker-range-input-disabled-state-separator-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}._mat-animation-noopable .mat-date-range-input-separator{transition:none}.mat-date-range-input-separator-hidden{-webkit-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-end-wrapper{flex-grow:1}.mat-date-range-input-inner{position:absolute;top:0;left:0;font:inherit;background:rgba(0,0,0,0);color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%;height:100%}.mat-date-range-input-inner:-moz-ui-invalid{box-shadow:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner[disabled]{color:var(--mat-datepicker-range-input-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{opacity:0}}._mat-animation-noopable .mat-date-range-input-inner::placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner::-moz-placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner::-webkit-input-placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner:-ms-input-placeholder{transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:200px}"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4014
|
+
}
|
|
4015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateRangeInput, decorators: [{
|
|
4016
|
+
type: Component,
|
|
4017
|
+
args: [{ selector: 'mat-date-range-input', exportAs: 'matDateRangeInput', host: {
|
|
4018
|
+
'class': 'mat-date-range-input',
|
|
4019
|
+
'[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
|
|
4020
|
+
'[class.mat-date-range-input-required]': 'required',
|
|
4021
|
+
'[attr.id]': 'id',
|
|
4022
|
+
'role': 'group',
|
|
4023
|
+
'[attr.aria-labelledby]': '_getAriaLabelledby()',
|
|
4024
|
+
'[attr.aria-describedby]': '_ariaDescribedBy',
|
|
4025
|
+
// Used by the test harness to tie this input to its calendar. We can't depend on
|
|
4026
|
+
// `aria-owns` for this, because it's only defined while the calendar is open.
|
|
4027
|
+
'[attr.data-mat-calendar]': 'rangePicker ? rangePicker.id : null',
|
|
4028
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MatFormFieldControl, useExisting: MatDateRangeInput }], imports: [CdkMonitorFocus], template: "<div\n class=\"mat-date-range-input-container\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_updateFocus($event)\">\n <div class=\"mat-date-range-input-wrapper\">\n <ng-content select=\"input[matStartDate]\"></ng-content>\n <span\n class=\"mat-date-range-input-mirror\"\n aria-hidden=\"true\">{{_getInputMirrorValue('start')}}</span>\n </div>\n\n <span\n class=\"mat-date-range-input-separator\"\n [class.mat-date-range-input-separator-hidden]=\"_shouldHideSeparator()\">{{separator}}</span>\n\n <div class=\"mat-date-range-input-wrapper mat-date-range-input-end-wrapper\">\n <ng-content select=\"input[matEndDate]\"></ng-content>\n <span\n class=\"mat-date-range-input-mirror\"\n aria-hidden=\"true\">{{_getInputMirrorValue('end')}}</span>\n </div>\n</div>\n\n", styles: [".mat-date-range-input{display:block;width:100%}.mat-date-range-input-container{display:flex;align-items:center}.mat-date-range-input-separator{transition:opacity 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);margin:0 4px;color:var(--mat-datepicker-range-input-separator-color, var(--mat-sys-on-surface))}.mat-form-field-disabled .mat-date-range-input-separator{color:var(--mat-datepicker-range-input-disabled-state-separator-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}._mat-animation-noopable .mat-date-range-input-separator{transition:none}.mat-date-range-input-separator-hidden{-webkit-user-select:none;user-select:none;opacity:0;transition:none}.mat-date-range-input-wrapper{position:relative;overflow:hidden;max-width:calc(50% - 4px)}.mat-date-range-input-end-wrapper{flex-grow:1}.mat-date-range-input-inner{position:absolute;top:0;left:0;font:inherit;background:rgba(0,0,0,0);color:currentColor;border:none;outline:none;padding:0;margin:0;vertical-align:bottom;text-align:inherit;-webkit-appearance:none;width:100%;height:100%}.mat-date-range-input-inner:-moz-ui-invalid{box-shadow:none}.mat-date-range-input-inner::placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-moz-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner::-webkit-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner:-ms-input-placeholder{transition:color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1)}.mat-date-range-input-inner[disabled]{color:var(--mat-datepicker-range-input-disabled-state-text-color, color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent))}.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::-moz-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-moz-placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner::-webkit-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder{opacity:0}}.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{-webkit-user-select:none;user-select:none;color:rgba(0,0,0,0) !important;-webkit-text-fill-color:rgba(0,0,0,0);transition:none}@media(forced-colors: active){.mat-form-field-hide-placeholder .mat-date-range-input-inner:-ms-input-placeholder,.mat-date-range-input-hide-placeholders .mat-date-range-input-inner:-ms-input-placeholder{opacity:0}}._mat-animation-noopable .mat-date-range-input-inner::placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner::-moz-placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner::-webkit-input-placeholder{transition:none}._mat-animation-noopable .mat-date-range-input-inner:-ms-input-placeholder{transition:none}.mat-date-range-input-mirror{-webkit-user-select:none;user-select:none;visibility:hidden;white-space:nowrap;display:inline-block;min-width:2px}.mat-mdc-form-field-type-mat-date-range-input .mat-mdc-form-field-infix{width:200px}"] }]
|
|
4029
|
+
}], ctorParameters: () => [], propDecorators: { rangePicker: [{
|
|
4030
|
+
type: Input
|
|
4031
|
+
}], required: [{
|
|
4032
|
+
type: Input,
|
|
4033
|
+
args: [{ transform: booleanAttribute }]
|
|
4034
|
+
}], dateFilter: [{
|
|
4035
|
+
type: Input
|
|
4036
|
+
}], min: [{
|
|
4037
|
+
type: Input
|
|
4038
|
+
}], max: [{
|
|
4039
|
+
type: Input
|
|
4040
|
+
}], disabled: [{
|
|
4041
|
+
type: Input,
|
|
4042
|
+
args: [{ transform: booleanAttribute }]
|
|
4043
|
+
}], separator: [{
|
|
4044
|
+
type: Input
|
|
4045
|
+
}], comparisonStart: [{
|
|
4046
|
+
type: Input
|
|
4047
|
+
}], comparisonEnd: [{
|
|
4048
|
+
type: Input
|
|
4049
|
+
}] } });
|
|
4050
|
+
|
|
4051
|
+
// This file contains the `_computeAriaAccessibleName` function, which computes what the *expected*
|
|
4052
|
+
// ARIA accessible name would be for a given element. Implements a subset of ARIA specification
|
|
4053
|
+
// [Accessible Name and Description Computation 1.2](https://www.w3.org/TR/accname-1.2/).
|
|
4054
|
+
//
|
|
4055
|
+
// Specification accname-1.2 can be summarized by returning the result of the first method
|
|
4056
|
+
// available.
|
|
4057
|
+
//
|
|
4058
|
+
// 1. `aria-labelledby` attribute
|
|
4059
|
+
// ```
|
|
4060
|
+
// <!-- example using aria-labelledby-->
|
|
4061
|
+
// <label id='label-id'>Start Date</label>
|
|
4062
|
+
// <input aria-labelledby='label-id'/>
|
|
4063
|
+
// ```
|
|
4064
|
+
// 2. `aria-label` attribute (e.g. `<input aria-label="Departure"/>`)
|
|
4065
|
+
// 3. Label with `for`/`id`
|
|
4066
|
+
// ```
|
|
4067
|
+
// <!-- example using for/id -->
|
|
4068
|
+
// <label for="current-node">Label</label>
|
|
4069
|
+
// <input id="current-node"/>
|
|
4070
|
+
// ```
|
|
4071
|
+
// 4. `placeholder` attribute (e.g. `<input placeholder="06/03/1990"/>`)
|
|
4072
|
+
// 5. `title` attribute (e.g. `<input title="Check-In"/>`)
|
|
4073
|
+
// 6. text content
|
|
4074
|
+
// ```
|
|
4075
|
+
// <!-- example using text content -->
|
|
4076
|
+
// <label for="current-node"><span>Departure</span> Date</label>
|
|
4077
|
+
// <input id="current-node"/>
|
|
4078
|
+
// ```
|
|
4079
|
+
/**
|
|
4080
|
+
* Computes the *expected* ARIA accessible name for argument element based on [accname-1.2
|
|
4081
|
+
* specification](https://www.w3.org/TR/accname-1.2/). Implements a subset of accname-1.2,
|
|
4082
|
+
* and should only be used for the Datepicker's specific use case.
|
|
4083
|
+
*
|
|
4084
|
+
* Intended use:
|
|
4085
|
+
* This is not a general use implementation. Only implements the parts of accname-1.2 that are
|
|
4086
|
+
* required for the Datepicker's specific use case. This function is not intended for any other
|
|
4087
|
+
* use.
|
|
4088
|
+
*
|
|
4089
|
+
* Limitations:
|
|
4090
|
+
* - Only covers the needs of `matStartDate` and `matEndDate`. Does not support other use cases.
|
|
4091
|
+
* - See NOTES's in implementation for specific details on what parts of the accname-1.2
|
|
4092
|
+
* specification are not implemented.
|
|
4093
|
+
*
|
|
4094
|
+
* @param element {HTMLInputElement} native <input/> element of `matStartDate` or
|
|
4095
|
+
* `matEndDate` component. Corresponds to the 'Root Element' from accname-1.2
|
|
4096
|
+
*
|
|
4097
|
+
* @return expected ARIA accessible name of argument <input/>
|
|
4098
|
+
*/
|
|
4099
|
+
function _computeAriaAccessibleName(element) {
|
|
4100
|
+
return _computeAriaAccessibleNameInternal(element, true);
|
|
4101
|
+
}
|
|
4102
|
+
/**
|
|
4103
|
+
* Determine if argument node is an Element based on `nodeType` property. This function is safe to
|
|
4104
|
+
* use with server-side rendering.
|
|
4105
|
+
*/
|
|
4106
|
+
function ssrSafeIsElement(node) {
|
|
4107
|
+
return node.nodeType === Node.ELEMENT_NODE;
|
|
4108
|
+
}
|
|
4109
|
+
/**
|
|
4110
|
+
* Determine if argument node is an HTMLInputElement based on `nodeName` property. This funciton is
|
|
4111
|
+
* safe to use with server-side rendering.
|
|
4112
|
+
*/
|
|
4113
|
+
function ssrSafeIsHTMLInputElement(node) {
|
|
4114
|
+
return node.nodeName === 'INPUT';
|
|
4115
|
+
}
|
|
4116
|
+
/**
|
|
4117
|
+
* Determine if argument node is an HTMLTextAreaElement based on `nodeName` property. This
|
|
4118
|
+
* funciton is safe to use with server-side rendering.
|
|
4119
|
+
*/
|
|
4120
|
+
function ssrSafeIsHTMLTextAreaElement(node) {
|
|
4121
|
+
return node.nodeName === 'TEXTAREA';
|
|
4122
|
+
}
|
|
4123
|
+
/**
|
|
4124
|
+
* Calculate the expected ARIA accessible name for given DOM Node. Given DOM Node may be either the
|
|
4125
|
+
* "Root node" passed to `_computeAriaAccessibleName` or "Current node" as result of recursion.
|
|
4126
|
+
*
|
|
4127
|
+
* @return the accessible name of argument DOM Node
|
|
4128
|
+
*
|
|
4129
|
+
* @param currentNode node to determine accessible name of
|
|
4130
|
+
* @param isDirectlyReferenced true if `currentNode` is the root node to calculate ARIA accessible
|
|
4131
|
+
* name of. False if it is a result of recursion.
|
|
4132
|
+
*/
|
|
4133
|
+
function _computeAriaAccessibleNameInternal(currentNode, isDirectlyReferenced) {
|
|
4134
|
+
// NOTE: this differs from accname-1.2 specification.
|
|
4135
|
+
// - Does not implement Step 1. of accname-1.2: '''If `currentNode`'s role prohibits naming,
|
|
4136
|
+
// return the empty string ("")'''.
|
|
4137
|
+
// - Does not implement Step 2.A. of accname-1.2: '''if current node is hidden and not directly
|
|
4138
|
+
// referenced by aria-labelledby... return the empty string.'''
|
|
4139
|
+
// acc-name-1.2 Step 2.B.: aria-labelledby
|
|
4140
|
+
if (ssrSafeIsElement(currentNode) && isDirectlyReferenced) {
|
|
4141
|
+
const labelledbyIds = currentNode.getAttribute?.('aria-labelledby')?.split(/\s+/g) || [];
|
|
4142
|
+
const validIdRefs = labelledbyIds.reduce((validIds, id) => {
|
|
4143
|
+
const elem = document.getElementById(id);
|
|
4144
|
+
if (elem) {
|
|
4145
|
+
validIds.push(elem);
|
|
4146
|
+
}
|
|
4147
|
+
return validIds;
|
|
4148
|
+
}, []);
|
|
4149
|
+
if (validIdRefs.length) {
|
|
4150
|
+
return validIdRefs
|
|
4151
|
+
.map(idRef => {
|
|
4152
|
+
return _computeAriaAccessibleNameInternal(idRef, false);
|
|
4153
|
+
})
|
|
4154
|
+
.join(' ');
|
|
4266
4155
|
}
|
|
4267
4156
|
}
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
set max(value) {
|
|
4274
|
-
const validValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
|
|
4275
|
-
if (!this._dateAdapter.sameDate(validValue, this._max)) {
|
|
4276
|
-
this._max = validValue;
|
|
4277
|
-
this._revalidate();
|
|
4157
|
+
// acc-name-1.2 Step 2.C.: aria-label
|
|
4158
|
+
if (ssrSafeIsElement(currentNode)) {
|
|
4159
|
+
const ariaLabel = currentNode.getAttribute('aria-label')?.trim();
|
|
4160
|
+
if (ariaLabel) {
|
|
4161
|
+
return ariaLabel;
|
|
4278
4162
|
}
|
|
4279
4163
|
}
|
|
4280
|
-
|
|
4281
|
-
|
|
4282
|
-
|
|
4283
|
-
|
|
4284
|
-
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
|
|
4164
|
+
// acc-name-1.2 Step 2.D. attribute or element that defines a text alternative
|
|
4165
|
+
//
|
|
4166
|
+
// NOTE: this differs from accname-1.2 specification.
|
|
4167
|
+
// Only implements Step 2.D. for `<label>`,`<input/>`, and `<textarea/>` element. Does not
|
|
4168
|
+
// implement other elements that have an attribute or element that defines a text alternative.
|
|
4169
|
+
if (ssrSafeIsHTMLInputElement(currentNode) || ssrSafeIsHTMLTextAreaElement(currentNode)) {
|
|
4170
|
+
// use label with a `for` attribute referencing the current node
|
|
4171
|
+
if (currentNode.labels?.length) {
|
|
4172
|
+
return Array.from(currentNode.labels)
|
|
4173
|
+
.map(x => _computeAriaAccessibleNameInternal(x, false))
|
|
4174
|
+
.join(' ');
|
|
4291
4175
|
}
|
|
4292
|
-
|
|
4293
|
-
|
|
4294
|
-
|
|
4295
|
-
|
|
4296
|
-
|
|
4297
|
-
|
|
4176
|
+
// use placeholder if available
|
|
4177
|
+
const placeholder = currentNode.getAttribute('placeholder')?.trim();
|
|
4178
|
+
if (placeholder) {
|
|
4179
|
+
return placeholder;
|
|
4180
|
+
}
|
|
4181
|
+
// use title if available
|
|
4182
|
+
const title = currentNode.getAttribute('title')?.trim();
|
|
4183
|
+
if (title) {
|
|
4184
|
+
return title;
|
|
4298
4185
|
}
|
|
4299
|
-
return false;
|
|
4300
|
-
}
|
|
4301
|
-
/** Whether the datepicker input is empty. */
|
|
4302
|
-
get empty() {
|
|
4303
|
-
const startEmpty = this._startInput ? this._startInput.isEmpty() : false;
|
|
4304
|
-
const endEmpty = this._endInput ? this._endInput.isEmpty() : false;
|
|
4305
|
-
return startEmpty && endEmpty;
|
|
4306
4186
|
}
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4187
|
+
// NOTE: this differs from accname-1.2 specification.
|
|
4188
|
+
// - does not implement acc-name-1.2 Step 2.E.: '''if the current node is a control embedded
|
|
4189
|
+
// within the label... then include the embedded control as part of the text alternative in
|
|
4190
|
+
// the following manner...'''. Step 2E applies to embedded controls such as textbox, listbox,
|
|
4191
|
+
// range, etc.
|
|
4192
|
+
// - does not implement acc-name-1.2 step 2.F.: check that '''role allows name from content''',
|
|
4193
|
+
// which applies to `currentNode` and its children.
|
|
4194
|
+
// - does not implement acc-name-1.2 Step 2.F.ii.: '''Check for CSS generated textual content'''
|
|
4195
|
+
// (e.g. :before and :after).
|
|
4196
|
+
// - does not implement acc-name-1.2 Step 2.I.: '''if the current node has a Tooltip attribute,
|
|
4197
|
+
// return its value'''
|
|
4198
|
+
// Return text content with whitespace collapsed into a single space character. Accomplish
|
|
4199
|
+
// acc-name-1.2 steps 2F, 2G, and 2H.
|
|
4200
|
+
return (currentNode.textContent || '').replace(/\s+/g, ' ').trim();
|
|
4201
|
+
}
|
|
4202
|
+
|
|
4203
|
+
/**
|
|
4204
|
+
* Base class for the individual inputs that can be projected inside a `mat-date-range-input`.
|
|
4205
|
+
*/
|
|
4206
|
+
class MatDateRangeInputPartBase extends MatDatepickerInputBase {
|
|
4207
|
+
_rangeInput = inject(MatDateRangeInput);
|
|
4208
|
+
_elementRef = inject(ElementRef);
|
|
4209
|
+
_defaultErrorStateMatcher = inject(ErrorStateMatcher);
|
|
4210
|
+
_injector = inject(Injector);
|
|
4211
|
+
_parentForm = inject(NgForm, { optional: true });
|
|
4212
|
+
_parentFormGroup = inject(FormGroupDirective, { optional: true });
|
|
4319
4213
|
/**
|
|
4320
|
-
*
|
|
4321
|
-
* TODO(crisbeto): change type to `AbstractControlDirective` after #18206 lands.
|
|
4214
|
+
* Form control bound to this input part.
|
|
4322
4215
|
* @docs-private
|
|
4323
4216
|
*/
|
|
4324
4217
|
ngControl;
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
/**
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
*/
|
|
4331
|
-
disableAutomaticLabeling = true;
|
|
4332
|
-
constructor() {
|
|
4333
|
-
if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
|
|
4334
|
-
throw createMissingDateImplError('DateAdapter');
|
|
4335
|
-
}
|
|
4336
|
-
// The datepicker module can be used both with MDC and non-MDC form fields. We have
|
|
4337
|
-
// to conditionally add the MDC input class so that the range picker looks correctly.
|
|
4338
|
-
if (this._formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
|
|
4339
|
-
this._elementRef.nativeElement.classList.add('mat-mdc-input-element', 'mat-mdc-form-field-input-control', 'mdc-text-field__input');
|
|
4340
|
-
}
|
|
4341
|
-
// TODO(crisbeto): remove `as any` after #18206 lands.
|
|
4342
|
-
this.ngControl = inject(ControlContainer, { optional: true, self: true });
|
|
4218
|
+
_dir = inject(Directionality, { optional: true });
|
|
4219
|
+
_errorStateTracker;
|
|
4220
|
+
/** Object used to control when error messages are shown. */
|
|
4221
|
+
get errorStateMatcher() {
|
|
4222
|
+
return this._errorStateTracker.matcher;
|
|
4343
4223
|
}
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
* @docs-private
|
|
4347
|
-
*/
|
|
4348
|
-
setDescribedByIds(ids) {
|
|
4349
|
-
this._ariaDescribedBy = ids.length ? ids.join(' ') : null;
|
|
4224
|
+
set errorStateMatcher(value) {
|
|
4225
|
+
this._errorStateTracker.matcher = value;
|
|
4350
4226
|
}
|
|
4351
|
-
/**
|
|
4352
|
-
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
|
|
4227
|
+
/** Whether the input is in an error state. */
|
|
4228
|
+
get errorState() {
|
|
4229
|
+
return this._errorStateTracker.errorState;
|
|
4230
|
+
}
|
|
4231
|
+
set errorState(value) {
|
|
4232
|
+
this._errorStateTracker.errorState = value;
|
|
4233
|
+
}
|
|
4234
|
+
constructor() {
|
|
4235
|
+
super();
|
|
4236
|
+
this._errorStateTracker = new _ErrorStateTracker(this._defaultErrorStateMatcher, null, this._parentFormGroup, this._parentForm, this.stateChanges);
|
|
4237
|
+
}
|
|
4238
|
+
ngOnInit() {
|
|
4239
|
+
// We need the date input to provide itself as a `ControlValueAccessor` and a `Validator`, while
|
|
4240
|
+
// injecting its `NgControl` so that the error state is handled correctly. This introduces a
|
|
4241
|
+
// circular dependency, because both `ControlValueAccessor` and `Validator` depend on the input
|
|
4242
|
+
// itself. Usually we can work around it for the CVA, but there's no API to do it for the
|
|
4243
|
+
// validator. We work around it here by injecting the `NgControl` in `ngOnInit`, after
|
|
4244
|
+
// everything has been resolved.
|
|
4245
|
+
const ngControl = this._injector.get(NgControl, null, { optional: true, self: true });
|
|
4246
|
+
if (ngControl) {
|
|
4247
|
+
this.ngControl = ngControl;
|
|
4248
|
+
this._errorStateTracker.ngControl = ngControl;
|
|
4363
4249
|
}
|
|
4364
4250
|
}
|
|
4365
4251
|
ngAfterContentInit() {
|
|
4366
|
-
|
|
4367
|
-
if (!this._startInput) {
|
|
4368
|
-
throw Error('mat-date-range-input must contain a matStartDate input');
|
|
4369
|
-
}
|
|
4370
|
-
if (!this._endInput) {
|
|
4371
|
-
throw Error('mat-date-range-input must contain a matEndDate input');
|
|
4372
|
-
}
|
|
4373
|
-
}
|
|
4374
|
-
if (this._model) {
|
|
4375
|
-
this._registerModel(this._model);
|
|
4376
|
-
}
|
|
4377
|
-
// We don't need to unsubscribe from this, because we
|
|
4378
|
-
// know that the input streams will be completed on destroy.
|
|
4379
|
-
merge(this._startInput.stateChanges, this._endInput.stateChanges).subscribe(() => {
|
|
4380
|
-
this.stateChanges.next(undefined);
|
|
4381
|
-
});
|
|
4252
|
+
this._register();
|
|
4382
4253
|
}
|
|
4383
|
-
|
|
4384
|
-
if (
|
|
4385
|
-
this
|
|
4254
|
+
ngDoCheck() {
|
|
4255
|
+
if (this.ngControl) {
|
|
4256
|
+
// We need to re-evaluate this on every change detection cycle, because there are some
|
|
4257
|
+
// error triggers that we can't subscribe to (e.g. parent form submissions). This means
|
|
4258
|
+
// that whatever logic is in here has to be super lean or we risk destroying the performance.
|
|
4259
|
+
this.updateErrorState();
|
|
4386
4260
|
}
|
|
4387
4261
|
}
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
this.
|
|
4391
|
-
this.stateChanges.complete();
|
|
4262
|
+
/** Gets whether the input is empty. */
|
|
4263
|
+
isEmpty() {
|
|
4264
|
+
return this._elementRef.nativeElement.value.length === 0;
|
|
4392
4265
|
}
|
|
4393
|
-
/** Gets the
|
|
4394
|
-
|
|
4395
|
-
return this.
|
|
4266
|
+
/** Gets the placeholder of the input. */
|
|
4267
|
+
_getPlaceholder() {
|
|
4268
|
+
return this._elementRef.nativeElement.placeholder;
|
|
4396
4269
|
}
|
|
4397
|
-
/**
|
|
4398
|
-
|
|
4399
|
-
|
|
4270
|
+
/** Focuses the input. */
|
|
4271
|
+
focus() {
|
|
4272
|
+
this._elementRef.nativeElement.focus();
|
|
4400
4273
|
}
|
|
4401
|
-
/** Gets the
|
|
4402
|
-
|
|
4403
|
-
|
|
4274
|
+
/** Gets the value that should be used when mirroring the input's size. */
|
|
4275
|
+
getMirrorValue() {
|
|
4276
|
+
const element = this._elementRef.nativeElement;
|
|
4277
|
+
const value = element.value;
|
|
4278
|
+
return value.length > 0 ? value : element.placeholder;
|
|
4404
4279
|
}
|
|
4405
|
-
/**
|
|
4406
|
-
|
|
4407
|
-
|
|
4280
|
+
/** Refreshes the error state of the input. */
|
|
4281
|
+
updateErrorState() {
|
|
4282
|
+
this._errorStateTracker.updateErrorState();
|
|
4283
|
+
}
|
|
4284
|
+
/** Handles `input` events on the input element. */
|
|
4285
|
+
_onInput(value) {
|
|
4286
|
+
super._onInput(value);
|
|
4287
|
+
this._rangeInput._handleChildValueChange();
|
|
4288
|
+
}
|
|
4289
|
+
/** Opens the datepicker associated with the input. */
|
|
4290
|
+
_openPopup() {
|
|
4291
|
+
this._rangeInput._openDatepicker();
|
|
4292
|
+
}
|
|
4293
|
+
/** Gets the minimum date from the range input. */
|
|
4294
|
+
_getMinDate() {
|
|
4295
|
+
return this._rangeInput.min;
|
|
4296
|
+
}
|
|
4297
|
+
/** Gets the maximum date from the range input. */
|
|
4298
|
+
_getMaxDate() {
|
|
4299
|
+
return this._rangeInput.max;
|
|
4300
|
+
}
|
|
4301
|
+
/** Gets the date filter function from the range input. */
|
|
4302
|
+
_getDateFilter() {
|
|
4303
|
+
return this._rangeInput.dateFilter;
|
|
4304
|
+
}
|
|
4305
|
+
_parentDisabled() {
|
|
4306
|
+
return this._rangeInput._groupDisabled;
|
|
4307
|
+
}
|
|
4308
|
+
_shouldHandleChangeEvent({ source }) {
|
|
4309
|
+
return source !== this._rangeInput._startInput && source !== this._rangeInput._endInput;
|
|
4408
4310
|
}
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
const
|
|
4412
|
-
|
|
4311
|
+
_assignValueProgrammatically(value) {
|
|
4312
|
+
super._assignValueProgrammatically(value);
|
|
4313
|
+
const opposite = (this === this._rangeInput._startInput
|
|
4314
|
+
? this._rangeInput._endInput
|
|
4315
|
+
: this._rangeInput._startInput);
|
|
4316
|
+
opposite?._validatorOnChange();
|
|
4413
4317
|
}
|
|
4414
|
-
/**
|
|
4415
|
-
|
|
4416
|
-
return this.
|
|
4318
|
+
/** return the ARIA accessible name of the input element */
|
|
4319
|
+
_getAccessibleName() {
|
|
4320
|
+
return _computeAriaAccessibleName(this._elementRef.nativeElement);
|
|
4417
4321
|
}
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4322
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateRangeInputPartBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4323
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDateRangeInputPartBase, isStandalone: true, inputs: { errorStateMatcher: "errorStateMatcher" }, usesInheritance: true, ngImport: i0 });
|
|
4324
|
+
}
|
|
4325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateRangeInputPartBase, decorators: [{
|
|
4326
|
+
type: Directive
|
|
4327
|
+
}], ctorParameters: () => [], propDecorators: { errorStateMatcher: [{
|
|
4328
|
+
type: Input
|
|
4329
|
+
}] } });
|
|
4330
|
+
/** Input for entering the start date in a `mat-date-range-input`. */
|
|
4331
|
+
class MatStartDate extends MatDateRangeInputPartBase {
|
|
4332
|
+
/** Validator that checks that the start date isn't after the end date. */
|
|
4333
|
+
_startValidator = (control) => {
|
|
4334
|
+
const start = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
|
|
4335
|
+
const end = this._model ? this._model.selection.end : null;
|
|
4336
|
+
return !start || !end || this._dateAdapter.compareDate(start, end) <= 0
|
|
4337
|
+
? null
|
|
4338
|
+
: { 'matStartDateInvalid': { 'end': end, 'actual': start } };
|
|
4339
|
+
};
|
|
4340
|
+
_validator = Validators.compose([...super._getValidators(), this._startValidator]);
|
|
4341
|
+
_register() {
|
|
4342
|
+
this._rangeInput._startInput = this;
|
|
4422
4343
|
}
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4344
|
+
_getValueFromModel(modelValue) {
|
|
4345
|
+
return modelValue.start;
|
|
4346
|
+
}
|
|
4347
|
+
_shouldHandleChangeEvent(change) {
|
|
4348
|
+
if (!super._shouldHandleChangeEvent(change)) {
|
|
4349
|
+
return false;
|
|
4350
|
+
}
|
|
4351
|
+
else {
|
|
4352
|
+
return !change.oldValue?.start
|
|
4353
|
+
? !!change.selection.start
|
|
4354
|
+
: !change.selection.start ||
|
|
4355
|
+
!!this._dateAdapter.compareDate(change.oldValue.start, change.selection.start);
|
|
4427
4356
|
}
|
|
4428
4357
|
}
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4358
|
+
_assignValueToModel(value) {
|
|
4359
|
+
if (this._model) {
|
|
4360
|
+
const range = new DateRange(value, this._model.selection.end);
|
|
4361
|
+
this._model.updateSelection(range, this);
|
|
4362
|
+
}
|
|
4434
4363
|
}
|
|
4435
|
-
|
|
4436
|
-
|
|
4437
|
-
|
|
4438
|
-
|
|
4364
|
+
_formatValue(value) {
|
|
4365
|
+
super._formatValue(value);
|
|
4366
|
+
// Any time the input value is reformatted we need to tell the parent.
|
|
4367
|
+
this._rangeInput._handleChildValueChange();
|
|
4439
4368
|
}
|
|
4440
|
-
|
|
4441
|
-
|
|
4369
|
+
_onKeydown(event) {
|
|
4370
|
+
const endInput = this._rangeInput._endInput;
|
|
4371
|
+
const element = this._elementRef.nativeElement;
|
|
4372
|
+
const isLtr = this._dir?.value !== 'rtl';
|
|
4373
|
+
// If the user hits RIGHT (LTR) when at the end of the input (and no
|
|
4374
|
+
// selection), move the cursor to the start of the end input.
|
|
4375
|
+
if (((event.keyCode === RIGHT_ARROW && isLtr) || (event.keyCode === LEFT_ARROW && !isLtr)) &&
|
|
4376
|
+
element.selectionStart === element.value.length &&
|
|
4377
|
+
element.selectionEnd === element.value.length) {
|
|
4378
|
+
event.preventDefault();
|
|
4379
|
+
endInput._elementRef.nativeElement.setSelectionRange(0, 0);
|
|
4380
|
+
endInput.focus();
|
|
4381
|
+
}
|
|
4382
|
+
else {
|
|
4383
|
+
super._onKeydown(event);
|
|
4384
|
+
}
|
|
4442
4385
|
}
|
|
4443
|
-
|
|
4444
|
-
|
|
4386
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatStartDate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
4387
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatStartDate, isStandalone: true, selector: "input[matStartDate]", outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "_rangeInput._ariaOwns\n ? _rangeInput._ariaOwns()\n : (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null" }, classAttribute: "mat-start-date mat-date-range-input-inner" }, providers: [
|
|
4388
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },
|
|
4389
|
+
{ provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true },
|
|
4390
|
+
], usesInheritance: true, ngImport: i0 });
|
|
4391
|
+
}
|
|
4392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatStartDate, decorators: [{
|
|
4393
|
+
type: Directive,
|
|
4394
|
+
args: [{
|
|
4395
|
+
selector: 'input[matStartDate]',
|
|
4396
|
+
host: {
|
|
4397
|
+
'class': 'mat-start-date mat-date-range-input-inner',
|
|
4398
|
+
'[disabled]': 'disabled',
|
|
4399
|
+
'(input)': '_onInput($event.target.value)',
|
|
4400
|
+
'(change)': '_onChange()',
|
|
4401
|
+
'(keydown)': '_onKeydown($event)',
|
|
4402
|
+
'[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
|
|
4403
|
+
'[attr.aria-owns]': `_rangeInput._ariaOwns
|
|
4404
|
+
? _rangeInput._ariaOwns()
|
|
4405
|
+
: (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`,
|
|
4406
|
+
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
|
|
4407
|
+
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
|
|
4408
|
+
'(blur)': '_onBlur()',
|
|
4409
|
+
'type': 'text',
|
|
4410
|
+
},
|
|
4411
|
+
providers: [
|
|
4412
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: MatStartDate, multi: true },
|
|
4413
|
+
{ provide: NG_VALIDATORS, useExisting: MatStartDate, multi: true },
|
|
4414
|
+
],
|
|
4415
|
+
// These need to be specified explicitly, because some tooling doesn't
|
|
4416
|
+
// seem to pick them up from the base class. See #20932.
|
|
4417
|
+
outputs: ['dateChange', 'dateInput'],
|
|
4418
|
+
}]
|
|
4419
|
+
}] });
|
|
4420
|
+
/** Input for entering the end date in a `mat-date-range-input`. */
|
|
4421
|
+
class MatEndDate extends MatDateRangeInputPartBase {
|
|
4422
|
+
/** Validator that checks that the end date isn't before the start date. */
|
|
4423
|
+
_endValidator = (control) => {
|
|
4424
|
+
const end = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
|
|
4425
|
+
const start = this._model ? this._model.selection.start : null;
|
|
4426
|
+
return !end || !start || this._dateAdapter.compareDate(end, start) >= 0
|
|
4427
|
+
? null
|
|
4428
|
+
: { 'matEndDateInvalid': { 'start': start, 'actual': end } };
|
|
4429
|
+
};
|
|
4430
|
+
_register() {
|
|
4431
|
+
this._rangeInput._endInput = this;
|
|
4445
4432
|
}
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
|
|
4449
|
-
this.stateChanges.next();
|
|
4433
|
+
_validator = Validators.compose([...super._getValidators(), this._endValidator]);
|
|
4434
|
+
_getValueFromModel(modelValue) {
|
|
4435
|
+
return modelValue.end;
|
|
4450
4436
|
}
|
|
4451
|
-
|
|
4452
|
-
|
|
4453
|
-
|
|
4454
|
-
this._startInput._validatorOnChange();
|
|
4437
|
+
_shouldHandleChangeEvent(change) {
|
|
4438
|
+
if (!super._shouldHandleChangeEvent(change)) {
|
|
4439
|
+
return false;
|
|
4455
4440
|
}
|
|
4456
|
-
|
|
4457
|
-
|
|
4441
|
+
else {
|
|
4442
|
+
return !change.oldValue?.end
|
|
4443
|
+
? !!change.selection.end
|
|
4444
|
+
: !change.selection.end ||
|
|
4445
|
+
!!this._dateAdapter.compareDate(change.oldValue.end, change.selection.end);
|
|
4458
4446
|
}
|
|
4459
4447
|
}
|
|
4460
|
-
|
|
4461
|
-
|
|
4462
|
-
|
|
4463
|
-
this.
|
|
4448
|
+
_assignValueToModel(value) {
|
|
4449
|
+
if (this._model) {
|
|
4450
|
+
const range = new DateRange(this._model.selection.start, value);
|
|
4451
|
+
this._model.updateSelection(range, this);
|
|
4464
4452
|
}
|
|
4465
|
-
|
|
4466
|
-
|
|
4453
|
+
}
|
|
4454
|
+
_moveCaretToEndOfStartInput() {
|
|
4455
|
+
const startInput = this._rangeInput._startInput._elementRef.nativeElement;
|
|
4456
|
+
const value = startInput.value;
|
|
4457
|
+
if (value.length > 0) {
|
|
4458
|
+
startInput.setSelectionRange(value.length, value.length);
|
|
4467
4459
|
}
|
|
4460
|
+
startInput.focus();
|
|
4468
4461
|
}
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4462
|
+
_onKeydown(event) {
|
|
4463
|
+
const element = this._elementRef.nativeElement;
|
|
4464
|
+
const isLtr = this._dir?.value !== 'rtl';
|
|
4465
|
+
// If the user is pressing backspace on an empty end input, move focus back to the start.
|
|
4466
|
+
if (event.keyCode === BACKSPACE && !element.value) {
|
|
4467
|
+
this._moveCaretToEndOfStartInput();
|
|
4468
|
+
}
|
|
4469
|
+
// If the user hits LEFT (LTR) when at the start of the input (and no
|
|
4470
|
+
// selection), move the cursor to the end of the start input.
|
|
4471
|
+
else if (((event.keyCode === LEFT_ARROW && isLtr) || (event.keyCode === RIGHT_ARROW && !isLtr)) &&
|
|
4472
|
+
element.selectionStart === 0 &&
|
|
4473
|
+
element.selectionEnd === 0) {
|
|
4474
|
+
event.preventDefault();
|
|
4475
|
+
this._moveCaretToEndOfStartInput();
|
|
4476
|
+
}
|
|
4477
|
+
else {
|
|
4478
|
+
super._onKeydown(event);
|
|
4479
|
+
}
|
|
4472
4480
|
}
|
|
4473
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4474
|
-
static
|
|
4475
|
-
{ provide:
|
|
4476
|
-
{ provide:
|
|
4477
|
-
],
|
|
4481
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatEndDate, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
4482
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatEndDate, isStandalone: true, selector: "input[matEndDate]", outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { attributes: { "type": "text" }, listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "keydown": "_onKeydown($event)", "blur": "_onBlur()" }, properties: { "disabled": "disabled", "attr.aria-haspopup": "_rangeInput.rangePicker ? \"dialog\" : null", "attr.aria-owns": "_rangeInput._ariaOwns\n ? _rangeInput._ariaOwns()\n : (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null", "attr.min": "_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null", "attr.max": "_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null" }, classAttribute: "mat-end-date mat-date-range-input-inner" }, providers: [
|
|
4483
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },
|
|
4484
|
+
{ provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true },
|
|
4485
|
+
], usesInheritance: true, ngImport: i0 });
|
|
4478
4486
|
}
|
|
4479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4480
|
-
type:
|
|
4481
|
-
args: [{
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
'
|
|
4485
|
-
'[
|
|
4486
|
-
'
|
|
4487
|
-
'
|
|
4488
|
-
'
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
}], disabled: [{
|
|
4508
|
-
type: Input,
|
|
4509
|
-
args: [{ transform: booleanAttribute }]
|
|
4510
|
-
}], separator: [{
|
|
4511
|
-
type: Input
|
|
4512
|
-
}], comparisonStart: [{
|
|
4513
|
-
type: Input
|
|
4514
|
-
}], comparisonEnd: [{
|
|
4515
|
-
type: Input
|
|
4516
|
-
}], _startInput: [{
|
|
4517
|
-
type: ContentChild,
|
|
4518
|
-
args: [MatStartDate]
|
|
4519
|
-
}], _endInput: [{
|
|
4520
|
-
type: ContentChild,
|
|
4521
|
-
args: [MatEndDate]
|
|
4522
|
-
}] } });
|
|
4487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatEndDate, decorators: [{
|
|
4488
|
+
type: Directive,
|
|
4489
|
+
args: [{
|
|
4490
|
+
selector: 'input[matEndDate]',
|
|
4491
|
+
host: {
|
|
4492
|
+
'class': 'mat-end-date mat-date-range-input-inner',
|
|
4493
|
+
'[disabled]': 'disabled',
|
|
4494
|
+
'(input)': '_onInput($event.target.value)',
|
|
4495
|
+
'(change)': '_onChange()',
|
|
4496
|
+
'(keydown)': '_onKeydown($event)',
|
|
4497
|
+
'[attr.aria-haspopup]': '_rangeInput.rangePicker ? "dialog" : null',
|
|
4498
|
+
'[attr.aria-owns]': `_rangeInput._ariaOwns
|
|
4499
|
+
? _rangeInput._ariaOwns()
|
|
4500
|
+
: (_rangeInput.rangePicker?.opened && _rangeInput.rangePicker.id) || null`,
|
|
4501
|
+
'[attr.min]': '_getMinDate() ? _dateAdapter.toIso8601(_getMinDate()) : null',
|
|
4502
|
+
'[attr.max]': '_getMaxDate() ? _dateAdapter.toIso8601(_getMaxDate()) : null',
|
|
4503
|
+
'(blur)': '_onBlur()',
|
|
4504
|
+
'type': 'text',
|
|
4505
|
+
},
|
|
4506
|
+
providers: [
|
|
4507
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: MatEndDate, multi: true },
|
|
4508
|
+
{ provide: NG_VALIDATORS, useExisting: MatEndDate, multi: true },
|
|
4509
|
+
],
|
|
4510
|
+
// These need to be specified explicitly, because some tooling doesn't
|
|
4511
|
+
// seem to pick them up from the base class. See #20932.
|
|
4512
|
+
outputs: ['dateChange', 'dateInput'],
|
|
4513
|
+
}]
|
|
4514
|
+
}] });
|
|
4523
4515
|
|
|
4524
4516
|
// TODO(mmalerba): We use a component instead of a directive here so the user can use implicit
|
|
4525
4517
|
// template reference variables (e.g. #d vs #d="matDateRangePicker"). We can change this to a
|
|
@@ -4536,14 +4528,14 @@ class MatDateRangePicker extends MatDatepickerBase {
|
|
|
4536
4528
|
instance.endDateAccessibleName = input._getEndDateAccessibleName();
|
|
4537
4529
|
}
|
|
4538
4530
|
}
|
|
4539
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4540
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
4531
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateRangePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDateRangePicker, isStandalone: true, selector: "mat-date-range-picker", providers: [
|
|
4541
4533
|
MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
|
|
4542
4534
|
MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
|
|
4543
4535
|
{ provide: MatDatepickerBase, useExisting: MatDateRangePicker },
|
|
4544
4536
|
], exportAs: ["matDateRangePicker"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4545
4537
|
}
|
|
4546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDateRangePicker, decorators: [{
|
|
4547
4539
|
type: Component,
|
|
4548
4540
|
args: [{
|
|
4549
4541
|
selector: 'mat-date-range-picker',
|
|
@@ -4567,10 +4559,10 @@ class MatDatepickerApply {
|
|
|
4567
4559
|
this._datepicker._applyPendingSelection();
|
|
4568
4560
|
this._datepicker.close();
|
|
4569
4561
|
}
|
|
4570
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4571
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
4562
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerApply, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4563
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepickerApply, isStandalone: true, selector: "[matDatepickerApply], [matDateRangePickerApply]", host: { listeners: { "click": "_applySelection()" } }, ngImport: i0 });
|
|
4572
4564
|
}
|
|
4573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerApply, decorators: [{
|
|
4574
4566
|
type: Directive,
|
|
4575
4567
|
args: [{
|
|
4576
4568
|
selector: '[matDatepickerApply], [matDateRangePickerApply]',
|
|
@@ -4581,10 +4573,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
|
|
|
4581
4573
|
class MatDatepickerCancel {
|
|
4582
4574
|
_datepicker = inject(MatDatepickerBase);
|
|
4583
4575
|
constructor() { }
|
|
4584
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4585
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
4576
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerCancel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4577
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepickerCancel, isStandalone: true, selector: "[matDatepickerCancel], [matDateRangePickerCancel]", host: { listeners: { "click": "_datepicker.close()" } }, ngImport: i0 });
|
|
4586
4578
|
}
|
|
4587
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerCancel, decorators: [{
|
|
4588
4580
|
type: Directive,
|
|
4589
4581
|
args: [{
|
|
4590
4582
|
selector: '[matDatepickerCancel], [matDateRangePickerCancel]',
|
|
@@ -4612,8 +4604,8 @@ class MatDatepickerActions {
|
|
|
4612
4604
|
this._portal?.detach();
|
|
4613
4605
|
}
|
|
4614
4606
|
}
|
|
4615
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4616
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
4607
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0-next.3", type: MatDatepickerActions, isStandalone: true, selector: "mat-datepicker-actions, mat-date-range-picker-actions", viewQueries: [{ propertyName: "_template", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
|
|
4617
4609
|
<ng-template>
|
|
4618
4610
|
<div class="mat-datepicker-actions">
|
|
4619
4611
|
<ng-content></ng-content>
|
|
@@ -4621,7 +4613,7 @@ class MatDatepickerActions {
|
|
|
4621
4613
|
</ng-template>
|
|
4622
4614
|
`, isInline: true, styles: [".mat-datepicker-actions{display:flex;justify-content:flex-end;align-items:center;padding:0 8px 8px 8px}.mat-datepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mat-datepicker-actions .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
4623
4615
|
}
|
|
4624
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerActions, decorators: [{
|
|
4625
4617
|
type: Component,
|
|
4626
4618
|
args: [{ selector: 'mat-datepicker-actions, mat-date-range-picker-actions', template: `
|
|
4627
4619
|
<ng-template>
|
|
@@ -4636,8 +4628,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.2",
|
|
|
4636
4628
|
}] } });
|
|
4637
4629
|
|
|
4638
4630
|
class MatDatepickerModule {
|
|
4639
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4640
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.0-next.
|
|
4631
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
4632
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerModule, imports: [MatButtonModule,
|
|
4641
4633
|
OverlayModule,
|
|
4642
4634
|
A11yModule,
|
|
4643
4635
|
PortalModule,
|
|
@@ -4678,7 +4670,7 @@ class MatDatepickerModule {
|
|
|
4678
4670
|
MatDatepickerActions,
|
|
4679
4671
|
MatDatepickerCancel,
|
|
4680
4672
|
MatDatepickerApply] });
|
|
4681
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4673
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerModule, providers: [MatDatepickerIntl, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [MatButtonModule,
|
|
4682
4674
|
OverlayModule,
|
|
4683
4675
|
A11yModule,
|
|
4684
4676
|
PortalModule,
|
|
@@ -4687,7 +4679,7 @@ class MatDatepickerModule {
|
|
|
4687
4679
|
MatDatepickerToggle,
|
|
4688
4680
|
MatCalendarHeader, CdkScrollableModule] });
|
|
4689
4681
|
}
|
|
4690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.
|
|
4682
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: MatDatepickerModule, decorators: [{
|
|
4691
4683
|
type: NgModule,
|
|
4692
4684
|
args: [{
|
|
4693
4685
|
imports: [
|