@ptsecurity/mosaic 17.2.3 → 17.2.4
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/datepicker/calendar-header.component.d.ts +11 -5
- package/datepicker/datepicker-input.directive.d.ts +10 -0
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/datepicker/calendar-header.component.mjs +37 -10
- package/esm2022/datepicker/datepicker-input.directive.mjs +103 -23
- package/fesm2022/ptsecurity-mosaic-core.mjs +1 -1
- package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
- package/fesm2022/ptsecurity-mosaic-datepicker.mjs +138 -31
- package/fesm2022/ptsecurity-mosaic-datepicker.mjs.map +1 -1
- package/package.json +4 -4
|
@@ -119,6 +119,7 @@ class McCalendarHeader {
|
|
|
119
119
|
set activeDate(value) {
|
|
120
120
|
this._activeDate = value;
|
|
121
121
|
this.updateSelectedValues();
|
|
122
|
+
this.updateSelectionOptions();
|
|
122
123
|
}
|
|
123
124
|
get maxDate() {
|
|
124
125
|
return this._maxDate;
|
|
@@ -128,7 +129,7 @@ class McCalendarHeader {
|
|
|
128
129
|
return;
|
|
129
130
|
}
|
|
130
131
|
this._maxDate = value;
|
|
131
|
-
this.
|
|
132
|
+
this.updateYearsOptions();
|
|
132
133
|
}
|
|
133
134
|
get minDate() {
|
|
134
135
|
return this._minDate;
|
|
@@ -138,10 +139,14 @@ class McCalendarHeader {
|
|
|
138
139
|
return;
|
|
139
140
|
}
|
|
140
141
|
this._minDate = value;
|
|
141
|
-
this.
|
|
142
|
+
this.updateYearsOptions();
|
|
142
143
|
}
|
|
143
144
|
get previousDisabled() {
|
|
144
|
-
return this.compareDate(this.activeDate, this.minDate)
|
|
145
|
+
return this.compareDate(this.activeDate, this.minDate) <= 0;
|
|
146
|
+
}
|
|
147
|
+
get currentDisabled() {
|
|
148
|
+
const today = this.adapter.today();
|
|
149
|
+
return this.compareDate(today, this.minDate) < 0 || this.compareDate(today, this.maxDate) > 0;
|
|
145
150
|
}
|
|
146
151
|
get nextDisabled() {
|
|
147
152
|
return this.compareDate(this.activeDate, this.maxDate) >= 0;
|
|
@@ -156,11 +161,12 @@ class McCalendarHeader {
|
|
|
156
161
|
this.activeDateChange = new EventEmitter();
|
|
157
162
|
this.monthSelected = new EventEmitter();
|
|
158
163
|
this.yearSelected = new EventEmitter();
|
|
159
|
-
this.monthNames = this.adapter.getMonthNames('long')
|
|
160
|
-
|
|
164
|
+
this.monthNames = this.adapter.getMonthNames('long').map((name, i) => {
|
|
165
|
+
return { name, nameShort: this.adapter.getMonthNames('short')[i], value: i, disabled: false };
|
|
166
|
+
});
|
|
161
167
|
}
|
|
162
168
|
ngAfterContentInit() {
|
|
163
|
-
this.
|
|
169
|
+
this.updateYearsOptions();
|
|
164
170
|
this.updateSelectedValues();
|
|
165
171
|
}
|
|
166
172
|
/** Handles when a new month is selected. */
|
|
@@ -179,6 +185,7 @@ class McCalendarHeader {
|
|
|
179
185
|
this.activeDate = this.adapter.createDate(year, month, Math.min(this.adapter.getDate(this.activeDate), daysInMonth));
|
|
180
186
|
this.yearSelected.emit(this.activeDate);
|
|
181
187
|
this.activeDateChange.emit(this.activeDate);
|
|
188
|
+
this.updateMonthOptions();
|
|
182
189
|
}
|
|
183
190
|
selectCurrentDate() {
|
|
184
191
|
this.activeDate = this.adapter.today();
|
|
@@ -205,7 +212,11 @@ class McCalendarHeader {
|
|
|
205
212
|
this.selectedYear = this.years.find(({ name }) => name === year)
|
|
206
213
|
|| { name: year, value: this.adapter.getYearName(this.activeDate) };
|
|
207
214
|
}
|
|
208
|
-
|
|
215
|
+
updateSelectionOptions() {
|
|
216
|
+
this.updateYearsOptions();
|
|
217
|
+
this.updateMonthOptions();
|
|
218
|
+
}
|
|
219
|
+
updateYearsOptions() {
|
|
209
220
|
const minYear = this.adapter.getYear(this.minDate);
|
|
210
221
|
const maxYear = this.adapter.getYear(this.maxDate);
|
|
211
222
|
this.years = [];
|
|
@@ -213,14 +224,30 @@ class McCalendarHeader {
|
|
|
213
224
|
this.years.push({ name: key, value: this.adapter.getYearName(this.adapter.createDate(key)) });
|
|
214
225
|
}
|
|
215
226
|
}
|
|
227
|
+
updateMonthOptions() {
|
|
228
|
+
if (!this._activeDate) {
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
const minYear = this.adapter.getYear(this.minDate);
|
|
232
|
+
const minMonth = this.adapter.getMonth(this.minDate);
|
|
233
|
+
const maxYear = this.adapter.getYear(this.maxDate);
|
|
234
|
+
const maxMonth = this.adapter.getMonth(this.maxDate);
|
|
235
|
+
const currentYear = this.adapter.getYear(this._activeDate);
|
|
236
|
+
if (currentYear === minYear) {
|
|
237
|
+
this.monthNames.forEach((month) => (month.disabled = month.value < minMonth));
|
|
238
|
+
}
|
|
239
|
+
if (currentYear === maxYear) {
|
|
240
|
+
this.monthNames.forEach((month) => (month.disabled = month.value > maxMonth));
|
|
241
|
+
}
|
|
242
|
+
}
|
|
216
243
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
217
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", 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.name)\">\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 {{ this.selectedYear.value }}\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.value }}\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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\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: i1$1.McSelectMatcher, selector: "mc-select-matcher, [mc-select-matcher]" }, { kind: "directive", type: i5.McOptionTooltip, selector: "mc-option" }, { kind: "component", type: i1$1.McOption, selector: "mc-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i6.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i6.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
244
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", 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 [disabled]=\"month.disabled\"\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.name)\">\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 {{ this.selectedYear.value }}\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.value }}\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 [disabled]=\"currentDisabled\"\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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\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: i1$1.McSelectMatcher, selector: "mc-select-matcher, [mc-select-matcher]" }, { kind: "directive", type: i5.McOptionTooltip, selector: "mc-option" }, { kind: "component", type: i1$1.McOption, selector: "mc-option", inputs: ["value", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["mcOption"] }, { kind: "component", type: i6.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i6.McIconCSSStyler, selector: "[mc-icon]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
218
245
|
}
|
|
219
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McCalendarHeader, decorators: [{
|
|
220
247
|
type: Component,
|
|
221
248
|
args: [{ selector: 'mc-calendar-header', exportAs: 'mcCalendarHeader', host: {
|
|
222
249
|
class: 'mc-calendar-header'
|
|
223
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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.name)\">\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 {{ this.selectedYear.value }}\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.value }}\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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\n"] }]
|
|
250
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 [disabled]=\"month.disabled\"\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.name)\">\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 {{ this.selectedYear.value }}\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.value }}\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 [disabled]=\"currentDisabled\"\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: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:var(--mc-datepicker-calendar-size-icon-border-width, 2px);transform:var(--mc-datepicker-calendar-size-icon-prev-icon-transform, translateX(2px) rotate(-45deg))}.mc-calendar-header__next-button:after{border-right-width:var(--mc-datepicker-calendar-size-icon-border-width, 2px);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;overflow-x:hidden;scrollbar-gutter:stable}.mc-calendar-select-panel .mc-select__content .mc-option{min-width:65px}\n"] }]
|
|
224
251
|
}], ctorParameters: () => [{ type: i1$1.DateAdapter }], propDecorators: { activeDate: [{
|
|
225
252
|
type: Input
|
|
226
253
|
}], maxDate: [{
|
|
@@ -1659,22 +1686,86 @@ class McDatepickerInput {
|
|
|
1659
1686
|
}
|
|
1660
1687
|
return [this.thirdDigit.value, this.thirdDigit.start, this.thirdDigit.end];
|
|
1661
1688
|
}
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1689
|
+
isMaxMonth(date) {
|
|
1690
|
+
return this.adapter.getMonth(date) === this.getMaxMonth(date);
|
|
1691
|
+
}
|
|
1692
|
+
isMinMonth(date) {
|
|
1693
|
+
return this.adapter.getMonth(date) === this.getMinMonth(date);
|
|
1694
|
+
}
|
|
1695
|
+
isMaxYear(date) {
|
|
1696
|
+
return this.adapter.getYear(date) === this.getMaxYear();
|
|
1697
|
+
}
|
|
1698
|
+
isMinYear(date) {
|
|
1699
|
+
return this.adapter.getYear(date) === this.getMinYear();
|
|
1700
|
+
}
|
|
1701
|
+
getMaxDate(date) {
|
|
1702
|
+
if (this.datepicker.maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
|
|
1703
|
+
return this.adapter.getDate(this.datepicker.maxDate);
|
|
1704
|
+
}
|
|
1705
|
+
return this.adapter.getNumDaysInMonth(date);
|
|
1706
|
+
}
|
|
1707
|
+
getMinDate(date) {
|
|
1708
|
+
if (this.datepicker.minDate && this.isMinYear(date) && this.isMinMonth(date)) {
|
|
1709
|
+
return this.adapter.getDate(this.datepicker.minDate);
|
|
1710
|
+
}
|
|
1711
|
+
return 1;
|
|
1712
|
+
}
|
|
1713
|
+
getMaxMonth(date) {
|
|
1714
|
+
if (this.datepicker.maxDate && this.isMaxYear(date)) {
|
|
1715
|
+
return this.adapter.getMonth(this.datepicker.maxDate);
|
|
1716
|
+
}
|
|
1717
|
+
// tslint:disable-next-line:no-magic-numbers
|
|
1718
|
+
return 11;
|
|
1719
|
+
}
|
|
1720
|
+
getMinMonth(date) {
|
|
1721
|
+
if (this.datepicker.minDate && this.isMinYear(date)) {
|
|
1722
|
+
return this.adapter.getMonth(this.datepicker.minDate);
|
|
1723
|
+
}
|
|
1724
|
+
return 0;
|
|
1725
|
+
}
|
|
1726
|
+
getMaxYear() {
|
|
1727
|
+
if (this.datepicker.maxDate) {
|
|
1728
|
+
return this.adapter.getYear(this.datepicker.maxDate);
|
|
1729
|
+
}
|
|
1730
|
+
return MAX_YEAR;
|
|
1731
|
+
}
|
|
1732
|
+
getMinYear() {
|
|
1733
|
+
if (this.datepicker.minDate) {
|
|
1734
|
+
return this.adapter.getYear(this.datepicker.minDate);
|
|
1735
|
+
}
|
|
1736
|
+
return 1;
|
|
1737
|
+
}
|
|
1738
|
+
incrementDate(date, whatToIncrement) {
|
|
1739
|
+
let year = this.adapter.getYear(date);
|
|
1740
|
+
let month = this.adapter.getMonth(date);
|
|
1741
|
+
let day = this.adapter.getDate(date);
|
|
1666
1742
|
switch (whatToIncrement) {
|
|
1667
1743
|
case DateParts.day:
|
|
1668
1744
|
day++;
|
|
1669
|
-
if (day > this.
|
|
1670
|
-
|
|
1745
|
+
if (day > this.getMaxDate(date)) {
|
|
1746
|
+
if (this.isMaxYear(date) && this.isMaxMonth(date)) {
|
|
1747
|
+
day = this.getMaxDate(date);
|
|
1748
|
+
}
|
|
1749
|
+
else if (this.isMinYear(date) && this.isMinMonth(date)) {
|
|
1750
|
+
day = this.getMinDate(date);
|
|
1751
|
+
}
|
|
1752
|
+
else {
|
|
1753
|
+
day = 1;
|
|
1754
|
+
}
|
|
1671
1755
|
}
|
|
1672
1756
|
break;
|
|
1673
1757
|
case DateParts.month:
|
|
1674
1758
|
month++;
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1759
|
+
if (month > this.getMaxMonth(date)) {
|
|
1760
|
+
if (this.isMaxYear(date)) {
|
|
1761
|
+
month = this.getMaxMonth(date);
|
|
1762
|
+
}
|
|
1763
|
+
else if (this.isMinYear(date)) {
|
|
1764
|
+
month = this.getMinMonth(date);
|
|
1765
|
+
}
|
|
1766
|
+
else {
|
|
1767
|
+
month = 0;
|
|
1768
|
+
}
|
|
1678
1769
|
}
|
|
1679
1770
|
const lastDay = this.getLastDayFor(year, month);
|
|
1680
1771
|
if (day > lastDay) {
|
|
@@ -1683,8 +1774,8 @@ class McDatepickerInput {
|
|
|
1683
1774
|
break;
|
|
1684
1775
|
case DateParts.year:
|
|
1685
1776
|
year++;
|
|
1686
|
-
if (year >
|
|
1687
|
-
year =
|
|
1777
|
+
if (year > this.getMaxYear()) {
|
|
1778
|
+
year = this.getMaxYear();
|
|
1688
1779
|
}
|
|
1689
1780
|
break;
|
|
1690
1781
|
default:
|
|
@@ -1694,22 +1785,38 @@ class McDatepickerInput {
|
|
|
1694
1785
|
getLastDayFor(year, month) {
|
|
1695
1786
|
return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
|
|
1696
1787
|
}
|
|
1697
|
-
decrementDate(
|
|
1698
|
-
let year = this.adapter.getYear(
|
|
1699
|
-
let month = this.adapter.getMonth(
|
|
1700
|
-
let day = this.adapter.getDate(
|
|
1788
|
+
decrementDate(date, whatToDecrement) {
|
|
1789
|
+
let year = this.adapter.getYear(date);
|
|
1790
|
+
let month = this.adapter.getMonth(date);
|
|
1791
|
+
let day = this.adapter.getDate(date);
|
|
1701
1792
|
switch (whatToDecrement) {
|
|
1702
1793
|
case DateParts.day:
|
|
1703
1794
|
day--;
|
|
1704
|
-
if (day <
|
|
1705
|
-
|
|
1795
|
+
if (day < this.getMinDate(date)) {
|
|
1796
|
+
if (this.isMinYear(date) && this.isMinMonth(date)) {
|
|
1797
|
+
day = this.getMinDate(date);
|
|
1798
|
+
}
|
|
1799
|
+
else if (this.isMaxYear(date) && this.isMaxMonth(date)) {
|
|
1800
|
+
day = this.getMaxDate(date);
|
|
1801
|
+
}
|
|
1802
|
+
else {
|
|
1803
|
+
day = this.adapter.getNumDaysInMonth(date);
|
|
1804
|
+
}
|
|
1706
1805
|
}
|
|
1707
1806
|
break;
|
|
1708
1807
|
case DateParts.month:
|
|
1709
1808
|
month--;
|
|
1710
|
-
if (month <
|
|
1711
|
-
|
|
1712
|
-
|
|
1809
|
+
if (month < this.getMinMonth(date)) {
|
|
1810
|
+
if (year === this.getMinYear()) {
|
|
1811
|
+
month = this.getMinMonth(date);
|
|
1812
|
+
}
|
|
1813
|
+
else if (this.isMaxYear(date)) {
|
|
1814
|
+
month = this.getMaxMonth(date);
|
|
1815
|
+
}
|
|
1816
|
+
else {
|
|
1817
|
+
// tslint:disable-next-line:no-magic-numbers
|
|
1818
|
+
month = 11;
|
|
1819
|
+
}
|
|
1713
1820
|
}
|
|
1714
1821
|
const lastDay = this.getLastDayFor(year, month);
|
|
1715
1822
|
if (day > lastDay) {
|
|
@@ -1718,8 +1825,8 @@ class McDatepickerInput {
|
|
|
1718
1825
|
break;
|
|
1719
1826
|
case DateParts.year:
|
|
1720
1827
|
year--;
|
|
1721
|
-
if (year <
|
|
1722
|
-
year =
|
|
1828
|
+
if (year < this.getMinYear()) {
|
|
1829
|
+
year = this.getMinYear();
|
|
1723
1830
|
}
|
|
1724
1831
|
break;
|
|
1725
1832
|
default:
|