@ptsecurity/mosaic 14.7.0 → 14.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_theming.scss +78 -54
- package/code-block/code-block.types.d.ts +0 -1
- package/datepicker/datepicker-input.directive.d.ts +1 -0
- package/esm2020/autocomplete/autocomplete.component.mjs +2 -2
- package/esm2020/code-block/code-block.types.mjs +1 -1
- package/esm2020/core/version.mjs +2 -2
- package/esm2020/datepicker/calendar-body.component.mjs +2 -2
- package/esm2020/datepicker/calendar-header.component.mjs +1 -1
- package/esm2020/datepicker/datepicker-input.directive.mjs +12 -3
- package/esm2020/form-field/validate.directive.mjs +6 -7
- package/esm2020/popover/popover.component.mjs +6 -2
- package/esm2020/select/select.component.mjs +3 -3
- package/esm2020/timezone/timezone-select.component.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-autocomplete.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-core.mjs +1 -1
- package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-datepicker.mjs +14 -5
- package/fesm2015/ptsecurity-mosaic-datepicker.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-form-field.mjs +6 -6
- package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-popover.mjs +5 -1
- package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-select.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-timezone.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-timezone.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-autocomplete.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-core.mjs +1 -1
- package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-datepicker.mjs +14 -5
- package/fesm2020/ptsecurity-mosaic-datepicker.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-form-field.mjs +5 -6
- package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-popover.mjs +5 -1
- package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-select.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-timezone.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-timezone.mjs.map +1 -1
- package/form-field/validate.directive.d.ts +1 -1
- package/package.json +4 -4
- package/popover/popover.component.d.ts +1 -0
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/default-theme.css +1 -1
@@ -86,12 +86,12 @@ class McCalendarBody {
|
|
86
86
|
}
|
87
87
|
}
|
88
88
|
/** @nocollapse */ McCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
89
|
-
/** @nocollapse */ McCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: { rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", cellAspectRatio: "cellAspectRatio" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mc-calendar__body" }, exportAs: ["mcCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\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 The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n percentage of the width (a variant of the trick described here:\n https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n class=\"mc-calendar__body-label\"\n [attr.colspan]=\"firstRowOffset\">\n </td>\n\n <td *ngFor=\"let item of row; let colIndex = index\"\n class=\"mc-calendar__body-cell\"\n [ngClass]=\"item.cssClasses!\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mc-calendar__body_disabled]=\"!item.enabled\"\n [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n (click)=\"cellClicked(item)\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n <div class=\"mc-calendar__body-cell-content\"\n [class.mc-selected]=\"selectedValue === item.value\"\n [class.mc-calendar__body-today]=\"todayValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}
|
89
|
+
/** @nocollapse */ McCalendarBody.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarBody, selector: "[mc-calendar-body]", inputs: { rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", activeCell: "activeCell", cellAspectRatio: "cellAspectRatio" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mc-calendar__body" }, exportAs: ["mcCalendarBody"], usesOnChanges: true, ngImport: i0, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\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 The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n percentage of the width (a variant of the trick described here:\n https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n class=\"mc-calendar__body-label\"\n [attr.colspan]=\"firstRowOffset\">\n </td>\n\n <td *ngFor=\"let item of row; let colIndex = index\"\n class=\"mc-calendar__body-cell\"\n [ngClass]=\"item.cssClasses!\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mc-calendar__body_disabled]=\"!item.enabled\"\n [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n (click)=\"cellClicked(item)\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n <div class=\"mc-calendar__body-cell-content\"\n [class.mc-selected]=\"selectedValue === item.value\"\n [class.mc-calendar__body-today]=\"todayValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
90
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, decorators: [{
|
91
91
|
type: Component,
|
92
92
|
args: [{ selector: '[mc-calendar-body]', exportAs: 'mcCalendarBody', host: {
|
93
93
|
class: 'mc-calendar__body'
|
94
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\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 The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n percentage of the width (a variant of the trick described here:\n https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n class=\"mc-calendar__body-label\"\n [attr.colspan]=\"firstRowOffset\">\n </td>\n\n <td *ngFor=\"let item of row; let colIndex = index\"\n class=\"mc-calendar__body-cell\"\n [ngClass]=\"item.cssClasses!\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mc-calendar__body_disabled]=\"!item.enabled\"\n [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n (click)=\"cellClicked(item)\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n <div class=\"mc-calendar__body-cell-content\"\n [class.mc-selected]=\"selectedValue === item.value\"\n [class.mc-calendar__body-today]=\"todayValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}
|
94
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\">\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 The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n percentage of the width (a variant of the trick described here:\n https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n -->\n <td *ngIf=\"rowIndex === 0 && firstRowOffset\"\n class=\"mc-calendar__body-label\"\n [attr.colspan]=\"firstRowOffset\">\n </td>\n\n <td *ngFor=\"let item of row; let colIndex = index\"\n class=\"mc-calendar__body-cell\"\n [ngClass]=\"item.cssClasses!\"\n [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n [class.mc-calendar__body_disabled]=\"!item.enabled\"\n [class.mc-calendar__body_active]=\"isActiveCell(rowIndex, colIndex)\"\n (click)=\"cellClicked(item)\"\n [style.width]=\"cellWidth\"\n [style.paddingTop]=\"cellPadding\"\n [style.paddingBottom]=\"cellPadding\">\n <div class=\"mc-calendar__body-cell-content\"\n [class.mc-selected]=\"selectedValue === item.value\"\n [class.mc-calendar__body-today]=\"todayValue === item.value\">\n {{ item.displayValue }}\n </div>\n </td>\n</tr>\n", styles: [".mc-calendar__body{min-width:224px;min-width:calc(7 * var(--mc-datepicker-body-size-cell-min-size, 32px))}.mc-calendar__body-cell{position:relative;height:0;line-height:0;text-align:center;outline:none;cursor:pointer}.mc-calendar__body_disabled{cursor:default}.mc-calendar__body-cell-content{position:absolute;top:5%;top:var(--mc-datepicker-body-size-cell-margin, 5%);left:5%;left:var(--mc-datepicker-body-size-cell-margin, 5%);padding:8px;padding:var(--mc-datepicker-body-size-cell-padding, 8px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;line-height:1;border-width:1px;border-width:var(--mc-datepicker-body-size-cell-border-width, 1px);border-radius:0;border-radius:var(--mc-datepicker-body-size-cell-border-radius, 0);border-style:solid}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}\n"] }]
|
95
95
|
}], propDecorators: { rows: [{
|
96
96
|
type: Input
|
97
97
|
}], todayValue: [{
|
@@ -215,7 +215,7 @@ class McCalendarHeader {
|
|
215
215
|
}
|
216
216
|
}
|
217
217
|
/** @nocollapse */ McCalendarHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
218
|
-
/** @nocollapse */ McCalendarHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarHeader, selector: "mc-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "mc-calendar-header" }, exportAs: ["mcCalendarHeader"], ngImport: i0, template: "<div class=\"mc-calendar-header__select-group\">\n <mc-select\n class=\"mc-calendar-header__select\"\n #monthSelect=\"mcSelect\"\n [value]=\"selectedMonth\"\n [panelClass]=\"'mc-calendar-select-panel'\"\n (selectionChange)=\"onMonthSelected($event.value)\">\n\n <button class=\"mc-button_transparent layout-padding-right-xs\"\n mc-button\n mc-select-matcher\n [class.mc-active]=\"monthSelect.panelOpen\"\n [tabindex]=\"-1\">\n {{ monthSelect.triggerValue }}\n\n <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n </button>\n\n <mc-option *ngFor=\"let month of monthNames\"\n [mcTooltipDisabled]=\"true\"\n [value]=\"month.value\">\n {{ month.name }}\n </mc-option>\n </mc-select>\n\n <mc-select\n #yearSelect=\"mcSelect\"\n [value]=\"selectedYear\"\n [panelClass]=\"'mc-calendar-select-panel'\"\n (selectionChange)=\"onYearSelected($event.value)\">\n <button class=\"mc-button_transparent layout-padding-right-xs\"\n mc-button\n mc-select-matcher\n [class.mc-active]=\"yearSelect.panelOpen\"\n [tabindex]=\"-1\">\n {{ yearSelect.triggerValue }}\n\n <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n </button>\n\n <mc-option *ngFor=\"let year of years\"\n [mcTooltipDisabled]=\"true\"\n [value]=\"year\">\n {{ year }}\n </mc-option>\n </mc-select>\n</div>\n\n<div class=\"mc-calendar-header__button-group\">\n <button mc-button\n class=\"mc-button_transparent mc-calendar-header__previous-button\"\n [tabindex]=\"-1\"\n [disabled]=\"previousDisabled\"\n (click)=\"selectPreviousMonth()\">\n\n <i mc-icon=\"mc-angle-left-L_16\"></i>\n </button>\n\n <button mc-button\n class=\"mc-button_transparent\"\n [tabindex]=\"-1\"\n (click)=\"selectCurrentDate()\">\n\n <i mc-icon=\"mc-circle-8_16\"></i>\n </button>\n\n <button mc-button\n class=\"mc-button_transparent mc-calendar-header__next-button\"\n [tabindex]=\"-1\"\n [disabled]=\"nextDisabled\"\n (click)=\"selectNextMonth()\">\n\n <i mc-icon=\"mc-angle-right-L_16\"></i>\n </button>\n</div>\n", styles: [".mc-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding:16px 8px 12px;padding:var(--mc-datepicker-calendar-size-padding-top, 16px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-blocks, 12px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px)}.mc-calendar-header__previous-button:after{border-left-width:2px;border-left-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(2px) rotate(-45deg);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:2px;border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(-2px) rotate(45deg);transform:var(--mc-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.mc-calendar-header__select{width:auto!important}.mc-calendar-header__button-group,.mc-calendar-header__select-group{display:flex;flex-direction:row}.mc-calendar-select-panel{margin-top:2px;min-width:98%!important}.mc-calendar-select-panel .mc-select__content{max-height:384px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i3.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i4.McValidateDirective, selector: " input[mcInput], input[mcInputPassword], input[mcTimepicker], input[mcDatepicker], mc-select, mc-
|
218
|
+
/** @nocollapse */ McCalendarHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McCalendarHeader, selector: "mc-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "mc-calendar-header" }, exportAs: ["mcCalendarHeader"], ngImport: i0, template: "<div class=\"mc-calendar-header__select-group\">\n <mc-select\n class=\"mc-calendar-header__select\"\n #monthSelect=\"mcSelect\"\n [value]=\"selectedMonth\"\n [panelClass]=\"'mc-calendar-select-panel'\"\n (selectionChange)=\"onMonthSelected($event.value)\">\n\n <button class=\"mc-button_transparent layout-padding-right-xs\"\n mc-button\n mc-select-matcher\n [class.mc-active]=\"monthSelect.panelOpen\"\n [tabindex]=\"-1\">\n {{ monthSelect.triggerValue }}\n\n <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n </button>\n\n <mc-option *ngFor=\"let month of monthNames\"\n [mcTooltipDisabled]=\"true\"\n [value]=\"month.value\">\n {{ month.name }}\n </mc-option>\n </mc-select>\n\n <mc-select\n #yearSelect=\"mcSelect\"\n [value]=\"selectedYear\"\n [panelClass]=\"'mc-calendar-select-panel'\"\n (selectionChange)=\"onYearSelected($event.value)\">\n <button class=\"mc-button_transparent layout-padding-right-xs\"\n mc-button\n mc-select-matcher\n [class.mc-active]=\"yearSelect.panelOpen\"\n [tabindex]=\"-1\">\n {{ yearSelect.triggerValue }}\n\n <i class=\"layout-padding-left-3xs\" mc-icon=\"mc-angle-down-S_16\"></i>\n </button>\n\n <mc-option *ngFor=\"let year of years\"\n [mcTooltipDisabled]=\"true\"\n [value]=\"year\">\n {{ year }}\n </mc-option>\n </mc-select>\n</div>\n\n<div class=\"mc-calendar-header__button-group\">\n <button mc-button\n class=\"mc-button_transparent mc-calendar-header__previous-button\"\n [tabindex]=\"-1\"\n [disabled]=\"previousDisabled\"\n (click)=\"selectPreviousMonth()\">\n\n <i mc-icon=\"mc-angle-left-L_16\"></i>\n </button>\n\n <button mc-button\n class=\"mc-button_transparent\"\n [tabindex]=\"-1\"\n (click)=\"selectCurrentDate()\">\n\n <i mc-icon=\"mc-circle-8_16\"></i>\n </button>\n\n <button mc-button\n class=\"mc-button_transparent mc-calendar-header__next-button\"\n [tabindex]=\"-1\"\n [disabled]=\"nextDisabled\"\n (click)=\"selectNextMonth()\">\n\n <i mc-icon=\"mc-angle-right-L_16\"></i>\n </button>\n</div>\n", styles: [".mc-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding:16px 8px 12px;padding:var(--mc-datepicker-calendar-size-padding-top, 16px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-blocks, 12px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px)}.mc-calendar-header__previous-button:after{border-left-width:2px;border-left-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(2px) rotate(-45deg);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:2px;border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:translate(-2px) rotate(45deg);transform:var(--mc-datepicker-calendar-size-icon-nex-icon-transform, translateX(-2px) rotate(45deg))}.mc-calendar-header__select{width:auto!important}.mc-calendar-header__button-group,.mc-calendar-header__select-group{display:flex;flex-direction:row}.mc-calendar-select-panel{margin-top:2px;min-width:98%!important}.mc-calendar-select-panel .mc-select__content{max-height:384px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i3.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i4.McValidateDirective, selector: " input[mcInput], input[mcInputPassword], input[mcTimepicker], input[mcDatepicker], textarea[mcTextarea], mc-select, mc-tree-select, mc-tag-list ", exportAs: ["McValidate"] }, { kind: "component", type: i5.McSelect, selector: "mc-select", inputs: ["disabled", "tabIndex", "hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "value", "id", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["mcSelect"] }, { kind: "directive", type: i5.McSelectMatcher, selector: "mc-select-matcher, [mc-select-matcher]" }, { kind: "directive", type: i5.McOptionTooltip, selector: "mc-option" }, { kind: "component", type: i6.McOption, selector: "mc-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i7.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i7.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
219
219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, decorators: [{
|
220
220
|
type: Component,
|
221
221
|
args: [{ selector: 'mc-calendar-header', exportAs: 'mcCalendarHeader', host: {
|
@@ -729,6 +729,9 @@ class McDatepickerInput {
|
|
729
729
|
this.localeSubscription = Subscription.EMPTY;
|
730
730
|
/** Whether the last value set on the input was valid. */
|
731
731
|
this.lastValueValid = false;
|
732
|
+
this.firstDigit = null;
|
733
|
+
this.secondDigit = null;
|
734
|
+
this.thirdDigit = null;
|
732
735
|
// tslint:disable-next-line:no-empty
|
733
736
|
this.onTouched = () => { };
|
734
737
|
this.onInput = () => {
|
@@ -751,7 +754,7 @@ class McDatepickerInput {
|
|
751
754
|
this.updateValue(newTimeObj);
|
752
755
|
};
|
753
756
|
this.parseOnBlur = () => {
|
754
|
-
if (!this.viewValue) {
|
757
|
+
if (!this.viewValue || !this.readyForParse) {
|
755
758
|
return null;
|
756
759
|
}
|
757
760
|
const date = this.getDefaultValue();
|
@@ -953,6 +956,9 @@ class McDatepickerInput {
|
|
953
956
|
get isReadOnly() {
|
954
957
|
return this.elementRef.nativeElement.readOnly;
|
955
958
|
}
|
959
|
+
get readyForParse() {
|
960
|
+
return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
|
961
|
+
}
|
956
962
|
get selectionStart() {
|
957
963
|
return this.elementRef.nativeElement.selectionStart;
|
958
964
|
}
|
@@ -1189,7 +1195,9 @@ class McDatepickerInput {
|
|
1189
1195
|
return null;
|
1190
1196
|
}
|
1191
1197
|
date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
|
1192
|
-
|
1198
|
+
if (this.firstDigit.isDay) {
|
1199
|
+
date.month = 1;
|
1200
|
+
}
|
1193
1201
|
// tslint:disable-next-line:no-magic-numbers
|
1194
1202
|
}
|
1195
1203
|
else if (viewDigits.length === 2) {
|
@@ -1398,6 +1406,7 @@ class McDatepickerInput {
|
|
1398
1406
|
return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
|
1399
1407
|
}
|
1400
1408
|
getDigitPositions(format) {
|
1409
|
+
this.firstDigit = this.secondDigit = this.thirdDigit = null;
|
1401
1410
|
const formatInLowerCase = format.toLowerCase();
|
1402
1411
|
formatInLowerCase
|
1403
1412
|
.split('')
|