@open-rlb/ng-bootstrap 2.4.9 → 2.4.11

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

@@ -1,17 +1,17 @@
 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 * as i3 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';
 import { DateTz } from '@open-rlb/date-tz';
 import { DateTz as DateTz$1 } from '@open-rlb/date-tz/date-tz';
-import * as i2$3 from '@angular/cdk/drag-drop';
+import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropListGroup, CdkDropList, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 import * as i5 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -548,37 +548,39 @@ class AlertComponent {
         this.viewContainerRef.element.nativeElement.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: AlertComponent, isStandalone: false, selector: "rlb-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", booleanAttribute], cssClass: ["class", "cssClass"] }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: ` <ng-template #template>
-    <div class="alert alert-{{ color }} {{ cssClass }}" role="alert">
-      <ng-content></ng-content>
-      <button
-        *ngIf="dismissible"
-        type="button"
-        class="btn-close"
-        data-bs-dismiss="alert"
-        aria-label="Close"
-        (click)="dismissed.emit()"
-      ></button>
-    </div>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AlertComponent, isStandalone: false, selector: "rlb-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", booleanAttribute], cssClass: ["class", "cssClass"] }, outputs: { dismissed: "dismissed" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: ` <ng-template #template>
+      <div class="alert alert-{{ color }} {{ cssClass }}" role="alert">
+        <ng-content></ng-content>
+        @if (dismissible) {
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="alert"
+            aria-label="Close"
+            (click)="dismissed.emit()"
+          ></button>
+        }
+      </div>
+    </ng-template>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-alert',
                     template: ` <ng-template #template>
-    <div class="alert alert-{{ color }} {{ cssClass }}" role="alert">
-      <ng-content></ng-content>
-      <button
-        *ngIf="dismissible"
-        type="button"
-        class="btn-close"
-        data-bs-dismiss="alert"
-        aria-label="Close"
-        (click)="dismissed.emit()"
-      ></button>
-    </div>
-  </ng-template>`,
+      <div class="alert alert-{{ color }} {{ cssClass }}" role="alert">
+        <ng-content></ng-content>
+        @if (dismissible) {
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="alert"
+            aria-label="Close"
+            (click)="dismissed.emit()"
+          ></button>
+        }
+      </div>
+    </ng-template>`,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { color: [{
@@ -622,13 +624,15 @@ class BadgeComponent {
         this.viewContainerRef.element.nativeElement.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: BadgeComponent, isStandalone: false, selector: "span[rlb-badge], img[rlb-badge]", inputs: { pill: ["pill", "pill", booleanAttribute], color: "color", hiddenText: ["hidden-text", "hiddenText"], border: ["border", "border", booleanAttribute], cssClass: ["class", "cssClass"] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BadgeComponent, isStandalone: false, selector: "span[rlb-badge], img[rlb-badge]", inputs: { pill: ["pill", "pill", booleanAttribute], color: "color", hiddenText: ["hidden-text", "hiddenText"], border: ["border", "border", booleanAttribute], cssClass: ["class", "cssClass"] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
   <ng-template #template>
     <span [class]="style">
       <ng-content></ng-content>
-      <span *ngIf="hiddenText" class="visually-hidden">{{ hiddenText }}</span>
+      @if (hiddenText) {
+        <span class="visually-hidden">{{ hiddenText }}</span>
+      }
     </span>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+  </ng-template>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -638,7 +642,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   <ng-template #template>
     <span [class]="style">
       <ng-content></ng-content>
-      <span *ngIf="hiddenText" class="visually-hidden">{{ hiddenText }}</span>
+      @if (hiddenText) {
+        <span class="visually-hidden">{{ hiddenText }}</span>
+      }
     </span>
   </ng-template>`,
                     standalone: false
@@ -811,37 +817,45 @@ class BreadcrumbComponent {
         this.cssClasses = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BreadcrumbComponent, isStandalone: false, selector: "rlb-breadcrumb", inputs: { divider: "divider", items: "items", cssClasses: "cssClasses" }, ngImport: i0, template: ` <nav
-    aria-label="breadcrumb"
-    style="--bs-breadcrumb-divider: '{{ divider }}';"
-  >
-			<ol class="breadcrumb" [ngClass]="cssClasses">
-      <ng-container *ngFor="let item of items; last as last">
-        <li class="breadcrumb-item" [ngClass]="{ active: !last }">
-					<a *ngIf="!last" [routerLink]="item.link">{{ item.label }}</a>
-          <span *ngIf="last">{{ item.label }}</span>
-        </li>
-      </ng-container>
-    </ol>
-  </nav>`, isInline: true, 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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BreadcrumbComponent, isStandalone: false, selector: "rlb-breadcrumb", inputs: { divider: "divider", items: "items", cssClasses: "cssClasses" }, ngImport: i0, template: ` <nav
+      aria-label="breadcrumb"
+      style="--bs-breadcrumb-divider: '{{ divider }}';"
+      >
+      <ol class="breadcrumb" [ngClass]="cssClasses">
+        @for (item of items; track item; let last = $last) {
+          <li class="breadcrumb-item" [ngClass]="{ active: !last }">
+            @if (!last) {
+              <a [routerLink]="item.link">{{ item.label }}</a>
+            }
+            @if (last) {
+              <span>{{ item.label }}</span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-breadcrumb',
                     template: ` <nav
-    aria-label="breadcrumb"
-    style="--bs-breadcrumb-divider: '{{ divider }}';"
-  >
-			<ol class="breadcrumb" [ngClass]="cssClasses">
-      <ng-container *ngFor="let item of items; last as last">
-        <li class="breadcrumb-item" [ngClass]="{ active: !last }">
-					<a *ngIf="!last" [routerLink]="item.link">{{ item.label }}</a>
-          <span *ngIf="last">{{ item.label }}</span>
-        </li>
-      </ng-container>
-    </ol>
-  </nav>`,
+      aria-label="breadcrumb"
+      style="--bs-breadcrumb-divider: '{{ divider }}';"
+      >
+      <ol class="breadcrumb" [ngClass]="cssClasses">
+        @for (item of items; track item; let last = $last) {
+          <li class="breadcrumb-item" [ngClass]="{ active: !last }">
+            @if (!last) {
+              <a [routerLink]="item.link">{{ item.label }}</a>
+            }
+            @if (last) {
+              <span>{{ item.label }}</span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>`,
                     standalone: false
                 }]
         }], propDecorators: { divider: [{
@@ -1256,10 +1270,10 @@ class CarouselComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: UniqueIdService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: CarouselComponent, isStandalone: false, selector: "rlb-carousel", inputs: { id: "id", hideIndicators: ["hide-indicators", "hideIndicators", booleanAttribute], hideControls: ["hide-controls", "hideControls", booleanAttribute], crossFade: ["cross-fade", "crossFade", booleanAttribute], autoplay: "autoplay", interval: "interval", pauseProp: ["pause", "pauseProp"], wrap: ["wrap", "wrap", booleanAttribute], noTouch: ["no-touch", "noTouch", booleanAttribute], keyboard: ["keyboard", "keyboard", booleanAttribute], currentSlide: ["current-slide", "currentSlide", numberAttribute] }, outputs: { slid: "slid", slide: "slide", currentSlideChange: "current-slideChange", slideCountChange: "slide-count" }, host: { properties: { "class.carousel-fade": "crossFade", "id": "id", "attr.data-bs-ride": "autoplay === \"auto\" ? \"carousel\" : autoplay === \"manual\" ? \"true\": undefined", "attr.data-bs-touch": "noTouch ? undefined : true", "attr.data-bs-interval": "interval", "attr.data-bs-keyboard": "!keyboard ? \"false\" : undefined", "attr.data-bs-wrap": "!wrap ? \"false\" : undefined", "attr.data-bs-pause": "pause === false ? \"false\" : undefined" }, classAttribute: "carousel slide" }, queries: [{ propertyName: "items", predicate: CarouselSlideComponent }], ngImport: i0, template: `
-      <ng-container *ngIf="!hideIndicators">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CarouselComponent, isStandalone: false, selector: "rlb-carousel", inputs: { id: "id", hideIndicators: ["hide-indicators", "hideIndicators", booleanAttribute], hideControls: ["hide-controls", "hideControls", booleanAttribute], crossFade: ["cross-fade", "crossFade", booleanAttribute], autoplay: "autoplay", interval: "interval", pauseProp: ["pause", "pauseProp"], wrap: ["wrap", "wrap", booleanAttribute], noTouch: ["no-touch", "noTouch", booleanAttribute], keyboard: ["keyboard", "keyboard", booleanAttribute], currentSlide: ["current-slide", "currentSlide", numberAttribute] }, outputs: { slid: "slid", slide: "slide", currentSlideChange: "current-slideChange", slideCountChange: "slide-count" }, host: { properties: { "class.carousel-fade": "crossFade", "id": "id", "attr.data-bs-ride": "autoplay === \"auto\" ? \"carousel\" : autoplay === \"manual\" ? \"true\": undefined", "attr.data-bs-touch": "noTouch ? undefined : true", "attr.data-bs-interval": "interval", "attr.data-bs-keyboard": "!keyboard ? \"false\" : undefined", "attr.data-bs-wrap": "!wrap ? \"false\" : undefined", "attr.data-bs-pause": "pauseProp === false ? \"false\" : undefined" }, classAttribute: "carousel slide" }, queries: [{ propertyName: "items", predicate: CarouselSlideComponent }], ngImport: i0, template: `
+      @if (!hideIndicators) {
         <div class="carousel-indicators">
-          <ng-container *ngFor="let item of items; let i = index">
+          @for (item of items; track item; let i = $index) {
             <button
               type="button"
               [class.active]="item.active"
@@ -1267,42 +1281,44 @@ class CarouselComponent {
               [attr.data-bs-slide-to]="i"
               [attr.aria-label]="'Slide ' + (i + 1)"
             ></button>
-          </ng-container>
+          }
         </div>
-      </ng-container>
-    <div class="carousel-inner">
-      <ng-content select="rlb-carousel-slide" />
-    </div>
-    <button
-      *ngIf="!hideControls"
-      class="carousel-control-prev"
-      type="button"
-      [attr.data-bs-target]="'#' + id"
-      data-bs-slide="prev"
-    >
-      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">Previous</span>
-    </button>
-    <button
-      *ngIf="!hideControls"
-      class="carousel-control-next"
-      type="button"
-      [attr.data-bs-target]="'#' + id"
-      data-bs-slide="next"
-    >
-      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">Next</span>
-    </button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+      }
+      <div class="carousel-inner">
+        <ng-content select="rlb-carousel-slide" />
+      </div>
+      @if (!hideControls) {
+        <button
+          class="carousel-control-prev"
+          type="button"
+          [attr.data-bs-target]="'#' + id"
+          data-bs-slide="prev"
+          >
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+      }
+      @if (!hideControls) {
+        <button
+          class="carousel-control-next"
+          type="button"
+          [attr.data-bs-target]="'#' + id"
+          data-bs-slide="next"
+          >
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      }
+      `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-carousel',
                     template: `
-      <ng-container *ngIf="!hideIndicators">
+      @if (!hideIndicators) {
         <div class="carousel-indicators">
-          <ng-container *ngFor="let item of items; let i = index">
+          @for (item of items; track item; let i = $index) {
             <button
               type="button"
               [class.active]="item.active"
@@ -1310,33 +1326,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               [attr.data-bs-slide-to]="i"
               [attr.aria-label]="'Slide ' + (i + 1)"
             ></button>
-          </ng-container>
+          }
         </div>
-      </ng-container>
-    <div class="carousel-inner">
-      <ng-content select="rlb-carousel-slide" />
-    </div>
-    <button
-      *ngIf="!hideControls"
-      class="carousel-control-prev"
-      type="button"
-      [attr.data-bs-target]="'#' + id"
-      data-bs-slide="prev"
-    >
-      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">Previous</span>
-    </button>
-    <button
-      *ngIf="!hideControls"
-      class="carousel-control-next"
-      type="button"
-      [attr.data-bs-target]="'#' + id"
-      data-bs-slide="next"
-    >
-      <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">Next</span>
-    </button>
-  `,
+      }
+      <div class="carousel-inner">
+        <ng-content select="rlb-carousel-slide" />
+      </div>
+      @if (!hideControls) {
+        <button
+          class="carousel-control-prev"
+          type="button"
+          [attr.data-bs-target]="'#' + id"
+          data-bs-slide="prev"
+          >
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+      }
+      @if (!hideControls) {
+        <button
+          class="carousel-control-next"
+          type="button"
+          [attr.data-bs-target]="'#' + id"
+          data-bs-slide="next"
+          >
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      }
+      `,
                     host: {
                         class: 'carousel slide',
                         '[class.carousel-fade]': 'crossFade',
@@ -1346,7 +1364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         '[attr.data-bs-interval]': 'interval',
                         '[attr.data-bs-keyboard]': '!keyboard ? "false" : undefined',
                         '[attr.data-bs-wrap]': '!wrap ? "false" : undefined',
-                        '[attr.data-bs-pause]': 'pause === false ? "false" : undefined',
+                        '[attr.data-bs-pause]': 'pauseProp === false ? "false" : undefined',
                     },
                     standalone: false
                 }]
@@ -1465,15 +1483,23 @@ class DropdownContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownContainerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DropdownContainerComponent, isStandalone: false, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: { placement: "placement", placementSm: ["placement-sm", "placementSm"], placementMd: ["placement-md", "placementMd"], placementLg: ["placement-lg", "placementLg"], placementXl: ["placement-xl", "placementXl"], placementXxl: ["placement-xxl", "placementXxl"] }, host: { properties: { "class.dropdown-menu-end": "placement === \"right\"", "class.dropdown-menu-start": "placement === \"left\"", "class.dropdown-menu-sm-end": "placementSm === \"right\"", "class.dropdown-menu-sm-start": "placementSm === \"left\"", "class.dropdown-menu-md-end": "placementMd === \"right\"", "class.dropdown-menu-md-start": "placementMd === \"left\"", "class.dropdown-menu-lg-end": "placementLg === \"right\"", "class.dropdown-menu-lg-start": "placementLg === \"left\"", "class.dropdown-menu-xl-end": "placementXl === \"right\"", "class.dropdown-menu-xl-start": "placementXl === \"left\"", "class.dropdown-menu-xxl-end": "placementXxl === \"right\"", "class.dropdown-menu-xxl-start": "placementXxl === \"left\"", "style.border": "isList ? null : \"none\"", "style.padding": "isList ? null : \"0px\"" }, classAttribute: "dropdown-menu" }, ngImport: i0, template: ` <ng-content *ngIf="isList" select="li[rlb-dropdown-item]" />
-    <ng-content *ngIf="!isList" />`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DropdownContainerComponent, isStandalone: false, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: { placement: "placement", placementSm: ["placement-sm", "placementSm"], placementMd: ["placement-md", "placementMd"], placementLg: ["placement-lg", "placementLg"], placementXl: ["placement-xl", "placementXl"], placementXxl: ["placement-xxl", "placementXxl"] }, host: { properties: { "class.dropdown-menu-end": "placement === \"right\"", "class.dropdown-menu-start": "placement === \"left\"", "class.dropdown-menu-sm-end": "placementSm === \"right\"", "class.dropdown-menu-sm-start": "placementSm === \"left\"", "class.dropdown-menu-md-end": "placementMd === \"right\"", "class.dropdown-menu-md-start": "placementMd === \"left\"", "class.dropdown-menu-lg-end": "placementLg === \"right\"", "class.dropdown-menu-lg-start": "placementLg === \"left\"", "class.dropdown-menu-xl-end": "placementXl === \"right\"", "class.dropdown-menu-xl-start": "placementXl === \"left\"", "class.dropdown-menu-xxl-end": "placementXxl === \"right\"", "class.dropdown-menu-xxl-start": "placementXxl === \"left\"", "style.border": "isList ? null : \"none\"", "style.padding": "isList ? null : \"0px\"" }, classAttribute: "dropdown-menu" }, ngImport: i0, template: ` @if (isList) {
+  <ng-content select="li[rlb-dropdown-item]" />
+}
+@if (!isList) {
+  <ng-content />
+}`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[rlb-dropdown-menu], rlb-dropdown-container',
-                    template: ` <ng-content *ngIf="isList" select="li[rlb-dropdown-item]" />
-    <ng-content *ngIf="!isList" />`,
+                    template: ` @if (isList) {
+  <ng-content select="li[rlb-dropdown-item]" />
+}
+@if (!isList) {
+  <ng-content />
+}`,
                     host: {
                         class: 'dropdown-menu',
                         '[class.dropdown-menu-end]': 'placement === "right"',
@@ -1518,75 +1544,87 @@ class DropdownMenuItemComponent {
         this.link = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: DropdownMenuItemComponent, isStandalone: false, selector: "li[rlb-dropdown-item]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], header: ["header", "header", booleanAttribute], divider: ["divider", "divider", booleanAttribute], link: "link", textWrap: ["text-wrap", "textWrap", booleanAttribute] }, ngImport: i0, template: `
-		<span
-			*ngIf="!link && !divider && !header"
-			class="dropdown-item "
-			role="button"
-			[class.active]="active"
-			[class.disabled]="disabled"
-			[class.text-wrap]="textWrap"
-			[class.text-break]="textWrap"
-			[attr.aria-current]="active"
-			[attr.aria-disabled]="disabled"
-		>
-				<ng-container *ngTemplateOutlet="content"></ng-container>
-			</span>
-		<a
-			*ngIf="link"
-			class="dropdown-item "
-			[routerLink]="link"
-      [class.active]="active"
-      [class.disabled]="disabled"
-			[class.text-wrap]="textWrap"
-			[class.text-break]="textWrap"
-      [attr.aria-current]="active"
-      [attr.aria-disabled]="disabled"
-    >
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </a>
-    <h6 *ngIf="header" class="dropdown-header">
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </h6>
-    <hr *ngIf="divider" class="dropdown-divider" />
-    <ng-template #content><ng-content /></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DropdownMenuItemComponent, isStandalone: false, selector: "li[rlb-dropdown-item]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], header: ["header", "header", booleanAttribute], divider: ["divider", "divider", booleanAttribute], link: "link", textWrap: ["text-wrap", "textWrap", booleanAttribute] }, ngImport: i0, template: `
+		@if (!link && !divider && !header) {
+		  <span
+		    class="dropdown-item "
+		    role="button"
+		    [class.active]="active"
+		    [class.disabled]="disabled"
+		    [class.text-wrap]="textWrap"
+		    [class.text-break]="textWrap"
+		    [attr.aria-current]="active"
+		    [attr.aria-disabled]="disabled"
+		    >
+		    <ng-container *ngTemplateOutlet="content"></ng-container>
+		  </span>
+		}
+		@if (link) {
+		  <a
+		    class="dropdown-item "
+		    [routerLink]="link"
+		    [class.active]="active"
+		    [class.disabled]="disabled"
+		    [class.text-wrap]="textWrap"
+		    [class.text-break]="textWrap"
+		    [attr.aria-current]="active"
+		    [attr.aria-disabled]="disabled"
+		    >
+		    <ng-container *ngTemplateOutlet="content"></ng-container>
+		  </a>
+		}
+		@if (header) {
+		  <h6 class="dropdown-header">
+		    <ng-container *ngTemplateOutlet="content"></ng-container>
+		  </h6>
+		}
+		@if (divider) {
+		  <hr class="dropdown-divider" />
+		}
+		<ng-template #content><ng-content /></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[rlb-dropdown-item]',
                     template: `
-		<span
-			*ngIf="!link && !divider && !header"
-			class="dropdown-item "
-			role="button"
-			[class.active]="active"
-			[class.disabled]="disabled"
-			[class.text-wrap]="textWrap"
-			[class.text-break]="textWrap"
-			[attr.aria-current]="active"
-			[attr.aria-disabled]="disabled"
-		>
-				<ng-container *ngTemplateOutlet="content"></ng-container>
-			</span>
-		<a
-			*ngIf="link"
-			class="dropdown-item "
-			[routerLink]="link"
-      [class.active]="active"
-      [class.disabled]="disabled"
-			[class.text-wrap]="textWrap"
-			[class.text-break]="textWrap"
-      [attr.aria-current]="active"
-      [attr.aria-disabled]="disabled"
-    >
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </a>
-    <h6 *ngIf="header" class="dropdown-header">
-      <ng-container *ngTemplateOutlet="content"></ng-container>
-    </h6>
-    <hr *ngIf="divider" class="dropdown-divider" />
-    <ng-template #content><ng-content /></ng-template>`,
+		@if (!link && !divider && !header) {
+		  <span
+		    class="dropdown-item "
+		    role="button"
+		    [class.active]="active"
+		    [class.disabled]="disabled"
+		    [class.text-wrap]="textWrap"
+		    [class.text-break]="textWrap"
+		    [attr.aria-current]="active"
+		    [attr.aria-disabled]="disabled"
+		    >
+		    <ng-container *ngTemplateOutlet="content"></ng-container>
+		  </span>
+		}
+		@if (link) {
+		  <a
+		    class="dropdown-item "
+		    [routerLink]="link"
+		    [class.active]="active"
+		    [class.disabled]="disabled"
+		    [class.text-wrap]="textWrap"
+		    [class.text-break]="textWrap"
+		    [attr.aria-current]="active"
+		    [attr.aria-disabled]="disabled"
+		    >
+		    <ng-container *ngTemplateOutlet="content"></ng-container>
+		  </a>
+		}
+		@if (header) {
+		  <h6 class="dropdown-header">
+		    <ng-container *ngTemplateOutlet="content"></ng-container>
+		  </h6>
+		}
+		@if (divider) {
+		  <hr class="dropdown-divider" />
+		}
+		<ng-template #content><ng-content /></ng-template>`,
                     standalone: false
                 }]
         }], propDecorators: { active: [{
@@ -1745,7 +1783,7 @@ class ProgressComponent {
         return ((this.value - this.min) / (this.max - this.min)) * 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: ProgressComponent, isStandalone: false, selector: "rlb-progress", inputs: { max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], value: ["value", "value", numberAttribute], height: ["height", "height", numberAttribute], animated: ["animated", "animated", booleanAttribute], striped: ["striped", "striped", booleanAttribute], infinite: ["infinite", "infinite", booleanAttribute], ariaLabel: ["aria-label", "ariaLabel"], showValue: ["showValue", "showValue", booleanAttribute], color: "color", textColor: ["text-color", "textColor"] }, host: { attributes: { "attr.role": "progressbar", "aria-valuemin": "0" }, properties: { "attr.aria-valuenow": "getPercentValue()", "attr.aria-valuemax": "max", "attr.aria-valuemin": "min", "attr.aria-label": "ariaLabel", "style.height.px": "height" }, classAttribute: "progress" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProgressComponent, isStandalone: false, selector: "rlb-progress", inputs: { max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], value: ["value", "value", numberAttribute], height: ["height", "height", numberAttribute], animated: ["animated", "animated", booleanAttribute], striped: ["striped", "striped", booleanAttribute], infinite: ["infinite", "infinite", booleanAttribute], ariaLabel: ["aria-label", "ariaLabel"], showValue: ["showValue", "showValue", booleanAttribute], color: "color", textColor: ["text-color", "textColor"] }, host: { attributes: { "attr.role": "progressbar", "aria-valuemin": "0" }, properties: { "attr.aria-valuenow": "getPercentValue()", "attr.aria-valuemax": "max", "attr.aria-valuemin": "min", "attr.aria-label": "ariaLabel", "style.height.px": "height" }, classAttribute: "progress" }, ngImport: i0, template: `
     <div
       class="progress-bar {{ color && !infinite? 'bg-' + color : '' }} {{ textColor? 'text-' + textColor : '' }}"
       [class.progress-bar-animated]="animated"
@@ -1753,14 +1791,17 @@ class ProgressComponent {
       [class.infinite-progress]="infinite"
       [style.background-color]="infinite? 'unset' : null"
       [style.width.%]="infinite? max :getPercentValue()">
-      <div *ngIf="infinite" class="inner bg-{{color}}"></div>
-      <span *ngIf="showValue; else e">
-        {{ getPercentValue() }}
-      </span>
-      <ng-template #e>
+      @if (infinite) {
+        <div class="inner bg-{{color}}"></div>
+      }
+      @if (showValue) {
+        <span>
+          {{ getPercentValue() }}
+        </span>
+      } @else {
         <ng-content></ng-content>
-      </ng-template>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+      }
+    </div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
@@ -1774,13 +1815,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [class.infinite-progress]="infinite"
       [style.background-color]="infinite? 'unset' : null"
       [style.width.%]="infinite? max :getPercentValue()">
-      <div *ngIf="infinite" class="inner bg-{{color}}"></div>
-      <span *ngIf="showValue; else e">
-        {{ getPercentValue() }}
-      </span>
-      <ng-template #e>
+      @if (infinite) {
+        <div class="inner bg-{{color}}"></div>
+      }
+      @if (showValue) {
+        <span>
+          {{ getPercentValue() }}
+        </span>
+      } @else {
         <ng-content></ng-content>
-      </ng-template>
+      }
     </div>`,
                     host: {
                         class: 'progress',
@@ -2064,11 +2108,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 +2200,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 +2266,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 +2275,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: [{
@@ -2466,22 +2542,23 @@ class AvatarComponent {
         this.viewContainerRef.element.nativeElement.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: AvatarComponent, isStandalone: false, selector: "rlb-avatar", inputs: { size: ["size", "size", numberAttribute], shape: "shape", src: "src", cssClass: ["class", "cssClass"] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AvatarComponent, isStandalone: false, selector: "rlb-avatar", inputs: { size: ["size", "size", numberAttribute], shape: "shape", src: "src", cssClass: ["class", "cssClass"] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template #template>
-      <img
-        *ngIf="src"
-        [src]="src"
-        alt="Avatar"
-        [class]="cssClass"
-        [style.vertical-align]="'middle'"
-        [style.width.px]="size"
-        [style.width.px]="size"
-        [style.height.px]="size"
-        [style.border]="'2px solid #cbcbcb'"
-        [style.border-radius]="_borderRadius"
-      />
+      @if (src) {
+        <img
+          [src]="src"
+          alt="Avatar"
+          [class]="cssClass"
+          [style.vertical-align]="'middle'"
+          [style.width.px]="size"
+          [style.width.px]="size"
+          [style.height.px]="size"
+          [style.border]="'2px solid #cbcbcb'"
+          [style.border-radius]="_borderRadius"
+          />
+      }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
@@ -2489,20 +2566,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: 'rlb-avatar',
                     template: `
     <ng-template #template>
-      <img
-        *ngIf="src"
-        [src]="src"
-        alt="Avatar"
-        [class]="cssClass"
-        [style.vertical-align]="'middle'"
-        [style.width.px]="size"
-        [style.width.px]="size"
-        [style.height.px]="size"
-        [style.border]="'2px solid #cbcbcb'"
-        [style.border-radius]="_borderRadius"
-      />
+      @if (src) {
+        <img
+          [src]="src"
+          alt="Avatar"
+          [class]="cssClass"
+          [style.vertical-align]="'middle'"
+          [style.width.px]="size"
+          [style.width.px]="size"
+          [style.height.px]="size"
+          [style.border]="'2px solid #cbcbcb'"
+          [style.border-radius]="_borderRadius"
+          />
+      }
     </ng-template>
-  `,
+    `,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { size: [{
@@ -2559,7 +2637,7 @@ class RlbFabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: RlbFabComponent, isStandalone: false, selector: "rlb-fab", inputs: { color: "color", size: "size", disabled: ["disabled", "disabled", booleanAttribute], outline: ["outline", "outline", booleanAttribute], position: "position" }, ngImport: i0, template: "<button\n  rlb-button\n  [color]=\"color\"\n  [disabled]=\"disabled\"\n  [outline]=\"outline\"\n  class=\"fab-button d-flex align-items-center justify-content-center\"\n  [ngClass]=\"[sizeClass, positionClass]\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}:host{width:fit-content;display:block}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: RlbFabComponent, isStandalone: false, selector: "rlb-fab", inputs: { color: "color", size: "size", disabled: ["disabled", "disabled", booleanAttribute], outline: ["outline", "outline", booleanAttribute], position: "position" }, ngImport: i0, template: "<button\n  rlb-button\n  [color]=\"color\"\n  [disabled]=\"disabled\"\n  [outline]=\"outline\"\n  class=\"fab-button d-flex align-items-center justify-content-center\"\n  [ngClass]=\"[sizeClass, positionClass]\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [".fab-button{border-radius:50%;box-shadow:0 4px 12px #00000040;z-index:1050;transition:transform .2s ease,box-shadow .2s ease;padding:0}.fab-button:hover{transform:scale(1.08);box-shadow:0 6px 18px #00000059}.fab-button:active{transform:scale(.95)}:host{width:fit-content;display:block}.fab-xs{width:32px;height:32px;font-size:1rem}.fab-sm{width:44px;height:44px;font-size:1.2rem}.fab-md{width:56px;height:56px;font-size:1.4rem}.fab-lg{width:68px;height:68px;font-size:1.7rem}.fab-bottom-right{bottom:24px;right:24px}.fab-bottom-left{bottom:24px;left:24px}.fab-top-right{top:24px;right:24px}.fab-top-left{top:24px;left:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbFabComponent, decorators: [{
             type: Component,
@@ -2578,6 +2656,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 +2979,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 +2999,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;
         }
@@ -2925,7 +3017,7 @@ class CalendarHeaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarHeaderComponent, isStandalone: false, selector: "rlb-calendar-header", inputs: { view: "view", currentDate: "currentDate" }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n  <h5 class=\"mb-0\">{{ currentDate | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate.timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"viewChange.emit('day')\" >Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"viewChange.emit('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"viewChange.emit('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "li[rlb-dropdown-item]", inputs: ["active", "disabled", "header", "divider", "link", "text-wrap"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: MonthFormatterPipe, name: "monthFormatter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarHeaderComponent, isStandalone: false, selector: "rlb-calendar-header", inputs: { view: "view", currentDate: "currentDate" }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between align-items-center mb-3\">\n\t<div class=\"d-flex gap-1\">\n\t\t<button rlb-button outline (click)=\"prev()\">\n\t\t\t<i class=\"bi bi-chevron-left\"></i>\n\t\t</button>\n\t\t<button rlb-button outline (click)=\"today()\">Today</button>\n\t\t<button rlb-button outline (click)=\"next()\">\n\t\t\t<i class=\"bi-chevron-right\"></i>\n\t\t</button>\n\t</div>\n\n  <h5 class=\"mb-0\">{{ currentDate | dtz:'DD MM yyyy' | monthFormatter }} {{ currentDate.timezone }}</h5>\n\n\t<rlb-dropdown>\n\t\t<button rlb-button outline rlb-dropdown>{{ view | titlecase }}</button>\n\t\t<ul rlb-dropdown-menu [placement]=\"'right'\">\n\t\t\t<li rlb-dropdown-item (click)=\"viewChange.emit('day')\" >Day</li>\n\t\t\t<li rlb-dropdown-item (click)=\"viewChange.emit('week')\">Week</li>\n\t\t\t<li rlb-dropdown-item (click)=\"viewChange.emit('month')\">Month</li>\n\t\t</ul>\n\t</rlb-dropdown>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: DropdownMenuItemComponent, selector: "li[rlb-dropdown-item]", inputs: ["active", "disabled", "header", "divider", "link", "text-wrap"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DateTzPipe, name: "dtz" }, { kind: "pipe", type: MonthFormatterPipe, name: "monthFormatter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
             type: Component,
@@ -2988,11 +3080,11 @@ class CalendarEventComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarEventComponent, isStandalone: false, selector: "rlb-calendar-event", inputs: { event: "event", view: "view" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick" }, ngImport: i0, template: "<div [ngClass]=\"classes\"\n     (click)=\"onClick($event)\">\n\n  <ng-container *ngIf=\"!event.isOverflowIndicator\">\n    <strong>{{ event.title }}</strong>\n    <div class=\"small opacity-75\">\n      {{ event.start | dtz:'HH:mm' }} - {{ event.end | dtz:'HH:mm' }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"event.isOverflowIndicator\">\n    +{{ event.overlapCount }} more\n  </ng-container>\n</div>\n", styles: [":host{display:block;height:100%;overflow:hidden;border-radius:var(--bs-border-radius-sm);padding:0 1px;box-sizing:border-box;transition:box-shadow .2s}:host:hover{z-index:50;box-shadow:0 .5rem 1rem #00000026!important}.calendar-event{height:100%;width:100%;padding:2px 4px;font-size:.75rem;line-height:1.2;border-radius:var(--bs-border-radius-sm);cursor:pointer}.calendar-event.overflow-indicator{display:flex;align-items:center;justify-content:center;font-weight:600;border-style:dashed!important}.calendar-event.mode-week{height:100%;padding:2px 4px;font-size:.75rem;line-height:1.2}.calendar-event.mode-month{height:20px!important;padding:0 4px;line-height:20px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.mode-month.rounded-bottom-0{border-bottom-right-radius:0;border-bottom-left-radius:0}.calendar-event.mode-month.rounded-top-0{border-top-right-radius:0;border-top-left-radius:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarEventComponent, isStandalone: false, selector: "rlb-calendar-event", inputs: { event: "event", view: "view" }, outputs: { eventClick: "eventClick", eventContainerClick: "eventContainerClick" }, ngImport: i0, template: "<div [ngClass]=\"classes\"\n  (click)=\"onClick($event)\">\n\n  @if (!event.isOverflowIndicator) {\n    <strong>{{ event.title }}</strong>\n    <div class=\"small opacity-75\">\n      {{ event.start | dtz:'HH:mm' }} - {{ event.end | dtz:'HH:mm' }}\n    </div>\n  }\n\n  @if (event.isOverflowIndicator) {\n    +{{ event.overlapCount }} more\n  }\n</div>\n", styles: [":host{display:block;height:100%;overflow:hidden;border-radius:var(--bs-border-radius-sm);padding:0 1px;box-sizing:border-box;transition:box-shadow .2s}:host:hover{z-index:50;box-shadow:0 .5rem 1rem #00000026!important}.calendar-event{height:100%;width:100%;padding:2px 4px;font-size:.75rem;line-height:1.2;border-radius:var(--bs-border-radius-sm);cursor:pointer}.calendar-event.overflow-indicator{display:flex;align-items:center;justify-content:center;font-weight:600;border-style:dashed!important}.calendar-event.mode-week{height:100%;padding:2px 4px;font-size:.75rem;line-height:1.2}.calendar-event.mode-month{height:20px!important;padding:0 4px;line-height:20px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.mode-month.rounded-bottom-0{border-bottom-right-radius:0;border-bottom-left-radius:0}.calendar-event.mode-month.rounded-top-0{border-top-right-radius:0;border-top-left-radius:0}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DateTzPipe, name: "dtz" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarEventComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-calendar-event', standalone: false, template: "<div [ngClass]=\"classes\"\n     (click)=\"onClick($event)\">\n\n  <ng-container *ngIf=\"!event.isOverflowIndicator\">\n    <strong>{{ event.title }}</strong>\n    <div class=\"small opacity-75\">\n      {{ event.start | dtz:'HH:mm' }} - {{ event.end | dtz:'HH:mm' }}\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"event.isOverflowIndicator\">\n    +{{ event.overlapCount }} more\n  </ng-container>\n</div>\n", styles: [":host{display:block;height:100%;overflow:hidden;border-radius:var(--bs-border-radius-sm);padding:0 1px;box-sizing:border-box;transition:box-shadow .2s}:host:hover{z-index:50;box-shadow:0 .5rem 1rem #00000026!important}.calendar-event{height:100%;width:100%;padding:2px 4px;font-size:.75rem;line-height:1.2;border-radius:var(--bs-border-radius-sm);cursor:pointer}.calendar-event.overflow-indicator{display:flex;align-items:center;justify-content:center;font-weight:600;border-style:dashed!important}.calendar-event.mode-week{height:100%;padding:2px 4px;font-size:.75rem;line-height:1.2}.calendar-event.mode-month{height:20px!important;padding:0 4px;line-height:20px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.mode-month.rounded-bottom-0{border-bottom-right-radius:0;border-bottom-left-radius:0}.calendar-event.mode-month.rounded-top-0{border-top-right-radius:0;border-top-left-radius:0}\n"] }]
+            args: [{ selector: 'rlb-calendar-event', standalone: false, template: "<div [ngClass]=\"classes\"\n  (click)=\"onClick($event)\">\n\n  @if (!event.isOverflowIndicator) {\n    <strong>{{ event.title }}</strong>\n    <div class=\"small opacity-75\">\n      {{ event.start | dtz:'HH:mm' }} - {{ event.end | dtz:'HH:mm' }}\n    </div>\n  }\n\n  @if (event.isOverflowIndicator) {\n    +{{ event.overlapCount }} more\n  }\n</div>\n", styles: [":host{display:block;height:100%;overflow:hidden;border-radius:var(--bs-border-radius-sm);padding:0 1px;box-sizing:border-box;transition:box-shadow .2s}:host:hover{z-index:50;box-shadow:0 .5rem 1rem #00000026!important}.calendar-event{height:100%;width:100%;padding:2px 4px;font-size:.75rem;line-height:1.2;border-radius:var(--bs-border-radius-sm);cursor:pointer}.calendar-event.overflow-indicator{display:flex;align-items:center;justify-content:center;font-weight:600;border-style:dashed!important}.calendar-event.mode-week{height:100%;padding:2px 4px;font-size:.75rem;line-height:1.2}.calendar-event.mode-month{height:20px!important;padding:0 4px;line-height:20px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.mode-month.rounded-bottom-0{border-bottom-right-radius:0;border-bottom-left-radius:0}.calendar-event.mode-month.rounded-top-0{border-top-right-radius:0;border-top-left-radius:0}\n"] }]
         }], propDecorators: { event: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3050,10 +3142,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 +3192,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 +3219,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);
@@ -3329,8 +3418,276 @@ class CalendarWeekGridComponent {
                     overflowEvents: hiddenEvents,
                     overlapCount: hiddenEvents.length
                 });
-            }
-        }
+            }
+        }
+        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: CalendarWeekGridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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        @for (day of days; track day) {\n          <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n            [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n            <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n            <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots; track time; let i = $index) {\n          <div\n            class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n            [style.height.px]=\"layout.rowHeight\">\n            @if (i !== 0) {\n              <span style=\"transform: translateY(-50%)\">\n                {{ time }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots; track time) {\n            <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n            </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days; track day) {\n            <div class=\"day-column position-relative border-end h-100\" cdkDropList\n              [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n              (click)=\"eventClick.emit()\">\n              @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n                <rlb-calendar-event [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              @if (isToday(day)) {\n                <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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.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: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.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: i1.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 class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\"\n    [style.padding-right.px]=\"scrollbarWidth\">\n\n    <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n\n      <div class=\"time-gutter border-end flex-shrink-0\"></div>\n\n      <div class=\"days-header d-flex flex-grow-1\">\n        @for (day of days; track day) {\n          <div class=\"day-cell text-center p-2 border-end\" [class.text-primary]=\"isToday(day)\"\n            [class.fw-bold]=\"isToday(day)\" [class.bg-primary]=\"isToday(day)\">\n            <div class=\"small text-uppercase text-body-secondary\">{{ day | dayOfWeek: 'short' }}</div>\n            <div class=\"h5 m-0\">{{ day | dtz:'DD' }}</div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- BODY WRAPPER  -->\n  <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n    (scroll)=\"onBodyScroll($event)\" [style.max-height.rem]=\"layout.maxBodyHeight\">\n\n    <div class=\"body-row d-flex position-relative\">\n\n      <!-- SIDEBAR (Sticky Left) -->\n      <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n        @for (time of timeSlots; track time; let i = $index) {\n          <div\n            class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n            [style.height.px]=\"layout.rowHeight\">\n            @if (i !== 0) {\n              <span style=\"transform: translateY(-50%)\">\n                {{ time }}\n              </span>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- GRID AND EVENTS -->\n      <div class=\"grid-layer flex-grow-1 position-relative\">\n\n        <!-- LAYER 1: Grid -->\n        <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n          @for (time of timeSlots; track time) {\n            <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n            </div>\n          }\n        </div>\n\n        <!-- Layer 2: Events -->\n        <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n          @for (day of days; track day) {\n            <div class=\"day-column position-relative border-end h-100\" cdkDropList\n              [cdkDropListSortingDisabled]=\"true\" [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\"\n              (click)=\"eventClick.emit()\">\n              @for (event of getEventsForDay(day); track trackByEventId($index, event)) {\n                <rlb-calendar-event [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              @if (isToday(day)) {\n                <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", 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: [{
+                type: Output
+            }], eventChange: [{
+                type: Output
+            }], scrollBodyRef: [{
+                type: ViewChild,
+                args: ['scrollBody', { static: false }]
+            }], headerRowRef: [{
+                type: ViewChild,
+                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) {
@@ -3347,18 +3704,20 @@ class CalendarWeekGridComponent {
             return idA.localeCompare(idB);
         });
     }
-    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.ɵ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: "17.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: "@if (day) {\n  <div class=\"calendar-wrapper d-flex flex-column\">\n    <!--  HEADER WRAPPER -->\n    <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n    <!-- Mimicking structure of Week View but single column -->\n    <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n      <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n        <div class=\"time-gutter border-end flex-shrink-0\"></div>\n        <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day)\"\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    <!-- BODY WRAPPER  -->\n    <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n      [style.max-height.rem]=\"layout.maxBodyHeight\">\n      <div class=\"body-row d-flex position-relative\">\n        <!-- SIDEBAR (Sticky Left) -->\n        <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n          @for (time of timeSlots; track time; let i = $index) {\n            <div\n              class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n              [style.height.px]=\"layout.rowHeight\">\n              @if (i !== 0) {\n                <span style=\"transform: translateY(-50%)\">\n                  {{ time }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n        <!-- GRID AND EVENTS -->\n        <div class=\"grid-layer flex-grow-1 position-relative\">\n          <!-- LAYER 1: Grid -->\n          <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n            @for (time of timeSlots; track time) {\n              <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n              </div>\n            }\n          </div>\n          <!-- Layer 2: Events -->\n          <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n            <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n              [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit()\">\n              @for (event of processedEvents; track trackByEventId($index, event)) {\n                <rlb-calendar-event [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              @if (isToday(day)) {\n                <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.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: i1.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: CalendarWeekGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarDayGridComponent, 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-day-grid', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (day) {\n  <div class=\"calendar-wrapper d-flex flex-column\">\n    <!--  HEADER WRAPPER -->\n    <!-- For day view, we just show the date at top? Or maybe just keep it simple with body since main header has date -->\n    <!-- Mimicking structure of Week View but single column -->\n    <div class=\"header-container overflow-hidden flex-shrink-0 border-bottom bg-body-tertiary\">\n      <div class=\"header-row d-flex\" [style.min-height.rem]=\"layout.minHeaderHeight\">\n        <div class=\"time-gutter border-end flex-shrink-0\"></div>\n        <div class=\"day-cell p-2 flex-grow-1\" [class.text-primary]=\"isToday(day)\"\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    <!-- BODY WRAPPER  -->\n    <div #scrollBody class=\"calendar-body flex-grow-1 overflow-auto bg-body position-relative\"\n      [style.max-height.rem]=\"layout.maxBodyHeight\">\n      <div class=\"body-row d-flex position-relative\">\n        <!-- SIDEBAR (Sticky Left) -->\n        <div class=\"time-sidebar sticky-start flex-shrink-0 border-end\">\n          @for (time of timeSlots; track time; let i = $index) {\n            <div\n              class=\"time-slot-label small text-body-secondary d-flex align-items-start justify-content-center\"\n              [style.height.px]=\"layout.rowHeight\">\n              @if (i !== 0) {\n                <span style=\"transform: translateY(-50%)\">\n                  {{ time }}\n                </span>\n              }\n            </div>\n          }\n        </div>\n        <!-- GRID AND EVENTS -->\n        <div class=\"grid-layer flex-grow-1 position-relative\">\n          <!-- LAYER 1: Grid -->\n          <div class=\"background-grid position-absolute w-100 h-100 top-0 start-0 z-0\">\n            @for (time of timeSlots; track time) {\n              <div class=\"grid-row border-bottom\" [style.height.px]=\"layout.rowHeight\">\n              </div>\n            }\n          </div>\n          <!-- Layer 2: Events -->\n          <div class=\"events-container d-flex h-100 w-100 position-relative z-1\" cdkDropListGroup>\n            <div class=\"day-column position-relative h-100 w-100\" cdkDropList [cdkDropListSortingDisabled]=\"true\"\n              [cdkDropListData]=\"day\" (cdkDropListDropped)=\"onEventDrop($event)\" (click)=\"eventClick.emit()\">\n              @for (event of processedEvents; track trackByEventId($index, event)) {\n                <rlb-calendar-event [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              @if (isToday(day)) {\n                <div class=\"now-line\" [style.top.px]=\"getNowTop()\">\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:block;height:100%}.calendar-wrapper{background-color:var(--bs-body-bg);border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius);overflow:hidden;height:100%}.header-container{background-color:var(--bs-body-bg);z-index:102}.header-row{width:100%}.time-gutter{width:60px;border-color:var(--bs-border-color)!important}.day-cell{border-color:var(--bs-border-color)!important}.calendar-body{scroll-behavior:auto}.body-row{width:100%}.sticky-start{position:sticky;left:0;z-index:50;background-color:var(--bs-body-bg)}.time-sidebar{width:60px;border-color:var(--bs-border-color)!important}.grid-row{border-color:var(--bs-border-color)!important;box-sizing:border-box}.grid-row:after{content:\"\";position:absolute;width:100%;border-bottom:1px dotted currentColor;opacity:.15;top:50%;left:0;pointer-events:none}.now-line{position:absolute;left:0;right:0;height:2px;background-color:var(--bs-danger);z-index:10;pointer-events:none}.now-line:before{content:\"\";position:absolute;left:-5px;top:-4px;width:10px;height:10px;background-color:var(--bs-danger);border-radius:50%}.z-0{z-index:0}.z-1{z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { view: [{
                 type: Input
             }], currentDate: [{
                 type: Input
             }], events: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], eventClick: [{
                 type: Output
             }], eventContainerClick: [{
@@ -3368,9 +3727,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }], scrollBodyRef: [{
                 type: ViewChild,
                 args: ['scrollBody', { static: false }]
-            }], headerRowRef: [{
-                type: ViewChild,
-                args: ['headerRow', { static: false }]
             }] } });
 
 const MAX_EVENTS_PER_CELL = 3;
@@ -3384,9 +3740,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 +3841,10 @@ class CalendarMonthGridComponent {
             });
             this.weeks.push(row);
         }
+        // Defer scrollbar calculation to after the view updates
+        setTimeout(() => {
+            this.updateScrollbarWidth();
+        });
     }
     /**
      * "Tetris" Algorithm:
@@ -3614,17 +3971,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: "17.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    @for (day of weekDaysHeader; track day) {\n      <div\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    }\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        @for (week of weeks; track week) {\n          <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\"\n            [style.min-height.px]=\"layout.rowHeight\">\n            @for (slot of week; track slot) {\n              <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\"\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                <!-- Events Stack -->\n                <div class=\"d-flex flex-column gap-1 w-100\">\n                  @for (event of slot.events; track trackByEvent($index, event)) {\n                    <!-- Spacer -->\n                    @if (event.isSpacer) {\n                      <div class=\"event-spacer\"></div>\n                    }\n                    <!-- Event -->\n                    @if (!event.isSpacer) {\n                      <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                        (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                  }\n                </div>\n                <!-- Overflow (+N more) -->\n                @if (slot.hasOverflow) {\n                  <div\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                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i1.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: i1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1.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    @for (day of weekDaysHeader; track day) {\n      <div\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    }\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        @for (week of weeks; track week) {\n          <div class=\"d-flex border-bottom min-h-row\" style=\"flex: 1 0 auto;\"\n            [style.min-height.px]=\"layout.rowHeight\">\n            @for (slot of week; track slot) {\n              <div class=\"flex-fill border-end p-1 d-flex flex-column position-relative\"\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                <!-- Events Stack -->\n                <div class=\"d-flex flex-column gap-1 w-100\">\n                  @for (event of slot.events; track trackByEvent($index, event)) {\n                    <!-- Spacer -->\n                    @if (event.isSpacer) {\n                      <div class=\"event-spacer\"></div>\n                    }\n                    <!-- Event -->\n                    @if (!event.isSpacer) {\n                      <rlb-calendar-event [event]=\"event\" class=\"w-100\" cdkDrag [cdkDragData]=\"event\"\n                        (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                  }\n                </div>\n                <!-- Overflow (+N more) -->\n                @if (slot.hasOverflow) {\n                  <div\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                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.min-height-0{min-height:0!important}.border-end:last-child{border-right:0!important}.day-number{width:24px;height:24px;border-radius:50%;font-size:.85rem;font-weight:500;transition:background-color .2s}.day-number.today{background-color:var(--bs-primary);color:#fff}.event-spacer{height:20px;width:100%;pointer-events:none}.hover-bg:hover{background-color:var(--bs-secondary-bg-subtle)}.cursor-pointer{cursor:pointer}.cdk-drag-preview{box-shadow:0 .5rem 1rem #0000004d;border-radius:var(--bs-border-radius-sm)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { view: [{
                 type: Input
             }], currentDate: [{
                 type: Input
             }], events: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], eventClick: [{
                 type: Output
             }], eventContainerClick: [{
@@ -3651,17 +4010,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: "17.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: "\n@switch (view) {\n  @case ('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    }\n    @case ('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      }\n      @case ('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        }\n        @default {\n          not implemented yet\n        }\n      }\n", styles: [""], dependencies: [{ 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: "\n@switch (view) {\n  @case ('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    }\n    @case ('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      }\n      @case ('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        }\n        @default {\n          not implemented yet\n        }\n      }\n" }]
         }], ctorParameters: () => [], propDecorators: { view: [{
                 type: Input
             }], currentDate: [{
                 type: Input
             }], events: [{
                 type: Input
+            }], layout: [{
+                type: Input
             }], eventClick: [{
                 type: Output
             }], eventContainerClick: [{
@@ -3679,6 +4040,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 +4057,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 +4310,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: "17.0.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  <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  </div>\n  @if (showToolbar) {\n    <rlb-calendar-header\n      [view]=\"view\"\n      [currentDate]=\"currentDate\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\">\n    </rlb-calendar-header>\n  }\n\n  <rlb-calendar-grid\n    [events]=\"events\"\n    [view]=\"view\"\n    [currentDate]=\"currentDate\"\n    [layout]=\"mergedLayout\"\n    (eventClick)=\"onEventClick($event)\"\n    (eventContainerClick)=\"onEventContainerClick($event)\"\n    (eventChange)=\"onEventChange($event)\"\n    >\n  </rlb-calendar-grid>\n\n</div>\n", styles: [""], dependencies: [{ 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  <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  </div>\n  @if (showToolbar) {\n    <rlb-calendar-header\n      [view]=\"view\"\n      [currentDate]=\"currentDate\"\n      (viewChange)=\"setView($event)\"\n      (dateChange)=\"setDate($event)\">\n    </rlb-calendar-header>\n  }\n\n  <rlb-calendar-grid\n    [events]=\"events\"\n    [view]=\"view\"\n    [currentDate]=\"currentDate\"\n    [layout]=\"mergedLayout\"\n    (eventClick)=\"onEventClick($event)\"\n    (eventContainerClick)=\"onEventContainerClick($event)\"\n    (eventChange)=\"onEventChange($event)\"\n    >\n  </rlb-calendar-grid>\n\n</div>\n" }]
         }], ctorParameters: () => [{ type: ModalService }, { type: UniqueIdService }, { type: ToastService }], propDecorators: { view: [{
                 type: Input,
                 args: [{ alias: 'view' }]
@@ -3957,13 +4323,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 +4349,7 @@ const CALENDAR_COMPONENTS = [
     CalendarHeaderComponent,
     CalendarGrid,
     CalendarWeekGridComponent,
+    CalendarDayGridComponent,
     CalendarMonthGridComponent,
     CalendarEventComponent
 ];
@@ -4016,45 +4386,59 @@ class ChatItemComponent {
         this.reply.emit(this.replayId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ChatItemComponent, isStandalone: false, selector: "rlb-chat-item", inputs: { id: "id", avatar: "avatar", text: "text", dateTime: ["date-time", "dateTime"], replayText: ["replay-text", "replayText"], replaySubject: ["replay-subject", "replaySubject"], replayId: ["replay-id", "replayId"], position: "position", reaction: "reaction", canReply: ["can-reply", "canReply"] }, outputs: { reply: "reply", reactionClick: "reaction-click", reactionSelector: "reaction-selector" }, host: { properties: { "class.ms-auto": "position === \"right\"" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChatItemComponent, isStandalone: false, selector: "rlb-chat-item", inputs: { id: "id", avatar: "avatar", text: "text", dateTime: ["date-time", "dateTime"], replayText: ["replay-text", "replayText"], replaySubject: ["replay-subject", "replaySubject"], replayId: ["replay-id", "replayId"], position: "position", reaction: "reaction", canReply: ["can-reply", "canReply"] }, outputs: { reply: "reply", reactionClick: "reaction-click", reactionSelector: "reaction-selector" }, host: { properties: { "class.ms-auto": "position === \"right\"" } }, ngImport: i0, template: `
   <div [id]="id" class="chat-bubble-item" [class.left]="position==='left'" [class.right]="position==='right'">
-    <button *ngIf="canReply && position === 'right'" class="reply-button" (click)="replyClick($event)">
-      <i class="bi bi-reply-fill"></i>
-    </button>
-    <div class="avatar small" *ngIf="position === 'left'">
-      <img [src]="avatar" alt="avatar">
-    </div>
-    <div class="text">
-      <div class="replied-message" *ngIf="replayText">
-        <span class="name">{{replaySubject}}</span>
-        <p>{{replayText}}</p>
+    @if (canReply && position === 'right') {
+      <button class="reply-button" (click)="replyClick($event)">
+        <i class="bi bi-reply-fill"></i>
+      </button>
+    }
+    @if (position === 'left') {
+      <div class="avatar small">
+        <img [src]="avatar" alt="avatar">
       </div>
+    }
+    <div class="text">
+      @if (replayText) {
+        <div class="replied-message">
+          <span class="name">{{replaySubject}}</span>
+          <p>{{replayText}}</p>
+        </div>
+      }
       <div>
         <ng-content/>
       </div>
       <i class="bi bi-check-all float-end"></i>
       <span class="time float-end">{{ dateTime | date:'dd/MM HH:mm:ss' }}</span>
       <rlb-dropdown direction="up" class="reaction">
-        <a rlb-button  rlb-dropdown *ngIf="!reaction"
+        @if (!reaction) {
+          <a rlb-button  rlb-dropdown
             autoClose="manual" class="reaction add p-1"
             [class.right]="position==='right'" [class.left]="position==='left'"
             (status-changed)="this.reactionSelector.emit($event)">
-          <i class="bi bi-plus m-0 p-0"></i>
-        </a>
+            <i class="bi bi-plus m-0 p-0"></i>
+          </a>
+        }
         <rlb-dropdown-container>
           <ng-content select="[reaction-picker]" />
         </rlb-dropdown-container>
       </rlb-dropdown>
-      <span class="reaction" *ngIf="reaction" [class.right]="position==='right'" [class.left]="position==='left'" (click)="reactionClick.emit('remove')">{{reaction}}</span>
-    </div>
-    <div class="avatar small" *ngIf="position === 'right'">
-      <img [src]="avatar" alt="avatar">
+      @if (reaction) {
+        <span class="reaction" [class.right]="position==='right'" [class.left]="position==='left'" (click)="reactionClick.emit('remove')">{{reaction}}</span>
+      }
     </div>
-    <button *ngIf="canReply && position === 'left'" class="reply-button" (click)="replyClick($event)">
-      <i class="bi bi-reply-fill"></i>
-    </button>
+    @if (position === 'right') {
+      <div class="avatar small">
+        <img [src]="avatar" alt="avatar">
+      </div>
+    }
+    @if (canReply && position === 'left') {
+      <button class="reply-button" (click)="replyClick($event)">
+        <i class="bi bi-reply-fill"></i>
+      </button>
+    }
   </div>
-  `, isInline: true, 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: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: DropdownComponent, selector: "rlb-dropdown", inputs: ["direction"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "directive", type: DropdownDirective, selector: "a[rlb-dropdown], button[rlb-dropdown], span[rlb-badge][rlb-dropdown]", inputs: ["offset", "auto-close"], outputs: ["status-changed"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChatItemComponent, decorators: [{
             type: Component,
@@ -4062,41 +4446,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: 'rlb-chat-item',
                     template: `
   <div [id]="id" class="chat-bubble-item" [class.left]="position==='left'" [class.right]="position==='right'">
-    <button *ngIf="canReply && position === 'right'" class="reply-button" (click)="replyClick($event)">
-      <i class="bi bi-reply-fill"></i>
-    </button>
-    <div class="avatar small" *ngIf="position === 'left'">
-      <img [src]="avatar" alt="avatar">
-    </div>
-    <div class="text">
-      <div class="replied-message" *ngIf="replayText">
-        <span class="name">{{replaySubject}}</span>
-        <p>{{replayText}}</p>
+    @if (canReply && position === 'right') {
+      <button class="reply-button" (click)="replyClick($event)">
+        <i class="bi bi-reply-fill"></i>
+      </button>
+    }
+    @if (position === 'left') {
+      <div class="avatar small">
+        <img [src]="avatar" alt="avatar">
       </div>
+    }
+    <div class="text">
+      @if (replayText) {
+        <div class="replied-message">
+          <span class="name">{{replaySubject}}</span>
+          <p>{{replayText}}</p>
+        </div>
+      }
       <div>
         <ng-content/>
       </div>
       <i class="bi bi-check-all float-end"></i>
       <span class="time float-end">{{ dateTime | date:'dd/MM HH:mm:ss' }}</span>
       <rlb-dropdown direction="up" class="reaction">
-        <a rlb-button  rlb-dropdown *ngIf="!reaction"
+        @if (!reaction) {
+          <a rlb-button  rlb-dropdown
             autoClose="manual" class="reaction add p-1"
             [class.right]="position==='right'" [class.left]="position==='left'"
             (status-changed)="this.reactionSelector.emit($event)">
-          <i class="bi bi-plus m-0 p-0"></i>
-        </a>
+            <i class="bi bi-plus m-0 p-0"></i>
+          </a>
+        }
         <rlb-dropdown-container>
           <ng-content select="[reaction-picker]" />
         </rlb-dropdown-container>
       </rlb-dropdown>
-      <span class="reaction" *ngIf="reaction" [class.right]="position==='right'" [class.left]="position==='left'" (click)="reactionClick.emit('remove')">{{reaction}}</span>
+      @if (reaction) {
+        <span class="reaction" [class.right]="position==='right'" [class.left]="position==='left'" (click)="reactionClick.emit('remove')">{{reaction}}</span>
+      }
     </div>
-    <div class="avatar small" *ngIf="position === 'right'">
-      <img [src]="avatar" alt="avatar">
-    </div>
-    <button *ngIf="canReply && position === 'left'" class="reply-button" (click)="replyClick($event)">
-      <i class="bi bi-reply-fill"></i>
-    </button>
+    @if (position === 'right') {
+      <div class="avatar small">
+        <img [src]="avatar" alt="avatar">
+      </div>
+    }
+    @if (canReply && position === 'left') {
+      <button class="reply-button" (click)="replyClick($event)">
+        <i class="bi bi-reply-fill"></i>
+      </button>
+    }
   </div>
   `,
                     host: { '[class.ms-auto]': 'position === "right"' },
@@ -4162,7 +4560,7 @@ class ListItemImageComponent {
         <span *ngIf="!counterEmpty"rlb-badge [pill]="counterPill" [color]="counterColor" [border]="counterBorder">{{ counter }}</span>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "class"] }, { kind: "component", type: AvatarComponent, selector: "rlb-avatar", inputs: ["size", "shape", "src", "class"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "class"] }, { kind: "component", type: AvatarComponent, selector: "rlb-avatar", inputs: ["size", "shape", "src", "class"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemImageComponent, decorators: [{
             type: Component,
@@ -4900,19 +5298,23 @@ class PaginationItemComponent {
         this.viewContainerRef.element.nativeElement.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationItemComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: PaginationItemComponent, isStandalone: false, selector: "rlb-pagination-item", inputs: { isIcon: ["isIcon", "isIcon", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], active: ["active", "active", booleanAttribute], cssClass: ["class", "cssClass"] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PaginationItemComponent, isStandalone: false, selector: "rlb-pagination-item", inputs: { isIcon: ["isIcon", "isIcon", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], active: ["active", "active", booleanAttribute], cssClass: ["class", "cssClass"] }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
     <ng-template #template>
       <li class="page-item {{ cssClass }}" [class.disabled]="disabled" [class.active]="active">
-        <a class="page-link d-block" *ngIf="isIcon; else e" [attr.disabled]="disabled">
+        @if (isIcon) {
+          <a class="page-link d-block" [attr.disabled]="disabled">
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+          </a>
+        } @else {
           <ng-container *ngTemplateOutlet="content"></ng-container>
-        </a>
+        }
         <ng-template #e>
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </ng-template>
       </li>
     </ng-template>
     <ng-template #content><ng-content /></ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationItemComponent, decorators: [{
             type: Component,
@@ -4921,16 +5323,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
     <ng-template #template>
       <li class="page-item {{ cssClass }}" [class.disabled]="disabled" [class.active]="active">
-        <a class="page-link d-block" *ngIf="isIcon; else e" [attr.disabled]="disabled">
+        @if (isIcon) {
+          <a class="page-link d-block" [attr.disabled]="disabled">
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+          </a>
+        } @else {
           <ng-container *ngTemplateOutlet="content"></ng-container>
-        </a>
+        }
         <ng-template #e>
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </ng-template>
       </li>
     </ng-template>
     <ng-template #content><ng-content /></ng-template>
-  `,
+    `,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { template: [{
@@ -5086,7 +5492,7 @@ class RlbPlaceholderComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RlbPlaceholderComponent, isStandalone: false, selector: "rlb-placeholder", inputs: { animation: "animation" }, ngImport: i0, template: `
 		<div [ngClass]="containerClass">
 			<ng-content/>
-		</div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+		</div>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbPlaceholderComponent, decorators: [{
             type: Component,
@@ -5118,18 +5524,19 @@ class RlbPlaceholderTextComponent {
         return Array.from({ length: this.lines }).map(() => this.width);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbPlaceholderTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RlbPlaceholderTextComponent, isStandalone: false, selector: "rlb-placeholder-text", inputs: { lines: "lines", size: "size", color: "color", animation: "animation", width: "width", height: "height", rounded: "rounded" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RlbPlaceholderTextComponent, isStandalone: false, selector: "rlb-placeholder-text", inputs: { lines: "lines", size: "size", color: "color", animation: "animation", width: "width", height: "height", rounded: "rounded" }, ngImport: i0, template: `
     <rlb-placeholder [animation]="animation">
-      <rlb-placeholder-line
-        *ngFor="let w of computedWidths"
-        [size]="size"
-        [color]="color"
-        [width]="w"
-        [rounded]="rounded"
-        [height]="height"
-      ></rlb-placeholder-line>
+      @for (w of computedWidths; track w) {
+        <rlb-placeholder-line
+          [size]="size"
+          [color]="color"
+          [width]="w"
+          [rounded]="rounded"
+          [height]="height"
+        ></rlb-placeholder-line>
+      }
     </rlb-placeholder>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RlbPlaceholderComponent, selector: "rlb-placeholder", inputs: ["animation"] }, { kind: "component", type: RlbPlaceholderLineComponent, selector: "rlb-placeholder-line", inputs: ["size", "color", "width", "height", "rounded"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: RlbPlaceholderComponent, selector: "rlb-placeholder", inputs: ["animation"] }, { kind: "component", type: RlbPlaceholderLineComponent, selector: "rlb-placeholder-line", inputs: ["size", "color", "width", "height", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbPlaceholderTextComponent, decorators: [{
             type: Component,
@@ -5138,16 +5545,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     standalone: false,
                     template: `
     <rlb-placeholder [animation]="animation">
-      <rlb-placeholder-line
-        *ngFor="let w of computedWidths"
-        [size]="size"
-        [color]="color"
-        [width]="w"
-        [rounded]="rounded"
-        [height]="height"
-      ></rlb-placeholder-line>
+      @for (w of computedWidths; track w) {
+        <rlb-placeholder-line
+          [size]="size"
+          [color]="color"
+          [width]="w"
+          [rounded]="rounded"
+          [height]="height"
+        ></rlb-placeholder-line>
+      }
     </rlb-placeholder>
-  `,
+    `,
                 }]
         }], propDecorators: { lines: [{
                 type: Input
@@ -5271,11 +5679,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,40 +5715,54 @@ 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.ɵ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: `
+    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: "17.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>
-      <li *ngIf="!title" (click)="onItemClick($event)">
-				<a
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
-					*ngIf="children?.length" href="javascript:void(0);"
-					class="is-parent has-arrow"
-					toggle="collapse"
-					[toggle-target]="'side-item' + _id"
-				>
-					<i *ngIf="icon" [class]="icon"></i>
-					<span>{{ label }}</span>
-				</a>
-				<rlb-collapse [id]="'side-item' + _id">
-					<ul class="sub-menu" aria-expanded="false">
-						<ng-content select="rlb-sidebar-item"></ng-content>
-					</ul>
-				</rlb-collapse>
-				<a
-					*ngIf="!children?.length"
-					[routerLink]="link"
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
-					class="side-nav-link-ref"
-					routerLinkActive="active"
-				>
-					<i *ngIf="icon" [class]="icon"></i>
-					<ng-content></ng-content>
-				</a>
-			</li>
+		  @if (title) {
+		    <li (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
+		  }
+		  @if (!title) {
+		    <li (click)="onItemClick($event)">
+		      @if (children?.length) {
+		        <a
+		          [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
+		          href="javascript:void(0);"
+		          class="is-parent has-arrow"
+		          toggle="collapse"
+		          [toggle-target]="'side-item' + _id"
+		          >
+		          @if (icon) {
+		            <i [class]="icon"></i>
+		          }
+		          <span>{{ label }}</span>
+		        </a>
+		      }
+		      <rlb-collapse [id]="'side-item' + _id">
+		        <ul class="sub-menu" aria-expanded="false">
+		          <ng-content select="rlb-sidebar-item"></ng-content>
+		        </ul>
+		      </rlb-collapse>
+		      @if (!children?.length) {
+		        <a
+		          [routerLink]="link"
+		          [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
+		          class="side-nav-link-ref"
+		          routerLinkActive="active"
+		          >
+		          @if (icon) {
+		            <i [class]="icon"></i>
+		          }
+		          <ng-content></ng-content>
+		        </a>
+		      }
+		    </li>
+		  }
 		</ng-template>
-	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: BadgeDirective, selector: "[badge]", inputs: ["badge", "badge-pill", "badge-border", "badge-top", "badge-start", "badge-color", "hidden-text"] }, { kind: "component", type: CollapseComponent, selector: "rlb-collapse", inputs: ["id", "orientation", "status"], outputs: ["statusChange"] }, { kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle]", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }] }); }
+		`, isInline: true, dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: BadgeDirective, selector: "[badge]", inputs: ["badge", "badge-pill", "badge-border", "badge-top", "badge-start", "badge-color", "hidden-text"] }, { kind: "component", type: CollapseComponent, selector: "rlb-collapse", inputs: ["id", "orientation", "status"], outputs: ["statusChange"] }, { kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle]", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -5329,39 +5770,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: 'rlb-sidebar-item',
                     template: `
 		<ng-template #template>
-      <li *ngIf="title" (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
-      <li *ngIf="!title" (click)="onItemClick($event)">
-				<a
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
-					*ngIf="children?.length" href="javascript:void(0);"
-					class="is-parent has-arrow"
-					toggle="collapse"
-					[toggle-target]="'side-item' + _id"
-				>
-					<i *ngIf="icon" [class]="icon"></i>
-					<span>{{ label }}</span>
-				</a>
-				<rlb-collapse [id]="'side-item' + _id">
-					<ul class="sub-menu" aria-expanded="false">
-						<ng-content select="rlb-sidebar-item"></ng-content>
-					</ul>
-				</rlb-collapse>
-				<a
-					*ngIf="!children?.length"
-					[routerLink]="link"
-					[badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
-					class="side-nav-link-ref"
-					routerLinkActive="active"
-				>
-					<i *ngIf="icon" [class]="icon"></i>
-					<ng-content></ng-content>
-				</a>
-			</li>
+		  @if (title) {
+		    <li (click)="onItemClick($event)" class="menu-title">{{ title }}</li>
+		  }
+		  @if (!title) {
+		    <li (click)="onItemClick($event)">
+		      @if (children?.length) {
+		        <a
+		          [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter.toString() : undefined"
+		          href="javascript:void(0);"
+		          class="is-parent has-arrow"
+		          toggle="collapse"
+		          [toggle-target]="'side-item' + _id"
+		          >
+		          @if (icon) {
+		            <i [class]="icon"></i>
+		          }
+		          <span>{{ label }}</span>
+		        </a>
+		      }
+		      <rlb-collapse [id]="'side-item' + _id">
+		        <ul class="sub-menu" aria-expanded="false">
+		          <ng-content select="rlb-sidebar-item"></ng-content>
+		        </ul>
+		      </rlb-collapse>
+		      @if (!children?.length) {
+		        <a
+		          [routerLink]="link"
+		          [badge]="badgeCounter && badgeCounter > 0 ? badgeCounter : undefined"
+		          class="side-nav-link-ref"
+		          routerLinkActive="active"
+		          >
+		          @if (icon) {
+		            <i [class]="icon"></i>
+		          }
+		          <ng-content></ng-content>
+		        </a>
+		      }
+		    </li>
+		  }
 		</ng-template>
-	`,
+		`,
                     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 +5919,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 +5949,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 +5993,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 {
@@ -6157,15 +6612,17 @@ class DataTableRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableRowComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DataTableRowComponent, isStandalone: false, selector: "rlb-dt-row", inputs: { cssClass: ["class", "cssClass"], cssStyle: ["style", "cssStyle"] }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "actionsBlock", predicate: DataTableActionsComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }, { propertyName: "_projectedActions", first: true, predicate: ["projectedActions"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DataTableRowComponent, isStandalone: false, selector: "rlb-dt-row", inputs: { cssClass: ["class", "cssClass"], cssStyle: ["style", "cssStyle"] }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "actionsBlock", predicate: DataTableActionsComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }, { propertyName: "_projectedActions", first: true, predicate: ["projectedActions"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     <ng-template #template>
       <tr [class]="cssClass" [style]="cssStyle" (click)="rowClick.emit($event)">
         <ng-content select="rlb-dt-cell"></ng-content>
-        <rlb-dt-cell *ngIf="hasActions">
-          <ng-container #projectedActions></ng-container>
-        </rlb-dt-cell>
+        @if (hasActions) {
+          <rlb-dt-cell>
+            <ng-container #projectedActions></ng-container>
+          </rlb-dt-cell>
+        }
       </tr>
-    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }] }); }
+    </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: DataTableCellComponent, selector: "rlb-dt-cell", inputs: ["col-span", "class", "style"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DataTableRowComponent, decorators: [{
             type: Component,
@@ -6175,9 +6632,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <ng-template #template>
       <tr [class]="cssClass" [style]="cssStyle" (click)="rowClick.emit($event)">
         <ng-content select="rlb-dt-cell"></ng-content>
-        <rlb-dt-cell *ngIf="hasActions">
-          <ng-container #projectedActions></ng-container>
-        </rlb-dt-cell>
+        @if (hasActions) {
+          <rlb-dt-cell>
+            <ng-container #projectedActions></ng-container>
+          </rlb-dt-cell>
+        }
       </tr>
     </ng-template>`,
                     standalone: false
@@ -6332,13 +6791,15 @@ class InputValidationComponent {
         return `${i18nKey}: ${JSON.stringify(errorValue)}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputValidationComponent, deps: [{ token: RLB_TRANSLATION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InputValidationComponent, isStandalone: false, selector: "rlb-input-validation", inputs: { errors: "errors" }, host: { classAttribute: "invalid-feedback" }, ngImport: i0, template: `
-		<ng-container *ngIf="errors">
-			<span *ngFor="let errorKey of getErrorKeys(errors)">
-				{{ getTranslatedError(errorKey, errors[errorKey]) }}
-			</span>
-		</ng-container>
-	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputValidationComponent, isStandalone: false, selector: "rlb-input-validation", inputs: { errors: "errors" }, host: { classAttribute: "invalid-feedback" }, ngImport: i0, template: `
+		@if (errors) {
+		  @for (errorKey of getErrorKeys(errors); track errorKey) {
+		    <span>
+		      {{ getTranslatedError(errorKey, errors[errorKey]) }}
+		    </span>
+		  }
+		}
+		`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputValidationComponent, decorators: [{
             type: Component,
@@ -6346,12 +6807,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: 'rlb-input-validation',
                     host: { class: 'invalid-feedback' },
                     template: `
-		<ng-container *ngIf="errors">
-			<span *ngFor="let errorKey of getErrorKeys(errors)">
-				{{ getTranslatedError(errorKey, errors[errorKey]) }}
-			</span>
-		</ng-container>
-	`,
+		@if (errors) {
+		  @for (errorKey of getErrorKeys(errors); track errorKey) {
+		    <span>
+		      {{ getTranslatedError(errorKey, errors[errorKey]) }}
+		    </span>
+		  }
+		}
+		`,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -6421,7 +6884,7 @@ class SelectComponent extends AbstractComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectComponent, deps: [{ token: UniqueIdService }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: SelectComponent, isStandalone: false, selector: "rlb-select", inputs: { placeholder: "placeholder", size: "size", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], display: ["display", "display", numberAttribute], userDefinedId: ["id", "userDefinedId", (v) => v || ''], enableValidation: ["enable-validation", "enableValidation", booleanAttribute] }, queries: [{ propertyName: "options", predicate: OptionComponent }], viewQueries: [{ propertyName: "el", first: true, predicate: ["select"], descendants: true }, { propertyName: "_projectedDisplayOptions", first: true, predicate: ["projectedDisplayOptions"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SelectComponent, isStandalone: false, selector: "rlb-select", inputs: { placeholder: "placeholder", size: "size", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], display: ["display", "display", numberAttribute], userDefinedId: ["id", "userDefinedId", (v) => v || ''], enableValidation: ["enable-validation", "enableValidation", booleanAttribute] }, queries: [{ propertyName: "options", predicate: OptionComponent }], viewQueries: [{ propertyName: "el", first: true, predicate: ["select"], descendants: true }, { propertyName: "_projectedDisplayOptions", first: true, predicate: ["projectedDisplayOptions"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation">
       <select
@@ -6441,13 +6904,17 @@ class SelectComponent extends AbstractComponent {
         'is-valid': control?.touched && control?.valid && enableValidation
         }"
         (change)="update($event.target)"
-      >
-        <option *ngIf="placeholder" selected disabled>{{ placeholder }}</option>
+        >
+        @if (placeholder) {
+          <option selected disabled>{{ placeholder }}</option>
+        }
         <ng-container #projectedDisplayOptions></ng-container>
       </select>
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }] }); }
+      @if (errors && showError) {
+        <rlb-input-validation [errors]="errors"/>
+      }
+    </div>
+    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -6473,12 +6940,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         'is-valid': control?.touched && control?.valid && enableValidation
         }"
         (change)="update($event.target)"
-      >
-        <option *ngIf="placeholder" selected disabled>{{ placeholder }}</option>
+        >
+        @if (placeholder) {
+          <option selected disabled>{{ placeholder }}</option>
+        }
         <ng-container #projectedDisplayOptions></ng-container>
       </select>
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
+      @if (errors && showError) {
+        <rlb-input-validation [errors]="errors"/>
+      }
+    </div>
     <ng-content select="[after]"></ng-content>`,
                     standalone: false
                 }]
@@ -6524,6 +6995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class DataTableComponent {
     constructor() {
         this.creationStrategy = 'none';
+        this.items = [];
         this.paginationMode = 'none';
         this.tableStriped = true; // default true to keep main table styling
         this.showActions = 'row';
@@ -6660,11 +7132,11 @@ class DataTableComponent {
         // 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            <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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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: "@if (creationStrategy !== 'none' || title || showRefresh) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (title) {\n        <h3 class=\"float-start\">{{ title }}</h3>\n      }\n      @if (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      }\n      @if (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      }\n      @if (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      }\n    </div>\n  </div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions) {\n          <th>\n            <span class=\"float-end pe-2\">\n              Actions\n            </span>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (!loading) {\n        <ng-content select=\"rlb-dt-row\"/>\n      }\n      @if (!loading && items.length === 0) {\n        <rlb-dt-row class=\"text-center\">\n          <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n            <ng-content select=\"rlb-dt-noitems\"/>\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      }\n      @if (loading) {\n        <rlb-dt-row class=\"text-center\">\n          <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n            <ng-content select=\"rlb-dt-loading\"/>\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      }\n    </tbody>\n    @if (pagination && paginationMode !== 'none') {\n      <tfoot>\n        <rlb-dt-row>\n          <rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n            @if (paginationMode === 'load-more') {\n              <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n                [disabled]=\"loading\" (click)=\"loadMore.emit()\">\n                {{ loadMoreLabel }}\n              </button>\n            }\n            @if (paginationMode === 'pages') {\n              <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                  @for (page of visiblePages; track page) {\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                  }\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                <ul class=\"ps-0 float-end me-3\">\n                  <rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n                    [disabled]=\"items.length === 0\">\n                    <rlb-option [value]=\"10\">10</rlb-option>\n                    <rlb-option [value]=\"20\">20</rlb-option>\n                    <rlb-option [value]=\"50\">50</rlb-option>\n                    <rlb-option [value]=\"100\">100</rlb-option>\n                  </rlb-select>\n                </ul>\n              </nav>\n            }\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      </tfoot>\n    }\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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            <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" }]
+            args: [{ selector: 'rlb-dt-table', standalone: false, template: "@if (creationStrategy !== 'none' || title || showRefresh) {\n  <div class=\"row\">\n    <div class=\"col\">\n      @if (title) {\n        <h3 class=\"float-start\">{{ title }}</h3>\n      }\n      @if (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      }\n      @if (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      }\n      @if (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      }\n    </div>\n  </div>\n}\n<div class=\"table-responsive\">\n  <table [ngClass]=\"getTableClasses()\">\n    <thead>\n      <tr>\n        <ng-container #projectedDisplayColumns></ng-container>\n        @if (hasActions) {\n          <th>\n            <span class=\"float-end pe-2\">\n              Actions\n            </span>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (!loading) {\n        <ng-content select=\"rlb-dt-row\"/>\n      }\n      @if (!loading && items.length === 0) {\n        <rlb-dt-row class=\"text-center\">\n          <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n            <ng-content select=\"rlb-dt-noitems\"/>\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      }\n      @if (loading) {\n        <rlb-dt-row class=\"text-center\">\n          <rlb-dt-cell [col-span]=\"cols\" style=\"border: 0\">\n            <ng-content select=\"rlb-dt-loading\"/>\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      }\n    </tbody>\n    @if (pagination && paginationMode !== 'none') {\n      <tfoot>\n        <rlb-dt-row>\n          <rlb-dt-cell [col-span]=\"hasActions ? cols+1: cols\" style=\"border: 0\">\n            @if (paginationMode === 'load-more') {\n              <button type=\"button\" class=\"btn btn-primary float-end btn-sm mt-2\"\n                [disabled]=\"loading\" (click)=\"loadMore.emit()\">\n                {{ loadMoreLabel }}\n              </button>\n            }\n            @if (paginationMode === 'pages') {\n              <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                  @for (page of visiblePages; track page) {\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                  }\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                <ul class=\"ps-0 float-end me-3\">\n                  <rlb-select size=\"small\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"selectSize()\"\n                    [disabled]=\"items.length === 0\">\n                    <rlb-option [value]=\"10\">10</rlb-option>\n                    <rlb-option [value]=\"20\">20</rlb-option>\n                    <rlb-option [value]=\"50\">50</rlb-option>\n                    <rlb-option [value]=\"100\">100</rlb-option>\n                  </rlb-select>\n                </ul>\n              </nav>\n            }\n          </rlb-dt-cell>\n        </rlb-dt-row>\n      </tfoot>\n    }\n  </table>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{ alias: 'title' }]
@@ -8355,7 +8827,7 @@ class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteCountryDialCodeComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: AutocompleteCountryDialCodeComponent, isStandalone: false, selector: "rlb-autocomplete-country-dial-code", inputs: { enableFlagIcons: ["enable-flag-icons", "enableFlagIcons", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AutocompleteCountryDialCodeComponent, isStandalone: false, selector: "rlb-autocomplete-country-dial-code", inputs: { enableFlagIcons: ["enable-flag-icons", "enableFlagIcons", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation">
       <input
@@ -8363,8 +8835,8 @@ class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent
         [id]="id"
         class="form-control"
         type="text"
-				[attr.autocomplete]="'off'"
-				[attr.disabled]="disabled ? true : undefined"
+        [attr.autocomplete]="'off'"
+        [attr.disabled]="disabled ? true : undefined"
         [attr.readonly]="readonly ? true : undefined"
         [attr.placeholder]="placeholder"
         [class.form-control-lg]="size === 'large'"
@@ -8375,25 +8847,28 @@ class AutocompleteCountryDialCodeComponent extends AbstractAutocompleteComponent
         'is-valid': control?.touched && control?.valid
         }"
         (input)="update($event.target)"
-      />
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-relative"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight">
-    </div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+        />
+        @if (errors && showError) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-relative"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight">
+      </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteCountryDialCodeComponent, decorators: [{
             type: Component,
@@ -8407,8 +8882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [id]="id"
         class="form-control"
         type="text"
-				[attr.autocomplete]="'off'"
-				[attr.disabled]="disabled ? true : undefined"
+        [attr.autocomplete]="'off'"
+        [attr.disabled]="disabled ? true : undefined"
         [attr.readonly]="readonly ? true : undefined"
         [attr.placeholder]="placeholder"
         [class.form-control-lg]="size === 'large'"
@@ -8419,25 +8894,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         'is-valid': control?.touched && control?.valid
         }"
         (input)="update($event.target)"
-      />
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-relative"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight">
-    </div>
-   `,
+        />
+        @if (errors && showError) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-relative"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight">
+      </div>
+    `,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
@@ -8695,7 +9173,7 @@ class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteCountryComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: AutocompleteCountryComponent, isStandalone: false, selector: "rlb-autocomplete-country", inputs: { enableFlagIcons: ["enable-flag-icons", "enableFlagIcons", booleanAttribute], enableValidation: ["enable-validation", "enableValidation", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AutocompleteCountryComponent, isStandalone: false, selector: "rlb-autocomplete-country", inputs: { enableFlagIcons: ["enable-flag-icons", "enableFlagIcons", booleanAttribute], enableValidation: ["enable-validation", "enableValidation", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation">
       <input
@@ -8703,8 +9181,8 @@ class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
         [id]="id"
         class="form-control"
         type="text"
-				[attr.autocomplete]="'off'"
-				[attr.disabled]="disabled ? true : undefined"
+        [attr.autocomplete]="'off'"
+        [attr.disabled]="disabled ? true : undefined"
         [attr.readonly]="readonly ? true : undefined"
         [attr.placeholder]="placeholder"
         [class.form-control-lg]="size === 'large'"
@@ -8715,25 +9193,28 @@ class AutocompleteCountryComponent extends AbstractAutocompleteComponent {
   				'is-valid': control?.touched && control?.valid && enableValidation
 				}"
         (input)="update($event.target)"
-      />
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-relative"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight">
-    </div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+        />
+        @if (errors && showError) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-relative"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight">
+      </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteCountryComponent, decorators: [{
             type: Component,
@@ -8747,8 +9228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [id]="id"
         class="form-control"
         type="text"
-				[attr.autocomplete]="'off'"
-				[attr.disabled]="disabled ? true : undefined"
+        [attr.autocomplete]="'off'"
+        [attr.disabled]="disabled ? true : undefined"
         [attr.readonly]="readonly ? true : undefined"
         [attr.placeholder]="placeholder"
         [class.form-control-lg]="size === 'large'"
@@ -8759,25 +9240,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   				'is-valid': control?.touched && control?.valid && enableValidation
 				}"
         (input)="update($event.target)"
-      />
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-relative"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight">
-    </div>
-   `,
+        />
+        @if (errors && showError) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-relative"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight">
+      </div>
+    `,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
@@ -8823,7 +9307,7 @@ class AutocompleteTimezonesComponent extends AbstractAutocompleteComponent {
         return '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteTimezonesComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: AutocompleteTimezonesComponent, isStandalone: false, selector: "rlb-autocomplete-timezones", inputs: { enableFlagIcons: ["enable-flag-icons", "enableFlagIcons", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AutocompleteTimezonesComponent, isStandalone: false, selector: "rlb-autocomplete-timezones", inputs: { enableFlagIcons: ["enable-flag-icons", "enableFlagIcons", booleanAttribute] }, usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation">
       <input
@@ -8834,8 +9318,8 @@ class AutocompleteTimezonesComponent extends AbstractAutocompleteComponent {
         [attr.disabled]="disabled ? true : undefined"
         [attr.readonly]="readonly ? true : undefined"
         [attr.placeholder]="placeholder"
-				[attr.autocomplete]="'off'"
-				[class.form-control-lg]="size === 'large'"
+        [attr.autocomplete]="'off'"
+        [class.form-control-lg]="size === 'large'"
         [class.form-control-sm]="size === 'small'"
         (blur)="touch()"
 				[ngClass]="{
@@ -8843,25 +9327,28 @@ class AutocompleteTimezonesComponent extends AbstractAutocompleteComponent {
         'is-valid': control?.touched && control?.valid
         }"
         (input)="update($event.target)"
-      />
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-relative"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight">
-    </div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+        />
+        @if (errors && showError) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-relative"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight">
+      </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteTimezonesComponent, decorators: [{
             type: Component,
@@ -8878,8 +9365,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [attr.disabled]="disabled ? true : undefined"
         [attr.readonly]="readonly ? true : undefined"
         [attr.placeholder]="placeholder"
-				[attr.autocomplete]="'off'"
-				[class.form-control-lg]="size === 'large'"
+        [attr.autocomplete]="'off'"
+        [class.form-control-lg]="size === 'large'"
         [class.form-control-sm]="size === 'small'"
         (blur)="touch()"
 				[ngClass]="{
@@ -8887,25 +9374,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         'is-valid': control?.touched && control?.valid
         }"
         (input)="update($event.target)"
-      />
-			<rlb-input-validation *ngIf="errors && showError" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-relative"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight">
-    </div>
-   `,
+        />
+        @if (errors && showError) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-relative"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight">
+      </div>
+    `,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.Renderer2 }, { type: i2$2.NgControl, decorators: [{
@@ -9080,7 +9570,7 @@ class AutocompleteComponent extends AbstractComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteComponent, deps: [{ token: UniqueIdService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: AutocompleteComponent, isStandalone: false, selector: "rlb-autocomplete", inputs: { disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], loading: ["loading", "loading", booleanAttribute], maxHeight: ["max-height", "maxHeight", numberAttribute], placeholder: "placeholder", autocomplete: "autocomplete", type: "type", size: "size", charsToSearch: ["chars-to-search", "charsToSearch", numberAttribute], menuMaxWidth: ["menu-max-width", "menuMaxWidth", numberAttribute], userDefinedId: ["id", "userDefinedId", (v) => v || ''], enableValidation: ["enable-validation", "enableValidation", booleanAttribute], inputAutocomplete: "inputAutocomplete" }, outputs: { selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" }, styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AutocompleteComponent, isStandalone: false, selector: "rlb-autocomplete", inputs: { disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], loading: ["loading", "loading", booleanAttribute], maxHeight: ["max-height", "maxHeight", numberAttribute], placeholder: "placeholder", autocomplete: "autocomplete", type: "type", size: "size", charsToSearch: ["chars-to-search", "charsToSearch", numberAttribute], menuMaxWidth: ["menu-max-width", "menuMaxWidth", numberAttribute], userDefinedId: ["id", "userDefinedId", (v) => v || ''], enableValidation: ["enable-validation", "enableValidation", booleanAttribute], inputAutocomplete: "inputAutocomplete" }, outputs: { selected: "selected" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown.escape": "onEscape($event)" }, styleAttribute: "position: relative;" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["autocomplete"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-content select="[before]"></ng-content>
     <div class="input-group has-validation">
       <input
@@ -9102,26 +9592,29 @@ class AutocompleteComponent extends AbstractComponent {
         }"
         (input)="update($event.target)"
         (keyup.enter)="onEnter($event.target)"
-      />
-      <rlb-input-validation *ngIf="errors && showError && enableValidation" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-absolute"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight"
-      [style.width]="'fit-content !important'"
+        />
+        @if (errors && showError && enableValidation) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-absolute"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight"
+        [style.width]="'fit-content !important'"
       [style.max-width.px]="menuMaxWidth"></div>
-   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -9149,26 +9642,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }"
         (input)="update($event.target)"
         (keyup.enter)="onEnter($event.target)"
-      />
-      <rlb-input-validation *ngIf="errors && showError && enableValidation" [errors]="errors"/>
-		</div>
-		<rlb-progress
-			*ngIf="loading || acLoading"
-			[height]="2"
-			[infinite]="loading || acLoading"
-			color="primary"
-			class="w-100"
-		/>
-    <ng-content select="[after]"></ng-content>
-    <div
-      #autocomplete
-      [id]="id+'-ac'"
-      class="dropdown-menu overflow-y-auto w-100 position-absolute"
-      aria-labelledby="dropdownMenu"
-      [style.max-height.px]="maxHeight"
-      [style.width]="'fit-content !important'"
+        />
+        @if (errors && showError && enableValidation) {
+          <rlb-input-validation [errors]="errors"/>
+        }
+      </div>
+      @if (loading || acLoading) {
+        <rlb-progress
+          [height]="2"
+          [infinite]="loading || acLoading"
+          color="primary"
+          class="w-100"
+          />
+      }
+      <ng-content select="[after]"></ng-content>
+      <div
+        #autocomplete
+        [id]="id+'-ac'"
+        class="dropdown-menu overflow-y-auto w-100 position-absolute"
+        aria-labelledby="dropdownMenu"
+        [style.max-height.px]="maxHeight"
+        [style.width]="'fit-content !important'"
       [style.max-width.px]="menuMaxWidth"></div>
-   `,
+    `,
                     standalone: false,
                     host: {
                         style: 'position: relative;',
@@ -9297,7 +9793,7 @@ class CheckboxComponent extends AbstractComponent {
         {{ errors | json }}
       </div>
       <ng-content select="[after]"></ng-content>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -9385,7 +9881,7 @@ class ColorComponent extends AbstractComponent {
         {{ errors | json }}
       </div>
     </div>
-    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorComponent, decorators: [{
             type: Component,
@@ -9482,7 +9978,7 @@ class DatalistComponent extends AbstractComponent {
         {{ errors | json }}
       </div>
     </div>
-    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DatalistComponent, decorators: [{
             type: Component,
@@ -9650,7 +10146,7 @@ class FileDndComponent {
         return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileDndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: FileDndComponent, isStandalone: false, selector: "rlb-file-dnd", inputs: { multiple: ["multiple", "multiple", booleanAttribute], data: "data", userDefinedId: ["id", "userDefinedId", (v) => v || ''] }, outputs: { filesChange: "files" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileDndComponent, isStandalone: false, selector: "rlb-file-dnd", inputs: { multiple: ["multiple", "multiple", booleanAttribute], data: "data", userDefinedId: ["id", "userDefinedId", (v) => v || ''] }, outputs: { filesChange: "files" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true }], ngImport: i0, template: `
     <div class="rlb-file-dnd" rlb-dnd [multiple]="multiple" (fileDropped)="onFileDropped($event)">
       <input type="file" #fileDropRef id="fileDropRef" [attr.multiple]="multiple?'':undefined" (change)="fileBrowseHandler($event)" />
       <i class="bi bi-upload"></i>
@@ -9659,18 +10155,20 @@ class FileDndComponent {
       <label class="btn btn-primary" for="fileDropRef">{{ data.content?.button }}</label>
     </div>
     <div class="rlb-file-dnd-list">
-      <div class="single-file" *ngFor="let file of files; let i = index">
-        <i class="bi bi-file-earmark-image" style="font-size: 36px;"></i>
-        <div class="info">
-          <span class="d-block name"> {{ file.name }} </span>
-          <span class="d-block size">{{ formatBytes(file.size) }}</span>
-          <rlb-progress [height]="3" [value]="10" animated ></rlb-progress>
+      @for (file of files; track file; let i = $index) {
+        <div class="single-file">
+          <i class="bi bi-file-earmark-image" style="font-size: 36px;"></i>
+          <div class="info">
+            <span class="d-block name"> {{ file.name }} </span>
+            <span class="d-block size">{{ formatBytes(file.size) }}</span>
+            <rlb-progress [height]="3" [value]="10" animated ></rlb-progress>
+          </div>
+          <button rlb-button outline class="p-0 mb-auto border-0">
+            <i class="bi bi-trash" (click)="deleteFile(file)"></i>
+          </button>
         </div>
-        <button rlb-button outline class="p-0 mb-auto border-0">
-          <i class="bi bi-trash" (click)="deleteFile(file)"></i>
-        </button>
-      </div>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DndDirective, selector: "[rlb-dnd]", inputs: ["multiple"], outputs: ["fileDropped"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
+      }
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: DndDirective, selector: "[rlb-dnd]", inputs: ["multiple"], outputs: ["fileDropped"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileDndComponent, decorators: [{
             type: Component,
@@ -9685,17 +10183,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <label class="btn btn-primary" for="fileDropRef">{{ data.content?.button }}</label>
     </div>
     <div class="rlb-file-dnd-list">
-      <div class="single-file" *ngFor="let file of files; let i = index">
-        <i class="bi bi-file-earmark-image" style="font-size: 36px;"></i>
-        <div class="info">
-          <span class="d-block name"> {{ file.name }} </span>
-          <span class="d-block size">{{ formatBytes(file.size) }}</span>
-          <rlb-progress [height]="3" [value]="10" animated ></rlb-progress>
+      @for (file of files; track file; let i = $index) {
+        <div class="single-file">
+          <i class="bi bi-file-earmark-image" style="font-size: 36px;"></i>
+          <div class="info">
+            <span class="d-block name"> {{ file.name }} </span>
+            <span class="d-block size">{{ formatBytes(file.size) }}</span>
+            <rlb-progress [height]="3" [value]="10" animated ></rlb-progress>
+          </div>
+          <button rlb-button outline class="p-0 mb-auto border-0">
+            <i class="bi bi-trash" (click)="deleteFile(file)"></i>
+          </button>
         </div>
-        <button rlb-button outline class="p-0 mb-auto border-0">
-          <i class="bi bi-trash" (click)="deleteFile(file)"></i>
-        </button>
-      </div>
+      }
     </div>`,
                     standalone: false
                 }]
@@ -9762,7 +10262,7 @@ class FileComponent extends AbstractComponent {
         {{ errors | json }}
       </div>
     </div>
-    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
@@ -9989,34 +10489,36 @@ class InputComponent extends AbstractComponent {
         return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputComponent, deps: [{ token: i0.ViewContainerRef }, { token: UniqueIdService }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: InputComponent, isStandalone: false, selector: "rlb-input", inputs: { disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], beforeText: ["before-text", "beforeText", booleanAttribute], placeholder: "placeholder", type: "type", size: "size", name: "name", max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], step: ["step", "step", numberAttribute], dateType: ["date-type", "dateType"], timezone: "timezone", userDefinedId: ["id", "userDefinedId", (v) => v || ''], extValidation: ["extValidation", "extValidation", booleanAttribute], enableValidation: ["enable-validation", "enableValidation", booleanAttribute] }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputComponent, isStandalone: false, selector: "rlb-input", inputs: { disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], beforeText: ["before-text", "beforeText", booleanAttribute], placeholder: "placeholder", type: "type", size: "size", name: "name", max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], step: ["step", "step", numberAttribute], dateType: ["date-type", "dateType"], timezone: "timezone", userDefinedId: ["id", "userDefinedId", (v) => v || ''], extValidation: ["extValidation", "extValidation", booleanAttribute], enableValidation: ["enable-validation", "enableValidation", booleanAttribute] }, viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
   <ng-template #template>
     <ng-content select="[before]"></ng-content>
-      <input
-        #field
-        [id]="id"
-        class="form-control"
-        [type]="_type"
-        [name]="name"
-        [attr.max]="type === 'number' && max !== null && max !== undefined ? max : undefined"
-        [attr.min]="type === 'number' && min !== null && min !== undefined ? min : undefined"
-        [attr.step]="type === 'number' && step !== null && step !== undefined ? step : undefined"
-        [attr.disabled]="disabled ? true : undefined"
-        [attr.readonly]="readonly ? true : undefined"
-        [attr.placeholder]="placeholder"
-        [class.form-control-lg]="size === 'large'"
-        [class.form-control-sm]="size === 'small'"
-        [value]="value || ''"
-        (blur)="touch()"
+    <input
+      #field
+      [id]="id"
+      class="form-control"
+      [type]="_type"
+      [name]="name"
+      [attr.max]="type === 'number' && max !== null && max !== undefined ? max : undefined"
+      [attr.min]="type === 'number' && min !== null && min !== undefined ? min : undefined"
+      [attr.step]="type === 'number' && step !== null && step !== undefined ? step : undefined"
+      [attr.disabled]="disabled ? true : undefined"
+      [attr.readonly]="readonly ? true : undefined"
+      [attr.placeholder]="placeholder"
+      [class.form-control-lg]="size === 'large'"
+      [class.form-control-sm]="size === 'small'"
+      [value]="value || ''"
+      (blur)="touch()"
 				[ngClass]="{
         'is-invalid': control?.touched && control?.invalid && enableValidation,
         'is-valid': control?.touched && control?.valid && enableValidation
         }"
-        (input)="update($event.target)"
+      (input)="update($event.target)"
       />
-		<rlb-input-validation *ngIf="!extValidation && showError" [errors]="errors"/>
-    <ng-content select="[after]"></ng-content>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }] }); }
+      @if (!extValidation && showError) {
+        <rlb-input-validation [errors]="errors"/>
+      }
+      <ng-content select="[after]"></ng-content>
+    </ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -10025,31 +10527,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
   <ng-template #template>
     <ng-content select="[before]"></ng-content>
-      <input
-        #field
-        [id]="id"
-        class="form-control"
-        [type]="_type"
-        [name]="name"
-        [attr.max]="type === 'number' && max !== null && max !== undefined ? max : undefined"
-        [attr.min]="type === 'number' && min !== null && min !== undefined ? min : undefined"
-        [attr.step]="type === 'number' && step !== null && step !== undefined ? step : undefined"
-        [attr.disabled]="disabled ? true : undefined"
-        [attr.readonly]="readonly ? true : undefined"
-        [attr.placeholder]="placeholder"
-        [class.form-control-lg]="size === 'large'"
-        [class.form-control-sm]="size === 'small'"
-        [value]="value || ''"
-        (blur)="touch()"
+    <input
+      #field
+      [id]="id"
+      class="form-control"
+      [type]="_type"
+      [name]="name"
+      [attr.max]="type === 'number' && max !== null && max !== undefined ? max : undefined"
+      [attr.min]="type === 'number' && min !== null && min !== undefined ? min : undefined"
+      [attr.step]="type === 'number' && step !== null && step !== undefined ? step : undefined"
+      [attr.disabled]="disabled ? true : undefined"
+      [attr.readonly]="readonly ? true : undefined"
+      [attr.placeholder]="placeholder"
+      [class.form-control-lg]="size === 'large'"
+      [class.form-control-sm]="size === 'small'"
+      [value]="value || ''"
+      (blur)="touch()"
 				[ngClass]="{
         'is-invalid': control?.touched && control?.invalid && enableValidation,
         'is-valid': control?.touched && control?.valid && enableValidation
         }"
-        (input)="update($event.target)"
+      (input)="update($event.target)"
       />
-		<rlb-input-validation *ngIf="!extValidation && showError" [errors]="errors"/>
-    <ng-content select="[after]"></ng-content>
-  </ng-template>`,
+      @if (!extValidation && showError) {
+        <rlb-input-validation [errors]="errors"/>
+      }
+      <ng-content select="[after]"></ng-content>
+    </ng-template>`,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: UniqueIdService }, { type: i2$2.NgControl, decorators: [{
@@ -10188,10 +10692,10 @@ class RadioComponent extends AbstractComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: RadioComponent, isStandalone: false, selector: "rlb-radio", inputs: { disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], userDefinedId: ["id", "userDefinedId", (v) => v || ''] }, queries: [{ propertyName: "options", predicate: OptionComponent }], viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true }, { propertyName: "contents", predicate: ["content"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RadioComponent, isStandalone: false, selector: "rlb-radio", inputs: { disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], userDefinedId: ["id", "userDefinedId", (v) => v || ''] }, queries: [{ propertyName: "options", predicate: OptionComponent }], viewQueries: [{ propertyName: "el", first: true, predicate: ["field"], descendants: true }, { propertyName: "contents", predicate: ["content"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: `
     <div class="input-group has-validation">
       <ng-content select="[before]"></ng-content>
-      <ng-container *ngFor="let option of options; index as i">
+      @for (option of options; track option; let i = $index) {
         <div class="form-check">
           <input
             #field
@@ -10206,15 +10710,15 @@ class RadioComponent extends AbstractComponent {
             (blur)="touch()"
             [ngClass]="{ 'is-invalid': control?.touched && control?.invalid }"
             (change)="update($event.target)"
-          />
-          <span #content></span>
+            />
+            <span #content></span>
+          </div>
+        }
+        <ng-content select="[after]"></ng-content>
+        <div class="invalid-feedback">
+          {{ errors | json }}
         </div>
-      </ng-container> 
-      <ng-content select="[after]"></ng-content>
-      <div class="invalid-feedback">
-        {{ errors | json }}
-      </div>
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+      </div>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -10223,7 +10727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
     <div class="input-group has-validation">
       <ng-content select="[before]"></ng-content>
-      <ng-container *ngFor="let option of options; index as i">
+      @for (option of options; track option; let i = $index) {
         <div class="form-check">
           <input
             #field
@@ -10238,15 +10742,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             (blur)="touch()"
             [ngClass]="{ 'is-invalid': control?.touched && control?.invalid }"
             (change)="update($event.target)"
-          />
-          <span #content></span>
+            />
+            <span #content></span>
+          </div>
+        }
+        <ng-content select="[after]"></ng-content>
+        <div class="invalid-feedback">
+          {{ errors | json }}
         </div>
-      </ng-container> 
-      <ng-content select="[after]"></ng-content>
-      <div class="invalid-feedback">
-        {{ errors | json }}
-      </div>
-    </div>`,
+      </div>`,
                     standalone: false
                 }]
         }], propDecorators: { disabled: [{
@@ -10313,7 +10817,7 @@ class RangeComponent extends AbstractComponent {
         {{ errors | json }}
       </div>
     </div>
-    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
@@ -10425,7 +10929,7 @@ class SwitchComponent extends AbstractComponent {
 
         <ng-content select="[after]"></ng-content>
       </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -10518,7 +11022,7 @@ class TextAreaComponent extends AbstractComponent {
         {{ errors | json }}
       </div>
     </div>
-    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    <ng-content select="[after]"></ng-content>`, isInline: true, dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -10652,11 +11156,11 @@ class FormFieldsComponent {
         this.form.onSubmit({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.16", type: FormFieldsComponent, isStandalone: false, selector: "rlb-form-fields", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], noSubmit: ["no-submit", "noSubmit", booleanAttribute], noCard: ["no-card", "noCard", booleanAttribute], fields: "fields" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["ngForm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"noCard; else card\">\n  <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n</ng-container>\n\n<ng-template #card>\n  <div class=\"card mb-3\">\n    <div class=\"card-body\">\n      <h5 class=\"card-title\" *ngIf=\"title\">{{ title | translate }}</h5>\n      <p class=\"card-text\" *ngIf=\"subTitle\">{{ subTitle | translate }}</p>\n      <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #form>\n  <form\n    *ngIf=\"filterForm\"\n    [formGroup]=\"filterForm\"\n    [class.was-validated]=\"ngForm.submitted\"\n    class=\"needs-validation\"\n    #ngForm=\"ngForm\"\n    (ngSubmit)=\"onFilterSubmit()\"\n  >\n    <div class=\"row\">\n      <div\n        class=\"col\"\n        [ngClass]=\"input.cols\"\n        *ngFor=\"let input of _fields; trackBy: identify\"\n      >\n        <div class=\"mb-3\">\n          <ng-container *ngIf=\"isText(input.type)\">\n            <rlb-input\n              [formControlName]=\"input.property\"\n              [type]=\"input.type\"\n              [placeholder]=\"input.name | translate\"\n            >\n              <ng-container *ngIf=\"input.label\" before>\n                <span #after [innerHTML]=\"\">\n                  {{ input.label | translate }}\n                </span>\n              </ng-container>\n            </rlb-input>\n          </ng-container>\n          <ng-container *ngIf=\"isSwitch(input.type)\">\n            <rlb-switch\n              [formControlName]=\"input.property\"\n            />\n          </ng-container>\n        </div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"!noSubmit\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <button\n            class=\"btn btn-primary float-end\"\n            [disabled]=\"!filterForm.valid\"\n          >\n            {{ \"common.filter\" | translate }}\n          </button>\n        </div>\n      </div>\n    </ng-container>\n  </form>\n</ng-template>\n", styles: [""], 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldsComponent, isStandalone: false, selector: "rlb-form-fields", inputs: { title: "title", subTitle: ["sub-title", "subTitle"], noSubmit: ["no-submit", "noSubmit", booleanAttribute], noCard: ["no-card", "noCard", booleanAttribute], fields: "fields" }, outputs: { submit: "submit" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["ngForm"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (noCard) {\n  <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n} @else {\n  <div class=\"card mb-3\">\n    <div class=\"card-body\">\n      @if (title) {\n        <h5 class=\"card-title\">{{ title | translate }}</h5>\n      }\n      @if (subTitle) {\n        <p class=\"card-text\">{{ subTitle | translate }}</p>\n      }\n      <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n    </div>\n  </div>\n}\n\n\n<ng-template #form>\n  @if (filterForm) {\n    <form\n      [formGroup]=\"filterForm\"\n      [class.was-validated]=\"ngForm.submitted\"\n      class=\"needs-validation\"\n      #ngForm=\"ngForm\"\n      (ngSubmit)=\"onFilterSubmit()\"\n      >\n      <div class=\"row\">\n        @for (input of _fields; track identify($index, input)) {\n          <div\n            class=\"col\"\n            [ngClass]=\"input.cols\"\n            >\n            <div class=\"mb-3\">\n              @if (isText(input.type)) {\n                <rlb-input\n                  [formControlName]=\"input.property\"\n                  [type]=\"input.type\"\n                  [placeholder]=\"input.name | translate\"\n                  >\n                  @if (input.label) {\n                    <ng-container before>\n                      <span #after>\n                        {{ input.label | translate }}\n                      </span>\n                    </ng-container>\n                  }\n                </rlb-input>\n              }\n              @if (isSwitch(input.type)) {\n                <rlb-switch\n                  [formControlName]=\"input.property\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n        @if (!noSubmit) {\n          <div class=\"row\">\n            <div class=\"col\">\n              <button\n                class=\"btn btn-primary float-end\"\n                [disabled]=\"!filterForm.valid\"\n                >\n                {{ \"common.filter\" | translate }}\n              </button>\n            </div>\n          </div>\n        }\n      </form>\n    }\n  </ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-form-fields', standalone: false, template: "<ng-container *ngIf=\"noCard; else card\">\n  <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n</ng-container>\n\n<ng-template #card>\n  <div class=\"card mb-3\">\n    <div class=\"card-body\">\n      <h5 class=\"card-title\" *ngIf=\"title\">{{ title | translate }}</h5>\n      <p class=\"card-text\" *ngIf=\"subTitle\">{{ subTitle | translate }}</p>\n      <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #form>\n  <form\n    *ngIf=\"filterForm\"\n    [formGroup]=\"filterForm\"\n    [class.was-validated]=\"ngForm.submitted\"\n    class=\"needs-validation\"\n    #ngForm=\"ngForm\"\n    (ngSubmit)=\"onFilterSubmit()\"\n  >\n    <div class=\"row\">\n      <div\n        class=\"col\"\n        [ngClass]=\"input.cols\"\n        *ngFor=\"let input of _fields; trackBy: identify\"\n      >\n        <div class=\"mb-3\">\n          <ng-container *ngIf=\"isText(input.type)\">\n            <rlb-input\n              [formControlName]=\"input.property\"\n              [type]=\"input.type\"\n              [placeholder]=\"input.name | translate\"\n            >\n              <ng-container *ngIf=\"input.label\" before>\n                <span #after [innerHTML]=\"\">\n                  {{ input.label | translate }}\n                </span>\n              </ng-container>\n            </rlb-input>\n          </ng-container>\n          <ng-container *ngIf=\"isSwitch(input.type)\">\n            <rlb-switch\n              [formControlName]=\"input.property\"\n            />\n          </ng-container>\n        </div>\n      </div>\n    </div>\n    <ng-container *ngIf=\"!noSubmit\">\n      <div class=\"row\">\n        <div class=\"col\">\n          <button\n            class=\"btn btn-primary float-end\"\n            [disabled]=\"!filterForm.valid\"\n          >\n            {{ \"common.filter\" | translate }}\n          </button>\n        </div>\n      </div>\n    </ng-container>\n  </form>\n</ng-template>\n" }]
+            args: [{ selector: 'rlb-form-fields', standalone: false, template: "@if (noCard) {\n  <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n} @else {\n  <div class=\"card mb-3\">\n    <div class=\"card-body\">\n      @if (title) {\n        <h5 class=\"card-title\">{{ title | translate }}</h5>\n      }\n      @if (subTitle) {\n        <p class=\"card-text\">{{ subTitle | translate }}</p>\n      }\n      <ng-container [ngTemplateOutlet]=\"form\"></ng-container>\n    </div>\n  </div>\n}\n\n\n<ng-template #form>\n  @if (filterForm) {\n    <form\n      [formGroup]=\"filterForm\"\n      [class.was-validated]=\"ngForm.submitted\"\n      class=\"needs-validation\"\n      #ngForm=\"ngForm\"\n      (ngSubmit)=\"onFilterSubmit()\"\n      >\n      <div class=\"row\">\n        @for (input of _fields; track identify($index, input)) {\n          <div\n            class=\"col\"\n            [ngClass]=\"input.cols\"\n            >\n            <div class=\"mb-3\">\n              @if (isText(input.type)) {\n                <rlb-input\n                  [formControlName]=\"input.property\"\n                  [type]=\"input.type\"\n                  [placeholder]=\"input.name | translate\"\n                  >\n                  @if (input.label) {\n                    <ng-container before>\n                      <span #after>\n                        {{ input.label | translate }}\n                      </span>\n                    </ng-container>\n                  }\n                </rlb-input>\n              }\n              @if (isSwitch(input.type)) {\n                <rlb-switch\n                  [formControlName]=\"input.property\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n        @if (!noSubmit) {\n          <div class=\"row\">\n            <div class=\"col\">\n              <button\n                class=\"btn btn-primary float-end\"\n                [disabled]=\"!filterForm.valid\"\n                >\n                {{ \"common.filter\" | translate }}\n              </button>\n            </div>\n          </div>\n        }\n      </form>\n    }\n  </ng-template>\n" }]
         }], propDecorators: { title: [{
                 type: Input,
                 args: [{ alias: 'title' }]
@@ -10695,7 +11199,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,
@@ -10704,7 +11208,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,
@@ -10783,12 +11287,12 @@ class SearchModalComponent {
           <i class="bi bi-search"></i>
         </button>
       </rlb-input>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: CommonModule }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SearchModalComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [RlbBootstrapModule, FormsModule, CommonModule],
+                    imports: [RlbBootstrapModule, FormsModule],
                     standalone: true,
                     template: ` <div class="modal-header">
       <h5 class="modal-title">{{ data.title }}</h5>
@@ -10841,51 +11345,59 @@ class CommonModalComponent {
     onEnter() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CommonModalComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "btn", first: true, predicate: ["btn"], descendants: true }], hostDirectives: [{ directive: ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CommonModalComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "btn", first: true, predicate: ["btn"], descendants: true }], hostDirectives: [{ directive: ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
     <div [class]="'modal-header' + headerColor">
       <h5 class="modal-title">{{ data.title }}</h5>
       <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
     </div>
     <div class="modal-body">
-      <h6 *ngIf="data.content?.header">
-        {{ data.content.header }}
-      </h6>
+      @if (data.content.header) {
+        <h6>
+          {{ data.content.header }}
+        </h6>
+      }
       <span>
-      {{ data.content.body }}
+        {{ data.content.body }}
       </span>
     </div>
     <div class="modal-footer">
-      <button *ngIf="data.cancel" class="me-2" rlb-button outline data-modal-reason="cancel">
-        {{ data.cancel }}
-      </button>
+      @if (data.cancel) {
+        <button class="me-2" rlb-button outline data-modal-reason="cancel">
+          {{ data.cancel }}
+        </button>
+      }
       <button rlb-button data-modal-reason="ok" [disabled]="!valid">
         {{ data.ok }}
       </button>
     </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CommonModalComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
-                    imports: [RlbBootstrapModule, FormsModule, CommonModule],
+                    imports: [RlbBootstrapModule, FormsModule],
                     template: `
     <div [class]="'modal-header' + headerColor">
       <h5 class="modal-title">{{ data.title }}</h5>
       <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
     </div>
     <div class="modal-body">
-      <h6 *ngIf="data.content?.header">
-        {{ data.content.header }}
-      </h6>
+      @if (data.content.header) {
+        <h6>
+          {{ data.content.header }}
+        </h6>
+      }
       <span>
-      {{ data.content.body }}
+        {{ data.content.body }}
       </span>
     </div>
     <div class="modal-footer">
-      <button *ngIf="data.cancel" class="me-2" rlb-button outline data-modal-reason="cancel">
-        {{ data.cancel }}
-      </button>
+      @if (data.cancel) {
+        <button class="me-2" rlb-button outline data-modal-reason="cancel">
+          {{ data.cancel }}
+        </button>
+      }
       <button rlb-button data-modal-reason="ok" [disabled]="!valid">
         {{ data.ok }}
       </button>
@@ -10996,44 +11508,44 @@ class EventCreateEditComponent {
         return "";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EventCreateEditComponent, deps: [{ token: i2$2.FormBuilder }, { token: UniqueIdService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EventCreateEditComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EventCreateEditComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
 		<div [class]="'modal-header' + headerColor">
-      <h5 class="modal-title">{{ data.title }}</h5>
-			<button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		  <h5 class="modal-title">{{ data.title }}</h5>
+		  <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		</div>
+		<div class="modal-body" [formGroup]="form">
+		  <rlb-input enable-validation formControlName="title">
+		    <label before>Event title</label>
+		  </rlb-input>
+		  <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="start">
+		    <label before class="mt-3">Event start</label>
+		  </rlb-input>
+		  <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="end">
+		    <label before class="mt-3">Event end</label>
+		  </rlb-input>
+		  <rlb-select enable-validation [placeholder]="'Choose event color'" formControlName="color">
+		    <label before class="mt-3">Event color</label>
+		    @for (color of colors; track color) {
+		      <rlb-option [value]="color">
+		        {{ color }}
+		      </rlb-option>
+		    }
+		  </rlb-select>
 		</div>
-    <div class="modal-body" [formGroup]="form">
-      <rlb-input enable-validation formControlName="title">
-        <label before>Event title</label>
-      </rlb-input>
-      <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="start">
-        <label before class="mt-3">Event start</label>
-      </rlb-input>
-      <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="end">
-        <label before class="mt-3">Event end</label>
-      </rlb-input>
-      <rlb-select enable-validation [placeholder]="'Choose event color'" formControlName="color">
-        <label before class="mt-3">Event color</label>
-        <ng-container *ngFor="let color of colors">
-          <rlb-option [value]="color">
-            {{ color }}
-          </rlb-option>
-        </ng-container>
-      </rlb-select>
-    </div>
 		<div class="modal-footer">
-      <button
-        type="button"
-        class="btn "
-        data-modal-reason="cancel"
-        [ngClass]="{ 'btn-secondary': !eventToEdit, 'btn-danger': eventToEdit }"
-      >
-        {{ eventToEdit ? 'Delete event' : 'Close' }}
-			</button>
-      <button type="button" [disabled]="!valid" class="btn btn-primary" data-modal-reason="ok">
-				Save changes
-			</button>
+		  <button
+		    type="button"
+		    class="btn "
+		    data-modal-reason="cancel"
+		    [ngClass]="{ 'btn-secondary': !eventToEdit, 'btn-danger': eventToEdit }"
+		    >
+		    {{ eventToEdit ? 'Delete event' : 'Close' }}
+		  </button>
+		  <button type="button" [disabled]="!valid" class="btn btn-primary" data-modal-reason="ok">
+		    Save changes
+		  </button>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { 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"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+		`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { 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"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EventCreateEditComponent, decorators: [{
             type: Component,
@@ -11041,42 +11553,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     standalone: true,
                     template: `
 		<div [class]="'modal-header' + headerColor">
-      <h5 class="modal-title">{{ data.title }}</h5>
-			<button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		  <h5 class="modal-title">{{ data.title }}</h5>
+		  <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		</div>
+		<div class="modal-body" [formGroup]="form">
+		  <rlb-input enable-validation formControlName="title">
+		    <label before>Event title</label>
+		  </rlb-input>
+		  <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="start">
+		    <label before class="mt-3">Event start</label>
+		  </rlb-input>
+		  <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="end">
+		    <label before class="mt-3">Event end</label>
+		  </rlb-input>
+		  <rlb-select enable-validation [placeholder]="'Choose event color'" formControlName="color">
+		    <label before class="mt-3">Event color</label>
+		    @for (color of colors; track color) {
+		      <rlb-option [value]="color">
+		        {{ color }}
+		      </rlb-option>
+		    }
+		  </rlb-select>
 		</div>
-    <div class="modal-body" [formGroup]="form">
-      <rlb-input enable-validation formControlName="title">
-        <label before>Event title</label>
-      </rlb-input>
-      <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="start">
-        <label before class="mt-3">Event start</label>
-      </rlb-input>
-      <rlb-input enable-validation type="datetime-local" date-type="date-tz" formControlName="end">
-        <label before class="mt-3">Event end</label>
-      </rlb-input>
-      <rlb-select enable-validation [placeholder]="'Choose event color'" formControlName="color">
-        <label before class="mt-3">Event color</label>
-        <ng-container *ngFor="let color of colors">
-          <rlb-option [value]="color">
-            {{ color }}
-          </rlb-option>
-        </ng-container>
-      </rlb-select>
-    </div>
 		<div class="modal-footer">
-      <button
-        type="button"
-        class="btn "
-        data-modal-reason="cancel"
-        [ngClass]="{ 'btn-secondary': !eventToEdit, 'btn-danger': eventToEdit }"
-      >
-        {{ eventToEdit ? 'Delete event' : 'Close' }}
-			</button>
-      <button type="button" [disabled]="!valid" class="btn btn-primary" data-modal-reason="ok">
-				Save changes
-			</button>
+		  <button
+		    type="button"
+		    class="btn "
+		    data-modal-reason="cancel"
+		    [ngClass]="{ 'btn-secondary': !eventToEdit, 'btn-danger': eventToEdit }"
+		    >
+		    {{ eventToEdit ? 'Delete event' : 'Close' }}
+		  </button>
+		  <button type="button" [disabled]="!valid" class="btn btn-primary" data-modal-reason="ok">
+		    Save changes
+		  </button>
 		</div>
-	`,
+		`,
                     hostDirectives: [
                         {
                             directive: ModalDirective,
@@ -11107,56 +11619,58 @@ class CalendarOverflowEventsContainerComponent {
         this.result = { event, action };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarOverflowEventsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarOverflowEventsContainerComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarOverflowEventsContainerComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
 		<div [class]="'modal-header' + headerColor">
-      <h5 class="modal-title">{{ data.title }}</h5>
-			<button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		  <h5 class="modal-title">{{ data.title }}</h5>
+		  <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		</div>
+		<div class="modal-body">
+		  <div class="d-flex flex-column gap-1 overflow-y-auto p-3" [style.height.rem]="containerHeightRem">
+		    @for (event of data.content; track event) {
+		      <rlb-card class="mb-0 shadow-lg rounded" [border]="event.color">
+		        <rlb-card-body class="d-flex align-items-center justify-content-between">
+		          <div>
+		            <span rlb-badge pill [color]="event.color">&nbsp;</span>
+		            <span>
+		              {{ event.title }}
+		            </span>
+		          </div>
+		          <div class="d-flex align-items-center gap-2">
+		            <rlb-fab
+		              (click)="closeDialog(event, 'edit')"
+		              data-modal-reason="ok"
+		              class="align-self-end"
+		              size="xs"
+		              outline
+		              >
+		              <i class="bi bi-pencil"></i>
+		            </rlb-fab>
+		            <rlb-fab
+		              (click)="closeDialog(event, 'delete')"
+		              data-modal-reason="ok"
+		              class="align-self-end"
+		              size="xs"
+		              color="danger"
+		              outline
+		              >
+		              <i class="bi bi-trash"></i>
+		            </rlb-fab>
+		          </div>
+		        </rlb-card-body>
+		      </rlb-card>
+		    }
+		  </div>
 		</div>
-    <div class="modal-body">
-      <div class="d-flex flex-column gap-1 overflow-y-auto p-3" [style.height.rem]="containerHeightRem">
-        <rlb-card class="mb-0 shadow-lg rounded" [border]="event.color" *ngFor="let event of data.content">
-          <rlb-card-body class="d-flex align-items-center justify-content-between">
-            <div>
-              <span rlb-badge pill [color]="event.color">&nbsp;</span>
-              <span>
-                {{ event.title }}
-              </span>
-            </div>
-            <div class="d-flex align-items-center gap-2">
-              <rlb-fab
-                (click)="closeDialog(event, 'edit')"
-                data-modal-reason="ok"
-                class="align-self-end"
-                size="xs"
-                outline
-              >
-                <i class="bi bi-pencil"></i>
-              </rlb-fab>
-              <rlb-fab
-                (click)="closeDialog(event, 'delete')"
-                data-modal-reason="ok"
-                class="align-self-end"
-                size="xs"
-                color="danger"
-                outline
-              >
-                <i class="bi bi-trash"></i>
-              </rlb-fab>
-            </div>
-          </rlb-card-body>
-        </rlb-card>
-      </div>
-    </div>
 		<div class="modal-footer">
-      <button
-        rlb-button
-        color="secondary"
-        data-modal-reason="cancel"
-      >
-        {{ 'Close' }}
-			</button>
+		  <button
+		    rlb-button
+		    color="secondary"
+		    data-modal-reason="cancel"
+		    >
+		    {{ 'Close' }}
+		  </button>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "class"] }, { kind: "component", type: CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }] }); }
+		`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "class"] }, { kind: "component", type: CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarOverflowEventsContainerComponent, decorators: [{
             type: Component,
@@ -11164,61 +11678,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     standalone: true,
                     template: `
 		<div [class]="'modal-header' + headerColor">
-      <h5 class="modal-title">{{ data.title }}</h5>
-			<button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		  <h5 class="modal-title">{{ data.title }}</h5>
+		  <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
+		</div>
+		<div class="modal-body">
+		  <div class="d-flex flex-column gap-1 overflow-y-auto p-3" [style.height.rem]="containerHeightRem">
+		    @for (event of data.content; track event) {
+		      <rlb-card class="mb-0 shadow-lg rounded" [border]="event.color">
+		        <rlb-card-body class="d-flex align-items-center justify-content-between">
+		          <div>
+		            <span rlb-badge pill [color]="event.color">&nbsp;</span>
+		            <span>
+		              {{ event.title }}
+		            </span>
+		          </div>
+		          <div class="d-flex align-items-center gap-2">
+		            <rlb-fab
+		              (click)="closeDialog(event, 'edit')"
+		              data-modal-reason="ok"
+		              class="align-self-end"
+		              size="xs"
+		              outline
+		              >
+		              <i class="bi bi-pencil"></i>
+		            </rlb-fab>
+		            <rlb-fab
+		              (click)="closeDialog(event, 'delete')"
+		              data-modal-reason="ok"
+		              class="align-self-end"
+		              size="xs"
+		              color="danger"
+		              outline
+		              >
+		              <i class="bi bi-trash"></i>
+		            </rlb-fab>
+		          </div>
+		        </rlb-card-body>
+		      </rlb-card>
+		    }
+		  </div>
 		</div>
-    <div class="modal-body">
-      <div class="d-flex flex-column gap-1 overflow-y-auto p-3" [style.height.rem]="containerHeightRem">
-        <rlb-card class="mb-0 shadow-lg rounded" [border]="event.color" *ngFor="let event of data.content">
-          <rlb-card-body class="d-flex align-items-center justify-content-between">
-            <div>
-              <span rlb-badge pill [color]="event.color">&nbsp;</span>
-              <span>
-                {{ event.title }}
-              </span>
-            </div>
-            <div class="d-flex align-items-center gap-2">
-              <rlb-fab
-                (click)="closeDialog(event, 'edit')"
-                data-modal-reason="ok"
-                class="align-self-end"
-                size="xs"
-                outline
-              >
-                <i class="bi bi-pencil"></i>
-              </rlb-fab>
-              <rlb-fab
-                (click)="closeDialog(event, 'delete')"
-                data-modal-reason="ok"
-                class="align-self-end"
-                size="xs"
-                color="danger"
-                outline
-              >
-                <i class="bi bi-trash"></i>
-              </rlb-fab>
-            </div>
-          </rlb-card-body>
-        </rlb-card>
-      </div>
-    </div>
 		<div class="modal-footer">
-      <button
-        rlb-button
-        color="secondary"
-        data-modal-reason="cancel"
-      >
-        {{ 'Close' }}
-			</button>
+		  <button
+		    rlb-button
+		    color="secondary"
+		    data-modal-reason="cancel"
+		    >
+		    {{ 'Close' }}
+		  </button>
 		</div>
-	`,
+		`,
                     hostDirectives: [
                         {
                             directive: ModalDirective,
                             inputs: ['id', 'data-instance', 'data-options'],
                         },
                     ],
-                    imports: [CommonModule, RlbBootstrapModule]
+                    imports: [RlbBootstrapModule]
                 }]
         }] });
 
@@ -11227,14 +11743,16 @@ class CalendarToastComponent {
         this.valid = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CalendarToastComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: ToastDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CalendarToastComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: ToastDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
     <div class="toast-header">
       <strong class="me-auto">{{data.title}}</strong>
-      <small *ngIf="data.subtitle"> {{data.subtitle }}</small>
+      @if (data.subtitle) {
+        <small> {{data.subtitle }}</small>
+      }
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">{{data.content}}</div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RlbBootstrapModule }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbBootstrapModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CalendarToastComponent, decorators: [{
             type: Component,
@@ -11242,11 +11760,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
     <div class="toast-header">
       <strong class="me-auto">{{data.title}}</strong>
-      <small *ngIf="data.subtitle"> {{data.subtitle }}</small>
+      @if (data.subtitle) {
+        <small> {{data.subtitle }}</small>
+      }
       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">{{data.content}}</div>
-  `,
+    `,
                     hostDirectives: [
                         {
                             directive: ToastDirective,
@@ -11254,7 +11774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         },
                     ],
                     standalone: true,
-                    imports: [CommonModule, RlbBootstrapModule]
+                    imports: [RlbBootstrapModule]
                 }]
         }] });
 
@@ -11290,5 +11810,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