@ardium-ui/ui 5.0.0-alpha.57 → 5.0.0-alpha.58
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.
|
@@ -3933,6 +3933,8 @@ class ArdiumSelectComponent extends _FormFieldComponentBase {
|
|
|
3933
3933
|
unselect: () => {
|
|
3934
3934
|
this.unselectItem(item);
|
|
3935
3935
|
},
|
|
3936
|
+
itemsSelectedCount: this.itemStorage.selectedItems().length,
|
|
3937
|
+
totalItemsCount: this.itemStorage.items().length,
|
|
3936
3938
|
}));
|
|
3937
3939
|
this.groupContextGenerator = computed(() => group => ({
|
|
3938
3940
|
$implicit: group,
|
|
@@ -7847,11 +7849,11 @@ class MonthsViewComponent {
|
|
|
7847
7849
|
return isYearOutOfRange(year, this.min(), this.max());
|
|
7848
7850
|
}
|
|
7849
7851
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MonthsViewComponent, isStandalone: false, selector: "ard-months-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, activeYear: { classPropertyName: "activeYear", publicName: "activeYear", isSignal: true, isRequired: true, transformFunction: null }, activeMonth: { classPropertyName: "activeMonth", publicName: "activeMonth", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, highlightedMonth: { classPropertyName: "highlightedMonth", publicName: "highlightedMonth", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderTemplate: { classPropertyName: "monthsViewHeaderTemplate", publicName: "monthsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthTemplate: { classPropertyName: "monthTemplate", publicName: "monthTemplate", isSignal: true, isRequired: true, transformFunction: null }, monthsViewHeaderDateFormat: { classPropertyName: "monthsViewHeaderDateFormat", publicName: "monthsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, monthDateFormat: { classPropertyName: "monthDateFormat", publicName: "monthDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenYearsView: "triggerOpenYearsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectMonth: "triggerSelectMonth", triggeChangeYear: "triggeChangeYear", triggerHighlightMonth: "triggerHighlightMonth", triggerHighlightNextMonth: "triggerHighlightNextMonth", triggerHighlightPreviousMonth: "triggerHighlightPreviousMonth", triggerHighlightFirstMonth: "triggerHighlightFirstMonth", triggerHighlightLastMonth: "triggerHighlightLastMonth", triggerHighlightSameMonthPreviousPage: "triggerHighlightSameMonthPreviousPage", triggerHighlightSameMonthNextPage: "triggerHighlightSameMonthNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7851
7853
|
}
|
|
7852
7854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MonthsViewComponent, decorators: [{
|
|
7853
7855
|
type: Component,
|
|
7854
|
-
args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
7856
|
+
args: [{ standalone: false, selector: 'ard-months-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-months-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultMonthsViewHeaderTemplate\r\n let-date=\"date\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [color]=\"color()\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ date | date : monthsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthsViewHeaderTemplate() || defaultMonthsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"monthsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onMonthGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onMonthGridBlur()\"\r\n (click)=\"onMonthGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (month of monthsArray(); track $index) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedMonth() === month.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isMonthBetweenSelectedHighlighted(month.value)\"\r\n [class.ard-calendar__entry-disabled]=\"month.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isMonthSelected(month.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isMonthSelectedStart(month.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isMonthSelectedEnd(month.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isMonthBetweenSelectedRange(month.value)\"\r\n [class.ard-calendar-today]=\"isMonthToday(month.value)\"\r\n (click)=\"onCalendarMonthClick(month.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarMonthMouseover(month.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultMonthTemplate\r\n let-month\r\n >\r\n {{ month | date : monthDateFormat() : '+0000' | uppercase }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"monthTemplate() || defaultMonthTemplate\"\r\n [ngTemplateOutletContext]=\"monthContext()(month.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
7855
7857
|
}], propDecorators: { onMouseMove: [{
|
|
7856
7858
|
type: HostListener,
|
|
7857
7859
|
args: ['mousemove']
|
|
@@ -8145,11 +8147,11 @@ class YearsViewComponent {
|
|
|
8145
8147
|
this.triggerHighlightSameYearNextPage.emit(event.altKey);
|
|
8146
8148
|
}
|
|
8147
8149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n
|
|
8150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: YearsViewComponent, isStandalone: false, selector: "ard-years-view", inputs: { tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: true, transformFunction: null }, _isUsingKeyboard: { classPropertyName: "_isUsingKeyboard", publicName: "_isUsingKeyboard", isSignal: true, isRequired: true, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: true, transformFunction: null }, selectedDateEnd: { classPropertyName: "selectedDateEnd", publicName: "selectedDateEnd", isSignal: true, isRequired: true, transformFunction: null }, rangeSelectionMode: { classPropertyName: "rangeSelectionMode", publicName: "rangeSelectionMode", isSignal: true, isRequired: true, transformFunction: null }, UTC: { classPropertyName: "UTC", publicName: "UTC", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, multiCalendarLocation: { classPropertyName: "multiCalendarLocation", publicName: "multiCalendarLocation", isSignal: true, isRequired: true, transformFunction: null }, currentYearRangeStart: { classPropertyName: "currentYearRangeStart", publicName: "currentYearRangeStart", isSignal: true, isRequired: true, transformFunction: null }, highlightedYear: { classPropertyName: "highlightedYear", publicName: "highlightedYear", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderTemplate: { classPropertyName: "yearsViewHeaderTemplate", publicName: "yearsViewHeaderTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearTemplate: { classPropertyName: "yearTemplate", publicName: "yearTemplate", isSignal: true, isRequired: true, transformFunction: null }, yearsViewHeaderDateFormat: { classPropertyName: "yearsViewHeaderDateFormat", publicName: "yearsViewHeaderDateFormat", isSignal: true, isRequired: true, transformFunction: null }, yearDateFormat: { classPropertyName: "yearDateFormat", publicName: "yearDateFormat", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { triggerOpenMonthsView: "triggerOpenMonthsView", triggerOpenDaysView: "triggerOpenDaysView", focusEvent: "focus", blurEvent: "blur", triggerSelectYear: "triggerSelectYear", triggerChangeYearsViewPage: "triggerChangeYearsViewPage", triggerHighlightYear: "triggerHighlightYear", triggerHighlightNextYear: "triggerHighlightNextYear", triggerHighlightPreviousYear: "triggerHighlightPreviousYear", triggerHighlightFirstYear: "triggerHighlightFirstYear", triggerHighlightLastYear: "triggerHighlightLastYear", triggerHighlightSameYearPreviousPage: "triggerHighlightSameYearPreviousPage", triggerHighlightSameYearNextPage: "triggerHighlightSameYearNextPage" }, host: { listeners: { "mousemove": "onMouseMove()" } }, viewQueries: [{ propertyName: "focusableElement", first: true, predicate: ["focusableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n —\r\n {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onYearGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onYearGridBlur()\"\r\n (click)=\"onYearGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (year of yearsArray(); track year) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(year.value)\"\r\n [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(year.value)\"\r\n [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n (click)=\"onCalendarYearClick(year.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultYearTemplate\r\n let-year\r\n >\r\n {{ year | date : yearDateFormat() }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconButtonComponent, selector: "ard-icon-button", inputs: ["wrapperClasses", "type", "ariaLabel", "color", "lightColoring", "compact", "pointerEventsWhenDisabled"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8149
8151
|
}
|
|
8150
8152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YearsViewComponent, decorators: [{
|
|
8151
8153
|
type: Component,
|
|
8152
|
-
args: [{ standalone: false, selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n
|
|
8154
|
+
args: [{ standalone: false, selector: 'ard-years-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ard-years-view\">\r\n @if (!readOnly()) {\r\n <div class=\"ard-calendar__top-toolbar\">\r\n <ng-template\r\n #defaultYearsViewHeaderTemplate\r\n let-dateRange=\"dateRange\"\r\n let-nextPage=\"nextPage\"\r\n let-prevPage=\"prevPage\"\r\n let-canGoToNextPage=\"canGoToNextPage\"\r\n let-canGoToPreviousPage=\"canGoToPreviousPage\"\r\n let-hideNextPageButton=\"hideNextPageButton\"\r\n let-hidePreviousPageButton=\"hidePreviousPageButton\"\r\n let-openDaysView=\"openDaysView\"\r\n >\r\n <div class=\"ard-calendar__calendar-header\">\r\n <div>\r\n @if (!hidePreviousPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"prevPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToPreviousPage\"\r\n >\r\n <ard-icon>chevron_left</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n <ard-button\r\n class=\"ard-calendar__header-button\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n variant=\"pill\"\r\n [tabIndex]=\"tabIndex()\"\r\n (click)=\"openDaysView()\"\r\n >\r\n {{ dateRange.from | date : yearsViewHeaderDateFormat() }}\r\n —\r\n {{ dateRange.to | date : yearsViewHeaderDateFormat() }}\r\n <div class=\"ard-dropdown-arrow\"></div>\r\n </ard-button>\r\n <div>\r\n @if (!hideNextPageButton) {\r\n <ard-icon-button\r\n size=\"small\"\r\n appearance=\"transparent\"\r\n color=\"none\"\r\n (click)=\"nextPage()\"\r\n [tabIndex]=\"tabIndex()\"\r\n [disabled]=\"!canGoToNextPage\"\r\n >\r\n <ard-icon>chevron_right</ard-icon>\r\n </ard-icon-button>\r\n }\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearsViewHeaderTemplate() || defaultYearsViewHeaderTemplate\"\r\n [ngTemplateOutletContext]=\"yearsViewHeaderContext()\"\r\n />\r\n </div>\r\n }\r\n <div\r\n #focusableElement\r\n class=\"ard-calendar__simple-grid\"\r\n [tabindex]=\"tabIndex()\"\r\n [ariaLabel]=\"currentAriaLabel()\"\r\n (focus)=\"focusEvent.emit($event)\"\r\n (focus)=\"onYearGridFocus()\"\r\n (blur)=\"blurEvent.emit($event)\"\r\n (blur)=\"onYearGridBlur()\"\r\n (click)=\"onYearGridClick()\"\r\n (keydown)=\"onMainGridKeydown($event)\"\r\n role=\"grid\"\r\n >\r\n @for (year of yearsArray(); track year) {\r\n <div\r\n class=\"ard-calendar__entry\"\r\n [class.ard-calendar__entry-highlighted]=\"highlightedYear() === year.value\"\r\n [class.ard-calendar__entry-highlighted-in-range]=\"isYearBetweenSelectedHighlighted(year.value)\"\r\n [class.ard-calendar__entry-disabled]=\"year.disabled\"\r\n [class.ard-calendar__entry-selected]=\"isYearSelected(year.value)\"\r\n [class.ard-calendar__entry-selected-start]=\"isYearSelectedStart(year.value)\"\r\n [class.ard-calendar__entry-selected-end]=\"isYearSelectedEnd(year.value)\"\r\n [class.ard-calendar__entry-selected-in-range]=\"isYearBetweenSelectedRange(year.value)\"\r\n [class.ard-calendar-today]=\"isYearToday(year.value)\"\r\n (click)=\"onCalendarYearClick(year.value)\"\r\n (mousemove)=\"$event.stopPropagation()\"\r\n (mouseover)=\"onCalendarYearMouseover(year.value)\"\r\n role=\"gridcell\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ard-calendar__entry-button\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n >\r\n <div class=\"ard-range-overlay\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n <div class=\"ard-button-content\">\r\n <ng-template\r\n #defaultYearTemplate\r\n let-year\r\n >\r\n {{ year | date : yearDateFormat() }}\r\n </ng-template>\r\n <ng-template\r\n [ngTemplateOutlet]=\"yearTemplate() || defaultYearTemplate\"\r\n [ngTemplateOutletContext]=\"yearContext()(year.value)\"\r\n />\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
8153
8155
|
}], propDecorators: { onMouseMove: [{
|
|
8154
8156
|
type: HostListener,
|
|
8155
8157
|
args: ['mousemove']
|