@open-rlb/ng-bootstrap 3.3.11 → 3.3.13

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -3,13 +3,13 @@ import { input, booleanAttribute, output, viewChild, ChangeDetectionStrategy, Co
 import * as i2$1 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Popover, Tooltip } from 'bootstrap';
-import { NgTemplateOutlet, TitleCasePipe, NgClass, formatDate, JsonPipe, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, NgClass, formatDate, TitleCasePipe, JsonPipe, CommonModule } from '@angular/common';
 import { Subject, of, map, shareReplay, take, filter, switchMap, Subscription, debounceTime, distinctUntilChanged, Observable, lastValueFrom, takeUntil } from 'rxjs';
 import * as i2 from '@angular/cdk/layout';
 import * as i1 from '@angular/forms';
 import { FormsModule, NgControl, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { DateTz } from '@open-rlb/date-tz';
 import { DateTz as DateTz$1 } from '@open-rlb/date-tz/date-tz';
+import { DateTz } from '@open-rlb/date-tz';
 import { CdkDropListGroup, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
@@ -2513,12 +2513,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ selector: 'rlb-fab', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent], template: "<button rlb-button [color]=\"color()\" [disabled]=\"disabled()\" [outline]=\"outline()\"\n  class=\"fab-button d-flex align-items-center justify-content-center\" [class]=\"[sizeClass(), positionClass()]\">\n  <ng-content></ng-content>\n</button>", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}:host{width:fit-content;display:block}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
-const DEFAULT_CALENDAR_LAYOUT = {
-    rowHeight: 110,
-    maxBodyHeight: 30,
-    minHeaderHeight: 3.5
-};
-
 function isSameDay(a, b) {
     return a.yearUTC === b.yearUTC &&
         a.monthUTC === b.monthUTC &&
@@ -2566,105 +2560,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ name: 'dtz' }]
         }] });
 
-class MonthFormatterPipe {
-    constructor() {
-        this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    }
-    transform(value) {
-        if (!value)
-            return '';
-        const parts = value.trim().split(' ');
-        if (parts.length < 2)
-            return value;
-        const day = parts[0];
-        const monthIndex = parseInt(parts[1], 10) - 1;
-        if (isNaN(monthIndex) || monthIndex < 0 || monthIndex > 11) {
-            return value;
-        }
-        const month = this.months[monthIndex];
-        const rest = parts.slice(2).join(' ');
-        return `${day} ${month}${rest ? ' ' + rest : ''}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MonthFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: MonthFormatterPipe, isStandalone: true, name: "monthFormatter" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MonthFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'monthFormatter' }]
-        }] });
-
-class CalendarHeaderComponent {
-    constructor() {
-        this.view = input('month', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
-        this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
-        this.dateChange = output();
-        this.viewChange = output();
-    }
-    next() {
-        switch (this.view()) {
-            case 'week':
-                const nextWeek = addDays(this.currentDate(), 7);
-                this.dateChange.emit(new DateTz(nextWeek));
-                break;
-            case 'month':
-                const nextMonth = new DateTz(this.currentDate()).set(1, 'day').add(1, 'month');
-                this.dateChange.emit(new DateTz(nextMonth));
-                break;
-            case 'day':
-                const nextDay = addDays(this.currentDate(), 1);
-                this.dateChange.emit(new DateTz(nextDay));
-                break;
-            default:
-                break;
-        }
-    }
-    prev() {
-        switch (this.view()) {
-            case 'week':
-                const pastWeek = addDays(this.currentDate(), -7);
-                this.dateChange.emit(new DateTz(pastWeek));
-                break;
-            case 'month':
-                const pastMonth = new DateTz(this.currentDate()).set(1, 'day').add(-1, 'month');
-                this.dateChange.emit(new DateTz(pastMonth));
-                break;
-            case 'day':
-                const nextDay = addDays(this.currentDate(), -1);
-                this.dateChange.emit(new DateTz(nextDay));
-                break;
-            default:
-                break;
-        }
-    }
-    today() {
-        switch (this.view()) {
-            case 'week':
-            default:
-                const today = getToday();
-                this.dateChange.emit(today);
-                break;
-        }
-    }
-    setView(view) {
-        this.viewChange.emit(view);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CalendarHeaderComponent, isStandalone: true, selector: "rlb-calendar-header", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "li[rlb-dropdown-item]", inputs: ["active", "disabled", "header", "divider", "link", "text-wrap"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: MonthFormatterPipe, name: "monthFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rlb-calendar-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ButtonComponent,
-                        DropdownComponent,
-                        DropdownDirective,
-                        DropdownContainerComponent,
-                        DropdownMenuItemComponent,
-                        TitleCasePipe,
-                        DateTzPipe,
-                        MonthFormatterPipe,
-                    ], template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>" }]
-        }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
-
 class CalendarEventComponent {
     constructor() {
         this.event = input.required(...(ngDevMode ? [{ debugName: "event" }] : /* istanbul ignore next */ []));
@@ -2763,6 +2658,7 @@ class CalendarWeekGridComponent {
         this.view = input.required(...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+        this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -2878,6 +2774,22 @@ class CalendarWeekGridComponent {
             this.nowInterval = null;
         }
     }
+    getIntervalsForDay(day) {
+        const dayOfWeek = new DateTz$1(day).dayOfWeek; // 0=Sun, 1=Mon...
+        return this.intervals().filter(interval => interval.dayWeek === dayOfWeek);
+    }
+    getIntervalTop(interval) {
+        const seconds = interval.hourStart ?? 0;
+        return (seconds / 3600) * this.layout().rowHeight;
+    }
+    getIntervalHeight(interval) {
+        const start = interval.hourStart ?? 0;
+        const stop = interval.hourStop ?? 86400;
+        return ((stop - start) / 3600) * this.layout().rowHeight;
+    }
+    getIntervalColor(interval) {
+        return `var(--bs-${interval.color || 'success'})`;
+    }
     buildWeekGrid(currentDate) {
         const dayOfWeek = currentDate.dayOfWeek; // 0 = Sunday, 1 = Monday ...
         // Week init (monday)
@@ -3073,12 +2985,12 @@ class CalendarWeekGridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarWeekGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarWeekGridComponent, isStandalone: true, selector: "rlb-calendar-week-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarWeekGridComponent, isStandalone: true, selector: "rlb-calendar-week-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container d-flex h-100 w-100 position-absolute top-0 start-0 z-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\">\n            @for (interval of getIntervalsForDay(day); track $index) {\n            <div class=\"calendar-interval position-absolute w-100\"\n              [style.top.px]=\"getIntervalTop(interval)\"\n              [style.height.px]=\"getIntervalHeight(interval)\"\n              [style.background-color]=\"getIntervalColor(interval)\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.intervals-container .day-column{flex:1 1 0px;width:0;min-width:120px}.intervals-container .day-column:last-child{border-right:none!important}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarWeekGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-week-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, DateTzPipe, DayOfWeekPipe], template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
+            args: [{ selector: 'rlb-calendar-week-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, DateTzPipe, DayOfWeekPipe], template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth()\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days(); track day.timestamp) {\n        <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n          [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n          <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n          <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout().maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container d-flex h-100 w-100 position-absolute top-0 start-0 z-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\">\n            @for (interval of getIntervalsForDay(day); track $index) {\n            <div class=\"calendar-interval position-absolute w-100\"\n              [style.top.px]=\"getIntervalTop(interval)\"\n              [style.height.px]=\"getIntervalHeight(interval)\"\n              [style.background-color]=\"getIntervalColor(interval)\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days(); track day.timestamp) {\n          <div class=\"day-column position-relative border-end h-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day)) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102;box-shadow:0 4px 6px -4px #0000001a}.header-row{width:fit-content;min-width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px;overflow:hidden}.day-cell:last-child{border-right:none!important}.calendar-body{scroll-behavior:auto}.body-row{width:fit-content;min-width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.day-column{border-color:var(--bs-border-color)!important;flex:1 1 0px;width:0;min-width:120px}.day-column:last-child{border-right:none!important}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.intervals-container .day-column{flex:1 1 0px;width:0;min-width:120px}.intervals-container .day-column:last-child{border-right:none!important}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
 
 const MAX_EVENTS_PER_CELL = 3;
 const DAYS_IN_GRID = 42; // 6 weeks * 7 days
@@ -3087,6 +2999,7 @@ class CalendarMonthGridComponent {
         this.view = input.required(...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+        this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -3132,6 +3045,15 @@ class CalendarMonthGridComponent {
     isToday(date) {
         return isToday(date);
     }
+    hasInterval(date) {
+        const dayOfWeek = new DateTz(date).dayOfWeek;
+        return this.intervals().some(interval => interval.dayWeek === dayOfWeek);
+    }
+    getIntervalColor(date) {
+        const dayOfWeek = new DateTz(date).dayOfWeek;
+        const interval = this.intervals().find(i => i.dayWeek === dayOfWeek);
+        return interval ? `var(--bs-${interval.color || 'success'})` : '';
+    }
     isCurrentMonth(date) {
         return date.month === this.currentDate().month;
     }
@@ -3333,18 +3255,19 @@ class CalendarMonthGridComponent {
         this.eventChange.emit(updatedEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarMonthGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarMonthGridComponent, isStandalone: true, selector: "rlb-calendar-month-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\" cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarMonthGridComponent, isStandalone: true, selector: "rlb-calendar-month-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n            [class.has-interval]=\"hasInterval(slot.date)\"\n            [style.--interval-color]=\"getIntervalColor(slot.date)\"\n            cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.has-interval{background-image:linear-gradient(to right,color-mix(in srgb,var(--interval-color) 12%,transparent) 0%,transparent 100%);border-left:3px solid var(--interval-color)!important}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarMonthGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-month-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, CdkDragPreview, DateTzPipe, DayOfWeekPipe], template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\" cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
+            args: [{ selector: 'rlb-calendar-month-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, CdkDragPreview, DateTzPipe, DayOfWeekPipe], template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\">\n  <!-- 1. Header Row (Fixed) -->\n  <div #headerRow class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary overflow-hidden\"\n    [style.min-height.rem]=\"layout().minHeaderHeight\" [style.padding-right.px]=\"scrollbarWidth()\">\n    @for (day of weekDaysHeader(); track day) {\n    <div class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\">\n      {{ day | dayOfWeek:'short' }}\n    </div>\n    }\n  </div>\n\n  <!-- SCROLL CONTAINER -->\n  <div #scrollBody class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\" (scroll)=\"onBodyScroll($event)\">\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        @for (week of weeks(); track week) {\n        <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\" [style.min-height.px]=\"layout().rowHeight\">\n          @for (slot of week; track slot) {\n          <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\" style=\"width: 0\"\n            [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n            [class.has-interval]=\"hasInterval(slot.date)\"\n            [style.--interval-color]=\"getIntervalColor(slot.date)\"\n            cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            <!-- Date Number -->\n            <div class=\"d-flex justify-content-center mb-1\">\n              <span class=\"day-number d-flex align-items-center justify-content-center\"\n                [class.today]=\"isToday(slot.date)\">\n                {{ slot.date | dtz:'DD' }}\n              </span>\n            </div>\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              @for (event of slot.events; track trackByEvent($index, event)) {\n              <!-- Spacer -->\n              @if (event.isSpacer) {\n              <div class=\"event-spacer\"></div>\n              }\n              <!-- Event -->\n              @if (!event.isSpacer) {\n              <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                (event-click)=\"eventClick.emit($event)\" [view]=\"view()\">\n                <!-- Drag Preview (Optional but nice) -->\n                <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n                <ng-template cdkDragPreview matchSize class=\"rlb-calendar-drag-preview\">\n                  <rlb-calendar-event [event]=\"event\" [view]=\"view()\" style=\"box-sizing: border-box;\">\n                  </rlb-calendar-event>\n                </ng-template>\n              </rlb-calendar-event>\n              }\n              }\n            </div>\n            <!-- Overflow (+N more) -->\n            @if (slot.hasOverflow) {\n            <div class=\"mt-1 small text-secondary text-center cursor-pointer p-1 rounded hover-bg\"\n              (click)=\"$event.stopPropagation(); eventContainerClick.emit(slot.overflowEvents)\">\n              +{{ slot.overflowCount }} more\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.has-interval{background-image:linear-gradient(to right,color-mix(in srgb,var(--interval-color) 12%,transparent) 0%,transparent 100%);border-left:3px solid var(--interval-color)!important}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }], headerRowRef: [{ type: i0.ViewChild, args: ['headerRow', { isSignal: true }] }] } });
 
 class CalendarDayGridComponent {
     constructor() {
         this.view = input.required(...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+        this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -3440,6 +3363,22 @@ class CalendarDayGridComponent {
             clearInterval(this.nowInterval);
         }
     }
+    getIntervalsForDay() {
+        const dayOfWeek = new DateTz$1(this.day()).dayOfWeek;
+        return this.intervals().filter(interval => interval.dayWeek === dayOfWeek);
+    }
+    getIntervalTop(interval) {
+        const seconds = interval.hourStart ?? 0;
+        return (seconds / 3600) * this.layout().rowHeight;
+    }
+    getIntervalHeight(interval) {
+        const start = interval.hourStart ?? 0;
+        const stop = interval.hourStop ?? 86400;
+        return ((stop - start) / 3600) * this.layout().rowHeight;
+    }
+    getIntervalColor(interval) {
+        return `var(--bs-${interval.color || 'success'})`;
+    }
     buildDayGrid(currentDate) {
         this.day.set(new DateTz$1(currentDate.timestamp, 'UTC'));
         this.startNowTimer();
@@ -3577,18 +3516,19 @@ class CalendarDayGridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarDayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarDayGridComponent, isStandalone: true, selector: "rlb-calendar-day-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarDayGridComponent, isStandalone: true, selector: "rlb-calendar-day-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container position-absolute w-100 h-100 top-0 start-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (interval of getIntervalsForDay(); track $index) {\n          <div class=\"calendar-interval position-absolute w-100\"\n            [style.top.px]=\"getIntervalTop(interval)\"\n            [style.height.px]=\"getIntervalHeight(interval)\"\n            [style.background-color]=\"getIntervalColor(interval)\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["event-click", "event-container-click"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarDayGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-day-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, DayOfWeekPipe], template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }] } });
+            args: [{ selector: 'rlb-calendar-day-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDropListGroup, CdkDropList, CalendarEventComponent, CdkDrag, CdkDragPlaceholder, DayOfWeekPipe], template: "@if (day()) {\n<div class=\"calendar-wrapper d-flex flex-column\">\n  <!--  HEADER WRAPPER -->\n  <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n  <!-- Mimicking structure of Week View but single column -->\n  <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout().minHeaderHeight\">\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n      <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day())\" [class.fw-bold]=\"isToday(day())\"\n        [class.bg-primary]=\"isToday(day())\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{\n          day() | dayOfWeek: 'long' }}</div>\n      </div>\n    </div>\n  </div>\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    [style.max-height.rem]=\"layout().maxBodyHeight\">\n    <div class=\"body-row d-flex position-relative\">\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots(); track time; let i = $index) {\n        <div class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout().rowHeight\">\n          @if (i !== 0) {\n          <span style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n          }\n        </div>\n        }\n      </div>\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots(); track time) {\n          <div class=\"grid-row border-bottom\" [style.height.px]=\"layout().rowHeight\">\n          </div>\n          }\n        </div>\n        <!-- Layer 1.5: Intervals (background highlights) -->\n        <div class=\"intervals-container position-absolute w-100 h-100 top-0 start-0\" style=\"z-index: 0; pointer-events: none;\">\n          @for (interval of getIntervalsForDay(); track $index) {\n          <div class=\"calendar-interval position-absolute w-100\"\n            [style.top.px]=\"getIntervalTop(interval)\"\n            [style.height.px]=\"getIntervalHeight(interval)\"\n            [style.background-color]=\"getIntervalColor(interval)\">\n          </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n            [cdkDropListData]=\"day()\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit(undefined)\">\n            @for (event of processedEvents(); track trackByEventId($index, event)) {\n            <rlb-calendar-event [view]=\"view()\" [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\" [style.left.%]=\"event.left\" [style.width.%]=\"event.width\"\n              (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\" cdkDrag\n              [cdkDragData]=\"event\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n            }\n            @if (isToday(day())) {\n            <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.calendar-interval{opacity:.1;pointer-events:none;border-radius:0}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }], scrollBodyRef: [{ type: i0.ViewChild, args: ['scrollBody', { isSignal: true }] }] } });
 
 class CalendarGrid {
     constructor() {
         this.view = input.required(...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
         this.events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+        this.intervals = input([], ...(ngDevMode ? [{ debugName: "intervals" }] : /* istanbul ignore next */ []));
         this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
         this.eventClick = output({ alias: 'event-click' });
         this.eventContainerClick = output({ alias: 'event-container-click' });
@@ -3596,7 +3536,7 @@ class CalendarGrid {
     }
     ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarGrid, isStandalone: true, selector: "rlb-calendar-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, ngImport: i0, template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n", styles: [""], dependencies: [{ kind: "component", type: CalendarWeekGridComponent, selector: "rlb-calendar-week-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "rlb-calendar-month-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarDayGridComponent, selector: "rlb-calendar-day-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarGrid, isStandalone: true, selector: "rlb-calendar-grid", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { eventClick: "event-click", eventContainerClick: "event-container-click", eventChange: "event-change" }, ngImport: i0, template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n", styles: [""], dependencies: [{ kind: "component", type: CalendarWeekGridComponent, selector: "rlb-calendar-week-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "rlb-calendar-month-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }, { kind: "component", type: CalendarDayGridComponent, selector: "rlb-calendar-day-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarGrid, decorators: [{
             type: Component,
@@ -3604,8 +3544,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CalendarWeekGridComponent,
                         CalendarMonthGridComponent,
                         CalendarDayGridComponent,
-                    ], template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }] } });
+                    ], template: "@switch (view()) {\n@case ('week') {\n<rlb-calendar-week-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('month') {\n<rlb-calendar-month-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@case ('day') {\n<rlb-calendar-day-grid [view]=\"view()\" [currentDate]=\"currentDate()\" [events]=\"events()\" [intervals]=\"intervals()\" [layout]=\"layout()\"\n  (event-click)=\"eventClick.emit($event)\" (event-container-click)=\"eventContainerClick.emit($event)\"\n  (event-change)=\"eventChange.emit($event)\" />\n}\n@default {\nnot implemented yet\n}\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], eventContainerClick: [{ type: i0.Output, args: ["event-container-click"] }], eventChange: [{ type: i0.Output, args: ["event-change"] }] } });
+
+class MonthFormatterPipe {
+    constructor() {
+        this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    }
+    transform(value) {
+        if (!value)
+            return '';
+        const parts = value.trim().split(' ');
+        if (parts.length < 2)
+            return value;
+        const day = parts[0];
+        const monthIndex = parseInt(parts[1], 10) - 1;
+        if (isNaN(monthIndex) || monthIndex < 0 || monthIndex > 11) {
+            return value;
+        }
+        const month = this.months[monthIndex];
+        const rest = parts.slice(2).join(' ');
+        return `${day} ${month}${rest ? ' ' + rest : ''}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MonthFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: MonthFormatterPipe, isStandalone: true, name: "monthFormatter" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MonthFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'monthFormatter' }]
+        }] });
+
+class CalendarHeaderComponent {
+    constructor() {
+        this.view = input('month', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        this.currentDate = input.required(...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
+        this.dateChange = output();
+        this.viewChange = output();
+    }
+    next() {
+        switch (this.view()) {
+            case 'week':
+                const nextWeek = addDays(this.currentDate(), 7);
+                this.dateChange.emit(new DateTz(nextWeek));
+                break;
+            case 'month':
+                const nextMonth = new DateTz(this.currentDate()).set(1, 'day').add(1, 'month');
+                this.dateChange.emit(new DateTz(nextMonth));
+                break;
+            case 'day':
+                const nextDay = addDays(this.currentDate(), 1);
+                this.dateChange.emit(new DateTz(nextDay));
+                break;
+            default:
+                break;
+        }
+    }
+    prev() {
+        switch (this.view()) {
+            case 'week':
+                const pastWeek = addDays(this.currentDate(), -7);
+                this.dateChange.emit(new DateTz(pastWeek));
+                break;
+            case 'month':
+                const pastMonth = new DateTz(this.currentDate()).set(1, 'day').add(-1, 'month');
+                this.dateChange.emit(new DateTz(pastMonth));
+                break;
+            case 'day':
+                const nextDay = addDays(this.currentDate(), -1);
+                this.dateChange.emit(new DateTz(nextDay));
+                break;
+            default:
+                break;
+        }
+    }
+    today() {
+        switch (this.view()) {
+            case 'week':
+            default:
+                const today = getToday();
+                this.dateChange.emit(today);
+                break;
+        }
+    }
+    setView(view) {
+        this.viewChange.emit(view);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CalendarHeaderComponent, isStandalone: true, selector: "rlb-calendar-header", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "li[rlb-dropdown-item]", inputs: ["active", "disabled", "header", "divider", "link", "text-wrap"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: MonthFormatterPipe, name: "monthFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rlb-calendar-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ButtonComponent,
+                        DropdownComponent,
+                        DropdownDirective,
+                        DropdownContainerComponent,
+                        DropdownMenuItemComponent,
+                        TitleCasePipe,
+                        DateTzPipe,
+                        MonthFormatterPipe,
+                    ], template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n\t<h5 class=\"mb-0\">{{ currentDate() | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate().timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view() | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"setView('day')\">Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"setView('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>" }]
+        }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: true }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }] } });
+
+const DEFAULT_CALENDAR_LAYOUT = {
+    rowHeight: 110,
+    maxBodyHeight: 30,
+    minHeaderHeight: 3.5
+};
 
 class ToastRegistryOptions {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastRegistryOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -3848,6 +3893,8 @@ class CalendarComponent {
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), alias: 'loading', transform: booleanAttribute });
         this.showToolbar = input(true, { ...(ngDevMode ? { debugName: "showToolbar" } : /* istanbul ignore next */ {}), alias: 'show-toolbar',
             transform: booleanAttribute });
+        this.intervals = input([], { ...(ngDevMode ? { debugName: "intervals" } : /* istanbul ignore next */ {}), alias: 'intervals' });
+        this.manageEvents = input(true, { ...(ngDevMode ? { debugName: "manageEvents" } : /* istanbul ignore next */ {}), alias: 'manage-events', transform: booleanAttribute });
         this.layout = input({}, { ...(ngDevMode ? { debugName: "layout" } : /* istanbul ignore next */ {}), alias: 'layout' });
         this.mergedLayout = computed(() => ({
             ...DEFAULT_CALENDAR_LAYOUT,
@@ -3856,6 +3903,7 @@ class CalendarComponent {
         this.dateChange = output({ alias: 'date-change' });
         this.viewChange = output({ alias: 'view-change' });
         this.eventClick = output({ alias: 'event-click' });
+        this.containerEventClick = output({ alias: 'container-event-click' });
     }
     // DnD event
     onEventChange(eventToEdit) {
@@ -3875,6 +3923,11 @@ class CalendarComponent {
         }
     }
     onEventContainerClick(events) {
+        if (events) {
+            this.containerEventClick.emit(events);
+        }
+        if (!this.manageEvents())
+            return;
         this.modals
             .openModal('rlb-calendar-overlow-events-container', {
             title: 'Overflow events',
@@ -3942,6 +3995,8 @@ class CalendarComponent {
         if (eventToEdit) {
             this.eventClick.emit(eventToEdit);
         }
+        if (!this.manageEvents())
+            return;
         this.openEditEventDialog(eventToEdit)
             .pipe(switchMap(modalResult => {
             const newEvent = modalResult.result;
@@ -4018,7 +4073,7 @@ class CalendarComponent {
             .pipe(take(1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }, { token: UniqueIdService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarComponent, isStandalone: true, selector: "rlb-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "current-date", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "show-toolbar", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", events: "eventsChange", currentDate: "current-dateChange", dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CalendarComponent, isStandalone: true, selector: "rlb-calendar", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "current-date", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "show-toolbar", isSignal: true, isRequired: false, transformFunction: null }, intervals: { classPropertyName: "intervals", publicName: "intervals", isSignal: true, isRequired: false, transformFunction: null }, manageEvents: { classPropertyName: "manageEvents", publicName: "manage-events", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", events: "eventsChange", currentDate: "current-dateChange", dateChange: "date-change", viewChange: "view-change", eventClick: "event-click", containerEventClick: "container-event-click" }, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [intervals]=\"intervals()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "intervals", "layout"], outputs: ["event-click", "event-container-click", "event-change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
@@ -4026,8 +4081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CalendarHeaderComponent,
                         ProgressComponent,
                         CalendarGrid,
-                    ], template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }, { type: i0.Output, args: ["eventsChange"] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "current-date", required: false }] }, { type: i0.Output, args: ["current-dateChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-toolbar", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], dateChange: [{ type: i0.Output, args: ["date-change"] }], viewChange: [{ type: i0.Output, args: ["view-change"] }], eventClick: [{ type: i0.Output, args: ["event-click"] }] } });
+                    ], template: "<div class=\"rlb-calendar\">\n\n  @if (showToolbar()) {\n    <rlb-calendar-header\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\"\n    >\n    </rlb-calendar-header>\n  }\n\n  @if (loading()) {\n    <rlb-progress [infinite]=\"true\" [animated]=\"true\" [height]=\"3\" [showValue]=\"false\">\n    </rlb-progress>\n  } @else {\n    <rlb-calendar-grid\n      [events]=\"events()\"\n      [intervals]=\"intervals()\"\n      [view]=\"view()\"\n      [currentDate]=\"currentDate()\"\n      [layout]=\"mergedLayout()\"\n      (event-click)=\"onEventClick($event)\"\n      (event-container-click)=\"onEventContainerClick($event)\"\n      (event-change)=\"onEventChange($event)\"\n    >\n    </rlb-calendar-grid>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }, { type: i0.Output, args: ["eventsChange"] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "current-date", required: false }] }, { type: i0.Output, args: ["current-dateChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-toolbar", required: false }] }], intervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "intervals", required: false }] }], manageEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "manage-events", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], dateChange: [{ type: i0.Output, args: ["date-change"] }], viewChange: [{ type: i0.Output, args: ["view-change"] }], eventClick: [{ type: i0.Output, args: ["event-click"] }], containerEventClick: [{ type: i0.Output, args: ["container-event-click"] }] } });
 
 const CALENDAR_COMPONENTS = [
     CalendarComponent,
@@ -6370,6 +6425,8 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableFlagIcons = input(true, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
+        this.detectLocale = input(false, { ...(ngDevMode ? { debugName: "detectLocale" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'detect-locale' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
@@ -7591,6 +7648,16 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
                 data: 'ZW',
             },
         ];
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
     }
     onEscape(event) {
         if (this.isOpen()) {
@@ -7598,6 +7665,11 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
+    }
     update(ev) {
         if (this.typingTimeout)
             clearTimeout(this.typingTimeout);
@@ -7616,16 +7688,33 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         }
         return `${d.text} (${d.value})`;
     }
-    manageSuggestions(query) {
-        if (query && query.length > 0) {
+    manageSuggestions(query, showAll = false) {
+        if (showAll || (query && query.length > 0)) {
             this.openDropdown();
-            const rawSuggestions = this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()) || c.value.includes(query));
-            this.suggestions.set(rawSuggestions);
+            let results = showAll && !query
+                ? this.getCountries()
+                : this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()) || c.value.includes(query));
+            if (this.detectLocale()) {
+                const code = this._localeCountryCode();
+                if (code) {
+                    const idx = results.findIndex(c => c.data === code);
+                    if (idx > 0)
+                        results = [results[idx], ...results.filter((_, i) => i !== idx)];
+                }
+            }
+            this.suggestions.set(results);
         }
         else {
             this.closeDropdown();
         }
     }
+    _localeCountryCode() {
+        const lang = navigator.languages?.[0] ?? navigator.language;
+        if (!lang)
+            return null;
+        const parts = lang.split('-');
+        return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : null;
+    }
     selectItem(item, ev) {
         ev?.preventDefault();
         ev?.stopPropagation();
@@ -7669,7 +7758,7 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteCountryDialCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryDialCodeComponent, isStandalone: true, selector: "rlb-autocomplete-country-dial-code", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryDialCodeComponent, isStandalone: true, selector: "rlb-autocomplete-country-dial-code", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null }, detectLocale: { classPropertyName: "detectLocale", publicName: "detect-locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -7684,6 +7773,7 @@ class AutocompleteCountryDialCodeComponent extends AbstractComponent {
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -7765,6 +7855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -7834,7 +7925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent, ProgressComponent],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], detectLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "detect-locale", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AutocompleteCountryComponent extends AbstractComponent {
     constructor() {
@@ -7854,6 +7945,8 @@ class AutocompleteCountryComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableFlagIcons = input(false, { ...(ngDevMode ? { debugName: "enableFlagIcons" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-flag-icons' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
+        this.detectLocale = input(false, { ...(ngDevMode ? { debugName: "detectLocale" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'detect-locale' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
@@ -8058,6 +8151,16 @@ class AutocompleteCountryComponent extends AbstractComponent {
             { text: 'Zambia', value: 'ZM' },
             { text: 'Zimbabwe', value: 'ZW' },
         ];
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
     }
     onEscape(event) {
         if (this.isOpen()) {
@@ -8065,6 +8168,11 @@ class AutocompleteCountryComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
+    }
     update(ev) {
         if (this.typingTimeout)
             clearTimeout(this.typingTimeout);
@@ -8083,16 +8191,33 @@ class AutocompleteCountryComponent extends AbstractComponent {
         }
         return d?.text;
     }
-    manageSuggestions(query) {
-        if (query && query.length > 0) {
+    manageSuggestions(query, showAll = false) {
+        if (showAll || (query && query.length > 0)) {
             this.openDropdown();
-            const rawSuggestions = this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()));
-            this.suggestions.set(rawSuggestions);
+            let results = showAll && !query
+                ? this.getCountries()
+                : this.getCountries().filter(c => c.text.toLowerCase().includes(query.toLowerCase()));
+            if (this.detectLocale()) {
+                const code = this._localeCountryCode();
+                if (code) {
+                    const idx = results.findIndex(c => c.value === code);
+                    if (idx > 0)
+                        results = [results[idx], ...results.filter((_, i) => i !== idx)];
+                }
+            }
+            this.suggestions.set(results);
         }
         else {
             this.closeDropdown();
         }
     }
+    _localeCountryCode() {
+        const lang = navigator.languages?.[0] ?? navigator.language;
+        if (!lang)
+            return null;
+        const parts = lang.split('-');
+        return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : null;
+    }
     selectItem(item, ev) {
         ev?.preventDefault();
         ev?.stopPropagation();
@@ -8139,7 +8264,7 @@ class AutocompleteCountryComponent extends AbstractComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteCountryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryComponent, isStandalone: true, selector: "rlb-autocomplete-country", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteCountryComponent, isStandalone: true, selector: "rlb-autocomplete-country", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableFlagIcons: { classPropertyName: "enableFlagIcons", publicName: "enable-flag-icons", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null }, detectLocale: { classPropertyName: "detectLocale", publicName: "detect-locale", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -8154,6 +8279,7 @@ class AutocompleteCountryComponent extends AbstractComponent {
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8224,6 +8350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8283,12 +8410,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableFlagIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-flag-icons", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], detectLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "detect-locale", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AutocompleteTimezonesComponent extends AbstractComponent {
     constructor() {
         super();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.dropdownTop = signal(0, ...(ngDevMode ? [{ debugName: "dropdownTop" }] : /* istanbul ignore next */ []));
+        this.dropdownLeft = signal(0, ...(ngDevMode ? [{ debugName: "dropdownLeft" }] : /* istanbul ignore next */ []));
+        this.dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
         this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
         this.hasSuggestions = computed(() => this.suggestions().length > 0, ...(ngDevMode ? [{ debugName: "hasSuggestions" }] : /* istanbul ignore next */ []));
         this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -8300,10 +8430,21 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
         this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.hostRef = inject((ElementRef));
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
     }
     onEscape(event) {
         if (this.isOpen()) {
@@ -8311,6 +8452,11 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
             this.el()?.nativeElement?.blur();
         }
     }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
+    }
     update(ev) {
         if (this.typingTimeout)
             clearTimeout(this.typingTimeout);
@@ -8323,11 +8469,13 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
     // We leave onWrite empty because [value]="value() || ''" in the template
     // handles the synchronization automatically in a Zoneless/Signal world.
     onWrite(data) { }
-    manageSuggestions(query) {
-        if (query && query.length > 0) {
+    manageSuggestions(query, showAll = false) {
+        if (showAll || (query && query.length > 0)) {
             this.openDropdown();
             const timezones = DateTz.timezones();
-            const filtered = timezones.filter(tz => tz.toLowerCase().includes(query.toLowerCase()));
+            const filtered = showAll && !query
+                ? timezones
+                : timezones.filter(tz => tz.toLowerCase().includes(query.toLowerCase()));
             this.suggestions.set(filtered.map(tz => ({ text: tz, value: tz })));
         }
         else {
@@ -8359,13 +8507,19 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
             this.closeDropdown();
     }
     openDropdown() {
+        const rect = this.el()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            this.dropdownTop.set(rect.bottom);
+            this.dropdownLeft.set(rect.left);
+            this.dropdownWidth.set(rect.width);
+        }
         this.isOpen.set(true);
     }
     closeDropdown() {
         this.isOpen.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteTimezonesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteTimezonesComponent, isStandalone: true, selector: "rlb-autocomplete-timezones", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteTimezonesComponent, isStandalone: true, selector: "rlb-autocomplete-timezones", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "handleOutsideEvent($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -8380,6 +8534,7 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8397,10 +8552,13 @@ class AutocompleteTimezonesComponent extends AbstractComponent {
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto shadow"
+          class="dropdown-menu show overflow-y-auto shadow"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center italic">No suggestions</a>
@@ -8448,6 +8606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [attr.placeholder]="placeholder()"
         [class.form-control-lg]="size() === 'large'"
         [class.form-control-sm]="size() === 'small'"
+        (focus)="onFocus()"
         (blur)="touch()"
         [ngClass]="{
           'is-invalid': controlTouched() && invalid() && enableValidation(),
@@ -8465,10 +8624,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       @if (isOpen()) {
         <div
           #autocomplete
-          class="dropdown-menu show w-100 position-absolute overflow-y-auto shadow"
+          class="dropdown-menu show overflow-y-auto shadow"
           [style.max-height.px]="maxHeight()"
           [style.max-width.px]="menuMaxWidth()"
-          style="z-index: 1000; top: 100%;"
+          [style.top.px]="dropdownTop()"
+          [style.left.px]="dropdownLeft()"
+          [style.width.px]="dropdownWidth()"
+          style="z-index: 1050; position: fixed;"
         >
           @if (!hasSuggestions()) {
             <a class="dropdown-item disabled text-center italic">No suggestions</a>
@@ -8504,7 +8666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent, ProgressComponent],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class AutocompleteComponent extends AbstractComponent {
     onDocumentPointerDown(event) {
@@ -8540,17 +8702,32 @@ class AutocompleteComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
         this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
         this.inputAutocomplete = input('off', ...(ngDevMode ? [{ debugName: "inputAutocomplete" }] : /* istanbul ignore next */ []));
+        this.openOnFocus = input(false, { ...(ngDevMode ? { debugName: "openOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'open-on-focus' });
         this.el = viewChild('field', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
         this.dropdown = viewChild('autocomplete', ...(ngDevMode ? [{ debugName: "dropdown" }] : /* istanbul ignore next */ []));
         this.selected = output();
         this.hostRef = inject((ElementRef));
         this.searchSubject = new Subject();
-        // Use RxJS for cleaner debouncing
         this.searchSubject
             .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed())
             .subscribe(val => {
             this.manageSuggestions(val);
         });
+        const destroyRef = inject(DestroyRef);
+        const onScroll = (event) => {
+            if (!this.isOpen())
+                return;
+            if (this.dropdown()?.nativeElement.contains(event.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', onScroll, { capture: true });
+        destroyRef.onDestroy(() => document.removeEventListener('scroll', onScroll, { capture: true }));
+    }
+    onFocus() {
+        if (this.openOnFocus() && !this.isOpen()) {
+            this.manageSuggestions('', true);
+        }
     }
     update(ev) {
         if (this.disabled())
@@ -8571,10 +8748,10 @@ class AutocompleteComponent extends AbstractComponent {
         //   }
         // }
     }
-    manageSuggestions(data) {
+    manageSuggestions(data, showAll = false) {
         // 1. Reset suggestions but keep dropdown state logic clean
         this.suggestions.set([]);
-        if (data && data.length >= this.charsToSearch()) {
+        if (showAll || (data && data.length >= this.charsToSearch())) {
             this.openDropdown();
             try {
                 const result = this.autocomplete()(data);
@@ -8668,7 +8845,7 @@ class AutocompleteComponent extends AbstractComponent {
         this.acLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteComponent, isStandalone: true, selector: "rlb-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, charsToSearch: { classPropertyName: "charsToSearch", publicName: "chars-to-search", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, inputAutocomplete: { classPropertyName: "inputAutocomplete", publicName: "inputAutocomplete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AutocompleteComponent, isStandalone: true, selector: "rlb-autocomplete", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "max-height", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, charsToSearch: { classPropertyName: "charsToSearch", publicName: "chars-to-search", isSignal: true, isRequired: false, transformFunction: null }, menuMaxWidth: { classPropertyName: "menuMaxWidth", publicName: "menu-max-width", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null }, inputAutocomplete: { classPropertyName: "inputAutocomplete", publicName: "inputAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, openOnFocus: { classPropertyName: "openOnFocus", publicName: "open-on-focus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.id": "null" } }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation position-relative">
       <input
@@ -8678,6 +8855,7 @@ class AutocompleteComponent extends AbstractComponent {
         [value]="getText(value())"
         (input)="update($event.target)"
         (keyup.enter)="onEnter($event.target)"
+        (focus)="onFocus()"
         (blur)="touch()"
         [id]="id()"
         [type]="type()"
@@ -8749,6 +8927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [value]="getText(value())"
         (input)="update($event.target)"
         (keyup.enter)="onEnter($event.target)"
+        (focus)="onFocus()"
         (blur)="touch()"
         [id]="id()"
         [type]="type()"
@@ -8813,7 +8992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, InputValidationComponent],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], charsToSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "chars-to-search", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], inputAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAutocomplete", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "max-height", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], charsToSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "chars-to-search", required: false }] }], menuMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu-max-width", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], inputAutocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAutocomplete", required: false }] }], openOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "open-on-focus", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], dropdown: [{ type: i0.ViewChild, args: ['autocomplete', { isSignal: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class CheckboxComponent extends AbstractComponent {
     setExtValidation(val) {