@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
@@ -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}.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 });
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}.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"] }]
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-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 });
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
- date.month = 1;
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('')