@ng-matero/extensions 18.1.3 → 18.2.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/alert/alert.scss +1 -1
- package/core/theming/_definition.scss +16 -5
- package/core/tokens/_m3-tokens.scss +311 -153
- package/core/tokens/_token-definition.scss +271 -0
- package/core/tokens/_token-utils.scss +70 -301
- package/core/tokens/m2/mdc/_plain-tooltip.scss +4 -4
- package/core/tokens/m2/mtx/_alert.scss +4 -4
- package/core/tokens/m2/mtx/_colorpicker.scss +4 -4
- package/core/tokens/m2/mtx/_datetimepicker.scss +4 -4
- package/core/tokens/m2/mtx/_drawer.scss +4 -4
- package/core/tokens/m2/mtx/_grid.scss +4 -4
- package/core/tokens/m2/mtx/_loader.scss +4 -4
- package/core/tokens/m2/mtx/_popover.scss +4 -4
- package/core/tokens/m2/mtx/_progress.scss +4 -4
- package/core/tokens/m2/mtx/_select.scss +4 -4
- package/core/tokens/m2/mtx/_split.scss +4 -4
- package/core/tokens/m3/mtx/_alert.scss +2 -2
- package/core/tokens/m3/mtx/_colorpicker.scss +2 -2
- package/core/tokens/m3/mtx/_datetimepicker.scss +6 -6
- package/core/tokens/m3/mtx/_drawer.scss +3 -3
- package/core/tokens/m3/mtx/_grid.scss +3 -3
- package/core/tokens/m3/mtx/_loader.scss +2 -2
- package/core/tokens/m3/mtx/_popover.scss +3 -3
- package/core/tokens/m3/mtx/_progress.scss +6 -6
- package/core/tokens/m3/mtx/_select.scss +4 -4
- package/core/tokens/m3/mtx/_split.scss +2 -2
- package/datetimepicker/calendar-body.scss +1 -1
- package/datetimepicker/calendar.scss +5 -5
- package/esm2022/alert/alert-module.mjs +4 -4
- package/esm2022/alert/alert.mjs +5 -5
- package/esm2022/button/button-loading.mjs +3 -3
- package/esm2022/button/button-module.mjs +4 -4
- package/esm2022/checkbox-group/checkbox-group-module.mjs +4 -4
- package/esm2022/checkbox-group/checkbox-group.mjs +5 -5
- package/esm2022/colorpicker/colorpicker-input.mjs +3 -3
- package/esm2022/colorpicker/colorpicker-module.mjs +4 -4
- package/esm2022/colorpicker/colorpicker-toggle.mjs +8 -8
- package/esm2022/colorpicker/colorpicker.mjs +6 -6
- package/esm2022/column-resize/column-resize-directives/column-resize-flex.mjs +3 -3
- package/esm2022/column-resize/column-resize-directives/column-resize.mjs +3 -3
- package/esm2022/column-resize/column-resize-module.mjs +4 -4
- package/esm2022/column-resize/column-resize-notifier.mjs +6 -6
- package/esm2022/column-resize/column-resize.mjs +3 -3
- package/esm2022/column-resize/column-size-store.mjs +3 -3
- package/esm2022/column-resize/event-dispatcher.mjs +3 -3
- package/esm2022/column-resize/overlay-handle.mjs +3 -3
- package/esm2022/column-resize/resizable.mjs +3 -3
- package/esm2022/column-resize/resize-strategy.mjs +9 -9
- package/esm2022/core/datetime/datetime.module.mjs +8 -8
- package/esm2022/core/datetime/native-datetime-adapter.mjs +3 -3
- package/esm2022/core/pipes/is-template-ref.pipe.mjs +3 -3
- package/esm2022/core/pipes/pipes.module.mjs +4 -4
- package/esm2022/core/pipes/to-observable.pipe.mjs +3 -3
- package/esm2022/datetimepicker/calendar-body.mjs +4 -4
- package/esm2022/datetimepicker/calendar.mjs +5 -5
- package/esm2022/datetimepicker/clock.mjs +4 -4
- package/esm2022/datetimepicker/datetimepicker-actions.mjs +12 -12
- package/esm2022/datetimepicker/datetimepicker-input.mjs +3 -3
- package/esm2022/datetimepicker/datetimepicker-intl.mjs +3 -3
- package/esm2022/datetimepicker/datetimepicker-module.mjs +4 -4
- package/esm2022/datetimepicker/datetimepicker-toggle.mjs +8 -8
- package/esm2022/datetimepicker/datetimepicker.mjs +8 -8
- package/esm2022/datetimepicker/month-view.mjs +3 -3
- package/esm2022/datetimepicker/multi-year-view.mjs +3 -3
- package/esm2022/datetimepicker/time.mjs +8 -8
- package/esm2022/datetimepicker/year-view.mjs +3 -3
- package/esm2022/dialog/dialog-container.mjs +3 -3
- package/esm2022/dialog/dialog-module.mjs +4 -4
- package/esm2022/dialog/dialog.mjs +3 -3
- package/esm2022/drawer/drawer-container.mjs +5 -5
- package/esm2022/drawer/drawer-module.mjs +4 -4
- package/esm2022/drawer/drawer.mjs +3 -3
- package/esm2022/grid/cell.mjs +4 -4
- package/esm2022/grid/column-menu.mjs +5 -5
- package/esm2022/grid/column-resize/column-resize-directives/column-resize-flex.mjs +3 -3
- package/esm2022/grid/column-resize/column-resize-directives/column-resize.mjs +3 -3
- package/esm2022/grid/column-resize/column-resize-module.mjs +8 -8
- package/esm2022/grid/column-resize/overlay-handle.mjs +3 -3
- package/esm2022/grid/column-resize/resizable-directives/resizable.mjs +3 -3
- package/esm2022/grid/column-resize/resize-strategy.mjs +3 -3
- package/esm2022/grid/expansion-toggle.mjs +3 -3
- package/esm2022/grid/grid-module.mjs +4 -4
- package/esm2022/grid/grid-pipes.mjs +21 -21
- package/esm2022/grid/grid-utils.mjs +3 -3
- package/esm2022/grid/grid.mjs +5 -5
- package/esm2022/grid/selectable-cell.mjs +3 -3
- package/esm2022/loader/loader-module.mjs +4 -4
- package/esm2022/loader/loader.mjs +3 -3
- package/esm2022/photoviewer/photoviewer-module.mjs +4 -4
- package/esm2022/photoviewer/photoviewer.mjs +3 -3
- package/esm2022/popover/popover-content.mjs +6 -6
- package/esm2022/popover/popover-module.mjs +4 -4
- package/esm2022/popover/popover-target.mjs +3 -3
- package/esm2022/popover/popover-trigger.mjs +3 -3
- package/esm2022/popover/popover.mjs +5 -5
- package/esm2022/progress/progress-module.mjs +4 -4
- package/esm2022/progress/progress.mjs +4 -4
- package/esm2022/select/option.mjs +3 -3
- package/esm2022/select/select-module.mjs +12 -8
- package/esm2022/select/select.mjs +9 -6
- package/esm2022/select/templates.mjs +45 -34
- package/esm2022/split/split-module.mjs +4 -4
- package/esm2022/split/split-pane.mjs +3 -3
- package/esm2022/split/split.mjs +4 -4
- package/esm2022/tooltip/tooltip-module.mjs +4 -4
- package/esm2022/tooltip/tooltip.mjs +6 -6
- package/fesm2022/mtxAlert.mjs +8 -8
- package/fesm2022/mtxAlert.mjs.map +1 -1
- package/fesm2022/mtxButton.mjs +7 -7
- package/fesm2022/mtxCheckboxGroup.mjs +8 -8
- package/fesm2022/mtxCheckboxGroup.mjs.map +1 -1
- package/fesm2022/mtxColorpicker.mjs +20 -20
- package/fesm2022/mtxColorpicker.mjs.map +1 -1
- package/fesm2022/mtxColumnResize.mjs +40 -40
- package/fesm2022/mtxCore.mjs +21 -21
- package/fesm2022/mtxDatetimepicker.mjs +64 -64
- package/fesm2022/mtxDatetimepicker.mjs.map +1 -1
- package/fesm2022/mtxDialog.mjs +10 -10
- package/fesm2022/mtxDrawer.mjs +11 -11
- package/fesm2022/mtxDrawer.mjs.map +1 -1
- package/fesm2022/mtxGrid.mjs +68 -68
- package/fesm2022/mtxGrid.mjs.map +1 -1
- package/fesm2022/mtxLoader.mjs +7 -7
- package/fesm2022/mtxPhotoviewer.mjs +7 -7
- package/fesm2022/mtxPopover.mjs +20 -20
- package/fesm2022/mtxPopover.mjs.map +1 -1
- package/fesm2022/mtxProgress.mjs +8 -8
- package/fesm2022/mtxProgress.mjs.map +1 -1
- package/fesm2022/mtxSelect.mjs +65 -47
- package/fesm2022/mtxSelect.mjs.map +1 -1
- package/fesm2022/mtxSplit.mjs +11 -11
- package/fesm2022/mtxSplit.mjs.map +1 -1
- package/fesm2022/mtxTooltip.mjs +10 -10
- package/grid/column-menu.scss +3 -3
- package/grid/column-resize/_column-resize.scss +2 -2
- package/grid/grid.scss +8 -8
- package/package.json +37 -25
- package/prebuilt-themes/azure-blue.css +1 -1
- package/prebuilt-themes/cyan-orange.css +1 -1
- package/prebuilt-themes/deeppurple-amber.css +1 -1
- package/prebuilt-themes/indigo-pink.css +1 -1
- package/prebuilt-themes/magenta-violet.css +1 -1
- package/prebuilt-themes/pink-bluegrey.css +1 -1
- package/prebuilt-themes/purple-green.css +1 -1
- package/prebuilt-themes/rose-red.css +1 -1
- package/select/select-module.d.ts +1 -1
- package/select/select.d.ts +2 -1
- package/select/select.scss +8 -8
- package/select/templates.d.ts +6 -0
|
@@ -4,10 +4,10 @@ export class MtxIsTemplateRefPipe {
|
|
|
4
4
|
transform(obj) {
|
|
5
5
|
return obj instanceof TemplateRef;
|
|
6
6
|
}
|
|
7
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
8
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
7
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxIsTemplateRefPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
8
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxIsTemplateRefPipe, isStandalone: true, name: "isTemplateRef" }); }
|
|
9
9
|
}
|
|
10
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
10
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxIsTemplateRefPipe, decorators: [{
|
|
11
11
|
type: Pipe,
|
|
12
12
|
args: [{ name: 'isTemplateRef', standalone: true }]
|
|
13
13
|
}] });
|
|
@@ -4,11 +4,11 @@ import { MtxToObservablePipe } from './to-observable.pipe';
|
|
|
4
4
|
import { MtxIsTemplateRefPipe } from './is-template-ref.pipe';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export class MtxPipesModule {
|
|
7
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
8
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
9
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
7
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxPipesModule, imports: [CommonModule, MtxToObservablePipe, MtxIsTemplateRefPipe], exports: [MtxToObservablePipe, MtxIsTemplateRefPipe] }); }
|
|
9
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPipesModule, imports: [CommonModule] }); }
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxPipesModule, decorators: [{
|
|
12
12
|
type: NgModule,
|
|
13
13
|
args: [{
|
|
14
14
|
imports: [CommonModule, MtxToObservablePipe, MtxIsTemplateRefPipe],
|
|
@@ -6,10 +6,10 @@ export class MtxToObservablePipe {
|
|
|
6
6
|
transform(value) {
|
|
7
7
|
return isObservable(value) ? value : of(value);
|
|
8
8
|
}
|
|
9
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
10
|
-
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
9
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxToObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
10
|
+
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxToObservablePipe, isStandalone: true, name: "toObservable" }); }
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxToObservablePipe, decorators: [{
|
|
13
13
|
type: Pipe,
|
|
14
14
|
args: [{ name: 'toObservable', standalone: true }]
|
|
15
15
|
}] });
|
|
@@ -47,14 +47,14 @@ export class MtxCalendarBody {
|
|
|
47
47
|
}
|
|
48
48
|
return cellNumber === this.activeCell;
|
|
49
49
|
}
|
|
50
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
51
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
50
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxCalendarBody, isStandalone: true, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], 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=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</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 row; let rowIndex = $index) {\n <tr role=\"row\">\n <!--\n We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\">\n <div class=\"mtx-calendar-body-cell-content\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n [attr.aria-selected]=\"selectedValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-app-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-app-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-app-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-app-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-app-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-app-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-app-primary))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
52
52
|
}
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxCalendarBody, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
55
|
args: [{ selector: '[mtx-calendar-body]', host: {
|
|
56
56
|
class: 'mtx-calendar-body',
|
|
57
|
-
}, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</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 row; let rowIndex = $index) {\n <tr role=\"row\">\n <!--\n We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\">\n <div class=\"mtx-calendar-body-cell-content\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n [attr.aria-selected]=\"selectedValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color)}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size);font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight);color:var(--mtx-datetimepicker-calendar-body-label-text-color)}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color);border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color);color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color)}\n"] }]
|
|
57
|
+
}, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, 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=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</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 row; let rowIndex = $index) {\n <tr role=\"row\">\n <!--\n We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n -->\n @if (rowIndex === 0 && _firstRowOffset) {\n <td\n class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n </td>\n }\n @for (item of row; track item; let colIndex = $index) {\n <td\n role=\"gridcell\"\n class=\"mtx-calendar-body-cell\"\n [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [attr.data-mat-row]=\"rowIndex\"\n [attr.data-mat-col]=\"colIndex\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.aria-disabled]=\"!item.enabled || null\"\n (click)=\"_cellClicked(item)\">\n <div class=\"mtx-calendar-body-cell-content\"\n [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n [attr.aria-selected]=\"selectedValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n }\n </tr>\n}\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color, var(--mat-app-primary))}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size, var(--mat-app-title-small-size));font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight, var(--mat-app-title-small-weight));color:var(--mtx-datetimepicker-calendar-body-label-text-color, var(--mat-app-on-surface))}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color, var(--mat-app-on-surface));border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color, var(--mat-app-primary));color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color, var(--mat-app-on-primary))}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color, var(--mat-app-primary))}\n"] }]
|
|
58
58
|
}], propDecorators: { label: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], rows: [{
|