@ptsecurity/mosaic 17.2.3 → 17.2.5
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 +40 -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 +141 -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.updateSelectionOptions();
|
|
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,33 @@ 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 && currentYear === maxYear) {
|
|
237
|
+
this.monthNames.forEach((month) => (month.disabled = month.value < minMonth || month.value > maxMonth));
|
|
238
|
+
}
|
|
239
|
+
else if (currentYear === minYear) {
|
|
240
|
+
this.monthNames.forEach((month) => (month.disabled = month.value < minMonth));
|
|
241
|
+
}
|
|
242
|
+
else if (currentYear === maxYear) {
|
|
243
|
+
this.monthNames.forEach((month) => (month.disabled = month.value > maxMonth));
|
|
244
|
+
}
|
|
245
|
+
}
|
|
216
246
|
/** @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 }); }
|
|
247
|
+
/** @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
248
|
}
|
|
219
249
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McCalendarHeader, decorators: [{
|
|
220
250
|
type: Component,
|
|
221
251
|
args: [{ selector: 'mc-calendar-header', exportAs: 'mcCalendarHeader', host: {
|
|
222
252
|
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"] }]
|
|
253
|
+
}, 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
254
|
}], ctorParameters: () => [{ type: i1$1.DateAdapter }], propDecorators: { activeDate: [{
|
|
225
255
|
type: Input
|
|
226
256
|
}], maxDate: [{
|
|
@@ -1659,22 +1689,86 @@ class McDatepickerInput {
|
|
|
1659
1689
|
}
|
|
1660
1690
|
return [this.thirdDigit.value, this.thirdDigit.start, this.thirdDigit.end];
|
|
1661
1691
|
}
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1692
|
+
isMaxMonth(date) {
|
|
1693
|
+
return this.adapter.getMonth(date) === this.getMaxMonth(date);
|
|
1694
|
+
}
|
|
1695
|
+
isMinMonth(date) {
|
|
1696
|
+
return this.adapter.getMonth(date) === this.getMinMonth(date);
|
|
1697
|
+
}
|
|
1698
|
+
isMaxYear(date) {
|
|
1699
|
+
return this.adapter.getYear(date) === this.getMaxYear();
|
|
1700
|
+
}
|
|
1701
|
+
isMinYear(date) {
|
|
1702
|
+
return this.adapter.getYear(date) === this.getMinYear();
|
|
1703
|
+
}
|
|
1704
|
+
getMaxDate(date) {
|
|
1705
|
+
if (this.datepicker.maxDate && this.isMaxYear(date) && this.isMaxMonth(date)) {
|
|
1706
|
+
return this.adapter.getDate(this.datepicker.maxDate);
|
|
1707
|
+
}
|
|
1708
|
+
return this.adapter.getNumDaysInMonth(date);
|
|
1709
|
+
}
|
|
1710
|
+
getMinDate(date) {
|
|
1711
|
+
if (this.datepicker.minDate && this.isMinYear(date) && this.isMinMonth(date)) {
|
|
1712
|
+
return this.adapter.getDate(this.datepicker.minDate);
|
|
1713
|
+
}
|
|
1714
|
+
return 1;
|
|
1715
|
+
}
|
|
1716
|
+
getMaxMonth(date) {
|
|
1717
|
+
if (this.datepicker.maxDate && this.isMaxYear(date)) {
|
|
1718
|
+
return this.adapter.getMonth(this.datepicker.maxDate);
|
|
1719
|
+
}
|
|
1720
|
+
// tslint:disable-next-line:no-magic-numbers
|
|
1721
|
+
return 11;
|
|
1722
|
+
}
|
|
1723
|
+
getMinMonth(date) {
|
|
1724
|
+
if (this.datepicker.minDate && this.isMinYear(date)) {
|
|
1725
|
+
return this.adapter.getMonth(this.datepicker.minDate);
|
|
1726
|
+
}
|
|
1727
|
+
return 0;
|
|
1728
|
+
}
|
|
1729
|
+
getMaxYear() {
|
|
1730
|
+
if (this.datepicker.maxDate) {
|
|
1731
|
+
return this.adapter.getYear(this.datepicker.maxDate);
|
|
1732
|
+
}
|
|
1733
|
+
return MAX_YEAR;
|
|
1734
|
+
}
|
|
1735
|
+
getMinYear() {
|
|
1736
|
+
if (this.datepicker.minDate) {
|
|
1737
|
+
return this.adapter.getYear(this.datepicker.minDate);
|
|
1738
|
+
}
|
|
1739
|
+
return 1;
|
|
1740
|
+
}
|
|
1741
|
+
incrementDate(date, whatToIncrement) {
|
|
1742
|
+
let year = this.adapter.getYear(date);
|
|
1743
|
+
let month = this.adapter.getMonth(date);
|
|
1744
|
+
let day = this.adapter.getDate(date);
|
|
1666
1745
|
switch (whatToIncrement) {
|
|
1667
1746
|
case DateParts.day:
|
|
1668
1747
|
day++;
|
|
1669
|
-
if (day > this.
|
|
1670
|
-
|
|
1748
|
+
if (day > this.getMaxDate(date)) {
|
|
1749
|
+
if (this.isMaxYear(date) && this.isMaxMonth(date)) {
|
|
1750
|
+
day = this.getMaxDate(date);
|
|
1751
|
+
}
|
|
1752
|
+
else if (this.isMinYear(date) && this.isMinMonth(date)) {
|
|
1753
|
+
day = this.getMinDate(date);
|
|
1754
|
+
}
|
|
1755
|
+
else {
|
|
1756
|
+
day = 1;
|
|
1757
|
+
}
|
|
1671
1758
|
}
|
|
1672
1759
|
break;
|
|
1673
1760
|
case DateParts.month:
|
|
1674
1761
|
month++;
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1762
|
+
if (month > this.getMaxMonth(date)) {
|
|
1763
|
+
if (this.isMaxYear(date)) {
|
|
1764
|
+
month = this.getMaxMonth(date);
|
|
1765
|
+
}
|
|
1766
|
+
else if (this.isMinYear(date)) {
|
|
1767
|
+
month = this.getMinMonth(date);
|
|
1768
|
+
}
|
|
1769
|
+
else {
|
|
1770
|
+
month = 0;
|
|
1771
|
+
}
|
|
1678
1772
|
}
|
|
1679
1773
|
const lastDay = this.getLastDayFor(year, month);
|
|
1680
1774
|
if (day > lastDay) {
|
|
@@ -1683,8 +1777,8 @@ class McDatepickerInput {
|
|
|
1683
1777
|
break;
|
|
1684
1778
|
case DateParts.year:
|
|
1685
1779
|
year++;
|
|
1686
|
-
if (year >
|
|
1687
|
-
year =
|
|
1780
|
+
if (year > this.getMaxYear()) {
|
|
1781
|
+
year = this.getMaxYear();
|
|
1688
1782
|
}
|
|
1689
1783
|
break;
|
|
1690
1784
|
default:
|
|
@@ -1694,22 +1788,38 @@ class McDatepickerInput {
|
|
|
1694
1788
|
getLastDayFor(year, month) {
|
|
1695
1789
|
return this.adapter.getNumDaysInMonth(this.createDate(year, month, 1));
|
|
1696
1790
|
}
|
|
1697
|
-
decrementDate(
|
|
1698
|
-
let year = this.adapter.getYear(
|
|
1699
|
-
let month = this.adapter.getMonth(
|
|
1700
|
-
let day = this.adapter.getDate(
|
|
1791
|
+
decrementDate(date, whatToDecrement) {
|
|
1792
|
+
let year = this.adapter.getYear(date);
|
|
1793
|
+
let month = this.adapter.getMonth(date);
|
|
1794
|
+
let day = this.adapter.getDate(date);
|
|
1701
1795
|
switch (whatToDecrement) {
|
|
1702
1796
|
case DateParts.day:
|
|
1703
1797
|
day--;
|
|
1704
|
-
if (day <
|
|
1705
|
-
|
|
1798
|
+
if (day < this.getMinDate(date)) {
|
|
1799
|
+
if (this.isMinYear(date) && this.isMinMonth(date)) {
|
|
1800
|
+
day = this.getMinDate(date);
|
|
1801
|
+
}
|
|
1802
|
+
else if (this.isMaxYear(date) && this.isMaxMonth(date)) {
|
|
1803
|
+
day = this.getMaxDate(date);
|
|
1804
|
+
}
|
|
1805
|
+
else {
|
|
1806
|
+
day = this.adapter.getNumDaysInMonth(date);
|
|
1807
|
+
}
|
|
1706
1808
|
}
|
|
1707
1809
|
break;
|
|
1708
1810
|
case DateParts.month:
|
|
1709
1811
|
month--;
|
|
1710
|
-
if (month <
|
|
1711
|
-
|
|
1712
|
-
|
|
1812
|
+
if (month < this.getMinMonth(date)) {
|
|
1813
|
+
if (year === this.getMinYear()) {
|
|
1814
|
+
month = this.getMinMonth(date);
|
|
1815
|
+
}
|
|
1816
|
+
else if (this.isMaxYear(date)) {
|
|
1817
|
+
month = this.getMaxMonth(date);
|
|
1818
|
+
}
|
|
1819
|
+
else {
|
|
1820
|
+
// tslint:disable-next-line:no-magic-numbers
|
|
1821
|
+
month = 11;
|
|
1822
|
+
}
|
|
1713
1823
|
}
|
|
1714
1824
|
const lastDay = this.getLastDayFor(year, month);
|
|
1715
1825
|
if (day > lastDay) {
|
|
@@ -1718,8 +1828,8 @@ class McDatepickerInput {
|
|
|
1718
1828
|
break;
|
|
1719
1829
|
case DateParts.year:
|
|
1720
1830
|
year--;
|
|
1721
|
-
if (year <
|
|
1722
|
-
year =
|
|
1831
|
+
if (year < this.getMinYear()) {
|
|
1832
|
+
year = this.getMinYear();
|
|
1723
1833
|
}
|
|
1724
1834
|
break;
|
|
1725
1835
|
default:
|