@solcre-org/core-ui 2.16.4 → 2.17.1

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

@@ -578,6 +578,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             args: [{ selector: 'core-checkbox-field', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<!-- Clase para layout inline cuando hay m\u00FAltiples opciones -->\n<div class=\"c-entry-toggle-holder\" [class.hasSeparatedOptions]=\"hasSeparatedOptions()\" [class.multiple-inline]=\"hasMultipleOptions()\">\n\n    <span class=\"c-entry-text\"\n        *ngIf=\"field().label\">\n        {{ field().label | translate }}\n        @if (hasRequiredIndicator()) {\n            <span class=\"c-required\">*</span>\n        }\n    </span>\n    \n    @if (hasMultipleOptions()) {\n        @for (option of options(); track option.value) {\n\n            <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n            <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n            <label class=\"c-entry-toggle\"\n                [class.is-invalid]=\"hasError()\"\n                [class.is-disabled]=\"isDisabled()\"\n                [class.cannot-deselect]=\"cannotDeselect(option)\">\n\n                <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n                @if (!allowMultiple() && isRequired()) {\n                    <!-- Cuando allowMultiple: false y required: true, usar radio buttons para todas las opciones -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else if (cannotDeselect(option)) {\n                    <!-- Usar radio cuando no se puede deseleccionar (modo m\u00FAltiple con una sola opci\u00F3n) -->\n                    <input\n                        type=\"radio\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                } @else {\n                    <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                    <input\n                        type=\"checkbox\"\n                        [attr.id]=\"field().key.toString() + '_' + option.value\"\n                        [attr.name]=\"allowMultiple() ? field().key.toString() + '[]' : field().key.toString()\"\n                        [checked]=\"isOptionSelected(option)\"\n                        (change)=\"handleOptionChange(option, $event)\"\n                        (blur)=\"onBlurInput()\"\n                    />\n                }\n                <span class=\"c-entry-toggle__toggle\"></span>\n\n                <span class=\"c-entry-toggle__text\">\n                    {{ option.label | translate }}\n                    @if(option.externalLink) {\n                        <!-- Link externo funcional implementado -->\n                        <a class=\"icon-external-link-thin\" [href]=\"option.externalLink\" target=\"_blank\"></a>\n                    }\n                </span>\n                @if(option.detail) {\n                    <!-- Texto de detalle funcional implementado -->\n                    <span class=\"c-form-checkbox__detail\">{{ option.detail }}</span>\n                }\n            </label>\n\n        }\n    } @else {\n        <!-- ! Solcre: Este .c-entry-toggle deber\u00EDa ser un componente en s\u00ED mismo. -->\n        <!-- ! Solcre: El cannot-deselect no est\u00E1 over-engineered. Deber\u00EDa ser un Radio. -->\n        <label class=\"c-entry-toggle\"\n            [class.is-invalid]=\"hasError()\"\n            [class.is-disabled]=\"isDisabled()\"\n            [class.cannot-deselect]=\"isRequired() && !!formControl().value\">\n\n            <!-- onBlurInput() maneja validaciones y marca el campo como touched para mostrar errores -->\n            @if (isRequired() && !!formControl().value) {\n                <!-- Usar radio cuando es requerido y tiene valor (cannot-deselect) -->\n                <input\n                    type=\"radio\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [checked]=\"!!formControl().value\"\n                    (change)=\"onRadioChange($event)\"\n                    (blur)=\"onBlurInput()\"\n                />\n            } @else {\n                <!-- Usar checkbox normal cuando se puede deseleccionar -->\n                <input\n                    type=\"checkbox\"\n                    [attr.id]=\"field().key.toString()\"\n                    [attr.name]=\"field().key.toString()\"\n                    [formControl]=\"formControl()\"\n                    (blur)=\"onBlurInput()\"\n                />\n            }\n            <span class=\"c-entry-toggle__toggle\"></span>\n            <span class=\"c-entry-toggle__text\">\n                {{ field().label | translate }}\n                @if (hasRequiredIndicator()) {\n                    <span class=\"c-required\">*</span>\n                }\n                @if(externalLink()) {\n                    <!-- Link externo funcional implementado -->\n                    <a class=\"icon-external-link-thin\" [href]=\"externalLink()\" target=\"_blank\"></a>\n                }\n            </span>\n            @if(detail()) {\n                <!-- Texto de detalle funcional implementado -->\n                <span class=\"c-form-checkbox__detail\">{{ detail() }}</span>\n            }\n        </label>\n    }\n\n    <core-field-errors [errors]=\"errors()\" />\n</div>                                  \n                                  ", styles: [".cannot-deselect{pointer-events:none;cursor:not-allowed}.c-entry-text+.c-entry-toggle-holder.hasSeparatedOptions{margin-top:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--_entry-group-gap) * .8)}.c-entry-toggle-holder.hasSeparatedOptions .c-entry-text{grid-column:span 2;margin-top:1em}\n"] }]
         }], ctorParameters: () => [] });
 
+const DEFAULT_COLORS = [
+    '#4285f4', '#ea4335', '#34a853', '#fbbc04',
+    '#9c27b0', '#00bcd4', '#ff5722', '#795548',
+    '#607d8b', '#e91e63', '#3f51b5', '#009688',
+    '#ff9800', '#673ab7', '#2196f3', '#4caf50'
+];
+class ColorPickerFieldComponent extends BaseFieldComponent {
+    isPickerOpen = signal(false);
+    presetColors = signal(DEFAULT_COLORS);
+    constructor() {
+        super();
+        effect(() => {
+            const shouldDisable = this.mode() === ModalMode.VIEW || this.evaluateReadonly();
+            const control = this.formControl();
+            if (shouldDisable && control.enabled) {
+                control.disable();
+            }
+            else if (!shouldDisable && control.disabled) {
+                control.enable();
+            }
+        });
+        effect(() => {
+            const fieldConfig = this.field();
+            if (fieldConfig.presetColors && Array.isArray(fieldConfig.presetColors)) {
+                this.presetColors.set(fieldConfig.presetColors);
+            }
+        });
+    }
+    isDisabled() {
+        return this.mode() === ModalMode.VIEW || this.evaluateReadonly();
+    }
+    togglePicker() {
+        if (!this.isDisabled()) {
+            this.isPickerOpen.update(open => !open);
+        }
+    }
+    closePicker() {
+        this.isPickerOpen.set(false);
+    }
+    selectColor(color) {
+        if (!this.isDisabled()) {
+            this.formControl().setValue(color);
+            this.valueChange.emit(color);
+            this.closePicker();
+        }
+    }
+    onColorInputChange(event) {
+        const input = event.target;
+        const color = input.value;
+        this.formControl().setValue(color);
+        this.valueChange.emit(color);
+    }
+    onTextInputChange(event) {
+        const input = event.target;
+        let color = input.value;
+        if (color && !color.startsWith('#')) {
+            color = '#' + color;
+        }
+        if (this.isValidHexColor(color)) {
+            this.formControl().setValue(color);
+            this.valueChange.emit(color);
+        }
+    }
+    isValidHexColor(color) {
+        return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+    }
+    getCurrentColor() {
+        const value = this.formControl().value;
+        return value && this.isValidHexColor(value) ? value : '#4783E1';
+    }
+    onBlurInput(event) {
+        setTimeout(() => {
+            if (!this.isPickerOpen()) {
+                this.onBlur(event);
+            }
+        }, 200);
+    }
+    handleEnterKey(event) {
+        const keyboardEvent = event;
+        this.onEnterInput(keyboardEvent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ColorPickerFieldComponent, isStandalone: true, selector: "core-color-picker-field", usesInheritance: true, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </span>\n\n  <div class=\"c-entry-input c-entry-input--color\"\n       [class.is-readonly]=\"isReadonly()\"\n       [class.is-disabled]=\"isDisabled()\">\n    <div class=\"c-color-picker\">\n      <div class=\"c-color-picker__preview-wrapper\">\n        <div \n          class=\"c-color-picker__preview\"\n          [style.background-color]=\"getCurrentColor()\"\n          (click)=\"togglePicker()\"\n          [class.c-color-picker__preview--disabled]=\"isDisabled()\">\n        </div>\n        \n        <input\n          type=\"text\"\n          class=\"c-color-picker__text-input\"\n          [id]=\"field().key\"\n          [formControl]=\"formControl()\"\n          [placeholder]=\"(field().placeholder ?? '#4783E1') | translate\"\n          [class.c-color-picker__text-input--disabled]=\"isDisabled()\"\n          [class.c-color-picker__text-input--error]=\"hasError()\"\n          (input)=\"onTextInputChange($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.enter)=\"handleEnterKey($event)\"\n          maxlength=\"7\"\n        />\n        \n        <input\n          type=\"color\"\n          class=\"c-color-picker__native-input\"\n          [value]=\"getCurrentColor()\"\n          [disabled]=\"isDisabled()\"\n          (input)=\"onColorInputChange($event)\"\n        />\n      </div>\n\n      @if (isPickerOpen()) {\n        <div class=\"c-color-picker__dropdown\">\n          <div class=\"c-color-picker__preset-colors\">\n            @for (color of presetColors(); track color) {\n              <button\n                type=\"button\"\n                class=\"c-color-picker__preset-color\"\n                [style.background-color]=\"color\"\n                [class.c-color-picker__preset-color--selected]=\"getCurrentColor() === color\"\n                (click)=\"selectColor(color)\"\n                [title]=\"color\">\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n", styles: [".c-color-picker{position:relative;width:100%}.c-color-picker__preview-wrapper{display:flex;align-items:center;gap:8px}.c-color-picker__preview{width:36px;height:36px;border-radius:6px;border:2px solid var(--color-border, #e0e0e0);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;flex-shrink:0}.c-color-picker__preview:hover:not(.c-color-picker__preview--disabled){border-color:var(--color-primary, #4783E1);box-shadow:0 0 0 2px #4783e133}.c-color-picker__preview--disabled{cursor:not-allowed;opacity:.6}.c-color-picker__text-input{flex:1;height:36px;padding:0 12px;font-size:14px;font-family:monospace;text-transform:uppercase;border:1px solid var(--color-border, #e0e0e0);border-radius:6px;background-color:var(--color-background, #fff);transition:border-color .2s ease,box-shadow .2s ease}.c-color-picker__text-input:focus{outline:none;border-color:var(--color-primary, #4783E1);box-shadow:0 0 0 2px #4783e133}.c-color-picker__text-input--disabled{background-color:var(--color-disabled-bg, #f5f5f5);cursor:not-allowed;opacity:.6}.c-color-picker__text-input--error{border-color:var(--color-danger, #dc3545)}.c-color-picker__text-input--error:focus{box-shadow:0 0 0 2px #dc354533}.c-color-picker__native-input{width:36px;height:36px;padding:0;border:none;border-radius:6px;cursor:pointer;flex-shrink:0}.c-color-picker__native-input::-webkit-color-swatch-wrapper{padding:0}.c-color-picker__native-input::-webkit-color-swatch{border:2px solid var(--color-border, #e0e0e0);border-radius:6px}.c-color-picker__native-input:disabled{cursor:not-allowed;opacity:.6}.c-color-picker__dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;background-color:var(--color-background, #fff);border:1px solid var(--color-border, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:12px;min-width:200px}.c-color-picker__preset-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.c-color-picker__preset-color{width:32px;height:32px;border:2px solid transparent;border-radius:6px;cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease}.c-color-picker__preset-color:hover{transform:scale(1.1)}.c-color-picker__preset-color--selected{border-color:var(--color-text, #333);box-shadow:0 0 0 2px var(--color-background, #fff),0 0 0 4px var(--color-primary, #4783E1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ColorPickerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'core-color-picker-field', standalone: true, imports: [CommonModule, FormsModule, TranslateModule, ReactiveFormsModule, FieldErrorsComponent], hostDirectives: [CoreHostDirective], template: "<label class=\"c-entry-item\" [class.c-entry-item--inline]=\"field().inline\">\n  <span class=\"c-entry-text\" *ngIf=\"field().label\">\n    {{ field().label | translate }}\n    @if (hasRequiredValidators()) {\n      <span class=\"c-required\">*</span>\n    }\n  </span>\n\n  <div class=\"c-entry-input c-entry-input--color\"\n       [class.is-readonly]=\"isReadonly()\"\n       [class.is-disabled]=\"isDisabled()\">\n    <div class=\"c-color-picker\">\n      <div class=\"c-color-picker__preview-wrapper\">\n        <div \n          class=\"c-color-picker__preview\"\n          [style.background-color]=\"getCurrentColor()\"\n          (click)=\"togglePicker()\"\n          [class.c-color-picker__preview--disabled]=\"isDisabled()\">\n        </div>\n        \n        <input\n          type=\"text\"\n          class=\"c-color-picker__text-input\"\n          [id]=\"field().key\"\n          [formControl]=\"formControl()\"\n          [placeholder]=\"(field().placeholder ?? '#4783E1') | translate\"\n          [class.c-color-picker__text-input--disabled]=\"isDisabled()\"\n          [class.c-color-picker__text-input--error]=\"hasError()\"\n          (input)=\"onTextInputChange($event)\"\n          (blur)=\"onBlurInput($event)\"\n          (keydown.enter)=\"handleEnterKey($event)\"\n          maxlength=\"7\"\n        />\n        \n        <input\n          type=\"color\"\n          class=\"c-color-picker__native-input\"\n          [value]=\"getCurrentColor()\"\n          [disabled]=\"isDisabled()\"\n          (input)=\"onColorInputChange($event)\"\n        />\n      </div>\n\n      @if (isPickerOpen()) {\n        <div class=\"c-color-picker__dropdown\">\n          <div class=\"c-color-picker__preset-colors\">\n            @for (color of presetColors(); track color) {\n              <button\n                type=\"button\"\n                class=\"c-color-picker__preset-color\"\n                [style.background-color]=\"color\"\n                [class.c-color-picker__preset-color--selected]=\"getCurrentColor() === color\"\n                (click)=\"selectColor(color)\"\n                [title]=\"color\">\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <core-field-errors [errors]=\"errors()\"></core-field-errors>\n</label>\n", styles: [".c-color-picker{position:relative;width:100%}.c-color-picker__preview-wrapper{display:flex;align-items:center;gap:8px}.c-color-picker__preview{width:36px;height:36px;border-radius:6px;border:2px solid var(--color-border, #e0e0e0);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease;flex-shrink:0}.c-color-picker__preview:hover:not(.c-color-picker__preview--disabled){border-color:var(--color-primary, #4783E1);box-shadow:0 0 0 2px #4783e133}.c-color-picker__preview--disabled{cursor:not-allowed;opacity:.6}.c-color-picker__text-input{flex:1;height:36px;padding:0 12px;font-size:14px;font-family:monospace;text-transform:uppercase;border:1px solid var(--color-border, #e0e0e0);border-radius:6px;background-color:var(--color-background, #fff);transition:border-color .2s ease,box-shadow .2s ease}.c-color-picker__text-input:focus{outline:none;border-color:var(--color-primary, #4783E1);box-shadow:0 0 0 2px #4783e133}.c-color-picker__text-input--disabled{background-color:var(--color-disabled-bg, #f5f5f5);cursor:not-allowed;opacity:.6}.c-color-picker__text-input--error{border-color:var(--color-danger, #dc3545)}.c-color-picker__text-input--error:focus{box-shadow:0 0 0 2px #dc354533}.c-color-picker__native-input{width:36px;height:36px;padding:0;border:none;border-radius:6px;cursor:pointer;flex-shrink:0}.c-color-picker__native-input::-webkit-color-swatch-wrapper{padding:0}.c-color-picker__native-input::-webkit-color-swatch{border:2px solid var(--color-border, #e0e0e0);border-radius:6px}.c-color-picker__native-input:disabled{cursor:not-allowed;opacity:.6}.c-color-picker__dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;background-color:var(--color-background, #fff);border:1px solid var(--color-border, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:12px;min-width:200px}.c-color-picker__preset-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.c-color-picker__preset-color{width:32px;height:32px;border:2px solid transparent;border-radius:6px;cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease}.c-color-picker__preset-color:hover{transform:scale(1.1)}.c-color-picker__preset-color--selected{border-color:var(--color-text, #333);box-shadow:0 0 0 2px var(--color-background, #fff),0 0 0 4px var(--color-primary, #4783E1)}\n"] }]
+        }], ctorParameters: () => [] });
+
 class DateFieldComponent extends BaseFieldComponent {
     elementRef;
     isPickerOpen = false;
@@ -766,8 +855,8 @@ class DatetimeFieldComponent {
     ModalMode = ModalMode;
     TimeInterval = TimeInterval;
     selectedDate = signal(null);
-    selectedHour = signal(0);
-    selectedMinute = signal(0);
+    selectedHour = signal(null);
+    selectedMinute = signal(null);
     hasHourValue = signal(false);
     hasMinuteValue = signal(false);
     hours = Array.from({ length: 24 }, (_, i) => i);
@@ -922,24 +1011,33 @@ class DatetimeFieldComponent {
             this.selectedMinute.set(roundedMinute);
         }
         else {
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            this.selectedDate.set(today);
-            this.selectedHour.set(0);
-            this.selectedMinute.set(0);
+            this.selectedDate.set(null);
+            this.selectedHour.set(null);
+            this.selectedMinute.set(null);
         }
     }
     onDateChange(event) {
         const input = event.target;
         const newDate = input.value ? new Date(input.value + 'T00:00:00') : null;
         if (newDate && !isNaN(newDate.getTime())) {
-            newDate.setHours(this.selectedHour());
-            newDate.setMinutes(this.selectedMinute());
+            // If hour/minute not set, default to 0
+            const currentHour = this.selectedHour() ?? 0;
+            const currentMinute = this.selectedMinute() ?? 0;
+            this.selectedHour.set(currentHour);
+            this.selectedMinute.set(currentMinute);
+            newDate.setHours(currentHour);
+            newDate.setMinutes(currentMinute);
             newDate.setSeconds(0);
             newDate.setMilliseconds(0);
             this.selectedDate.set(newDate);
             this.emitValue();
         }
+        else {
+            //If date is cleared, clear everything? Or just date?
+            //Usually if date input is cleared, value is null.
+            this.selectedDate.set(null);
+            this.emitValue();
+        }
     }
     onHourChange(value) {
         this.selectedHour.set(value);
@@ -951,13 +1049,15 @@ class DatetimeFieldComponent {
     }
     emitValue() {
         const date = this.selectedDate();
+        // If no date selected, value is null regardless of time
         if (!date || isNaN(date.getTime())) {
             this.valueChange.emit(null);
             return;
         }
         const newDate = new Date(date.getTime());
-        newDate.setHours(this.selectedHour());
-        newDate.setMinutes(this.selectedMinute());
+        // Use 0 if time not selected yet but date is present
+        newDate.setHours(this.selectedHour() ?? 0);
+        newDate.setMinutes(this.selectedMinute() ?? 0);
         newDate.setSeconds(0);
         newDate.setMilliseconds(0);
         this.valueChange.emit(newDate);
@@ -2398,6 +2498,7 @@ var FieldType;
     FieldType["FILE"] = "file";
     FieldType["PHONE"] = "phone";
     FieldType["DOCUMENT"] = "document";
+    FieldType["COLOR"] = "color";
 })(FieldType || (FieldType = {}));
 var NumberFieldType;
 (function (NumberFieldType) {
@@ -4958,6 +5059,7 @@ class DynamicFieldDirective {
         document: DocumentFieldComponent,
         file: FileFieldComponent,
         phone: PhoneFieldComponent,
+        color: ColorPickerFieldComponent,
     };
     ngOnChanges(changes) {
         if (changes['field']?.firstChange || this.shouldReloadComponent(changes)) {
@@ -16545,12 +16647,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.16.4',
+    full: '2.17.1',
     major: 2,
-    minor: 16,
-    patch: 4,
-    timestamp: '2025-12-10T15:53:05.110Z',
-    buildDate: '10/12/2025'
+    minor: 17,
+    patch: 1,
+    timestamp: '2025-12-16T13:58:16.774Z',
+    buildDate: '16/12/2025'
 };
 
 class MainNavComponent {
@@ -21145,7 +21247,8 @@ const DEFAULT_SCHEDULER_CONFIG = {
     slotDuration: 30,
     rowHeightRem: 4,
     showCurrentTimeLine: true,
-    locale: 'es-ES'
+    locale: 'es-ES',
+    viewMode: 'day'
 };
 
 class GenericSchedulerComponent {
@@ -21160,6 +21263,10 @@ class GenericSchedulerComponent {
     disabledSlotLabel = input('No disponible');
     todayLabel = input('Hoy');
     locale = input('es-ES');
+    weekLabel = input('Semana');
+    dayLabel = input('Día');
+    monthLabel = input('Mes');
+    disabledDates = input([]);
     slotClick = output();
     eventClick = output();
     eventHover = output();
@@ -21167,10 +21274,70 @@ class GenericSchedulerComponent {
     todayClick = output();
     previousDay = output();
     nextDay = output();
+    previousWeek = output();
+    nextWeek = output();
+    previousMonth = output();
+    nextMonth = output();
+    viewModeChange = output();
     timeSlots = signal([]);
     currentTime = signal(new Date());
+    expandedDay = signal(null);
     timeUpdateInterval = null;
     mergedConfig = computed(() => ({ ...DEFAULT_SCHEDULER_CONFIG, ...this.config() }));
+    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 dayOfWeek = selected.getUTCDay();
+        const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+        const monday = new Date(Date.UTC(selected.getUTCFullYear(), selected.getUTCMonth(), selected.getUTCDate() + mondayOffset));
+        const days = [];
+        for (let i = 0; i < 7; i++) {
+            const date = new Date(Date.UTC(monday.getUTCFullYear(), monday.getUTCMonth(), monday.getUTCDate() + i));
+            const isToday = date.getUTCFullYear() === today.getUTCFullYear() &&
+                date.getUTCMonth() === today.getUTCMonth() &&
+                date.getUTCDate() === today.getUTCDate();
+            days.push({
+                date,
+                dayNumber: date.getUTCDate(),
+                dayName: date.toLocaleDateString(localeValue, { weekday: 'short', timeZone: 'UTC' }),
+                isToday,
+                isWeekend: i >= 5
+            });
+        }
+        return days;
+    });
+    monthDays = computed(() => {
+        if (this.viewMode() !== 'month')
+            return [];
+        const selected = this.selectedDate();
+        const localeValue = this.locale();
+        const today = new Date();
+        const year = selected.getUTCFullYear();
+        const month = selected.getUTCMonth();
+        const firstDayOfMonth = new Date(Date.UTC(year, month, 1));
+        const dayOfWeek = firstDayOfMonth.getUTCDay();
+        const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+        const startDate = new Date(Date.UTC(year, month, 1 + mondayOffset));
+        const days = [];
+        for (let i = 0; i < 42; i++) {
+            const date = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate() + i));
+            const isToday = date.getUTCFullYear() === today.getUTCFullYear() &&
+                date.getUTCMonth() === today.getUTCMonth() &&
+                date.getUTCDate() === today.getUTCDate();
+            days.push({
+                date,
+                dayNumber: date.getUTCDate(),
+                dayName: date.toLocaleDateString(localeValue, { weekday: 'short', timeZone: 'UTC' }),
+                isToday,
+                isWeekend: [0, 6].includes(date.getUTCDay())
+            });
+        }
+        return days;
+    });
     isToday = computed(() => {
         const selected = this.selectedDate();
         const today = new Date();
@@ -21181,6 +21348,32 @@ class GenericSchedulerComponent {
     formattedDate = computed(() => {
         const date = this.selectedDate();
         const localeValue = this.locale();
+        if (this.viewMode() === 'week') {
+            const days = this.weekDays();
+            if (days.length > 0) {
+                const firstDay = days[0].date;
+                const lastDay = days[6].date;
+                const firstFormatted = firstDay.toLocaleDateString(localeValue, {
+                    day: 'numeric',
+                    month: 'short',
+                    timeZone: 'UTC'
+                });
+                const lastFormatted = lastDay.toLocaleDateString(localeValue, {
+                    day: 'numeric',
+                    month: 'short',
+                    year: 'numeric',
+                    timeZone: 'UTC'
+                });
+                return `${firstFormatted} - ${lastFormatted}`;
+            }
+        }
+        if (this.viewMode() === 'month') {
+            return date.toLocaleDateString(localeValue, {
+                month: 'long',
+                year: 'numeric',
+                timeZone: 'UTC'
+            });
+        }
         return date.toLocaleDateString(localeValue, {
             weekday: 'long',
             year: 'numeric',
@@ -21190,8 +21383,17 @@ class GenericSchedulerComponent {
         });
     });
     currentTimePosition = computed(() => {
-        if (!this.isToday() || !this.mergedConfig().showCurrentTimeLine)
+        if (!this.mergedConfig().showCurrentTimeLine)
             return null;
+        if (this.viewMode() === 'week') {
+            const days = this.weekDays();
+            const todayIndex = days.findIndex(d => d.isToday);
+            if (todayIndex === -1)
+                return null;
+        }
+        else if (!this.isToday()) {
+            return null;
+        }
         const now = this.currentTime();
         const hours = now.getUTCHours();
         const minutes = now.getUTCMinutes();
@@ -21204,6 +21406,12 @@ class GenericSchedulerComponent {
         const positionInRem = slotsFromStart * cfg.rowHeightRem;
         return positionInRem;
     });
+    currentTimeDayIndex = computed(() => {
+        if (this.viewMode() !== 'week')
+            return -1;
+        const days = this.weekDays();
+        return days.findIndex(d => d.isToday);
+    });
     eventMap = computed(() => {
         const map = new Map();
         const evts = this.events();
@@ -21284,6 +21492,10 @@ class GenericSchedulerComponent {
     isSlotDisabled(columnId, slot) {
         const now = new Date();
         const selected = this.selectedDate();
+        const dateStr = selected.toISOString().split('T')[0];
+        if (this.disabledDates().includes(dateStr)) {
+            return true;
+        }
         const todayUTC = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
         const selectedUTC = Date.UTC(selected.getUTCFullYear(), selected.getUTCMonth(), selected.getUTCDate());
         if (selectedUTC < todayUTC) {
@@ -21339,15 +21551,170 @@ class GenericSchedulerComponent {
         const nextDayDate = new Date(Date.UTC(current.getUTCFullYear(), current.getUTCMonth(), current.getUTCDate() + 1));
         this.nextDay.emit(nextDayDate);
     }
+    onPreviousWeek() {
+        const current = this.selectedDate();
+        const prevWeek = new Date(Date.UTC(current.getUTCFullYear(), current.getUTCMonth(), current.getUTCDate() - 7));
+        this.previousWeek.emit(prevWeek);
+    }
+    onNextWeek() {
+        const current = this.selectedDate();
+        const nextWeekDate = new Date(Date.UTC(current.getUTCFullYear(), current.getUTCMonth(), current.getUTCDate() + 7));
+        this.nextWeek.emit(nextWeekDate);
+    }
+    onPreviousMonth() {
+        const current = this.selectedDate();
+        const prevMonth = new Date(Date.UTC(current.getUTCFullYear(), current.getUTCMonth() - 1, 1));
+        this.previousMonth.emit(prevMonth);
+    }
+    onNextMonth() {
+        const current = this.selectedDate();
+        const nextMonth = new Date(Date.UTC(current.getUTCFullYear(), current.getUTCMonth() + 1, 1));
+        this.nextMonth.emit(nextMonth);
+    }
+    onPrevious() {
+        if (this.viewMode() === 'week') {
+            this.onPreviousWeek();
+        }
+        else if (this.viewMode() === 'month') {
+            this.onPreviousMonth();
+        }
+        else {
+            this.onPreviousDay();
+        }
+    }
+    onNext() {
+        if (this.viewMode() === 'week') {
+            this.onNextWeek();
+        }
+        else if (this.viewMode() === 'month') {
+            this.onNextMonth();
+        }
+        else {
+            this.onNextDay();
+        }
+    }
+    toggleViewMode() {
+        const newMode = this.viewMode() === 'day' ? 'week' : 'day';
+        this.viewModeChange.emit(newMode);
+    }
+    setViewMode(mode) {
+        this.viewModeChange.emit(mode);
+    }
+    getEventsForDay(dayDate) {
+        const evts = this.events();
+        return evts.filter(event => {
+            if (!event.date)
+                return false;
+            const eventDate = new Date(event.date);
+            return eventDate.getUTCFullYear() === dayDate.getUTCFullYear() &&
+                eventDate.getUTCMonth() === dayDate.getUTCMonth() &&
+                eventDate.getUTCDate() === dayDate.getUTCDate();
+        });
+    }
+    isSlotOccupiedForDay(dayDate, slot) {
+        const evts = this.getEventsForDay(dayDate);
+        return evts.some(event => this.isTimeInEvent(slot.time, event));
+    }
+    shouldShowEventForDay(dayDate, slot) {
+        const evts = this.getEventsForDay(dayDate);
+        return evts.some(event => event.startTime === slot.time);
+    }
+    getEventForDaySlot(dayDate, slot) {
+        const evts = this.getEventsForDay(dayDate);
+        return evts.find(event => event.startTime === slot.time);
+    }
+    isDayDisabled(dayDate) {
+        const dateStr = dayDate.toISOString().split('T')[0];
+        return this.disabledDates().includes(dateStr);
+    }
+    isSlotDisabledForDay(dayDate, slot) {
+        if (this.isDayDisabled(dayDate)) {
+            return true;
+        }
+        const now = new Date();
+        const todayUTC = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
+        const dayUTC = Date.UTC(dayDate.getUTCFullYear(), dayDate.getUTCMonth(), dayDate.getUTCDate());
+        if (dayUTC < todayUTC) {
+            return true;
+        }
+        if (dayUTC === todayUTC) {
+            const [slotHour, slotMin] = slot.time.split(':').map(Number);
+            const slotMinutes = slotHour * 60 + slotMin;
+            const currentMinutes = now.getUTCHours() * 60 + now.getUTCMinutes();
+            return slotMinutes < currentMinutes;
+        }
+        return false;
+    }
+    onWeekSlotClick(dayDate, slot) {
+        if (this.isSlotOccupiedForDay(dayDate, slot) || this.isSlotDisabledForDay(dayDate, slot)) {
+            return;
+        }
+        this.slotClick.emit({
+            columnId: dayDate.toISOString(),
+            slot,
+            date: dayDate
+        });
+    }
+    onWeekEventClick(event, dayDate) {
+        const pseudoColumn = {
+            id: dayDate.toISOString(),
+            name: dayDate.toLocaleDateString(this.locale(), { weekday: 'long', timeZone: 'UTC' })
+        };
+        this.eventClick.emit({ event, column: pseudoColumn });
+    }
+    onMonthDayClick(dayDate) {
+        const dummySlot = {
+            time: '00:00',
+            hour: 0,
+            minutes: 0,
+            isHalfHour: false,
+            displayTime: false
+        };
+        this.slotClick.emit({
+            columnId: dayDate.toISOString(),
+            slot: dummySlot,
+            date: dayDate
+        });
+    }
+    onMonthEventClick(event, dayDate) {
+        const pseudoColumn = {
+            id: dayDate.toISOString(),
+            name: dayDate.toLocaleDateString(this.locale(), { weekday: 'long', timeZone: 'UTC' })
+        };
+        this.eventClick.emit({ event, column: pseudoColumn });
+    }
+    openDayPopover(dayDate, event) {
+        event.stopPropagation();
+        this.expandedDay.set(dayDate);
+    }
+    closeDayPopover() {
+        this.expandedDay.set(null);
+    }
+    getExpandedDayEvents() {
+        const day = this.expandedDay();
+        if (!day)
+            return [];
+        return this.getEventsForDay(day);
+    }
+    getExpandedDayLabel() {
+        const day = this.expandedDay();
+        if (!day)
+            return '';
+        const localeValue = this.locale();
+        const weekday = day.toLocaleDateString(localeValue, { weekday: 'short', timeZone: 'UTC' }).toUpperCase();
+        const dayNum = day.getUTCDate();
+        return `${weekday}\n${dayNum}`;
+    }
     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 } }, outputs: { slotClick: "slotClick", eventClick: "eventClick", eventHover: "eventHover", eventLeave: "eventLeave", todayClick: "todayClick", previousDay: "previousDay", nextDay: "nextDay" }, host: { properties: { "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=\"D\u00EDa anterior\"\n      (click)=\"onPreviousDay()\"\n    ></button>\n    <span>{{ formattedDate() }}</span>\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      title=\"D\u00EDa siguiente\"\n      (click)=\"onNextDay()\"\n    ></button>\n  </div>\n</div>\n}\n\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", styles: [":host{display:block;width:100%;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    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          [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          [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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericSchedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'core-generic-scheduler', standalone: true, imports: [CommonModule], host: {
                         '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=\"D\u00EDa anterior\"\n      (click)=\"onPreviousDay()\"\n    ></button>\n    <span>{{ formattedDate() }}</span>\n    <button\n      class=\"c-bookings-header__date-arrow icon-arrow-right\"\n      title=\"D\u00EDa siguiente\"\n      (click)=\"onNextDay()\"\n    ></button>\n  </div>\n</div>\n}\n\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", styles: [":host{display:block;width:100%;overflow:visible}\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\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          [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          [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"] }]
         }] });
 
 class CacheBustingInterceptor {
@@ -21631,5 +21998,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AD_AUTH_CONFIG, AD_AUTH_INTERCEPTOR_CONFIG, ALL_COUNTRY_CODES, ActiveFiltersComponent, AdAuthService, AdInteractionType, AdLoginButtonComponent, AgeValidationHelper, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, COMMON_COUNTRIES, CacheBustingInterceptor, CalendarEventType, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, CountryCode, CustomClassService, DEFAULT_AD_AUTH_INTERCEPTOR_CONFIG, DEFAULT_COUNTRIES, DEFAULT_SCHEDULER_CONFIG, DataListComponent, DataListItemComponent, DataStoreService, DateFieldComponent, DateUtility, DatetimeFieldComponent, DayState, DayType, DialogActions, DocumentAction, DocumentDisplayMode, DocumentFieldComponent, DocumentFieldValidators, DocumentPayloadMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, FixedActionPosition, FixedActionsMobileModalComponent, FixedActionsMobileModalService, GalleryAnimationType, GalleryLayoutType, GalleryModalComponent, GalleryModalGlobalService, GenericButtonComponent, GenericCalendarComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericFixedActionsComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSchedulerComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericSwitchComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LATIN_AMERICA_COUNTRIES, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MODEL_REFERENCE_SORT_KEY, MainNavComponent, MainNavService, ManualRefreshService, MobileHeaderComponent, MobileResolutionService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsCustomActions, PermissionsInterceptor, PermissionsResources, PhoneFieldComponent, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, RedirectUrlService, ResetPasswordModel, RoleModel, SOUTH_AMERICA_COUNTRIES, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableFixedActionsService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UruguayanDocumentValidationHelper, UsersModel, VERSION, WeekDay, adAuthGuard, adAuthInterceptor, adGuestGuard, adRoleGuard, ageValidator, calculateAge, equalToValidator, generateRandomUruguayanDocument, getCountryCodeStrings, getLatestBirthDateForAge, getRandomCi, getUruguayanDocumentValidationDigit, getValidationDigit, isSameDate, isValidCountryCode, provideAdAuth, provideAdAuthInterceptor, provideAdAuthWithInterceptor, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader, random, transform, transformUruguayanDocument, uruguayanDocumentValidator, validate, validateAge, validateCi, validateUruguayanDocument, validationDigit };
+export { AD_AUTH_CONFIG, AD_AUTH_INTERCEPTOR_CONFIG, ALL_COUNTRY_CODES, ActiveFiltersComponent, AdAuthService, AdInteractionType, AdLoginButtonComponent, AgeValidationHelper, AlertComponent, AlertContainerComponent, AlertService, AlertType, ApiConfigurationProvider, BaseFieldComponent, ButtonContext, ButtonSize, ButtonType, COMMON_COUNTRIES, CacheBustingInterceptor, CalendarEventType, CardComponent, CarouselComponent, ChatMessagePosition, ChatMessageType, CheckboxFieldComponent, ColorPickerFieldComponent, ConfigurationModel, ConfirmationDialogComponent, ConfirmationDialogService, CoreHostDirective, CoreManualRefreshComponent, CoreUiHttpLoaderFactory, CoreUiTranslateLoader, CoreUiTranslateService, CountryCode, CustomClassService, DEFAULT_AD_AUTH_INTERCEPTOR_CONFIG, DEFAULT_COUNTRIES, DEFAULT_SCHEDULER_CONFIG, DataListComponent, DataListItemComponent, DataStoreService, DateFieldComponent, DateUtility, DatetimeFieldComponent, DayState, DayType, DialogActions, DocumentAction, DocumentDisplayMode, DocumentFieldComponent, DocumentFieldValidators, DocumentPayloadMode, DropdownComponent, DropdownDirection, DropdownService, DynamicFieldDirective, DynamicFieldsHelper, FieldErrorsComponent, FieldType, FileFieldComponent, FileModel, FilePreviewActionType, FileTemplateModel, FileTemplateType, FileType, FileTypeModel, FileUploadService, FilterModalComponent, FilterService, FilterType, FixedActionPosition, FixedActionsMobileModalComponent, FixedActionsMobileModalService, GalleryAnimationType, GalleryLayoutType, GalleryModalComponent, GalleryModalGlobalService, GenericButtonComponent, GenericCalendarComponent, GenericChatComponent, GenericChatService, GenericDocumentationComponent, GenericFixedActionsComponent, GenericGalleryComponent, GenericModalComponent, GenericPaginationComponent, GenericRatingComponent, GenericSchedulerComponent, GenericSidebarComponent, GenericSkeletonComponent, GenericStepsComponent, GenericSwitchComponent, GenericTableComponent, GenericTabsComponent, GenericTimelineComponent, GlobalApiConfigService, HeaderComponent, HeaderConfigurationService, HeaderElementType, HeaderService, HttpLoaderFactory, ImageModalComponent, ImageModalService, ImagePreviewComponent, LATIN_AMERICA_COUNTRIES, LayoutAuth, LayoutBreakpoint, LayoutComponent, LayoutService, LayoutStateService, LayoutType, LoaderComponent, LoaderService, MODEL_REFERENCE_SORT_KEY, MainNavComponent, MainNavService, ManualRefreshService, MobileHeaderComponent, MobileResolutionService, ModalMode, ModelApiService, MultiEntryFieldComponent, MultiEntryOutputFormat, NumberFieldComponent, NumberFieldConfigType, NumberFieldType, NumberRange, PERMISSION_ACTIONS_PROVIDER, PERMISSION_PROVIDER, PERMISSION_RESOURCES_PROVIDER, PaginationService, PasswordFieldComponent, PermissionEnumsService, PermissionModel, PermissionService, PermissionWrapperService, PermissionsActions, PermissionsCustomActions, PermissionsInterceptor, PermissionsResources, PhoneFieldComponent, ProgressBarComponent, ProgressBarSize, RatingService, RatingSize, RatingType, RedirectUrlService, ResetPasswordModel, RoleModel, SOUTH_AMERICA_COUNTRIES, SelectFieldComponent, ServerSelectFieldComponent, ServerSelectService, SidebarCustomModalComponent, SidebarCustomModalService, SidebarHeight, SidebarMobileModalService, SidebarMobileType, SidebarPosition, SidebarService, SidebarState, SidebarTemplateRegistryService, SidebarVisibility, SidebarWidth, SkeletonAnimation, SkeletonService, SkeletonSize, SkeletonType, SmartFieldComponent, SortDirection, SortMode, StepSize, StepStatus, StepType, StepsService, SwitchFieldComponent, TableAction, TableActionService, TableDataService, TableFixedActionsService, TableSortService, TextAreaFieldComponent, TextFieldComponent, TimeFieldComponent, TimeInterval, TimelineService, TimelineStatus, TimelineType, TranslationMergeService, UruguayanDocumentValidationHelper, UsersModel, VERSION, WeekDay, adAuthGuard, adAuthInterceptor, adGuestGuard, adRoleGuard, ageValidator, calculateAge, equalToValidator, generateRandomUruguayanDocument, getCountryCodeStrings, getLatestBirthDateForAge, getRandomCi, getUruguayanDocumentValidationDigit, getValidationDigit, isSameDate, isValidCountryCode, provideAdAuth, provideAdAuthInterceptor, provideAdAuthWithInterceptor, provideCoreUiTranslateLoader, providePermissionActions, providePermissionEnums, providePermissionResources, providePermissionService, providePermissionServiceFactory, provideTranslateLoader, random, transform, transformUruguayanDocument, uruguayanDocumentValidator, validate, validateAge, validateCi, validateUruguayanDocument, validationDigit };
 //# sourceMappingURL=solcre-org-core-ui.mjs.map