@solcre-org/core-ui 2.20.12 → 2.20.14

package/fesm2022/solcre-org-core-ui.mjs

@@ -17206,12 +17206,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.20.12',
+    full: '2.20.14',
     major: 2,
     minor: 20,
-    patch: 12,
-    timestamp: '2026-02-05T15:51:16.776Z',
-    buildDate: '5/2/2026'
+    patch: 14,
+    timestamp: '2026-02-06T14:40:17.534Z',
+    buildDate: '6/2/2026'
 };
 
 class MainNavComponent {
@@ -21851,6 +21851,9 @@ class GenericSchedulerComponent {
     eventClick = output();
     eventHover = output();
     eventLeave = output();
+    eventApprove = output();
+    eventReject = output();
+    eventCancel = output();
     todayClick = output();
     previousDay = output();
     nextDay = output();
@@ -21864,13 +21867,30 @@ class GenericSchedulerComponent {
     expandedDay = signal(null);
     timeUpdateInterval = null;
     mergedConfig = computed(() => ({ ...DEFAULT_SCHEDULER_CONFIG, ...this.config() }));
+    getNow() {
+        const now = new Date();
+        const cfg = this.mergedConfig();
+        if (cfg.timezone) {
+            const match = cfg.timezone.match(/gmt([+-]?\d+)/i);
+            if (match) {
+                const offset = parseInt(match[1], 10);
+                return new Date(now.getTime() + (offset * 3600000));
+            }
+        }
+        else {
+            // Use system timezone
+            const offsetMinutes = now.getTimezoneOffset();
+            return new Date(now.getTime() - (offsetMinutes * 60000));
+        }
+        return now;
+    }
     viewMode = computed(() => this.mergedConfig().viewMode || 'day');
     weekDays = computed(() => {
         if (this.viewMode() !== 'week')
             return [];
         const selected = this.selectedDate();
         const localeValue = this.locale();
-        const today = new Date();
+        const today = this.getNow();
         const dayOfWeek = selected.getUTCDay();
         const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
         const monday = new Date(Date.UTC(selected.getUTCFullYear(), selected.getUTCMonth(), selected.getUTCDate() + mondayOffset));
@@ -21895,7 +21915,7 @@ class GenericSchedulerComponent {
             return [];
         const selected = this.selectedDate();
         const localeValue = this.locale();
-        const today = new Date();
+        const today = this.getNow();
         const year = selected.getUTCFullYear();
         const month = selected.getUTCMonth();
         const firstDayOfMonth = new Date(Date.UTC(year, month, 1));
@@ -21920,7 +21940,7 @@ class GenericSchedulerComponent {
     });
     isToday = computed(() => {
         const selected = this.selectedDate();
-        const today = new Date();
+        const today = this.getNow();
         return selected.getUTCFullYear() === today.getUTCFullYear() &&
             selected.getUTCMonth() === today.getUTCMonth() &&
             selected.getUTCDate() === today.getUTCDate();
@@ -22030,9 +22050,9 @@ class GenericSchedulerComponent {
         this.timeSlots.set(slots);
     }
     startTimeUpdater() {
-        this.currentTime.set(new Date());
+        this.currentTime.set(this.getNow());
         this.timeUpdateInterval = setInterval(() => {
-            this.currentTime.set(new Date());
+            this.currentTime.set(this.getNow());
         }, 60000);
     }
     stopTimeUpdater() {
@@ -22070,7 +22090,7 @@ class GenericSchedulerComponent {
         return slotMinutes >= startMinutes && slotMinutes < endMinutes;
     }
     isSlotDisabled(columnId, slot) {
-        const now = new Date();
+        const now = this.getNow();
         const selected = this.selectedDate();
         const dateStr = selected.toISOString().split('T')[0];
         if (this.disabledDates().includes(dateStr)) {
@@ -22211,7 +22231,7 @@ class GenericSchedulerComponent {
         if (this.isDayDisabled(dayDate)) {
             return true;
         }
-        const now = new Date();
+        const now = this.getNow();
         const todayUTC = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
         const dayUTC = Date.UTC(dayDate.getUTCFullYear(), dayDate.getUTCMonth(), dayDate.getUTCDate());
         if (dayUTC < todayUTC) {
@@ -22285,8 +22305,17 @@ class GenericSchedulerComponent {
         const dayNum = day.getUTCDate();
         return `${weekday}\n${dayNum}`;
     }
+    onApproveClick(event, column) {
+        this.eventApprove.emit({ event, column });
+    }
+    onRejectClick(event, column) {
+        this.eventReject.emit({ event, column });
+    }
+    onCancelClick(event, column) {
+        this.eventCancel.emit({ event, column });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSchedulerComponent, isStandalone: true, selector: "core-generic-scheduler", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showTimeColumn: { classPropertyName: "showTimeColumn", publicName: "showTimeColumn", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySlotLabel: { classPropertyName: "emptySlotLabel", publicName: "emptySlotLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledSlotLabel: { classPropertyName: "disabledSlotLabel", publicName: "disabledSlotLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay", previousWeek: "previousWeek", nextWeek: "nextWeek", previousMonth: "previousMonth", nextMonth: "nextMonth", viewModeChange: "viewModeChange" }, host: { properties: { "class.c-bookings-grid--weekly": "viewMode() === \"week\"", "style.--cols": "columns().length" }, classAttribute: "c-bookings-grid c-bookings-card" }, ngImport: i0, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n      (click)=\"onPrevious()\"\n    ></button>\n    <span>{{ formattedDate() }}</span>\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n      (click)=\"onNext()\"\n    ></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'day'\"\n      (click)=\"setViewMode('day')\"\n    >\n      {{ dayLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'week'\"\n      (click)=\"setViewMode('week')\"\n    >\n      {{ weekLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\"\n    >\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper\"\n  [style.--cols]=\"columns().length\"\n  style=\"position: relative\"\n>\n  @if (isToday() && currentTimePosition() !== null) {\n  <div\n    class=\"c-bookings-grid__current-time-line\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n      slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      >\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onSlotClick(column.id, slot)\"\n      >\n        {{ emptySlotLabel() }}\n      </button>\n      } } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n\n        @if (event.canCancel) {\n        <button\n          class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button\n            class=\"c-icon-btn--fill context:success icon-check\"\n            title=\"Aprobar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          } @if (event.canReject) {\n          <button\n            class=\"c-icon-btn--fill context:error icon-cross\"\n            title=\"Rechazar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n  [style.--cols]=\"7\"\n  style=\"position: relative\"\n>\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div\n    class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n    [style.--day-index]=\"currentTimeDayIndex()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div\n    class=\"c-bookings-grid__col\"\n    [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n  >\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span\n          class=\"c-bookings-grid__day-number\"\n          [class.is-today]=\"day.isToday\"\n          >{{ day.dayNumber }}</span\n        >\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      ></button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"\n      ></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div\n      class=\"c-bookings-grid__month-cell\"\n      [class.is-today]=\"day.isToday\"\n      [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \"\n      [class.is-disabled]=\"isDayDisabled(day.date)\"\n      (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n    >\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div\n          class=\"c-bookings-grid__more-events\"\n          (click)=\"openDayPopover(day.date, $event)\"\n        >\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n          }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n          }}</span>\n        </div>\n        <button\n          class=\"c-bookings-grid__popover-close\"\n          (click)=\"closeDayPopover()\"\n        >\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericSchedulerComponent, isStandalone: true, selector: "core-generic-scheduler", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showTimeColumn: { classPropertyName: "showTimeColumn", publicName: "showTimeColumn", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, emptySlotLabel: { classPropertyName: "emptySlotLabel", publicName: "emptySlotLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledSlotLabel: { classPropertyName: "disabledSlotLabel", publicName: "disabledSlotLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null }, dayLabel: { classPropertyName: "dayLabel", publicName: "dayLabel", isSignal: true, isRequired: false, transformFunction: null }, monthLabel: { classPropertyName: "monthLabel", publicName: "monthLabel", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", eventApprove: "eventApprove", eventReject: "eventReject", eventCancel: "eventCancel", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay", previousWeek: "previousWeek", nextWeek: "nextWeek", previousMonth: "previousMonth", nextMonth: "nextMonth", viewModeChange: "viewModeChange" }, host: { properties: { "class.c-bookings-grid--weekly": "viewMode() === \"week\"", "style.--cols": "columns().length" }, classAttribute: "c-bookings-grid c-bookings-card" }, ngImport: i0, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\" (click)=\"onPrevious()\"></button>\n    <span>{{ formattedDate() }}</span>\n    <button class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\" (click)=\"onNext()\"></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'day'\" (click)=\"setViewMode('day')\">\n      {{ dayLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'week'\" (click)=\"setViewMode('week')\">\n      {{ weekLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\">\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div class=\"c-bookings-grid__wrapper\" [style.--cols]=\"columns().length\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (isToday() && currentTimePosition() !== null) {\n  <div class=\"c-bookings-grid__current-time-line\" [style.--time-position-rem]=\"currentTimePosition()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot) && !mergedConfig().emptySlotEventsDisabled) {\n      @if (isSlotDisabled(column.id, slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled [title]=\"disabledSlotLabel()\">\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\" (click)=\"onSlotClick(column.id, slot)\">\n        {{ emptySlotLabel() }}\n      </button>\n      }\n      } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n        @if (event.subtitle) {\n        <p class=\"c-bookings-grid__text\">\n          {{ event.subtitle }}\n        </p>\n        }\n\n        @if (event.canCancel) {\n        <button class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation(); onCancelClick(event, column)\">\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if (event.canApprove || event.canReject) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button class=\"c-icon-btn--fill context:success icon-check\" title=\"Aprobar\"\n            [style.width.rem]=\"event.canApproveHeightRem\" [style.height.rem]=\"event.canApproveHeightRem\"\n            (click)=\"$event.stopPropagation(); onApproveClick(event, column)\"></button>\n          } @if (event.canReject) {\n          <button class=\"c-icon-btn--fill context:error icon-cross\" title=\"Rechazar\"\n            [style.width.rem]=\"event.canRejectHeightRem\" [style.height.rem]=\"event.canRejectHeightRem\"\n            (click)=\"$event.stopPropagation(); onRejectClick(event, column)\"></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\" [style.--cols]=\"7\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\" [style.--day-index]=\"currentTimeDayIndex()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div class=\"c-bookings-grid__col\" [class.c-bookings-grid__col--weekend]=\"day.isWeekend\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span class=\"c-bookings-grid__day-number\" [class.is-today]=\"day.isToday\">{{ day.dayNumber }}</span>\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled\n        [title]=\"disabledSlotLabel()\"></button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div class=\"c-bookings-grid__month-cell\" [class.is-today]=\"day.isToday\" [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \" [class.is-disabled]=\"isDayDisabled(day.date)\" (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\">\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div class=\"c-bookings-grid__month-event\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div class=\"c-bookings-grid__more-events\" (click)=\"openDayPopover(day.date, $event)\">\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n            }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n            }}</span>\n        </div>\n        <button class=\"c-bookings-grid__popover-close\" (click)=\"closeDayPopover()\">\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\" [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\" [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}.c-bookings-grid__row{height:calc(var(--row-height-rem, 4) * 1rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, decorators: [{
             type: Component,
@@ -22294,7 +22323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         'class': 'c-bookings-grid c-bookings-card',
                         '[class.c-bookings-grid--weekly]': 'viewMode() === "week"',
                         '[style.--cols]': 'columns().length'
-                    }, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\"\n      (click)=\"onPrevious()\"\n    ></button>\n    <span>{{ formattedDate() }}</span>\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\"\n      (click)=\"onNext()\"\n    ></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'day'\"\n      (click)=\"setViewMode('day')\"\n    >\n      {{ dayLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'week'\"\n      (click)=\"setViewMode('week')\"\n    >\n      {{ weekLabel() }}\n    </button>\n    <button\n      class=\"c-bookings-header__view-btn\"\n      [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\"\n    >\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper\"\n  [style.--cols]=\"columns().length\"\n  style=\"position: relative\"\n>\n  @if (isToday() && currentTimePosition() !== null) {\n  <div\n    class=\"c-bookings-grid__current-time-line\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot)) { @if (isSlotDisabled(column.id,\n      slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      >\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onSlotClick(column.id, slot)\"\n      >\n        {{ emptySlotLabel() }}\n      </button>\n      } } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n\n        @if (event.canCancel) {\n        <button\n          class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if ((event.canApprove || event.canReject) && event.duration >= 91) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button\n            class=\"c-icon-btn--fill context:success icon-check\"\n            title=\"Aprobar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          } @if (event.canReject) {\n          <button\n            class=\"c-icon-btn--fill context:error icon-cross\"\n            title=\"Rechazar\"\n            (click)=\"$event.stopPropagation()\"\n          ></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div\n  class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\"\n  [style.--cols]=\"7\"\n  style=\"position: relative\"\n>\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div\n    class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\"\n    [style.--day-index]=\"currentTimeDayIndex()\"\n  ></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div\n    class=\"c-bookings-grid__col\"\n    [class.c-bookings-grid__col--weekend]=\"day.isWeekend\"\n  >\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span\n          class=\"c-bookings-grid__day-number\"\n          [class.is-today]=\"day.isToday\"\n          >{{ day.dayNumber }}</span\n        >\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button\n        class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\"\n        disabled\n        [title]=\"disabledSlotLabel()\"\n      ></button>\n      } @else {\n      <button\n        class=\"c-bookings-grid__slot\"\n        [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"\n      ></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div\n        [class]=\"getEventClasses(event)\"\n        [attr.data-type]=\"event.type\"\n        [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\"\n        (mouseenter)=\"onEventHover($event, event)\"\n        (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\"\n      >\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div\n      class=\"c-bookings-grid__month-cell\"\n      [class.is-today]=\"day.isToday\"\n      [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \"\n      [class.is-disabled]=\"isDayDisabled(day.date)\"\n      (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\"\n    >\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div\n          class=\"c-bookings-grid__more-events\"\n          (click)=\"openDayPopover(day.date, $event)\"\n        >\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n          }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n          }}</span>\n        </div>\n        <button\n          class=\"c-bookings-grid__popover-close\"\n          (click)=\"closeDayPopover()\"\n        >\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div\n          class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\"\n          [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\"\n        >\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n          }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}\n", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}\n"] }]
+                    }, template: "@if (showHeader()) {\n<div class=\"c-bookings-header\">\n  <button class=\"c-bookings-header__today\" (click)=\"onTodayClick()\">\n    {{ todayLabel() }}\n  </button>\n\n  <div class=\"c-bookings-header__date\">\n    <button class=\"c-bookings-header__date-arrow icon-arrow-left\"\n      [title]=\"viewMode() === 'week' ? 'Semana anterior' : 'D\u00EDa anterior'\" (click)=\"onPrevious()\"></button>\n    <span>{{ formattedDate() }}</span>\n    <button class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      [title]=\"viewMode() === 'week' ? 'Semana siguiente' : 'D\u00EDa siguiente'\" (click)=\"onNext()\"></button>\n  </div>\n\n  <div class=\"c-bookings-header__view-toggle\">\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'day'\" (click)=\"setViewMode('day')\">\n      {{ dayLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'week'\" (click)=\"setViewMode('week')\">\n      {{ weekLabel() }}\n    </button>\n    <button class=\"c-bookings-header__view-btn\" [class.is-active]=\"viewMode() === 'month'\"\n      (click)=\"setViewMode('month')\">\n      {{ monthLabel() }}\n    </button>\n  </div>\n</div>\n} @if (viewMode() === 'day') {\n<!-- DAILY VIEW -->\n<div class=\"c-bookings-grid__wrapper\" [style.--cols]=\"columns().length\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (isToday() && currentTimePosition() !== null) {\n  <div class=\"c-bookings-grid__current-time-line\" [style.--time-position-rem]=\"currentTimePosition()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (column of columns(); track column.id) {\n  <div class=\"c-bookings-grid__col\">\n    <div class=\"c-bookings-grid__top\">\n      <p class=\"c-bookings-grid__title\">{{ column.name }}</p>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupied(column.id, slot) && !mergedConfig().emptySlotEventsDisabled) {\n      @if (isSlotDisabled(column.id, slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled [title]=\"disabledSlotLabel()\">\n        {{ disabledSlotLabel() }}\n      </button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\" (click)=\"onSlotClick(column.id, slot)\">\n        {{ emptySlotLabel() }}\n      </button>\n      }\n      } @if (shouldShowEvent(column.id, slot)) { @let event =\n      getEventForSlot(column.id, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onEventClick(event, column)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n        @if (event.subtitle) {\n        <p class=\"c-bookings-grid__text\">\n          {{ event.subtitle }}\n        </p>\n        }\n\n        @if (event.canCancel) {\n        <button class=\"c-bookings-grid__link c-link--underlined\"\n          (click)=\"$event.stopPropagation(); onCancelClick(event, column)\">\n          <span class=\"icon-cross-thin\"></span>\n          Cancelar\n        </button>\n        } @if (event.canApprove || event.canReject) {\n        <div class=\"c-bookings-grid__quick-actions\">\n          @if (event.canApprove) {\n          <button class=\"c-icon-btn--fill context:success icon-check\" title=\"Aprobar\"\n            [style.width.rem]=\"event.canApproveHeightRem\" [style.height.rem]=\"event.canApproveHeightRem\"\n            (click)=\"$event.stopPropagation(); onApproveClick(event, column)\"></button>\n          } @if (event.canReject) {\n          <button class=\"c-icon-btn--fill context:error icon-cross\" title=\"Rechazar\"\n            [style.width.rem]=\"event.canRejectHeightRem\" [style.height.rem]=\"event.canRejectHeightRem\"\n            (click)=\"$event.stopPropagation(); onRejectClick(event, column)\"></button>\n          }\n        </div>\n        }\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'week') {\n<!-- WEEKLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--weekly\" [style.--cols]=\"7\"\n  [style.--row-height-rem]=\"mergedConfig().rowHeightRem\" style=\"position: relative\">\n  @if (currentTimePosition() !== null && currentTimeDayIndex() >= 0) {\n  <div class=\"c-bookings-grid__current-time-line c-bookings-grid__current-time-line--weekly\"\n    [style.--time-position-rem]=\"currentTimePosition()\" [style.--day-index]=\"currentTimeDayIndex()\"></div>\n  } @if (showTimeColumn()) {\n  <div class=\"c-bookings-grid__times\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__title\">{{ timeColumnLabel() }}</div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (slot.displayTime) {\n      <span class=\"c-bookings-grid__time\">{{ slot.time }}</span>\n      }\n    </div>\n    }\n  </div>\n  } @for (day of weekDays(); track day.date.getTime()) {\n  <div class=\"c-bookings-grid__col\" [class.c-bookings-grid__col--weekend]=\"day.isWeekend\">\n    <div class=\"c-bookings-grid__top c-bookings-grid__top--weekly\">\n      <div class=\"c-bookings-grid__day-header\" [class.is-today]=\"day.isToday\">\n        <span class=\"c-bookings-grid__day-name\">{{ day.dayName }}</span>\n        <span class=\"c-bookings-grid__day-number\" [class.is-today]=\"day.isToday\">{{ day.dayNumber }}</span>\n      </div>\n    </div>\n\n    @for (slot of timeSlots(); track slot.time) {\n    <div class=\"c-bookings-grid__row\">\n      @if (!isSlotOccupiedForDay(day.date, slot)) { @if\n      (isSlotDisabledForDay(day.date, slot)) {\n      <button class=\"c-bookings-grid__slot c-bookings-grid__slot--disabled\" disabled\n        [title]=\"disabledSlotLabel()\"></button>\n      } @else {\n      <button class=\"c-bookings-grid__slot\" [title]=\"emptySlotLabel()\"\n        (click)=\"onWeekSlotClick(day.date, slot)\"></button>\n      } } @if (shouldShowEventForDay(day.date, slot)) { @let event =\n      getEventForDaySlot(day.date, slot); @if (event) {\n      <div [class]=\"getEventClasses(event)\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n        [style.--rows]=\"getEventRowSpan(event)\" (mouseenter)=\"onEventHover($event, event)\" (mouseleave)=\"onEventLeave()\"\n        (click)=\"onWeekEventClick(event, day.date)\">\n        <p class=\"c-bookings-grid__title\">\n          {{ event.subtitle || event.title }}\n        </p>\n        <p class=\"c-bookings-grid__text\">\n          {{ event.startTime }} - {{ event.endTime }}\n        </p>\n      </div>\n      } }\n    </div>\n    }\n  </div>\n  }\n</div>\n} @else if (viewMode() === 'month') {\n<!-- MONTHLY VIEW -->\n<div class=\"c-bookings-grid__wrapper c-bookings-grid__wrapper--monthly\">\n  <!-- Header Row -->\n  <div class=\"c-bookings-grid__header-row\">\n    @for (day of monthDays().slice(0, 7); track day.dayName) {\n    <div class=\"c-bookings-grid__header-cell\">\n      {{ day.dayName }}\n    </div>\n    }\n  </div>\n\n  <!-- Days Grid -->\n  <div class=\"c-bookings-grid__month-grid\">\n    @for (day of monthDays(); track day.date.getTime()) {\n    <div class=\"c-bookings-grid__month-cell\" [class.is-today]=\"day.isToday\" [class.is-weekend]=\"day.isWeekend\"\n      [class.is-other-month]=\"\n        day.date.getUTCMonth() !== selectedDate().getUTCMonth()\n      \" [class.is-disabled]=\"isDayDisabled(day.date)\" (click)=\"!isDayDisabled(day.date) && onMonthDayClick(day.date)\">\n      <div class=\"c-bookings-grid__month-day-number\">\n        {{ day.dayNumber }}\n      </div>\n\n      <div class=\"c-bookings-grid__month-events\">\n        @let dayEvents = getEventsForDay(day.date); @for (event of\n        dayEvents.slice(0, 3); track event.id) {\n        <div class=\"c-bookings-grid__month-event\" [attr.data-type]=\"event.type\" [attr.data-status]=\"event.status\"\n          [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"$event.stopPropagation(); onMonthEventClick(event, day.date)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        } @if (dayEvents.length > 3) {\n        <div class=\"c-bookings-grid__more-events\" (click)=\"openDayPopover(day.date, $event)\">\n          {{ dayEvents.length - 3 }} m\u00E1s\n        </div>\n        }\n      </div>\n    </div>\n    }\n  </div>\n\n  @if (expandedDay()) {\n  <div class=\"c-bookings-grid__popover-overlay\" (click)=\"closeDayPopover()\">\n    <div class=\"c-bookings-grid__popover\" (click)=\"$event.stopPropagation()\">\n      <div class=\"c-bookings-grid__popover-header\">\n        <div class=\"c-bookings-grid__popover-date\">\n          <span class=\"c-bookings-grid__popover-weekday\">{{\n            expandedDay() | date : \"EEE\" : \"UTC\" : locale() | uppercase\n            }}</span>\n          <span class=\"c-bookings-grid__popover-daynum\">{{\n            expandedDay() | date : \"d\" : \"UTC\"\n            }}</span>\n        </div>\n        <button class=\"c-bookings-grid__popover-close\" (click)=\"closeDayPopover()\">\n          <span class=\"icon-cross\"></span>\n        </button>\n      </div>\n      <div class=\"c-bookings-grid__popover-content\">\n        @for (event of getExpandedDayEvents(); track event.id) {\n        <div class=\"c-bookings-grid__month-event c-bookings-grid__month-event--popover\" [attr.data-type]=\"event.type\"\n          [attr.data-status]=\"event.status\" [style.background-color]=\"event.metadata?.['color']\"\n          [style.border-left]=\"event.metadata?.['color'] ? '3px solid ' + event.metadata?.['color'] : ''\"\n          (click)=\"onMonthEventClick(event, expandedDay()!)\">\n          <span class=\"c-bookings-grid__month-event-title\">{{\n            event.title\n            }}</span>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n  }\n</div>\n}", styles: [":host{display:block;width:100%;overflow:visible}.c-bookings-grid__month-cell.is-disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.7}.c-bookings-grid__month-cell.is-disabled:hover{background-color:#f3f4f6}.c-bookings-grid__month-cell.is-disabled .c-bookings-grid__month-day-number{color:#9ca3af}.c-bookings-grid__slot--disabled{background-color:#f3f4f6;cursor:not-allowed}.c-bookings-grid__slot--disabled:hover{background-color:#f3f4f6}.c-bookings-grid__row{height:calc(var(--row-height-rem, 4) * 1rem)}\n"] }]
         }] });
 
 class CacheBustingInterceptor {