@indigina/ui-kit 1.1.298 → 1.1.299

package/fesm2022/indigina-ui-kit.mjs

@@ -9273,13 +9273,27 @@ class KitSchedulerComponent {
             scheduler.selectedViewIndex = viewIndex;
         }
     }
+    weekCellIsSelected(date) {
+        const currentDate = new Date(date);
+        const normalizedSelected = new Date(this.selectedDate() || '');
+        normalizedSelected.setMinutes(0, 0, 0);
+        currentDate.setMinutes(0, 0, 0);
+        return normalizedSelected.getTime() === currentDate.getTime();
+    }
+    monthCellIsSelected(date) {
+        const currentDate = new Date(date);
+        const normalizedSelected = new Date(this.selectedDate() || '');
+        normalizedSelected.setHours(0, 0, 0, 0);
+        currentDate.setHours(0, 0, 0, 0);
+        return normalizedSelected.getTime() === currentDate.getTime();
+    }
     formatDate(date) {
         const local = new Date(date);
         local.setHours(0, 0, 0, 0);
         return local.toISOString().split('T')[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 } }, outputs: { eventClicked: "eventClicked", slotClicked: "slotClicked" }, 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                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (click)=\"onSchedulerClick($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      <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 kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\">\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-week-view\n  ></kendo-scheduler-week-view>\n\n  <kendo-scheduler-month-view\n  ></kendo-scheduler-month-view>\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-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;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1;max-width:calc(100% - 44px)}.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: "directive", type: i1$d.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$d.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"] }, { 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: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 } }, outputs: { eventClicked: "eventClicked", slotClicked: "slotClicked" }, 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                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (click)=\"onSchedulerClick($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      <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-week-view\n  ></kendo-scheduler-week-view>\n\n  <kendo-scheduler-month-view\n  ></kendo-scheduler-month-view>\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;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1;max-width:calc(100% - 44px)}.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: "directive", type: i1$d.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$d.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"] }, { 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitSchedulerComponent, decorators: [{
             type: Component,
@@ -9288,7 +9302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         KitSchedulerToolbarComponent,
                         DatePipe,
                         NgTemplateOutlet,
-                    ], 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                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (click)=\"onSchedulerClick($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      <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 kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\">\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-week-view\n  ></kendo-scheduler-week-view>\n\n  <kendo-scheduler-month-view\n  ></kendo-scheduler-month-view>\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-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;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1;max-width:calc(100% - 44px)}.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"] }]
+                    ], 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                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (click)=\"onSchedulerClick($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      <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-week-view\n  ></kendo-scheduler-week-view>\n\n  <kendo-scheduler-month-view\n  ></kendo-scheduler-month-view>\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;gap:20px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1;max-width:calc(100% - 44px)}.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"] }]
         }] });
 
 class KitTranslateLoader {