@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.
Files changed (46) hide show
  1. package/_theming.scss +78 -54
  2. package/code-block/code-block.types.d.ts +0 -1
  3. package/datepicker/datepicker-input.directive.d.ts +1 -0
  4. package/esm2020/autocomplete/autocomplete.component.mjs +2 -2
  5. package/esm2020/code-block/code-block.types.mjs +1 -1
  6. package/esm2020/core/version.mjs +2 -2
  7. package/esm2020/datepicker/calendar-body.component.mjs +2 -2
  8. package/esm2020/datepicker/calendar-header.component.mjs +1 -1
  9. package/esm2020/datepicker/datepicker-input.directive.mjs +12 -3
  10. package/esm2020/form-field/validate.directive.mjs +6 -7
  11. package/esm2020/popover/popover.component.mjs +6 -2
  12. package/esm2020/select/select.component.mjs +3 -3
  13. package/esm2020/timezone/timezone-select.component.mjs +2 -2
  14. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs +2 -2
  15. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  16. package/fesm2015/ptsecurity-mosaic-core.mjs +1 -1
  17. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  18. package/fesm2015/ptsecurity-mosaic-datepicker.mjs +14 -5
  19. package/fesm2015/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  20. package/fesm2015/ptsecurity-mosaic-form-field.mjs +6 -6
  21. package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
  22. package/fesm2015/ptsecurity-mosaic-popover.mjs +5 -1
  23. package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
  24. package/fesm2015/ptsecurity-mosaic-select.mjs +2 -2
  25. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  26. package/fesm2015/ptsecurity-mosaic-timezone.mjs +2 -2
  27. package/fesm2015/ptsecurity-mosaic-timezone.mjs.map +1 -1
  28. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs +2 -2
  29. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  30. package/fesm2020/ptsecurity-mosaic-core.mjs +1 -1
  31. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  32. package/fesm2020/ptsecurity-mosaic-datepicker.mjs +14 -5
  33. package/fesm2020/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  34. package/fesm2020/ptsecurity-mosaic-form-field.mjs +5 -6
  35. package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
  36. package/fesm2020/ptsecurity-mosaic-popover.mjs +5 -1
  37. package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
  38. package/fesm2020/ptsecurity-mosaic-select.mjs +2 -2
  39. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  40. package/fesm2020/ptsecurity-mosaic-timezone.mjs +2 -2
  41. package/fesm2020/ptsecurity-mosaic-timezone.mjs.map +1 -1
  42. package/form-field/validate.directive.d.ts +1 -1
  43. package/package.json +4 -4
  44. package/popover/popover.component.d.ts +1 -0
  45. package/prebuilt-themes/dark-theme.css +1 -1
  46. package/prebuilt-themes/default-theme.css +1 -1
@@ -87,12 +87,12 @@ class McCalendarBody {
87
87
  }
88
88
  }
89
89
  /** @nocollapse */ McCalendarBody.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
90
- /** @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}.cdk-high-contrast-active .mc-calendar__body-cell-content{border:none}.cdk-high-contrast-active :host .mc-calendar__body-cell-content{border:none}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}.cdk-high-contrast-active .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active .mc-selected{outline:solid 1px}.cdk-high-contrast-active .mc-calendar__body-today{outline:dotted 1px}.cdk-high-contrast-active :host .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active :host .mc-selected{outline:solid 1px}.cdk-high-contrast-active :host .mc-calendar__body-today{outline:dotted 1px}\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
+ /** @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 });
91
91
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarBody, decorators: [{
92
92
  type: Component,
93
93
  args: [{ selector: '[mc-calendar-body]', exportAs: 'mcCalendarBody', host: {
94
94
  class: 'mc-calendar__body'
95
- }, 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}.cdk-high-contrast-active .mc-calendar__body-cell-content{border:none}.cdk-high-contrast-active :host .mc-calendar__body-cell-content{border:none}mc-month-view .mc-calendar__body-cell-content{justify-content:flex-end}.cdk-high-contrast-active .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active .mc-selected{outline:solid 1px}.cdk-high-contrast-active .mc-calendar__body-today{outline:dotted 1px}.cdk-high-contrast-active :host .mc-datepicker__popup:not(:empty),.cdk-high-contrast-active :host .mc-selected{outline:solid 1px}.cdk-high-contrast-active :host .mc-calendar__body-today{outline:dotted 1px}\n"] }]
95
+ }, 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"] }]
96
96
  }], propDecorators: { rows: [{
97
97
  type: Input
98
98
  }], todayValue: [{
@@ -216,7 +216,7 @@ class McCalendarHeader {
216
216
  }
217
217
  }
218
218
  /** @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 });
219
- /** @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-tag-list, textarea[mcTextarea], mc-tree-select ", 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
+ /** @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 });
220
220
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCalendarHeader, decorators: [{
221
221
  type: Component,
222
222
  args: [{ selector: 'mc-calendar-header', exportAs: 'mcCalendarHeader', host: {
@@ -1130,6 +1130,9 @@ class McDatepickerInput {
1130
1130
  this.localeSubscription = Subscription.EMPTY;
1131
1131
  /** Whether the last value set on the input was valid. */
1132
1132
  this.lastValueValid = false;
1133
+ this.firstDigit = null;
1134
+ this.secondDigit = null;
1135
+ this.thirdDigit = null;
1133
1136
  // tslint:disable-next-line:no-empty
1134
1137
  this.onTouched = () => { };
1135
1138
  this.onInput = () => {
@@ -1152,7 +1155,7 @@ class McDatepickerInput {
1152
1155
  this.updateValue(newTimeObj);
1153
1156
  };
1154
1157
  this.parseOnBlur = () => {
1155
- if (!this.viewValue) {
1158
+ if (!this.viewValue || !this.readyForParse) {
1156
1159
  return null;
1157
1160
  }
1158
1161
  const date = this.getDefaultValue();
@@ -1354,6 +1357,9 @@ class McDatepickerInput {
1354
1357
  get isReadOnly() {
1355
1358
  return this.elementRef.nativeElement.readOnly;
1356
1359
  }
1360
+ get readyForParse() {
1361
+ return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
1362
+ }
1357
1363
  get selectionStart() {
1358
1364
  return this.elementRef.nativeElement.selectionStart;
1359
1365
  }
@@ -1587,7 +1593,9 @@ class McDatepickerInput {
1587
1593
  return null;
1588
1594
  }
1589
1595
  date[this.firstDigit.fullName] = this.firstDigit.parse(firsViewDigit);
1590
- date.month = 1;
1596
+ if (this.firstDigit.isDay) {
1597
+ date.month = 1;
1598
+ }
1591
1599
  // tslint:disable-next-line:no-magic-numbers
1592
1600
  }
1593
1601
  else if (viewDigits.length === 2) {
@@ -1796,6 +1804,7 @@ class McDatepickerInput {
1796
1804
  return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
1797
1805
  }
1798
1806
  getDigitPositions(format) {
1807
+ this.firstDigit = this.secondDigit = this.thirdDigit = null;
1799
1808
  const formatInLowerCase = format.toLowerCase();
1800
1809
  formatInLowerCase
1801
1810
  .split('')