@acorex/components 7.0.25 → 7.0.26
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.
|
@@ -343,7 +343,7 @@ export class AXCalendarComponent extends AXCalendarComponentMixin {
|
|
|
343
343
|
}
|
|
344
344
|
}
|
|
345
345
|
AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
346
|
-
AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
346
|
+
AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
347
347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCalendarComponent, decorators: [{
|
|
348
348
|
type: Component,
|
|
349
349
|
args: [{ selector: 'ax-calendar', inputs: [
|
|
@@ -372,7 +372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
372
372
|
'disabledDatesChange',
|
|
373
373
|
'holidayDatesChange',
|
|
374
374
|
'onNavigate',
|
|
375
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:
|
|
375
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
|
|
376
376
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { interface: [{
|
|
377
377
|
type: Input
|
|
378
378
|
}], __hostClass: [{
|
|
@@ -468,7 +468,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
|
|
|
468
468
|
}
|
|
469
469
|
}
|
|
470
470
|
AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
-
AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
471
|
+
AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
472
472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCalendarComponent, decorators: [{
|
|
473
473
|
type: Component,
|
|
474
474
|
args: [{ selector: 'ax-calendar', inputs: [
|
|
@@ -497,7 +497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
497
497
|
'disabledDatesChange',
|
|
498
498
|
'holidayDatesChange',
|
|
499
499
|
'onNavigate',
|
|
500
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:
|
|
500
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
|
|
501
501
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { interface: [{
|
|
502
502
|
type: Input
|
|
503
503
|
}], __hostClass: [{
|
|
@@ -528,4 +528,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
528
528
|
|
|
529
529
|
export { AXCalendarBaseComponent, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCalendarNavigateEvent, CALENDAR_INPUTS, CALENDAR_OUTPUTS };
|
|
530
530
|
//# sourceMappingURL=acorex-components-calendar.mjs.map
|
|
531
|
-
//# sourceMappingURL=acorex-components-calendar.mjs.map
|
|
@@ -467,7 +467,7 @@ class AXCalendarComponent extends AXCalendarComponentMixin {
|
|
|
467
467
|
}
|
|
468
468
|
}
|
|
469
469
|
AXCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
470
|
-
AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
470
|
+
AXCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", allowNull: "allowNull", value: "value", name: "name", checked: "checked", disabled: "disabled", tabIndex: "tabIndex", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", type: "type", holidayDates: "holidayDates", interface: "interface" }, outputs: { valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
471
471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXCalendarComponent, decorators: [{
|
|
472
472
|
type: Component,
|
|
473
473
|
args: [{ selector: 'ax-calendar', inputs: [
|
|
@@ -496,7 +496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
496
496
|
'disabledDatesChange',
|
|
497
497
|
'holidayDatesChange',
|
|
498
498
|
'onNavigate',
|
|
499
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:
|
|
499
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n <div class=\"ax-calendar-header\">\r\n <div class=\"ax-calendar-header-info\">\r\n <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[1] }}\r\n </button>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText.split(' ')[0] }}\r\n </button>\r\n </ng-container>\r\n <ng-template #elseTemplate>\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button\"\r\n (click)=\"_handleNavClick($event)\">\r\n {{ _navText }}\r\n </button>\r\n </ng-template>\r\n </div>\r\n <div class=\"ax-calendar-header-buttons\">\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handlePrevClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': !rtl,\r\n 'ax-icon-chevron-right': rtl\r\n }\"></i>\r\n </button>\r\n\r\n <button\r\n [attr.disabled]=\"disabled ? '' : null\"\r\n class=\"ax-general-button ax-button-icon\"\r\n (click)=\"_handleNextClick()\">\r\n <i\r\n class=\"ax-icon\"\r\n [ngClass]=\"{\r\n 'ax-icon-chevron-left': rtl,\r\n 'ax-icon-chevron-right': !rtl\r\n }\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"ax-calendar-body\">\r\n <div [ngSwitch]=\"activeView\">\r\n <ng-container *ngSwitchCase=\"'years'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-year\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'months'\">\r\n <div class=\"ax-calendar-slots ax-calendar-slots-month\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"ax-calendar-week\">\r\n <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n </div>\r\n <div class=\"ax-calendar-slots ax-calendar-slots-day\">\r\n <div\r\n tabindex=\"0\"\r\n *ngFor=\"let slot of _slots\"\r\n [title]=\"slot.tooltip\"\r\n [ngClass]=\"slot.cssClass\"\r\n (click)=\"_handleSlotClick($event, slot)\">\r\n {{ slot.text }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"ax-calendar-footer\">\r\n <button\r\n class=\"ax-today-button\"\r\n tabindex=\"-1\"\r\n [class.ax-state-disabled]=\"disabled\"\r\n [attr.disabled]=\"disabled || isDisabled(_today)\"\r\n (click)=\"_handleGoToday()\"\r\n *ngIf=\"activeView == 'days'\">\r\n {{ _todayText }}\r\n </button>\r\n </div>\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\n</ng-template>\r\n", styles: ["html.ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}@media (max-width: 599px){ax-calendar{@apply ax-w-full;width:100%}}@media (min-width: 600px){ax-calendar{width:100%}}@media (min-width: 1200px){ax-calendar{width:20rem}}@media (min-width: 1800px){ax-calendar{width:20rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding:.25rem .5rem;margin-bottom:1.125rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots>div:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots>div:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots>div:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots > div:hover.ax-state-today){background-color:rgba(var(--ax-color-surface-08))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots > div:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;outline-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div:focus-visible.ax-state-disabled{outline-width:2px;outline-style:dashed}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-holiday{color:rgba(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today{border-width:2px;border-style:solid;border-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-today:focus-visible{border-style:dashed;outline-color:transparent}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-selected{background-color:rgba(var(--ax-color-primary));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event:after{content:\"\";position:absolute;top:80%;left:0;right:0;margin:auto;width:.25rem;height:.25rem;border-radius:999rem}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-primary:after{background-color:rgb(var(--ax-color-primary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-secondary:after{background-color:rgb(var(--ax-color-secondary))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-success:after{background-color:rgb(var(--ax-color-success))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-warning:after{background-color:rgb(var(--ax-color-warning))}ax-calendar .ax-calendar-body .ax-calendar-slots>div.ax-state-event-danger:after{background-color:rgb(var(--ax-color-danger))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-primary-500));cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}ax-calendar .ax-calendar-footer .ax-today-button:focus-visible{outline-width:2px;outline-offset:1px;outline-color:rgba(var(--ax-color-primary-500));outline-style:solid;border-radius:var(--ax-rounded-border-default)}ax-calendar .ax-calendar-footer .ax-today-button:hover{color:rgba(var(--ax-color-primary-600))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
|
|
500
500
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { interface: [{
|
|
501
501
|
type: Input
|
|
502
502
|
}], __hostClass: [{
|
|
@@ -527,4 +527,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
|
|
|
527
527
|
|
|
528
528
|
export { AXCalendarBaseComponent, AXCalendarComponent, AXCalendarComponentMixin, AXCalendarModule, AXCalendarNavigateEvent, CALENDAR_INPUTS, CALENDAR_OUTPUTS };
|
|
529
529
|
//# sourceMappingURL=acorex-components-calendar.mjs.map
|
|
530
|
-
//# sourceMappingURL=acorex-components-calendar.mjs.map
|