@solcre-org/core-ui 2.20.13 → 2.20.15

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

@@ -11104,10 +11104,28 @@ class FilterModalComponent {
     }
     initializeForm() {
         const formGroup = {};
+        const initialFilterValues = new Map();
         this.filters().forEach(filter => {
-            formGroup[filter.key.toString()] = [''];
+            const modeConfig = filter.modes?.[ModalMode.FILTER];
+            const defaultValue = modeConfig?.defaultValue ?? filter.defaultValue;
+            let initialValue = '';
+            if (defaultValue !== undefined) {
+                if (typeof defaultValue === 'function') {
+                    initialValue = defaultValue();
+                }
+                else {
+                    initialValue = defaultValue;
+                }
+                if (initialValue !== '' && initialValue !== null && initialValue !== undefined) {
+                    initialFilterValues.set(filter.key.toString(), initialValue);
+                }
+            }
+            formGroup[filter.key.toString()] = [initialValue];
         });
         this.form.set(this.formBuilder.group(formGroup));
+        if (initialFilterValues.size > 0 && this.filterValues().size === 0) {
+            this.filterValues.set(initialFilterValues);
+        }
     }
     resetValues() {
         this.filterValues.set(new Map());
@@ -13671,6 +13689,7 @@ class GenericTableComponent {
         this.subscriptions.push(this.tableSortService.sortConfigs$.subscribe(() => {
             this.handleSortChange();
         }));
+        this.initializeDefaultFilterValues();
         this.currentFilterValues.set(new Map(this.filterService.getCustomFilters()));
         this.loaderService.showLoader(this.MAIN_DATA_LOADER_ID);
         this.startLoaderTimeout(this.MAIN_DATA_LOADER_ID);
@@ -14991,6 +15010,32 @@ class GenericTableComponent {
             }
         }
     }
+    initializeDefaultFilterValues() {
+        const existingFilters = this.filterService.getCustomFilters();
+        if (existingFilters.size > 0) {
+            return;
+        }
+        const initialFilterValues = new Map();
+        this.customFilters().forEach(filter => {
+            const modeConfig = filter.modes?.[ModalMode.FILTER];
+            const defaultValue = modeConfig?.defaultValue ?? filter.defaultValue;
+            if (defaultValue !== undefined) {
+                let value;
+                if (typeof defaultValue === 'function') {
+                    value = defaultValue();
+                }
+                else {
+                    value = defaultValue;
+                }
+                if (value !== '' && value !== null && value !== undefined) {
+                    initialFilterValues.set(filter.key.toString(), value);
+                }
+            }
+        });
+        if (initialFilterValues.size > 0) {
+            this.filterService.setCustomFiltersSilent(initialFilterValues);
+        }
+    }
     reloadDataWithCurrentParams() {
         if (!this.endpoint() || !this.modelFactory()) {
             return;
@@ -17206,11 +17251,11 @@ 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.13',
+    full: '2.20.15',
     major: 2,
     minor: 20,
-    patch: 13,
-    timestamp: '2026-02-06T12:08:17.601Z',
+    patch: 15,
+    timestamp: '2026-02-06T18:27:14.219Z',
     buildDate: '6/2/2026'
 };
 
@@ -22315,7 +22360,7 @@ class GenericSchedulerComponent {
         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", 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)) { @if (isSlotDisabled(column.id,\n      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      } } @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.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 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" }] });
+    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,
@@ -22323,7 +22368,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 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)) { @if (isSlotDisabled(column.id,\n      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      } } @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.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 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"] }]
+                    }, 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 {