@indigina/ui-kit 1.1.341 → 1.1.343
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/indigina-ui-kit.mjs +12 -14
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/index.d.ts +2 -3
- package/package.json +1 -1
|
@@ -9234,7 +9234,7 @@ class KitGridColumnManagerComponent {
|
|
|
9234
9234
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridColumnManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9235
9235
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitGridColumnManagerComponent, isStandalone: true, selector: "kit-grid-column-manager", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
9236
9236
|
DialogRef,
|
|
9237
|
-
], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.columns.columnManager' | translate\"\n [kitTooltipVisible]=\"!showLabel()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [label]=\"showLabel() ? ('kit.columns.title' | translate) : ''\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (dragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.columns.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <div class=\"action-buttons\">\n <kit-button [label]=\"'kit.columns.reset' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\" \n (clicked)=\"reset()\"/>\n <kit-button [label]=\"'kit.columns.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </div>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px;overflow-y:auto;height:calc(100% -
|
|
9237
|
+
], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.columns.columnManager' | translate\"\n [kitTooltipVisible]=\"!showLabel()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [label]=\"showLabel() ? ('kit.columns.title' | translate) : ''\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (dragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.columns.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <div class=\"action-buttons\">\n <kit-button [label]=\"'kit.columns.reset' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\" \n (clicked)=\"reset()\"/>\n <kit-button [label]=\"'kit.columns.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </div>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px;overflow-y:auto;height:calc(100% - 80px);box-sizing:border-box}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog{margin:30px}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content{padding:0;overflow:hidden}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content .kit-dialog-actions .action-buttons{display:flex;gap:15px}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["dragEnd"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$c.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9238
9238
|
}
|
|
9239
9239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridColumnManagerComponent, decorators: [{
|
|
9240
9240
|
type: Component,
|
|
@@ -9248,7 +9248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
9248
9248
|
KitTooltipDirective,
|
|
9249
9249
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
9250
9250
|
DialogRef,
|
|
9251
|
-
], template: "<kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.columns.columnManager' | translate\"\n [kitTooltipVisible]=\"!showLabel()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [label]=\"showLabel() ? ('kit.columns.title' | translate) : ''\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (dragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.columns.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <div class=\"action-buttons\">\n <kit-button [label]=\"'kit.columns.reset' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\" \n (clicked)=\"reset()\"/>\n <kit-button [label]=\"'kit.columns.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </div>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px;overflow-y:auto;height:calc(100% -
|
|
9251
|
+
], template: "<kit-button kitTooltip\n kitTooltipFilter=\"kit-button\"\n [title]=\"'kit.columns.columnManager' | translate\"\n [kitTooltipVisible]=\"!showLabel()\"\n [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n [label]=\"showLabel() ? ('kit.columns.title' | translate) : ''\"\n [type]=\"kitButtonType.GHOST\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [icon]=\"kitSvgIcon.COLUMNS\"\n [iconPosition]=\"kitButtonIconPosition.LEADING\"\n (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n <div class=\"kit-grid-columns-dialog\">\n <kit-sortable itemClass=\"item\"\n activeItemClass=\"item active\"\n [columnCount]=\"3\"\n [items]=\"updatedColumns()\"\n (dragEnd)=\"checkChanges()\">\n <ng-template let-item>\n @if (item.hidden) {\n <kit-svg-icon class=\"item-icon-checkbox hidden\"\n [icon]=\"kitSvgIcon.EYE_CLOSE\"\n (click)=\"onColumnVisibilityChange(true, item)\"\n ></kit-svg-icon>\n } @else {\n <kit-svg-icon class=\"item-icon-checkbox\"\n [icon]=\"kitSvgIcon.EYE_OPEN\"\n (click)=\"onColumnVisibilityChange(false, item)\"\n ></kit-svg-icon>\n }\n <div class=\"item-label\">{{ item.title | translate }}</div>\n <kit-svg-icon class=\"item-icon-menu\"\n [ngClass]=\"{ hidden: item.hidden }\"\n [icon]=\"kitSvgIcon.MENU\"\n ></kit-svg-icon>\n </ng-template>\n </kit-sortable>\n </div>\n\n <kit-dialog-actions>\n <kit-button [label]=\"'kit.columns.cancel' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [type]=\"kitButtonType.GHOST\"\n (clicked)=\"close()\"\n ></kit-button>\n <div class=\"action-buttons\">\n <kit-button [label]=\"'kit.columns.reset' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\" \n (clicked)=\"reset()\"/>\n <kit-button [label]=\"'kit.columns.apply' | translate\"\n [kind]=\"kitButtonKind.MEDIUM\"\n [disabled]=\"!hasUnsavedChanges()\"\n (clicked)=\"applyChanges()\"\n ></kit-button>\n </div>\n </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px;overflow-y:auto;height:calc(100% - 80px);box-sizing:border-box}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog{margin:30px}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content{padding:0;overflow:hidden}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content .kit-dialog-actions .action-buttons{display:flex;gap:15px}\n"] }]
|
|
9252
9252
|
}], propDecorators: { showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], dialogContent: [{ type: i0.ViewChild, args: ['dialogContent', { isSignal: true }] }] } });
|
|
9253
9253
|
|
|
9254
9254
|
class KitGridDetailsButtonComponent {
|
|
@@ -9753,17 +9753,15 @@ class KitSchedulerComponent {
|
|
|
9753
9753
|
getEventsForDate(date, events) {
|
|
9754
9754
|
return events.filter(event => this.formatDate(event.start) === this.formatDate(date));
|
|
9755
9755
|
}
|
|
9756
|
-
|
|
9757
|
-
const target = event.target;
|
|
9758
|
-
const moreEventsElement = target.closest('.k-more-events');
|
|
9759
|
-
if (moreEventsElement) {
|
|
9760
|
-
this.navigateToView(0);
|
|
9761
|
-
}
|
|
9762
|
-
}
|
|
9763
|
-
navigateToView(viewIndex) {
|
|
9756
|
+
onNavigate(event) {
|
|
9764
9757
|
const scheduler = this.scheduler();
|
|
9765
|
-
if (scheduler) {
|
|
9766
|
-
scheduler.selectedViewIndex
|
|
9758
|
+
if (scheduler && event.action.type === 'show-date') {
|
|
9759
|
+
if (scheduler.selectedViewIndex === 0 && scheduler.views.length > 1) {
|
|
9760
|
+
scheduler.selectedViewIndex = 1;
|
|
9761
|
+
scheduler.selectedDate = event.action.date;
|
|
9762
|
+
return;
|
|
9763
|
+
}
|
|
9764
|
+
scheduler.selectedViewIndex = 0;
|
|
9767
9765
|
}
|
|
9768
9766
|
}
|
|
9769
9767
|
weekCellIsSelected(date) {
|
|
@@ -9786,7 +9784,7 @@ class KitSchedulerComponent {
|
|
|
9786
9784
|
return local.toISOString().split('T')[0];
|
|
9787
9785
|
}
|
|
9788
9786
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitSchedulerComponent, isStandalone: true, selector: "kit-scheduler", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, monthEventHeight: { classPropertyName: "monthEventHeight", publicName: "monthEventHeight", isSignal: true, isRequired: false, transformFunction: null }, eventsPerDay: { classPropertyName: "eventsPerDay", publicName: "eventsPerDay", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, agendaNumberOfDays: { classPropertyName: "agendaNumberOfDays", publicName: "agendaNumberOfDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClicked: "eventClicked", eventDblClicked: "eventDblClicked", slotClicked: "slotClicked", dateChanged: "dateChanged" }, queries: [{ propertyName: "weekEventTemplate", first: true, predicate: KitSchedulerWeekEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "monthEventTemplate", first: true, predicate: KitSchedulerMonthEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scheduler", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-scheduler #scheduler\n class=\"kit-scheduler\"\n [events]=\"events()\"\n [selectedDate]=\"selectedDate()\"\n [allDaySlot]=\"false\"\n [showFooter]=\"false\"\n [slotFill]=\"1\"\n [min]=\"min()\"\n [max]=\"max()\"\n [timezone]=\"timezone()\"\n [loading]=\"loading()\"\n (eventClick)=\"onEventClick($event)\"\n (slotClick)=\"onSlotClick($event)\"\n (click)=\"onSchedulerClick($event)\"\n (eventDblClick)=\"eventDblClicked.emit($event)\"\n (dateChange)=\"dateChanged.emit($event)\">\n <ng-template kendoSchedulerToolbarTemplate\n let-selectedDate=\"selectedDate\"\n let-selectedView=\"selectedView\">\n <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n [selectedDate]=\"selectedDate\"\n [selectedView]=\"selectedView\"\n [showTimePill]=\"showTimePill()\">\n <div views-selector\n kendoSchedulerToolbarViewSelector\n [toolbarWidth]=\"1\"\n [responsiveBreakpoint]=\"0\"\n ></div>\n </kit-scheduler-toolbar>\n <ng-content select=\"[toolbar]\"></ng-content>\n </ng-template>\n\n <ng-template kendoSchedulerDateHeaderTemplate\n let-date=\"date\">\n <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n ></ng-container>\n </ng-template>\n\n <ng-template kendoSchedulerMajorTimeHeaderTemplate\n let-date=\"date\">\n {{ date | date:'h a' }}\n </ng-template>\n\n <ng-template kendoSchedulerTimeSlotTemplate let-date=\"date\">\n <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n </ng-template>\n\n <ng-template kendoSchedulerMonthDaySlotTemplate\n let-date=\"date\">\n <div class=\"month-day\"\n [class.selected]=\"monthCellIsSelected(date)\">\n <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n ></ng-container>\n\n @if (monthEventTemplate(); as template) {\n <div class=\"month-day-events\">\n <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n ></ng-container>\n </div>\n }\n </div>\n </ng-template>\n\n @if (weekEventTemplate(); as template) {\n <ng-template kendoSchedulerEventTemplate\n let-event=\"event\">\n <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n ></ng-container>\n </ng-template>\n }\n\n <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n [eventsPerDay]=\"eventsPerDay()\"\n ></kendo-scheduler-month-view>\n\n @if (viewModes()['week']) {\n <kendo-scheduler-week-view\n ></kendo-scheduler-week-view>\n }\n\n @if (viewModes()['day']) {\n <kendo-scheduler-day-view\n ></kendo-scheduler-day-view>\n }\n\n @if (viewModes()['timeline']) {\n <kendo-scheduler-timeline-view\n ></kendo-scheduler-timeline-view>\n }\n\n @if (viewModes()['agenda']) {\n <kendo-scheduler-agenda-view [numberOfDays]=\"agendaNumberOfDays()\"\n ></kendo-scheduler-agenda-view>\n }\n\n <kendo-scheduler-messages [dayViewTitle]=\"viewModes()['day']?.name || ''\"\n [weekViewTitle]=\"viewModes()['week']?.name || ''\"\n [monthViewTitle]=\"viewModes()['month']?.name || ''\"\n [agendaViewTitle]=\"viewModes()['agenda']?.name || ''\"\n [timelineViewTitle]=\"viewModes()['timeline']?.name || ''\"\n ></kendo-scheduler-messages>\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n let-date=\"date\">\n <div class=\"week-day\">\n <div class=\"week-day-name\">\n {{ date | date:'EEE' }}\n </div>\n <div class=\"week-day-date\">\n {{ date | date:'dd' }}\n </div>\n </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;gap:34px;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler ::ng-deep .k-scheduler-toolbar{display:flex;gap:20px;padding:0;border:none;background:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-views{display:flex;align-items:center;gap:1px}.kit-scheduler ::ng-deep .k-scheduler-views .k-button{padding:0 16px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;border:none;border-radius:6px;background:none;transition:none}.kit-scheduler ::ng-deep .k-scheduler-views .k-button:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-scheduler-views .k-button:focus{box-shadow:none}.kit-scheduler ::ng-deep .k-scheduler-views .k-button.k-selected{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-schedular-header .k-schedular-cell{padding:4px 8px 16px;height:72px;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{padding:0 12px 0 0;color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{padding:4px 8px 16px;height:36px;box-sizing:border-box;background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{padding:6px;color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-cell{padding:4px 8px;box-sizing:border-box;height:175px}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{padding:6px;color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}\n"], dependencies: [{ kind: "component", type: i1$d.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "allDaySlot", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "showToolbar", "showFooter", "slotClass", "eventClass", "eventStyles", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport", "schedulerResize"] }, { kind: "component", type: i1$d.SchedulerCustomMessagesComponent, selector: "kendo-scheduler-messages" }, { kind: "directive", type: i1$d.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$d.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$d.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$d.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$d.TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$d.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "directive", type: i1$d.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { kind: "component", type: i1$d.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { kind: "directive", type: i1$d.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }, { kind: "directive", type: i1$d.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { kind: "directive", type: i1$d.MajorTimeHeaderTemplateDirective, selector: "[kendoSchedulerMajorTimeHeaderTemplate]" }, { kind: "directive", type: i1$d.MonthDaySlotTemplateDirective, selector: "[kendoSchedulerMonthDaySlotTemplate]" }, { kind: "directive", type: i1$d.TimeSlotTemplateDirective, selector: "[kendoSchedulerTimeSlotTemplate]" }, { kind: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView", "showTimePill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9787
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitSchedulerComponent, isStandalone: true, selector: "kit-scheduler", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, monthEventHeight: { classPropertyName: "monthEventHeight", publicName: "monthEventHeight", isSignal: true, isRequired: false, transformFunction: null }, eventsPerDay: { classPropertyName: "eventsPerDay", publicName: "eventsPerDay", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, agendaNumberOfDays: { classPropertyName: "agendaNumberOfDays", publicName: "agendaNumberOfDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClicked: "eventClicked", eventDblClicked: "eventDblClicked", slotClicked: "slotClicked", dateChanged: "dateChanged" }, queries: [{ propertyName: "weekEventTemplate", first: true, predicate: KitSchedulerWeekEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "monthEventTemplate", first: true, predicate: KitSchedulerMonthEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scheduler", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-scheduler #scheduler\n class=\"kit-scheduler\"\n [events]=\"events()\"\n [selectedDate]=\"selectedDate()\"\n [allDaySlot]=\"false\"\n [showFooter]=\"false\"\n [slotFill]=\"1\"\n [min]=\"min()\"\n [max]=\"max()\"\n [timezone]=\"timezone()\"\n [loading]=\"loading()\"\n (eventClick)=\"onEventClick($event)\"\n (slotClick)=\"onSlotClick($event)\"\n (navigate)=\"onNavigate($event)\"\n (eventDblClick)=\"eventDblClicked.emit($event)\"\n (dateChange)=\"dateChanged.emit($event)\">\n <ng-template kendoSchedulerToolbarTemplate\n let-selectedDate=\"selectedDate\"\n let-selectedView=\"selectedView\">\n <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n [selectedDate]=\"selectedDate\"\n [selectedView]=\"selectedView\"\n [showTimePill]=\"showTimePill()\">\n <div views-selector\n kendoSchedulerToolbarViewSelector\n [toolbarWidth]=\"1\"\n [responsiveBreakpoint]=\"0\"\n ></div>\n </kit-scheduler-toolbar>\n <ng-content select=\"[toolbar]\"></ng-content>\n </ng-template>\n\n <ng-template kendoSchedulerDateHeaderTemplate\n let-date=\"date\">\n <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n ></ng-container>\n </ng-template>\n\n <ng-template kendoSchedulerMajorTimeHeaderTemplate\n let-date=\"date\">\n {{ date | date:'h a' }}\n </ng-template>\n\n <ng-template kendoSchedulerTimeSlotTemplate let-date=\"date\">\n <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n </ng-template>\n\n <ng-template kendoSchedulerMonthDaySlotTemplate\n let-date=\"date\">\n <div class=\"month-day\"\n [class.selected]=\"monthCellIsSelected(date)\">\n <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n ></ng-container>\n\n @if (monthEventTemplate(); as template) {\n <div class=\"month-day-events\">\n <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n ></ng-container>\n </div>\n }\n </div>\n </ng-template>\n\n @if (weekEventTemplate(); as template) {\n <ng-template kendoSchedulerEventTemplate\n let-event=\"event\">\n <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n ></ng-container>\n </ng-template>\n }\n\n <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n [eventsPerDay]=\"eventsPerDay()\"\n ></kendo-scheduler-month-view>\n\n @if (viewModes()['week']) {\n <kendo-scheduler-week-view\n ></kendo-scheduler-week-view>\n }\n\n @if (viewModes()['day']) {\n <kendo-scheduler-day-view\n ></kendo-scheduler-day-view>\n }\n\n @if (viewModes()['timeline']) {\n <kendo-scheduler-timeline-view\n ></kendo-scheduler-timeline-view>\n }\n\n @if (viewModes()['agenda']) {\n <kendo-scheduler-agenda-view [numberOfDays]=\"agendaNumberOfDays()\"\n ></kendo-scheduler-agenda-view>\n }\n\n <kendo-scheduler-messages [dayViewTitle]=\"viewModes()['day']?.name || ''\"\n [weekViewTitle]=\"viewModes()['week']?.name || ''\"\n [monthViewTitle]=\"viewModes()['month']?.name || ''\"\n [agendaViewTitle]=\"viewModes()['agenda']?.name || ''\"\n [timelineViewTitle]=\"viewModes()['timeline']?.name || ''\"\n ></kendo-scheduler-messages>\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n let-date=\"date\">\n <div class=\"week-day\">\n <div class=\"week-day-name\">\n {{ date | date:'EEE' }}\n </div>\n <div class=\"week-day-date\">\n {{ date | date:'dd' }}\n </div>\n </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;gap:34px;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler ::ng-deep .k-scheduler-toolbar{display:flex;gap:20px;padding:0;border:none;background:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-views{display:flex;align-items:center;gap:1px}.kit-scheduler ::ng-deep .k-scheduler-views .k-button{padding:0 16px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;border:none;border-radius:6px;background:none;transition:none}.kit-scheduler ::ng-deep .k-scheduler-views .k-button:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-scheduler-views .k-button:focus{box-shadow:none}.kit-scheduler ::ng-deep .k-scheduler-views .k-button.k-selected{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-schedular-header .k-schedular-cell{padding:4px 8px 16px;height:72px;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{padding:0 12px 0 0;color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{padding:4px 8px 16px;height:36px;box-sizing:border-box;background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{padding:6px;color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-cell{padding:4px 8px;box-sizing:border-box;height:175px}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{padding:6px;color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}\n"], dependencies: [{ kind: "component", type: i1$d.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "allDaySlot", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "showToolbar", "showFooter", "slotClass", "eventClass", "eventStyles", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport", "schedulerResize"] }, { kind: "component", type: i1$d.SchedulerCustomMessagesComponent, selector: "kendo-scheduler-messages" }, { kind: "directive", type: i1$d.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$d.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$d.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$d.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$d.TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$d.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "directive", type: i1$d.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { kind: "component", type: i1$d.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { kind: "directive", type: i1$d.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }, { kind: "directive", type: i1$d.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { kind: "directive", type: i1$d.MajorTimeHeaderTemplateDirective, selector: "[kendoSchedulerMajorTimeHeaderTemplate]" }, { kind: "directive", type: i1$d.MonthDaySlotTemplateDirective, selector: "[kendoSchedulerMonthDaySlotTemplate]" }, { kind: "directive", type: i1$d.TimeSlotTemplateDirective, selector: "[kendoSchedulerTimeSlotTemplate]" }, { kind: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView", "showTimePill"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9790
9788
|
}
|
|
9791
9789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitSchedulerComponent, decorators: [{
|
|
9792
9790
|
type: Component,
|
|
@@ -9795,7 +9793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
9795
9793
|
KitSchedulerToolbarComponent,
|
|
9796
9794
|
DatePipe,
|
|
9797
9795
|
NgTemplateOutlet,
|
|
9798
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-scheduler #scheduler\n class=\"kit-scheduler\"\n [events]=\"events()\"\n [selectedDate]=\"selectedDate()\"\n [allDaySlot]=\"false\"\n [showFooter]=\"false\"\n [slotFill]=\"1\"\n [min]=\"min()\"\n [max]=\"max()\"\n [timezone]=\"timezone()\"\n [loading]=\"loading()\"\n (eventClick)=\"onEventClick($event)\"\n (slotClick)=\"onSlotClick($event)\"\n (
|
|
9796
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-scheduler #scheduler\n class=\"kit-scheduler\"\n [events]=\"events()\"\n [selectedDate]=\"selectedDate()\"\n [allDaySlot]=\"false\"\n [showFooter]=\"false\"\n [slotFill]=\"1\"\n [min]=\"min()\"\n [max]=\"max()\"\n [timezone]=\"timezone()\"\n [loading]=\"loading()\"\n (eventClick)=\"onEventClick($event)\"\n (slotClick)=\"onSlotClick($event)\"\n (navigate)=\"onNavigate($event)\"\n (eventDblClick)=\"eventDblClicked.emit($event)\"\n (dateChange)=\"dateChanged.emit($event)\">\n <ng-template kendoSchedulerToolbarTemplate\n let-selectedDate=\"selectedDate\"\n let-selectedView=\"selectedView\">\n <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n [selectedDate]=\"selectedDate\"\n [selectedView]=\"selectedView\"\n [showTimePill]=\"showTimePill()\">\n <div views-selector\n kendoSchedulerToolbarViewSelector\n [toolbarWidth]=\"1\"\n [responsiveBreakpoint]=\"0\"\n ></div>\n </kit-scheduler-toolbar>\n <ng-content select=\"[toolbar]\"></ng-content>\n </ng-template>\n\n <ng-template kendoSchedulerDateHeaderTemplate\n let-date=\"date\">\n <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n ></ng-container>\n </ng-template>\n\n <ng-template kendoSchedulerMajorTimeHeaderTemplate\n let-date=\"date\">\n {{ date | date:'h a' }}\n </ng-template>\n\n <ng-template kendoSchedulerTimeSlotTemplate let-date=\"date\">\n <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n </ng-template>\n\n <ng-template kendoSchedulerMonthDaySlotTemplate\n let-date=\"date\">\n <div class=\"month-day\"\n [class.selected]=\"monthCellIsSelected(date)\">\n <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n ></ng-container>\n\n @if (monthEventTemplate(); as template) {\n <div class=\"month-day-events\">\n <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n ></ng-container>\n </div>\n }\n </div>\n </ng-template>\n\n @if (weekEventTemplate(); as template) {\n <ng-template kendoSchedulerEventTemplate\n let-event=\"event\">\n <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n ></ng-container>\n </ng-template>\n }\n\n <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n [eventsPerDay]=\"eventsPerDay()\"\n ></kendo-scheduler-month-view>\n\n @if (viewModes()['week']) {\n <kendo-scheduler-week-view\n ></kendo-scheduler-week-view>\n }\n\n @if (viewModes()['day']) {\n <kendo-scheduler-day-view\n ></kendo-scheduler-day-view>\n }\n\n @if (viewModes()['timeline']) {\n <kendo-scheduler-timeline-view\n ></kendo-scheduler-timeline-view>\n }\n\n @if (viewModes()['agenda']) {\n <kendo-scheduler-agenda-view [numberOfDays]=\"agendaNumberOfDays()\"\n ></kendo-scheduler-agenda-view>\n }\n\n <kendo-scheduler-messages [dayViewTitle]=\"viewModes()['day']?.name || ''\"\n [weekViewTitle]=\"viewModes()['week']?.name || ''\"\n [monthViewTitle]=\"viewModes()['month']?.name || ''\"\n [agendaViewTitle]=\"viewModes()['agenda']?.name || ''\"\n [timelineViewTitle]=\"viewModes()['timeline']?.name || ''\"\n ></kendo-scheduler-messages>\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n let-date=\"date\">\n <div class=\"week-day\">\n <div class=\"week-day-name\">\n {{ date | date:'EEE' }}\n </div>\n <div class=\"week-day-date\">\n {{ date | date:'dd' }}\n </div>\n </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;gap:34px;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler ::ng-deep .k-scheduler-toolbar{display:flex;gap:20px;padding:0;border:none;background:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-views{display:flex;align-items:center;gap:1px}.kit-scheduler ::ng-deep .k-scheduler-views .k-button{padding:0 16px;height:32px;color:var(--ui-kit-color-grey-10);font-size:14px;border:none;border-radius:6px;background:none;transition:none}.kit-scheduler ::ng-deep .k-scheduler-views .k-button:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-scheduler-views .k-button:focus{box-shadow:none}.kit-scheduler ::ng-deep .k-scheduler-views .k-button.k-selected{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-schedular-header .k-schedular-cell{padding:4px 8px 16px;height:72px;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{padding:0 12px 0 0;color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{padding:4px 8px 16px;height:36px;box-sizing:border-box;background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{padding:6px;color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-cell{padding:4px 8px;box-sizing:border-box;height:175px}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{padding:6px;color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}\n"] }]
|
|
9799
9797
|
}], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], viewModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModes", required: false }] }], showTimePill: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePill", required: false }] }], monthEventHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthEventHeight", required: false }] }], eventsPerDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventsPerDay", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], agendaNumberOfDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "agendaNumberOfDays", required: false }] }], eventClicked: [{ type: i0.Output, args: ["eventClicked"] }], eventDblClicked: [{ type: i0.Output, args: ["eventDblClicked"] }], slotClicked: [{ type: i0.Output, args: ["slotClicked"] }], dateChanged: [{ type: i0.Output, args: ["dateChanged"] }], scheduler: [{ type: i0.ViewChild, args: ['scheduler', { isSignal: true }] }], weekEventTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerWeekEventTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], monthEventTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerMonthEventTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
|
|
9800
9798
|
|
|
9801
9799
|
class KitTranslateLoader {
|