mglon-schedule 0.0.4

package/fesm2022/mglon-schedule.mjs

@@ -0,0 +1,3800 @@
+import * as i0 from '@angular/core';
+import { Component, input, computed, inject, ElementRef, PLATFORM_ID, output, signal, HostListener, Input, Directive, viewChild, afterNextRender, contentChildren, effect, Renderer2, ViewContainerRef, EventEmitter, Output, ViewEncapsulation, InjectionToken, untracked } from '@angular/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, startOfDay, endOfDay, differenceInCalendarDays, addDays, differenceInDays, max, min, differenceInMilliseconds, addMilliseconds } from 'date-fns';
+import * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { Subject } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
+import { filter, takeUntil } from 'rxjs/operators';
+import { RRule } from 'rrule';
+
+class ResourceView {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ResourceView, isStandalone: true, selector: "mglon-resource-view", ngImport: i0, template: "<div class=\"ngx-cal-resource-view\">\n  <!-- Header: Time/Dates (Sticky Top) -->\n  <div class=\"ngx-cal-resource-view__header\">\n    <div class=\"ngx-cal-resource-view__corner\"></div> <!-- Empty corner above sidebar -->\n    <div class=\"ngx-cal-resource-view__time-track\">\n      <!-- Mock items for now -->\n      <div class=\"ngx-cal-resource-view__time-cell\">08:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">09:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">10:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">11:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">12:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">13:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">14:00</div>\n    </div>\n  </div>\n\n  <!-- Body: Sidebar + Grid -->\n  <div class=\"ngx-cal-resource-view__body\">\n    <!-- Sidebar: Resources (Sticky Left) -->\n    <div class=\"ngx-cal-resource-view__sidebar\">\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource A</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource B</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource C</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource D</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource E</div>\n    </div>\n\n    <!-- Main Grid -->\n    <div class=\"ngx-cal-resource-view__grid\">\n      <!-- Rows corresponding to resources -->\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{--mglon-schedule-primary-50: #e8f0fe;--mglon-schedule-primary-100: #d2e3fc;--mglon-schedule-primary-200: #a7cbfb;--mglon-schedule-primary-300: #7cacf8;--mglon-schedule-primary-400: #518ef5;--mglon-schedule-primary-500: #1a73e8;--mglon-schedule-primary-600: #1967d2;--mglon-schedule-primary-700: #185abc;--mglon-schedule-primary-800: #174ea6;--mglon-schedule-primary-900: #0d3a86;--mglon-schedule-primary-950: #08265a;--mglon-schedule-neutral-50: #fafafa;--mglon-schedule-neutral-100: #f5f5f5;--mglon-schedule-neutral-200: #e5e5e5;--mglon-schedule-neutral-300: #d4d4d4;--mglon-schedule-neutral-400: #a3a3a3;--mglon-schedule-neutral-500: #737373;--mglon-schedule-neutral-600: #525252;--mglon-schedule-neutral-700: #404040;--mglon-schedule-neutral-800: #262626;--mglon-schedule-neutral-900: #171717;--mglon-schedule-neutral-950: #0a0a0a;--mglon-schedule-primary: var(--mglon-schedule-primary-500);--mglon-schedule-on-primary: #ffffff;--mglon-schedule-surface: #ffffff;--mglon-schedule-on-surface: var(--mglon-schedule-neutral-900);--mglon-schedule-surface-variant: var(--mglon-schedule-neutral-100);--mglon-schedule-on-surface-variant: var(--mglon-schedule-neutral-700);--mglon-schedule-background: #ffffff;--mglon-schedule-on-background: var(--mglon-schedule-neutral-900);--mglon-schedule-border: var(--mglon-schedule-neutral-200);--mglon-schedule-text-primary: var(--mglon-schedule-neutral-900);--mglon-schedule-text-secondary: var(--mglon-schedule-neutral-500);--mglon-schedule-text-tertiary: var(--mglon-schedule-neutral-400);--mglon-schedule-hover: var(--mglon-schedule-neutral-100);--mglon-schedule-selection: var(--mglon-schedule-primary-50);--mglon-schedule-error: #ea4335;--mglon-schedule-on-error: #ffffff;--mglon-schedule-spacing-xs: 4px;--mglon-schedule-spacing-sm: 8px;--mglon-schedule-spacing-md: 16px;--mglon-schedule-spacing-lg: 24px;--mglon-schedule-padding-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-padding-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-padding-md: var(--mglon-schedule-spacing-md);--mglon-schedule-padding-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-margin-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-margin-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-margin-md: var(--mglon-schedule-spacing-md);--mglon-schedule-margin-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-gap-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-gap-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-gap-md: var(--mglon-schedule-spacing-md);--mglon-schedule-gap-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-border-width-sm: 1px;--mglon-schedule-border-width-md: 2px;--mglon-schedule-border-width-lg: 4px;--mglon-schedule-header-height: 48px;--mglon-schedule-sidebar-width: 60px;--mglon-schedule-cell-height: 48px;--mglon-schedule-radius-sm: 4px;--mglon-schedule-radius-md: 8px;--mglon-schedule-radius-lg: 16px;--mglon-schedule-radius-full: 9999px;--mglon-schedule-font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;--mglon-schedule-font-size-xs: 10px;--mglon-schedule-font-size-sm: 12px;--mglon-schedule-font-size-md: 14px;--mglon-schedule-font-size-lg: 16px;--mglon-schedule-shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--mglon-schedule-shadow-md: 0 2px 4px rgba(0, 0, 0, .15);--mglon-schedule-shadow-lg: 0 4px 8px rgba(0, 0, 0, .2);--mglon-schedule-z-sticky: 10;--mglon-schedule-z-header: 20;--mglon-schedule-hover-bg: rgba(0, 0, 0, .04);--mglon-schedule-focus-ring-color: var(--mglon-schedule-primary-200);--mglon-schedule-disabled-opacity: .5;--mglon-schedule-transition-duration: .2s;--mglon-schedule-transition-easing: cubic-bezier(.4, 0, .2, 1);--mglon-schedule-month-week-display: grid;--mglon-schedule-month-week-columns: repeat(7, 1fr);--mglon-schedule-month-week-min-height: 80px;--mglon-schedule-month-week-border-bottom-width: 1px;display:block;--resource-view-bg: var(--mglon-resource-view-bg, var(--mglon-schedule-background));--resource-view-font-family: var(--mglon-resource-view-font-family, var(--mglon-schedule-font-family));--resource-view-text-color: var(--mglon-resource-view-text-color, var(--mglon-schedule-text-primary));--resource-sidebar-width: var(--mglon-resource-sidebar-width, var(--mglon-schedule-sidebar-width));--resource-header-height: var(--mglon-resource-header-height, var(--mglon-schedule-header-height));--resource-cell-height: var(--mglon-resource-cell-height, var(--mglon-schedule-cell-height));--resource-border: var(--mglon-resource-border, 1px solid var(--mglon-schedule-border));font-family:var(--resource-view-font-family);color:var(--resource-view-text-color);background-color:var(--resource-view-bg);height:100%;overflow:auto;position:relative}.ngx-cal-resource-view{display:grid;grid-template-columns:var(--resource-sidebar-width) 1fr;grid-template-rows:var(--resource-header-height) 1fr;min-width:fit-content}.ngx-cal-resource-view__header{display:contents}.ngx-cal-resource-view__corner{top:0;z-index:var(--mglon-schedule-z-header);position:sticky;left:0;z-index:var(--mglon-schedule-z-sticky);z-index:30;grid-row:1;grid-column:1;border-right:var(--resource-border);border-bottom:var(--resource-border);background-color:var(--mglon-schedule-surface)}.ngx-cal-resource-view__time-track{position:sticky;top:0;z-index:var(--mglon-schedule-z-header);grid-row:1;grid-column:2;display:flex;border-bottom:var(--resource-border);background-color:var(--mglon-schedule-surface)}.ngx-cal-resource-view__time-cell{display:flex;align-items:center;justify-content:center;flex:0 0 100px;height:100%;border-right:var(--resource-border);font-size:var(--mglon-schedule-font-size-sm);color:var(--mglon-schedule-text-secondary)}.ngx-cal-resource-view__sidebar{grid-row:2;grid-column:1;display:block;background-color:var(--mglon-schedule-surface)}.ngx-cal-resource-view__resource-cell{position:sticky;left:0;z-index:var(--mglon-schedule-z-sticky);height:var(--resource-cell-height);display:flex;align-items:center;padding:0 var(--mglon-schedule-spacing-sm);border-right:var(--resource-border);border-bottom:var(--resource-border);font-size:var(--mglon-schedule-font-size-md);background-color:var(--mglon-schedule-surface);width:var(--resource-sidebar-width);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-cal-resource-view__grid{grid-row:2;grid-column:2;display:block}.ngx-cal-resource-view__row{display:flex;height:var(--resource-cell-height);border-bottom:var(--resource-border)}.ngx-cal-resource-view__cell{flex:0 0 100px;border-right:var(--resource-border);height:100%}.ngx-cal-resource-view__cell:hover{background-color:var(--mglon-schedule-hover)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-resource-view', imports: [], template: "<div class=\"ngx-cal-resource-view\">\n  <!-- Header: Time/Dates (Sticky Top) -->\n  <div class=\"ngx-cal-resource-view__header\">\n    <div class=\"ngx-cal-resource-view__corner\"></div> <!-- Empty corner above sidebar -->\n    <div class=\"ngx-cal-resource-view__time-track\">\n      <!-- Mock items for now -->\n      <div class=\"ngx-cal-resource-view__time-cell\">08:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">09:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">10:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">11:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">12:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">13:00</div>\n      <div class=\"ngx-cal-resource-view__time-cell\">14:00</div>\n    </div>\n  </div>\n\n  <!-- Body: Sidebar + Grid -->\n  <div class=\"ngx-cal-resource-view__body\">\n    <!-- Sidebar: Resources (Sticky Left) -->\n    <div class=\"ngx-cal-resource-view__sidebar\">\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource A</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource B</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource C</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource D</div>\n      <div class=\"ngx-cal-resource-view__resource-cell\">Resource E</div>\n    </div>\n\n    <!-- Main Grid -->\n    <div class=\"ngx-cal-resource-view__grid\">\n      <!-- Rows corresponding to resources -->\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n      <div class=\"ngx-cal-resource-view__row\">\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n        <div class=\"ngx-cal-resource-view__cell\"></div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [":host{--mglon-schedule-primary-50: #e8f0fe;--mglon-schedule-primary-100: #d2e3fc;--mglon-schedule-primary-200: #a7cbfb;--mglon-schedule-primary-300: #7cacf8;--mglon-schedule-primary-400: #518ef5;--mglon-schedule-primary-500: #1a73e8;--mglon-schedule-primary-600: #1967d2;--mglon-schedule-primary-700: #185abc;--mglon-schedule-primary-800: #174ea6;--mglon-schedule-primary-900: #0d3a86;--mglon-schedule-primary-950: #08265a;--mglon-schedule-neutral-50: #fafafa;--mglon-schedule-neutral-100: #f5f5f5;--mglon-schedule-neutral-200: #e5e5e5;--mglon-schedule-neutral-300: #d4d4d4;--mglon-schedule-neutral-400: #a3a3a3;--mglon-schedule-neutral-500: #737373;--mglon-schedule-neutral-600: #525252;--mglon-schedule-neutral-700: #404040;--mglon-schedule-neutral-800: #262626;--mglon-schedule-neutral-900: #171717;--mglon-schedule-neutral-950: #0a0a0a;--mglon-schedule-primary: var(--mglon-schedule-primary-500);--mglon-schedule-on-primary: #ffffff;--mglon-schedule-surface: #ffffff;--mglon-schedule-on-surface: var(--mglon-schedule-neutral-900);--mglon-schedule-surface-variant: var(--mglon-schedule-neutral-100);--mglon-schedule-on-surface-variant: var(--mglon-schedule-neutral-700);--mglon-schedule-background: #ffffff;--mglon-schedule-on-background: var(--mglon-schedule-neutral-900);--mglon-schedule-border: var(--mglon-schedule-neutral-200);--mglon-schedule-text-primary: var(--mglon-schedule-neutral-900);--mglon-schedule-text-secondary: var(--mglon-schedule-neutral-500);--mglon-schedule-text-tertiary: var(--mglon-schedule-neutral-400);--mglon-schedule-hover: var(--mglon-schedule-neutral-100);--mglon-schedule-selection: var(--mglon-schedule-primary-50);--mglon-schedule-error: #ea4335;--mglon-schedule-on-error: #ffffff;--mglon-schedule-spacing-xs: 4px;--mglon-schedule-spacing-sm: 8px;--mglon-schedule-spacing-md: 16px;--mglon-schedule-spacing-lg: 24px;--mglon-schedule-padding-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-padding-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-padding-md: var(--mglon-schedule-spacing-md);--mglon-schedule-padding-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-margin-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-margin-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-margin-md: var(--mglon-schedule-spacing-md);--mglon-schedule-margin-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-gap-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-gap-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-gap-md: var(--mglon-schedule-spacing-md);--mglon-schedule-gap-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-border-width-sm: 1px;--mglon-schedule-border-width-md: 2px;--mglon-schedule-border-width-lg: 4px;--mglon-schedule-header-height: 48px;--mglon-schedule-sidebar-width: 60px;--mglon-schedule-cell-height: 48px;--mglon-schedule-radius-sm: 4px;--mglon-schedule-radius-md: 8px;--mglon-schedule-radius-lg: 16px;--mglon-schedule-radius-full: 9999px;--mglon-schedule-font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;--mglon-schedule-font-size-xs: 10px;--mglon-schedule-font-size-sm: 12px;--mglon-schedule-font-size-md: 14px;--mglon-schedule-font-size-lg: 16px;--mglon-schedule-shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--mglon-schedule-shadow-md: 0 2px 4px rgba(0, 0, 0, .15);--mglon-schedule-shadow-lg: 0 4px 8px rgba(0, 0, 0, .2);--mglon-schedule-z-sticky: 10;--mglon-schedule-z-header: 20;--mglon-schedule-hover-bg: rgba(0, 0, 0, .04);--mglon-schedule-focus-ring-color: var(--mglon-schedule-primary-200);--mglon-schedule-disabled-opacity: .5;--mglon-schedule-transition-duration: .2s;--mglon-schedule-transition-easing: cubic-bezier(.4, 0, .2, 1);--mglon-schedule-month-week-display: grid;--mglon-schedule-month-week-columns: repeat(7, 1fr);--mglon-schedule-month-week-min-height: 80px;--mglon-schedule-month-week-border-bottom-width: 1px;display:block;--resource-view-bg: var(--mglon-resource-view-bg, var(--mglon-schedule-background));--resource-view-font-family: var(--mglon-resource-view-font-family, var(--mglon-schedule-font-family));--resource-view-text-color: var(--mglon-resource-view-text-color, var(--mglon-schedule-text-primary));--resource-sidebar-width: var(--mglon-resource-sidebar-width, var(--mglon-schedule-sidebar-width));--resource-header-height: var(--mglon-resource-header-height, var(--mglon-schedule-header-height));--resource-cell-height: var(--mglon-resource-cell-height, var(--mglon-schedule-cell-height));--resource-border: var(--mglon-resource-border, 1px solid var(--mglon-schedule-border));font-family:var(--resource-view-font-family);color:var(--resource-view-text-color);background-color:var(--resource-view-bg);height:100%;overflow:auto;position:relative}.ngx-cal-resource-view{display:grid;grid-template-columns:var(--resource-sidebar-width) 1fr;grid-template-rows:var(--resource-header-height) 1fr;min-width:fit-content}.ngx-cal-resource-view__header{display:contents}.ngx-cal-resource-view__corner{top:0;z-index:var(--mglon-schedule-z-header);position:sticky;left:0;z-index:var(--mglon-schedule-z-sticky);z-index:30;grid-row:1;grid-column:1;border-right:var(--resource-border);border-bottom:var(--resource-border);background-color:var(--mglon-schedule-surface)}.ngx-cal-resource-view__time-track{position:sticky;top:0;z-index:var(--mglon-schedule-z-header);grid-row:1;grid-column:2;display:flex;border-bottom:var(--resource-border);background-color:var(--mglon-schedule-surface)}.ngx-cal-resource-view__time-cell{display:flex;align-items:center;justify-content:center;flex:0 0 100px;height:100%;border-right:var(--resource-border);font-size:var(--mglon-schedule-font-size-sm);color:var(--mglon-schedule-text-secondary)}.ngx-cal-resource-view__sidebar{grid-row:2;grid-column:1;display:block;background-color:var(--mglon-schedule-surface)}.ngx-cal-resource-view__resource-cell{position:sticky;left:0;z-index:var(--mglon-schedule-z-sticky);height:var(--resource-cell-height);display:flex;align-items:center;padding:0 var(--mglon-schedule-spacing-sm);border-right:var(--resource-border);border-bottom:var(--resource-border);font-size:var(--mglon-schedule-font-size-md);background-color:var(--mglon-schedule-surface);width:var(--resource-sidebar-width);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-cal-resource-view__grid{grid-row:2;grid-column:2;display:block}.ngx-cal-resource-view__row{display:flex;height:var(--resource-cell-height);border-bottom:var(--resource-border)}.ngx-cal-resource-view__cell{flex:0 0 100px;border-right:var(--resource-border);height:100%}.ngx-cal-resource-view__cell:hover{background-color:var(--mglon-schedule-hover)}\n"] }]
+        }] });
+
+/**
+ * Type guard to check if an event is a regular Event
+ */
+function isEvent(event) {
+    return event.type === 'event';
+}
+/**
+ * Type guard to check if an event is an AllDayEvent
+ */
+function isAllDayEvent(event) {
+    return event.type === 'all-day';
+}
+/**
+ * Type guard to check if an event is a RecurrentEvent
+ */
+function isRecurrentEvent(event) {
+    return event.type === 'recurrent';
+}
+
+/**
+ * Generates a complete month calendar grid with padding days from adjacent months.
+ * Always starts on Sunday and includes complete weeks (5-6 weeks total).
+ *
+ * @example
+ * getMonthCalendarGrid(new Date(2024, 0, 15)) // January 2024
+ * // Returns 5 weeks: Dec 31, 2023 → Feb 3, 2024
+ */
+function getMonthCalendarGrid(date) {
+    const monthStart = startOfMonth(date);
+    const monthEnd = endOfMonth(date);
+    const calendarStart = startOfWeek(monthStart, { weekStartsOn: 0 });
+    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
+    const allDays = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
+    const calendarDays = allDays.map(day => ({
+        date: day,
+        day: day.getDate(),
+        isCurrentMonth: isSameMonth(day, date),
+        isPreviousMonth: day < monthStart,
+        isNextMonth: day > monthEnd,
+    }));
+    const weeks = [];
+    for (let i = 0; i < calendarDays.length; i += 7) {
+        weeks.push({ days: calendarDays.slice(i, i + 7) });
+    }
+    return weeks;
+}
+// ============================================================================
+// WEEK VIEW - Interfaces & Functions
+// ============================================================================
+const DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+/**
+ * Generates the 7 days of the week containing the given date.
+ * Week starts on Sunday.
+ *
+ * @example
+ * getWeekDays(new Date(2024, 0, 15)) // Monday, Jan 15
+ * // Returns: Sun Jan 14 → Sat Jan 20
+ */
+function getWeekDays(date) {
+    const weekStart = startOfWeek(date, { weekStartsOn: 0 });
+    const weekEnd = endOfWeek(date, { weekStartsOn: 0 });
+    const days = eachDayOfInterval({ start: weekStart, end: weekEnd });
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return days.map(day => {
+        const dayDate = new Date(day);
+        dayDate.setHours(0, 0, 0, 0);
+        return {
+            date: dayDate,
+            dayOfWeek: day.getDay(),
+            dayName: DAY_NAMES[day.getDay()],
+            dayNumber: day.getDate(),
+            isToday: dayDate.getTime() === today.getTime()
+        };
+    });
+}
+/**
+ * Generates a 2D matrix of time slots for a week.
+ * Each day contains 48 slots (24h × 2 = 30-minute intervals).
+ *
+ * @returns TimeSlot[7 days][48 slots per day]
+ */
+function getWeekTimeSlots(date) {
+    const weekDays = getWeekDays(date);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return weekDays.map(weekDay => {
+        const slots = [];
+        for (let hour = 0; hour < 24; hour++) {
+            for (let minute = 0; minute < 60; minute += 30) {
+                const slotDate = new Date(weekDay.date);
+                slotDate.setHours(hour, minute, 0, 0);
+                slots.push({
+                    date: slotDate,
+                    hour,
+                    minute,
+                    dayOfWeek: weekDay.dayOfWeek,
+                    isToday: weekDay.isToday,
+                    timeLabel: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+                });
+            }
+        }
+        return slots;
+    });
+}
+// ============================================================================
+// VIEW RANGE - Functions for calculating visible date ranges
+// ============================================================================
+/**
+ * Calculates the visible date range based on view mode.
+ * Used to filter which events should be displayed.
+ */
+function getViewRange(date, viewMode) {
+    const normalizedDate = new Date(date);
+    normalizedDate.setHours(0, 0, 0, 0);
+    switch (viewMode) {
+        case 'month': {
+            const monthStart = startOfMonth(normalizedDate);
+            const monthEnd = endOfMonth(normalizedDate);
+            return {
+                start: startOfWeek(monthStart, { weekStartsOn: 0 }),
+                end: endOfWeek(monthEnd, { weekStartsOn: 0 })
+            };
+        }
+        case 'week': {
+            return {
+                start: startOfWeek(normalizedDate, { weekStartsOn: 0 }),
+                end: endOfWeek(normalizedDate, { weekStartsOn: 0 })
+            };
+        }
+        case 'day':
+        case 'resource': {
+            const endOfDay = new Date(normalizedDate);
+            endOfDay.setHours(23, 59, 59, 999);
+            return { start: normalizedDate, end: endOfDay };
+        }
+        case 'list': {
+            return {
+                start: startOfMonth(normalizedDate),
+                end: endOfMonth(normalizedDate)
+            };
+        }
+        default:
+            return { start: normalizedDate, end: normalizedDate };
+    }
+}
+// ============================================================================
+// EVENT FILTERING - Functions to check event visibility
+// ============================================================================
+/**
+ * Checks if an event overlaps with a given date range.
+ * Handles standard events, all-day events, and recurrent events.
+ */
+function isEventInRange(event, range) {
+    if (isEvent(event) || isRecurrentEvent(event)) {
+        return event.start <= range.end && event.end >= range.start;
+    }
+    if (isAllDayEvent(event)) {
+        const eventStart = startOfDay(event.date);
+        const eventEnd = event.endDate ? endOfDay(event.endDate) : endOfDay(event.date);
+        return eventStart <= range.end && eventEnd >= range.start;
+    }
+    return false;
+}
+
+/**
+ * Color manipulation utilities for dynamic theming
+ */
+/**
+ * Converts hex color to RGB
+ */
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : null;
+}
+/**
+ * Converts RGB to hex
+ */
+function rgbToHex(r, g, b) {
+    return "#" + [r, g, b].map(x => {
+        const hex = Math.round(x).toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+    }).join('');
+}
+/**
+ * Converts RGB to HSL
+ */
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                break;
+            case g:
+                h = ((b - r) / d + 2) / 6;
+                break;
+            case b:
+                h = ((r - g) / d + 4) / 6;
+                break;
+        }
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+/**
+ * Converts HSL to RGB
+ */
+function hslToRgb(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    let r, g, b;
+    if (s === 0) {
+        r = g = b = l;
+    }
+    else {
+        const hue2rgb = (p, q, t) => {
+            if (t < 0)
+                t += 1;
+            if (t > 1)
+                t -= 1;
+            if (t < 1 / 6)
+                return p + (q - p) * 6 * t;
+            if (t < 1 / 2)
+                return q;
+            if (t < 2 / 3)
+                return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return { r: r * 255, g: g * 255, b: b * 255 };
+}
+/**
+ * Calculate relative luminance (WCAG formula)
+ */
+function getLuminance(r, g, b) {
+    const [rs, gs, bs] = [r, g, b].map(c => {
+        c = c / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+/**
+ * Calculate contrast ratio between two colors
+ */
+function getContrastRatio(rgb1, rgb2) {
+    const lum1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
+    const lum2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
+    const lighter = Math.max(lum1, lum2);
+    const darker = Math.min(lum1, lum2);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/**
+ * Generates a hover color (darker variant)
+ * If the base color is already dark, it slightly lightens instead
+ */
+function getHoverColor(baseColor) {
+    const rgb = hexToRgb(baseColor);
+    if (!rgb)
+        return baseColor;
+    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    // If color is very dark (L < 20%), lighten it
+    // Otherwise, darken it
+    if (hsl.l < 20) {
+        hsl.l = Math.min(100, hsl.l + 15);
+        hsl.s = Math.min(100, hsl.s + 10);
+    }
+    else {
+        hsl.l = Math.max(0, hsl.l - 12);
+        hsl.s = Math.min(100, hsl.s + 8);
+    }
+    const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+    return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+}
+/**
+ * Generates a very light background variant (almost white)
+ */
+function getLightBackgroundColor(baseColor) {
+    const rgb = hexToRgb(baseColor);
+    if (!rgb)
+        return '#f5f5f5';
+    const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    // Keep the hue, reduce saturation, increase lightness to 95-97%
+    hsl.s = Math.min(30, hsl.s * 0.3);
+    hsl.l = 96;
+    const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+    return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+}
+/**
+ * Generates optimal text color (white or dark) for contrast
+ * Returns white for dark backgrounds, dark for light backgrounds
+ */
+function getTextColor(backgroundColor) {
+    const rgb = hexToRgb(backgroundColor);
+    if (!rgb)
+        return '#000000';
+    // Calculate luminance
+    const luminance = getLuminance(rgb.r, rgb.g, rgb.b);
+    // If background is light (luminance > 0.5), use dark text
+    // Otherwise use white text
+    if (luminance > 0.5) {
+        // For very light backgrounds, use a dark gray/color-tinted text
+        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+        // Keep hue, high saturation, low lightness
+        const textHsl = { h: hsl.h, s: Math.min(60, hsl.s * 0.8), l: 25 };
+        const textRgb = hslToRgb(textHsl.h, textHsl.s, textHsl.l);
+        return rgbToHex(textRgb.r, textRgb.g, textRgb.b);
+    }
+    else {
+        return '#ffffff';
+    }
+}
+/**
+ * Generates a full adaptive color scheme based on a single input color.
+ * It detects the Nature of the input (Vivid, Pastel, Dark) and preserves it,
+ * but also provides a "raw" variant using the color exactly as provided.
+ */
+function generateAdaptiveColorScheme(baseColor) {
+    const rgb = hexToRgb(baseColor);
+    if (!rgb) {
+        const fallback = '#1a73e8';
+        return generateAdaptiveColorScheme(fallback);
+    }
+    const { h, s, l } = rgbToHsl(rgb.r, rgb.g, rgb.b);
+    // 1. Determine the "Nature" of the input color
+    let type;
+    if (l > 80)
+        type = 'pastel';
+    else if (l < 20)
+        type = 'dark'; // Only extremely dark colors are "Dark"
+    else
+        type = 'vivid';
+    // 2. Generate variants, keeping the input for its detected category
+    const variants = {};
+    // Raw (Always use original input)
+    variants.raw = generateVariant(h, s, l);
+    // Vivid
+    if (type === 'vivid') {
+        variants.vivid = variants.raw;
+    }
+    else {
+        variants.vivid = generateVariant(h, Math.max(s, 70), 50); // Boost to vivid
+    }
+    // Pastel
+    if (type === 'pastel') {
+        variants.pastel = generateVariant(h, s, l); // Use original
+    }
+    else {
+        // Soften: high lightness, moderate saturation
+        variants.pastel = generateVariant(h, Math.min(s, 65), 92);
+    }
+    // Dark
+    if (type === 'dark') {
+        variants.dark = generateVariant(h, s, l); // Use original
+    }
+    else {
+        // Deepen: low lightness, moderate saturation
+        variants.dark = generateVariant(h, Math.min(s, 60), 25);
+    }
+    return variants;
+}
+/**
+ * Internal helper to generate a specific variant with its hover and text colors
+ */
+function generateVariant(h, s, l) {
+    const base = hslToHex(h, s, l);
+    // Hover: slightly more saturated and darker (or lighter if base is very dark)
+    const hoverL = l > 20 ? Math.max(0, l - 8) : l + 15;
+    const hoverS = Math.min(100, s + 5);
+    const hover = hslToHex(h, hoverS, hoverL);
+    return {
+        base,
+        hover,
+        text: getTextColor(base),
+        textHover: getTextColor(hover)
+    };
+}
+/**
+ * Simple HSL to Hex bridge
+ */
+function hslToHex(h, s, l) {
+    const rgb = hslToRgb(h, s, l);
+    return rgbToHex(rgb.r, rgb.g, rgb.b);
+}
+/**
+ * Resolves the effective color for an event
+ */
+function getEventColor(event, getResource, defaultColor) {
+    if (event.color)
+        return event.color;
+    if (event.resourceId) {
+        const resource = getResource(event.resourceId);
+        if (resource?.color)
+            return resource.color;
+    }
+    return defaultColor;
+}
+
+/**
+ * Header component for the week view displaying the 7 days of the week.
+ *
+ * Shows day names and numbers in a sticky header that remains visible
+ * when scrolling through time slots.
+ *
+ * Features:
+ * - Sticky positioning
+ * - Highlights today
+ * - Shows day name (Sun, Mon, etc.) and day number
+ *
+ * @example
+ * ```html
+ * <mglon-week-header [currentDate]="selectedDate"></mglon-week-header>
+ * ```
+ */
+class WeekHeader {
+    /**
+     * The date to display the week for.
+     * Can be any date within the target week.
+     */
+    currentDate = input(new Date(), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+    /**
+     * Computed array of the 7 days in the week
+     */
+    weekDays = computed(() => {
+        return getWeekDays(this.currentDate());
+    }, ...(ngDevMode ? [{ debugName: "weekDays" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WeekHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: WeekHeader, isStandalone: true, selector: "mglon-week-header", inputs: { currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mglon-week-header\">\n  <!-- Time column spacer -->\n  <div class=\"mglon-week-header__time-column\"></div>\n\n  <!-- Day columns -->\n  @for (day of weekDays(); track day.date.getTime()) {\n  <div class=\"mglon-week-header__day\" [class.mglon-week-header__day--today]=\"day.isToday\">\n    <div class=\"mglon-week-header__day-name\">{{ day.dayName }}</div>\n    <div class=\"mglon-week-header__day-number\">\n      <span>{{ day.dayNumber }}</span>\n    </div>\n  </div>\n  }\n</div>", styles: [".mglon-week-header{--week-header-time-col-width: var(--mglon-week-header-time-column-width, 60px);--week-header-bg: var(--mglon-week-header-bg, var(--mglon-schedule-surface));--week-header-border: var(--mglon-week-header-border, 2px solid var(--mglon-schedule-border-color));--week-header-scrollbar-width: var(--mglon-week-header-scrollbar-width, 8px);--week-header-z-index: var(--mglon-week-header-z-index, 10);--week-header-day-padding: var(--mglon-week-header-day-padding, 8px 4px);--week-header-day-name-size: var(--mglon-week-header-day-name-size, 11px);--week-header-day-name-color: var(--mglon-week-header-day-name-color, var(--mglon-schedule-on-surface-variant));--week-header-day-number-size: var(--mglon-week-header-day-number-size, 16px);--week-header-day-number-color: var(--mglon-week-header-day-number-color, var(--mglon-schedule-on-surface));--week-header-today-bg: var(--mglon-week-header-today-bg, var(--mglon-schedule-error));--week-header-today-color: var(--mglon-week-header-today-color, var(--mglon-schedule-on-error));--week-header-today-size: var(--mglon-week-header-today-size, 24px);display:grid;grid-template-columns:var(--week-header-time-col-width) repeat(7,1fr);position:sticky;top:0;z-index:var(--week-header-z-index);background:var(--week-header-bg);border-bottom:var(--week-header-border);padding-right:var(--week-header-scrollbar-width)}.mglon-week-header__time-column{border-right:1px solid var(--mglon-schedule-border-color)}.mglon-week-header__day{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--week-header-day-padding);border-right:1px solid var(--mglon-schedule-border-color)}.mglon-week-header__day--today{position:relative}.mglon-week-header__day--today .mglon-week-header__day-number{background:var(--week-header-today-bg);color:var(--week-header-today-color);width:var(--week-header-today-size);height:var(--week-header-today-size);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;position:relative;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.mglon-week-header__day--today .mglon-week-header__day-number span{display:block;transform:rotate(45deg)}.mglon-week-header__day-name{font-size:var(--week-header-day-name-size);font-weight:500;color:var(--week-header-day-name-color);text-transform:uppercase;margin-bottom:4px}.mglon-week-header__day-number{font-size:var(--week-header-day-number-size);font-weight:400;color:var(--week-header-day-number-color)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WeekHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-week-header', standalone: true, imports: [], template: "<div class=\"mglon-week-header\">\n  <!-- Time column spacer -->\n  <div class=\"mglon-week-header__time-column\"></div>\n\n  <!-- Day columns -->\n  @for (day of weekDays(); track day.date.getTime()) {\n  <div class=\"mglon-week-header__day\" [class.mglon-week-header__day--today]=\"day.isToday\">\n    <div class=\"mglon-week-header__day-name\">{{ day.dayName }}</div>\n    <div class=\"mglon-week-header__day-number\">\n      <span>{{ day.dayNumber }}</span>\n    </div>\n  </div>\n  }\n</div>", styles: [".mglon-week-header{--week-header-time-col-width: var(--mglon-week-header-time-column-width, 60px);--week-header-bg: var(--mglon-week-header-bg, var(--mglon-schedule-surface));--week-header-border: var(--mglon-week-header-border, 2px solid var(--mglon-schedule-border-color));--week-header-scrollbar-width: var(--mglon-week-header-scrollbar-width, 8px);--week-header-z-index: var(--mglon-week-header-z-index, 10);--week-header-day-padding: var(--mglon-week-header-day-padding, 8px 4px);--week-header-day-name-size: var(--mglon-week-header-day-name-size, 11px);--week-header-day-name-color: var(--mglon-week-header-day-name-color, var(--mglon-schedule-on-surface-variant));--week-header-day-number-size: var(--mglon-week-header-day-number-size, 16px);--week-header-day-number-color: var(--mglon-week-header-day-number-color, var(--mglon-schedule-on-surface));--week-header-today-bg: var(--mglon-week-header-today-bg, var(--mglon-schedule-error));--week-header-today-color: var(--mglon-week-header-today-color, var(--mglon-schedule-on-error));--week-header-today-size: var(--mglon-week-header-today-size, 24px);display:grid;grid-template-columns:var(--week-header-time-col-width) repeat(7,1fr);position:sticky;top:0;z-index:var(--week-header-z-index);background:var(--week-header-bg);border-bottom:var(--week-header-border);padding-right:var(--week-header-scrollbar-width)}.mglon-week-header__time-column{border-right:1px solid var(--mglon-schedule-border-color)}.mglon-week-header__day{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--week-header-day-padding);border-right:1px solid var(--mglon-schedule-border-color)}.mglon-week-header__day--today{position:relative}.mglon-week-header__day--today .mglon-week-header__day-number{background:var(--week-header-today-bg);color:var(--week-header-today-color);width:var(--week-header-today-size);height:var(--week-header-today-size);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;position:relative;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}.mglon-week-header__day--today .mglon-week-header__day-number span{display:block;transform:rotate(45deg)}.mglon-week-header__day-name{font-size:var(--week-header-day-name-size);font-weight:500;color:var(--week-header-day-name-color);text-transform:uppercase;margin-bottom:4px}.mglon-week-header__day-number{font-size:var(--week-header-day-number-size);font-weight:400;color:var(--week-header-day-number-color)}\n"] }]
+        }], propDecorators: { currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
+
+/**
+ * Component representing a single 30-minute time slot in the week view.
+ *
+ * Displays the time label (e.g., "09:00") only for the first column (time gutter).
+ * Each slot has a minimum height of 50px and can contain events.
+ *
+ * @example
+ * ```html
+ * <mglon-time-slot
+ *   [slot]="timeSlot"
+ *   [showTimeLabel]="true">
+ * </mglon-time-slot>
+ * ```
+ */
+class TimeSlotComponent {
+    /**
+     * The time slot data to display
+     */
+    slot = input.required(...(ngDevMode ? [{ debugName: "slot" }] : []));
+    /**
+     * Whether to show the time label (only true for first column - time gutter)
+     */
+    showTimeLabel = input(false, ...(ngDevMode ? [{ debugName: "showTimeLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TimeSlotComponent, isStandalone: true, selector: "mglon-time-slot", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, showTimeLabel: { classPropertyName: "showTimeLabel", publicName: "showTimeLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mglon-time-slot\" [class.mglon-time-slot--hour]=\"slot().minute === 0\"\n  [class.mglon-time-slot--today]=\"slot().isToday\">\n  @if (showTimeLabel()) {\n  <span class=\"mglon-time-slot__time-label\">{{ slot().timeLabel }}</span>\n  }\n</div>", styles: [".mglon-time-slot{--time-slot-height: var(--mglon-time-slot-height, 50px);--time-slot-border-color: var(--mglon-time-slot-border-color, var(--mglon-schedule-border-color));--time-slot-border-col-light: var(--mglon-time-slot-light-border-color, var(--mglon-schedule-border-color-light, #f0f0f0));--time-slot-bg: var(--mglon-time-slot-bg, var(--mglon-schedule-surface));--time-slot-label-color: var(--mglon-time-slot-label-color, var(--mglon-schedule-on-surface-variant));--time-slot-label-size: var(--mglon-time-slot-label-size, 12px);min-height:var(--time-slot-height);border-right:1px solid var(--time-slot-border-color);border-bottom:1px solid var(--time-slot-border-col-light);position:relative;background:var(--time-slot-bg)}.mglon-time-slot__time-label{position:absolute;top:-8px;right:8px;font-size:var(--time-slot-label-size);color:var(--time-slot-label-color);background:var(--time-slot-bg);padding:0 4px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimeSlotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-time-slot', standalone: true, imports: [], template: "<div class=\"mglon-time-slot\" [class.mglon-time-slot--hour]=\"slot().minute === 0\"\n  [class.mglon-time-slot--today]=\"slot().isToday\">\n  @if (showTimeLabel()) {\n  <span class=\"mglon-time-slot__time-label\">{{ slot().timeLabel }}</span>\n  }\n</div>", styles: [".mglon-time-slot{--time-slot-height: var(--mglon-time-slot-height, 50px);--time-slot-border-color: var(--mglon-time-slot-border-color, var(--mglon-schedule-border-color));--time-slot-border-col-light: var(--mglon-time-slot-light-border-color, var(--mglon-schedule-border-color-light, #f0f0f0));--time-slot-bg: var(--mglon-time-slot-bg, var(--mglon-schedule-surface));--time-slot-label-color: var(--mglon-time-slot-label-color, var(--mglon-schedule-on-surface-variant));--time-slot-label-size: var(--mglon-time-slot-label-size, 12px);min-height:var(--time-slot-height);border-right:1px solid var(--time-slot-border-color);border-bottom:1px solid var(--time-slot-border-col-light);position:relative;background:var(--time-slot-bg)}.mglon-time-slot__time-label{position:absolute;top:-8px;right:8px;font-size:var(--time-slot-label-size);color:var(--time-slot-label-color);background:var(--time-slot-bg);padding:0 4px}\n"] }]
+        }], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slot", required: true }] }], showTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimeLabel", required: false }] }] } });
+
+class Selection {
+    // Input for the selection corners (null means no selection)
+    selection = input(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    // Input to control visibility (only show while actively selecting)
+    isSelecting = input(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : []));
+    // Computed style for the indicator based on selection corners
+    indicatorStyle = computed(() => {
+        const sel = this.selection();
+        const selecting = this.isSelecting();
+        if (!sel || !selecting) {
+            return { display: 'none' };
+        }
+        return {
+            top: `${sel.top}px`,
+            left: `${sel.left}px`,
+            width: `${sel.right - sel.left}px`,
+            height: `${sel.bottom - sel.top}px`,
+            display: 'block'
+        };
+    }, ...(ngDevMode ? [{ debugName: "indicatorStyle" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Selection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Selection, isStandalone: true, selector: "mglon-selection", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isSelecting: { classPropertyName: "isSelecting", publicName: "isSelecting", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"mglon-selection__container\">\n  <span class=\"mglon-selection__indicator\" [ngStyle]=\"indicatorStyle()\"></span>\n</div>", styles: [":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mglon-selection__container{position:relative;width:100%;height:100%}.mglon-selection__indicator{position:absolute;pointer-events:none;background-color:var(--mglon-selection-background, color-mix(in srgb, var(--mglon-schedule-primary-900, #1a237e) 30%, transparent));background-image:repeating-linear-gradient(to right,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px),repeating-linear-gradient(to right,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px),repeating-linear-gradient(to bottom,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px),repeating-linear-gradient(to bottom,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px);background-size:100% var(--mglon-selection-border-width, 2px),100% var(--mglon-selection-border-width, 2px),var(--mglon-selection-border-width, 2px) 100%,var(--mglon-selection-border-width, 2px) 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Selection, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-selection', standalone: true, imports: [CommonModule], template: "<div class=\"mglon-selection__container\">\n  <span class=\"mglon-selection__indicator\" [ngStyle]=\"indicatorStyle()\"></span>\n</div>", styles: [":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mglon-selection__container{position:relative;width:100%;height:100%}.mglon-selection__indicator{position:absolute;pointer-events:none;background-color:var(--mglon-selection-background, color-mix(in srgb, var(--mglon-schedule-primary-900, #1a237e) 30%, transparent));background-image:repeating-linear-gradient(to right,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px),repeating-linear-gradient(to right,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px),repeating-linear-gradient(to bottom,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px),repeating-linear-gradient(to bottom,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 0,var(--mglon-selection-border-color, var(--mglon-schedule-primary)) 12px,transparent 12px,transparent 20px);background-size:100% var(--mglon-selection-border-width, 2px),100% var(--mglon-selection-border-width, 2px),var(--mglon-selection-border-width, 2px) 100%,var(--mglon-selection-border-width, 2px) 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}\n"] }]
+        }], propDecorators: { selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], isSelecting: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelecting", required: false }] }] } });
+
+const CELL_HEADER_HEIGHT = 24;
+/** Height of each event slot row in pixels */
+const SLOT_HEIGHT = 20;
+/** Vertical gap between event slots in pixels */
+const SLOT_GAP = 2;
+/** Default number of visible event rows in month view */
+const DEFAULT_VISIBLE_EVENT_ROWS = 3;
+const DEFAULT_CONFIG = {
+    initialDate: new Date(),
+    initialView: 'month',
+    views: ['month', 'week', 'day', 'resource'],
+    slotDuration: 30,
+    dayStartHour: 0,
+    dayEndHour: 23,
+    resourceSidebarWidth: 200,
+    allowOverlaps: true,
+    locale: 'en',
+    weekStartsOn: 0,
+    theme: 'theme-light', // Asumimos un tema claro por defecto
+    height: '100%',
+    visibleEventRows: DEFAULT_VISIBLE_EVENT_ROWS,
+    backgroundSelection: true,
+    showNowIndicator: true,
+    editable: true,
+    resizableEvents: true,
+    showSidebar: true
+};
+const DEFAULT_RESOURCE_INPUTS = {
+    tags: [],
+    isReadOnly: false,
+    isBlocked: false,
+    isActive: true,
+    resizableEvents: true
+};
+const DEFAULT_EVENT_INPUTS = {
+    color: '#3788d8',
+    allDay: false,
+    description: '',
+    data: null,
+};
+
+/**
+ * UI Configuration Types
+ *
+ * Type definitions organized by functional areas (Header, Sidebar, Grid)
+ * for controlling the visual appearance of schedule components.
+ */
+/**
+ * Default UI configuration
+ */
+const DEFAULT_UI_CONFIG = {
+    header: {
+        buttonGroup: {
+            appearance: 'solid',
+            rounded: 'md',
+            density: 'comfortable'
+        },
+        iconButtons: {
+            rounded: 'md'
+        },
+        todayButton: {
+            rounded: 'md',
+            appearance: 'ghost'
+        }
+    },
+    sidebar: {
+        resourceItems: {
+            rounded: 'sm',
+            density: 'comfortable'
+        }
+    },
+    grid: {
+        eventSlots: {
+            rounded: 'sm'
+        },
+        overflowIndicator: {
+            rounded: 'sm',
+            appearance: 'ghost'
+        },
+        useDynamicColors: true
+    }
+};
+
+const initialCalendarState = {
+    currentDate: new Date(),
+    viewMode: 'month',
+    config: DEFAULT_CONFIG,
+    uiConfig: DEFAULT_UI_CONFIG,
+    events: new Map(),
+    resources: new Map(),
+    weekRowHeight: 0,
+    expandedWeekIndex: null,
+    dragState: {
+        eventId: null,
+        grabDate: null,
+        hoverDate: null
+    },
+    resizeState: {
+        eventId: null,
+        side: null,
+        hoverDate: null
+    },
+    interactionMode: 'none',
+    hoveredEventId: null
+};
+const CalendarStore = signalStore({ providedIn: 'root' }, withState(initialCalendarState), withComputed(({ resources, events, currentDate, viewMode, config }) => ({
+    // Date & View Computeds
+    viewDate: computed(() => currentDate()),
+    currentView: computed(() => viewMode()),
+    viewRange: computed(() => getViewRange(currentDate(), viewMode())),
+    formattedDate: computed(() => {
+        const date = currentDate();
+        return new Intl.DateTimeFormat(config().locale, {
+            month: 'long',
+            year: 'numeric',
+            day: viewMode() === 'day' ? 'numeric' : undefined
+        }).format(date);
+    }),
+    // Resource Computeds
+    allResources: computed(() => Array.from(resources().values())),
+    resourceCount: computed(() => resources().size),
+    activeResources: computed(() => Array.from(resources().values()).filter(r => r.isActive !== false)),
+    inactiveResources: computed(() => Array.from(resources().values()).filter(r => r.isActive === false)),
+    // Event Computeds
+    allEvents: computed(() => Array.from(events().values())),
+    eventCount: computed(() => events().size),
+    currentViewEvents: computed(() => {
+        const range = getViewRange(currentDate(), viewMode());
+        const resMap = resources();
+        return Array.from(events().values()).filter(event => {
+            // Exclude 'recurrent' templates from rendering.
+            // Their expanded instances ('event' type) will be included instead.
+            if (event.type === 'recurrent')
+                return false;
+            const inRange = isEventInRange(event, range);
+            if (!inRange)
+                return false;
+            if (event.resourceId) {
+                const res = resMap.get(event.resourceId);
+                return res?.isActive !== false;
+            }
+            return true;
+        });
+    }),
+    /**
+     * Minimum height for a week row in month view.
+     * Calculated from: CELL_HEADER_HEIGHT + (n * SLOT_HEIGHT) + ((n-1) * SLOT_GAP)
+     * where n = visibleEventRows from config.
+     */
+    minWeekRowHeight: computed(() => {
+        const rows = config().visibleEventRows ?? DEFAULT_VISIBLE_EVENT_ROWS;
+        // Formula: header + (rows * slot height) + (rows * slot gap)
+        // The last gap serves as bottom padding for the row.
+        return CELL_HEADER_HEIGHT + (rows * SLOT_HEIGHT) + (rows * SLOT_GAP);
+    })
+})), withMethods((store) => {
+    const interaction$ = new Subject();
+    return {
+        /** Returns the observable stream of all event interactions */
+        getInteractions() {
+            return interaction$.asObservable();
+        },
+        /** Dispatches a new interaction event to all subscribers */
+        dispatchInteraction(type, eventId, payload) {
+            interaction$.next({ type, eventId, payload });
+        },
+        // --- Navigation & View Methods ---
+        setDate(date) {
+            patchState(store, { currentDate: date });
+        },
+        changeView(view) {
+            patchState(store, { viewMode: view });
+        },
+        updateConfig(config) {
+            patchState(store, (state) => ({
+                config: { ...state.config, ...config },
+                currentDate: config.initialDate ? new Date(config.initialDate) : state.currentDate,
+                viewMode: config.initialView || state.viewMode
+            }));
+            if (config.resources) {
+                this.registerResources(config.resources);
+            }
+        },
+        next() {
+            const mode = store.viewMode();
+            const current = new Date(store.currentDate());
+            switch (mode) {
+                case 'day':
+                case 'resource':
+                    current.setDate(current.getDate() + 1);
+                    break;
+                case 'week':
+                    current.setDate(current.getDate() + 7);
+                    break;
+                case 'month':
+                    current.setMonth(current.getMonth() + 1);
+                    break;
+            }
+            patchState(store, { currentDate: current });
+        },
+        prev() {
+            const mode = store.viewMode();
+            const current = new Date(store.currentDate());
+            switch (mode) {
+                case 'day':
+                case 'resource':
+                    current.setDate(current.getDate() - 1);
+                    break;
+                case 'week':
+                    current.setDate(current.getDate() - 7);
+                    break;
+                case 'month':
+                    current.setMonth(current.getMonth() - 1);
+                    break;
+            }
+            patchState(store, { currentDate: current });
+        },
+        today() {
+            patchState(store, { currentDate: new Date() });
+        },
+        // --- Resource Methods ---
+        registerResources(resources) {
+            patchState(store, (state) => {
+                const newMap = new Map(state.resources);
+                resources.forEach(r => newMap.set(r.id, r));
+                return { resources: newMap };
+            });
+        },
+        registerResource(resource) {
+            patchState(store, (state) => {
+                const newMap = new Map(state.resources);
+                newMap.set(resource.id, resource);
+                return { resources: newMap };
+            });
+        },
+        updateResource(id, partial) {
+            patchState(store, (state) => {
+                const resource = state.resources.get(id);
+                if (!resource)
+                    return state;
+                const newMap = new Map(state.resources);
+                newMap.set(id, { ...resource, ...partial });
+                return { resources: newMap };
+            });
+        },
+        unregisterResource(id) {
+            patchState(store, (state) => {
+                const newMap = new Map(state.resources);
+                newMap.delete(id);
+                return { resources: newMap };
+            });
+        },
+        getResource(id) {
+            return store.resources().get(id);
+        },
+        toggleResource(id) {
+            const resource = store.resources().get(id);
+            if (resource) {
+                this.updateResource(id, { isActive: resource.isActive === false });
+            }
+        },
+        showResource(id) {
+            this.updateResource(id, { isActive: true });
+        },
+        hideResource(id) {
+            this.updateResource(id, { isActive: false });
+        },
+        // --- Event Methods ---
+        setEvents(events) {
+            const eventsMap = new Map();
+            events.forEach(e => eventsMap.set(e.id, e));
+            patchState(store, { events: eventsMap });
+        },
+        registerEvent(event) {
+            patchState(store, (state) => {
+                const newMap = new Map(state.events);
+                newMap.set(event.id, event);
+                return { events: newMap };
+            });
+        },
+        updateEvent(id, partial) {
+            patchState(store, (state) => {
+                const event = state.events.get(id);
+                if (!event)
+                    return state;
+                const newMap = new Map(state.events);
+                newMap.set(id, { ...event, ...partial });
+                return { events: newMap };
+            });
+        },
+        unregisterEvent(id) {
+            patchState(store, (state) => {
+                const newMap = new Map(state.events);
+                newMap.delete(id);
+                return { events: newMap };
+            });
+        },
+        getEvent(id) {
+            return store.events().get(id);
+        },
+        getEventsByResource(resourceId) {
+            return Array.from(store.events().values()).filter(event => event.resourceId === resourceId);
+        },
+        clear() {
+            patchState(store, {
+                events: new Map(),
+                resources: new Map(),
+            });
+        },
+        setUIConfig(config) {
+            patchState(store, (state) => ({
+                uiConfig: {
+                    header: config.header
+                        ? {
+                            buttonGroup: config.header.buttonGroup
+                                ? { ...state.uiConfig.header.buttonGroup, ...config.header.buttonGroup }
+                                : state.uiConfig.header.buttonGroup,
+                            iconButtons: config.header.iconButtons
+                                ? { ...state.uiConfig.header.iconButtons, ...config.header.iconButtons }
+                                : state.uiConfig.header.iconButtons,
+                            todayButton: config.header.todayButton
+                                ? { ...state.uiConfig.header.todayButton, ...config.header.todayButton }
+                                : state.uiConfig.header.todayButton
+                        }
+                        : state.uiConfig.header,
+                    sidebar: config.sidebar
+                        ? {
+                            resourceItems: config.sidebar.resourceItems
+                                ? { ...state.uiConfig.sidebar.resourceItems, ...config.sidebar.resourceItems }
+                                : state.uiConfig.sidebar.resourceItems,
+                            background: config.sidebar.background !== undefined
+                                ? config.sidebar.background
+                                : state.uiConfig.sidebar.background,
+                            rounded: config.sidebar.rounded !== undefined
+                                ? config.sidebar.rounded
+                                : state.uiConfig.sidebar.rounded
+                        }
+                        : state.uiConfig.sidebar,
+                    grid: config.grid
+                        ? {
+                            eventSlots: config.grid.eventSlots
+                                ? { ...state.uiConfig.grid.eventSlots, ...config.grid.eventSlots }
+                                : state.uiConfig.grid.eventSlots,
+                            overflowIndicator: config.grid.overflowIndicator
+                                ? { ...state.uiConfig.grid.overflowIndicator, ...config.grid.overflowIndicator }
+                                : state.uiConfig.grid.overflowIndicator,
+                            useDynamicColors: config.grid.useDynamicColors !== undefined
+                                ? config.grid.useDynamicColors
+                                : state.uiConfig.grid.useDynamicColors
+                        }
+                        : state.uiConfig.grid
+                }
+            }));
+        },
+        /**
+         * Sets the height of a week row container.
+         * Called once from the first week's ResizeObserver.
+         */
+        setWeekRowHeight(height) {
+            patchState(store, { weekRowHeight: height });
+        },
+        /**
+         * Toggles expansion of a week. Only one week can be expanded at a time.
+         * If the same week is toggled twice, it collapses.
+         * @param weekIndex - The index of the week to toggle (0-5)
+         */
+        toggleWeekExpansion(weekIndex) {
+            const current = store.expandedWeekIndex();
+            patchState(store, {
+                expandedWeekIndex: current === weekIndex ? null : weekIndex
+            });
+        },
+        // --- Drag & Drop Methods ---
+        setDragStart(eventId, grabDate) {
+            patchState(store, {
+                dragState: {
+                    eventId,
+                    grabDate,
+                    hoverDate: null
+                }
+            });
+        },
+        setDragHover(date) {
+            patchState(store, (state) => ({
+                dragState: {
+                    ...state.dragState,
+                    hoverDate: date
+                }
+            }));
+        },
+        clearDragState() {
+            patchState(store, {
+                dragState: {
+                    eventId: null,
+                    grabDate: null,
+                    hoverDate: null
+                }
+            });
+        },
+        /**
+         * Updates the position of the currently dragged event based on the hover date.
+         * Calculates the offset between the original grab date and the new hover date.
+         */
+        updateDraggedEventPosition() {
+            const { eventId, grabDate, hoverDate } = store.dragState();
+            if (!eventId || !grabDate || !hoverDate)
+                return;
+            const event = store.events().get(eventId);
+            if (!event)
+                return;
+            const offset = differenceInCalendarDays(hoverDate, grabDate);
+            if (offset === 0)
+                return;
+            if (event.type === 'all-day') {
+                const partial = {
+                    date: addDays(event.date, offset)
+                };
+                if (event.endDate) {
+                    partial.endDate = addDays(event.endDate, offset);
+                }
+                this.updateEvent(eventId, partial);
+            }
+            else {
+                const partial = {
+                    start: addDays(event.start, offset),
+                    end: addDays(event.end, offset)
+                };
+                this.updateEvent(eventId, partial);
+            }
+            // Update the grab date to the new hover date to maintain the relative "grabbed" point
+            patchState(store, (state) => ({
+                dragState: {
+                    ...state.dragState,
+                    grabDate: hoverDate
+                }
+            }));
+        },
+        // --- Resizing Methods ---
+        setResizeStart(eventId, side) {
+            patchState(store, {
+                resizeState: {
+                    eventId,
+                    side,
+                    hoverDate: null
+                }
+            });
+        },
+        setResizeHover(date) {
+            patchState(store, (state) => ({
+                resizeState: {
+                    ...state.resizeState,
+                    hoverDate: date
+                }
+            }));
+        },
+        clearResizeState() {
+            patchState(store, {
+                resizeState: {
+                    eventId: null,
+                    side: null,
+                    hoverDate: null
+                }
+            });
+        },
+        /**
+         * Updates the start or end date of the currently resized event based on the hover date.
+         */
+        updateResizedEvent() {
+            const { eventId, side, hoverDate } = store.resizeState();
+            if (!eventId || !side || !hoverDate)
+                return;
+            const event = store.events().get(eventId);
+            if (!event)
+                return;
+            const normalizedHover = startOfDay(hoverDate);
+            if (event.type === 'all-day') {
+                const partial = {};
+                const eventDate = startOfDay(event.date);
+                const currentEnd = event.endDate ? startOfDay(event.endDate) : eventDate;
+                if (side === 'left') {
+                    // Cannot exceed the current end date
+                    partial.date = normalizedHover > currentEnd ? currentEnd : normalizedHover;
+                }
+                else if (side === 'right') {
+                    // Cannot be before the current start date
+                    partial.endDate = normalizedHover < eventDate ? eventDate : normalizedHover;
+                }
+                this.updateEvent(eventId, partial);
+            }
+            else {
+                const partial = {};
+                if (side === 'left') {
+                    // Cannot exceed end time
+                    partial.start = hoverDate > event.end ? event.end : hoverDate;
+                }
+                else if (side === 'right') {
+                    // Cannot be before start time
+                    partial.end = hoverDate < event.start ? event.start : hoverDate;
+                }
+                this.updateEvent(eventId, partial);
+            }
+        },
+        // --- Interaction Mutex ---
+        setInteractionMode(mode) {
+            patchState(store, { interactionMode: mode });
+        },
+        // --- Hover State Methods ---
+        setHoveredEvent(eventId) {
+            patchState(store, { hoveredEventId: eventId });
+        }
+    };
+}));
+
+class Selectable {
+}
+
+/**
+ * Directive that enables mouse-based selection on calendar views.
+ *
+ * Works with components that implement the Selectable interface to translate
+ * visual coordinates into dates/resources. Handles all mouse interaction logic
+ * and emits selection events.
+ *
+ * @example
+ * ```html
+ * <div [mglonSelectable]="this"
+ *      (selectionStart)="onStart($event)"
+ *      (selectionChange)="onChange($event)"
+ *      (selectionEnd)="onEnd($event)">
+ * </div>
+ * ```
+ */
+class SelectableDirective {
+    elementRef = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    store = inject(CalendarStore);
+    /**
+     * The component that implements Selectable interface.
+     * Provides the getDateFromPoint() method to translate coordinates to dates.
+     */
+    selectable = null;
+    /**
+     * Emitted when user starts a selection (mousedown)
+     */
+    selectionStart = output();
+    /**
+     * Emitted when selection changes (mousemove while selecting)
+     */
+    selectionChange = output();
+    /**
+     * Emitted when selection ends (mouseup)
+     */
+    selectionEnd = output();
+    /**
+     * Current selection rectangle coordinates (relative to container)
+     */
+    selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /**
+     * Whether user is currently selecting (mouse button is down)
+     */
+    isSelecting = signal(false, ...(ngDevMode ? [{ debugName: "isSelecting" }] : []));
+    /** Starting point of the selection */
+    startPoint = null;
+    /** Date/resource data at the starting point */
+    startData = null;
+    /** Date/resource data at the current cursor position */
+    currentData = null;
+    /**
+     * Handles mousedown event to initiate selection
+     */
+    onMouseDown(event) {
+        if (!this.canSelect() || this.store.interactionMode() !== 'none')
+            return;
+        this.store.setInteractionMode('selecting');
+        const coords = this.getRelativeCoordinates(event);
+        this.startSelection(coords, event.clientX, event.clientY);
+    }
+    /**
+     * Handles mousemove event to update selection
+     */
+    onMouseMove(event) {
+        if (!this.isSelecting() || !this.startPoint || !this.canSelect())
+            return;
+        const coords = this.getRelativeCoordinates(event);
+        this.updateSelection(coords, event.clientX, event.clientY);
+    }
+    /**
+     * Handles mouseup event to complete selection
+     */
+    onMouseUp(event) {
+        if (!this.isSelecting() || !this.canSelect())
+            return;
+        this.store.setInteractionMode('none');
+        this.endSelection();
+    }
+    /**
+     * Checks if selection is possible (browser platform and selectable is set)
+     */
+    canSelect() {
+        return isPlatformBrowser(this.platformId) && !!this.selectable;
+    }
+    /**
+     * Converts mouse event coordinates to coordinates relative to the container
+     * Takes into account scroll position for scrollable containers.
+     *
+     * @param event - Mouse event with clientX/clientY
+     * @returns Coordinates relative to the container's top-left corner (including scroll)
+     */
+    getRelativeCoordinates(event) {
+        const containerElement = this.elementRef.nativeElement;
+        const rect = containerElement.getBoundingClientRect();
+        return {
+            x: event.clientX - rect.left + containerElement.scrollLeft,
+            y: event.clientY - rect.top + containerElement.scrollTop
+        };
+    }
+    /**
+     * Initiates a new selection
+     *
+     * @param coords - Relative coordinates where selection started
+     * @param absoluteX - Absolute X coordinate (for element detection)
+     * @param absoluteY - Absolute Y coordinate (for element detection)
+     */
+    startSelection(coords, absoluteX, absoluteY) {
+        this.isSelecting.set(true);
+        this.startPoint = coords;
+        // Get the date/resource from the starting point
+        if (!this.selectable)
+            return;
+        this.startData = this.selectable.getDateFromPoint(coords.x, coords.y);
+        this.currentData = this.startData;
+        // Initialize selection rectangle at a single point
+        this.selection.set({
+            top: coords.y,
+            left: coords.x,
+            bottom: coords.y,
+            right: coords.x
+        });
+        // Emit selection start event
+        this.selectionStart.emit({
+            start: this.startData,
+            end: this.currentData
+        });
+    }
+    /**
+     * Updates an ongoing selection
+     *
+     * @param coords - Current relative coordinates
+     * @param absoluteX - Absolute X coordinate (for element detection)
+     * @param absoluteY - Absolute Y coordinate (for element detection)
+     */
+    updateSelection(coords, absoluteX, absoluteY) {
+        if (!this.startPoint)
+            return;
+        // Calculate selection rectangle (supports dragging in any direction)
+        const rect = this.calculateSelectionRectangle(this.startPoint, coords);
+        this.selection.set(rect);
+        // Get the date/resource from the current point
+        if (!this.selectable)
+            return;
+        this.currentData = this.selectable.getDateFromPoint(coords.x, coords.y);
+        // Emit selection change event
+        this.selectionChange.emit({
+            start: this.startData,
+            end: this.currentData
+        });
+    }
+    /**
+     * Completes the current selection
+     */
+    endSelection() {
+        this.isSelecting.set(false);
+        // Emit final selection event
+        this.selectionEnd.emit({
+            start: this.startData,
+            end: this.currentData
+        });
+        // Clear selection state
+        this.clearSelection();
+    }
+    /**
+     * Calculates the selection rectangle from start and end points.
+     * Handles dragging in any direction by using min/max.
+     *
+     * @param start - Starting point coordinates
+     * @param end - Ending point coordinates
+     * @returns Selection rectangle with top, left, bottom, right
+     */
+    calculateSelectionRectangle(start, end) {
+        return {
+            top: Math.min(start.y, end.y),
+            left: Math.min(start.x, end.x),
+            bottom: Math.max(start.y, end.y),
+            right: Math.max(start.x, end.x)
+        };
+    }
+    /**
+     * Clears all selection state
+     */
+    clearSelection() {
+        this.selection.set(null);
+        this.startPoint = null;
+        this.startData = null;
+        this.currentData = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SelectableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SelectableDirective, isStandalone: true, selector: "[mglonSelectable]", inputs: { selectable: ["mglonSelectable", "selectable"] }, outputs: { selectionStart: "selectionStart", selectionChange: "selectionChange", selectionEnd: "selectionEnd" }, host: { listeners: { "mousedown": "onMouseDown($event)", "mousemove": "onMouseMove($event)", "mouseup": "onMouseUp($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SelectableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglonSelectable]',
+                    standalone: true
+                }]
+        }], propDecorators: { selectable: [{
+                type: Input,
+                args: ['mglonSelectable']
+            }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }], onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }] } });
+
+/**
+ * Week grid component displaying time slots for 7 days.
+ *
+ * Implements the Selectable interface to enable time-based selection.
+ * Displays a scrollable grid of 30-minute time slots (48 per day).
+ *
+ * Features:
+ * - 7 columns (days) × 48 rows (time slots)
+ * - Scrollable container
+ * - Mouse-based time selection
+ * - 50px minimum height per slot
+ *
+ * @example
+ * ```html
+ * <mglon-week-grid
+ *   [currentDate]="selectedDate"
+ *   (selectionEnd)="onTimeRangeSelected($event)">
+ * </mglon-week-grid>
+ * ```
+ */
+class WeekGrid {
+    elementRef = inject(ElementRef);
+    store = inject(CalendarStore);
+    backgroundSelection = computed(() => this.store.config().backgroundSelection ?? true, ...(ngDevMode ? [{ debugName: "backgroundSelection" }] : []));
+    showNowIndicator = computed(() => this.store.config().showNowIndicator ?? true, ...(ngDevMode ? [{ debugName: "showNowIndicator" }] : []));
+    /**
+     * Reference to the SelectableDirective instance
+     */
+    selectableDirective = viewChild(SelectableDirective, ...(ngDevMode ? [{ debugName: "selectableDirective" }] : []));
+    /**
+     * The date to display the week for
+     */
+    currentDate = input(new Date(), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+    /**
+     * Selection events
+     */
+    selectionStart = output();
+    selectionChange = output();
+    selectionEnd = output();
+    /**
+     * Computed 2D array of time slots [days][slots]
+     */
+    timeSlots = computed(() => {
+        return getWeekTimeSlots(this.currentDate());
+    }, ...(ngDevMode ? [{ debugName: "timeSlots" }] : []));
+    /**
+     * Computed array of week days for column headers
+     */
+    weekDays = computed(() => {
+        return getWeekDays(this.currentDate());
+    }, ...(ngDevMode ? [{ debugName: "weekDays" }] : []));
+    /**
+     * Computed index of today's column (-1 if today is not in this week)
+     */
+    todayColumnIndex = computed(() => {
+        const days = this.weekDays();
+        return days.findIndex(day => day.isToday);
+    }, ...(ngDevMode ? [{ debugName: "todayColumnIndex" }] : []));
+    /**
+     * Slot height in pixels (matches CSS min-height)
+     */
+    SLOT_HEIGHT = 50;
+    /**
+     * Time column width in pixels (matches CSS grid-template-columns)
+     */
+    TIME_COLUMN_WIDTH = 60;
+    /**
+     * Calculates the left position for the today indicator line
+     * @returns Position in pixels from the left edge
+     */
+    getTodayIndicatorPosition() {
+        const index = this.todayColumnIndex();
+        if (index === -1)
+            return 0;
+        const gridElement = this.elementRef.nativeElement;
+        if (!gridElement)
+            return 0;
+        const gridRect = gridElement.getBoundingClientRect();
+        const dayColumnWidth = (gridRect.width - this.TIME_COLUMN_WIDTH - 8) / 7; // -8 for scrollbar
+        // Position at the center of the column
+        return this.TIME_COLUMN_WIDTH + (dayColumnWidth * index) + (dayColumnWidth / 2);
+    }
+    /**
+     * Implements Selectable.getDateFromPoint()
+     *
+     * Translates visual coordinates into a specific date and time.
+     *
+     * Algorithm:
+     * 1. Convert relative coordinates to absolute
+     * 2. Determine which day column (0-6)
+     * 3. Determine which time slot row (0-47)
+     * 4. Calculate exact time (hour + minute)
+     * 5. Return Date object with specific date and time
+     *
+     * @param x - X coordinate relative to the grid container
+     * @param y - Y coordinate relative to the grid container
+     * @returns Object with date property (including time), or null if invalid
+     */
+    getDateFromPoint(x, y) {
+        const gridElement = this.elementRef.nativeElement;
+        if (!gridElement)
+            return null;
+        // Account for time column
+        const adjustedX = x - this.TIME_COLUMN_WIDTH;
+        if (adjustedX < 0)
+            return null; // Clicked on time column
+        // Calculate which day column (0-6)
+        const gridRect = gridElement.getBoundingClientRect();
+        const dayColumnWidth = (gridRect.width - this.TIME_COLUMN_WIDTH) / 7;
+        const dayIndex = Math.floor(adjustedX / dayColumnWidth);
+        if (dayIndex < 0 || dayIndex > 6)
+            return null;
+        // Calculate which time slot (0-47)
+        const slotIndex = Math.floor(y / this.SLOT_HEIGHT);
+        if (slotIndex < 0 || slotIndex > 47)
+            return null;
+        // Get the time slot
+        const timeSlots = this.timeSlots();
+        if (!timeSlots[dayIndex] || !timeSlots[dayIndex][slotIndex])
+            return null;
+        return { date: timeSlots[dayIndex][slotIndex].date };
+    }
+    /**
+     * Handles selection start event
+     */
+    onSelectionStart(result) {
+        this.selectionStart.emit(result);
+    }
+    /**
+     * Handles selection change event
+     */
+    onSelectionChange(result) {
+        this.selectionChange.emit(result);
+    }
+    /**
+     * Handles selection end event
+     */
+    onSelectionEnd(result) {
+        this.selectionEnd.emit(result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WeekGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: WeekGrid, isStandalone: true, selector: "mglon-week-grid", inputs: { currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionStart: "selectionStart", selectionChange: "selectionChange", selectionEnd: "selectionEnd" }, viewQueries: [{ propertyName: "selectableDirective", first: true, predicate: SelectableDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mglon-week-grid\" [mglonSelectable]=\"backgroundSelection() ? this : null\"\n  (selectionStart)=\"onSelectionStart($event)\" (selectionChange)=\"onSelectionChange($event)\"\n  (selectionEnd)=\"onSelectionEnd($event)\">\n\n  <!-- Time column -->\n  <div class=\"mglon-week-grid__time-column\">\n    @for (slot of timeSlots()[0]; track slot.date.getTime()) {\n    <mglon-time-slot [slot]=\"slot\" [showTimeLabel]=\"true\"></mglon-time-slot>\n    }\n  </div>\n\n  <!-- Day columns -->\n  @for (daySlots of timeSlots(); track $index) {\n  <div class=\"mglon-week-grid__day-column\">\n    @for (slot of daySlots; track slot.date.getTime()) {\n    <mglon-time-slot [slot]=\"slot\"></mglon-time-slot>\n    }\n  </div>\n  }\n\n  <!-- Selection overlay -->\n  @if (selectableDirective() && backgroundSelection()) {\n  <mglon-selection [selection]=\"selectableDirective()!.selection()\"\n    [isSelecting]=\"selectableDirective()!.isSelecting()\">\n  </mglon-selection>\n  }\n\n  <!-- Today indicator line -->\n  @if (todayColumnIndex() !== -1 && showNowIndicator()) {\n  <div class=\"mglon-week-grid__today-indicator\" [style.left.px]=\"getTodayIndicatorPosition()\">\n  </div>\n  }\n\n  <!-- Events Overlay -->\n  <div class=\"mglon-week-grid__events-overlay\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".mglon-week-grid{--week-grid-time-col-width: var(--mglon-week-grid-time-column-width, 60px);--week-grid-height: var(--mglon-week-grid-height, calc(100vh - 200px) );--week-grid-padding-top: var(--mglon-week-grid-padding-top, 12px);--week-grid-scrollbar-width: var(--mglon-week-grid-scrollbar-width, 8px);--week-grid-scrollbar-track-bg: var(--mglon-week-grid-scrollbar-track-bg, var(--mglon-schedule-surface-variant));--week-grid-scrollbar-thumb-bg: var(--mglon-week-grid-scrollbar-thumb-bg, var(--mglon-schedule-border-color));--week-grid-scrollbar-thumb-hover-bg: var(--mglon-week-grid-scrollbar-thumb-hover-bg, var(--mglon-schedule-on-surface-variant));--week-grid-time-col-bg: var(--mglon-week-grid-time-column-bg, var(--mglon-schedule-surface-variant));display:grid;grid-template-columns:var(--week-grid-time-col-width) repeat(7,1fr);position:relative;overflow-y:auto;overflow-x:hidden;max-height:var(--week-grid-height);-webkit-user-select:none;user-select:none;cursor:crosshair;padding-top:var(--week-grid-padding-top)}.mglon-week-grid::-webkit-scrollbar{width:var(--week-grid-scrollbar-width)}.mglon-week-grid::-webkit-scrollbar-track{background:var(--week-grid-scrollbar-track-bg)}.mglon-week-grid::-webkit-scrollbar-thumb{background:var(--week-grid-scrollbar-thumb-bg);border-radius:4px}.mglon-week-grid::-webkit-scrollbar-thumb:hover{background:var(--week-grid-scrollbar-thumb-hover-bg)}.mglon-week-grid__time-column{display:flex;flex-direction:column;border-right:1px solid var(--mglon-schedule-border);background:var(--week-grid-time-col-bg)}.mglon-week-grid__day-column{display:flex;flex-direction:column;border-right:1px solid var(--mglon-schedule-border)}.mglon-week-grid__day-column:last-child{border-right:none}.mglon-week-grid__today-indicator{--mglon-week-grid-today-color: var(--mglon-schedule-error);position:absolute;top:-60px;height:2460px;width:2px;background:var(--mglon-week-grid-today-color);pointer-events:none;z-index:5;transform:translate(-1px)}.mglon-week-grid__events-overlay{position:absolute;top:var(--week-grid-padding-top);left:var(--week-grid-time-col-width);right:0;bottom:0;pointer-events:none;transform:translate(-2px)}.mglon-week-grid__events-overlay>*{pointer-events:auto}\n"], dependencies: [{ kind: "component", type: TimeSlotComponent, selector: "mglon-time-slot", inputs: ["slot", "showTimeLabel"] }, { kind: "component", type: Selection, selector: "mglon-selection", inputs: ["selection", "isSelecting"] }, { kind: "directive", type: SelectableDirective, selector: "[mglonSelectable]", inputs: ["mglonSelectable"], outputs: ["selectionStart", "selectionChange", "selectionEnd"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WeekGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-week-grid', standalone: true, imports: [TimeSlotComponent, Selection, SelectableDirective], template: "<div class=\"mglon-week-grid\" [mglonSelectable]=\"backgroundSelection() ? this : null\"\n  (selectionStart)=\"onSelectionStart($event)\" (selectionChange)=\"onSelectionChange($event)\"\n  (selectionEnd)=\"onSelectionEnd($event)\">\n\n  <!-- Time column -->\n  <div class=\"mglon-week-grid__time-column\">\n    @for (slot of timeSlots()[0]; track slot.date.getTime()) {\n    <mglon-time-slot [slot]=\"slot\" [showTimeLabel]=\"true\"></mglon-time-slot>\n    }\n  </div>\n\n  <!-- Day columns -->\n  @for (daySlots of timeSlots(); track $index) {\n  <div class=\"mglon-week-grid__day-column\">\n    @for (slot of daySlots; track slot.date.getTime()) {\n    <mglon-time-slot [slot]=\"slot\"></mglon-time-slot>\n    }\n  </div>\n  }\n\n  <!-- Selection overlay -->\n  @if (selectableDirective() && backgroundSelection()) {\n  <mglon-selection [selection]=\"selectableDirective()!.selection()\"\n    [isSelecting]=\"selectableDirective()!.isSelecting()\">\n  </mglon-selection>\n  }\n\n  <!-- Today indicator line -->\n  @if (todayColumnIndex() !== -1 && showNowIndicator()) {\n  <div class=\"mglon-week-grid__today-indicator\" [style.left.px]=\"getTodayIndicatorPosition()\">\n  </div>\n  }\n\n  <!-- Events Overlay -->\n  <div class=\"mglon-week-grid__events-overlay\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [".mglon-week-grid{--week-grid-time-col-width: var(--mglon-week-grid-time-column-width, 60px);--week-grid-height: var(--mglon-week-grid-height, calc(100vh - 200px) );--week-grid-padding-top: var(--mglon-week-grid-padding-top, 12px);--week-grid-scrollbar-width: var(--mglon-week-grid-scrollbar-width, 8px);--week-grid-scrollbar-track-bg: var(--mglon-week-grid-scrollbar-track-bg, var(--mglon-schedule-surface-variant));--week-grid-scrollbar-thumb-bg: var(--mglon-week-grid-scrollbar-thumb-bg, var(--mglon-schedule-border-color));--week-grid-scrollbar-thumb-hover-bg: var(--mglon-week-grid-scrollbar-thumb-hover-bg, var(--mglon-schedule-on-surface-variant));--week-grid-time-col-bg: var(--mglon-week-grid-time-column-bg, var(--mglon-schedule-surface-variant));display:grid;grid-template-columns:var(--week-grid-time-col-width) repeat(7,1fr);position:relative;overflow-y:auto;overflow-x:hidden;max-height:var(--week-grid-height);-webkit-user-select:none;user-select:none;cursor:crosshair;padding-top:var(--week-grid-padding-top)}.mglon-week-grid::-webkit-scrollbar{width:var(--week-grid-scrollbar-width)}.mglon-week-grid::-webkit-scrollbar-track{background:var(--week-grid-scrollbar-track-bg)}.mglon-week-grid::-webkit-scrollbar-thumb{background:var(--week-grid-scrollbar-thumb-bg);border-radius:4px}.mglon-week-grid::-webkit-scrollbar-thumb:hover{background:var(--week-grid-scrollbar-thumb-hover-bg)}.mglon-week-grid__time-column{display:flex;flex-direction:column;border-right:1px solid var(--mglon-schedule-border);background:var(--week-grid-time-col-bg)}.mglon-week-grid__day-column{display:flex;flex-direction:column;border-right:1px solid var(--mglon-schedule-border)}.mglon-week-grid__day-column:last-child{border-right:none}.mglon-week-grid__today-indicator{--mglon-week-grid-today-color: var(--mglon-schedule-error);position:absolute;top:-60px;height:2460px;width:2px;background:var(--mglon-week-grid-today-color);pointer-events:none;z-index:5;transform:translate(-1px)}.mglon-week-grid__events-overlay{position:absolute;top:var(--week-grid-padding-top);left:var(--week-grid-time-col-width);right:0;bottom:0;pointer-events:none;transform:translate(-2px)}.mglon-week-grid__events-overlay>*{pointer-events:auto}\n"] }]
+        }], propDecorators: { selectableDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectableDirective), { isSignal: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }] } });
+
+/**
+ * Week view container component.
+ */
+class WeekView {
+    store = inject(CalendarStore);
+    // ============================================
+    // OUTPUT EVENTS
+    // ============================================
+    /** Emitted when selection starts */
+    selectionStart = output();
+    /** Emitted while selecting */
+    selectionChange = output();
+    /** Emitted when selection ends */
+    selectionEnd = output();
+    // Get week grid element reference
+    gridElement = viewChild(WeekGrid, { ...(ngDevMode ? { debugName: "gridElement" } : {}), read: ElementRef });
+    animationState = computed(() => {
+        const date = this.store.currentDate();
+        return this.getWeekNumber(date);
+    }, ...(ngDevMode ? [{ debugName: "animationState" }] : []));
+    constructor() {
+        afterNextRender(() => {
+            // Logic for grid sizing can remain if needed for the grid itself, 
+            // but let's see if we can simplify it.
+        });
+    }
+    getWeekNumber(date) {
+        const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+        const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
+        return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WeekView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: WeekView, isStandalone: true, selector: "mglon-week-view", outputs: { selectionStart: "selectionStart", selectionChange: "selectionChange", selectionEnd: "selectionEnd" }, viewQueries: [{ propertyName: "gridElement", first: true, predicate: WeekGrid, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"mglon-week-view\" [@weekTransition]=\"animationState()\">\n  <mglon-week-header [currentDate]=\"store.currentDate()\"></mglon-week-header>\n  <mglon-week-grid [currentDate]=\"store.currentDate()\" (selectionStart)=\"selectionStart.emit($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\" (selectionEnd)=\"selectionEnd.emit($event)\">\n  </mglon-week-grid>\n</div>", styles: [".mglon-week-view{--week-view-bg: var(--mglon-week-view-bg, var(--mglon-schedule-surface));display:flex;flex-direction:column;height:100%;background:var(--week-view-bg)}\n"], dependencies: [{ kind: "component", type: WeekHeader, selector: "mglon-week-header", inputs: ["currentDate"] }, { kind: "component", type: WeekGrid, selector: "mglon-week-grid", inputs: ["currentDate"], outputs: ["selectionStart", "selectionChange", "selectionEnd"] }], animations: [
+            trigger('weekTransition', [
+                transition('* => *', [
+                    style({ opacity: 0, transform: 'translateX({{ direction }}%)' }),
+                    animate('500ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
+                ], { params: { direction: 0 } })
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: WeekView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-week-view', standalone: true, imports: [WeekHeader, WeekGrid], animations: [
+                        trigger('weekTransition', [
+                            transition('* => *', [
+                                style({ opacity: 0, transform: 'translateX({{ direction }}%)' }),
+                                animate('500ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
+                            ], { params: { direction: 0 } })
+                        ])
+                    ], template: "<div class=\"mglon-week-view\" [@weekTransition]=\"animationState()\">\n  <mglon-week-header [currentDate]=\"store.currentDate()\"></mglon-week-header>\n  <mglon-week-grid [currentDate]=\"store.currentDate()\" (selectionStart)=\"selectionStart.emit($event)\"\n    (selectionChange)=\"selectionChange.emit($event)\" (selectionEnd)=\"selectionEnd.emit($event)\">\n  </mglon-week-grid>\n</div>", styles: [".mglon-week-view{--week-view-bg: var(--mglon-week-view-bg, var(--mglon-schedule-surface));display:flex;flex-direction:column;height:100%;background:var(--week-view-bg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }], gridElement: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WeekGrid), { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+const ICONS = {
+    'chevron-left': `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" />
+    </svg>`,
+    'chevron-right': `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd" />
+    </svg>`,
+    'chevron-down': `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
+    </svg>`,
+    'chevron-up': `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 011.06 0l7.5 7.5a.75.75 0 11-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 01-1.06-1.06l7.5-7.5z" clip-rule="evenodd" />
+    </svg>`,
+    'clock': `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 000-1.5h-3.75V6z" clip-rule="evenodd" />
+    </svg>`,
+    'calendar-month': `
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>`,
+    'calendar-week': `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z"/></svg>`,
+    'calendar-day': `
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M200-280q-33 0-56.5-23.5T120-360v-240q0-33 23.5-56.5T200-680h560q33 0 56.5 23.5T840-600v240q0 33-23.5 56.5T760-280H200Zm0-80h560v-240H200v240Zm-80-400v-80h720v80H120Zm0 640v-80h720v80H120Zm80-480v240-240Z"/></svg>`,
+    'add': `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
+    </svg>`,
+    'cycle': `
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z"/></svg>
+  `,
+    'dot': `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <circle cx="12" cy="12" r="6" />
+  </svg>
+  `
+};
+
+class IconComponent {
+    sanitizer = inject(DomSanitizer);
+    // Input requerido tipo Signal
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    // Computada: Busca el string y lo sanitiza para evitar ataques XSS
+    svgContent = computed(() => {
+        const svgString = ICONS[this.name()] || '';
+        return this.sanitizer.bypassSecurityTrustHtml(svgString);
+    }, ...(ngDevMode ? [{ debugName: "svgContent" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: IconComponent, isStandalone: true, selector: "mglon-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<div class="mglon-icon" [innerHTML]="svgContent()"></div>`, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}.mglon-icon{display:flex;align-items:center;justify-content:center;width:1em;height:1em;min-width:1em;min-height:1em}::ng-deep svg{width:100%;height:100%;fill:currentColor}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-icon', standalone: true, template: `<div class="mglon-icon" [innerHTML]="svgContent()"></div>`, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}.mglon-icon{display:flex;align-items:center;justify-content:center;width:1em;height:1em;min-width:1em;min-height:1em}::ng-deep svg{width:100%;height:100%;fill:currentColor}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+
+class ButtonComponent {
+    appereance = input('solid', ...(ngDevMode ? [{ debugName: "appereance" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    rounded = input('md', ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ButtonComponent, isStandalone: true, selector: "button[mglon-button], a[mglon-button]", inputs: { appereance: { classPropertyName: "appereance", publicName: "appereance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.appereance": "appereance()", "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded()", "attr.density": "density()", "attr.active": "active() || null", "attr.disabled": "disabled() || null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;min-width:var(--mglon-button-min-width, 64px);outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;text-decoration:none;cursor:pointer;--btn-padding-y: var(--mglon-button-padding-y, 0);--btn-padding-x: var(--mglon-button-padding-x, 16px);--btn-height: var(--mglon-button-height, 40px);--btn-radius: var(--mglon-button-radius, var(--mglon-schedule-radius-md));--btn-font-size: var(--mglon-button-font-size, var(--mglon-schedule-font-size-md, 14px));--btn-border-width: var(--mglon-button-border-width, 2px);--btn-transition: var(--mglon-button-transition, background-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), box-shadow .28s var(--mglon-schedule-transition-easing), color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), border-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing));height:var(--btn-height);padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--btn-radius);font-size:var(--btn-font-size);font-family:var(--mglon-schedule-font-family, Roboto, sans-serif);font-weight:var(--mglon-button-font-weight, 500);border:var(--btn-border-width) solid transparent;background-color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-button-primary-color, var(--mglon-schedule-on-primary));transition:var(--btn-transition)}:host[rounded=none]{--btn-radius: 0}:host[rounded=sm]{--btn-radius: var(--mglon-schedule-radius-sm)}:host[rounded=md]{--btn-radius: var(--mglon-schedule-radius-md)}:host[rounded=lg]{--btn-radius: var(--mglon-schedule-radius-lg)}:host[rounded=full]{--btn-radius: var(--mglon-schedule-radius-full)}:host[size=sm]{--btn-height: var(--mglon-button-sm-height, 32px);--btn-padding-x: var(--mglon-button-sm-padding-x, 12px);--btn-font-size: var(--mglon-button-sm-font-size, var(--mglon-schedule-font-size-sm, 12px))}:host[size=md]{--btn-height: var(--mglon-button-md-height, 40px);--btn-padding-x: var(--mglon-button-md-padding-x, 16px);--btn-font-size: var(--mglon-button-md-font-size, var(--mglon-schedule-font-size-md, 14px))}:host[size=lg]{--btn-height: var(--mglon-button-lg-height, 48px);--btn-padding-x: var(--mglon-button-lg-padding-x, 24px);--btn-font-size: var(--mglon-button-lg-font-size, var(--mglon-schedule-font-size-lg, 16px))}:host[density=compact]{--btn-padding-x: var(--mglon-button-compact-padding-x, 8px)}:host[appereance=solid]{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}:host[appereance=solid]:hover:not([disabled]){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;opacity:var(--mglon-button-hover-opacity, .92)}:host[appereance=outline]{background-color:transparent;border-color:currentColor}:host[appereance=outline]:hover:not([disabled]){background-color:var(--mglon-button-hover-bg, var(--mglon-schedule-hover-bg))}:host[appereance=ghost]{background-color:transparent;border-color:transparent}:host[appereance=ghost]:hover:not([disabled]){background-color:var(--mglon-button-hover-bg, var(--mglon-schedule-hover-bg))}:host[appereance=link]{background-color:transparent;border-color:transparent;text-decoration:underline;min-width:auto;--btn-padding-x: 4px}:host[appereance=link]:hover:not([disabled]){text-decoration:none}:host[appereance=solid][color=primary]{background-color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-button-primary-color, var(--mglon-schedule-on-primary))}:host[appereance=solid][color=secondary]{background-color:var(--mglon-button-secondary-bg, var(--mglon-schedule-surface-3));color:var(--mglon-button-secondary-color, var(--mglon-schedule-on-surface-3))}:host[appereance=solid][color=error]{background-color:var(--mglon-button-error-bg, var(--mglon-schedule-error));color:var(--mglon-button-error-color, var(--mglon-schedule-on-error))}:host[appereance=outline][color=primary]{color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary));border-color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary))}:host[appereance=outline][color=primary]:hover:not([disabled]){background-color:var(--mglon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=outline][color=secondary]{color:var(--mglon-schedule-text-secondary);border-color:var(--mglon-schedule-text-secondary)}:host[appereance=outline][color=error]{color:var(--mglon-schedule-error);border-color:var(--mglon-schedule-error)}:host[appereance=ghost][color=primary]{color:var(--mglon-schedule-primary)}:host[appereance=ghost][color=primary]:hover:not([disabled]){background-color:var(--mglon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=ghost][color=secondary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=ghost][color=error]{color:var(--mglon-schedule-error)}:host[appereance=link][color=primary]{color:var(--mglon-schedule-primary)}:host[appereance=link][color=secondary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=link][color=error]{color:var(--mglon-schedule-error)}:host[active]{background-color:var(--mglon-schedule-primary);color:var(--mglon-schedule-on-primary);font-weight:600}:host[active][appereance=outline],:host[active][appereance=ghost]{background-color:var(--mglon-schedule-selection);color:var(--mglon-schedule-primary)}:host[disabled]{opacity:var(--mglon-schedule-disabled-opacity, .5);cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mglon-button], a[mglon-button]', standalone: true, imports: [CommonModule], template: '<ng-content></ng-content>', host: {
+                        '[attr.appereance]': 'appereance()',
+                        '[attr.color]': 'color()',
+                        '[attr.size]': 'size()',
+                        '[attr.rounded]': 'rounded()',
+                        '[attr.density]': 'density()',
+                        '[attr.active]': 'active() || null',
+                        '[attr.disabled]': 'disabled() || null'
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;min-width:var(--mglon-button-min-width, 64px);outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;text-decoration:none;cursor:pointer;--btn-padding-y: var(--mglon-button-padding-y, 0);--btn-padding-x: var(--mglon-button-padding-x, 16px);--btn-height: var(--mglon-button-height, 40px);--btn-radius: var(--mglon-button-radius, var(--mglon-schedule-radius-md));--btn-font-size: var(--mglon-button-font-size, var(--mglon-schedule-font-size-md, 14px));--btn-border-width: var(--mglon-button-border-width, 2px);--btn-transition: var(--mglon-button-transition, background-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), box-shadow .28s var(--mglon-schedule-transition-easing), color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), border-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing));height:var(--btn-height);padding:var(--btn-padding-y) var(--btn-padding-x);border-radius:var(--btn-radius);font-size:var(--btn-font-size);font-family:var(--mglon-schedule-font-family, Roboto, sans-serif);font-weight:var(--mglon-button-font-weight, 500);border:var(--btn-border-width) solid transparent;background-color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-button-primary-color, var(--mglon-schedule-on-primary));transition:var(--btn-transition)}:host[rounded=none]{--btn-radius: 0}:host[rounded=sm]{--btn-radius: var(--mglon-schedule-radius-sm)}:host[rounded=md]{--btn-radius: var(--mglon-schedule-radius-md)}:host[rounded=lg]{--btn-radius: var(--mglon-schedule-radius-lg)}:host[rounded=full]{--btn-radius: var(--mglon-schedule-radius-full)}:host[size=sm]{--btn-height: var(--mglon-button-sm-height, 32px);--btn-padding-x: var(--mglon-button-sm-padding-x, 12px);--btn-font-size: var(--mglon-button-sm-font-size, var(--mglon-schedule-font-size-sm, 12px))}:host[size=md]{--btn-height: var(--mglon-button-md-height, 40px);--btn-padding-x: var(--mglon-button-md-padding-x, 16px);--btn-font-size: var(--mglon-button-md-font-size, var(--mglon-schedule-font-size-md, 14px))}:host[size=lg]{--btn-height: var(--mglon-button-lg-height, 48px);--btn-padding-x: var(--mglon-button-lg-padding-x, 24px);--btn-font-size: var(--mglon-button-lg-font-size, var(--mglon-schedule-font-size-lg, 16px))}:host[density=compact]{--btn-padding-x: var(--mglon-button-compact-padding-x, 8px)}:host[appereance=solid]{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}:host[appereance=solid]:hover:not([disabled]){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;opacity:var(--mglon-button-hover-opacity, .92)}:host[appereance=outline]{background-color:transparent;border-color:currentColor}:host[appereance=outline]:hover:not([disabled]){background-color:var(--mglon-button-hover-bg, var(--mglon-schedule-hover-bg))}:host[appereance=ghost]{background-color:transparent;border-color:transparent}:host[appereance=ghost]:hover:not([disabled]){background-color:var(--mglon-button-hover-bg, var(--mglon-schedule-hover-bg))}:host[appereance=link]{background-color:transparent;border-color:transparent;text-decoration:underline;min-width:auto;--btn-padding-x: 4px}:host[appereance=link]:hover:not([disabled]){text-decoration:none}:host[appereance=solid][color=primary]{background-color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-button-primary-color, var(--mglon-schedule-on-primary))}:host[appereance=solid][color=secondary]{background-color:var(--mglon-button-secondary-bg, var(--mglon-schedule-surface-3));color:var(--mglon-button-secondary-color, var(--mglon-schedule-on-surface-3))}:host[appereance=solid][color=error]{background-color:var(--mglon-button-error-bg, var(--mglon-schedule-error));color:var(--mglon-button-error-color, var(--mglon-schedule-on-error))}:host[appereance=outline][color=primary]{color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary));border-color:var(--mglon-button-primary-bg, var(--mglon-schedule-primary))}:host[appereance=outline][color=primary]:hover:not([disabled]){background-color:var(--mglon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=outline][color=secondary]{color:var(--mglon-schedule-text-secondary);border-color:var(--mglon-schedule-text-secondary)}:host[appereance=outline][color=error]{color:var(--mglon-schedule-error);border-color:var(--mglon-schedule-error)}:host[appereance=ghost][color=primary]{color:var(--mglon-schedule-primary)}:host[appereance=ghost][color=primary]:hover:not([disabled]){background-color:var(--mglon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=ghost][color=secondary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=ghost][color=error]{color:var(--mglon-schedule-error)}:host[appereance=link][color=primary]{color:var(--mglon-schedule-primary)}:host[appereance=link][color=secondary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=link][color=error]{color:var(--mglon-schedule-error)}:host[active]{background-color:var(--mglon-schedule-primary);color:var(--mglon-schedule-on-primary);font-weight:600}:host[active][appereance=outline],:host[active][appereance=ghost]{background-color:var(--mglon-schedule-selection);color:var(--mglon-schedule-primary)}:host[disabled]{opacity:var(--mglon-schedule-disabled-opacity, .5);cursor:not-allowed;pointer-events:none;box-shadow:none!important}\n"] }]
+        }], propDecorators: { appereance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appereance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class IconButtonComponent {
+    appereance = input('ghost', ...(ngDevMode ? [{ debugName: "appereance" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    rounded = input('md', ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    elementRef = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: IconButtonComponent, isStandalone: true, selector: "button[mglon-icon-button], a[mglon-icon-button]", inputs: { appereance: { classPropertyName: "appereance", publicName: "appereance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.appereance": "appereance()", "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded()", "attr.active": "active() || null", "attr.disabled": "disabled() || null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;outline:none;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;--icon-btn-size: var(--mglon-icon-button-size, 40px);--icon-btn-icon-size: var(--mglon-icon-button-icon-size, 24px);--icon-btn-radius: var(--mglon-icon-button-radius, 50%);--icon-btn-bg: var(--mglon-icon-button-bg, transparent);--icon-btn-color: var(--mglon-icon-button-color, var(--mglon-schedule-text-secondary));--icon-btn-border: var(--mglon-icon-button-border, 2px solid transparent);--icon-btn-transition: var(--mglon-icon-button-transition, background-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), border-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing));width:var(--icon-btn-size);height:var(--icon-btn-size);font-size:var(--icon-btn-icon-size);border-radius:var(--icon-btn-radius);border:var(--icon-btn-border);background-color:var(--icon-btn-bg);color:var(--icon-btn-color);transition:var(--icon-btn-transition)}:host[size=xs]{--icon-btn-size: var(--mglon-icon-button-xs-size, 24px);--icon-btn-icon-size: var(--mglon-icon-button-xs-icon-size, 14px)}:host[size=sm]{--icon-btn-size: var(--mglon-icon-button-sm-size, 32px);--icon-btn-icon-size: var(--mglon-icon-button-sm-icon-size, 18px)}:host[size=md]{--icon-btn-size: var(--mglon-icon-button-md-size, 40px);--icon-btn-icon-size: var(--mglon-icon-button-md-icon-size, 24px)}:host[size=lg]{--icon-btn-size: var(--mglon-icon-button-lg-size, 48px);--icon-btn-icon-size: var(--mglon-icon-button-lg-icon-size, 28px)}:host[appereance=ghost]{background-color:transparent;border-color:transparent}:host[appereance=ghost]:hover:not([disabled]){background-color:var(--mglon-icon-button-hover-bg, rgba(60, 64, 67, .04))}:host[appereance=solid]{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}:host[appereance=solid]:hover:not([disabled]){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;opacity:var(--mglon-icon-button-hover-opacity, .92)}:host[appereance=outline]{background-color:transparent;border-color:currentColor}:host[appereance=outline]:hover:not([disabled]){background-color:var(--mglon-icon-button-hover-bg, var(--mglon-schedule-hover-bg))}:host[appereance=ghost][color=primary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=ghost][color=primary]:hover:not([disabled]){color:var(--mglon-schedule-text-primary);background-color:var(--mglon-icon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=ghost][color=secondary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=ghost][color=error]{color:var(--mglon-schedule-error)}:host[appereance=solid][color=primary]{background-color:var(--mglon-icon-button-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-icon-button-primary-color, var(--mglon-schedule-on-primary))}:host[appereance=solid][color=secondary]{background-color:var(--mglon-icon-button-secondary-bg, var(--mglon-schedule-surface-3));color:var(--mglon-icon-button-secondary-color, var(--mglon-schedule-on-surface-3))}:host[appereance=solid][color=error]{background-color:var(--mglon-icon-button-error-bg, var(--mglon-schedule-error));color:var(--mglon-icon-button-error-color, var(--mglon-schedule-on-error))}:host[appereance=outline][color=primary]{color:var(--mglon-icon-button-primary-color, var(--mglon-schedule-primary));border-color:var(--mglon-icon-button-primary-color, var(--mglon-schedule-primary))}:host[appereance=outline][color=primary]:hover:not([disabled]){background-color:var(--mglon-icon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=outline][color=secondary]{color:var(--mglon-schedule-text-secondary);border-color:var(--mglon-schedule-text-secondary)}:host[appereance=outline][color=error]{color:var(--mglon-schedule-error);border-color:var(--mglon-schedule-error)}:host[active]{color:var(--mglon-schedule-primary);background-color:var(--mglon-schedule-selection);font-weight:600}:host[active][appereance=solid]{background-color:var(--mglon-schedule-primary);color:var(--mglon-schedule-on-primary)}:host[disabled]{opacity:var(--mglon-schedule-disabled-opacity, .5);cursor:not-allowed;pointer-events:none;background-color:transparent!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mglon-icon-button], a[mglon-icon-button]', standalone: true, imports: [CommonModule], template: '<ng-content></ng-content>', host: {
+                        '[attr.appereance]': 'appereance()',
+                        '[attr.color]': 'color()',
+                        '[attr.size]': 'size()',
+                        '[attr.rounded]': 'rounded()',
+                        '[attr.active]': 'active() || null',
+                        '[attr.disabled]': 'disabled() || null'
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;outline:none;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;--icon-btn-size: var(--mglon-icon-button-size, 40px);--icon-btn-icon-size: var(--mglon-icon-button-icon-size, 24px);--icon-btn-radius: var(--mglon-icon-button-radius, 50%);--icon-btn-bg: var(--mglon-icon-button-bg, transparent);--icon-btn-color: var(--mglon-icon-button-color, var(--mglon-schedule-text-secondary));--icon-btn-border: var(--mglon-icon-button-border, 2px solid transparent);--icon-btn-transition: var(--mglon-icon-button-transition, background-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing), border-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing));width:var(--icon-btn-size);height:var(--icon-btn-size);font-size:var(--icon-btn-icon-size);border-radius:var(--icon-btn-radius);border:var(--icon-btn-border);background-color:var(--icon-btn-bg);color:var(--icon-btn-color);transition:var(--icon-btn-transition)}:host[size=xs]{--icon-btn-size: var(--mglon-icon-button-xs-size, 24px);--icon-btn-icon-size: var(--mglon-icon-button-xs-icon-size, 14px)}:host[size=sm]{--icon-btn-size: var(--mglon-icon-button-sm-size, 32px);--icon-btn-icon-size: var(--mglon-icon-button-sm-icon-size, 18px)}:host[size=md]{--icon-btn-size: var(--mglon-icon-button-md-size, 40px);--icon-btn-icon-size: var(--mglon-icon-button-md-icon-size, 24px)}:host[size=lg]{--icon-btn-size: var(--mglon-icon-button-lg-size, 48px);--icon-btn-icon-size: var(--mglon-icon-button-lg-icon-size, 28px)}:host[appereance=ghost]{background-color:transparent;border-color:transparent}:host[appereance=ghost]:hover:not([disabled]){background-color:var(--mglon-icon-button-hover-bg, rgba(60, 64, 67, .04))}:host[appereance=solid]{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}:host[appereance=solid]:hover:not([disabled]){box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;opacity:var(--mglon-icon-button-hover-opacity, .92)}:host[appereance=outline]{background-color:transparent;border-color:currentColor}:host[appereance=outline]:hover:not([disabled]){background-color:var(--mglon-icon-button-hover-bg, var(--mglon-schedule-hover-bg))}:host[appereance=ghost][color=primary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=ghost][color=primary]:hover:not([disabled]){color:var(--mglon-schedule-text-primary);background-color:var(--mglon-icon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=ghost][color=secondary]{color:var(--mglon-schedule-text-secondary)}:host[appereance=ghost][color=error]{color:var(--mglon-schedule-error)}:host[appereance=solid][color=primary]{background-color:var(--mglon-icon-button-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-icon-button-primary-color, var(--mglon-schedule-on-primary))}:host[appereance=solid][color=secondary]{background-color:var(--mglon-icon-button-secondary-bg, var(--mglon-schedule-surface-3));color:var(--mglon-icon-button-secondary-color, var(--mglon-schedule-on-surface-3))}:host[appereance=solid][color=error]{background-color:var(--mglon-icon-button-error-bg, var(--mglon-schedule-error));color:var(--mglon-icon-button-error-color, var(--mglon-schedule-on-error))}:host[appereance=outline][color=primary]{color:var(--mglon-icon-button-primary-color, var(--mglon-schedule-primary));border-color:var(--mglon-icon-button-primary-color, var(--mglon-schedule-primary))}:host[appereance=outline][color=primary]:hover:not([disabled]){background-color:var(--mglon-icon-button-primary-hover-bg, rgba(103, 58, 183, .04))}:host[appereance=outline][color=secondary]{color:var(--mglon-schedule-text-secondary);border-color:var(--mglon-schedule-text-secondary)}:host[appereance=outline][color=error]{color:var(--mglon-schedule-error);border-color:var(--mglon-schedule-error)}:host[active]{color:var(--mglon-schedule-primary);background-color:var(--mglon-schedule-selection);font-weight:600}:host[active][appereance=solid]{background-color:var(--mglon-schedule-primary);color:var(--mglon-schedule-on-primary)}:host[disabled]{opacity:var(--mglon-schedule-disabled-opacity, .5);cursor:not-allowed;pointer-events:none;background-color:transparent!important}\n"] }]
+        }], propDecorators: { appereance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appereance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class ButtonGroupComponent {
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : []));
+    appereance = input('solid', ...(ngDevMode ? [{ debugName: "appereance" }] : []));
+    rounded = input('full', ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    // Queries for projected content
+    buttons = contentChildren(ButtonComponent, ...(ngDevMode ? [{ debugName: "buttons" }] : []));
+    iconButtons = contentChildren(IconButtonComponent, ...(ngDevMode ? [{ debugName: "iconButtons" }] : []));
+    indicatorStyle = signal({}, ...(ngDevMode ? [{ debugName: "indicatorStyle" }] : []));
+    constructor() {
+        // Effect to update selection indicator position
+        effect(() => {
+            const allButtons = [...this.buttons(), ...this.iconButtons()];
+            const activeButton = allButtons.find(btn => btn.active() && !btn.disabled());
+            if (activeButton && activeButton.elementRef) {
+                const element = activeButton.elementRef.nativeElement;
+                // Calculate style based on the active element's position and size
+                const rounded = this.rounded();
+                this.indicatorStyle.set({
+                    'width': `${element.offsetWidth}px`,
+                    'height': `${element.offsetHeight}px`,
+                    'transform': `translate(${element.offsetLeft}px, ${element.offsetTop}px)`,
+                    'opacity': '1'
+                });
+            }
+            else {
+                this.indicatorStyle.set({ 'opacity': '0' });
+            }
+        });
+        // Effect to propagate disabled state to child buttons
+        effect(() => {
+            const isGroupDisabled = this.disabled();
+            const allButtons = [...this.buttons(), ...this.iconButtons()];
+            allButtons.forEach(btn => {
+                if (btn.elementRef) {
+                    const element = btn.elementRef.nativeElement;
+                    if (isGroupDisabled) {
+                        element.setAttribute('disabled', '');
+                    }
+                    else if (!btn.disabled()) {
+                        element.removeAttribute('disabled');
+                    }
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: ButtonGroupComponent, isStandalone: true, selector: "mglon-button-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, appereance: { classPropertyName: "appereance", publicName: "appereance", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"group\"", "attr.rounded": "rounded()", "attr.type": "type()", "attr.orientation": "orientation()", "attr.appereance": "appereance()", "attr.density": "density()", "attr.disabled": "disabled() || null" } }, queries: [{ propertyName: "buttons", predicate: ButtonComponent, isSignal: true }, { propertyName: "iconButtons", predicate: IconButtonComponent, isSignal: true }], ngImport: i0, template: "<div class=\"selection-indicator\" [style]=\"indicatorStyle()\"></div>\n<ng-content></ng-content>", styles: [":host{display:inline-flex;position:relative;overflow:hidden;z-index:0;gap:var(--mglon-button-group-gap, 0);flex-shrink:0;background-color:var(--mglon-button-group-background, var(--mglon-schedule-surface-1));border:var(--mglon-button-group-border-width, 2px) solid var(--mglon-button-group-border-color, transparent);padding:var(--mglon-button-group-padding, var(--mglon-schedule-padding-xs));border-radius:var(--mglon-button-group-border-radius, var(--mglon-schedule-radius-full))}:host[rounded=none]{--mglon-button-group-border-radius: 0}:host[rounded=sm]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-sm)}:host[rounded=md]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-md)}:host[rounded=lg]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-lg)}:host[rounded=full]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-full)}:host[orientation=vertical]{flex-direction:column}:host[appereance=outline]{--mglon-button-group-background: transparent;--mglon-button-group-border-color: var(--mglon-schedule-primary-200)}:host[appereance=ghost]{--mglon-button-group-background: transparent;--mglon-button-group-border-color: transparent;--mglon-button-group-padding: 0px}:host[appereance=link]{--mglon-button-group-background: transparent;--mglon-button-group-border-color: transparent;--mglon-button-group-padding: 0px;--mglon-button-group-gap: var(--mglon-schedule-spacing-sm)}:host[density=compact]{--mglon-button-group-padding: 0px}:host[density=compact][appereance=link]{--mglon-button-group-gap: var(--mglon-schedule-spacing-xs)}:host[disabled]{opacity:var(--mglon-button-group-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}:host[disabled] .selection-indicator{pointer-events:none}:host[disabled] button,:host[disabled] a{pointer-events:none}:host .selection-indicator{position:absolute;top:0;left:0;background-color:var(--mglon-button-group-indicator-background, var(--mglon-schedule-primary));border-radius:calc(var(--mglon-button-group-border-radius, var(--mglon-schedule-radius-full)) - var(--mglon-button-group-padding, var(--mglon-schedule-padding-xs)));z-index:0;transition:all var(--mglon-button-group-indicator-transition-duration, var(--mglon-schedule-transition-duration)) cubic-bezier(.16,1,.3,1)}:host ::ng-deep>button[mglon-button],:host ::ng-deep>button[mglon-icon-button],:host ::ng-deep>a[mglon-button],:host ::ng-deep>a[mglon-icon-button]{background-color:transparent!important;border:none!important;margin:0!important;position:relative;z-index:1;border-radius:var(--mglon-button-group-border-radius, var(--mglon-schedule-radius-full))!important;color:var(--mglon-button-group-button-color, var(--mglon-schedule-on-surface-1));transition:color var(--mglon-button-group-transition-duration, var(--mglon-schedule-transition-duration)) ease}:host ::ng-deep>button[mglon-button][active],:host ::ng-deep>button[mglon-icon-button][active],:host ::ng-deep>a[mglon-button][active],:host ::ng-deep>a[mglon-icon-button][active]{color:var(--mglon-button-group-button-active-color, var(--mglon-schedule-on-primary))!important;font-weight:var(--mglon-button-group-button-active-font-weight, 500)}:host ::ng-deep>button[mglon-button][disabled],:host ::ng-deep>button[mglon-icon-button][disabled],:host ::ng-deep>a[mglon-button][disabled],:host ::ng-deep>a[mglon-icon-button][disabled]{opacity:var(--mglon-button-group-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-button-group', standalone: true, imports: [CommonModule], host: {
+                        '[attr.role]': '"group"',
+                        '[attr.rounded]': 'rounded()',
+                        '[attr.type]': 'type()',
+                        '[attr.orientation]': 'orientation()',
+                        '[attr.appereance]': 'appereance()',
+                        '[attr.density]': 'density()',
+                        '[attr.disabled]': 'disabled() || null'
+                    }, template: "<div class=\"selection-indicator\" [style]=\"indicatorStyle()\"></div>\n<ng-content></ng-content>", styles: [":host{display:inline-flex;position:relative;overflow:hidden;z-index:0;gap:var(--mglon-button-group-gap, 0);flex-shrink:0;background-color:var(--mglon-button-group-background, var(--mglon-schedule-surface-1));border:var(--mglon-button-group-border-width, 2px) solid var(--mglon-button-group-border-color, transparent);padding:var(--mglon-button-group-padding, var(--mglon-schedule-padding-xs));border-radius:var(--mglon-button-group-border-radius, var(--mglon-schedule-radius-full))}:host[rounded=none]{--mglon-button-group-border-radius: 0}:host[rounded=sm]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-sm)}:host[rounded=md]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-md)}:host[rounded=lg]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-lg)}:host[rounded=full]{--mglon-button-group-border-radius: var(--mglon-schedule-radius-full)}:host[orientation=vertical]{flex-direction:column}:host[appereance=outline]{--mglon-button-group-background: transparent;--mglon-button-group-border-color: var(--mglon-schedule-primary-200)}:host[appereance=ghost]{--mglon-button-group-background: transparent;--mglon-button-group-border-color: transparent;--mglon-button-group-padding: 0px}:host[appereance=link]{--mglon-button-group-background: transparent;--mglon-button-group-border-color: transparent;--mglon-button-group-padding: 0px;--mglon-button-group-gap: var(--mglon-schedule-spacing-sm)}:host[density=compact]{--mglon-button-group-padding: 0px}:host[density=compact][appereance=link]{--mglon-button-group-gap: var(--mglon-schedule-spacing-xs)}:host[disabled]{opacity:var(--mglon-button-group-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}:host[disabled] .selection-indicator{pointer-events:none}:host[disabled] button,:host[disabled] a{pointer-events:none}:host .selection-indicator{position:absolute;top:0;left:0;background-color:var(--mglon-button-group-indicator-background, var(--mglon-schedule-primary));border-radius:calc(var(--mglon-button-group-border-radius, var(--mglon-schedule-radius-full)) - var(--mglon-button-group-padding, var(--mglon-schedule-padding-xs)));z-index:0;transition:all var(--mglon-button-group-indicator-transition-duration, var(--mglon-schedule-transition-duration)) cubic-bezier(.16,1,.3,1)}:host ::ng-deep>button[mglon-button],:host ::ng-deep>button[mglon-icon-button],:host ::ng-deep>a[mglon-button],:host ::ng-deep>a[mglon-icon-button]{background-color:transparent!important;border:none!important;margin:0!important;position:relative;z-index:1;border-radius:var(--mglon-button-group-border-radius, var(--mglon-schedule-radius-full))!important;color:var(--mglon-button-group-button-color, var(--mglon-schedule-on-surface-1));transition:color var(--mglon-button-group-transition-duration, var(--mglon-schedule-transition-duration)) ease}:host ::ng-deep>button[mglon-button][active],:host ::ng-deep>button[mglon-icon-button][active],:host ::ng-deep>a[mglon-button][active],:host ::ng-deep>a[mglon-icon-button][active]{color:var(--mglon-button-group-button-active-color, var(--mglon-schedule-on-primary))!important;font-weight:var(--mglon-button-group-button-active-font-weight, 500)}:host ::ng-deep>button[mglon-button][disabled],:host ::ng-deep>button[mglon-icon-button][disabled],:host ::ng-deep>a[mglon-button][disabled],:host ::ng-deep>a[mglon-icon-button][disabled]{opacity:var(--mglon-button-group-disabled-opacity, .5);cursor:not-allowed;pointer-events:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], appereance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appereance", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ButtonComponent), { isSignal: true }] }], iconButtons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IconButtonComponent), { isSignal: true }] }] } });
+
+class HeaderSchedule {
+    platformId = inject(PLATFORM_ID);
+    elementRef = inject(ElementRef);
+    resizeObserver;
+    calendarStore = inject(CalendarStore);
+    // Header UI Configuration from Store
+    buttonGroupAppearance = computed(() => this.calendarStore.uiConfig().header.buttonGroup.appearance, ...(ngDevMode ? [{ debugName: "buttonGroupAppearance" }] : []));
+    buttonGroupRounded = computed(() => this.calendarStore.uiConfig().header.buttonGroup.rounded, ...(ngDevMode ? [{ debugName: "buttonGroupRounded" }] : []));
+    buttonGroupDensity = computed(() => this.calendarStore.uiConfig().header.buttonGroup.density, ...(ngDevMode ? [{ debugName: "buttonGroupDensity" }] : []));
+    iconButtonRounded = computed(() => this.calendarStore.uiConfig().header.iconButtons.rounded, ...(ngDevMode ? [{ debugName: "iconButtonRounded" }] : []));
+    todayButtonRounded = computed(() => this.calendarStore.uiConfig().header.todayButton.rounded, ...(ngDevMode ? [{ debugName: "todayButtonRounded" }] : []));
+    todayButtonAppearance = computed(() => this.calendarStore.uiConfig().header.todayButton.appearance, ...(ngDevMode ? [{ debugName: "todayButtonAppearance" }] : []));
+    // Inputs
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    activeView = input.required(...(ngDevMode ? [{ debugName: "activeView" }] : []));
+    views = input(['month', 'week', 'day', 'resource'], ...(ngDevMode ? [{ debugName: "views" }] : []));
+    editable = input(true, ...(ngDevMode ? [{ debugName: "editable" }] : []));
+    // Outputs
+    next = output();
+    prev = output();
+    today = output();
+    viewChange = output();
+    add = output();
+    viewIcons = {
+        'month': 'calendar-month',
+        'week': 'calendar-week',
+        'day': 'calendar-day',
+        'resource': 'calendar-week', // Fallback
+        'list': 'calendar-month' // Fallback
+    };
+    // Responsive signal to track container size
+    isSmallScreen = signal(false, ...(ngDevMode ? [{ debugName: "isSmallScreen" }] : []));
+    constructor() {
+        if (isPlatformBrowser(this.platformId)) {
+            // Use ResizeObserver to watch the component's own width
+            this.resizeObserver = new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    const width = entry.contentRect.width;
+                    // Match the 'sm' breakpoint (767.98px)
+                    this.isSmallScreen.set(width <= 767.98);
+                }
+            });
+            // Start observing the host element
+            this.resizeObserver.observe(this.elementRef.nativeElement);
+        }
+    }
+    ngOnDestroy() {
+        // Clean up the observer
+        this.resizeObserver?.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HeaderSchedule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HeaderSchedule, isStandalone: true, selector: "mglon-header-schedule", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { next: "next", prev: "prev", today: "today", viewChange: "viewChange", add: "add" }, ngImport: i0, template: "<div class=\"mglon-header\">\n\n  <!-- Row 2: Navigation + Title -->\n  <div class=\"mglon-header__nav\">\n    <div class=\"mglon-header__nav__actions\">\n      <button mglon-icon-button [rounded]=\"iconButtonRounded()\" (click)=\"prev.emit()\">\n        <mglon-icon name=\"chevron-left\"></mglon-icon>\n      </button>\n      <button mglon-button [appereance]=\"todayButtonAppearance()\" [rounded]=\"todayButtonRounded()\"\n        (click)=\"today.emit()\">\n        Today\n      </button>\n      <button mglon-icon-button [rounded]=\"iconButtonRounded()\" (click)=\"next.emit()\">\n        <mglon-icon name=\"chevron-right\"></mglon-icon>\n      </button>\n    </div>\n\n    <h2 class=\"mglon-header__title\">{{ title() }}</h2>\n  </div>\n\n  <div class=\"mglon-header__actions\">\n    @if (isSmallScreen()) {\n    <!-- Icon buttons for small screens -->\n    <mglon-button-group type=\"icon\" [disabled]=\"false\" [appereance]=\"buttonGroupAppearance()\"\n      [rounded]=\"buttonGroupRounded()\" [density]=\"buttonGroupDensity()\">\n      @for (view of views(); track view) {\n      <button mglon-icon-button appereance=\"ghost\" [active]=\"activeView() === view\" (click)=\"viewChange.emit(view)\">\n        <mglon-icon [name]=\"viewIcons[view]\" size=\"20px\"></mglon-icon>\n      </button>\n      }\n    </mglon-button-group>\n    } @else {\n    <!-- Text buttons for larger screens -->\n    <mglon-button-group type=\"text\" [disabled]=\"false\" [appereance]=\"buttonGroupAppearance()\"\n      [rounded]=\"buttonGroupRounded()\" [density]=\"buttonGroupDensity()\">\n      @for (view of views(); track view) {\n      <button mglon-button appereance=\"ghost\" [active]=\"activeView() === view\" (click)=\"viewChange.emit(view)\">\n        {{ view }}\n      </button>\n      }\n    </mglon-button-group>\n    }\n\n    @if (editable()) {\n    <button mglon-icon-button [rounded]=\"iconButtonRounded()\" (click)=\"add.emit()\">\n      <mglon-icon name=\"add\"></mglon-icon>\n    </button>\n    }\n  </div>\n\n</div>", styles: [":host{display:block;--header-bg: var(--mglon-header-bg, var(--mglon-schedule-surface));--header-padding: var(--mglon-header-padding, var(--mglon-schedule-spacing-md));--header-gap: var(--mglon-header-gap, var(--mglon-schedule-spacing-md));--header-title-size: var(--mglon-header-title-size, 1.5rem);--header-title-weight: var(--mglon-header-title-weight, 500);--header-title-color: var(--mglon-header-title-color, var(--mglon-schedule-text-primary));--header-title-mobile-size: var(--mglon-header-title-mobile-size, 1.25rem);--header-nav-gap: var(--mglon-header-nav-gap, var(--mglon-schedule-spacing-sm));background-color:var(--header-bg);container-type:inline-size;container-name:header}.mglon-header{display:flex;align-items:center;gap:var(--header-gap);padding:var(--header-padding)}@container (max-width: 767.98px){.mglon-header{flex-direction:column;align-items:stretch}}.mglon-header__nav{display:flex;align-items:center;flex-grow:1;gap:var(--header-nav-gap);justify-self:start}@container (max-width: 767.98px){.mglon-header__nav{justify-content:space-between;flex-grow:0;width:100%}}.mglon-header__nav__actions{display:flex;align-items:center;gap:var(--header-nav-gap);justify-self:start;flex-grow:0}@container (max-width: 767.98px){.mglon-header__nav__actions{justify-content:space-between}}.mglon-header__title{margin:0;font-family:var(--mglon-schedule-font-family);font-size:var(--header-title-size);font-weight:var(--header-title-weight);color:var(--header-title-color);justify-self:center;text-align:center}@container (max-width: 767.98px){.mglon-header__title{order:-1;font-size:var(--header-title-mobile-size)}}.mglon-header__actions{display:flex;gap:var(--header-gap);align-items:center;justify-self:end}@container (max-width: 767.98px){.mglon-header__actions{justify-content:space-between;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "mglon-icon", inputs: ["name"] }, { kind: "component", type: ButtonGroupComponent, selector: "mglon-button-group", inputs: ["type", "density", "appereance", "rounded", "orientation", "disabled"] }, { kind: "component", type: ButtonComponent, selector: "button[mglon-button], a[mglon-button]", inputs: ["appereance", "color", "size", "rounded", "density", "active", "disabled"] }, { kind: "component", type: IconButtonComponent, selector: "button[mglon-icon-button], a[mglon-icon-button]", inputs: ["appereance", "color", "size", "rounded", "active", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HeaderSchedule, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-header-schedule', standalone: true, imports: [CommonModule, IconComponent, ButtonGroupComponent, ButtonComponent, IconButtonComponent], template: "<div class=\"mglon-header\">\n\n  <!-- Row 2: Navigation + Title -->\n  <div class=\"mglon-header__nav\">\n    <div class=\"mglon-header__nav__actions\">\n      <button mglon-icon-button [rounded]=\"iconButtonRounded()\" (click)=\"prev.emit()\">\n        <mglon-icon name=\"chevron-left\"></mglon-icon>\n      </button>\n      <button mglon-button [appereance]=\"todayButtonAppearance()\" [rounded]=\"todayButtonRounded()\"\n        (click)=\"today.emit()\">\n        Today\n      </button>\n      <button mglon-icon-button [rounded]=\"iconButtonRounded()\" (click)=\"next.emit()\">\n        <mglon-icon name=\"chevron-right\"></mglon-icon>\n      </button>\n    </div>\n\n    <h2 class=\"mglon-header__title\">{{ title() }}</h2>\n  </div>\n\n  <div class=\"mglon-header__actions\">\n    @if (isSmallScreen()) {\n    <!-- Icon buttons for small screens -->\n    <mglon-button-group type=\"icon\" [disabled]=\"false\" [appereance]=\"buttonGroupAppearance()\"\n      [rounded]=\"buttonGroupRounded()\" [density]=\"buttonGroupDensity()\">\n      @for (view of views(); track view) {\n      <button mglon-icon-button appereance=\"ghost\" [active]=\"activeView() === view\" (click)=\"viewChange.emit(view)\">\n        <mglon-icon [name]=\"viewIcons[view]\" size=\"20px\"></mglon-icon>\n      </button>\n      }\n    </mglon-button-group>\n    } @else {\n    <!-- Text buttons for larger screens -->\n    <mglon-button-group type=\"text\" [disabled]=\"false\" [appereance]=\"buttonGroupAppearance()\"\n      [rounded]=\"buttonGroupRounded()\" [density]=\"buttonGroupDensity()\">\n      @for (view of views(); track view) {\n      <button mglon-button appereance=\"ghost\" [active]=\"activeView() === view\" (click)=\"viewChange.emit(view)\">\n        {{ view }}\n      </button>\n      }\n    </mglon-button-group>\n    }\n\n    @if (editable()) {\n    <button mglon-icon-button [rounded]=\"iconButtonRounded()\" (click)=\"add.emit()\">\n      <mglon-icon name=\"add\"></mglon-icon>\n    </button>\n    }\n  </div>\n\n</div>", styles: [":host{display:block;--header-bg: var(--mglon-header-bg, var(--mglon-schedule-surface));--header-padding: var(--mglon-header-padding, var(--mglon-schedule-spacing-md));--header-gap: var(--mglon-header-gap, var(--mglon-schedule-spacing-md));--header-title-size: var(--mglon-header-title-size, 1.5rem);--header-title-weight: var(--mglon-header-title-weight, 500);--header-title-color: var(--mglon-header-title-color, var(--mglon-schedule-text-primary));--header-title-mobile-size: var(--mglon-header-title-mobile-size, 1.25rem);--header-nav-gap: var(--mglon-header-nav-gap, var(--mglon-schedule-spacing-sm));background-color:var(--header-bg);container-type:inline-size;container-name:header}.mglon-header{display:flex;align-items:center;gap:var(--header-gap);padding:var(--header-padding)}@container (max-width: 767.98px){.mglon-header{flex-direction:column;align-items:stretch}}.mglon-header__nav{display:flex;align-items:center;flex-grow:1;gap:var(--header-nav-gap);justify-self:start}@container (max-width: 767.98px){.mglon-header__nav{justify-content:space-between;flex-grow:0;width:100%}}.mglon-header__nav__actions{display:flex;align-items:center;gap:var(--header-nav-gap);justify-self:start;flex-grow:0}@container (max-width: 767.98px){.mglon-header__nav__actions{justify-content:space-between}}.mglon-header__title{margin:0;font-family:var(--mglon-schedule-font-family);font-size:var(--header-title-size);font-weight:var(--header-title-weight);color:var(--header-title-color);justify-self:center;text-align:center}@container (max-width: 767.98px){.mglon-header__title{order:-1;font-size:var(--header-title-mobile-size)}}.mglon-header__actions{display:flex;gap:var(--header-gap);align-items:center;justify-self:end}@container (max-width: 767.98px){.mglon-header__actions{justify-content:space-between;width:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], activeView: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeView", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], next: [{ type: i0.Output, args: ["next"] }], prev: [{ type: i0.Output, args: ["prev"] }], today: [{ type: i0.Output, args: ["today"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], add: [{ type: i0.Output, args: ["add"] }] } });
+
+class MonthHeader {
+    daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonthHeader, isStandalone: true, selector: "mglon-month-header", ngImport: i0, template: "<div class=\"mglon-month-header-container\">\n  <!-- Spacer to align with toggle column -->\n  <div class=\"mglon-month-header__spacer\"></div>\n\n  <div class=\"mglon-month-header\">\n    @for (day of daysOfWeek; track $index) {\n    <div>{{ day }}</div>\n    }\n  </div>\n</div>", styles: [":host{display:block;width:100%;--month-header-bg: var(--mglon-month-header-bg, var(--mglon-schedule-surface));--month-header-border: var(--mglon-month-header-border, 1px solid var(--mglon-schedule-border));--month-header-padding: var(--mglon-month-header-padding, var(--mglon-schedule-padding-md));--month-header-text-color: var(--mglon-month-header-text-color, var(--mglon-schedule-text-primary));--month-header-font-size: var(--mglon-month-header-font-size, var(--mglon-schedule-font-size-md));--month-header-font-weight: var(--mglon-month-header-font-weight, 500);--month-header-z-index: var(--mglon-month-header-z-index, var(--mglon-schedule-z-sticky))}.mglon-month-header-container{display:flex;width:100%;position:sticky;top:0;z-index:var(--month-header-z-index);background-color:var(--month-header-bg)}.mglon-month-header__spacer{width:32px;min-width:32px;background-color:var(--month-header-bg)}.mglon-month-header{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-bottom:var(--month-header-border)}.mglon-month-header>div{padding:var(--month-header-padding);text-align:center;font-weight:var(--month-header-font-weight);font-size:var(--month-header-font-size);color:var(--month-header-text-color)}.mglon-month-header>div:last-child{border-right:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-header', imports: [], template: "<div class=\"mglon-month-header-container\">\n  <!-- Spacer to align with toggle column -->\n  <div class=\"mglon-month-header__spacer\"></div>\n\n  <div class=\"mglon-month-header\">\n    @for (day of daysOfWeek; track $index) {\n    <div>{{ day }}</div>\n    }\n  </div>\n</div>", styles: [":host{display:block;width:100%;--month-header-bg: var(--mglon-month-header-bg, var(--mglon-schedule-surface));--month-header-border: var(--mglon-month-header-border, 1px solid var(--mglon-schedule-border));--month-header-padding: var(--mglon-month-header-padding, var(--mglon-schedule-padding-md));--month-header-text-color: var(--mglon-month-header-text-color, var(--mglon-schedule-text-primary));--month-header-font-size: var(--mglon-month-header-font-size, var(--mglon-schedule-font-size-md));--month-header-font-weight: var(--mglon-month-header-font-weight, 500);--month-header-z-index: var(--mglon-month-header-z-index, var(--mglon-schedule-z-sticky))}.mglon-month-header-container{display:flex;width:100%;position:sticky;top:0;z-index:var(--month-header-z-index);background-color:var(--month-header-bg)}.mglon-month-header__spacer{width:32px;min-width:32px;background-color:var(--month-header-bg)}.mglon-month-header{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-bottom:var(--month-header-border)}.mglon-month-header>div{padding:var(--month-header-padding);text-align:center;font-weight:var(--month-header-font-weight);font-size:var(--month-header-font-size);color:var(--month-header-text-color)}.mglon-month-header>div:last-child{border-right:none}\n"] }]
+        }] });
+
+class MonthDayIndicator {
+    day = input.required(...(ngDevMode ? [{ debugName: "day" }] : []));
+    isToday = computed(() => this.day().date.toDateString() === new Date().toDateString(), ...(ngDevMode ? [{ debugName: "isToday" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthDayIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: MonthDayIndicator, isStandalone: true, selector: "mglon-month-day-indicator", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mglon-month-day-indicator__container\">\n  <span [class.today]=\"isToday()\">{{ day().day }}</span>\n</div>", styles: [".mglon-month-day-indicator__container{font-size:var(--month-cell-day-number-size);font-weight:var(--month-cell-day-number-weight);line-height:1}.mglon-month-day-indicator__container span{color:var(--mglon-month-day-indicator-text-color, var(--mglon-schedule-text-secondary));padding:var(--mglon-month-day-indicator-padding, var(--mglon-schedule-padding-xs));border-radius:var(--mglon-month-day-indicator-border-radius, var(--mglon-schedule-radius-full))}.mglon-month-day-indicator__container .today{color:var(--mglon-month-day-indicator-today-background-color, var(--mglon-schedule-error));font-weight:600}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthDayIndicator, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-day-indicator', imports: [], template: "<div class=\"mglon-month-day-indicator__container\">\n  <span [class.today]=\"isToday()\">{{ day().day }}</span>\n</div>", styles: [".mglon-month-day-indicator__container{font-size:var(--month-cell-day-number-size);font-weight:var(--month-cell-day-number-weight);line-height:1}.mglon-month-day-indicator__container span{color:var(--mglon-month-day-indicator-text-color, var(--mglon-schedule-text-secondary));padding:var(--mglon-month-day-indicator-padding, var(--mglon-schedule-padding-xs));border-radius:var(--mglon-month-day-indicator-border-radius, var(--mglon-schedule-radius-full))}.mglon-month-day-indicator__container .today{color:var(--mglon-month-day-indicator-today-background-color, var(--mglon-schedule-error));font-weight:600}\n"] }]
+        }], propDecorators: { day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: true }] }] } });
+
+class MonthCell {
+    store = inject(CalendarStore);
+    // Input for the day data
+    day = input.required(...(ngDevMode ? [{ debugName: "day" }] : []));
+    /** Whether a slot is currently being dragged or resized over this cell */
+    isDragOver = computed(() => {
+        const dragState = this.store.dragState();
+        const resizeState = this.store.resizeState();
+        const hoverDate = dragState.hoverDate || resizeState.hoverDate;
+        if (!hoverDate)
+            return false;
+        return hoverDate.getTime() === this.day().date.getTime();
+    }, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: MonthCell, isStandalone: true, selector: "mglon-month-cell", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mglon-month-cell\" [class.mglon-month-cell--other-month]=\"!day().isCurrentMonth\"\n  [class.mglon-month-cell--current-month]=\"day().isCurrentMonth\" [class.mglon-month-cell--drag-over]=\"isDragOver()\"\n  [attr.data-mglon-date]=\"day().date.getTime()\">\n  <mglon-month-day-indicator [day]=\"day()\"></mglon-month-day-indicator>\n</div>", styles: [":host{display:block;height:100%;width:100%;--month-cell-padding: var(--mglon-month-cell-padding, var(--mglon-schedule-padding-sm));--month-cell-bg: var(--mglon-month-cell-bg, var(--mglon-schedule-surface));--month-cell-hover-bg: var(--mglon-month-cell-hover-bg, var(--mglon-schedule-surface-1));--month-cell-text-primary: var(--mglon-month-cell-text-primary, var(--mglon-schedule-text-primary));--month-cell-text-secondary: var(--mglon-month-cell-text-secondary, var(--mglon-schedule-text-secondary));--month-cell-day-number-size: var(--mglon-month-cell-day-number-size, var(--mglon-schedule-font-size-sm));--month-cell-day-number-weight: var(--mglon-month-cell-day-number-weight, 500);--month-cell-transition-duration: var(--mglon-month-cell-transition-duration, var(--mglon-schedule-transition-duration))}.mglon-month-cell{position:relative;padding:var(--month-cell-padding);background-color:var(--month-cell-bg);overflow:hidden;height:100%;box-sizing:border-box;transition-duration:var(--month-cell-transition-duration)}.mglon-month-cell:last-child{border-right:none}.mglon-month-cell:hover,.mglon-month-cell--drag-over{background-color:var(--month-cell-hover-bg)}.mglon-month-cell--drag-over{box-shadow:inset 0 0 0 2px var(--mglon-schedule-primary);z-index:1}.mglon-month-cell--other-month .mglon-month-cell__day-number{color:var(--month-cell-text-secondary);opacity:.5}.mglon-month-cell--current-month .mglon-month-cell__day-number{color:var(--month-cell-text-primary)}\n"], dependencies: [{ kind: "component", type: MonthDayIndicator, selector: "mglon-month-day-indicator", inputs: ["day"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthCell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-cell', standalone: true, imports: [MonthDayIndicator], template: "<div class=\"mglon-month-cell\" [class.mglon-month-cell--other-month]=\"!day().isCurrentMonth\"\n  [class.mglon-month-cell--current-month]=\"day().isCurrentMonth\" [class.mglon-month-cell--drag-over]=\"isDragOver()\"\n  [attr.data-mglon-date]=\"day().date.getTime()\">\n  <mglon-month-day-indicator [day]=\"day()\"></mglon-month-day-indicator>\n</div>", styles: [":host{display:block;height:100%;width:100%;--month-cell-padding: var(--mglon-month-cell-padding, var(--mglon-schedule-padding-sm));--month-cell-bg: var(--mglon-month-cell-bg, var(--mglon-schedule-surface));--month-cell-hover-bg: var(--mglon-month-cell-hover-bg, var(--mglon-schedule-surface-1));--month-cell-text-primary: var(--mglon-month-cell-text-primary, var(--mglon-schedule-text-primary));--month-cell-text-secondary: var(--mglon-month-cell-text-secondary, var(--mglon-schedule-text-secondary));--month-cell-day-number-size: var(--mglon-month-cell-day-number-size, var(--mglon-schedule-font-size-sm));--month-cell-day-number-weight: var(--mglon-month-cell-day-number-weight, 500);--month-cell-transition-duration: var(--mglon-month-cell-transition-duration, var(--mglon-schedule-transition-duration))}.mglon-month-cell{position:relative;padding:var(--month-cell-padding);background-color:var(--month-cell-bg);overflow:hidden;height:100%;box-sizing:border-box;transition-duration:var(--month-cell-transition-duration)}.mglon-month-cell:last-child{border-right:none}.mglon-month-cell:hover,.mglon-month-cell--drag-over{background-color:var(--month-cell-hover-bg)}.mglon-month-cell--drag-over{box-shadow:inset 0 0 0 2px var(--mglon-schedule-primary);z-index:1}.mglon-month-cell--other-month .mglon-month-cell__day-number{color:var(--month-cell-text-secondary);opacity:.5}.mglon-month-cell--current-month .mglon-month-cell__day-number{color:var(--month-cell-text-primary)}\n"] }]
+        }], propDecorators: { day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: true }] }] } });
+
+class ZigzagDirective {
+    /**
+     * Side(s) to apply the zigzag effect to.
+     * Can be a single side string or an array of sides.
+     */
+    sides = input.required({ ...(ngDevMode ? { debugName: "sides" } : {}), alias: 'mglonZigzag' });
+    /**
+     * Size of the zigzag teeth (e.g., '10px', '0.5em').
+     * Defaults to '5px' if not specified.
+     */
+    zigzagSize = input('5px', ...(ngDevMode ? [{ debugName: "zigzagSize" }] : []));
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    constructor() {
+        effect(() => {
+            const sidesInput = this.sides();
+            const sides = Array.isArray(sidesInput) ? sidesInput : [sidesInput];
+            // Clear all existing zigzag classes first
+            const allSides = ['top', 'right', 'bottom', 'left'];
+            allSides.forEach(side => {
+                this.renderer.removeClass(this.elementRef.nativeElement, `mglon-zigzag-${side}`);
+            });
+            // Apply classes for requested sides
+            sides.forEach(side => {
+                if (side && allSides.includes(side)) {
+                    this.renderer.addClass(this.elementRef.nativeElement, `mglon-zigzag-${side}`);
+                }
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZigzagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ZigzagDirective, isStandalone: true, selector: "[mglonZigzag]", inputs: { sides: { classPropertyName: "sides", publicName: "mglonZigzag", isSignal: true, isRequired: true, transformFunction: null }, zigzagSize: { classPropertyName: "zigzagSize", publicName: "zigzagSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--mglon-zigzag-size": "zigzagSize()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZigzagDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglonZigzag]',
+                    standalone: true,
+                    host: {
+                        '[style.--mglon-zigzag-size]': 'zigzagSize()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { sides: [{ type: i0.Input, args: [{ isSignal: true, alias: "mglonZigzag", required: true }] }], zigzagSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zigzagSize", required: false }] }] } });
+
+class ResizableDirective {
+    /**
+     * Sides to allow resizing on.
+     */
+    sides = input.required({ ...(ngDevMode ? { debugName: "sides" } : {}), alias: 'mglonResizable' });
+    /**
+     * Size of the resize handle area in pixels.
+     */
+    handleSize = input(6, ...(ngDevMode ? [{ debugName: "handleSize" }] : []));
+    /**
+     * Emitted when a resize interaction starts (mousedown on handle).
+     */
+    resizeStart = output();
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    store = inject(CalendarStore);
+    destroyMouseDownListener;
+    constructor() {
+        effect(() => {
+            const sidesInput = this.sides();
+            const sides = Array.isArray(sidesInput) ? sidesInput : [sidesInput];
+            const allSides = ['top', 'right', 'bottom', 'left'];
+            allSides.forEach(side => {
+                this.renderer.removeClass(this.elementRef.nativeElement, `mglon-resizable-${side}`);
+            });
+            sides.forEach(side => {
+                if (side && allSides.includes(side)) {
+                    this.renderer.addClass(this.elementRef.nativeElement, `mglon-resizable-${side}`);
+                }
+            });
+        });
+    }
+    onMouseEnter() {
+        if (this.destroyMouseDownListener) {
+            return;
+        }
+        this.destroyMouseDownListener = this.renderer.listen(this.elementRef.nativeElement, 'mousedown', (event) => this.handleMouseDown(event));
+    }
+    onMouseLeave() {
+        if (this.destroyMouseDownListener) {
+            this.destroyMouseDownListener();
+            this.destroyMouseDownListener = undefined;
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupListeners();
+    }
+    cleanupListeners() {
+        if (this.destroyMouseDownListener) {
+            this.destroyMouseDownListener();
+            this.destroyMouseDownListener = undefined;
+        }
+    }
+    handleMouseDown(event) {
+        const sidesInput = this.sides();
+        const activeSides = Array.isArray(sidesInput) ? sidesInput : [sidesInput];
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const w = rect.width;
+        const h = rect.height;
+        const handle = this.handleSize();
+        let clickedSide = null;
+        if (activeSides.includes('left') && x <= handle) {
+            clickedSide = 'left';
+        }
+        else if (activeSides.includes('right') && x >= w - handle) {
+            clickedSide = 'right';
+        }
+        else if (activeSides.includes('top') && y <= handle) {
+            clickedSide = 'top';
+        }
+        else if (activeSides.includes('bottom') && y >= h - handle) {
+            clickedSide = 'bottom';
+        }
+        if (clickedSide) {
+            if (this.store.interactionMode() !== 'none' && this.store.interactionMode() !== 'dragging') {
+                // Only allow resizing if nothing else is happening
+                // Note: we might be in 'dragging' mode because of pointerdown already firing on MonthSlot
+                // So we might need to override it.
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.store.setInteractionMode('resizing');
+            this.resizeStart.emit({ side: clickedSide, event });
+            // Add global mouseup to reset interaction mode
+            const onUp = () => {
+                this.store.setInteractionMode('none');
+                window.removeEventListener('mouseup', onUp);
+            };
+            window.addEventListener('mouseup', onUp);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ResizableDirective, isStandalone: true, selector: "[mglonResizable]", inputs: { sides: { classPropertyName: "sides", publicName: "mglonResizable", isSignal: true, isRequired: true, transformFunction: null }, handleSize: { classPropertyName: "handleSize", publicName: "handleSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeStart: "resizeStart" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "style.--mglon-resize-handle-size": "handleSize() + \"px\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglonResizable]',
+                    standalone: true,
+                    host: {
+                        '[style.--mglon-resize-handle-size]': 'handleSize() + "px"'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { sides: [{ type: i0.Input, args: [{ isSignal: true, alias: "mglonResizable", required: true }] }], handleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleSize", required: false }] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class MonthRecurrenceDirective {
+    el = inject(ElementRef);
+    vcr = inject(ViewContainerRef);
+    /** Whether the event is recurrent */
+    isRecurrent = input(false, { ...(ngDevMode ? { debugName: "isRecurrent" } : {}), alias: 'mglonMonthRecurrence' });
+    constructor() {
+        effect(() => {
+            if (this.isRecurrent()) {
+                this.addIcon();
+            }
+            else {
+                this.removeIcon();
+            }
+        });
+    }
+    addIcon() {
+        // Check if icon already exists to avoid duplicates
+        if (this.el.nativeElement.querySelector('.mglon-month-slot__recurrence-icon')) {
+            return;
+        }
+        const componentRef = this.vcr.createComponent(IconComponent);
+        componentRef.setInput('name', 'cycle');
+        // Get the DOM element of the icon
+        const iconElement = componentRef.location.nativeElement;
+        iconElement.classList.add('mglon-month-slot__recurrence-icon');
+        // Insert before the text content
+        this.el.nativeElement.prepend(iconElement);
+    }
+    removeIcon() {
+        const icon = this.el.nativeElement.querySelector('.mglon-month-slot__recurrence-icon');
+        if (icon) {
+            icon.remove();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthRecurrenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: MonthRecurrenceDirective, isStandalone: true, selector: "[mglonMonthRecurrence]", inputs: { isRecurrent: { classPropertyName: "isRecurrent", publicName: "mglonMonthRecurrence", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthRecurrenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglonMonthRecurrence]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { isRecurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "mglonMonthRecurrence", required: false }] }] } });
+
+class AllDayDirective {
+    el = inject(ElementRef);
+    vcr = inject(ViewContainerRef);
+    /** Whether the event is all-day */
+    isAllDay = input(false, { ...(ngDevMode ? { debugName: "isAllDay" } : {}), alias: 'mglonAllDay' });
+    /** Color for the dot icon */
+    dotColor = input('', ...(ngDevMode ? [{ debugName: "dotColor" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.isAllDay()) {
+                this.addIcon();
+                // The host binding in MonthSlot will handle most styling, 
+                // but we add a class for extra specificity if needed.
+                this.el.nativeElement.classList.add('mglon-event--all-day');
+            }
+            else {
+                this.removeIcon();
+                this.el.nativeElement.classList.remove('mglon-event--all-day');
+            }
+        });
+        // Handle dynamic color changes for the dot
+        effect(() => {
+            const color = this.dotColor();
+            const icon = this.el.nativeElement.querySelector('.mglon-event__all-day-icon');
+            if (icon && color) {
+                icon.style.color = color;
+            }
+        });
+    }
+    addIcon() {
+        if (this.el.nativeElement.querySelector('.mglon-event__all-day-icon')) {
+            return;
+        }
+        const componentRef = this.vcr.createComponent(IconComponent);
+        componentRef.setInput('name', 'dot');
+        const iconElement = componentRef.location.nativeElement;
+        iconElement.classList.add('mglon-event__all-day-icon');
+        if (this.dotColor()) {
+            iconElement.style.color = this.dotColor();
+        }
+        // Insert before the title/text
+        this.el.nativeElement.prepend(iconElement);
+    }
+    removeIcon() {
+        const icon = this.el.nativeElement.querySelector('.mglon-event__all-day-icon');
+        if (icon) {
+            icon.remove();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AllDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: AllDayDirective, isStandalone: true, selector: "[mglonAllDay]", inputs: { isAllDay: { classPropertyName: "isAllDay", publicName: "mglonAllDay", isSignal: true, isRequired: false, transformFunction: null }, dotColor: { classPropertyName: "dotColor", publicName: "dotColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AllDayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglonAllDay]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { isAllDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "mglonAllDay", required: false }] }], dotColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColor", required: false }] }] } });
+
+/** Maps EventSlotRadius to CSS variable names */
+const RADIUS_VAR_MAP = {
+    'none': '0',
+    'sm': 'var(--mglon-schedule-radius-sm)', // Small fixed value for subtle rounding on slots
+    'full': 'var(--mglon-schedule-radius-full)'
+};
+class MonthSlot {
+    store = inject(CalendarStore);
+    slot = input.required(...(ngDevMode ? [{ debugName: "slot" }] : []));
+    /** Whether this specific event is being dragged */
+    isDragging = computed(() => this.store.dragState().eventId === this.slot().idEvent, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    /** Whether this event is currently hovered globally */
+    isHovered = computed(() => this.store.hoveredEventId() === this.slot().idEvent, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
+    /**
+     * Gets the event data from the store using the slot's event ID.
+     */
+    event = computed(() => {
+        return this.store.getEvent(this.slot().idEvent);
+    }, ...(ngDevMode ? [{ debugName: "event" }] : []));
+    /** Whether this event is part of a recurrence series */
+    isRecurrent = computed(() => {
+        const e = this.event();
+        return e?.type === 'event' && e.isRecurrenceInstance === true;
+    }, ...(ngDevMode ? [{ debugName: "isRecurrent" }] : []));
+    /** Whether the event is all-day */
+    isAllDay = computed(() => {
+        return this.event()?.isAllDay === true;
+    }, ...(ngDevMode ? [{ debugName: "isAllDay" }] : []));
+    /**
+     * Display title for the slot.
+     */
+    title = computed(() => {
+        return this.event()?.title ?? '';
+    }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * Complete color scheme calculation based on event type
+     */
+    colorScheme = computed(() => {
+        // 1. Resolve base raw color
+        const rawColor = this.rawColor();
+        // 2. Generate all adaptive variants
+        const scheme = generateAdaptiveColorScheme(rawColor);
+        // 3. Select variant based on configuration and event type
+        const useDynamic = this.store.uiConfig().grid.useDynamicColors;
+        if (!useDynamic) {
+            return scheme.raw;
+        }
+        return this.isRecurrent() ? scheme.pastel : scheme.vivid;
+    }, ...(ngDevMode ? [{ debugName: "colorScheme" }] : []));
+    /**
+     * Raw color resolved for the event (before adaptive variants)
+     */
+    rawColor = computed(() => {
+        return getEventColor({ color: this.slot().color, resourceId: this.event()?.resourceId }, (id) => this.store.getResource(id), this.store.uiConfig().grid.eventSlots.color || '#1a73e8');
+    }, ...(ngDevMode ? [{ debugName: "rawColor" }] : []));
+    /**
+     * Border radius from uiConfig, mapped to CSS variable.
+     */
+    slotRadius = computed(() => {
+        const rounded = this.store.uiConfig().grid.eventSlots.rounded;
+        return RADIUS_VAR_MAP[rounded];
+    }, ...(ngDevMode ? [{ debugName: "slotRadius" }] : []));
+    /**
+     * Determines which sides get zigzag effect based on slot type.
+     * - 'first': right side (continues to next week)
+     * - 'last': left side (comes from previous week)
+     * - 'middle': both sides (spans entire week)
+     * - 'full': no zigzag (complete within week)
+     */
+    zigzagSides = computed(() => {
+        const type = this.slot().type;
+        switch (type) {
+            case 'first':
+                return ['right'];
+            case 'last':
+                return ['left'];
+            case 'middle':
+                return ['left', 'right'];
+            default:
+                return [];
+        }
+    }, ...(ngDevMode ? [{ debugName: "zigzagSides" }] : []));
+    /**
+     * Determines which sides are resizable.
+     * Only sides without zigzag are resizable, and only if resizableEvents is enabled.
+     */
+    resizableSides = computed(() => {
+        // Check global config from store
+        if (!this.store.config().resizableEvents) {
+            return [];
+        }
+        // Check resource-specific config if available
+        const event = this.event();
+        if (event?.resourceId) {
+            const resource = this.store.getResource(event.resourceId);
+            if (resource && resource.resizableEvents === false) {
+                return [];
+            }
+        }
+        const type = this.slot().type;
+        switch (type) {
+            case 'first':
+                return ['left'];
+            case 'last':
+                return ['right'];
+            case 'middle':
+                return [];
+            case 'full':
+                return ['left', 'right'];
+            default:
+                return [];
+        }
+    }, ...(ngDevMode ? [{ debugName: "resizableSides" }] : []));
+    dragDelayTimer;
+    DRAG_DELAY = 150; // ms
+    DRAG_THRESHOLD = 5; // px
+    startPointerPos = { x: 0, y: 0 };
+    clickTimer;
+    ignoreNextClick = false;
+    onPointerDown(event) {
+        // Only handle primary button and if no other interaction is active
+        if (event.button !== 0 || this.store.interactionMode() !== 'none')
+            return;
+        // Check if we clicked a resize handle
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const sides = this.resizableSides();
+        const handleSize = 6; // Matching ResizableDirective default
+        if (sides.includes('left') && x <= handleSize)
+            return;
+        if (sides.includes('right') && x >= rect.width - handleSize)
+            return;
+        // Stop propagation immediately to prevent background selection from seeing this event
+        event.stopPropagation();
+        this.startPointerPos = { x: event.clientX, y: event.clientY };
+        // Lock the mutex immediately to block other potential listeners (like Selection)
+        this.store.setInteractionMode('dragging');
+        this.dragDelayTimer = setTimeout(() => {
+            this.initiateDrag(event);
+        }, this.DRAG_DELAY);
+        // Bind movement and release to handle cancellation
+        const onMove = (e) => this.onGlobalMove(e);
+        const onUp = (e) => {
+            this.onGlobalUp(e);
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    }
+    initiateDrag(event) {
+        const target = event.currentTarget || event.target;
+        if (target.setPointerCapture) {
+            target.setPointerCapture(event.pointerId);
+        }
+        // Calculate grabDate (exact day clicked)
+        const rect = target.getBoundingClientRect();
+        const clickX = this.startPointerPos.x - rect.left;
+        const slotWidth = rect.width;
+        const daysSpan = differenceInCalendarDays(this.slot().end, this.slot().start) + 1;
+        const dayOffset = Math.max(0, Math.min(Math.floor((clickX / slotWidth) * daysSpan), daysSpan - 1));
+        const grabDate = addDays(this.slot().start, dayOffset);
+        this.store.setDragStart(this.slot().idEvent, grabDate);
+        this.store.setInteractionMode('dragging');
+        // Dispatch dragStart interaction
+        this.store.dispatchInteraction('dragStart', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id,
+            data: {
+                grabDate,
+                hoverDate: null
+            }
+        });
+    }
+    onGlobalMove(event) {
+        if (this.store.dragState().eventId) { // Check if we are actually dragging (timer finished)
+            this.onPointerMove(event);
+        }
+        else if (this.dragDelayTimer) {
+            // Check if we moved too much before the delay finished
+            const dist = Math.sqrt(Math.pow(event.clientX - this.startPointerPos.x, 2) +
+                Math.pow(event.clientY - this.startPointerPos.y, 2));
+            if (dist > this.DRAG_THRESHOLD) {
+                this.store.setInteractionMode('none'); // Release mutex if it was a scroll/swipe
+                this.cancelDragDelay();
+            }
+        }
+    }
+    onGlobalUp(event) {
+        this.cancelDragDelay();
+        if (this.store.dragState().eventId) {
+            this.onPointerUp(event);
+            // Occlude the next click event that follows pointerup
+            this.ignoreNextClick = true;
+        }
+        else {
+            // It was just a click or a cancelled drag, release mutex
+            this.store.setInteractionMode('none');
+        }
+    }
+    cancelDragDelay() {
+        if (this.dragDelayTimer) {
+            clearTimeout(this.dragDelayTimer);
+            this.dragDelayTimer = undefined;
+        }
+    }
+    onPointerMove(event) {
+        if (!this.isDragging())
+            return;
+        // Detect which cell we are over using coordinates
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const cell = element?.closest('.mglon-month-cell');
+        if (cell) {
+            const timestamp = cell.getAttribute('data-mglon-date');
+            if (timestamp) {
+                const hoverDate = new Date(parseInt(timestamp, 10));
+                this.store.setDragHover(hoverDate);
+                this.store.updateDraggedEventPosition();
+                // Dispatch drag interaction event
+                this.store.dispatchInteraction('drag', this.slot().idEvent, {
+                    event: this.event(),
+                    slotId: this.slot().id,
+                    data: {
+                        grabDate: this.store.dragState().grabDate,
+                        hoverDate: hoverDate
+                    }
+                });
+            }
+        }
+    }
+    onPointerUp(event) {
+        // Dispatch dragEnd interaction before clearing state
+        const dragState = this.store.dragState();
+        this.store.dispatchInteraction('dragEnd', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id,
+            data: {
+                grabDate: dragState.grabDate,
+                hoverDate: dragState.hoverDate
+            }
+        });
+        this.store.setInteractionMode('none');
+        this.store.clearDragState();
+    }
+    onResizeStart(event) {
+        this.store.setResizeStart(this.slot().idEvent, event.side);
+        // Dispatch resizeStart interaction
+        this.store.dispatchInteraction('resizeStart', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id,
+            data: {
+                side: event.side,
+                date: this.slot().start // Basic reference date for start
+            }
+        });
+        // Bind movement and release for real-time resize feedback
+        // Similar to drag-and-drop, we use global listeners
+        const onMove = (e) => this.onGlobalResizeMove(e);
+        const onUp = () => {
+            // Occlude the next click event
+            this.ignoreNextClick = true;
+            // Dispatch resizeEnd interaction before clearing state
+            const resizeState = this.store.resizeState();
+            this.store.dispatchInteraction('resizeEnd', this.slot().idEvent, {
+                event: this.event(),
+                slotId: this.slot().id,
+                data: {
+                    side: resizeState.side,
+                    date: resizeState.hoverDate || (resizeState.side === 'left' ? this.slot().start : this.slot().end)
+                }
+            });
+            this.store.clearResizeState();
+            this.store.setInteractionMode('none');
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    }
+    onGlobalResizeMove(event) {
+        if (this.store.interactionMode() !== 'resizing')
+            return;
+        // Detect which cell we are over using coordinates
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const cell = element?.closest('.mglon-month-cell');
+        if (cell) {
+            const timestamp = cell.getAttribute('data-mglon-date');
+            if (timestamp) {
+                const hoverDate = new Date(parseInt(timestamp, 10));
+                this.store.setResizeHover(hoverDate);
+                this.store.updateResizedEvent();
+                // Dispatch resize interaction event
+                this.store.dispatchInteraction('resize', this.slot().idEvent, {
+                    event: this.event(),
+                    slotId: this.slot().id,
+                    data: {
+                        side: this.store.resizeState().side,
+                        date: hoverDate
+                    }
+                });
+            }
+        }
+    }
+    onMouseEnter() {
+        if (this.store.interactionMode() !== 'none')
+            return;
+        this.store.setHoveredEvent(this.slot().idEvent);
+        this.store.dispatchInteraction('mouseenter', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id
+        });
+    }
+    onMouseLeave() {
+        if (this.store.interactionMode() !== 'none')
+            return;
+        this.store.setHoveredEvent(null);
+        this.store.dispatchInteraction('mouseleave', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id
+        });
+    }
+    onClick(event) {
+        event.stopPropagation();
+        // Prevent click if we just finished a drag or resize
+        if (this.ignoreNextClick) {
+            this.ignoreNextClick = false;
+            return;
+        }
+        // Double click detection: if another click arrives within 250ms, cancel this one
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+            this.clickTimer = undefined;
+            return;
+        }
+        this.clickTimer = setTimeout(() => {
+            this.clickTimer = undefined;
+            this.store.dispatchInteraction('click', this.slot().idEvent, {
+                event: this.event(),
+                slotId: this.slot().id,
+                originalEvent: event
+            });
+        }, 250);
+    }
+    onDblClick(event) {
+        event.stopPropagation();
+        if (this.clickTimer) {
+            clearTimeout(this.clickTimer);
+            this.clickTimer = undefined;
+        }
+        this.store.dispatchInteraction('dblclick', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id,
+            originalEvent: event
+        });
+    }
+    onContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.store.dispatchInteraction('contextmenu', this.slot().idEvent, {
+            event: this.event(),
+            slotId: this.slot().id,
+            originalEvent: event
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonthSlot, isStandalone: true, selector: "mglon-month-slot", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.position": "\"absolute\"", "style.top.px": "slot().position.top", "style.left.%": "slot().position.left", "style.width.%": "slot().position.width", "style.--slot-width.%": "slot().position.width", "style.height.px": "slot().position.height", "style.z-index": "slot().zIndex", "style.--slot-bg": "isAllDay() ? \"var(--mglon-all-day-bg, var(--mglon-schedule-neutral-200))\" : colorScheme().base", "style.--slot-hover": "isAllDay() ? \"var(--mglon-all-day-hover, var(--mglon-schedule-neutral-300))\" : colorScheme().hover", "style.--slot-text": "isAllDay() ? \"var(--mglon-all-day-text, var(--mglon-schedule-on-surface))\" : colorScheme().text", "style.--slot-text-hover": "isAllDay() ? \"var(--mglon-all-day-text-hover, var(--mglon-schedule-on-surface))\" : colorScheme().textHover", "style.--slot-radius": "slotRadius()", "attr.data-slot-type": "slot().type", "class.mglon-month-slot--first": "slot().type === \"first\"", "class.mglon-month-slot--last": "slot().type === \"last\"", "class.mglon-month-slot--middle": "slot().type === \"middle\"", "class.mglon-month-slot--full": "slot().type === \"full\"", "class.mglon-event--all-day": "isAllDay()", "class.mglon-month-slot--dragging": "isDragging()", "class.mglon-month-slot--idle": "!isDragging()", "class.mglon-month-slot--hovered": "isHovered()" } }, ngImport: i0, template: "<!-- Renderizado de slots recurrentes (Se eliminan los eventos de resize y drag) -->\n@if(isRecurrent()) {\n<div class=\"mglon-month-slot__inner\" [mglonZigzag]=\"zigzagSides()\" (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\" (click)=\"onClick($event)\" (dblclick)=\"onDblClick($event)\"\n  (contextmenu)=\"onContextMenu($event)\">\n  <span class=\"mglon-month-slot__title\" [mglonMonthRecurrence]=\"isRecurrent()\" [mglonAllDay]=\"isAllDay()\"\n    [dotColor]=\"rawColor()\">{{ title() }}</span>\n</div>\n}\n\n<!-- Renderizado de slots no recurrentes -->\n@else {\n<div class=\"mglon-month-slot__inner\" [mglonZigzag]=\"zigzagSides()\" [mglonResizable]=\"resizableSides()\"\n  (resizeStart)=\"onResizeStart($event)\" (pointerdown)=\"onPointerDown($event)\" (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\" (click)=\"onClick($event)\" (dblclick)=\"onDblClick($event)\"\n  (contextmenu)=\"onContextMenu($event)\">\n  <span class=\"mglon-month-slot__title\" [mglonAllDay]=\"isAllDay()\" [dotColor]=\"rawColor()\">{{ title() }}</span>\n</div>\n}", styles: [".mglon-zigzag-right{position:relative}.mglon-zigzag-right:after{content:\"\";position:absolute;height:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;top:0;bottom:0;right:0;width:var(--mglon-zigzag-size, 5px);height:auto;transform:rotate(0)}.mglon-zigzag-left{position:relative}.mglon-zigzag-left:before{content:\"\";position:absolute;height:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;top:0;bottom:0;left:0;width:var(--mglon-zigzag-size, 5px);height:auto;transform:rotate(180deg)}.mglon-zigzag-top{position:relative}.mglon-zigzag-top:before{content:\"\";position:absolute;width:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;left:0;right:0;top:0;width:auto;height:var(--mglon-zigzag-size, 5px);transform:rotate(-90deg)}.mglon-zigzag-bottom{position:relative}.mglon-zigzag-bottom:after{content:\"\";position:absolute;width:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;left:0;right:0;bottom:0;width:auto;height:var(--mglon-zigzag-size, 5px);transform:rotate(90deg)}.mglon-resizable-left:before{content:\"\";position:absolute;background-color:transparent;z-index:10;top:0;bottom:0;left:0;width:var(--mglon-resize-handle-size, 6px);cursor:col-resize}.mglon-resizable-right:after{content:\"\";position:absolute;background-color:transparent;z-index:10;top:0;bottom:0;right:0;width:var(--mglon-resize-handle-size, 6px);cursor:col-resize}.mglon-resizable-top:before{content:\"\";position:absolute;background-color:transparent;z-index:10;left:0;right:0;top:0;height:var(--mglon-resize-handle-size, 6px);cursor:row-resize}.mglon-resizable-bottom:after{content:\"\";position:absolute;background-color:transparent;z-index:10;left:0;right:0;bottom:0;height:var(--mglon-resize-handle-size, 6px);cursor:row-resize}:host{display:flex;align-items:center;box-sizing:border-box;border-radius:var(--slot-radius, var(--mglon-schedule-radius-sm));background-color:var(--slot-bg, #4285f4);color:var(--slot-text, #fff);font-size:12px;line-height:1;overflow:hidden;cursor:grab;transition:background-color .15s ease;touch-action:none}:host:active{cursor:grabbing}:host:hover{background-color:var(--slot-hover);color:var(--slot-text-hover, var(--slot-text))}:host{pointer-events:all}:host(.mglon-month-slot--full){width:calc(var(--slot-width, 100%) - 4px)!important}:host(.mglon-month-slot--first){border-top-right-radius:0;border-bottom-right-radius:0}:host(.mglon-month-slot--last){border-top-left-radius:0;border-bottom-left-radius:0;width:calc(var(--slot-width, 100%) - 4px)!important}:host(.mglon-month-slot--middle){border-radius:0}.mglon-month-slot__inner{display:flex;align-items:center;width:100%;height:100%;padding:0 8px;box-sizing:border-box}.mglon-month-slot__title{display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.mglon-month-slot__title .mglon-month-slot__recurrence-icon{flex-shrink:0;margin-right:var(--mglon-schedule-gap-sm, 8px);font-size:1.2em}:host(.mglon-month-slot--idle){cursor:grab;pointer-events:all}:host(.mglon-month-slot--dragging){opacity:.6;cursor:grabbing;box-shadow:var(--mglon-schedule-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));transform:scale(1.02);z-index:100!important;pointer-events:none}:host(.mglon-month-slot--hovered){background-color:var(--slot-hover);color:var(--slot-text-hover, var(--slot-text))}:host(.mglon-event--all-day){box-shadow:none;border:var(--slot-border, none)}:host(.mglon-event--all-day):hover{border:var(--slot-border, none)}.mglon-event__all-day-icon{flex-shrink:0;margin-right:var(--mglon-schedule-gap-sm, 8px);font-size:1.2em;display:flex!important;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: ZigzagDirective, selector: "[mglonZigzag]", inputs: ["mglonZigzag", "zigzagSize"] }, { kind: "directive", type: ResizableDirective, selector: "[mglonResizable]", inputs: ["mglonResizable", "handleSize"], outputs: ["resizeStart"] }, { kind: "directive", type: MonthRecurrenceDirective, selector: "[mglonMonthRecurrence]", inputs: ["mglonMonthRecurrence"] }, { kind: "directive", type: AllDayDirective, selector: "[mglonAllDay]", inputs: ["mglonAllDay", "dotColor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthSlot, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-slot', imports: [ZigzagDirective, ResizableDirective, MonthRecurrenceDirective, AllDayDirective], host: {
+                        '[style.position]': '"absolute"',
+                        '[style.top.px]': 'slot().position.top',
+                        '[style.left.%]': 'slot().position.left',
+                        '[style.width.%]': 'slot().position.width',
+                        '[style.--slot-width.%]': 'slot().position.width',
+                        '[style.height.px]': 'slot().position.height',
+                        '[style.z-index]': 'slot().zIndex',
+                        '[style.--slot-bg]': 'isAllDay() ? "var(--mglon-all-day-bg, var(--mglon-schedule-neutral-200))" : colorScheme().base',
+                        '[style.--slot-hover]': 'isAllDay() ? "var(--mglon-all-day-hover, var(--mglon-schedule-neutral-300))" : colorScheme().hover',
+                        '[style.--slot-text]': 'isAllDay() ? "var(--mglon-all-day-text, var(--mglon-schedule-on-surface))" : colorScheme().text',
+                        '[style.--slot-text-hover]': 'isAllDay() ? "var(--mglon-all-day-text-hover, var(--mglon-schedule-on-surface))" : colorScheme().textHover',
+                        '[style.--slot-radius]': 'slotRadius()',
+                        '[attr.data-slot-type]': 'slot().type',
+                        '[class.mglon-month-slot--first]': 'slot().type === "first"',
+                        '[class.mglon-month-slot--last]': 'slot().type === "last"',
+                        '[class.mglon-month-slot--middle]': 'slot().type === "middle"',
+                        '[class.mglon-month-slot--full]': 'slot().type === "full"',
+                        '[class.mglon-event--all-day]': 'isAllDay()',
+                        '[class.mglon-month-slot--dragging]': 'isDragging()',
+                        '[class.mglon-month-slot--idle]': '!isDragging()',
+                        '[class.mglon-month-slot--hovered]': 'isHovered()',
+                    }, template: "<!-- Renderizado de slots recurrentes (Se eliminan los eventos de resize y drag) -->\n@if(isRecurrent()) {\n<div class=\"mglon-month-slot__inner\" [mglonZigzag]=\"zigzagSides()\" (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\" (click)=\"onClick($event)\" (dblclick)=\"onDblClick($event)\"\n  (contextmenu)=\"onContextMenu($event)\">\n  <span class=\"mglon-month-slot__title\" [mglonMonthRecurrence]=\"isRecurrent()\" [mglonAllDay]=\"isAllDay()\"\n    [dotColor]=\"rawColor()\">{{ title() }}</span>\n</div>\n}\n\n<!-- Renderizado de slots no recurrentes -->\n@else {\n<div class=\"mglon-month-slot__inner\" [mglonZigzag]=\"zigzagSides()\" [mglonResizable]=\"resizableSides()\"\n  (resizeStart)=\"onResizeStart($event)\" (pointerdown)=\"onPointerDown($event)\" (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\" (click)=\"onClick($event)\" (dblclick)=\"onDblClick($event)\"\n  (contextmenu)=\"onContextMenu($event)\">\n  <span class=\"mglon-month-slot__title\" [mglonAllDay]=\"isAllDay()\" [dotColor]=\"rawColor()\">{{ title() }}</span>\n</div>\n}", styles: [".mglon-zigzag-right{position:relative}.mglon-zigzag-right:after{content:\"\";position:absolute;height:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;top:0;bottom:0;right:0;width:var(--mglon-zigzag-size, 5px);height:auto;transform:rotate(0)}.mglon-zigzag-left{position:relative}.mglon-zigzag-left:before{content:\"\";position:absolute;height:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;top:0;bottom:0;left:0;width:var(--mglon-zigzag-size, 5px);height:auto;transform:rotate(180deg)}.mglon-zigzag-top{position:relative}.mglon-zigzag-top:before{content:\"\";position:absolute;width:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;left:0;right:0;top:0;width:auto;height:var(--mglon-zigzag-size, 5px);transform:rotate(-90deg)}.mglon-zigzag-bottom{position:relative}.mglon-zigzag-bottom:after{content:\"\";position:absolute;width:var(--mglon-zigzag-size, 5px);background-color:var(--mglon-zigzag-color, white);z-index:1;--mglon-zigzag-mask-size: calc(var(--mglon-zigzag-size, 5px) * 1.6);--zigzag-mask: linear-gradient(225deg, #000 50%, transparent 0), linear-gradient(315deg, #000 50%, transparent 0);-webkit-mask:var(--zigzag-mask);mask:var(--zigzag-mask);-webkit-mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);mask-size:var(--mglon-zigzag-mask-size) var(--mglon-zigzag-mask-size);-webkit-mask-composite:source-over;mask-composite:add;left:0;right:0;bottom:0;width:auto;height:var(--mglon-zigzag-size, 5px);transform:rotate(90deg)}.mglon-resizable-left:before{content:\"\";position:absolute;background-color:transparent;z-index:10;top:0;bottom:0;left:0;width:var(--mglon-resize-handle-size, 6px);cursor:col-resize}.mglon-resizable-right:after{content:\"\";position:absolute;background-color:transparent;z-index:10;top:0;bottom:0;right:0;width:var(--mglon-resize-handle-size, 6px);cursor:col-resize}.mglon-resizable-top:before{content:\"\";position:absolute;background-color:transparent;z-index:10;left:0;right:0;top:0;height:var(--mglon-resize-handle-size, 6px);cursor:row-resize}.mglon-resizable-bottom:after{content:\"\";position:absolute;background-color:transparent;z-index:10;left:0;right:0;bottom:0;height:var(--mglon-resize-handle-size, 6px);cursor:row-resize}:host{display:flex;align-items:center;box-sizing:border-box;border-radius:var(--slot-radius, var(--mglon-schedule-radius-sm));background-color:var(--slot-bg, #4285f4);color:var(--slot-text, #fff);font-size:12px;line-height:1;overflow:hidden;cursor:grab;transition:background-color .15s ease;touch-action:none}:host:active{cursor:grabbing}:host:hover{background-color:var(--slot-hover);color:var(--slot-text-hover, var(--slot-text))}:host{pointer-events:all}:host(.mglon-month-slot--full){width:calc(var(--slot-width, 100%) - 4px)!important}:host(.mglon-month-slot--first){border-top-right-radius:0;border-bottom-right-radius:0}:host(.mglon-month-slot--last){border-top-left-radius:0;border-bottom-left-radius:0;width:calc(var(--slot-width, 100%) - 4px)!important}:host(.mglon-month-slot--middle){border-radius:0}.mglon-month-slot__inner{display:flex;align-items:center;width:100%;height:100%;padding:0 8px;box-sizing:border-box}.mglon-month-slot__title{display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.mglon-month-slot__title .mglon-month-slot__recurrence-icon{flex-shrink:0;margin-right:var(--mglon-schedule-gap-sm, 8px);font-size:1.2em}:host(.mglon-month-slot--idle){cursor:grab;pointer-events:all}:host(.mglon-month-slot--dragging){opacity:.6;cursor:grabbing;box-shadow:var(--mglon-schedule-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15));transform:scale(1.02);z-index:100!important;pointer-events:none}:host(.mglon-month-slot--hovered){background-color:var(--slot-hover);color:var(--slot-text-hover, var(--slot-text))}:host(.mglon-event--all-day){box-shadow:none;border:var(--slot-border, none)}:host(.mglon-event--all-day):hover{border:var(--slot-border, none)}.mglon-event__all-day-icon{flex-shrink:0;margin-right:var(--mglon-schedule-gap-sm, 8px);font-size:1.2em;display:flex!important;align-items:center;justify-content:center}\n"] }]
+        }], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slot", required: true }] }] } });
+
+class MonthWeekEventsContainer {
+    slots = input.required(...(ngDevMode ? [{ debugName: "slots" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthWeekEventsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonthWeekEventsContainer, isStandalone: true, selector: "mglon-month-week-events-container", inputs: { slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.position": "\"relative\"", "style.width": "\"100%\"", "style.height": "\"100%\"" } }, ngImport: i0, template: "<div class=\"mglon-month-week-events-container\">\n  @for (slot of slots(); track slot.id) {\n  <mglon-month-slot [slot]=\"slot\"></mglon-month-slot>\n  }\n</div>", styles: [".mglon-month-week-events-container{position:relative;display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: MonthSlot, selector: "mglon-month-slot", inputs: ["slot"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthWeekEventsContainer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-week-events-container', imports: [MonthSlot], host: {
+                        '[style.position]': '"relative"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
+                    }, template: "<div class=\"mglon-month-week-events-container\">\n  @for (slot of slots(); track slot.id) {\n  <mglon-month-slot [slot]=\"slot\"></mglon-month-slot>\n  }\n</div>", styles: [".mglon-month-week-events-container{position:relative;display:block;width:100%;height:100%}\n"] }]
+        }], propDecorators: { slots: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots", required: true }] }] } });
+
+class EventRendererAdapter {
+}
+
+const DEFAULT_SLOT_CONFIG = {
+    slotHeight: SLOT_HEIGHT,
+    slotGap: SLOT_GAP
+};
+/**
+ * Calculates the minimum height required to display a given number of event rows.
+ *
+ * Formula: (n * slotHeight) + ((n - 1) * slotGap)
+ * - For n=3 with defaults (20px height, 2px gap):
+ *   (3 * 20) + (2 * 2) = 60 + 4 = 64px
+ *
+ * @param rows - Number of event rows to display
+ * @param config - Slot configuration (height and gap)
+ * @returns Minimum height in pixels
+ */
+function calculateMinSlotContainerHeight(rows, config = DEFAULT_SLOT_CONFIG) {
+    if (rows <= 0)
+        return 0;
+    const totalSlotHeight = rows * config.slotHeight;
+    const totalGapHeight = (rows - 1) * config.slotGap;
+    return totalSlotHeight + totalGapHeight;
+}
+
+/**
+ * Extracts the effective date range from any event type.
+ * Normalizes different event structures into a consistent DateRange.
+ */
+function getEventDateRange(event) {
+    if (isEvent(event) || isRecurrentEvent(event)) {
+        return {
+            start: startOfDay(event.start),
+            end: endOfDay(event.end)
+        };
+    }
+    if (isAllDayEvent(event)) {
+        const start = startOfDay(event.date);
+        const end = event.endDate ? endOfDay(event.endDate) : endOfDay(event.date);
+        return { start, end };
+    }
+    // Fallback (should never happen with proper types)
+    return { start: new Date(), end: new Date() };
+}
+
+/**
+ * Determines the slot type based on whether the event extends beyond the week boundaries.
+ *
+ * @returns
+ * - 'full': Event starts and ends within this week
+ * - 'first': Event starts this week but continues into next week(s)
+ * - 'last': Event started in previous week(s) and ends this week
+ * - 'middle': Event spans across this entire week (started before, ends after)
+ */
+function determineSlotType(eventRange, weekRange) {
+    const startsBeforeWeek = eventRange.start < weekRange.start;
+    const endsAfterWeek = eventRange.end > weekRange.end;
+    if (startsBeforeWeek && endsAfterWeek)
+        return 'middle';
+    if (startsBeforeWeek)
+        return 'last';
+    if (endsAfterWeek)
+        return 'first';
+    return 'full';
+}
+
+const DAYS_IN_WEEK$1 = 7;
+const PERCENTAGE_BASE = 100;
+/**
+ * Calculates the horizontal position as percentages (0-100).
+ * No container dimensions needed - pure percentage-based positioning.
+ */
+function calculateHorizontalPosition(clampedStart, clampedEnd, weekStart) {
+    // Calculate day indices (0-6) within the week
+    const startDayIndex = differenceInDays(startOfDay(clampedStart), startOfDay(weekStart));
+    const endDayIndex = differenceInDays(startOfDay(clampedEnd), startOfDay(weekStart));
+    // Number of days the event spans (inclusive)
+    const spanDays = endDayIndex - startDayIndex + 1;
+    return {
+        left: (startDayIndex / DAYS_IN_WEEK$1) * PERCENTAGE_BASE,
+        width: (spanDays / DAYS_IN_WEEK$1) * PERCENTAGE_BASE
+    };
+}
+/**
+ * Finds the first available row for an event without overlapping.
+ * Uses a greedy algorithm with proper day-range intersection checking.
+ *
+ * ## How overlap is determined:
+ *
+ * Two events overlap if their day ranges intersect. We use half-open intervals
+ * [startDay, exclusiveEndDay) for comparison:
+ *
+ * ```
+ * Event A: Dec 22-24  → { startDay: Dec 22, exclusiveEndDay: Dec 25 }
+ * Event B: Dec 25     → { startDay: Dec 25, exclusiveEndDay: Dec 26 }
+ *
+ * Intersection check: A.start < B.exclusiveEnd AND B.start < A.exclusiveEnd
+ *                     Dec 22 < Dec 26 (true) AND Dec 25 < Dec 25 (false)
+ *                     → NO overlap ✓
+ * ```
+ *
+ * @param clampedStart - Event start date (clamped to week)
+ * @param clampedEnd - Event end date (clamped to week)
+ * @param rowAssignments - Map of row index → array of placed event ranges
+ */
+function findAvailableRow(clampedStart, clampedEnd, rowAssignments) {
+    let rowIndex = 0;
+    // Create the day range for the new event
+    const newEventRange = {
+        startDay: startOfDay(clampedStart),
+        exclusiveEndDay: addDays(startOfDay(clampedEnd), 1)
+    };
+    while (true) {
+        const existingRanges = rowAssignments.get(rowIndex) || [];
+        // Check if new event overlaps with any existing event in this row
+        // Using half-open interval intersection: A ∩ B ≠ ∅ ⟺ A.start < B.end AND B.start < A.end
+        const hasOverlap = existingRanges.some(existing => newEventRange.startDay < existing.exclusiveEndDay &&
+            existing.startDay < newEventRange.exclusiveEndDay);
+        if (!hasOverlap) {
+            rowAssignments.set(rowIndex, [...existingRanges, newEventRange]);
+            return rowIndex;
+        }
+        rowIndex++;
+    }
+}
+/**
+ * Calculates the maximum number of visible rows based on container height.
+ *
+ * @param containerHeight - Height of the container in pixels
+ * @param slotHeight - Height of each slot row in pixels
+ * @param slotGap - Vertical gap between slots in pixels
+ * @returns Maximum number of full rows that fit in the container
+ *
+ * @example
+ * // Container of 66px with 20px slots and 2px gap = 3 rows
+ * // Row 0: 0-20px, Row 1: 22-42px, Row 2: 44-64px
+ * calculateMaxVisibleRows(66, 20, 2) // returns 3
+ */
+function calculateMaxVisibleRows(containerHeight, slotHeight, slotGap) {
+    if (containerHeight <= 0 || slotHeight <= 0) {
+        return 0;
+    }
+    // Each row takes: slotHeight + slotGap (except the last one doesn't need gap)
+    // Formula: containerHeight >= (n * slotHeight) + ((n - 1) * slotGap)
+    // Simplified: n = floor((containerHeight + slotGap) / (slotHeight + slotGap))
+    const rowWithGap = slotHeight + slotGap;
+    return Math.floor((containerHeight + slotGap) / rowWithGap);
+}
+
+/**
+ * Slices a collection of events into visual slots for a specific week.
+ * Returns percentage-based horizontal positions (no ResizeObserver needed).
+ *
+ * @param events - Array of events to process (should already be filtered for the week)
+ * @param weekRange - The date range of the week { start: Sunday 00:00, end: Saturday 23:59 }
+ * @param config - Optional configuration for slot sizing
+ * @returns Array of SlotModel with calculated positions (left/width as %, top/height as px)
+ *
+ * @example
+ * const slots = sliceEventsByWeek(events, {
+ *   start: startOfWeek(date),
+ *   end: endOfWeek(date)
+ * })
+ * // Use in template: [style.left.%]="slot.position.left"
+ */
+function sliceEventsByWeek(events, weekRange, config = DEFAULT_SLOT_CONFIG) {
+    const slots = [];
+    const rowAssignments = new Map();
+    for (const event of events) {
+        const eventRange = getEventDateRange(event);
+        // Clamp event dates to the week boundaries
+        const clampedStart = max([eventRange.start, weekRange.start]);
+        const clampedEnd = min([eventRange.end, weekRange.end]);
+        // Calculate horizontal position as percentages
+        const { left, width } = calculateHorizontalPosition(clampedStart, clampedEnd, weekRange.start);
+        // Find available row (avoids overlapping)
+        const rowIndex = findAvailableRow(clampedStart, clampedEnd, rowAssignments);
+        // Calculate vertical position in pixels
+        const top = rowIndex * (config.slotHeight + config.slotGap);
+        // Determine slot type based on week boundaries
+        const type = determineSlotType(eventRange, weekRange);
+        // Extract event properties for the slot
+        const isEditable = !event.isReadOnly && !event.isBlocked;
+        slots.push({
+            id: `${event.id}-${weekRange.start.getTime()}`,
+            idEvent: event.id,
+            start: clampedStart,
+            end: clampedEnd,
+            position: {
+                top,
+                left,
+                height: config.slotHeight,
+                width
+            },
+            zIndex: rowIndex + 1,
+            type,
+            color: event.color ?? '',
+            draggable: isEditable,
+            resizable: isEditable
+        });
+    }
+    return slots;
+}
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+const DAYS_IN_WEEK = 7;
+// ============================================================================
+// MAIN FUNCTION
+// ============================================================================
+/**
+ * Partitions slots into visible and hidden based on the maximum number of rows
+ * that can fit in the container.
+ *
+ * ## How it works:
+ *
+ * 1. Each slot has a `zIndex` which represents its row position (1-indexed).
+ *    - zIndex 1 = Row 0 (top row)
+ *    - zIndex 2 = Row 1
+ *    - etc.
+ *
+ * 2. If a slot's zIndex exceeds maxRows, the entire slot is hidden.
+ *    This ensures multi-day events don't partially render.
+ *
+ * 3. For hidden slots, we count how many events are hidden per day column.
+ *    This allows showing "+N more" indicators in each affected day.
+ *
+ * ## Visual Example:
+ *
+ * ```
+ * maxRows = 2
+ *
+ *           Mon   Tue   Wed   Thu   Fri
+ *          ┌─────┬─────┬─────┬─────┬─────┐
+ * Row 0    │  A  │  A  │  A  │     │     │  visible (zIndex=1)
+ *          ├─────┼─────┼─────┼─────┼─────┤
+ * Row 1    │     │  B  │  B  │  B  │     │  visible (zIndex=2)
+ *          ├─────┴─────┴─────┴─────┴─────┤ ← maxRows limit
+ * Row 2    │     │     │  C  │     │     │  HIDDEN (zIndex=3)
+ *          └─────┴─────┴─────┴─────┴─────┘
+ *
+ * overflowPerDay = [0, 0, 1, 0, 0, 0, 0]
+ *                           ↑ Wed shows "+1 more"
+ * ```
+ *
+ * @param slots - All slots generated by sliceEventsByWeek
+ * @param maxRows - Maximum number of rows that fit in the container
+ * @param weekStart - Start date of the week (used to calculate day indices)
+ * @returns Partitioned slots with overflow counts per day
+ */
+function partitionSlotsByVisibility(slots, maxRows, weekStart) {
+    const visibleSlots = [];
+    const hiddenSlots = [];
+    const overflowPerDay = new Array(DAYS_IN_WEEK).fill(0);
+    // Normalize week start to beginning of day for consistent comparisons
+    const normalizedWeekStart = startOfDay(weekStart);
+    for (const slot of slots) {
+        // zIndex is 1-indexed (row 0 has zIndex 1)
+        // A slot is visible if its row fits within maxRows
+        const isVisible = slot.zIndex <= maxRows;
+        if (isVisible) {
+            visibleSlots.push(slot);
+        }
+        else {
+            hiddenSlots.push(slot);
+            // Calculate which days this hidden slot spans
+            // and increment the overflow counter for each affected day
+            incrementOverflowForSlotDays(slot, normalizedWeekStart, overflowPerDay);
+        }
+    }
+    return { visibleSlots, hiddenSlots, overflowPerDay };
+}
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+/**
+ * Increments the overflow counter for each day that a slot occupies.
+ *
+ * This ensures that the "+N more" indicator correctly reflects
+ * all hidden events affecting each day column.
+ *
+ * @param slot - The hidden slot
+ * @param weekStart - Normalized start of the week
+ * @param overflowPerDay - Array to mutate with incremented counts
+ */
+function incrementOverflowForSlotDays(slot, weekStart, overflowPerDay) {
+    // Calculate day indices (0-6) within the week
+    const startDayIndex = differenceInDays(startOfDay(slot.start), weekStart);
+    const endDayIndex = differenceInDays(startOfDay(slot.end), weekStart);
+    // Clamp indices to valid range [0, 6]
+    // This handles edge cases where slot dates might extend beyond the week
+    const safeStartDay = Math.max(0, Math.min(startDayIndex, DAYS_IN_WEEK - 1));
+    const safeEndDay = Math.max(0, Math.min(endDayIndex, DAYS_IN_WEEK - 1));
+    // Increment counter for each day the slot spans
+    for (let day = safeStartDay; day <= safeEndDay; day++) {
+        overflowPerDay[day]++;
+    }
+}
+
+// Public API
+
+class MonthWeek extends EventRendererAdapter {
+    store = inject(CalendarStore);
+    week = input.required(...(ngDevMode ? [{ debugName: "week" }] : []));
+    /** Index of this week in the month (0-based) */
+    weekIndex = input(0, ...(ngDevMode ? [{ debugName: "weekIndex" }] : []));
+    /** Whether this week is expanded to show all events */
+    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    top = CELL_HEADER_HEIGHT;
+    /** Minimum height for the week row from store config */
+    minHeight = this.store.minWeekRowHeight;
+    /**
+     * Computes the week's date range from first to last day.
+     */
+    weekRange = computed(() => {
+        const weekDays = this.week().days;
+        if (weekDays.length === 0) {
+            return { start: new Date(), end: new Date() };
+        }
+        return {
+            start: startOfDay(weekDays[0].date),
+            end: endOfDay(weekDays[weekDays.length - 1].date)
+        };
+    }, ...(ngDevMode ? [{ debugName: "weekRange" }] : []));
+    /**
+     * Available height for event slots (total row height minus cell header).
+     */
+    availableHeight = computed(() => {
+        return Math.max(0, this.store.weekRowHeight() - CELL_HEADER_HEIGHT);
+    }, ...(ngDevMode ? [{ debugName: "availableHeight" }] : []));
+    /**
+     * Filters currentViewEvents to only include events
+     * that intersect with this week's date range.
+     */
+    events = computed(() => {
+        const weekDays = this.week().days;
+        if (weekDays.length === 0)
+            return [];
+        return this.filterEvents(this.store.currentViewEvents(), this.weekRange());
+    }, ...(ngDevMode ? [{ debugName: "events" }] : []));
+    /**
+     * Computed slots for this week's events.
+     */
+    slots = computed(() => {
+        return this.createSlots(this.events());
+    }, ...(ngDevMode ? [{ debugName: "slots" }] : []));
+    /**
+     * Maximum row number used by any slot.
+     * Derived from the slot's top position.
+     */
+    maxRow = computed(() => {
+        const allSlots = this.slots();
+        if (allSlots.length === 0)
+            return 0;
+        // Calculate row from top position: row = top / (SLOT_HEIGHT + SLOT_GAP)
+        const rowHeight = SLOT_HEIGHT + SLOT_GAP;
+        return Math.max(...allSlots.map(slot => Math.floor(slot.position.top / rowHeight)));
+    }, ...(ngDevMode ? [{ debugName: "maxRow" }] : []));
+    /**
+     * Height needed to show all events when expanded.
+     * Calculated based on the number of slot rows plus bottom padding.
+     */
+    expandedHeight = computed(() => {
+        const rows = this.maxRow() + 1; // rows are 0-indexed
+        // Formula: header + (rows * slot height) + (rows * gap)
+        return CELL_HEADER_HEIGHT + (rows * SLOT_HEIGHT) + (rows * SLOT_GAP);
+    }, ...(ngDevMode ? [{ debugName: "expandedHeight" }] : []));
+    /**
+     * Whether the week has more events than can fit in the minimum height.
+     * Used to conditionally show the expand toggle.
+     */
+    hasOverflow = computed(() => {
+        return this.expandedHeight() > this.minHeight();
+    }, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
+    /**
+     * Dynamic height for the week based on expansion state.
+     * Returns the expanded height or minimum height.
+     */
+    weekHeight = computed(() => {
+        if (this.expanded()) {
+            // When expanded, use the larger of expandedHeight or minHeight
+            return Math.max(this.expandedHeight(), this.minHeight());
+        }
+        return null; // Use min-height only (CSS handles it)
+    }, ...(ngDevMode ? [{ debugName: "weekHeight" }] : []));
+    filterEvents(events, dateRange) {
+        return events.filter(event => isEventInRange(event, dateRange));
+    }
+    createSlots(events) {
+        if (events.length === 0)
+            return [];
+        return sliceEventsByWeek(events, this.weekRange());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthWeek, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonthWeek, isStandalone: true, selector: "mglon-month-week", inputs: { week: { classPropertyName: "week", publicName: "week", isSignal: true, isRequired: true, transformFunction: null }, weekIndex: { classPropertyName: "weekIndex", publicName: "weekIndex", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.height.px": "weekHeight()", "class.mglon-month-week--expanded": "expanded()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mglon-month-week\" [class.mglon-month-week--expanded]=\"expanded()\">\n\n  <div class=\"mglon-month-week__days\" [style.min-height.px]=\"minHeight()\">\n    @for (day of week().days; track day.date.getTime()) {\n    <mglon-month-cell [day]=\"day\" [attr.data-date]=\"day.date.toISOString()\"></mglon-month-cell>\n    }\n  </div>\n\n  <div #weekEventsContainer class=\"mglon-month-week__events\" [style.top.px]=\"top\">\n    <mglon-month-week-events-container [slots]=\"slots()\"></mglon-month-week-events-container>\n  </div>\n</div>", styles: [".mglon-month-week{position:relative;height:100%}.mglon-month-week__days{display:var(--mglon-schedule-month-week-display);grid-template-columns:var(--mglon-schedule-month-week-columns);min-height:var(--mglon-schedule-month-week-min-height);height:100%;border-bottom:var(--mglon-schedule-month-week-border-bottom-width) solid var(--mglon-schedule-border)}.mglon-month-week__days:last-child{border-bottom:none}.mglon-month-week__events{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host{display:block}:host(.mglon-month-week--expanded) .mglon-month-week__events{overflow:visible}\n"], dependencies: [{ kind: "component", type: MonthCell, selector: "mglon-month-cell", inputs: ["day"] }, { kind: "component", type: MonthWeekEventsContainer, selector: "mglon-month-week-events-container", inputs: ["slots"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthWeek, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-week', imports: [MonthCell, MonthWeekEventsContainer], host: {
+                        '[style.height.px]': 'weekHeight()',
+                        '[class.mglon-month-week--expanded]': 'expanded()'
+                    }, template: "<div class=\"mglon-month-week\" [class.mglon-month-week--expanded]=\"expanded()\">\n\n  <div class=\"mglon-month-week__days\" [style.min-height.px]=\"minHeight()\">\n    @for (day of week().days; track day.date.getTime()) {\n    <mglon-month-cell [day]=\"day\" [attr.data-date]=\"day.date.toISOString()\"></mglon-month-cell>\n    }\n  </div>\n\n  <div #weekEventsContainer class=\"mglon-month-week__events\" [style.top.px]=\"top\">\n    <mglon-month-week-events-container [slots]=\"slots()\"></mglon-month-week-events-container>\n  </div>\n</div>", styles: [".mglon-month-week{position:relative;height:100%}.mglon-month-week__days{display:var(--mglon-schedule-month-week-display);grid-template-columns:var(--mglon-schedule-month-week-columns);min-height:var(--mglon-schedule-month-week-min-height);height:100%;border-bottom:var(--mglon-schedule-month-week-border-bottom-width) solid var(--mglon-schedule-border)}.mglon-month-week__days:last-child{border-bottom:none}.mglon-month-week__events{position:absolute;inset:0;overflow:hidden;pointer-events:none}:host{display:block}:host(.mglon-month-week--expanded) .mglon-month-week__events{overflow:visible}\n"] }]
+        }], propDecorators: { week: [{ type: i0.Input, args: [{ isSignal: true, alias: "week", required: true }] }], weekIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekIndex", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }] } });
+
+class ResizeObserverDirective {
+    elementRef;
+    mglonResizeObserver = new EventEmitter();
+    observer = null;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        this.observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                this.mglonResizeObserver.emit({
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                    entry
+                });
+            }
+        });
+        this.observer.observe(this.elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResizeObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ResizeObserverDirective, isStandalone: true, selector: "[mglonResizeObserver]", outputs: { mglonResizeObserver: "mglonResizeObserver" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResizeObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mglonResizeObserver]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { mglonResizeObserver: [{
+                type: Output
+            }] } });
+
+/**
+ * Month calendar grid component that displays a full month view with weeks and days.
+ *
+ * Implements the Selectable interface to enable date selection via mouse interaction.
+ * Uses the SelectableDirective to handle all selection logic.
+ *
+ * Features:
+ * - Displays 4-6 weeks dynamically
+ * - Shows padding days from previous/next months
+ * - Supports mouse-based date range selection
+ * - Expandable week rows via toggle buttons
+ *
+ * @example
+ * ```html
+ * <mglon-month-grid
+ *   [currentDate]="selectedDate"
+ *   (selectionEnd)="onDateRangeSelected($event)">
+ * </mglon-month-grid>
+ * ```
+ */
+class MonthGrid {
+    elementRef = inject(ElementRef);
+    store = inject(CalendarStore);
+    /**
+     * Reference to the SelectableDirective instance.
+     * Used to access selection state (selection rectangle and isSelecting flag).
+     */
+    selectableDirective = viewChild(SelectableDirective, ...(ngDevMode ? [{ debugName: "selectableDirective" }] : []));
+    /**
+     * The date to display the calendar for.
+     * Can be any date within the target month.
+     * @default new Date() (current month)
+     */
+    currentDate = input(new Date(), ...(ngDevMode ? [{ debugName: "currentDate" }] : []));
+    /**
+     * Computed calendar grid for the current month.
+     * Automatically updates when currentDate changes.
+     * Returns an array of weeks, each containing 7 days.
+     */
+    weeks = computed(() => {
+        console.log('weeks cambiaron');
+        return getMonthCalendarGrid(this.currentDate());
+    }, ...(ngDevMode ? [{ debugName: "weeks" }] : []));
+    /**
+     * Dynamic grid-template-rows based on actual number of weeks.
+     * Uses minmax(0, auto) to allow expanded weeks to grow beyond equal distribution.
+     */
+    gridTemplateRows = computed(() => `repeat(${this.weeks().length}, minmax(0, auto))`, ...(ngDevMode ? [{ debugName: "gridTemplateRows" }] : []));
+    /**
+     * Calculates which weeks have content that exceeds minimum height.
+     * Returns a Map of weekIndex -> hasOverflow boolean.
+     */
+    weekOverflowMap = computed(() => {
+        const weeks = this.weeks();
+        const events = this.store.currentViewEvents();
+        const minHeight = this.store.minWeekRowHeight();
+        const result = new Map();
+        weeks.forEach((week, index) => {
+            const weekDays = week.days;
+            if (weekDays.length === 0) {
+                result.set(index, false);
+                return;
+            }
+            const weekRange = {
+                start: startOfDay(weekDays[0].date),
+                end: endOfDay(weekDays[weekDays.length - 1].date)
+            };
+            const weekEvents = events.filter(e => isEventInRange(e, weekRange));
+            if (weekEvents.length === 0) {
+                result.set(index, false);
+                return;
+            }
+            const slots = sliceEventsByWeek(weekEvents, weekRange);
+            const rowHeight = SLOT_HEIGHT + SLOT_GAP;
+            const maxRow = Math.max(...slots.map(slot => Math.floor(slot.position.top / rowHeight)));
+            const rows = maxRow + 1;
+            const expandedHeight = CELL_HEADER_HEIGHT + (rows * SLOT_HEIGHT) + ((rows - 1) * SLOT_GAP) + SLOT_GAP;
+            result.set(index, expandedHeight > minHeight);
+        });
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "weekOverflowMap" }] : []));
+    /**
+     * Checks if a week has overflowing content.
+     * @param weekIndex - Index of the week to check
+     * @returns true if the week has more events than can fit
+     */
+    hasOverflow(weekIndex) {
+        return this.weekOverflowMap().get(weekIndex) ?? false;
+    }
+    /**
+     * Implements Selectable.getDateFromPoint()
+     *
+     * Translates visual coordinates (relative to the grid container) into a calendar date.
+     * This enables the SelectableDirective to determine which date the user is selecting.
+     *
+     * Algorithm:
+     * 1. Convert relative coordinates to absolute viewport coordinates
+     * 2. Use document.elementFromPoint to find the cell element under the cursor
+     * 3. Extract the date from the cell's data-date attribute
+     * 4. Find and return the corresponding CalendarDay object
+     *
+     * @param x - X coordinate relative to the grid container
+     * @param y - Y coordinate relative to the grid container
+     * @returns Object with date property, or null if no date found at coordinates
+     */
+    getDateFromPoint(x, y) {
+        // Convert relative coordinates to absolute viewport coordinates
+        const absoluteCoords = this.getAbsoluteCoordinates(x, y);
+        if (!absoluteCoords)
+            return null;
+        // Find the calendar cell element at the cursor position
+        const cellElement = this.findCellElementAtPoint(absoluteCoords.x, absoluteCoords.y);
+        if (!cellElement)
+            return null;
+        // Extract and parse the date from the cell
+        const date = this.extractDateFromCell(cellElement);
+        if (!date)
+            return null;
+        return { date };
+    }
+    /**
+     * Converts coordinates relative to the grid to absolute viewport coordinates
+     *
+     * @param relativeX - X coordinate relative to grid container
+     * @param relativeY - Y coordinate relative to grid container
+     * @returns Absolute coordinates or null if grid element not found
+     */
+    getAbsoluteCoordinates(relativeX, relativeY) {
+        const gridElement = this.elementRef.nativeElement;
+        if (!gridElement)
+            return null;
+        const gridRect = gridElement.getBoundingClientRect();
+        return {
+            x: gridRect.left + relativeX,
+            y: gridRect.top + relativeY
+        };
+    }
+    /**
+     * Finds the month cell element at the given viewport coordinates
+     *
+     * @param absoluteX - Absolute X coordinate in viewport
+     * @param absoluteY - Absolute Y coordinate in viewport
+     * @returns The mglon-month-cell element or null if not found
+     */
+    findCellElementAtPoint(absoluteX, absoluteY) {
+        const element = document.elementFromPoint(absoluteX, absoluteY);
+        if (!element)
+            return null;
+        // Walk up the DOM tree to find the month-cell element
+        return element.closest('mglon-month-cell');
+    }
+    /**
+     * Extracts the date from a month cell element's data attribute
+     *
+     * @param cellElement - The mglon-month-cell element
+     * @returns The date object or null if date attribute is missing/invalid
+     */
+    extractDateFromCell(cellElement) {
+        const dateStr = cellElement.getAttribute('data-date');
+        if (!dateStr)
+            return null;
+        return new Date(dateStr);
+    }
+    /**
+     * Handles resize events from the first week container.
+     * Stores the height in CalendarStore to be shared with all weeks.
+     */
+    onWeekResize(event) {
+        console.log('week resize', event);
+        this.store.setWeekRowHeight(event.height);
+    }
+    /**
+     * Toggles the expansion state of a week.
+     * @param weekIndex - Index of the week to toggle (0-based)
+     */
+    onToggleWeek(weekIndex) {
+        this.store.toggleWeekExpansion(weekIndex);
+    }
+    /**
+     * Checks if a week is currently expanded.
+     * @param weekIndex - Index of the week to check
+     * @returns true if the week is expanded
+     */
+    isWeekExpanded(weekIndex) {
+        return this.store.expandedWeekIndex() === weekIndex;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonthGrid, isStandalone: true, selector: "mglon-month-grid", inputs: { currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "selectableDirective", first: true, predicate: SelectableDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mglon-month-grid\" [mglonSelectable]=\"this\" [style.grid-template-rows]=\"gridTemplateRows()\">\n  @for (week of weeks(); track $index) {\n  <!-- Toggle button cell (only show button if week has overflow) -->\n  <div class=\"mglon-month-grid__toggle\">\n    @if (hasOverflow($index)) {\n    <button mglon-icon-button size=\"xs\" [rounded]=\"'full'\" class=\"mglon-month-grid__toggle-btn\"\n      [class.mglon-month-grid__toggle-btn--expanded]=\"isWeekExpanded($index)\" (click)=\"onToggleWeek($index)\">\n      <mglon-icon name=\"chevron-right\"></mglon-icon>\n    </button>\n    }\n  </div>\n\n  <!-- Week content -->\n  @if ($first) {\n  <mglon-month-week [week]=\"week\" [weekIndex]=\"$index\" [expanded]=\"isWeekExpanded($index)\"\n    (mglonResizeObserver)=\"onWeekResize($event)\">\n  </mglon-month-week>\n  } @else {\n  <mglon-month-week [week]=\"week\" [weekIndex]=\"$index\" [expanded]=\"isWeekExpanded($index)\">\n  </mglon-month-week>\n  }\n  }\n\n  <!-- Selection overlay -->\n  @if (selectableDirective()) {\n  <mglon-selection [selection]=\"selectableDirective()!.selection()\"\n    [isSelecting]=\"selectableDirective()!.isSelecting()\">\n  </mglon-selection>\n  }\n</div>", styles: [":host{display:block;height:100%;width:100%}.mglon-month-grid{display:grid;grid-template-columns:32px 1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none;cursor:auto}.mglon-month-grid__toggle{position:sticky;left:0;z-index:var(--mglon-schedule-z-sticky, 10);background-color:var(--mglon-schedule-surface, #fff);display:flex;flex-direction:column}.mglon-month-grid__toggle-btn{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--mglon-schedule-padding-xs, 4px);color:var(--mglon-schedule-text-secondary);transition:color var(--mglon-schedule-transition-duration, .2s) var(--mglon-schedule-transition-easing, ease)}.mglon-month-grid__toggle-btn mglon-icon{transition:transform var(--mglon-schedule-transition-duration, .2s) var(--mglon-schedule-transition-easing, ease)}.mglon-month-grid__toggle-btn:hover{color:var(--mglon-schedule-text-primary)}.mglon-month-grid__toggle-btn--expanded mglon-icon{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: Selection, selector: "mglon-selection", inputs: ["selection", "isSelecting"] }, { kind: "directive", type: SelectableDirective, selector: "[mglonSelectable]", inputs: ["mglonSelectable"], outputs: ["selectionStart", "selectionChange", "selectionEnd"] }, { kind: "component", type: MonthWeek, selector: "mglon-month-week", inputs: ["week", "weekIndex", "expanded"] }, { kind: "directive", type: ResizeObserverDirective, selector: "[mglonResizeObserver]", outputs: ["mglonResizeObserver"] }, { kind: "component", type: IconButtonComponent, selector: "button[mglon-icon-button], a[mglon-icon-button]", inputs: ["appereance", "color", "size", "rounded", "active", "disabled"] }, { kind: "component", type: IconComponent, selector: "mglon-icon", inputs: ["name"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-grid', imports: [Selection, SelectableDirective, MonthWeek, ResizeObserverDirective, IconButtonComponent, IconComponent], template: "<div class=\"mglon-month-grid\" [mglonSelectable]=\"this\" [style.grid-template-rows]=\"gridTemplateRows()\">\n  @for (week of weeks(); track $index) {\n  <!-- Toggle button cell (only show button if week has overflow) -->\n  <div class=\"mglon-month-grid__toggle\">\n    @if (hasOverflow($index)) {\n    <button mglon-icon-button size=\"xs\" [rounded]=\"'full'\" class=\"mglon-month-grid__toggle-btn\"\n      [class.mglon-month-grid__toggle-btn--expanded]=\"isWeekExpanded($index)\" (click)=\"onToggleWeek($index)\">\n      <mglon-icon name=\"chevron-right\"></mglon-icon>\n    </button>\n    }\n  </div>\n\n  <!-- Week content -->\n  @if ($first) {\n  <mglon-month-week [week]=\"week\" [weekIndex]=\"$index\" [expanded]=\"isWeekExpanded($index)\"\n    (mglonResizeObserver)=\"onWeekResize($event)\">\n  </mglon-month-week>\n  } @else {\n  <mglon-month-week [week]=\"week\" [weekIndex]=\"$index\" [expanded]=\"isWeekExpanded($index)\">\n  </mglon-month-week>\n  }\n  }\n\n  <!-- Selection overlay -->\n  @if (selectableDirective()) {\n  <mglon-selection [selection]=\"selectableDirective()!.selection()\"\n    [isSelecting]=\"selectableDirective()!.isSelecting()\">\n  </mglon-selection>\n  }\n</div>", styles: [":host{display:block;height:100%;width:100%}.mglon-month-grid{display:grid;grid-template-columns:32px 1fr;width:100%;height:100%;-webkit-user-select:none;user-select:none;cursor:auto}.mglon-month-grid__toggle{position:sticky;left:0;z-index:var(--mglon-schedule-z-sticky, 10);background-color:var(--mglon-schedule-surface, #fff);display:flex;flex-direction:column}.mglon-month-grid__toggle-btn{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;padding-top:var(--mglon-schedule-padding-xs, 4px);color:var(--mglon-schedule-text-secondary);transition:color var(--mglon-schedule-transition-duration, .2s) var(--mglon-schedule-transition-easing, ease)}.mglon-month-grid__toggle-btn mglon-icon{transition:transform var(--mglon-schedule-transition-duration, .2s) var(--mglon-schedule-transition-easing, ease)}.mglon-month-grid__toggle-btn:hover{color:var(--mglon-schedule-text-primary)}.mglon-month-grid__toggle-btn--expanded mglon-icon{transform:rotate(90deg)}\n"] }]
+        }], propDecorators: { selectableDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SelectableDirective), { isSignal: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
+
+class MonthView {
+    calendarStore = inject(CalendarStore);
+    // Get month grid element reference
+    gridElement = viewChild('gridRef', ...(ngDevMode ? [{ debugName: "gridElement" }] : []));
+    constructor() {
+        // Set up grid synchronization after view init
+        afterNextRender(() => {
+            // Logic for grid sizing can remain if needed for the grid itself
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthView, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.6", type: MonthView, isStandalone: true, selector: "mglon-month-view", viewQueries: [{ propertyName: "gridElement", first: true, predicate: ["gridRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"mglon-month-view\">\n  <!-- Single scrollable container for header and grid -->\n  <div class=\"mglon-month-view__content\">\n    <!-- Header wrapper -->\n    <div class=\"mglon-month-view__header-wrapper\">\n      <mglon-month-header></mglon-month-header>\n    </div>\n\n    <!-- Grid container with reference -->\n    <div class=\"mglon-month-view__grid-container\" #gridRef>\n      <mglon-month-grid [currentDate]=\"calendarStore.currentDate()\"></mglon-month-grid>\n    </div>\n\n  </div>\n</div>", styles: [":host{display:block;height:100%}.mglon-month-view{height:100%}.mglon-month-view__content{display:grid;grid-template-rows:auto 1fr;height:100%;overflow-x:auto;overflow-y:auto;scrollbar-gutter:stable;min-width:0}.mglon-month-view__header-wrapper{position:sticky;top:0;z-index:var(--mglon-schedule-z-sticky, 10);background-color:var(--mglon-schedule-surface, #fff)}.mglon-month-view__header-wrapper>mglon-month-header{min-width:700px}.mglon-month-view__grid-container{position:relative;min-width:0}.mglon-month-view__grid-container>mglon-month-grid{min-width:700px}.mglon-month-view__events-layer{position:absolute;inset:0;pointer-events:none}.mglon-month-view__events-layer>*{pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonthHeader, selector: "mglon-month-header" }, { kind: "component", type: MonthGrid, selector: "mglon-month-grid", inputs: ["currentDate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthView, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-month-view', standalone: true, imports: [CommonModule, MonthHeader, MonthGrid], template: "<div class=\"mglon-month-view\">\n  <!-- Single scrollable container for header and grid -->\n  <div class=\"mglon-month-view__content\">\n    <!-- Header wrapper -->\n    <div class=\"mglon-month-view__header-wrapper\">\n      <mglon-month-header></mglon-month-header>\n    </div>\n\n    <!-- Grid container with reference -->\n    <div class=\"mglon-month-view__grid-container\" #gridRef>\n      <mglon-month-grid [currentDate]=\"calendarStore.currentDate()\"></mglon-month-grid>\n    </div>\n\n  </div>\n</div>", styles: [":host{display:block;height:100%}.mglon-month-view{height:100%}.mglon-month-view__content{display:grid;grid-template-rows:auto 1fr;height:100%;overflow-x:auto;overflow-y:auto;scrollbar-gutter:stable;min-width:0}.mglon-month-view__header-wrapper{position:sticky;top:0;z-index:var(--mglon-schedule-z-sticky, 10);background-color:var(--mglon-schedule-surface, #fff)}.mglon-month-view__header-wrapper>mglon-month-header{min-width:700px}.mglon-month-view__grid-container{position:relative;min-width:0}.mglon-month-view__grid-container>mglon-month-grid{min-width:700px}.mglon-month-view__events-layer{position:absolute;inset:0;pointer-events:none}.mglon-month-view__events-layer>*{pointer-events:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { gridElement: [{ type: i0.ViewChild, args: ['gridRef', { isSignal: true }] }] } });
+
+class Avatar {
+    /** Image source URL (optional) */
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+    /** Display name to derive initials from (optional) */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** Background color for initials placeholder (optional) */
+    color = input('', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Alt text for accessibility */
+    alt = input('Avatar', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    /** Size variant: xs (24px), sm (32px), md (40px), lg (48px), xl (64px) */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Show border around avatar */
+    showBorder = input(false, ...(ngDevMode ? [{ debugName: "showBorder" }] : []));
+    /** Border color (CSS color value) */
+    borderColor = input('var(--ngx-cal-primary)', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
+    /** Inactive state - applies grayscale and hides border */
+    inactive = input(false, ...(ngDevMode ? [{ debugName: "inactive" }] : []));
+    /** Track if image failed to load */
+    imageError = false;
+    /** Computed initials from the name */
+    initials = computed(() => {
+        const nameStr = this.name();
+        if (!nameStr)
+            return '';
+        const parts = nameStr.trim().split(/\s+/);
+        if (parts.length === 0)
+            return '';
+        if (parts.length === 1) {
+            const p = parts[0];
+            return p.length > 1 ? p.substring(0, 2).toUpperCase() : p.toUpperCase();
+        }
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    /** Computed style for host (border and gap) */
+    hostStyle = computed(() => {
+        const styles = {};
+        if (!this.inactive() && this.showBorder()) {
+            styles.border = `2px solid ${this.borderColor()}`;
+            styles.padding = '2px'; // Gap between border and circle
+            styles.borderRadius = '50%'; // Ensure border is circular
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+    /** Computed style for inner element (background and text color) */
+    innerStyle = computed(() => {
+        const styles = {};
+        // Background color logic
+        const bgColor = this.color();
+        if (bgColor) {
+            // Use slightly darker variant for background as requested
+            const darkBg = getHoverColor(bgColor);
+            styles.backgroundColor = darkBg;
+            styles.color = getTextColor(darkBg);
+        }
+        return styles;
+    }, ...(ngDevMode ? [{ debugName: "innerStyle" }] : []));
+    onImageError() {
+        this.imageError = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Avatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Avatar, isStandalone: true, selector: "mglon-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, inactive: { classPropertyName: "inactive", publicName: "inactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-inactive": "inactive()", "style": "hostStyle()" } }, ngImport: i0, template: "@if (src() && !imageError) {\n<img [src]=\"src()\" [alt]=\"alt()\" [ngStyle]=\"innerStyle()\" (error)=\"onImageError()\" class=\"avatar-image\" />\n} @else if (initials()) {\n<div class=\"avatar-initials\" [ngStyle]=\"innerStyle()\">\n  {{ initials() }}\n</div>\n} @else {\n<div class=\"avatar-placeholder\" [ngStyle]=\"innerStyle()\">\n  <span class=\"avatar-icon\">\uD83D\uDC64</span>\n</div>\n}", styles: [":host{display:inline-block;border-radius:50%;box-sizing:border-box}:host[data-size=xs]{width:24px;height:24px}:host[data-size=xs] .avatar-icon,:host[data-size=xs] .avatar-initials{font-size:10px}:host[data-size=sm]{width:32px;height:32px}:host[data-size=sm] .avatar-icon,:host[data-size=sm] .avatar-initials{font-size:12px}:host[data-size=md]{width:40px;height:40px}:host[data-size=md] .avatar-icon,:host[data-size=md] .avatar-initials{font-size:14px}:host[data-size=lg]{width:48px;height:48px}:host[data-size=lg] .avatar-icon,:host[data-size=lg] .avatar-initials{font-size:16px}:host[data-size=xl]{width:64px;height:64px}:host[data-size=xl] .avatar-icon,:host[data-size=xl] .avatar-initials{font-size:20px}:host[data-inactive=true] .avatar-image,:host[data-inactive=true] .avatar-placeholder,:host[data-inactive=true] .avatar-initials{filter:grayscale(100%);opacity:.6}.avatar-image,.avatar-placeholder,.avatar-initials{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.avatar-placeholder,.avatar-initials{background-color:var(--mglon-schedule-surface, #f0f0f0);display:flex;align-items:center;justify-content:center;color:var(--mglon-schedule-text-secondary, #666);-webkit-user-select:none;user-select:none;font-weight:600;text-transform:uppercase}.avatar-icon{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Avatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-avatar', standalone: true, imports: [CommonModule], host: {
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-inactive]': 'inactive()',
+                        '[style]': 'hostStyle()'
+                    }, template: "@if (src() && !imageError) {\n<img [src]=\"src()\" [alt]=\"alt()\" [ngStyle]=\"innerStyle()\" (error)=\"onImageError()\" class=\"avatar-image\" />\n} @else if (initials()) {\n<div class=\"avatar-initials\" [ngStyle]=\"innerStyle()\">\n  {{ initials() }}\n</div>\n} @else {\n<div class=\"avatar-placeholder\" [ngStyle]=\"innerStyle()\">\n  <span class=\"avatar-icon\">\uD83D\uDC64</span>\n</div>\n}", styles: [":host{display:inline-block;border-radius:50%;box-sizing:border-box}:host[data-size=xs]{width:24px;height:24px}:host[data-size=xs] .avatar-icon,:host[data-size=xs] .avatar-initials{font-size:10px}:host[data-size=sm]{width:32px;height:32px}:host[data-size=sm] .avatar-icon,:host[data-size=sm] .avatar-initials{font-size:12px}:host[data-size=md]{width:40px;height:40px}:host[data-size=md] .avatar-icon,:host[data-size=md] .avatar-initials{font-size:14px}:host[data-size=lg]{width:48px;height:48px}:host[data-size=lg] .avatar-icon,:host[data-size=lg] .avatar-initials{font-size:16px}:host[data-size=xl]{width:64px;height:64px}:host[data-size=xl] .avatar-icon,:host[data-size=xl] .avatar-initials{font-size:20px}:host[data-inactive=true] .avatar-image,:host[data-inactive=true] .avatar-placeholder,:host[data-inactive=true] .avatar-initials{filter:grayscale(100%);opacity:.6}.avatar-image,.avatar-placeholder,.avatar-initials{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.avatar-placeholder,.avatar-initials{background-color:var(--mglon-schedule-surface, #f0f0f0);display:flex;align-items:center;justify-content:center;color:var(--mglon-schedule-text-secondary, #666);-webkit-user-select:none;user-select:none;font-weight:600;text-transform:uppercase}.avatar-icon{line-height:1}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], inactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "inactive", required: false }] }] } });
+
+class ResourceItemSchedule {
+    /** Resource to display */
+    resource = input.required(...(ngDevMode ? [{ debugName: "resource" }] : []));
+    /** Border radius for resource item */
+    rounded = input('sm', ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+    /** Density/spacing for resource item */
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : []));
+    /** Emitted when the resource is clicked (for toggle) */
+    toggle = output();
+    onToggle() {
+        this.toggle.emit(this.resource().id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceItemSchedule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ResourceItemSchedule, isStandalone: true, selector: "mglon-resource-item-schedule", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, host: { properties: { "attr.rounded": "rounded()", "attr.density": "density()" } }, ngImport: i0, template: "<div class=\"resource-item\" (click)=\"onToggle()\">\n  <mglon-avatar [src]=\"resource().avatar || ''\" [name]=\"resource().name\" [color]=\"resource().color || ''\"\n    [alt]=\"resource().name\" size=\"xs\" [showBorder]=\"true\" [borderColor]=\"resource().color || 'var(--ngx-cal-primary)'\"\n    [inactive]=\"resource().isActive === false\" />\n  <span class=\"resource-name\" [class.inactive]=\"resource().isActive === false\">{{ resource().name }}</span>\n</div>", styles: [".resource-item{display:flex;align-items:center;gap:var(--mglon-resource-item-gap, var(--mglon-schedule-gap-sm));padding:var(--mglon-resource-item-padding-y, var(--mglon-schedule-padding-sm)) var(--mglon-resource-item-padding-x, var(--mglon-schedule-padding-md));cursor:pointer;transition:background-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing);border-radius:var(--mglon-resource-item-radius, var(--mglon-schedule-radius-sm))}.resource-item:hover{background-color:var(--mglon-resource-item-hover-bg, var(--mglon-schedule-hover-bg))}.resource-item:active{background-color:var(--mglon-resource-item-active-bg, rgba(0, 0, 0, .08))}.resource-name{font-size:var(--mglon-resource-item-font-size, var(--mglon-schedule-font-size-sm));color:var(--mglon-resource-item-text-color, var(--mglon-schedule-text-primary));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.resource-name.inactive{color:var(--mglon-resource-item-inactive-color, var(--mglon-schedule-text-secondary));opacity:var(--mglon-resource-item-inactive-opacity, .6)}:host([rounded=none]) .resource-item{border-radius:0}:host([rounded=sm]) .resource-item{border-radius:var(--mglon-schedule-radius-sm)}:host([rounded=md]) .resource-item{border-radius:var(--mglon-schedule-radius-md)}:host([rounded=lg]) .resource-item{border-radius:var(--mglon-schedule-radius-lg)}:host([rounded=full]) .resource-item{border-radius:var(--mglon-schedule-radius-full)}:host([density=compact]) .resource-item{padding:var(--mglon-resource-item-padding-compact-y, var(--mglon-schedule-padding-xs)) var(--mglon-resource-item-padding-compact-x, var(--mglon-schedule-padding-sm));gap:var(--mglon-resource-item-gap-compact, var(--mglon-schedule-gap-xs))}:host([density=comfortable]) .resource-item{padding:var(--mglon-resource-item-padding-comfortable-y, var(--mglon-schedule-padding-sm)) var(--mglon-resource-item-padding-comfortable-x, var(--mglon-schedule-padding-md));gap:var(--mglon-resource-item-gap-comfortable, var(--mglon-schedule-gap-sm))}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "mglon-avatar", inputs: ["src", "name", "color", "alt", "size", "showBorder", "borderColor", "inactive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceItemSchedule, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-resource-item-schedule', standalone: true, imports: [Avatar], host: {
+                        '[attr.rounded]': 'rounded()',
+                        '[attr.density]': 'density()'
+                    }, template: "<div class=\"resource-item\" (click)=\"onToggle()\">\n  <mglon-avatar [src]=\"resource().avatar || ''\" [name]=\"resource().name\" [color]=\"resource().color || ''\"\n    [alt]=\"resource().name\" size=\"xs\" [showBorder]=\"true\" [borderColor]=\"resource().color || 'var(--ngx-cal-primary)'\"\n    [inactive]=\"resource().isActive === false\" />\n  <span class=\"resource-name\" [class.inactive]=\"resource().isActive === false\">{{ resource().name }}</span>\n</div>", styles: [".resource-item{display:flex;align-items:center;gap:var(--mglon-resource-item-gap, var(--mglon-schedule-gap-sm));padding:var(--mglon-resource-item-padding-y, var(--mglon-schedule-padding-sm)) var(--mglon-resource-item-padding-x, var(--mglon-schedule-padding-md));cursor:pointer;transition:background-color var(--mglon-schedule-transition-duration) var(--mglon-schedule-transition-easing);border-radius:var(--mglon-resource-item-radius, var(--mglon-schedule-radius-sm))}.resource-item:hover{background-color:var(--mglon-resource-item-hover-bg, var(--mglon-schedule-hover-bg))}.resource-item:active{background-color:var(--mglon-resource-item-active-bg, rgba(0, 0, 0, .08))}.resource-name{font-size:var(--mglon-resource-item-font-size, var(--mglon-schedule-font-size-sm));color:var(--mglon-resource-item-text-color, var(--mglon-schedule-text-primary));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}.resource-name.inactive{color:var(--mglon-resource-item-inactive-color, var(--mglon-schedule-text-secondary));opacity:var(--mglon-resource-item-inactive-opacity, .6)}:host([rounded=none]) .resource-item{border-radius:0}:host([rounded=sm]) .resource-item{border-radius:var(--mglon-schedule-radius-sm)}:host([rounded=md]) .resource-item{border-radius:var(--mglon-schedule-radius-md)}:host([rounded=lg]) .resource-item{border-radius:var(--mglon-schedule-radius-lg)}:host([rounded=full]) .resource-item{border-radius:var(--mglon-schedule-radius-full)}:host([density=compact]) .resource-item{padding:var(--mglon-resource-item-padding-compact-y, var(--mglon-schedule-padding-xs)) var(--mglon-resource-item-padding-compact-x, var(--mglon-schedule-padding-sm));gap:var(--mglon-resource-item-gap-compact, var(--mglon-schedule-gap-xs))}:host([density=comfortable]) .resource-item{padding:var(--mglon-resource-item-padding-comfortable-y, var(--mglon-schedule-padding-sm)) var(--mglon-resource-item-padding-comfortable-x, var(--mglon-schedule-padding-md));gap:var(--mglon-resource-item-gap-comfortable, var(--mglon-schedule-gap-sm))}\n"] }]
+        }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
+
+class ResourceListSchedule {
+    calendarStore = inject(CalendarStore);
+    // Sidebar UI Configuration from Store
+    resourceItemRounded = computed(() => this.calendarStore.uiConfig().sidebar.resourceItems.rounded, ...(ngDevMode ? [{ debugName: "resourceItemRounded" }] : []));
+    resourceItemDensity = computed(() => this.calendarStore.uiConfig().sidebar.resourceItems.density, ...(ngDevMode ? [{ debugName: "resourceItemDensity" }] : []));
+    /** Array of resources to display */
+    resources = input([], ...(ngDevMode ? [{ debugName: "resources" }] : []));
+    /** Emitted when a resource is toggled */
+    toggleResource = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceListSchedule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ResourceListSchedule, isStandalone: true, selector: "mglon-resource-list-schedule", inputs: { resources: { classPropertyName: "resources", publicName: "resources", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleResource: "toggleResource" }, ngImport: i0, template: "<div class=\"resource-list\">\n  @if (resources().length > 0) {\n  @for (resource of resources(); track resource.id) {\n  <mglon-resource-item-schedule [resource]=\"resource\" [rounded]=\"resourceItemRounded()\"\n    [density]=\"resourceItemDensity()\" (toggle)=\"toggleResource.emit($event)\" />\n  }\n  } @else {\n  <div class=\"resource-list-empty\">\n    <span class=\"empty-icon\">\uD83D\uDCCB</span>\n    <span class=\"empty-text\">No resources available</span>\n  </div>\n  }\n</div>", styles: [".resource-list{display:flex;flex-direction:column;gap:var(--mglon-resource-list-gap, var(--mglon-schedule-gap-xs));overflow-y:auto;max-height:100%}.resource-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mglon-resource-list-empty-padding, var(--mglon-schedule-padding-lg));gap:var(--mglon-resource-list-empty-gap, var(--mglon-schedule-gap-sm));color:var(--mglon-resource-list-empty-color, var(--mglon-schedule-text-secondary));text-align:center}.empty-icon{font-size:var(--mglon-resource-list-empty-icon-size, 2rem);opacity:var(--mglon-resource-list-empty-icon-opacity, .3)}.empty-text{font-size:var(--mglon-resource-list-empty-text-size, var(--mglon-schedule-font-size-sm))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ResourceItemSchedule, selector: "mglon-resource-item-schedule", inputs: ["resource", "rounded", "density"], outputs: ["toggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceListSchedule, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-resource-list-schedule', standalone: true, imports: [CommonModule, ResourceItemSchedule], template: "<div class=\"resource-list\">\n  @if (resources().length > 0) {\n  @for (resource of resources(); track resource.id) {\n  <mglon-resource-item-schedule [resource]=\"resource\" [rounded]=\"resourceItemRounded()\"\n    [density]=\"resourceItemDensity()\" (toggle)=\"toggleResource.emit($event)\" />\n  }\n  } @else {\n  <div class=\"resource-list-empty\">\n    <span class=\"empty-icon\">\uD83D\uDCCB</span>\n    <span class=\"empty-text\">No resources available</span>\n  </div>\n  }\n</div>", styles: [".resource-list{display:flex;flex-direction:column;gap:var(--mglon-resource-list-gap, var(--mglon-schedule-gap-xs));overflow-y:auto;max-height:100%}.resource-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mglon-resource-list-empty-padding, var(--mglon-schedule-padding-lg));gap:var(--mglon-resource-list-empty-gap, var(--mglon-schedule-gap-sm));color:var(--mglon-resource-list-empty-color, var(--mglon-schedule-text-secondary));text-align:center}.empty-icon{font-size:var(--mglon-resource-list-empty-icon-size, 2rem);opacity:var(--mglon-resource-list-empty-icon-opacity, .3)}.empty-text{font-size:var(--mglon-resource-list-empty-text-size, var(--mglon-schedule-font-size-sm))}\n"] }]
+        }], propDecorators: { resources: [{ type: i0.Input, args: [{ isSignal: true, alias: "resources", required: false }] }], toggleResource: [{ type: i0.Output, args: ["toggleResource"] }] } });
+
+class SidebarSchedule {
+    store = inject(CalendarStore);
+    backgroundColor = computed(() => this.store.uiConfig().sidebar.background, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
+    borderRadius = computed(() => this.store.uiConfig().sidebar.rounded || 'none', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    onToggleResource(id) {
+        this.store.toggleResource(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SidebarSchedule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SidebarSchedule, isStandalone: true, selector: "mglon-sidebar-schedule", host: { properties: { "style.--mglon-sidebar-radius": "borderRadius() === \"none\" ? \"0\" : \"var(--mglon-schedule-radius-\" + borderRadius() + \")\"", "style.--mglon-sidebar-bg": "backgroundColor()", "attr.data-radius": "borderRadius()" } }, ngImport: i0, template: "<aside class=\"sidebar-schedule\">\n  <header class=\"sidebar-header\">\n    <h3 class=\"sidebar-title\">Resources</h3>\n  </header>\n  <div class=\"sidebar-content\">\n    <mglon-resource-list-schedule [resources]=\"store.allResources()\" (toggleResource)=\"onToggleResource($event)\" />\n  </div>\n</aside>", styles: [".sidebar-schedule{display:flex;flex-direction:column;height:100%;width:250px;background-color:var(--mglon-sidebar-bg, var(--mglon-schedule-surface));border-right:1px solid var(--mglon-schedule-border);border-radius:var(--mglon-sidebar-radius, var(--mglon-schedule-radius-sm));overflow:hidden}.sidebar-header{padding:var(--mglon-schedule-spacing-md, 12px) var(--mglon-schedule-spacing-md, 12px);background-color:var(--mglon-schedule-background)}.sidebar-title{margin:0;font-size:1rem;font-weight:600;color:var(--mglon-schedule-text-primary)}.sidebar-content{flex:1;overflow-y:auto;padding:var(--mglon-schedule-spacing-sm, 8px)}\n"], dependencies: [{ kind: "component", type: ResourceListSchedule, selector: "mglon-resource-list-schedule", inputs: ["resources"], outputs: ["toggleResource"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SidebarSchedule, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-sidebar-schedule', standalone: true, imports: [ResourceListSchedule], host: {
+                        '[style.--mglon-sidebar-radius]': 'borderRadius() === "none" ? "0" : "var(--mglon-schedule-radius-" + borderRadius() + ")"',
+                        '[style.--mglon-sidebar-bg]': 'backgroundColor()',
+                        '[attr.data-radius]': 'borderRadius()'
+                    }, template: "<aside class=\"sidebar-schedule\">\n  <header class=\"sidebar-header\">\n    <h3 class=\"sidebar-title\">Resources</h3>\n  </header>\n  <div class=\"sidebar-content\">\n    <mglon-resource-list-schedule [resources]=\"store.allResources()\" (toggleResource)=\"onToggleResource($event)\" />\n  </div>\n</aside>", styles: [".sidebar-schedule{display:flex;flex-direction:column;height:100%;width:250px;background-color:var(--mglon-sidebar-bg, var(--mglon-schedule-surface));border-right:1px solid var(--mglon-schedule-border);border-radius:var(--mglon-sidebar-radius, var(--mglon-schedule-radius-sm));overflow:hidden}.sidebar-header{padding:var(--mglon-schedule-spacing-md, 12px) var(--mglon-schedule-spacing-md, 12px);background-color:var(--mglon-schedule-background)}.sidebar-title{margin:0;font-size:1rem;font-weight:600;color:var(--mglon-schedule-text-primary)}.sidebar-content{flex:1;overflow-y:auto;padding:var(--mglon-schedule-spacing-sm, 8px)}\n"] }]
+        }] });
+
+class Schedule {
+    config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    // ============================================
+    // UI CONFIGURATION INPUTS (Area-Based)
+    // ============================================
+    /** Optional UI configuration for header area (button-group, navigation, today button) */
+    headerUI = input(...(ngDevMode ? [undefined, { debugName: "headerUI" }] : []));
+    /** Optional UI configuration for sidebar area (resource items) */
+    sidebarUI = input(...(ngDevMode ? [undefined, { debugName: "sidebarUI" }] : []));
+    /** Optional UI configuration for grid area (event slots, overflow indicators) */
+    gridUI = input(...(ngDevMode ? [undefined, { debugName: "gridUI" }] : []));
+    /** Optional default color for all events in the schedule */
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /**
+     * Whether to automatically generate vivid/pastel variants for events.
+     * If true, regular events use vivid colors and recurrent events use pastel variants.
+     * If false, colors are used exactly as provided.
+     * @default true
+     */
+    useDynamicColors = input(true, ...(ngDevMode ? [{ debugName: "useDynamicColors" }] : []));
+    add = output();
+    // ============================================
+    // OUTPUT EVENTS
+    // ============================================
+    /** Emitted when selection starts (mousedown) */
+    selectionStart = output();
+    /** Emitted while selecting (mousemove) */
+    selectionChange = output();
+    /** Emitted when selection ends (mouseup) */
+    selectionEnd = output();
+    /** Emitted when view mode changes */
+    viewChange = output();
+    /** Emitted when displayed date range changes */
+    dateRangeChange = output();
+    /** Emitted when a resource is shown/activated */
+    resourceShow = output();
+    /** Emitted when a resource is hidden/deactivated */
+    resourceHide = output();
+    store = inject(CalendarStore);
+    constructor() {
+        // Register global handlers
+        // this.eventStore.setGlobalHandlers({
+        //   eventClick: this.eventClick
+        // });
+        effect(() => {
+            const conf = this.config();
+            if (conf) {
+                this.store.updateConfig(conf);
+            }
+        });
+        // Handle UI configuration updates (area-based)
+        effect(() => {
+            const headerConfig = this.headerUI();
+            const sidebarConfig = this.sidebarUI();
+            const gridConfig = this.gridUI();
+            const primaryColor = this.color();
+            const useDynamicColors = this.useDynamicColors();
+            // Only update if at least one config is provided
+            if (headerConfig || sidebarConfig || gridConfig || primaryColor || useDynamicColors !== undefined) {
+                // Construct a safe partial grid config
+                const finalGridConfig = gridConfig ? { ...gridConfig } : {};
+                if (primaryColor) {
+                    finalGridConfig.eventSlots = {
+                        ...finalGridConfig.eventSlots,
+                        color: finalGridConfig.eventSlots?.color || primaryColor
+                    };
+                }
+                if (useDynamicColors !== undefined) {
+                    finalGridConfig.useDynamicColors = useDynamicColors;
+                }
+                this.store.setUIConfig({
+                    header: headerConfig,
+                    sidebar: sidebarConfig,
+                    grid: finalGridConfig
+                });
+            }
+        });
+        // Emit viewChange when view mode changes
+        effect(() => {
+            const view = this.store.viewMode();
+            this.viewChange.emit(view);
+        });
+        // Emit resource show/hide events when resources change
+        effect(() => {
+            const resources = this.store.allResources();
+            resources.forEach(resource => {
+                // Check previous state vs current state
+                const wasActive = this.previousResourceStates.get(resource.id);
+                const isActive = resource.isActive !== false;
+                if (wasActive !== undefined && wasActive !== isActive) {
+                    if (isActive) {
+                        this.resourceShow.emit(resource.id);
+                    }
+                    else {
+                        this.resourceHide.emit(resource.id);
+                    }
+                }
+                // Update previous state
+                this.previousResourceStates.set(resource.id, isActive);
+            });
+        });
+    }
+    previousResourceStates = new Map();
+    get api() {
+        return {
+            next: () => this.store.next(),
+            prev: () => this.store.prev(),
+            today: () => this.store.today(),
+            changeView: (view) => this.store.changeView(view),
+            setDate: (date) => this.store.setDate(date)
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Schedule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: Schedule, isStandalone: true, selector: "mglon-schedule", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, headerUI: { classPropertyName: "headerUI", publicName: "headerUI", isSignal: true, isRequired: false, transformFunction: null }, sidebarUI: { classPropertyName: "sidebarUI", publicName: "sidebarUI", isSignal: true, isRequired: false, transformFunction: null }, gridUI: { classPropertyName: "gridUI", publicName: "gridUI", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, useDynamicColors: { classPropertyName: "useDynamicColors", publicName: "useDynamicColors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", selectionStart: "selectionStart", selectionChange: "selectionChange", selectionEnd: "selectionEnd", viewChange: "viewChange", dateRangeChange: "dateRangeChange", resourceShow: "resourceShow", resourceHide: "resourceHide" }, providers: [CalendarStore], ngImport: i0, template: "<div class=\"ng-sched-schedule\">\n  <ng-content />\n  <!-- Header -->\n  <mglon-header-schedule [title]=\"store.formattedDate()\" [activeView]=\"store.viewMode()\" [views]=\"store.config().views!\"\n    [editable]=\"store.config().editable!\" (next)=\"store.next()\" (prev)=\"store.prev()\" (today)=\"store.today()\"\n    (viewChange)=\"store.changeView($event)\" (add)=\"add.emit()\">\n  </mglon-header-schedule>\n\n  <!-- Body -->\n\n  <main class=\"ng-sched-body\">\n    @if (store.config().showSidebar) {\n    <div class=\"ng-sched-body__sidebar\">\n      <mglon-sidebar-schedule></mglon-sidebar-schedule>\n    </div>\n    }\n    <div class=\"ng-sched-body__content\">\n      @switch (store.viewMode()) {\n      @case ('resource') {\n      <mglon-resource-view></mglon-resource-view>\n      }\n      @case ('month') {\n      <mglon-month-view></mglon-month-view>\n      }\n      @case ('week') {\n      <mglon-week-view (selectionStart)=\"selectionStart.emit($event)\" (selectionChange)=\"selectionChange.emit($event)\"\n        (selectionEnd)=\"selectionEnd.emit($event)\">\n      </mglon-week-view>\n      }\n      @default {\n      <div class=\"ng-sched-placeholder\">\n        View '{{ store.viewMode() }}' not implemented yet.\n      </div>\n      }\n      }\n    </div>\n\n  </main>\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;width:100%;--mglon-schedule-primary-50: #e8f0fe;--mglon-schedule-primary-100: #d2e3fc;--mglon-schedule-primary-200: #a7cbfb;--mglon-schedule-primary-300: #7cacf8;--mglon-schedule-primary-400: #518ef5;--mglon-schedule-primary-500: #1a73e8;--mglon-schedule-primary-600: #1967d2;--mglon-schedule-primary-700: #185abc;--mglon-schedule-primary-800: #174ea6;--mglon-schedule-primary-900: #0d3a86;--mglon-schedule-primary-950: #08265a;--mglon-schedule-neutral-50: #fafafa;--mglon-schedule-neutral-100: #f5f5f5;--mglon-schedule-neutral-200: #e5e5e5;--mglon-schedule-neutral-300: #d4d4d4;--mglon-schedule-neutral-400: #a3a3a3;--mglon-schedule-neutral-500: #737373;--mglon-schedule-neutral-600: #525252;--mglon-schedule-neutral-700: #404040;--mglon-schedule-neutral-800: #262626;--mglon-schedule-neutral-900: #171717;--mglon-schedule-neutral-950: #0a0a0a;--mglon-schedule-primary: var(--mglon-schedule-primary-500);--mglon-schedule-on-primary: #ffffff;--mglon-schedule-surface: #ffffff;--mglon-schedule-on-surface: var(--mglon-schedule-neutral-900);--mglon-schedule-surface-variant: var(--mglon-schedule-neutral-100);--mglon-schedule-on-surface-variant: var(--mglon-schedule-neutral-700);--mglon-schedule-background: #ffffff;--mglon-schedule-on-background: var(--mglon-schedule-neutral-900);--mglon-schedule-border: var(--mglon-schedule-neutral-200);--mglon-schedule-text-primary: var(--mglon-schedule-neutral-900);--mglon-schedule-text-secondary: var(--mglon-schedule-neutral-500);--mglon-schedule-text-tertiary: var(--mglon-schedule-neutral-400);--mglon-schedule-hover: var(--mglon-schedule-neutral-100);--mglon-schedule-selection: var(--mglon-schedule-primary-50);--mglon-schedule-error: #ea4335;--mglon-schedule-on-error: #ffffff;--mglon-schedule-spacing-xs: 4px;--mglon-schedule-spacing-sm: 8px;--mglon-schedule-spacing-md: 16px;--mglon-schedule-spacing-lg: 24px;--mglon-schedule-padding-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-padding-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-padding-md: var(--mglon-schedule-spacing-md);--mglon-schedule-padding-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-margin-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-margin-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-margin-md: var(--mglon-schedule-spacing-md);--mglon-schedule-margin-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-gap-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-gap-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-gap-md: var(--mglon-schedule-spacing-md);--mglon-schedule-gap-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-border-width-sm: 1px;--mglon-schedule-border-width-md: 2px;--mglon-schedule-border-width-lg: 4px;--mglon-schedule-header-height: 48px;--mglon-schedule-sidebar-width: 60px;--mglon-schedule-cell-height: 48px;--mglon-schedule-radius-sm: 4px;--mglon-schedule-radius-md: 8px;--mglon-schedule-radius-lg: 16px;--mglon-schedule-radius-full: 9999px;--mglon-schedule-font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;--mglon-schedule-font-size-xs: 10px;--mglon-schedule-font-size-sm: 12px;--mglon-schedule-font-size-md: 14px;--mglon-schedule-font-size-lg: 16px;--mglon-schedule-shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--mglon-schedule-shadow-md: 0 2px 4px rgba(0, 0, 0, .15);--mglon-schedule-shadow-lg: 0 4px 8px rgba(0, 0, 0, .2);--mglon-schedule-z-sticky: 10;--mglon-schedule-z-header: 20;--mglon-schedule-hover-bg: rgba(0, 0, 0, .04);--mglon-schedule-focus-ring-color: var(--mglon-schedule-primary-200);--mglon-schedule-disabled-opacity: .5;--mglon-schedule-transition-duration: .2s;--mglon-schedule-transition-easing: cubic-bezier(.4, 0, .2, 1);--mglon-schedule-month-week-display: grid;--mglon-schedule-month-week-columns: repeat(7, 1fr);--mglon-schedule-month-week-min-height: 80px;--mglon-schedule-month-week-border-bottom-width: 1px}.ng-sched-schedule{display:grid;grid-template-rows:auto 1fr;height:100%;width:100%;background-color:var(--mglon-schedule-background);color:var(--mglon-schedule-on-background);font-family:var(--mglon-schedule-font-family)}.ng-sched-header{display:flex;align-items:center;justify-content:space-between;padding:var(--mglon-schedule-spacing-sm) var(--mglon-schedule-spacing-md);border-bottom:1px solid var(--mglon-schedule-border);background-color:var(--mglon-schedule-surface)}.ng-sched-header__nav{display:flex;align-items:center;gap:var(--mglon-schedule-spacing-sm)}.ng-sched-header__title{margin:0 0 0 var(--mglon-schedule-spacing-md);font-size:1.25rem;font-weight:500}.ng-sched-header__views{display:flex;gap:0;border:1px solid var(--mglon-schedule-border);border-radius:4px;overflow:hidden}.ng-sched-button{padding:6px 12px;border:1px solid var(--mglon-schedule-border);background-color:transparent;color:var(--mglon-schedule-on-surface);font-family:inherit;font-size:.875rem;cursor:pointer;transition:all .2s ease-in-out;border-radius:4px;outline:none;-webkit-user-select:none;user-select:none}.ng-sched-button--icon{padding:6px 10px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.ng-sched-button:hover:not(:disabled){background-color:var(--mglon-schedule-hover)}.ng-sched-button:active:not(:disabled){transform:scale(.98)}.ng-sched-button:focus-visible{outline:2px solid var(--mglon-schedule-primary);outline-offset:2px}.ng-sched-button--active{background-color:var(--mglon-schedule-selection);color:var(--mglon-schedule-primary);font-weight:500}.ng-sched-button:disabled{opacity:.5;cursor:not-allowed}.ng-sched-header__views .ng-sched-button{border:none;border-right:1px solid var(--mglon-schedule-border);border-radius:0}.ng-sched-header__views .ng-sched-button:last-child{border-right:none}.ng-sched-body{position:relative;height:100%;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:0}.ng-sched-body:has(>:only-child){grid-template-columns:1fr}.ng-sched-body>:last-child{overflow:auto;min-width:0}.ng-sched-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--mglon-schedule-spacing-lg);color:var(--mglon-schedule-text-secondary);font-size:1rem;text-align:center;gap:var(--mglon-schedule-spacing-md)}.ng-sched-placeholder:before{content:\"\\1f4c5\";font-size:3rem;opacity:.3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ResourceView, selector: "mglon-resource-view" }, { kind: "component", type: MonthView, selector: "mglon-month-view" }, { kind: "component", type: HeaderSchedule, selector: "mglon-header-schedule", inputs: ["title", "activeView", "views", "editable"], outputs: ["next", "prev", "today", "viewChange", "add"] }, { kind: "component", type: SidebarSchedule, selector: "mglon-sidebar-schedule" }, { kind: "component", type: WeekView, selector: "mglon-week-view", outputs: ["selectionStart", "selectionChange", "selectionEnd"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Schedule, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-schedule', standalone: true, imports: [CommonModule, ResourceView, MonthView, HeaderSchedule, SidebarSchedule, WeekView], providers: [CalendarStore], encapsulation: ViewEncapsulation.None, template: "<div class=\"ng-sched-schedule\">\n  <ng-content />\n  <!-- Header -->\n  <mglon-header-schedule [title]=\"store.formattedDate()\" [activeView]=\"store.viewMode()\" [views]=\"store.config().views!\"\n    [editable]=\"store.config().editable!\" (next)=\"store.next()\" (prev)=\"store.prev()\" (today)=\"store.today()\"\n    (viewChange)=\"store.changeView($event)\" (add)=\"add.emit()\">\n  </mglon-header-schedule>\n\n  <!-- Body -->\n\n  <main class=\"ng-sched-body\">\n    @if (store.config().showSidebar) {\n    <div class=\"ng-sched-body__sidebar\">\n      <mglon-sidebar-schedule></mglon-sidebar-schedule>\n    </div>\n    }\n    <div class=\"ng-sched-body__content\">\n      @switch (store.viewMode()) {\n      @case ('resource') {\n      <mglon-resource-view></mglon-resource-view>\n      }\n      @case ('month') {\n      <mglon-month-view></mglon-month-view>\n      }\n      @case ('week') {\n      <mglon-week-view (selectionStart)=\"selectionStart.emit($event)\" (selectionChange)=\"selectionChange.emit($event)\"\n        (selectionEnd)=\"selectionEnd.emit($event)\">\n      </mglon-week-view>\n      }\n      @default {\n      <div class=\"ng-sched-placeholder\">\n        View '{{ store.viewMode() }}' not implemented yet.\n      </div>\n      }\n      }\n    </div>\n\n  </main>\n</div>", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;width:100%;--mglon-schedule-primary-50: #e8f0fe;--mglon-schedule-primary-100: #d2e3fc;--mglon-schedule-primary-200: #a7cbfb;--mglon-schedule-primary-300: #7cacf8;--mglon-schedule-primary-400: #518ef5;--mglon-schedule-primary-500: #1a73e8;--mglon-schedule-primary-600: #1967d2;--mglon-schedule-primary-700: #185abc;--mglon-schedule-primary-800: #174ea6;--mglon-schedule-primary-900: #0d3a86;--mglon-schedule-primary-950: #08265a;--mglon-schedule-neutral-50: #fafafa;--mglon-schedule-neutral-100: #f5f5f5;--mglon-schedule-neutral-200: #e5e5e5;--mglon-schedule-neutral-300: #d4d4d4;--mglon-schedule-neutral-400: #a3a3a3;--mglon-schedule-neutral-500: #737373;--mglon-schedule-neutral-600: #525252;--mglon-schedule-neutral-700: #404040;--mglon-schedule-neutral-800: #262626;--mglon-schedule-neutral-900: #171717;--mglon-schedule-neutral-950: #0a0a0a;--mglon-schedule-primary: var(--mglon-schedule-primary-500);--mglon-schedule-on-primary: #ffffff;--mglon-schedule-surface: #ffffff;--mglon-schedule-on-surface: var(--mglon-schedule-neutral-900);--mglon-schedule-surface-variant: var(--mglon-schedule-neutral-100);--mglon-schedule-on-surface-variant: var(--mglon-schedule-neutral-700);--mglon-schedule-background: #ffffff;--mglon-schedule-on-background: var(--mglon-schedule-neutral-900);--mglon-schedule-border: var(--mglon-schedule-neutral-200);--mglon-schedule-text-primary: var(--mglon-schedule-neutral-900);--mglon-schedule-text-secondary: var(--mglon-schedule-neutral-500);--mglon-schedule-text-tertiary: var(--mglon-schedule-neutral-400);--mglon-schedule-hover: var(--mglon-schedule-neutral-100);--mglon-schedule-selection: var(--mglon-schedule-primary-50);--mglon-schedule-error: #ea4335;--mglon-schedule-on-error: #ffffff;--mglon-schedule-spacing-xs: 4px;--mglon-schedule-spacing-sm: 8px;--mglon-schedule-spacing-md: 16px;--mglon-schedule-spacing-lg: 24px;--mglon-schedule-padding-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-padding-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-padding-md: var(--mglon-schedule-spacing-md);--mglon-schedule-padding-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-margin-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-margin-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-margin-md: var(--mglon-schedule-spacing-md);--mglon-schedule-margin-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-gap-xs: var(--mglon-schedule-spacing-xs);--mglon-schedule-gap-sm: var(--mglon-schedule-spacing-sm);--mglon-schedule-gap-md: var(--mglon-schedule-spacing-md);--mglon-schedule-gap-lg: var(--mglon-schedule-spacing-lg);--mglon-schedule-border-width-sm: 1px;--mglon-schedule-border-width-md: 2px;--mglon-schedule-border-width-lg: 4px;--mglon-schedule-header-height: 48px;--mglon-schedule-sidebar-width: 60px;--mglon-schedule-cell-height: 48px;--mglon-schedule-radius-sm: 4px;--mglon-schedule-radius-md: 8px;--mglon-schedule-radius-lg: 16px;--mglon-schedule-radius-full: 9999px;--mglon-schedule-font-family: \"Roboto\", \"Helvetica\", \"Arial\", sans-serif;--mglon-schedule-font-size-xs: 10px;--mglon-schedule-font-size-sm: 12px;--mglon-schedule-font-size-md: 14px;--mglon-schedule-font-size-lg: 16px;--mglon-schedule-shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--mglon-schedule-shadow-md: 0 2px 4px rgba(0, 0, 0, .15);--mglon-schedule-shadow-lg: 0 4px 8px rgba(0, 0, 0, .2);--mglon-schedule-z-sticky: 10;--mglon-schedule-z-header: 20;--mglon-schedule-hover-bg: rgba(0, 0, 0, .04);--mglon-schedule-focus-ring-color: var(--mglon-schedule-primary-200);--mglon-schedule-disabled-opacity: .5;--mglon-schedule-transition-duration: .2s;--mglon-schedule-transition-easing: cubic-bezier(.4, 0, .2, 1);--mglon-schedule-month-week-display: grid;--mglon-schedule-month-week-columns: repeat(7, 1fr);--mglon-schedule-month-week-min-height: 80px;--mglon-schedule-month-week-border-bottom-width: 1px}.ng-sched-schedule{display:grid;grid-template-rows:auto 1fr;height:100%;width:100%;background-color:var(--mglon-schedule-background);color:var(--mglon-schedule-on-background);font-family:var(--mglon-schedule-font-family)}.ng-sched-header{display:flex;align-items:center;justify-content:space-between;padding:var(--mglon-schedule-spacing-sm) var(--mglon-schedule-spacing-md);border-bottom:1px solid var(--mglon-schedule-border);background-color:var(--mglon-schedule-surface)}.ng-sched-header__nav{display:flex;align-items:center;gap:var(--mglon-schedule-spacing-sm)}.ng-sched-header__title{margin:0 0 0 var(--mglon-schedule-spacing-md);font-size:1.25rem;font-weight:500}.ng-sched-header__views{display:flex;gap:0;border:1px solid var(--mglon-schedule-border);border-radius:4px;overflow:hidden}.ng-sched-button{padding:6px 12px;border:1px solid var(--mglon-schedule-border);background-color:transparent;color:var(--mglon-schedule-on-surface);font-family:inherit;font-size:.875rem;cursor:pointer;transition:all .2s ease-in-out;border-radius:4px;outline:none;-webkit-user-select:none;user-select:none}.ng-sched-button--icon{padding:6px 10px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.ng-sched-button:hover:not(:disabled){background-color:var(--mglon-schedule-hover)}.ng-sched-button:active:not(:disabled){transform:scale(.98)}.ng-sched-button:focus-visible{outline:2px solid var(--mglon-schedule-primary);outline-offset:2px}.ng-sched-button--active{background-color:var(--mglon-schedule-selection);color:var(--mglon-schedule-primary);font-weight:500}.ng-sched-button:disabled{opacity:.5;cursor:not-allowed}.ng-sched-header__views .ng-sched-button{border:none;border-right:1px solid var(--mglon-schedule-border);border-radius:0}.ng-sched-header__views .ng-sched-button:last-child{border-right:none}.ng-sched-body{position:relative;height:100%;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:0}.ng-sched-body:has(>:only-child){grid-template-columns:1fr}.ng-sched-body>:last-child{overflow:auto;min-width:0}.ng-sched-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--mglon-schedule-spacing-lg);color:var(--mglon-schedule-text-secondary);font-size:1rem;text-align:center;gap:var(--mglon-schedule-spacing-md)}.ng-sched-placeholder:before{content:\"\\1f4c5\";font-size:3rem;opacity:.3}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], headerUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerUI", required: false }] }], sidebarUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarUI", required: false }] }], gridUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridUI", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], useDynamicColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDynamicColors", required: false }] }], add: [{ type: i0.Output, args: ["add"] }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], dateRangeChange: [{ type: i0.Output, args: ["dateRangeChange"] }], resourceShow: [{ type: i0.Output, args: ["resourceShow"] }], resourceHide: [{ type: i0.Output, args: ["resourceHide"] }] } });
+
+/**
+ * Injection token for providing resource ID to child components
+ */
+const RESOURCE_ID_TOKEN = new InjectionToken('RESOURCE_ID');
+/**
+ * ResourceComponent - Declarative component representing a calendar resource
+ *
+ * Usage:
+ * <mglon-resource
+ *   id="room-1"
+ *   name="Conference Room A"
+ *   [color]="'#0860c4'">
+ *   <mglon-event>...</mglon-event>
+ * </mglon-resource>
+ */
+class ResourceEvents {
+    /** Unique identifier for the resource */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    /** Display name of the resource */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** Color for the resource (border/background) */
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    /** URL of image or initials for display */
+    avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : []));
+    /** Additional description of the resource */
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
+    /** Tags for filtering */
+    tags = input(DEFAULT_RESOURCE_INPUTS.tags, ...(ngDevMode ? [{ debugName: "tags" }] : []));
+    /** If true, events for this resource cannot be edited */
+    isReadOnly = input(DEFAULT_RESOURCE_INPUTS.isReadOnly, ...(ngDevMode ? [{ debugName: "isReadOnly" }] : []));
+    /** If true, this resource does not accept new events */
+    isBlocked = input(DEFAULT_RESOURCE_INPUTS.isBlocked, ...(ngDevMode ? [{ debugName: "isBlocked" }] : []));
+    /** If true, resource is active and visible. Default: true */
+    isActive = input(DEFAULT_RESOURCE_INPUTS.isActive, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    /** Flexible user-defined data */
+    metadata = input(...(ngDevMode ? [undefined, { debugName: "metadata" }] : []));
+    /** If true, allows resizing events for this resource. Default: true */
+    resizableEvents = input(DEFAULT_RESOURCE_INPUTS.resizableEvents, ...(ngDevMode ? [{ debugName: "resizableEvents" }] : []));
+    elRef = inject(ElementRef);
+    store = inject(CalendarStore);
+    ngAfterContentInit() {
+        this._removeInvalidNodes();
+    }
+    _removeInvalidNodes() {
+        const children = this.elRef.nativeElement.childNodes;
+        children.forEach((node) => {
+            if (node.nodeType === 1 && node.tagName !== 'MGLON-EVENT') {
+                console.warn(`[ResourceEvents] The element <${node.tagName.toLowerCase()}> is not allowed inside mglon-resource-events. Only mglon-event components are allowed. This node will be removed.`);
+                node.remove();
+            }
+        });
+    }
+    constructor() {
+        // Sync isActive input changes to EventStore
+        effect(() => {
+            const shouldBeActive = this.isActive();
+            const resourceId = this.id();
+            if (resourceId) {
+                if (shouldBeActive) {
+                    this.store.showResource(resourceId);
+                }
+                else {
+                    this.store.hideResource(resourceId);
+                }
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        this.registerResource();
+    }
+    /**
+     * Lifecycle: Unregister resource on destroy
+     */
+    ngOnDestroy() {
+        // Only unregister if the component was fully initialized
+        try {
+            const resourceId = this.id();
+            if (resourceId) {
+                this.store.unregisterResource(resourceId);
+            }
+        }
+        catch (e) {
+            // Ignore errors during cleanup (e.g., inputs not yet initialized in tests)
+        }
+    }
+    registerResource() {
+        const resource = {
+            id: this.id(),
+            name: this.name(),
+            color: this.color(),
+            avatar: this.avatar(),
+            description: this.description(),
+            tags: this.tags(),
+            isReadOnly: this.isReadOnly(),
+            isBlocked: this.isBlocked(),
+            isActive: this.isActive(),
+            resizableEvents: this.resizableEvents(),
+            metadata: this.metadata()
+        };
+        this.store.registerResource(resource);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceEvents, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: ResourceEvents, isStandalone: true, selector: "mglon-resource", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, isReadOnly: { classPropertyName: "isReadOnly", publicName: "isReadOnly", isSignal: true, isRequired: false, transformFunction: null }, isBlocked: { classPropertyName: "isBlocked", publicName: "isBlocked", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, resizableEvents: { classPropertyName: "resizableEvents", publicName: "resizableEvents", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: RESOURCE_ID_TOKEN,
+                useFactory: (component) => component.id(),
+                deps: [ResourceEvents]
+            }
+        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ResourceEvents, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-resource', standalone: true, imports: [CommonModule], template: `<ng-content></ng-content>`, providers: [
+                        {
+                            provide: RESOURCE_ID_TOKEN,
+                            useFactory: (component) => component.id(),
+                            deps: [ResourceEvents]
+                        }
+                    ], styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], isReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadOnly", required: false }] }], isBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBlocked", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], resizableEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableEvents", required: false }] }] } });
+
+class Event {
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    startDate = input.required(...(ngDevMode ? [{ debugName: "startDate" }] : []));
+    endDate = input.required(...(ngDevMode ? [{ debugName: "endDate" }] : []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    allDay = input(DEFAULT_EVENT_INPUTS.allDay, ...(ngDevMode ? [{ debugName: "allDay" }] : []));
+    description = input(DEFAULT_EVENT_INPUTS.description, ...(ngDevMode ? [{ debugName: "description" }] : []));
+    data = input(DEFAULT_EVENT_INPUTS.data, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Optional explicit resource ID (if not nested in mglon-resource) */
+    resourceId = input(...(ngDevMode ? [undefined, { debugName: "resourceId" }] : []));
+    parentResourceId = inject(RESOURCE_ID_TOKEN, { optional: true });
+    /** If true, the event cannot be edited */
+    isReadOnly = input(false, ...(ngDevMode ? [{ debugName: "isReadOnly" }] : []));
+    /** If true, the event is visually blocked (e.g., maintenance) */
+    isBlocked = input(false, ...(ngDevMode ? [{ debugName: "isBlocked" }] : []));
+    /** Flexible user-defined data */
+    metadata = input(...(ngDevMode ? [undefined, { debugName: "metadata" }] : []));
+    /** Tags for filtering and styling */
+    tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
+    // --- Interaction Outputs ---
+    eventClick = output();
+    eventDblClick = output();
+    eventContextMenu = output();
+    eventMouseEnter = output();
+    eventMouseLeave = output();
+    eventResizeStart = output();
+    eventResize = output();
+    eventResizeEnd = output();
+    eventDragStart = output();
+    eventDrag = output();
+    eventDragEnd = output();
+    destroy$ = new Subject();
+    store = inject(CalendarStore);
+    ngOnInit() {
+        this.registerEvent();
+        this.setupInteractionListeners();
+    }
+    setupInteractionListeners() {
+        this.store.getInteractions()
+            .pipe(filter(e => e.eventId === this.id()), takeUntil(this.destroy$))
+            .subscribe(e => {
+            switch (e.type) {
+                case 'click':
+                    this.eventClick.emit(e.payload);
+                    break;
+                case 'dblclick':
+                    this.eventDblClick.emit(e.payload);
+                    break;
+                case 'contextmenu':
+                    this.eventContextMenu.emit(e.payload);
+                    break;
+                case 'mouseenter':
+                    this.eventMouseEnter.emit(e.payload);
+                    break;
+                case 'mouseleave':
+                    this.eventMouseLeave.emit(e.payload);
+                    break;
+                case 'resizeStart':
+                    this.eventResizeStart.emit(e.payload);
+                    break;
+                case 'resize':
+                    this.eventResize.emit(e.payload);
+                    break;
+                case 'resizeEnd':
+                    this.eventResizeEnd.emit(e.payload);
+                    break;
+                case 'dragStart':
+                    this.eventDragStart.emit(e.payload);
+                    break;
+                case 'drag':
+                    this.eventDrag.emit(e.payload);
+                    break;
+                case 'dragEnd':
+                    this.eventDragEnd.emit(e.payload);
+                    break;
+            }
+        });
+    }
+    /**
+     * Lifecycle: Unregister event from store
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        // Only unregister if the component was fully initialized
+        try {
+            const eventId = this.id();
+            if (eventId) {
+                this.store.unregisterEvent(eventId);
+            }
+        }
+        catch (e) {
+            // Ignore errors during cleanup (e.g., inputs not yet initialized in tests)
+        }
+    }
+    registerEvent() {
+        const event = {
+            id: this.id(),
+            resourceId: this.resourceId() || this.parentResourceId || undefined,
+            title: this.title(),
+            description: this.description(),
+            tags: this.tags(),
+            start: this.startDate(),
+            end: this.endDate(),
+            color: this.color(),
+            isReadOnly: this.isReadOnly(),
+            isBlocked: this.isBlocked(),
+            isAllDay: this.allDay(),
+            metadata: this.metadata(),
+            type: 'event'
+        };
+        this.store.registerEvent(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Event, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: Event, isStandalone: true, selector: "mglon-event", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: true, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, allDay: { classPropertyName: "allDay", publicName: "allDay", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, resourceId: { classPropertyName: "resourceId", publicName: "resourceId", isSignal: true, isRequired: false, transformFunction: null }, isReadOnly: { classPropertyName: "isReadOnly", publicName: "isReadOnly", isSignal: true, isRequired: false, transformFunction: null }, isBlocked: { classPropertyName: "isBlocked", publicName: "isBlocked", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClick: "eventClick", eventDblClick: "eventDblClick", eventContextMenu: "eventContextMenu", eventMouseEnter: "eventMouseEnter", eventMouseLeave: "eventMouseLeave", eventResizeStart: "eventResizeStart", eventResize: "eventResize", eventResizeEnd: "eventResizeEnd", eventDragStart: "eventDragStart", eventDrag: "eventDrag", eventDragEnd: "eventDragEnd" }, ngImport: i0, template: `<!-- Events are managed declaratively -->`, isInline: true, styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Event, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-event', standalone: true, imports: [CommonModule], template: `<!-- Events are managed declaratively -->`, styles: [":host{display:none}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: true }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], allDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDay", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], resourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceId", required: false }] }], isReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadOnly", required: false }] }], isBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBlocked", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], eventDblClick: [{ type: i0.Output, args: ["eventDblClick"] }], eventContextMenu: [{ type: i0.Output, args: ["eventContextMenu"] }], eventMouseEnter: [{ type: i0.Output, args: ["eventMouseEnter"] }], eventMouseLeave: [{ type: i0.Output, args: ["eventMouseLeave"] }], eventResizeStart: [{ type: i0.Output, args: ["eventResizeStart"] }], eventResize: [{ type: i0.Output, args: ["eventResize"] }], eventResizeEnd: [{ type: i0.Output, args: ["eventResizeEnd"] }], eventDragStart: [{ type: i0.Output, args: ["eventDragStart"] }], eventDrag: [{ type: i0.Output, args: ["eventDrag"] }], eventDragEnd: [{ type: i0.Output, args: ["eventDragEnd"] }] } });
+
+const DAY_MAP = {
+    'Sun': RRule.SU,
+    'Mon': RRule.MO,
+    'Tue': RRule.TU,
+    'Wed': RRule.WE,
+    'Thu': RRule.TH,
+    'Fri': RRule.FR,
+    'Sat': RRule.SA
+};
+/**
+ * Expands a recurrent event into a list of individual event instances for a given date range.
+ * Each instance has a composite ID: {parentID}_{timestamp}
+ *
+ * @param recurrentEvent The recurrence definition
+ * @param range The search range (DateRange)
+ * @returns Array of Event instances
+ */
+function expandRecurrentEvent(recurrentEvent, range) {
+    const { start: rangeStart, end: rangeEnd } = range;
+    const rule = recurrentEvent.recurrenceRule;
+    // Mapping frequency
+    const freqMap = {
+        'daily': RRule.DAILY,
+        'weekly': RRule.WEEKLY,
+        'monthly': RRule.MONTHLY,
+        'yearly': RRule.YEARLY
+    };
+    // Duration of the original event
+    const duration = differenceInMilliseconds(recurrentEvent.end, recurrentEvent.start);
+    // Configure options for RRule
+    const options = {
+        freq: freqMap[rule.type],
+        dtstart: recurrentEvent.start,
+        interval: rule.interval || 1,
+    };
+    if (rule.until)
+        options.until = rule.until;
+    if (rule.count)
+        options.count = rule.count;
+    if (rule.byDay)
+        options.byweekday = rule.byDay.map(day => DAY_MAP[day]);
+    if (rule.byMonth)
+        options.bymonth = rule.byMonth;
+    if (rule.byMonthDay)
+        options.bymonthday = rule.byMonthDay;
+    if (rule.bySetPos)
+        options.bysetpos = rule.bySetPos;
+    if (rule.weekStart)
+        options.wkst = DAY_MAP[rule.weekStart];
+    const rrule = new RRule(options);
+    // Get occurrences within the requested range
+    const occurrences = rrule.between(rangeStart, rangeEnd, true);
+    // Filter out exceptions if they exist (comparing timestamps for precision)
+    const exceptions = recurrentEvent.recurrenceExceptions?.map(d => d.getTime()) || [];
+    return occurrences
+        .filter(date => !exceptions.includes(date.getTime()))
+        .map(date => {
+        // Calculate individual instance end date based on original duration
+        const instanceEnd = addMilliseconds(date, duration);
+        // We extract everything from the recurrent model EXCEPT the recurrence-specific 
+        // fields and the 'type' field, to strictly conform to the Event interface.
+        const { recurrenceRule, recurrenceExceptions, type: _parentType, // ignore the 'recurrent' type
+        ...baseProps } = recurrentEvent;
+        return {
+            ...baseProps,
+            id: `${recurrentEvent.id}_${date.getTime()}`,
+            start: date,
+            end: instanceEnd,
+            type: 'event', // Behave as a normal event for rendering
+            isRecurrenceInstance: true,
+            parentRecurrenceId: recurrentEvent.id,
+            recurrenceDate: date
+        };
+    });
+}
+
+class RecurrentEvent {
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    startDate = input.required(...(ngDevMode ? [{ debugName: "startDate" }] : []));
+    endDate = input.required(...(ngDevMode ? [{ debugName: "endDate" }] : []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    allDay = input(DEFAULT_EVENT_INPUTS.allDay, ...(ngDevMode ? [{ debugName: "allDay" }] : []));
+    description = input(DEFAULT_EVENT_INPUTS.description, ...(ngDevMode ? [{ debugName: "description" }] : []));
+    data = input(DEFAULT_EVENT_INPUTS.data, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Optional explicit resource ID (if not nested in mglon-resource) */
+    resourceId = input(...(ngDevMode ? [undefined, { debugName: "resourceId" }] : []));
+    parentResourceId = inject(RESOURCE_ID_TOKEN, { optional: true });
+    /** If true, the event cannot be edited */
+    isReadOnly = input(false, ...(ngDevMode ? [{ debugName: "isReadOnly" }] : []));
+    /** If true, the event is visually blocked (e.g., maintenance) */
+    isBlocked = input(false, ...(ngDevMode ? [{ debugName: "isBlocked" }] : []));
+    /** Flexible user-defined data */
+    metadata = input(...(ngDevMode ? [undefined, { debugName: "metadata" }] : []));
+    /** Tags for filtering and styling */
+    tags = input([], ...(ngDevMode ? [{ debugName: "tags" }] : []));
+    /** Recurrence rule defining the pattern */
+    recurrenceRule = input.required(...(ngDevMode ? [{ debugName: "recurrenceRule" }] : [])); // TODO: Type this properly
+    /** Specific dates to exclude */
+    recurrenceExceptions = input(...(ngDevMode ? [undefined, { debugName: "recurrenceExceptions" }] : []));
+    // --- Interaction Outputs ---
+    eventClick = output();
+    eventDblClick = output();
+    eventContextMenu = output();
+    eventMouseEnter = output();
+    eventMouseLeave = output();
+    destroy$ = new Subject();
+    store = inject(CalendarStore);
+    constructor() {
+        effect(() => {
+            // Trigger this effect when range OR any relevant input signal changes
+            this.store.viewRange();
+            this.id();
+            this.title();
+            this.startDate();
+            this.endDate();
+            this.recurrenceRule();
+            untracked(() => {
+                this.registerEvent();
+            });
+        });
+    }
+    ngOnInit() {
+        this.setupInteractionListeners();
+    }
+    setupInteractionListeners() {
+        this.store.getInteractions()
+            .pipe(filter(e => e.eventId === this.id()), takeUntil(this.destroy$))
+            .subscribe(e => {
+            switch (e.type) {
+                case 'click':
+                    this.eventClick.emit(e.payload);
+                    break;
+                case 'dblclick':
+                    this.eventDblClick.emit(e.payload);
+                    break;
+                case 'contextmenu':
+                    this.eventContextMenu.emit(e.payload);
+                    break;
+                case 'mouseenter':
+                    this.eventMouseEnter.emit(e.payload);
+                    break;
+                case 'mouseleave':
+                    this.eventMouseLeave.emit(e.payload);
+                    break;
+            }
+        });
+    }
+    currentInstanceIds = [];
+    /**
+     * Lifecycle: Unregister event and all its instances from store
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.cleanup();
+    }
+    cleanup() {
+        try {
+            // 1. Unregister all instances
+            this.currentInstanceIds.forEach(id => this.store.unregisterEvent(id));
+            this.currentInstanceIds = [];
+            // 2. Unregister parent
+            const parentId = this.id();
+            if (parentId) {
+                this.store.unregisterEvent(parentId);
+            }
+        }
+        catch (e) {
+            // Ignore errors during cleanup
+        }
+    }
+    registerEvent() {
+        // 1. Prepare Parent Master
+        const parentEvent = {
+            id: this.id(),
+            resourceId: this.resourceId() || this.parentResourceId || undefined,
+            title: this.title(),
+            description: this.description(),
+            tags: this.tags(),
+            start: this.startDate(),
+            end: this.endDate(),
+            color: this.color(),
+            isReadOnly: this.isReadOnly(),
+            isBlocked: this.isBlocked(),
+            isAllDay: this.allDay(),
+            metadata: this.metadata(),
+            type: 'recurrent',
+            recurrenceRule: this.recurrenceRule(),
+            recurrenceExceptions: this.recurrenceExceptions()
+        };
+        // 2. Cleanup previous instances before re-registering
+        this.currentInstanceIds.forEach(id => this.store.unregisterEvent(id));
+        this.currentInstanceIds = [];
+        // 3. Register the parent recurrent event (Master definition)
+        this.store.registerEvent(parentEvent);
+        // 4. Expand and register instances for the current range
+        const range = this.store.viewRange();
+        const instances = expandRecurrentEvent(parentEvent, range);
+        instances.forEach(instance => {
+            this.store.registerEvent(instance);
+            this.currentInstanceIds.push(instance.id);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RecurrentEvent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: RecurrentEvent, isStandalone: true, selector: "mglon-recurrent-event", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: true, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, allDay: { classPropertyName: "allDay", publicName: "allDay", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, resourceId: { classPropertyName: "resourceId", publicName: "resourceId", isSignal: true, isRequired: false, transformFunction: null }, isReadOnly: { classPropertyName: "isReadOnly", publicName: "isReadOnly", isSignal: true, isRequired: false, transformFunction: null }, isBlocked: { classPropertyName: "isBlocked", publicName: "isBlocked", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, recurrenceRule: { classPropertyName: "recurrenceRule", publicName: "recurrenceRule", isSignal: true, isRequired: true, transformFunction: null }, recurrenceExceptions: { classPropertyName: "recurrenceExceptions", publicName: "recurrenceExceptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClick: "eventClick", eventDblClick: "eventDblClick", eventContextMenu: "eventContextMenu", eventMouseEnter: "eventMouseEnter", eventMouseLeave: "eventMouseLeave" }, ngImport: i0, template: `<!-- Events are managed declaratively -->`, isInline: true, styles: [":host{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RecurrentEvent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mglon-recurrent-event', standalone: true, imports: [CommonModule], template: `<!-- Events are managed declaratively -->`, styles: [":host{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: true }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], allDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "allDay", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], resourceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceId", required: false }] }], isReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadOnly", required: false }] }], isBlocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBlocked", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], recurrenceRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "recurrenceRule", required: true }] }], recurrenceExceptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "recurrenceExceptions", required: false }] }], eventClick: [{ type: i0.Output, args: ["eventClick"] }], eventDblClick: [{ type: i0.Output, args: ["eventDblClick"] }], eventContextMenu: [{ type: i0.Output, args: ["eventContextMenu"] }], eventMouseEnter: [{ type: i0.Output, args: ["eventMouseEnter"] }], eventMouseLeave: [{ type: i0.Output, args: ["eventMouseLeave"] }] } });
+
+class FabButtonComponent {
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    color = input('surface', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    // Optional: extended FAB (with text) vs standard (icon only) could be handled via CSS classes check or another input
+    extended = input(false, ...(ngDevMode ? [{ debugName: "extended" }] : []));
+    classes = computed(() => {
+        return [
+            'mglon-fab-button',
+            `size-${this.size()}`,
+            `color-${this.color()}`,
+            this.extended() ? 'extended' : ''
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: FabButtonComponent, isStandalone: true, selector: "button[mglon-fab-button], a[mglon-fab-button]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-size": "size()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;border:none;outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;background-clip:padding-box;text-decoration:none;font-family:var(--mglon-schedule-font-family);border-radius:var(--mglon-fab-radius, 16px);transition:var(--mglon-fab-transition, box-shadow .28s var(--mglon-schedule-transition-easing), background-color .28s var(--mglon-schedule-transition-easing));box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}:host.size-md{height:var(--mglon-fab-md-size, 48px);min-width:var(--mglon-fab-md-size, 48px)}:host.size-md.extended{padding:0 20px;border-radius:var(--mglon-fab-extended-radius, 24px)}:host.size-md:not(.extended){width:var(--mglon-fab-md-size, 48px);border-radius:50%}:host.size-lg{height:var(--mglon-fab-lg-size, 56px);min-width:var(--mglon-fab-lg-size, 56px)}:host.size-lg.extended{padding:0 24px;border-radius:var(--mglon-fab-lg-extended-radius, 28px);font-size:14px;font-weight:500;letter-spacing:.25px}:host.size-lg:not(.extended){width:var(--mglon-fab-lg-size, 56px);border-radius:50%;font-size:24px}:host.color-surface{background-color:var(--mglon-fab-surface-bg, var(--mglon-schedule-surface));color:var(--mglon-fab-surface-color, var(--mglon-schedule-text-primary))}:host.color-primary{background-color:var(--mglon-fab-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-fab-primary-color, var(--mglon-schedule-on-primary))}:host.color-primary:hover{background-color:var(--mglon-fab-primary-hover-bg, #185abc)}:host.color-secondary{background-color:var(--mglon-fab-secondary-bg, var(--mglon-schedule-selection));color:var(--mglon-fab-secondary-color, var(--mglon-schedule-primary))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FabButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mglon-fab-button], a[mglon-fab-button]', standalone: true, imports: [CommonModule], template: '<ng-content></ng-content>', host: {
+                        '[class]': 'classes()',
+                        '[attr.data-size]': 'size()'
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;border:none;outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;background-clip:padding-box;text-decoration:none;font-family:var(--mglon-schedule-font-family);border-radius:var(--mglon-fab-radius, 16px);transition:var(--mglon-fab-transition, box-shadow .28s var(--mglon-schedule-transition-easing), background-color .28s var(--mglon-schedule-transition-easing));box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}:host:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}:host.size-md{height:var(--mglon-fab-md-size, 48px);min-width:var(--mglon-fab-md-size, 48px)}:host.size-md.extended{padding:0 20px;border-radius:var(--mglon-fab-extended-radius, 24px)}:host.size-md:not(.extended){width:var(--mglon-fab-md-size, 48px);border-radius:50%}:host.size-lg{height:var(--mglon-fab-lg-size, 56px);min-width:var(--mglon-fab-lg-size, 56px)}:host.size-lg.extended{padding:0 24px;border-radius:var(--mglon-fab-lg-extended-radius, 28px);font-size:14px;font-weight:500;letter-spacing:.25px}:host.size-lg:not(.extended){width:var(--mglon-fab-lg-size, 56px);border-radius:50%;font-size:24px}:host.color-surface{background-color:var(--mglon-fab-surface-bg, var(--mglon-schedule-surface));color:var(--mglon-fab-surface-color, var(--mglon-schedule-text-primary))}:host.color-primary{background-color:var(--mglon-fab-primary-bg, var(--mglon-schedule-primary));color:var(--mglon-fab-primary-color, var(--mglon-schedule-on-primary))}:host.color-primary:hover{background-color:var(--mglon-fab-primary-hover-bg, #185abc)}:host.color-secondary{background-color:var(--mglon-fab-secondary-bg, var(--mglon-schedule-selection));color:var(--mglon-fab-secondary-color, var(--mglon-schedule-primary))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }] } });
+
+/*
+ * Public API Surface of ng-scheduler
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent, ButtonGroupComponent, DEFAULT_UI_CONFIG, Event, FabButtonComponent, IconButtonComponent, RESOURCE_ID_TOKEN, RecurrentEvent, ResourceEvents, ResourceView, Schedule, WeekView };
+//# sourceMappingURL=mglon-schedule.mjs.map