@open-rlb/ng-bootstrap 2.4.8 → 2.4.10

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, booleanAttribute, Input, Host, Self, Optional, Directive, Injectable, EventEmitter, ContentChild, Output, ContentChildren, ViewChild, numberAttribute, Pipe, ChangeDetectionStrategy, DOCUMENT, Inject, HostBinding, HostListener, ViewContainerRef, InjectionToken, ElementRef, ViewChildren, NgModule } from '@angular/core';
+import { Component, booleanAttribute, Input, Host, Self, Optional, Directive, Injectable, EventEmitter, ContentChild, Output, ContentChildren, ViewChild, numberAttribute, Pipe, ChangeDetectionStrategy, DOCUMENT, Inject, HostBinding, ViewContainerRef, InjectionToken, ElementRef, HostListener, ViewChildren, NgModule } from '@angular/core';
 import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Tooltip, Popover } from 'bootstrap';
 import * as i1 from '@angular/common';
 import { formatDate, CommonModule } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { Subject, of, take, filter, switchMap, map, startWith, takeUntil, Observable, lastValueFrom } from 'rxjs';
+import { Subject, of, map, shareReplay, take, filter, switchMap, startWith, takeUntil, Subscription, Observable, lastValueFrom } from 'rxjs';
 import * as i2$1 from '@angular/cdk/layout';
 import * as i2$2 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -2064,11 +2064,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: [ComponentHostDirective, { static: true }]
             }] } });
 
+class BreakpointService {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        /**
+         * Observable that emits true when the screen width is <= 992px.
+         * This corresponds to the BS992 breakpoint used in the sidebar.
+         */
+        this.isMobile$ = this.breakpointObserver
+            .observe(['(max-width: 992px)'])
+            .pipe(map((state) => state.matches), shareReplay(1));
+    }
+    /**
+     * Returns the current mobile state.
+     */
+    get isMobile() {
+        return this.breakpointObserver.isMatched('(max-width: 992px)');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointService, deps: [{ token: i2$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreakpointService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i2$1.BreakpointObserver }] });
+
 class ModalDirective {
-    constructor(el, renderer, innerModalService) {
+    constructor(el, renderer, innerModalService, breakpointService) {
         this.el = el;
         this.renderer = renderer;
         this.innerModalService = innerModalService;
+        this.breakpointService = breakpointService;
         this.triggerElement = null;
         this._openChange_f = (e) => {
             this.innerModalService.eventModal(e.type.replace('.bs.modal', ''), this._modalReason, this.id, this.instance?.result);
@@ -2128,6 +2156,10 @@ class ModalDirective {
         if (this.options?.size) {
             this.renderer.addClass(this.dialogElement, `modal-${this.options.size}`);
         }
+        const isFullscreenUndefined = this.options?.fullscreen === undefined;
+        if (isFullscreenUndefined && this.breakpointService.isMobile) {
+            this.renderer.addClass(this.dialogElement, `modal-fullscreen`);
+        }
         if (this.options?.fullscreen === true) {
             this.renderer.addClass(this.dialogElement, `modal-fullscreen`);
         }
@@ -2190,7 +2222,7 @@ class ModalDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: InnerModalService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: InnerModalService }, { token: BreakpointService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: ModalDirective, isStandalone: true, selector: "[rlb-modal]", inputs: { id: "id", instance: ["data-instance", "instance"], options: ["data-options", "options"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalDirective, decorators: [{
@@ -2199,7 +2231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: '[rlb-modal]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: InnerModalService }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: InnerModalService }, { type: BreakpointService }], propDecorators: { id: [{
                 type: Input,
                 args: [{ alias: 'id' }]
             }], instance: [{
@@ -2578,6 +2610,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+const DEFAULT_CALENDAR_LAYOUT = {
+    rowHeight: 110,
+    maxBodyHeight: 30,
+    minHeaderHeight: 3.5
+};
+
 function isSameDay(a, b) {
     return a.yearUTC === b.yearUTC &&
         a.monthUTC === b.monthUTC &&
@@ -2895,6 +2933,10 @@ class CalendarHeaderComponent {
                     .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;
         }
@@ -2911,6 +2953,10 @@ class CalendarHeaderComponent {
                     .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;
         }
@@ -3050,10 +3096,7 @@ class CalendarWeekGridComponent {
         this.timeSlots = [];
         this.processedEvents = new Map();
         this.scrollbarWidth = 0;
-        // CONFIG CONSTANTS
-        this.ROW_HEIGHT = 110; // px for a full hour slot
-        this.MAX_BODY_HEIGHT = 30; // rem
-        this.MIN_HEADER_HEIGHT = 3.5; // rem
+        // CONFIG CONSTANTS (Replaced by Layout Input)
         this.MAX_VISIBLE_COLUMNS = 4;
         this.SNAP_MINUTES = 15;
         // arrow function to keep "this" context
@@ -3103,7 +3146,7 @@ class CalendarWeekGridComponent {
         const originalTopPx = this.calculateEventTop(movedEvent);
         const dragDistancePx = event.distance.y;
         const newTopPx = originalTopPx + dragDistancePx;
-        const rawMinutesFromStart = (newTopPx / this.ROW_HEIGHT) * 60;
+        const rawMinutesFromStart = (newTopPx / this.layout.rowHeight) * 60;
         const snappedMinutes = Math.round(rawMinutesFromStart / this.SNAP_MINUTES) * this.SNAP_MINUTES;
         const validMinutes = Math.max(0, snappedMinutes);
         const newStart = new DateTz$1(newDay)
@@ -3130,17 +3173,17 @@ class CalendarWeekGridComponent {
         const startOfDay = new DateTz$1(event.start).set(0, 'hour').set(0, 'minute').stripSecMillis();
         const diffMs = event.start.timestamp - startOfDay.timestamp;
         const diffMinutes = diffMs / (1000 * 60);
-        return (diffMinutes / 60) * this.ROW_HEIGHT;
+        return (diffMinutes / 60) * this.layout.rowHeight;
     }
     calculateEventHeight(event) {
         const durationMs = event.end.timestamp - event.start.timestamp;
         const durationMinutes = durationMs / (1000 * 60);
-        return (durationMinutes / 60) * this.ROW_HEIGHT;
+        return (durationMinutes / 60) * this.layout.rowHeight;
     }
     getNowTop() {
         const hours = this.now.hour;
         const minutes = this.now.minute;
-        return ((hours * 60) + minutes) / 60 * this.ROW_HEIGHT;
+        return ((hours * 60) + minutes) / 60 * this.layout.rowHeight;
     }
     isToday(date) {
         return isToday(date);
@@ -3348,17 +3391,19 @@ class CalendarWeekGridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarWeekGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarWeekGridComponent, isStandalone: false, selector: "rlb-calendar-week-grid", inputs: { view: "view", currentDate: "currentDate", events: "events" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow\n       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]=\"MIN_HEADER_HEIGHT\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        <div *ngFor=\"let day of days\"\n             class=\"day-cell text-center p-2 border-end\"\n             [class.text-primary]=\"isToday(day)\"\n             [class.fw-bold]=\"isToday(day)\"\n             [class.bg-primary]=\"isToday(day)\"\n        >\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      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody\n       class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n       (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"MAX_BODY_HEIGHT\">\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        <div *ngFor=\"let time of timeSlots; let i = index\"\n             class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n             [style.height.px]=\"ROW_HEIGHT\">\n          <span *ngIf=\"i !== 0\" style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n        </div>\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          <div *ngFor=\"let time of timeSlots\"\n               class=\"grid-row border-bottom\"\n               [style.height.px]=\"ROW_HEIGHT\">\n          </div>\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 *ngFor=\"let day of days\"\n               class=\"day-column position-relative border-end h-100\"\n               cdkDropList\n               [cdkDropListSortingDisabled]=\"true\"\n               [cdkDropListData]=\"day\"\n               (cdkDropListDropped)=\"onEventDrop($event)\"\n               (click)=\"eventClick.emit()\"\n          >\n\n            <rlb-calendar-event\n              *ngFor=\"let event of getEventsForDay(day); trackBy: trackByEventId\"\n              [view]=\"view\"\n              [event]=\"event\"\n              [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\"\n              [style.left.%]=\"event.left\"\n              [style.width.%]=\"event.width\"\n              (eventClick)=\"eventClick.emit($event)\"\n              (eventContainerClick)=\"eventContainerClick.emit($event)\"\n              cdkDrag\n              [cdkDragData]=\"event\"\n              [cdkDragDisabled]=\"event.isOverflowIndicator\"\n              class=\"position-absolute\"\n            >\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n\n            <div *ngIf=\"isToday(day)\"\n                 class=\"now-line\"\n                 [style.top.px]=\"getNowTop()\">\n            </div>\n\n          </div>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarWeekGridComponent, isStandalone: false, selector: "rlb-calendar-week-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: 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        <div *ngFor=\"let day of days\" 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      </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        <div *ngFor=\"let time of timeSlots; let i = index\"\n          class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout.rowHeight\">\n          <span *ngIf=\"i !== 0\" style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n        </div>\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          <div *ngFor=\"let time of timeSlots\" class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n          </div>\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 *ngFor=\"let day of days\" class=\"day-column position-relative border-end h-100\" cdkDropList\n            [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n            (click)=\"eventClick.emit()\">\n\n            <rlb-calendar-event *ngFor=\"let event of getEventsForDay(day); trackBy: trackByEventId\" [view]=\"view\"\n              [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n              [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n              (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n              [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n\n            <div *ngIf=\"isToday(day)\" class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarWeekGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-week-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar-wrapper d-flex flex-column\">\n\n  <!--  HEADER WRAPPER -->\n  <div #headerRow\n       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]=\"MIN_HEADER_HEIGHT\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        <div *ngFor=\"let day of days\"\n             class=\"day-cell text-center p-2 border-end\"\n             [class.text-primary]=\"isToday(day)\"\n             [class.fw-bold]=\"isToday(day)\"\n             [class.bg-primary]=\"isToday(day)\"\n        >\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      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody\n       class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n       (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"MAX_BODY_HEIGHT\">\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        <div *ngFor=\"let time of timeSlots; let i = index\"\n             class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n             [style.height.px]=\"ROW_HEIGHT\">\n          <span *ngIf=\"i !== 0\" style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n        </div>\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          <div *ngFor=\"let time of timeSlots\"\n               class=\"grid-row border-bottom\"\n               [style.height.px]=\"ROW_HEIGHT\">\n          </div>\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 *ngFor=\"let day of days\"\n               class=\"day-column position-relative border-end h-100\"\n               cdkDropList\n               [cdkDropListSortingDisabled]=\"true\"\n               [cdkDropListData]=\"day\"\n               (cdkDropListDropped)=\"onEventDrop($event)\"\n               (click)=\"eventClick.emit()\"\n          >\n\n            <rlb-calendar-event\n              *ngFor=\"let event of getEventsForDay(day); trackBy: trackByEventId\"\n              [view]=\"view\"\n              [event]=\"event\"\n              [style.top.px]=\"calculateEventTop(event)\"\n              [style.height.px]=\"calculateEventHeight(event)\"\n              [style.left.%]=\"event.left\"\n              [style.width.%]=\"event.width\"\n              (eventClick)=\"eventClick.emit($event)\"\n              (eventContainerClick)=\"eventContainerClick.emit($event)\"\n              cdkDrag\n              [cdkDragData]=\"event\"\n              [cdkDragDisabled]=\"event.isOverflowIndicator\"\n              class=\"position-absolute\"\n            >\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n\n            <div *ngIf=\"isToday(day)\"\n                 class=\"now-line\"\n                 [style.top.px]=\"getNowTop()\">\n            </div>\n\n          </div>\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"] }]
+            args: [{ selector: 'rlb-calendar-week-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, 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        <div *ngFor=\"let day of days\" 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      </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        <div *ngFor=\"let time of timeSlots; let i = index\"\n          class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout.rowHeight\">\n          <span *ngIf=\"i !== 0\" style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n        </div>\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          <div *ngFor=\"let time of timeSlots\" class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n          </div>\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 *ngFor=\"let day of days\" class=\"day-column position-relative border-end h-100\" cdkDropList\n            [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n            (click)=\"eventClick.emit()\">\n\n            <rlb-calendar-event *ngFor=\"let event of getEventsForDay(day); trackBy: trackByEventId\" [view]=\"view\"\n              [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n              [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n              (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n              [cdkDragDisabled]=\"event.isOverflowIndicator\" class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n\n            <div *ngIf=\"isToday(day)\" class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { view: [{
                 type: Input
             }], currentDate: [{
                 type: Input
             }], events: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], eventClick: [{
                 type: Output
             }], eventContainerClick: [{
@@ -3373,6 +3418,271 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['headerRow', { static: false }]
             }] } });
 
+class CalendarDayGridComponent {
+    constructor(cd) {
+        this.cd = cd;
+        this.events = [];
+        this.eventClick = new EventEmitter();
+        this.eventContainerClick = new EventEmitter();
+        this.eventChange = new EventEmitter();
+        this.timeSlots = [];
+        this.processedEvents = [];
+        // CONFIG CONSTANTS (Replaced by Layout Input)
+        this.MAX_VISIBLE_COLUMNS = 10; // More columns allow in day view
+        this.SNAP_MINUTES = 15;
+        this.now = getToday();
+    }
+    ngOnChanges(changes) {
+        if (changes['view'] || changes['currentDate']) {
+            if (this.view === 'day') {
+                this.buildDayGrid(this.currentDate);
+                this.buildTimeSlots();
+            }
+        }
+        if (changes['events']) {
+            this.events = changes['events'].currentValue;
+        }
+        if (changes['events'] || changes['currentDate']) {
+            this.processAllEvents();
+        }
+    }
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
+    ngOnDestroy() {
+        this.stopNowTimer();
+    }
+    trackByEventId(index, item) {
+        return item.id;
+    }
+    onEventDrop(event) {
+        const movedEvent = event.item.data;
+        // For day view, the container data is the single day we are viewing
+        const newDay = this.day;
+        const originalTopPx = this.calculateEventTop(movedEvent);
+        const dragDistancePx = event.distance.y;
+        const newTopPx = originalTopPx + dragDistancePx;
+        const rawMinutesFromStart = (newTopPx / this.layout.rowHeight) * 60;
+        const snappedMinutes = Math.round(rawMinutesFromStart / this.SNAP_MINUTES) * this.SNAP_MINUTES;
+        const validMinutes = Math.max(0, snappedMinutes);
+        const newStart = new DateTz$1(newDay)
+            .set(0, 'hour')
+            .set(0, 'minute')
+            .add(validMinutes, 'minute')
+            .stripSecMillis();
+        const durationMs = movedEvent.end.timestamp - movedEvent.start.timestamp;
+        const newEnd = new DateTz$1(newStart.timestamp + durationMs).stripSecMillis();
+        if (newStart.timestamp !== movedEvent.start.timestamp) {
+            const updatedEvent = {
+                ...movedEvent,
+                start: newStart,
+                end: newEnd,
+            };
+            this.eventChange.emit(updatedEvent);
+        }
+    }
+    calculateEventTop(event) {
+        const startOfDay = new DateTz$1(this.day).set(0, 'hour').set(0, 'minute').stripSecMillis();
+        // Use event.start directly, but ensure we are calculating relative to THIS day
+        // If event starts on previous day, we should clamp?
+        // Logic from week grid handles "chunks", here we assume processAllEvents has given us the chunk for this day.
+        let eventStart = event.start;
+        if (eventStart.timestamp < startOfDay.timestamp) {
+            eventStart = startOfDay;
+        }
+        const diffMs = eventStart.timestamp - startOfDay.timestamp;
+        const diffMinutes = diffMs / (1000 * 60);
+        return (diffMinutes / 60) * this.layout.rowHeight;
+    }
+    calculateEventHeight(event) {
+        // If event continues to next day, visual end is midnight.
+        // Logic from week grid's 'processAllEvents' handled chunking, so here specific event chunk should be correct.
+        const durationMs = event.end.timestamp - event.start.timestamp;
+        const durationMinutes = durationMs / (1000 * 60);
+        return (durationMinutes / 60) * this.layout.rowHeight;
+    }
+    getNowTop() {
+        const hours = this.now.hour;
+        const minutes = this.now.minute;
+        return ((hours * 60) + minutes) / 60 * this.layout.rowHeight;
+    }
+    isToday(date) {
+        return isToday(date);
+    }
+    startNowTimer() {
+        this.stopNowTimer(); // clear existing if any
+        this.nowInterval = setInterval(() => {
+            this.now = getToday();
+            this.cd.detectChanges();
+        }, 60 * 1000); // every minute
+    }
+    stopNowTimer() {
+        if (this.nowInterval) {
+            clearInterval(this.nowInterval);
+        }
+    }
+    buildDayGrid(currentDate) {
+        this.day = new DateTz$1(currentDate.timestamp, 'UTC');
+        this.startNowTimer();
+    }
+    buildTimeSlots() {
+        const slots = [];
+        for (let h = 0; h < 24; h++) {
+            slots.push(`${h.toString().padStart(2, '0')}:00`);
+        }
+        this.timeSlots = slots;
+    }
+    isOverlapping(eventA, eventB) {
+        const startA = eventA.start.timestamp;
+        const endA = eventA.end.timestamp;
+        const startB = eventB.start.timestamp;
+        const endB = eventB.end.timestamp;
+        return startA < endB && startB < endA;
+    }
+    processAllEvents() {
+        if (!this.day)
+            return;
+        // Filter events for this day
+        const dayStart = new DateTz$1(this.day).set(0, 'hour').set(0, 'minute').stripSecMillis();
+        const dayEnd = new DateTz$1(this.day).set(0, 'hour').set(0, 'minute').add(1, 'day').stripSecMillis();
+        const dayEvents = [];
+        for (const event of this.events) {
+            // Check overlap with the day
+            if (event.end.timestamp > dayStart.timestamp && event.start.timestamp < dayEnd.timestamp) {
+                let visualStart = event.start;
+                let visualEnd = event.end;
+                let isContinuedBefore = false;
+                let isContinuedAfter = false;
+                if (visualStart.timestamp < dayStart.timestamp) {
+                    visualStart = dayStart;
+                    isContinuedBefore = true;
+                }
+                if (visualEnd.timestamp > dayEnd.timestamp) {
+                    visualEnd = dayEnd;
+                    isContinuedAfter = true;
+                }
+                dayEvents.push({
+                    ...event,
+                    start: visualStart,
+                    end: visualEnd,
+                    isContinuedBefore,
+                    isContinuedAfter,
+                    left: 0,
+                    width: 0
+                });
+            }
+        }
+        const sortedDayEvents = this.sortEventsStable(dayEvents);
+        const groups = this.groupEventsByConflicts(sortedDayEvents);
+        const eventsWithLayout = [];
+        for (const group of groups) {
+            const groupLayouts = this.resolveConflictGroupLayout(group);
+            eventsWithLayout.push(...groupLayouts);
+        }
+        this.processedEvents = eventsWithLayout;
+        this.cd.markForCheck();
+    }
+    groupEventsByConflicts(dayEvents) {
+        if (dayEvents.length === 0)
+            return [];
+        const groups = [];
+        const visited = new Map();
+        for (const event of dayEvents) {
+            if (visited.get(event))
+                continue;
+            const currentGroup = [];
+            const queue = [event];
+            visited.set(event, true);
+            while (queue.length > 0) {
+                const current = queue.shift();
+                currentGroup.push(current);
+                for (const other of dayEvents) {
+                    if (!visited.get(other) && this.isOverlapping(current, other)) {
+                        visited.set(other, true);
+                        queue.push(other);
+                    }
+                }
+            }
+            groups.push(currentGroup);
+        }
+        return groups;
+    }
+    resolveConflictGroupLayout(groupEvents) {
+        if (!groupEvents || groupEvents.length === 0)
+            return [];
+        const columns = [];
+        const columnLastEndTimes = [];
+        for (const event of groupEvents) {
+            let assignedCol = -1;
+            for (let i = 0; i < columnLastEndTimes.length; i++) {
+                if (columnLastEndTimes[i] <= event.start.timestamp) {
+                    assignedCol = i;
+                    break;
+                }
+            }
+            if (assignedCol === -1) {
+                assignedCol = columns.length;
+                columns.push([]);
+                columnLastEndTimes.push(0);
+            }
+            columns[assignedCol].push(event);
+            columnLastEndTimes[assignedCol] = event.end.timestamp;
+        }
+        const totalColumns = columns.length;
+        const resultEvents = [];
+        // All events share the width equally
+        // If needed we can expand visible max columns, but day view usually has space
+        const colWidth = 100 / Math.max(1, totalColumns);
+        columns.forEach((colEvents, colIndex) => {
+            colEvents.forEach(event => {
+                resultEvents.push({
+                    ...event,
+                    left: colIndex * colWidth,
+                    width: colWidth
+                });
+            });
+        });
+        return resultEvents;
+    }
+    sortEventsStable(events) {
+        return [...events].sort((a, b) => {
+            const diff = a.start.timestamp - b.start.timestamp;
+            if (diff !== 0)
+                return diff;
+            const durA = a.end.timestamp - a.start.timestamp;
+            const durB = b.end.timestamp - b.start.timestamp;
+            if (durB !== durA)
+                return durB - durA;
+            const idA = a.id ? a.id.toString() : a.title;
+            const idB = b.id ? b.id.toString() : b.title;
+            return idA.localeCompare(idB);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarDayGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarDayGridComponent, isStandalone: false, selector: "rlb-calendar-day-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-wrapper d-flex flex-column\" *ngIf=\"day\">\n\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)\"\n        [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{ day | dayOfWeek: 'long' }}</div>\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    [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        <div *ngFor=\"let time of timeSlots; let i = index\"\n          class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout.rowHeight\">\n          <span *ngIf=\"i !== 0\" style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n        </div>\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          <div *ngFor=\"let time of timeSlots\" class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n          </div>\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()\">\n\n            <rlb-calendar-event *ngFor=\"let event of processedEvents; trackBy: trackByEventId\" [view]=\"view\"\n              [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n              [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n              (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n              class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n\n            <div *ngIf=\"isToday(day)\" class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n\n          </div>\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}.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarDayGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rlb-calendar-day-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"calendar-wrapper d-flex flex-column\" *ngIf=\"day\">\n\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)\"\n        [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n        <div class=\"small text-uppercase text-body-secondary h-100 d-flex align-items-center justify-content-center\">{{ day | dayOfWeek: 'long' }}</div>\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    [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        <div *ngFor=\"let time of timeSlots; let i = index\"\n          class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n          [style.height.px]=\"layout.rowHeight\">\n          <span *ngIf=\"i !== 0\" style=\"transform: translateY(-50%)\">\n            {{ time }}\n          </span>\n        </div>\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          <div *ngFor=\"let time of timeSlots\" class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n          </div>\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()\">\n\n            <rlb-calendar-event *ngFor=\"let event of processedEvents; trackBy: trackByEventId\" [view]=\"view\"\n              [event]=\"event\" [style.top.px]=\"calculateEventTop(event)\" [style.height.px]=\"calculateEventHeight(event)\"\n              [style.left.%]=\"event.left\" [style.width.%]=\"event.width\" (eventClick)=\"eventClick.emit($event)\"\n              (eventContainerClick)=\"eventContainerClick.emit($event)\" cdkDrag [cdkDragData]=\"event\"\n              class=\"position-absolute\">\n              <div *cdkDragPlaceholder style=\"opacity: 0\"></div>\n            </rlb-calendar-event>\n\n            <div *ngIf=\"isToday(day)\" class=\"now-line\" [style.top.px]=\"getNowTop()\">\n            </div>\n\n          </div>\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}.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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { view: [{
+                type: Input
+            }], currentDate: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], eventClick: [{
+                type: Output
+            }], eventContainerClick: [{
+                type: Output
+            }], eventChange: [{
+                type: Output
+            }], scrollBodyRef: [{
+                type: ViewChild,
+                args: ['scrollBody', { static: false }]
+            }] } });
+
 const MAX_EVENTS_PER_CELL = 3;
 const DAYS_IN_GRID = 42; // 6 weeks * 7 days
 class CalendarMonthGridComponent {
@@ -3384,9 +3694,6 @@ class CalendarMonthGridComponent {
         this.scrollbarWidth = 0;
         this.weeks = [];
         this.weekDaysHeader = [];
-        this.MAX_BODY_HEIGHT = 30; // rem
-        this.MIN_ROW_HEIGHT = 110; // px for a full hour slot
-        this.MIN_HEADER_HEIGHT = 3.5; // rem
         this.onResize = () => {
             this.updateScrollbarWidth();
         };
@@ -3488,6 +3795,10 @@ class CalendarMonthGridComponent {
             });
             this.weeks.push(row);
         }
+        // Defer scrollbar calculation to after the view updates
+        setTimeout(() => {
+            this.updateScrollbarWidth();
+        });
     }
     /**
      * "Tetris" Algorithm:
@@ -3614,17 +3925,19 @@ class CalendarMonthGridComponent {
         this.eventChange.emit(updatedEvent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarMonthGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarMonthGridComponent, isStandalone: false, selector: "rlb-calendar-month-grid", inputs: { view: "view", currentDate: "currentDate", events: "events" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\" [style.max-height.rem]=\"MAX_BODY_HEIGHT\">\n\n  <!-- SCROLL CONTAINER -->\n  <div class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\">\n\n    <!-- 1. Header Row (Fixed) -->\n    <div class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary sticky-top\"\n         [style.min-height.rem]=\"MIN_HEADER_HEIGHT\">\n      <div *ngFor=\"let day of weekDaysHeader\"\n           class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\"\n      >\n        {{ day | dayOfWeek:'short' }}\n      </div>\n    </div>\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start overflow-y-auto min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        <div *ngFor=\"let week of weeks;\"\n             class=\"d-flex border-bottom min-h-row\"\n             style=\"flex: 1 0 auto;\"\n             [style.min-height.px]=\"MIN_ROW_HEIGHT\"\n        >\n\n          <div *ngFor=\"let slot of week;\"\n               class=\"flex-fill border-end p-1 d-flex flex-column position-relative\"\n               style=\"width: 0\"\n               [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n               cdkDropList\n               [cdkDropListData]=\"slot.date\"\n               (cdkDropListDropped)=\"onEventDrop($event)\"\n               (click)=\"eventClick.emit()\"\n          >\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\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              <ng-container *ngFor=\"let event of slot.events; trackBy: trackByEvent\">\n\n                <!-- Spacer -->\n                <div *ngIf=\"event.isSpacer\" class=\"event-spacer\"></div>\n\n                <!-- Event -->\n                <rlb-calendar-event\n                  *ngIf=\"!event.isSpacer\"\n                  [event]=\"event\"\n                  class=\"w-100\"\n                  cdkDrag\n                  [cdkDragData]=\"event\"\n                  (eventClick)=\"eventClick.emit($event)\"\n                  [view]=\"view\"\n                >\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\n                      [event]=\"event\"\n                      [view]=\"view\"\n                      style=\"box-sizing: border-box;\"\n                    >\n                    </rlb-calendar-event>\n                  </ng-template>\n                </rlb-calendar-event>\n\n              </ng-container>\n            </div>\n\n            <!-- Overflow (+N more) -->\n            <div *ngIf=\"slot.hasOverflow\"\n                 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          </div>\n\n        </div>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarMonthGridComponent, isStandalone: false, selector: "rlb-calendar-month-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, viewQueries: [{ propertyName: "scrollBodyRef", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "headerRowRef", first: true, predicate: ["headerRow"], descendants: true }], usesOnChanges: 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    <div *ngFor=\"let day of weekDaysHeader\"\n      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  </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\"\n    (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        <div *ngFor=\"let week of weeks;\" class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\"\n          [style.min-height.px]=\"layout.rowHeight\">\n\n\n          <div *ngFor=\"let slot of week;\" class=\"flex-fill border-end p-1 d-flex flex-column position-relative\"\n            style=\"width: 0\" [class.bg-light]=\"!isCurrentMonth(slot.date)\" cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit()\">\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\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              <ng-container *ngFor=\"let event of slot.events; trackBy: trackByEvent\">\n\n                <!-- Spacer -->\n                <div *ngIf=\"event.isSpacer\" class=\"event-spacer\"></div>\n\n                <!-- Event -->\n                <rlb-calendar-event *ngIf=\"!event.isSpacer\" [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                  (eventClick)=\"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              </ng-container>\n            </div>\n\n            <!-- Overflow (+N more) -->\n            <div *ngIf=\"slot.hasOverflow\"\n              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          </div>\n\n        </div>\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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.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: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$3.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "component", type: CalendarEventComponent, selector: "rlb-calendar-event", inputs: ["event", "view"], outputs: ["eventClick", "eventContainerClick"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: DayOfWeekPipe, name: "dayOfWeek" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarMonthGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-month-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column w-100 bg-body user-select-none month-view-root\" [style.max-height.rem]=\"MAX_BODY_HEIGHT\">\n\n  <!-- SCROLL CONTAINER -->\n  <div class=\"calendar-scroller flex-grow-1 overflow-auto bg-body position-relative\">\n\n    <!-- 1. Header Row (Fixed) -->\n    <div class=\"d-flex flex-shrink-0 border-bottom bg-body-tertiary sticky-top\"\n         [style.min-height.rem]=\"MIN_HEADER_HEIGHT\">\n      <div *ngFor=\"let day of weekDaysHeader\"\n           class=\"flex-fill text-center py-2 border-end fw-bold text-secondary text-uppercase w-0 my-auto h6\"\n      >\n        {{ day | dayOfWeek:'short' }}\n      </div>\n    </div>\n\n    <!-- 2. Grid Body (Scrollable) -->\n    <div class=\"d-flex flex-column flex-grow-1 border-start overflow-y-auto min-height-0\">\n\n      <div class=\"d-flex flex-column\" cdkDropListGroup>\n        <div *ngFor=\"let week of weeks;\"\n             class=\"d-flex border-bottom min-h-row\"\n             style=\"flex: 1 0 auto;\"\n             [style.min-height.px]=\"MIN_ROW_HEIGHT\"\n        >\n\n          <div *ngFor=\"let slot of week;\"\n               class=\"flex-fill border-end p-1 d-flex flex-column position-relative\"\n               style=\"width: 0\"\n               [class.bg-light]=\"!isCurrentMonth(slot.date)\"\n               cdkDropList\n               [cdkDropListData]=\"slot.date\"\n               (cdkDropListDropped)=\"onEventDrop($event)\"\n               (click)=\"eventClick.emit()\"\n          >\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\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              <ng-container *ngFor=\"let event of slot.events; trackBy: trackByEvent\">\n\n                <!-- Spacer -->\n                <div *ngIf=\"event.isSpacer\" class=\"event-spacer\"></div>\n\n                <!-- Event -->\n                <rlb-calendar-event\n                  *ngIf=\"!event.isSpacer\"\n                  [event]=\"event\"\n                  class=\"w-100\"\n                  cdkDrag\n                  [cdkDragData]=\"event\"\n                  (eventClick)=\"eventClick.emit($event)\"\n                  [view]=\"view\"\n                >\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\n                      [event]=\"event\"\n                      [view]=\"view\"\n                      style=\"box-sizing: border-box;\"\n                    >\n                    </rlb-calendar-event>\n                  </ng-template>\n                </rlb-calendar-event>\n\n              </ng-container>\n            </div>\n\n            <!-- Overflow (+N more) -->\n            <div *ngIf=\"slot.hasOverflow\"\n                 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          </div>\n\n        </div>\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"] }]
+            args: [{ selector: 'rlb-calendar-month-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, 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    <div *ngFor=\"let day of weekDaysHeader\"\n      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  </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\"\n    (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        <div *ngFor=\"let week of weeks;\" class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\"\n          [style.min-height.px]=\"layout.rowHeight\">\n\n\n          <div *ngFor=\"let slot of week;\" class=\"flex-fill border-end p-1 d-flex flex-column position-relative\"\n            style=\"width: 0\" [class.bg-light]=\"!isCurrentMonth(slot.date)\" cdkDropList [cdkDropListData]=\"slot.date\"\n            (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit()\">\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\n            <!-- Events Stack -->\n            <div class=\"d-flex flex-column gap-1 w-100\">\n              <ng-container *ngFor=\"let event of slot.events; trackBy: trackByEvent\">\n\n                <!-- Spacer -->\n                <div *ngIf=\"event.isSpacer\" class=\"event-spacer\"></div>\n\n                <!-- Event -->\n                <rlb-calendar-event *ngIf=\"!event.isSpacer\" [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                  (eventClick)=\"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              </ng-container>\n            </div>\n\n            <!-- Overflow (+N more) -->\n            <div *ngIf=\"slot.hasOverflow\"\n              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          </div>\n\n        </div>\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: Input
             }], currentDate: [{
                 type: Input
             }], events: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], eventClick: [{
                 type: Output
             }], eventContainerClick: [{
@@ -3651,17 +3964,19 @@ class CalendarGrid {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarGrid, isStandalone: false, selector: "rlb-calendar-grid", inputs: { view: "view", currentDate: "currentDate", events: "events" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"view\">\n\t<ng-container *ngSwitchCase=\"'week'\">\n    <rlb-calendar-week-grid\n      [view]=\"view\"\n      [currentDate]=\"currentDate\"\n      [events]=\"events\"\n      (eventClick)=\"eventClick.emit($event)\"\n      (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\"\n    />\n\t</ng-container>\n  <ng-container *ngSwitchCase=\"'month'\">\n    <rlb-calendar-month-grid\n      [view]=\"view\"\n      [currentDate]=\"currentDate\"\n      [events]=\"events\"\n      (eventClick)=\"eventClick.emit($event)\"\n      (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\"\n    />\n  </ng-container>\n\t<ng-container *ngSwitchDefault>\n\t\tnot implemented yet\n\t</ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CalendarWeekGridComponent, selector: "rlb-calendar-week-grid", inputs: ["view", "currentDate", "events"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "rlb-calendar-month-grid", inputs: ["view", "currentDate", "events"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarGrid, isStandalone: false, selector: "rlb-calendar-grid", inputs: { view: "view", currentDate: "currentDate", events: "events", layout: "layout" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick", eventChange: "eventChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'week'\">\n    <rlb-calendar-week-grid [view]=\"view\" [currentDate]=\"currentDate\" [events]=\"events\" [layout]=\"layout\"\n      (eventClick)=\"eventClick.emit($event)\" (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\" />\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'month'\">\n    <rlb-calendar-month-grid [view]=\"view\" [currentDate]=\"currentDate\" [events]=\"events\" [layout]=\"layout\"\n      (eventClick)=\"eventClick.emit($event)\" (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\" />\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'day'\">\n    <rlb-calendar-day-grid [view]=\"view\" [currentDate]=\"currentDate\" [events]=\"events\" [layout]=\"layout\"\n      (eventClick)=\"eventClick.emit($event)\" (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\" />\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    not implemented yet\n  </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: CalendarWeekGridComponent, selector: "rlb-calendar-week-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }, { kind: "component", type: CalendarDayGridComponent, selector: "rlb-calendar-day-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }, { kind: "component", type: CalendarMonthGridComponent, selector: "rlb-calendar-month-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarGrid, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-grid', standalone: false, template: "<ng-container [ngSwitch]=\"view\">\n\t<ng-container *ngSwitchCase=\"'week'\">\n    <rlb-calendar-week-grid\n      [view]=\"view\"\n      [currentDate]=\"currentDate\"\n      [events]=\"events\"\n      (eventClick)=\"eventClick.emit($event)\"\n      (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\"\n    />\n\t</ng-container>\n  <ng-container *ngSwitchCase=\"'month'\">\n    <rlb-calendar-month-grid\n      [view]=\"view\"\n      [currentDate]=\"currentDate\"\n      [events]=\"events\"\n      (eventClick)=\"eventClick.emit($event)\"\n      (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\"\n    />\n  </ng-container>\n\t<ng-container *ngSwitchDefault>\n\t\tnot implemented yet\n\t</ng-container>\n</ng-container>\n" }]
+            args: [{ selector: 'rlb-calendar-grid', standalone: false, template: "<ng-container [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'week'\">\n    <rlb-calendar-week-grid [view]=\"view\" [currentDate]=\"currentDate\" [events]=\"events\" [layout]=\"layout\"\n      (eventClick)=\"eventClick.emit($event)\" (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\" />\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'month'\">\n    <rlb-calendar-month-grid [view]=\"view\" [currentDate]=\"currentDate\" [events]=\"events\" [layout]=\"layout\"\n      (eventClick)=\"eventClick.emit($event)\" (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\" />\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'day'\">\n    <rlb-calendar-day-grid [view]=\"view\" [currentDate]=\"currentDate\" [events]=\"events\" [layout]=\"layout\"\n      (eventClick)=\"eventClick.emit($event)\" (eventContainerClick)=\"eventContainerClick.emit($event)\"\n      (eventChange)=\"eventChange.emit($event)\" />\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    not implemented yet\n  </ng-container>\n</ng-container>" }]
         }], ctorParameters: () => [], propDecorators: { view: [{
                 type: Input
             }], currentDate: [{
                 type: Input
             }], events: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], eventClick: [{
                 type: Output
             }], eventContainerClick: [{
@@ -3679,6 +3994,8 @@ class CalendarComponent {
         this.events = [];
         this.loading = false;
         this.showToolbar = true;
+        this.layout = {};
+        this.mergedLayout = DEFAULT_CALENDAR_LAYOUT;
         this.dateChange = new EventEmitter();
         this.viewChange = new EventEmitter();
         this.eventClick = new EventEmitter();
@@ -3694,6 +4011,9 @@ class CalendarComponent {
         if (changes['events']) {
             this.events = changes['events'].currentValue;
         }
+        if (changes['layout']) {
+            this.mergedLayout = { ...DEFAULT_CALENDAR_LAYOUT, ...this.layout };
+        }
     }
     // DnD event
     onEventChange(eventToEdit) {
@@ -3944,11 +4264,11 @@ class CalendarComponent {
         }).pipe(take(1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarComponent, deps: [{ token: ModalService }, { token: UniqueIdService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: CalendarComponent, isStandalone: false, selector: "rlb-calendar", inputs: { view: "view", events: "events", currentDate: ["current-date", "currentDate"], loading: ["loading", "loading", booleanAttribute], showToolbar: ["show-toolbar", "showToolbar", booleanAttribute] }, outputs: { dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\t<div class=\"my-3 d-flex align-items-center justify-content-between\">\n    <button class=\"ms-auto\" rlb-button outline (click)=\"generateTestEvents()\">Generate events</button>\n\t</div>\n\t<rlb-calendar-header\n\t\t*ngIf=\"showToolbar\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n\t\t(viewChange)=\"setView($event)\"\n\t\t(dateChange)=\"setDate($event)\">\n\t</rlb-calendar-header>\n\n\t<rlb-calendar-grid\n\t\t[events]=\"events\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n    (eventClick)=\"onEventClick($event)\"\n    (eventContainerClick)=\"onEventContainerClick($event)\"\n    (eventChange)=\"onEventChange($event)\"\n  >\n\t</rlb-calendar-grid>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: CalendarComponent, isStandalone: false, selector: "rlb-calendar", inputs: { view: "view", events: "events", currentDate: ["current-date", "currentDate", (d) => new DateTz(d)], loading: ["loading", "loading", booleanAttribute], showToolbar: ["show-toolbar", "showToolbar", booleanAttribute], layout: "layout" }, outputs: { dateChange: "date-change", viewChange: "view-change", eventClick: "event-click" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rlb-calendar\">\n\t<div class=\"my-3 d-flex align-items-center justify-content-between\">\n    <button class=\"ms-auto\" rlb-button outline (click)=\"generateTestEvents()\">Generate events</button>\n\t</div>\n\t<rlb-calendar-header\n\t\t*ngIf=\"showToolbar\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n\t\t(viewChange)=\"setView($event)\"\n\t\t(dateChange)=\"setDate($event)\">\n\t</rlb-calendar-header>\n\n\t<rlb-calendar-grid\n\t\t[events]=\"events\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n    [layout]=\"mergedLayout\"\n    (eventClick)=\"onEventClick($event)\"\n    (eventContainerClick)=\"onEventContainerClick($event)\"\n    (eventChange)=\"onEventChange($event)\"\n  >\n\t</rlb-calendar-grid>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: CalendarHeaderComponent, selector: "rlb-calendar-header", inputs: ["view", "currentDate"], outputs: ["dateChange", "viewChange"] }, { kind: "component", type: CalendarGrid, selector: "rlb-calendar-grid", inputs: ["view", "currentDate", "events", "layout"], outputs: ["eventClick", "eventContainerClick", "eventChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rlb-calendar", standalone: false, template: "<div class=\"rlb-calendar\">\n\t<div class=\"my-3 d-flex align-items-center justify-content-between\">\n    <button class=\"ms-auto\" rlb-button outline (click)=\"generateTestEvents()\">Generate events</button>\n\t</div>\n\t<rlb-calendar-header\n\t\t*ngIf=\"showToolbar\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n\t\t(viewChange)=\"setView($event)\"\n\t\t(dateChange)=\"setDate($event)\">\n\t</rlb-calendar-header>\n\n\t<rlb-calendar-grid\n\t\t[events]=\"events\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n    (eventClick)=\"onEventClick($event)\"\n    (eventContainerClick)=\"onEventContainerClick($event)\"\n    (eventChange)=\"onEventChange($event)\"\n  >\n\t</rlb-calendar-grid>\n</div>\n" }]
+            args: [{ selector: "rlb-calendar", standalone: false, template: "<div class=\"rlb-calendar\">\n\t<div class=\"my-3 d-flex align-items-center justify-content-between\">\n    <button class=\"ms-auto\" rlb-button outline (click)=\"generateTestEvents()\">Generate events</button>\n\t</div>\n\t<rlb-calendar-header\n\t\t*ngIf=\"showToolbar\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n\t\t(viewChange)=\"setView($event)\"\n\t\t(dateChange)=\"setDate($event)\">\n\t</rlb-calendar-header>\n\n\t<rlb-calendar-grid\n\t\t[events]=\"events\"\n\t\t[view]=\"view\"\n\t\t[currentDate]=\"currentDate\"\n    [layout]=\"mergedLayout\"\n    (eventClick)=\"onEventClick($event)\"\n    (eventContainerClick)=\"onEventContainerClick($event)\"\n    (eventChange)=\"onEventChange($event)\"\n  >\n\t</rlb-calendar-grid>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{
                 type: Input,
                 args: [{ alias: 'view' }]
@@ -3957,13 +4277,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: [{ alias: 'events' }]
             }], currentDate: [{
                 type: Input,
-                args: [{ alias: 'current-date' }]
+                args: [{ alias: 'current-date', transform: (d) => new DateTz(d) }]
             }], loading: [{
                 type: Input,
                 args: [{ alias: 'loading', transform: booleanAttribute }]
             }], showToolbar: [{
                 type: Input,
                 args: [{ alias: 'show-toolbar', transform: booleanAttribute }]
+            }], layout: [{
+                type: Input,
+                args: [{ alias: 'layout' }]
             }], dateChange: [{
                 type: Output,
                 args: ['date-change']
@@ -3980,6 +4303,7 @@ const CALENDAR_COMPONENTS = [
     CalendarHeaderComponent,
     CalendarGrid,
     CalendarWeekGridComponent,
+    CalendarDayGridComponent,
     CalendarMonthGridComponent,
     CalendarEventComponent
 ];
@@ -5271,11 +5595,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['scroll-change']
             }] } });
 
+class SidebarService {
+    constructor() {
+        this.itemClickedSource = new Subject();
+        this.itemClicked$ = this.itemClickedSource.asObservable();
+    }
+    notifyItemClicked() {
+        this.itemClickedSource.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class SidebarItemComponent {
-    constructor(viewContainerRef, uniqueIdService, router) {
+    constructor(viewContainerRef, uniqueIdService, router, sidebarService) {
         this.viewContainerRef = viewContainerRef;
         this.uniqueIdService = uniqueIdService;
         this.router = router;
+        this.sidebarService = sidebarService;
         this.click = new EventEmitter();
         this._id = '';
     }
@@ -5288,8 +5631,11 @@ class SidebarItemComponent {
     onItemClick(event) {
         event.stopPropagation();
         this.click.emit(event);
+        if (!this.title && (!this.children || this.children.length === 0)) {
+            this.sidebarService.notifyItemClicked();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i0.ViewContainerRef }, { token: UniqueIdService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i0.ViewContainerRef }, { token: UniqueIdService }, { token: i2.Router }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SidebarItemComponent, isStandalone: false, selector: "rlb-sidebar-item", inputs: { title: "title", icon: "icon", label: "label", link: "link", badgeCounter: "badgeCounter" }, outputs: { click: "click" }, queries: [{ propertyName: "children", predicate: SidebarItemComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }, { propertyName: "collapseComponent", first: true, predicate: CollapseComponent, descendants: true }], ngImport: i0, template: `
 		<ng-template #template>
       <li *ngIf="title" (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
@@ -5361,7 +5707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 	`,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: UniqueIdService }, { type: i2.Router }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: UniqueIdService }, { type: i2.Router }, { type: SidebarService }], propDecorators: { title: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -5467,15 +5813,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Sidebar component
  */
 class SidebarComponent {
-    onResize() {
-        this.checkBreakpoint();
-    }
-    constructor() {
+    constructor(sidebarService, breakpointService) {
+        this.sidebarService = sidebarService;
+        this.breakpointService = breakpointService;
         this.isCollapsed = false;
+        this.subscription = new Subscription();
         this.rounded = false;
     }
     ngOnInit() {
-        this.checkBreakpoint();
+        this.subscription.add(this.breakpointService.isMobile$.subscribe((isMobile) => {
+            this.setCollapsed(isMobile);
+        }));
+        this.subscription.add(this.sidebarService.itemClicked$.subscribe(() => {
+            if (this.breakpointService.isMobile) {
+                this.setCollapsed(true);
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
     toggleSidebar() {
         this.setCollapsed(!this.isCollapsed);
@@ -5487,12 +5843,8 @@ class SidebarComponent {
         content?.classList.toggle('expanded', collapsed);
         sidebar?.classList.toggle('collapsed', collapsed);
     }
-    checkBreakpoint() {
-        const shouldCollapse = window.innerWidth <= 992;
-        this.setCollapsed(shouldCollapse);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { rounded: "rounded" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarComponent, deps: [{ token: SidebarService }, { token: BreakpointService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { rounded: "rounded" }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
 		<div class="vertical-menu" [class.rounded-2]="rounded">
 			<div id="sidebar-menu" class="w-100 h-100 overflow-y-auto">
 				<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
@@ -5535,15 +5887,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 	`,
                     standalone: false
                 }]
-        }], ctorParameters: () => [], propDecorators: { sideMenu: [{
+        }], ctorParameters: () => [{ type: SidebarService }, { type: BreakpointService }], propDecorators: { sideMenu: [{
                 type: ViewChild,
                 args: ['sideMenu']
             }], rounded: [{
                 type: Input,
                 args: [{ alias: 'rounded', required: false }]
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
             }] } });
 
 class TabContentComponent {
@@ -6534,6 +6883,7 @@ class DataTableComponent {
         this.currentPageChange = new EventEmitter();
         this.pageSizeChange = new EventEmitter();
         this.pagination = new EventEmitter();
+        this.MAX_VISIBLE_PAGES = 7;
     }
     ngOnInit() {
         if (this.currentPage == null) {
@@ -6550,6 +6900,27 @@ class DataTableComponent {
         return (this.rows?.toArray()?.some((o) => o.hasActions) ||
             this.showActions !== 'row');
     }
+    get visiblePages() {
+        const total = this.pages;
+        const current = this.currentPage || 1;
+        const pages = [];
+        if (total <= this.MAX_VISIBLE_PAGES) {
+            for (let i = 1; i <= total; i++)
+                pages.push(i);
+        }
+        else {
+            if (current <= 4) {
+                pages.push(1, 2, 3, 4, 5, '...', total);
+            }
+            else if (current >= total - 3) {
+                pages.push(1, '...', total - 4, total - 3, total - 2, total - 1, total);
+            }
+            else {
+                pages.push(1, '...', current - 1, current, current + 1, '...', total);
+            }
+        }
+        return pages;
+    }
     ngAfterViewInit() {
         this._renderHeaders();
     }
@@ -6604,7 +6975,7 @@ class DataTableComponent {
     selectPage(ev, page) {
         ev?.preventDefault();
         ev?.stopPropagation();
-        if (page === this.currentPage || this.loading)
+        if (typeof page !== 'number' || page === this.currentPage || this.loading)
             return;
         this.currentPageChange.emit(page);
         this.pagination.emit({ page, size: this.pageSize ? parseInt(this.pageSize) : 20 });
@@ -6632,17 +7003,17 @@ class DataTableComponent {
         });
     }
     onPgWeel(ev) {
-        ev.preventDefault();
-        const t = ev.target;
-        const c = t.parentElement?.parentElement;
-        c?.scrollBy({ left: ev.deltaY < 0 ? -15 : 15 });
+        // ev.preventDefault();
+        // const t = ev.target as HTMLElement;
+        // const c = t.parentElement?.parentElement
+        // c?.scrollBy({ left: ev.deltaY < 0 ? -15 : 15 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: "title", creationStrategy: ["creation-strategy", "creationStrategy"], creationUrl: ["creation-url", "creationUrl"], items: "items", paginationMode: ["pagination-mode", "paginationMode"], loading: ["loading", "loading", booleanAttribute], tableHover: ["table-hover", "tableHover", booleanAttribute], tableStriped: ["table-striped", "tableStriped", booleanAttribute], tableStripedColumns: ["table-striped-columns", "tableStripedColumns", booleanAttribute], tableBordered: ["table-bordered", "tableBordered", booleanAttribute], tableBorderless: ["table-borderless", "tableBorderless", booleanAttribute], tableSmall: ["table-small", "tableSmall", booleanAttribute], showRefresh: ["show-refresh", "showRefresh", booleanAttribute], totalItems: ["total-items", "totalItems", numberAttribute], currentPage: ["current-page", "currentPage", numberAttribute], pageSize: ["page-size", "pageSize", numberAttribute], showActions: "showActions", loadMoreLabel: "loadMoreLabel" }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent }, { propertyName: "columns", predicate: DataTableHeaderComponent }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n  <div class=\"col\">\n    <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n    <ng-container *ngIf=\"showRefresh\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n        [disabled]=\"loading\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'page'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'modal'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n  </div>\n</div>\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n        <span class=\"float-end pe-2\">\n          Actions\n        </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n\t\t\t\t\t\t<ul class=\"pagination float-end pagination-sm\">\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n\t\t\t\t\t\t\t\t\t (click)=\"prev($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&laquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<span class=\"d-flex overflow-x-hidden overflow-y-hidden\" (wheel)=\"onPgWeel($event)\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 200px;\">\n                <ng-container *ngFor=\"let page of [].constructor(pages); let i = index\">\n                  <li class=\"page-item\" [class.active]=\"currentPage === i+1\">\n                    <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, i+1)\">{{i+1}}</a>\n                  </li>\n                </ng-container>\n              </span>\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n\t\t\t\t\t\t\t\t\t (click)=\"next($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&raquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }, { kind: "component", type: DataTableRowComponent, selector: "rlb-dt-row", inputs: ["class", "style"], outputs: ["rowClick"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: DataTableComponent, isStandalone: false, selector: "rlb-dt-table", inputs: { title: "title", creationStrategy: ["creation-strategy", "creationStrategy"], creationUrl: ["creation-url", "creationUrl"], items: "items", paginationMode: ["pagination-mode", "paginationMode"], loading: ["loading", "loading", booleanAttribute], tableHover: ["table-hover", "tableHover", booleanAttribute], tableStriped: ["table-striped", "tableStriped", booleanAttribute], tableStripedColumns: ["table-striped-columns", "tableStripedColumns", booleanAttribute], tableBordered: ["table-bordered", "tableBordered", booleanAttribute], tableBorderless: ["table-borderless", "tableBorderless", booleanAttribute], tableSmall: ["table-small", "tableSmall", booleanAttribute], showRefresh: ["show-refresh", "showRefresh", booleanAttribute], totalItems: ["total-items", "totalItems", numberAttribute], currentPage: ["current-page", "currentPage", numberAttribute], pageSize: ["page-size", "pageSize", numberAttribute], showActions: "showActions", loadMoreLabel: "loadMoreLabel" }, outputs: { createItem: "create-item", refreshItem: "refresh-item", loadMore: "load-more", currentPageChange: "current-pageChange", pageSizeChange: "page-sizeChange", pagination: "pagination" }, queries: [{ propertyName: "rows", predicate: DataTableRowComponent }, { propertyName: "columns", predicate: DataTableHeaderComponent }], viewQueries: [{ propertyName: "_projectedDisplayColumns", first: true, predicate: ["projectedDisplayColumns"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n  <div class=\"col\">\n    <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n    <ng-container *ngIf=\"showRefresh\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n        [disabled]=\"loading\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'page'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'modal'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n  </div>\n</div>\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n        <span class=\"float-end pe-2\">\n          Actions\n        </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n            <ul class=\"pagination float-end pagination-sm\">\n              <li class=\"page-item\">\n                <a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n                   (click)=\"prev($event)\">\n                  <span aria-hidden=\"true\">&laquo;</span>\n                </a>\n              </li>\n\n              <ng-container *ngFor=\"let page of visiblePages\">\n                <li class=\"page-item\"\n                    [class.active]=\"currentPage === page\"\n                    [class.disabled]=\"page === '...'\">\n                  <a class=\"page-link d-block\"\n                     href=\"#\"\n                     (click)=\"selectPage($event, page)\">\n                    {{ page }}\n                  </a>\n                </li>\n              </ng-container>\n\n              <li class=\"page-item\">\n                <a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n                   (click)=\"next($event)\">\n                  <span aria-hidden=\"true\">&raquo;</span>\n                </a>\n              </li>\n            </ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }, { kind: "component", type: DataTableRowComponent, selector: "rlb-dt-row", inputs: ["class", "style"], outputs: ["rowClick"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-dt-table', standalone: false, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n  <div class=\"col\">\n    <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n    <ng-container *ngIf=\"showRefresh\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n        [disabled]=\"loading\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'page'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'modal'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n  </div>\n</div>\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n        <span class=\"float-end pe-2\">\n          Actions\n        </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n\t\t\t\t\t\t<ul class=\"pagination float-end pagination-sm\">\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n\t\t\t\t\t\t\t\t\t (click)=\"prev($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&laquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<span class=\"d-flex overflow-x-hidden overflow-y-hidden\" (wheel)=\"onPgWeel($event)\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"max-width: 200px;\">\n                <ng-container *ngFor=\"let page of [].constructor(pages); let i = index\">\n                  <li class=\"page-item\" [class.active]=\"currentPage === i+1\">\n                    <a class=\"page-link d-block\" href=\"#\" (click)=\"selectPage($event, i+1)\">{{i+1}}</a>\n                  </li>\n                </ng-container>\n              </span>\n\t\t\t\t\t\t\t<li class=\"page-item\">\n\t\t\t\t\t\t\t\t<a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n\t\t\t\t\t\t\t\t\t (click)=\"next($event)\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&raquo;</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\n" }]
+            args: [{ selector: 'rlb-dt-table', standalone: false, template: "<div class=\"row\" *ngIf=\"creationStrategy !== 'none' || title || showRefresh\">\n  <div class=\"col\">\n    <h3 *ngIf=\"title\" class=\"float-start\">{{ title }}</h3>\n    <ng-container *ngIf=\"showRefresh\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"refreshItem.emit()\"\n        [disabled]=\"loading\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'page'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" [routerLink]=\"creationUrl\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n    <ng-container *ngIf=\"creationStrategy === 'modal'\">\n      <button type=\"button\" class=\"btn btn-outline-primary float-end mb-2 me-3\" (click)=\"createItem.emit()\">\n        <i class=\"fa-solid fa-plus\"></i>\n      </button>\n    </ng-container>\n  </div>\n</div>\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n\t\t<thead>\n\t\t<tr>\n\t\t\t<ng-container #projectedDisplayColumns></ng-container>\n\t\t\t<th *ngIf=\"hasActions\">\n        <span class=\"float-end pe-2\">\n          Actions\n        </span>\n\t\t\t</th>\n\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t<ng-content *ngIf=\"!loading\" select=\"rlb-dt-row\"/>\n\t\t<rlb-dt-row *ngIf=\"!loading && items?.length === 0\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-noitems\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t<rlb-dt-row *ngIf=\"loading\" class=\"text-center\">\n\t\t\t<rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n\t\t\t\t<ng-content select=\"rlb-dt-loading\"/>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tbody>\n\t\t<tfoot *ngIf=\"pagination && paginationMode !== 'none'\">\n\t\t<rlb-dt-row>\n\t\t\t<rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n\t\t\t\t<button *ngIf=\"paginationMode === 'load-more'\" type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n\t\t\t\t\t\t\t\t[disabled]=\"loading\" (click)=\"loadMore.emit()\">\n\t\t\t\t\t{{ loadMoreLabel }}\n\t\t\t\t</button>\n\t\t\t\t<ng-container *ngIf=\"paginationMode === 'pages'\">\n\t\t\t\t\t<nav aria-label=\"Page navigation example\">\n            <ul class=\"pagination float-end pagination-sm\">\n              <li class=\"page-item\">\n                <a class=\"page-link d-block\" [class.disabled]=\"currentPage === 1\" href=\"#\" aria-label=\"Previous\"\n                   (click)=\"prev($event)\">\n                  <span aria-hidden=\"true\">&laquo;</span>\n                </a>\n              </li>\n\n              <ng-container *ngFor=\"let page of visiblePages\">\n                <li class=\"page-item\"\n                    [class.active]=\"currentPage === page\"\n                    [class.disabled]=\"page === '...'\">\n                  <a class=\"page-link d-block\"\n                     href=\"#\"\n                     (click)=\"selectPage($event, page)\">\n                    {{ page }}\n                  </a>\n                </li>\n              </ng-container>\n\n              <li class=\"page-item\">\n                <a class=\"page-link d-block\" [class.disabled]=\"currentPage === pages\" href=\"#\" aria-label=\"Next\"\n                   (click)=\"next($event)\">\n                  <span aria-hidden=\"true\">&raquo;</span>\n                </a>\n              </li>\n            </ul>\n\t\t\t\t\t\t<ul class=\"ps-0 float-end me-3\">\n\t\t\t\t\t\t\t<rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t[disabled]=\"items.length === 0\">\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"10\">10</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"20\">20</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"50\">50</rlb-option>\n\t\t\t\t\t\t\t\t<rlb-option [value]=\"100\">100</rlb-option>\n\t\t\t\t\t\t\t</rlb-select>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t</ng-container>\n\t\t\t</rlb-dt-cell>\n\t\t</rlb-dt-row>\n\t\t</tfoot>\n\t</table>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{ alias: 'title' }]
@@ -10673,7 +11044,7 @@ const COMPONENT_BUILDER = [ComponentHostDirective];
 
 class RlbBootstrapModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbBootstrapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: RlbBootstrapModule, declarations: [DataTableActionComponent, DataTableActionsComponent, DataTableCellComponent, DataTableHeaderComponent, DataTableRowComponent, DataTableComponent, DataTableLoadingComponent, DataTableNoItemsComponent, AutocompleteComponent, CheckboxComponent, InputComponent, SwitchComponent, TextAreaComponent, ColorComponent, DatalistComponent, RangeComponent, SelectComponent, RadioComponent, OptionComponent, FileComponent, InputGroupComponent, HelpText, DndDirective, FileDndComponent, InputValidationComponent, AutocompleteCountryComponent, AutocompleteTimezonesComponent, AutocompleteCountryDialCodeComponent, AlertComponent, BreadcrumbComponent, AccordionComponent, AccordionItemComponent, AccordionHeaderComponent, AccordionBodyComponent, ButtonComponent, ButtonCloseComponent, ButtonGroupComponent, ButtonToolbarComponent, RlbFabComponent, BadgeDirective, BadgeComponent, CardBodyComponent, CardFooterComponent, CardGroupComponent, CardHeaderComponent, CardImageComponent, CardLinkComponent, CardSubtitleComponent, CardTextComponent, CardTitleComponent, CardComponent, SpinnerComponent, ProgressComponent, TooltipDirective, PopoverDirective, PlaceholderDirective, CollapseComponent, DropdownComponent, DropdownContainerComponent, DropdownMenuItemComponent, DropdownDirective, NavbarBrandDirective, NavbarComponent, NavbarFormComponent, NavbarTextComponent, NavbarItemsComponent, NavbarDropdownItemComponent, NavbarItemComponent, NavbarSeparatorComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasTitleComponent, OffcanvasBodyComponent, ToggleDirective, SidebarComponent, SidebarItemComponent, NavComponent, NavItemComponent, TabsComponent, TabComponent, TabContentComponent, TabPaneComponent, PaginationItemComponent, PaginationComponent, ScrollspyDirective, CarouselComponent, CarouselCaptionComponent, CarouselSlideComponent, ListComponent, ListItemComponent, ListItemImageComponent, AvatarComponent, ChatContainerComponent, ChatItemComponent, RlbPlaceholderComponent, RlbPlaceholderLineComponent, RlbPlaceholderTextComponent, ModalContainerComponent, ToastContainerComponent, CalendarComponent, CalendarHeaderComponent, CalendarGrid, CalendarWeekGridComponent, CalendarMonthGridComponent, CalendarEventComponent, ComponentHostDirective, DateTzPipe, MonthFormatterPipe, DayOfWeekPipe, FormFieldsComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: RlbBootstrapModule, declarations: [DataTableActionComponent, DataTableActionsComponent, DataTableCellComponent, DataTableHeaderComponent, DataTableRowComponent, DataTableComponent, DataTableLoadingComponent, DataTableNoItemsComponent, AutocompleteComponent, CheckboxComponent, InputComponent, SwitchComponent, TextAreaComponent, ColorComponent, DatalistComponent, RangeComponent, SelectComponent, RadioComponent, OptionComponent, FileComponent, InputGroupComponent, HelpText, DndDirective, FileDndComponent, InputValidationComponent, AutocompleteCountryComponent, AutocompleteTimezonesComponent, AutocompleteCountryDialCodeComponent, AlertComponent, BreadcrumbComponent, AccordionComponent, AccordionItemComponent, AccordionHeaderComponent, AccordionBodyComponent, ButtonComponent, ButtonCloseComponent, ButtonGroupComponent, ButtonToolbarComponent, RlbFabComponent, BadgeDirective, BadgeComponent, CardBodyComponent, CardFooterComponent, CardGroupComponent, CardHeaderComponent, CardImageComponent, CardLinkComponent, CardSubtitleComponent, CardTextComponent, CardTitleComponent, CardComponent, SpinnerComponent, ProgressComponent, TooltipDirective, PopoverDirective, PlaceholderDirective, CollapseComponent, DropdownComponent, DropdownContainerComponent, DropdownMenuItemComponent, DropdownDirective, NavbarBrandDirective, NavbarComponent, NavbarFormComponent, NavbarTextComponent, NavbarItemsComponent, NavbarDropdownItemComponent, NavbarItemComponent, NavbarSeparatorComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasTitleComponent, OffcanvasBodyComponent, ToggleDirective, SidebarComponent, SidebarItemComponent, NavComponent, NavItemComponent, TabsComponent, TabComponent, TabContentComponent, TabPaneComponent, PaginationItemComponent, PaginationComponent, ScrollspyDirective, CarouselComponent, CarouselCaptionComponent, CarouselSlideComponent, ListComponent, ListItemComponent, ListItemImageComponent, AvatarComponent, ChatContainerComponent, ChatItemComponent, RlbPlaceholderComponent, RlbPlaceholderLineComponent, RlbPlaceholderTextComponent, ModalContainerComponent, ToastContainerComponent, CalendarComponent, CalendarHeaderComponent, CalendarGrid, CalendarWeekGridComponent, CalendarDayGridComponent, CalendarMonthGridComponent, CalendarEventComponent, ComponentHostDirective, DateTzPipe, MonthFormatterPipe, DayOfWeekPipe, FormFieldsComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
@@ -10682,7 +11053,7 @@ class RlbBootstrapModule {
             CdkDropListGroup,
             CdkDropList,
             CdkDragPlaceholder,
-            CdkDragPreview], exports: [DataTableActionComponent, DataTableActionsComponent, DataTableCellComponent, DataTableHeaderComponent, DataTableRowComponent, DataTableComponent, DataTableLoadingComponent, DataTableNoItemsComponent, AutocompleteComponent, CheckboxComponent, InputComponent, SwitchComponent, TextAreaComponent, ColorComponent, DatalistComponent, RangeComponent, SelectComponent, RadioComponent, OptionComponent, FileComponent, InputGroupComponent, HelpText, DndDirective, FileDndComponent, InputValidationComponent, AutocompleteCountryComponent, AutocompleteTimezonesComponent, AutocompleteCountryDialCodeComponent, AlertComponent, BreadcrumbComponent, AccordionComponent, AccordionItemComponent, AccordionHeaderComponent, AccordionBodyComponent, ButtonComponent, ButtonCloseComponent, ButtonGroupComponent, ButtonToolbarComponent, RlbFabComponent, BadgeDirective, BadgeComponent, CardBodyComponent, CardFooterComponent, CardGroupComponent, CardHeaderComponent, CardImageComponent, CardLinkComponent, CardSubtitleComponent, CardTextComponent, CardTitleComponent, CardComponent, SpinnerComponent, ProgressComponent, TooltipDirective, PopoverDirective, PlaceholderDirective, CollapseComponent, DropdownComponent, DropdownContainerComponent, DropdownMenuItemComponent, DropdownDirective, NavbarBrandDirective, NavbarComponent, NavbarFormComponent, NavbarTextComponent, NavbarItemsComponent, NavbarDropdownItemComponent, NavbarItemComponent, NavbarSeparatorComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasTitleComponent, OffcanvasBodyComponent, ToggleDirective, SidebarComponent, SidebarItemComponent, NavComponent, NavItemComponent, TabsComponent, TabComponent, TabContentComponent, TabPaneComponent, PaginationItemComponent, PaginationComponent, ScrollspyDirective, CarouselComponent, CarouselCaptionComponent, CarouselSlideComponent, ListComponent, ListItemComponent, ListItemImageComponent, AvatarComponent, ChatContainerComponent, ChatItemComponent, RlbPlaceholderComponent, RlbPlaceholderLineComponent, RlbPlaceholderTextComponent, ModalContainerComponent, ToastContainerComponent, CalendarComponent, CalendarHeaderComponent, CalendarGrid, CalendarWeekGridComponent, CalendarMonthGridComponent, CalendarEventComponent, DateTzPipe, MonthFormatterPipe, DayOfWeekPipe, FormFieldsComponent] }); }
+            CdkDragPreview], exports: [DataTableActionComponent, DataTableActionsComponent, DataTableCellComponent, DataTableHeaderComponent, DataTableRowComponent, DataTableComponent, DataTableLoadingComponent, DataTableNoItemsComponent, AutocompleteComponent, CheckboxComponent, InputComponent, SwitchComponent, TextAreaComponent, ColorComponent, DatalistComponent, RangeComponent, SelectComponent, RadioComponent, OptionComponent, FileComponent, InputGroupComponent, HelpText, DndDirective, FileDndComponent, InputValidationComponent, AutocompleteCountryComponent, AutocompleteTimezonesComponent, AutocompleteCountryDialCodeComponent, AlertComponent, BreadcrumbComponent, AccordionComponent, AccordionItemComponent, AccordionHeaderComponent, AccordionBodyComponent, ButtonComponent, ButtonCloseComponent, ButtonGroupComponent, ButtonToolbarComponent, RlbFabComponent, BadgeDirective, BadgeComponent, CardBodyComponent, CardFooterComponent, CardGroupComponent, CardHeaderComponent, CardImageComponent, CardLinkComponent, CardSubtitleComponent, CardTextComponent, CardTitleComponent, CardComponent, SpinnerComponent, ProgressComponent, TooltipDirective, PopoverDirective, PlaceholderDirective, CollapseComponent, DropdownComponent, DropdownContainerComponent, DropdownMenuItemComponent, DropdownDirective, NavbarBrandDirective, NavbarComponent, NavbarFormComponent, NavbarTextComponent, NavbarItemsComponent, NavbarDropdownItemComponent, NavbarItemComponent, NavbarSeparatorComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasTitleComponent, OffcanvasBodyComponent, ToggleDirective, SidebarComponent, SidebarItemComponent, NavComponent, NavItemComponent, TabsComponent, TabComponent, TabContentComponent, TabPaneComponent, PaginationItemComponent, PaginationComponent, ScrollspyDirective, CarouselComponent, CarouselCaptionComponent, CarouselSlideComponent, ListComponent, ListItemComponent, ListItemImageComponent, AvatarComponent, ChatContainerComponent, ChatItemComponent, RlbPlaceholderComponent, RlbPlaceholderLineComponent, RlbPlaceholderTextComponent, ModalContainerComponent, ToastContainerComponent, CalendarComponent, CalendarHeaderComponent, CalendarGrid, CalendarWeekGridComponent, CalendarDayGridComponent, CalendarMonthGridComponent, CalendarEventComponent, DateTzPipe, MonthFormatterPipe, DayOfWeekPipe, FormFieldsComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbBootstrapModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -11268,5 +11639,5 @@ function provideRlbBootstrap() {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAutocompleteComponent, AbstractComponent, AccordionBodyComponent, AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AutocompleteComponent, AutocompleteCountryComponent, AutocompleteCountryDialCodeComponent, AutocompleteTimezonesComponent, AvatarComponent, BadgeComponent, BadgeDirective, BreadcrumbComponent, ButtonCloseComponent, ButtonComponent, ButtonGroupComponent, ButtonToolbarComponent, CALENDAR_COMPONENTS, COMPONENTS, CalendarComponent, CalendarEventComponent, CalendarGrid, CalendarHeaderComponent, CalendarMonthGridComponent, CalendarOverflowEventsContainerComponent, CalendarToastComponent, CalendarWeekGridComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderComponent, CardImageComponent, CardLinkComponent, CardSubtitleComponent, CardTextComponent, CardTitleComponent, CarouselCaptionComponent, CarouselComponent, CarouselSlideComponent, ChatContainerComponent, ChatItemComponent, CheckboxComponent, CollapseComponent, ColorComponent, CommonModalComponent, DataTableActionComponent, DataTableActionsComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderComponent, DataTableLoadingComponent, DataTableNoItemsComponent, DataTableRowComponent, DatalistComponent, DateTzPipe, DayOfWeekPipe, DndDirective, DropdownComponent, DropdownContainerComponent, DropdownDirective, DropdownMenuItemComponent, EventCreateEditComponent, FileComponent, FileDndComponent, FormFieldsComponent, HelpText, INPUTS, InputComponent, InputGroupComponent, InputValidationComponent, ListComponent, ListItemComponent, ListItemImageComponent, MODALS, ModalContainerComponent, ModalDirective, ModalRegistryOptions, ModalService, MonthFormatterPipe, NavComponent, NavItemComponent, NavbarBrandDirective, NavbarComponent, NavbarDropdownItemComponent, NavbarFormComponent, NavbarItemComponent, NavbarItemsComponent, NavbarSeparatorComponent, NavbarTextComponent, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasTitleComponent, OptionComponent, PIPES, PaginationComponent, PaginationItemComponent, PlaceholderDirective, PopoverDirective, ProgressComponent, RLB_TRANSLATION_SERVICE, RadioComponent, RangeComponent, RlbBootstrapModule, RlbFabComponent, RlbPlaceholderComponent, RlbPlaceholderLineComponent, RlbPlaceholderTextComponent, ScrollspyDirective, SearchModalComponent, SelectComponent, SidebarComponent, SidebarItemComponent, SpinnerComponent, SwitchComponent, TABLE, TOASTS, TabComponent, TabContentComponent, TabPaneComponent, TabsComponent, TextAreaComponent, ToastContainerComponent, ToastDirective, ToastRegistryOptions, ToastService, ToggleDirective, TooltipDirective, UniqueIdService, createArrayProxy, provideRlbBootstrap, requiredAutocompleteValue };
+export { AbstractAutocompleteComponent, AbstractComponent, AccordionBodyComponent, AccordionComponent, AccordionHeaderComponent, AccordionItemComponent, AlertComponent, AutocompleteComponent, AutocompleteCountryComponent, AutocompleteCountryDialCodeComponent, AutocompleteTimezonesComponent, AvatarComponent, BadgeComponent, BadgeDirective, BreadcrumbComponent, ButtonCloseComponent, ButtonComponent, ButtonGroupComponent, ButtonToolbarComponent, CALENDAR_COMPONENTS, COMPONENTS, CalendarComponent, CalendarDayGridComponent, CalendarEventComponent, CalendarGrid, CalendarHeaderComponent, CalendarMonthGridComponent, CalendarOverflowEventsContainerComponent, CalendarToastComponent, CalendarWeekGridComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderComponent, CardImageComponent, CardLinkComponent, CardSubtitleComponent, CardTextComponent, CardTitleComponent, CarouselCaptionComponent, CarouselComponent, CarouselSlideComponent, ChatContainerComponent, ChatItemComponent, CheckboxComponent, CollapseComponent, ColorComponent, CommonModalComponent, DataTableActionComponent, DataTableActionsComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderComponent, DataTableLoadingComponent, DataTableNoItemsComponent, DataTableRowComponent, DatalistComponent, DateTzPipe, DayOfWeekPipe, DndDirective, DropdownComponent, DropdownContainerComponent, DropdownDirective, DropdownMenuItemComponent, EventCreateEditComponent, FileComponent, FileDndComponent, FormFieldsComponent, HelpText, INPUTS, InputComponent, InputGroupComponent, InputValidationComponent, ListComponent, ListItemComponent, ListItemImageComponent, MODALS, ModalContainerComponent, ModalDirective, ModalRegistryOptions, ModalService, MonthFormatterPipe, NavComponent, NavItemComponent, NavbarBrandDirective, NavbarComponent, NavbarDropdownItemComponent, NavbarFormComponent, NavbarItemComponent, NavbarItemsComponent, NavbarSeparatorComponent, NavbarTextComponent, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasTitleComponent, OptionComponent, PIPES, PaginationComponent, PaginationItemComponent, PlaceholderDirective, PopoverDirective, ProgressComponent, RLB_TRANSLATION_SERVICE, RadioComponent, RangeComponent, RlbBootstrapModule, RlbFabComponent, RlbPlaceholderComponent, RlbPlaceholderLineComponent, RlbPlaceholderTextComponent, ScrollspyDirective, SearchModalComponent, SelectComponent, SidebarComponent, SidebarItemComponent, SpinnerComponent, SwitchComponent, TABLE, TOASTS, TabComponent, TabContentComponent, TabPaneComponent, TabsComponent, TextAreaComponent, ToastContainerComponent, ToastDirective, ToastRegistryOptions, ToastService, ToggleDirective, TooltipDirective, UniqueIdService, createArrayProxy, provideRlbBootstrap, requiredAutocompleteValue };
 //# sourceMappingURL=open-rlb-ng-bootstrap.mjs.map