ngx-bootstrap 20.0.1 → 21.0.0

package/datepicker/fesm2022/ngx-bootstrap-datepicker.mjs

@@ -9,9 +9,9 @@ import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { Subscription, BehaviorSubject, combineLatest, Subject } from 'rxjs';
 import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
-import { NgFor, NgIf, NgClass, NgSwitch, NgSwitchCase, AsyncPipe, CommonModule } from '@angular/common';
 import * as i2 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { NgClass, AsyncPipe, NgIf, NgSwitch, NgSwitchCase, NgFor, CommonModule } from '@angular/common';
 import * as i2$1 from 'ngx-bootstrap/component-loader';
 import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@@ -105,10 +105,10 @@ class BsDatepickerConfig {
          * */
         this.keepDatesOutOfRules = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerConfig, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -338,10 +338,10 @@ class BsDatepickerActions {
             payload: locale
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerActions, providedIn: 'platform' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerActions, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerActions, providedIn: 'platform' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerActions, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'platform' }]
         }] });
@@ -367,10 +367,10 @@ class BsLocaleService {
         }
         this._locale.next(locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsLocaleService, providedIn: 'platform' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsLocaleService, providedIn: 'platform' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsLocaleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsLocaleService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'platform' }]
         }] });
@@ -541,10 +541,10 @@ class BsDatepickerEffects {
             sub.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerEffects, deps: [{ token: BsDatepickerActions }, { token: BsLocaleService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerEffects, providedIn: 'platform' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerEffects, deps: [{ token: BsDatepickerActions }, { token: BsLocaleService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerEffects, providedIn: 'platform' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerEffects, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'platform' }]
         }], ctorParameters: () => [{ type: BsDatepickerActions }, { type: BsLocaleService }] });
@@ -1369,10 +1369,10 @@ class BsDatepickerStore extends MiniStore {
         const state = new MiniState(initialDatepickerState, _dispatcher, bsDatepickerReducer);
         super(_dispatcher, bsDatepickerReducer, state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerStore, providedIn: 'platform' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerStore, providedIn: 'platform' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerStore, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'platform' }]
         }], ctorParameters: () => [] });
@@ -1387,37 +1387,41 @@ class BsCustomDatesViewComponent {
     compareRanges(range) {
         return JSON.stringify(range?.value) === JSON.stringify(this.selectedRange);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsCustomDatesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsCustomDatesViewComponent, isStandalone: true, selector: "bs-custom-date-view", inputs: { ranges: "ranges", selectedRange: "selectedRange", customRangeLabel: "customRangeLabel" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCustomDatesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsCustomDatesViewComponent, isStandalone: true, selector: "bs-custom-date-view", inputs: { ranges: "ranges", selectedRange: "selectedRange", customRangeLabel: "customRangeLabel" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: `
     <div class="bs-datepicker-predefined-btns">
-      <button *ngFor="let range of ranges"
-        type="button"
-        class="btn"
-        (click)="selectFromRanges(range)"
-        [class.selected]="compareRanges(range)">
-        {{ range.label }}
-      </button>
+      @for (range of ranges; track range) {
+        <button
+          type="button"
+          class="btn"
+          (click)="selectFromRanges(range)"
+          [class.selected]="compareRanges(range)">
+          {{ range.label }}
+        </button>
+      }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsCustomDatesViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCustomDatesViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-custom-date-view',
                     template: `
     <div class="bs-datepicker-predefined-btns">
-      <button *ngFor="let range of ranges"
-        type="button"
-        class="btn"
-        (click)="selectFromRanges(range)"
-        [class.selected]="compareRanges(range)">
-        {{ range.label }}
-      </button>
+      @for (range of ranges; track range) {
+        <button
+          type="button"
+          class="btn"
+          (click)="selectFromRanges(range)"
+          [class.selected]="compareRanges(range)">
+          {{ range.label }}
+        </button>
+      }
     </div>
-  `,
+    `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
-                    imports: [NgFor]
+                    imports: []
                 }]
         }], propDecorators: { ranges: [{
                 type: Input
@@ -1453,101 +1457,99 @@ class BsDatepickerNavigationViewComponent {
         }
         this.onViewMode.emit(viewMode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerNavigationViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerNavigationViewComponent, isStandalone: true, selector: "bs-datepicker-navigation-view", inputs: { calendar: "calendar", isDisabled: "isDisabled" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerNavigationViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsDatepickerNavigationViewComponent, isStandalone: true, selector: "bs-datepicker-navigation-view", inputs: { calendar: "calendar", isDisabled: "isDisabled" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode" }, ngImport: i0, template: `
     <button class="previous"
-            [disabled]="calendar.disableLeftArrow"
-            [style.visibility]="calendar.hideLeftArrow ? 'hidden' : 'visible'"
-            type="button"
-            (click)="navTo(true)">
+      [disabled]="calendar.disableLeftArrow"
+      [style.visibility]="calendar.hideLeftArrow ? 'hidden' : 'visible'"
+      type="button"
+      (click)="navTo(true)">
       <span>&lsaquo;</span>
     </button>
-
-    <ng-container *ngIf="calendar && calendar.monthTitle">
+    
+    @if (calendar && calendar.monthTitle) {
       &#8203;  <!-- zero-width space needed for correct alignment
-                  with preserveWhitespaces: false in Angular -->
-
+      with preserveWhitespaces: false in Angular -->
       <button class="current"
-            type="button"
-              (click)="view('month')"
-              [disabled]="isDisabled"
-      ><span>{{ calendar.monthTitle }}</span>
+        type="button"
+        (click)="view('month')"
+        [disabled]="isDisabled"
+        ><span>{{ calendar.monthTitle }}</span>
       </button>
-    </ng-container>
-
+    }
+    
     &#8203;  <!-- zero-width space needed for correct alignment
-                  with preserveWhitespaces: false in Angular -->
-
+    with preserveWhitespaces: false in Angular -->
+    
     <button
       class="current"
       (click)="view('year')"
       type="button"
       [disabled]="isDisabled"
-    >
+      >
       <span>{{ calendar.yearTitle }}</span>
     </button>
-
+    
     &#8203;  <!-- zero-width space needed for correct alignment
-                  with preserveWhitespaces: false in Angular -->
-
+    with preserveWhitespaces: false in Angular -->
+    
     <button class="next"
-            [disabled]="calendar.disableRightArrow"
-            [style.visibility]="calendar.hideRightArrow ? 'hidden' : 'visible'"
-            type="button"
-            (click)="navTo(false)"><span>&rsaquo;</span>
+      [disabled]="calendar.disableRightArrow"
+      [style.visibility]="calendar.hideRightArrow ? 'hidden' : 'visible'"
+      type="button"
+      (click)="navTo(false)"><span>&rsaquo;</span>
     </button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerNavigationViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerNavigationViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-datepicker-navigation-view',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <button class="previous"
-            [disabled]="calendar.disableLeftArrow"
-            [style.visibility]="calendar.hideLeftArrow ? 'hidden' : 'visible'"
-            type="button"
-            (click)="navTo(true)">
+      [disabled]="calendar.disableLeftArrow"
+      [style.visibility]="calendar.hideLeftArrow ? 'hidden' : 'visible'"
+      type="button"
+      (click)="navTo(true)">
       <span>&lsaquo;</span>
     </button>
-
-    <ng-container *ngIf="calendar && calendar.monthTitle">
+    
+    @if (calendar && calendar.monthTitle) {
       &#8203;  <!-- zero-width space needed for correct alignment
-                  with preserveWhitespaces: false in Angular -->
-
+      with preserveWhitespaces: false in Angular -->
       <button class="current"
-            type="button"
-              (click)="view('month')"
-              [disabled]="isDisabled"
-      ><span>{{ calendar.monthTitle }}</span>
+        type="button"
+        (click)="view('month')"
+        [disabled]="isDisabled"
+        ><span>{{ calendar.monthTitle }}</span>
       </button>
-    </ng-container>
-
+    }
+    
     &#8203;  <!-- zero-width space needed for correct alignment
-                  with preserveWhitespaces: false in Angular -->
-
+    with preserveWhitespaces: false in Angular -->
+    
     <button
       class="current"
       (click)="view('year')"
       type="button"
       [disabled]="isDisabled"
-    >
+      >
       <span>{{ calendar.yearTitle }}</span>
     </button>
-
+    
     &#8203;  <!-- zero-width space needed for correct alignment
-                  with preserveWhitespaces: false in Angular -->
-
+    with preserveWhitespaces: false in Angular -->
+    
     <button class="next"
-            [disabled]="calendar.disableRightArrow"
-            [style.visibility]="calendar.hideRightArrow ? 'hidden' : 'visible'"
-            type="button"
-            (click)="navTo(false)"><span>&rsaquo;</span>
+      [disabled]="calendar.disableRightArrow"
+      [style.visibility]="calendar.hideRightArrow ? 'hidden' : 'visible'"
+      type="button"
+      (click)="navTo(false)"><span>&rsaquo;</span>
     </button>
-  `,
+    `,
                     standalone: true,
-                    imports: [NgIf]
+                    imports: []
                 }]
         }], propDecorators: { calendar: [{
                 type: Input
@@ -1565,8 +1567,8 @@ class BsTimepickerViewComponent {
         this.hours = 0;
         this.minutes = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsTimepickerViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsTimepickerViewComponent, isStandalone: true, selector: "bs-timepicker", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTimepickerViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsTimepickerViewComponent, isStandalone: true, selector: "bs-timepicker", ngImport: i0, template: `
     <div class="bs-timepicker-container">
       <div class="bs-timepicker-controls">
         <button class="bs-decrease" type="button">-</button>
@@ -1586,7 +1588,7 @@ class BsTimepickerViewComponent {
     </div>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsTimepickerViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsTimepickerViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-timepicker',
@@ -1614,10 +1616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         }] });
 
 class BsCurrentDateViewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsCurrentDateViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsCurrentDateViewComponent, isStandalone: true, selector: "bs-current-date", inputs: { title: "title" }, ngImport: i0, template: `<div class="current-timedate"><span>{{ title }}</span></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCurrentDateViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsCurrentDateViewComponent, isStandalone: true, selector: "bs-current-date", inputs: { title: "title" }, ngImport: i0, template: `<div class="current-timedate"><span>{{ title }}</span></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsCurrentDateViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCurrentDateViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-current-date',
@@ -1629,46 +1631,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
             }] } });
 
 class BsCalendarLayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsCalendarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsCalendarLayoutComponent, isStandalone: true, selector: "bs-calendar-layout", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCalendarLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsCalendarLayoutComponent, isStandalone: true, selector: "bs-calendar-layout", ngImport: i0, template: `
     <!-- current date, will be added in nearest releases -->
-    <bs-current-date title="hey there" *ngIf="false"></bs-current-date>
-
+    @if (false) {
+      <bs-current-date title="hey there"></bs-current-date>
+    }
+    
     <!--navigation-->
     <div class="bs-datepicker-head">
       <ng-content select="bs-datepicker-navigation-view"></ng-content>
     </div>
-
+    
     <div class="bs-datepicker-body">
       <ng-content></ng-content>
     </div>
-
+    
     <!--timepicker-->
-    <bs-timepicker *ngIf="false"></bs-timepicker>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BsCurrentDateViewComponent, selector: "bs-current-date", inputs: ["title"] }, { kind: "component", type: BsTimepickerViewComponent, selector: "bs-timepicker" }] }); }
+    @if (false) {
+      <bs-timepicker></bs-timepicker>
+    }
+    `, isInline: true, dependencies: [{ kind: "component", type: BsCurrentDateViewComponent, selector: "bs-current-date", inputs: ["title"] }, { kind: "component", type: BsTimepickerViewComponent, selector: "bs-timepicker" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsCalendarLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsCalendarLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-calendar-layout',
                     template: `
     <!-- current date, will be added in nearest releases -->
-    <bs-current-date title="hey there" *ngIf="false"></bs-current-date>
-
+    @if (false) {
+      <bs-current-date title="hey there"></bs-current-date>
+    }
+    
     <!--navigation-->
     <div class="bs-datepicker-head">
       <ng-content select="bs-datepicker-navigation-view"></ng-content>
     </div>
-
+    
     <div class="bs-datepicker-body">
       <ng-content></ng-content>
     </div>
-
+    
     <!--timepicker-->
-    <bs-timepicker *ngIf="false"></bs-timepicker>
-  `,
+    @if (false) {
+      <bs-timepicker></bs-timepicker>
+    }
+    `,
                     standalone: true,
-                    imports: [NgIf, BsCurrentDateViewComponent, BsTimepickerViewComponent]
+                    imports: [BsCurrentDateViewComponent, BsTimepickerViewComponent]
                 }]
         }] });
 
@@ -1692,33 +1702,37 @@ class BsYearsCalendarViewComponent {
     changeViewMode(event) {
         this.onViewMode.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsYearsCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsYearsCalendarViewComponent, isStandalone: true, selector: "bs-years-calendar-view", inputs: { calendar: "calendar" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsYearsCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsYearsCalendarViewComponent, isStandalone: true, selector: "bs-years-calendar-view", inputs: { calendar: "calendar" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: `
     <bs-calendar-layout>
       <bs-datepicker-navigation-view
         [calendar]="calendar"
         (onNavigate)="navigateTo($event)"
         (onViewMode)="changeViewMode($event)"
       ></bs-datepicker-navigation-view>
-
+    
       <table role="grid" class="years">
         <tbody>
-        <tr *ngFor="let row of calendar?.years">
-          <td *ngFor="let year of row" role="gridcell"
-              (click)="viewYear(year)"
-              (mouseenter)="hoverYear(year, true)"
-              (mouseleave)="hoverYear(year, false)"
-              [class.disabled]="year.isDisabled"
-              [class.is-highlighted]="year.isHovered">
-            <span [class.selected]="year.isSelected">{{ year.label }}</span>
-          </td>
-        </tr>
+          @for (row of calendar?.years; track row) {
+            <tr>
+              @for (year of row; track year) {
+                <td role="gridcell"
+                  (click)="viewYear(year)"
+                  (mouseenter)="hoverYear(year, true)"
+                  (mouseleave)="hoverYear(year, false)"
+                  [class.disabled]="year.isDisabled"
+                  [class.is-highlighted]="year.isHovered">
+                  <span [class.selected]="year.isSelected">{{ year.label }}</span>
+                </td>
+              }
+            </tr>
+          }
         </tbody>
       </table>
     </bs-calendar-layout>
-  `, isInline: true, dependencies: [{ kind: "component", type: BsCalendarLayoutComponent, selector: "bs-calendar-layout" }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "isDisabled"], outputs: ["onNavigate", "onViewMode"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: BsCalendarLayoutComponent, selector: "bs-calendar-layout" }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "isDisabled"], outputs: ["onNavigate", "onViewMode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsYearsCalendarViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsYearsCalendarViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-years-calendar-view',
@@ -1729,25 +1743,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         (onNavigate)="navigateTo($event)"
         (onViewMode)="changeViewMode($event)"
       ></bs-datepicker-navigation-view>
-
+    
       <table role="grid" class="years">
         <tbody>
-        <tr *ngFor="let row of calendar?.years">
-          <td *ngFor="let year of row" role="gridcell"
-              (click)="viewYear(year)"
-              (mouseenter)="hoverYear(year, true)"
-              (mouseleave)="hoverYear(year, false)"
-              [class.disabled]="year.isDisabled"
-              [class.is-highlighted]="year.isHovered">
-            <span [class.selected]="year.isSelected">{{ year.label }}</span>
-          </td>
-        </tr>
+          @for (row of calendar?.years; track row) {
+            <tr>
+              @for (year of row; track year) {
+                <td role="gridcell"
+                  (click)="viewYear(year)"
+                  (mouseenter)="hoverYear(year, true)"
+                  (mouseleave)="hoverYear(year, false)"
+                  [class.disabled]="year.isDisabled"
+                  [class.is-highlighted]="year.isHovered">
+                  <span [class.selected]="year.isSelected">{{ year.label }}</span>
+                </td>
+              }
+            </tr>
+          }
         </tbody>
       </table>
     </bs-calendar-layout>
-  `,
+    `,
                     standalone: true,
-                    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgFor]
+                    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent]
                 }]
         }], propDecorators: { calendar: [{
                 type: Input
@@ -1781,33 +1799,37 @@ class BsMonthCalendarViewComponent {
     changeViewMode(event) {
         this.onViewMode.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsMonthCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsMonthCalendarViewComponent, isStandalone: true, selector: "bs-month-calendar-view", inputs: { calendar: "calendar" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsMonthCalendarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsMonthCalendarViewComponent, isStandalone: true, selector: "bs-month-calendar-view", inputs: { calendar: "calendar" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover" }, ngImport: i0, template: `
     <bs-calendar-layout>
       <bs-datepicker-navigation-view
         [calendar]="calendar"
         (onNavigate)="navigateTo($event)"
         (onViewMode)="changeViewMode($event)"
       ></bs-datepicker-navigation-view>
-
+    
       <table role="grid" class="months">
         <tbody>
-        <tr *ngFor="let row of calendar?.months">
-          <td *ngFor="let month of row" role="gridcell"
-              (click)="viewMonth(month)"
-              (mouseenter)="hoverMonth(month, true)"
-              (mouseleave)="hoverMonth(month, false)"
-              [class.disabled]="month.isDisabled"
-              [class.is-highlighted]="month.isHovered">
-            <span [class.selected]="month.isSelected">{{ month.label }}</span>
-          </td>
-        </tr>
+          @for (row of calendar?.months; track row) {
+            <tr>
+              @for (month of row; track month) {
+                <td role="gridcell"
+                  (click)="viewMonth(month)"
+                  (mouseenter)="hoverMonth(month, true)"
+                  (mouseleave)="hoverMonth(month, false)"
+                  [class.disabled]="month.isDisabled"
+                  [class.is-highlighted]="month.isHovered">
+                  <span [class.selected]="month.isSelected">{{ month.label }}</span>
+                </td>
+              }
+            </tr>
+          }
         </tbody>
       </table>
     </bs-calendar-layout>
-  `, isInline: true, dependencies: [{ kind: "component", type: BsCalendarLayoutComponent, selector: "bs-calendar-layout" }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "isDisabled"], outputs: ["onNavigate", "onViewMode"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: BsCalendarLayoutComponent, selector: "bs-calendar-layout" }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "isDisabled"], outputs: ["onNavigate", "onViewMode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsMonthCalendarViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsMonthCalendarViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-month-calendar-view',
@@ -1818,25 +1840,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
         (onNavigate)="navigateTo($event)"
         (onViewMode)="changeViewMode($event)"
       ></bs-datepicker-navigation-view>
-
+    
       <table role="grid" class="months">
         <tbody>
-        <tr *ngFor="let row of calendar?.months">
-          <td *ngFor="let month of row" role="gridcell"
-              (click)="viewMonth(month)"
-              (mouseenter)="hoverMonth(month, true)"
-              (mouseleave)="hoverMonth(month, false)"
-              [class.disabled]="month.isDisabled"
-              [class.is-highlighted]="month.isHovered">
-            <span [class.selected]="month.isSelected">{{ month.label }}</span>
-          </td>
-        </tr>
+          @for (row of calendar?.months; track row) {
+            <tr>
+              @for (month of row; track month) {
+                <td role="gridcell"
+                  (click)="viewMonth(month)"
+                  (mouseenter)="hoverMonth(month, true)"
+                  (mouseleave)="hoverMonth(month, false)"
+                  [class.disabled]="month.isDisabled"
+                  [class.is-highlighted]="month.isHovered">
+                  <span [class.selected]="month.isSelected">{{ month.label }}</span>
+                </td>
+              }
+            </tr>
+          }
         </tbody>
       </table>
     </bs-calendar-layout>
-  `,
+    `,
                     standalone: true,
-                    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgFor]
+                    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent]
                 }]
         }], propDecorators: { calendar: [{
                 type: Input
@@ -1869,10 +1895,10 @@ class BsDatepickerDayDecoratorComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerDayDecoratorComponent, deps: [{ token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerDayDecoratorComponent, isStandalone: true, selector: "[bsDatepickerDayDecorator]", inputs: { day: "day" }, host: { properties: { "class.disabled": "day.isDisabled", "class.is-highlighted": "day.isHovered", "class.is-other-month": "day.isOtherMonth", "class.is-active-other-month": "day.isOtherMonthHovered", "class.in-range": "day.isInRange", "class.select-start": "day.isSelectionStart", "class.select-end": "day.isSelectionEnd", "class.selected": "day.isSelected" } }, ngImport: i0, template: `{{ day && day.label || '' }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerDayDecoratorComponent, deps: [{ token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BsDatepickerDayDecoratorComponent, isStandalone: true, selector: "[bsDatepickerDayDecorator]", inputs: { day: "day" }, host: { properties: { "class.disabled": "day.isDisabled", "class.is-highlighted": "day.isHovered", "class.is-other-month": "day.isOtherMonth", "class.is-active-other-month": "day.isOtherMonthHovered", "class.in-range": "day.isInRange", "class.select-start": "day.isSelectionStart", "class.select-end": "day.isSelectionEnd", "class.selected": "day.isSelected" } }, ngImport: i0, template: `{{ day && day.label || '' }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerDayDecoratorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerDayDecoratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[bsDatepickerDayDecorator]',
@@ -1977,8 +2003,8 @@ class BsDaysCalendarViewComponent {
         }
         this.onHover.emit({ cell, isHovered });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaysCalendarViewComponent, deps: [{ token: BsDatepickerConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDaysCalendarViewComponent, isStandalone: true, selector: "bs-days-calendar-view", inputs: { calendar: "calendar", options: "options", isDisabled: "isDisabled" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover", onHoverWeek: "onHoverWeek" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaysCalendarViewComponent, deps: [{ token: BsDatepickerConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsDaysCalendarViewComponent, isStandalone: true, selector: "bs-days-calendar-view", inputs: { calendar: "calendar", options: "options", isDisabled: "isDisabled" }, outputs: { onNavigate: "onNavigate", onViewMode: "onViewMode", onSelect: "onSelect", onHover: "onHover", onHoverWeek: "onHoverWeek" }, ngImport: i0, template: `
     <bs-calendar-layout>
       <bs-datepicker-navigation-view
         [calendar]="calendar"
@@ -1989,52 +2015,70 @@ class BsDaysCalendarViewComponent {
       <!--days matrix-->
       <table role="grid" class="days weeks">
         <thead>
-        <tr>
-          <!--if show weeks-->
-          <th *ngIf="options && options.showWeekNumbers"></th>
-          <th *ngFor="let weekday of calendar.weekdays; let i = index"
-              aria-label="weekday">{{ calendar.weekdays[i] }}
-          </th>
-        </tr>
+          <tr>
+            <!--if show weeks-->
+            @if (options && options.showWeekNumbers) {
+              <th></th>
+            }
+            @for (weekday of calendar.weekdays; track weekday; let i = $index) {
+              <th
+                aria-label="weekday">{{ calendar.weekdays[i] }}
+              </th>
+            }
+          </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let week of calendar.weeks; let i = index">
-          <td class="week" [class.active-week]="isWeekHovered"  *ngIf="options && options.showWeekNumbers">
-            <span *ngIf="isiOS" (click)="selectWeek(week)">{{ calendar.weekNumbers[i] }}</span>
-            <span *ngIf="!isiOS"
-                (click)="selectWeek(week)"
-                (mouseenter)="weekHoverHandler(week, true)"
-                (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }}</span>
-          </td>
-          <td *ngFor="let day of week.days" role="gridcell">
-
-            <!-- When we want to show tooltips for dates -->
-            <span *ngIf="!isiOS && isShowTooltip" bsDatepickerDayDecorator
-                [day]="day"
-                (click)="selectDay(day)"
-                tooltip="{{day.tooltipText}}"
-                (mouseenter)="hoverDay(day, true)"
-                (mouseleave)="hoverDay(day, false)">{{ day.label }} 3</span>
-            <!-- When tooltips for dates are disabled -->
-            <span *ngIf="!isiOS && !isShowTooltip" bsDatepickerDayDecorator
-                  [day]="day"
-                  (click)="selectDay(day)"
-                  (mouseenter)="hoverDay(day, true)"
-                  (mouseleave)="hoverDay(day, false)">{{ day.label }} 2</span>
-
-            <!-- For mobile iOS view, tooltips are not needed -->
-            <span *ngIf="isiOS" bsDatepickerDayDecorator
-                  [day]="day"
-                  (click)="selectDay(day)">{{ day.label }} 1</span>
-          </td>
-        </tr>
+          @for (week of calendar.weeks; track week; let i = $index) {
+            <tr>
+              @if (options && options.showWeekNumbers) {
+                <td class="week" [class.active-week]="isWeekHovered" >
+                  @if (isiOS) {
+                    <span (click)="selectWeek(week)">{{ calendar.weekNumbers[i] }}</span>
+                  }
+                  @if (!isiOS) {
+                    <span
+                      (click)="selectWeek(week)"
+                      (mouseenter)="weekHoverHandler(week, true)"
+                    (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }}</span>
+                  }
+                </td>
+              }
+              @for (day of week.days; track day) {
+                <td role="gridcell">
+                  <!-- When we want to show tooltips for dates -->
+                  @if (!isiOS && isShowTooltip) {
+                    <span bsDatepickerDayDecorator
+                      [day]="day"
+                      (click)="selectDay(day)"
+                      tooltip="{{day.tooltipText}}"
+                      (mouseenter)="hoverDay(day, true)"
+                    (mouseleave)="hoverDay(day, false)">{{ day.label }} 3</span>
+                  }
+                  <!-- When tooltips for dates are disabled -->
+                  @if (!isiOS && !isShowTooltip) {
+                    <span bsDatepickerDayDecorator
+                      [day]="day"
+                      (click)="selectDay(day)"
+                      (mouseenter)="hoverDay(day, true)"
+                    (mouseleave)="hoverDay(day, false)">{{ day.label }} 2</span>
+                  }
+                  <!-- For mobile iOS view, tooltips are not needed -->
+                  @if (isiOS) {
+                    <span bsDatepickerDayDecorator
+                      [day]="day"
+                    (click)="selectDay(day)">{{ day.label }} 1</span>
+                  }
+                </td>
+              }
+            </tr>
+          }
         </tbody>
       </table>
-
+    
     </bs-calendar-layout>
-  `, isInline: true, dependencies: [{ kind: "component", type: BsCalendarLayoutComponent, selector: "bs-calendar-layout" }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "isDisabled"], outputs: ["onNavigate", "onViewMode"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDatepickerDayDecoratorComponent, selector: "[bsDatepickerDayDecorator]", inputs: ["day"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: BsCalendarLayoutComponent, selector: "bs-calendar-layout" }, { kind: "component", type: BsDatepickerNavigationViewComponent, selector: "bs-datepicker-navigation-view", inputs: ["calendar", "isDisabled"], outputs: ["onNavigate", "onViewMode"] }, { kind: "component", type: BsDatepickerDayDecoratorComponent, selector: "[bsDatepickerDayDecorator]", inputs: ["day"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaysCalendarViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaysCalendarViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bs-days-calendar-view',
@@ -2050,52 +2094,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
       <!--days matrix-->
       <table role="grid" class="days weeks">
         <thead>
-        <tr>
-          <!--if show weeks-->
-          <th *ngIf="options && options.showWeekNumbers"></th>
-          <th *ngFor="let weekday of calendar.weekdays; let i = index"
-              aria-label="weekday">{{ calendar.weekdays[i] }}
-          </th>
-        </tr>
+          <tr>
+            <!--if show weeks-->
+            @if (options && options.showWeekNumbers) {
+              <th></th>
+            }
+            @for (weekday of calendar.weekdays; track weekday; let i = $index) {
+              <th
+                aria-label="weekday">{{ calendar.weekdays[i] }}
+              </th>
+            }
+          </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let week of calendar.weeks; let i = index">
-          <td class="week" [class.active-week]="isWeekHovered"  *ngIf="options && options.showWeekNumbers">
-            <span *ngIf="isiOS" (click)="selectWeek(week)">{{ calendar.weekNumbers[i] }}</span>
-            <span *ngIf="!isiOS"
-                (click)="selectWeek(week)"
-                (mouseenter)="weekHoverHandler(week, true)"
-                (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }}</span>
-          </td>
-          <td *ngFor="let day of week.days" role="gridcell">
-
-            <!-- When we want to show tooltips for dates -->
-            <span *ngIf="!isiOS && isShowTooltip" bsDatepickerDayDecorator
-                [day]="day"
-                (click)="selectDay(day)"
-                tooltip="{{day.tooltipText}}"
-                (mouseenter)="hoverDay(day, true)"
-                (mouseleave)="hoverDay(day, false)">{{ day.label }} 3</span>
-            <!-- When tooltips for dates are disabled -->
-            <span *ngIf="!isiOS && !isShowTooltip" bsDatepickerDayDecorator
-                  [day]="day"
-                  (click)="selectDay(day)"
-                  (mouseenter)="hoverDay(day, true)"
-                  (mouseleave)="hoverDay(day, false)">{{ day.label }} 2</span>
-
-            <!-- For mobile iOS view, tooltips are not needed -->
-            <span *ngIf="isiOS" bsDatepickerDayDecorator
-                  [day]="day"
-                  (click)="selectDay(day)">{{ day.label }} 1</span>
-          </td>
-        </tr>
+          @for (week of calendar.weeks; track week; let i = $index) {
+            <tr>
+              @if (options && options.showWeekNumbers) {
+                <td class="week" [class.active-week]="isWeekHovered" >
+                  @if (isiOS) {
+                    <span (click)="selectWeek(week)">{{ calendar.weekNumbers[i] }}</span>
+                  }
+                  @if (!isiOS) {
+                    <span
+                      (click)="selectWeek(week)"
+                      (mouseenter)="weekHoverHandler(week, true)"
+                    (mouseleave)="weekHoverHandler(week, false)">{{ calendar.weekNumbers[i] }}</span>
+                  }
+                </td>
+              }
+              @for (day of week.days; track day) {
+                <td role="gridcell">
+                  <!-- When we want to show tooltips for dates -->
+                  @if (!isiOS && isShowTooltip) {
+                    <span bsDatepickerDayDecorator
+                      [day]="day"
+                      (click)="selectDay(day)"
+                      tooltip="{{day.tooltipText}}"
+                      (mouseenter)="hoverDay(day, true)"
+                    (mouseleave)="hoverDay(day, false)">{{ day.label }} 3</span>
+                  }
+                  <!-- When tooltips for dates are disabled -->
+                  @if (!isiOS && !isShowTooltip) {
+                    <span bsDatepickerDayDecorator
+                      [day]="day"
+                      (click)="selectDay(day)"
+                      (mouseenter)="hoverDay(day, true)"
+                    (mouseleave)="hoverDay(day, false)">{{ day.label }} 2</span>
+                  }
+                  <!-- For mobile iOS view, tooltips are not needed -->
+                  @if (isiOS) {
+                    <span bsDatepickerDayDecorator
+                      [day]="day"
+                    (click)="selectDay(day)">{{ day.label }} 1</span>
+                  }
+                </td>
+              }
+            </tr>
+          }
         </tbody>
       </table>
-
+    
     </bs-calendar-layout>
-  `,
+    `,
                     standalone: true,
-                    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgIf, NgFor, BsDatepickerDayDecoratorComponent, TooltipModule]
+                    imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, BsDatepickerDayDecoratorComponent, TooltipModule]
                 }]
         }], ctorParameters: () => [{ type: BsDatepickerConfig }], propDecorators: { calendar: [{
                 type: Input
@@ -2266,19 +2328,17 @@ class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent {
         this.selectedTimeSub.unsubscribe();
         this._effects?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerContainerComponent, isStandalone: true, selector: "bs-datepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsDatepickerContainerComponent, isStandalone: true, selector: "bs-datepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-datepicker-container', providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], host: {
                         class: 'bottom',
                         '(click)': '_stopPropagation($event)',
                         role: 'dialog',
                         'aria-label': 'calendar'
-                    }, animations: [datepickerAnimation], standalone: true, imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule,
-                        BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe
-                    ], template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n" }]
+                    }, animations: [datepickerAnimation], standalone: true, imports: [NgClass, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { startTimepicker: [{
                 type: ViewChild,
                 args: ['startTP']
@@ -2528,15 +2588,15 @@ class BsDatepickerDirective {
         }
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerDirective, deps: [{ token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerDirective, isStandalone: true, selector: "[bsDatepicker]", inputs: { placement: "placement", triggers: "triggers", outsideClick: "outsideClick", container: "container", outsideEsc: "outsideEsc", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", ignoreMinMaxErrors: "ignoreMinMaxErrors", minMode: "minMode", daysDisabled: "daysDisabled", datesDisabled: "datesDisabled", datesEnabled: "datesEnabled", dateCustomClasses: "dateCustomClasses", dateTooltipTexts: "dateTooltipTexts", isOpen: "isOpen", bsValue: "bsValue", bsConfig: "bsConfig" }, outputs: { onShown: "onShown", onHidden: "onHidden", bsValueChange: "bsValueChange" }, host: { properties: { "attr.readonly": "this.readonlyValue" } }, providers: [ComponentLoaderFactory], exportAs: ["bsDatepicker"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerDirective, deps: [{ token: BsDatepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsDatepickerDirective, isStandalone: true, selector: "[bsDatepicker]", inputs: { placement: "placement", triggers: "triggers", outsideClick: "outsideClick", container: "container", outsideEsc: "outsideEsc", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", ignoreMinMaxErrors: "ignoreMinMaxErrors", minMode: "minMode", daysDisabled: "daysDisabled", datesDisabled: "datesDisabled", datesEnabled: "datesEnabled", dateCustomClasses: "dateCustomClasses", dateTooltipTexts: "dateTooltipTexts", isOpen: "isOpen", bsValue: "bsValue", bsConfig: "bsConfig" }, outputs: { onShown: "onShown", onHidden: "onHidden", bsValueChange: "bsValueChange" }, host: { properties: { "attr.readonly": "this.readonlyValue" } }, providers: [ComponentLoaderFactory, PositioningService], exportAs: ["bsDatepicker"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bsDatepicker]',
                     exportAs: 'bsDatepicker',
-                    providers: [ComponentLoaderFactory],
+                    providers: [ComponentLoaderFactory, PositioningService],
                     standalone: true
                 }]
         }], ctorParameters: () => [{ type: BsDatepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }], propDecorators: { placement: [{
@@ -2587,10 +2647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
             }] } });
 
 class BsDatepickerInlineConfig extends BsDatepickerConfig {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineConfig, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2609,14 +2669,14 @@ class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponen
         _renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
         _renderer.setStyle(_element.nativeElement, 'position', 'static');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerInlineContainerComponent, isStandalone: true, selector: "bs-datepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects, PositioningService], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsDatepickerInlineContainerComponent, isStandalone: true, selector: "bs-datepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-datepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects, PositioningService], host: {
+            args: [{ selector: 'bs-datepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects], host: {
                         '(click)': '_stopPropagation($event)'
-                    }, animations: [datepickerAnimation], standalone: true, imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n" }]
+                    }, animations: [datepickerAnimation], standalone: true, imports: [NgClass, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { disabledValue: [{
                 type: HostBinding,
                 args: ['attr.disabled']
@@ -2745,16 +2805,16 @@ class BsDatepickerInlineDirective {
         this._datepicker.dispose();
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineDirective, deps: [{ token: BsDatepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerInlineDirective, isStandalone: true, selector: "bs-datepicker-inline", inputs: { bsConfig: "bsConfig", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", dateCustomClasses: "dateCustomClasses", dateTooltipTexts: "dateTooltipTexts", datesEnabled: "datesEnabled", datesDisabled: "datesDisabled", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange" }, providers: [ComponentLoaderFactory], exportAs: ["bsDatepickerInline"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineDirective, deps: [{ token: BsDatepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsDatepickerInlineDirective, isStandalone: true, selector: "bs-datepicker-inline", inputs: { bsConfig: "bsConfig", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", dateCustomClasses: "dateCustomClasses", dateTooltipTexts: "dateTooltipTexts", datesEnabled: "datesEnabled", datesDisabled: "datesDisabled", bsValue: "bsValue" }, outputs: { bsValueChange: "bsValueChange" }, providers: [ComponentLoaderFactory, PositioningService], exportAs: ["bsDatepickerInline"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInlineDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInlineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'bs-datepicker-inline',
                     exportAs: 'bsDatepickerInline',
                     standalone: true,
-                    providers: [ComponentLoaderFactory]
+                    providers: [ComponentLoaderFactory, PositioningService]
                 }]
         }], ctorParameters: () => [{ type: BsDatepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }], propDecorators: { bsConfig: [{
                 type: Input
@@ -2786,10 +2846,10 @@ class BsDaterangepickerInlineConfig extends BsDatepickerConfig {
         /** turn on/off animation */
         this.isAnimated = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineConfig, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3009,12 +3069,12 @@ class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent
         }
         this._effects?.setMaxDate(maxDateRange);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDaterangepickerContainerComponent, isStandalone: true, selector: "bs-daterangepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }, { propertyName: "endTimepicker", first: true, predicate: ["endTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsDaterangepickerContainerComponent, isStandalone: true, selector: "bs-daterangepicker-container", host: { attributes: { "role": "dialog", "aria-label": "calendar" }, listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.isDatepickerDisabled", "attr.readonly": "this.isDatepickerReadonly" }, classAttribute: "bottom" }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], viewQueries: [{ propertyName: "startTimepicker", first: true, predicate: ["startTP"], descendants: true }, { propertyName: "endTimepicker", first: true, predicate: ["endTP"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-daterangepicker-container', providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], host: {
+            args: [{ selector: 'bs-daterangepicker-container', providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], host: {
                         class: 'bottom',
                         '(click)': '_stopPropagation($event)',
                         role: 'dialog',
@@ -3031,7 +3091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImpor
                         BsYearsCalendarViewComponent,
                         BsCustomDatesViewComponent,
                         AsyncPipe
-                    ], template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n" }]
+                    ], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { startTimepicker: [{
                 type: ViewChild,
                 args: ['startTP']
@@ -3058,14 +3118,14 @@ class BsDaterangepickerInlineContainerComponent extends BsDaterangepickerContain
         _renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
         _renderer.setStyle(_element.nativeElement, 'position', 'static');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: BsDaterangepickerInlineContainerComponent, isStandalone: true, selector: "bs-daterangepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, deps: [{ token: i0.Renderer2 }, { token: BsDatepickerConfig }, { token: BsDatepickerStore }, { token: i0.ElementRef }, { token: BsDatepickerActions }, { token: BsDatepickerEffects }, { token: i5.PositioningService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: BsDaterangepickerInlineContainerComponent, isStandalone: true, selector: "bs-daterangepicker-inline-container", host: { listeners: { "click": "_stopPropagation($event)" }, properties: { "attr.disabled": "this.disabledValue", "attr.readonly": "this.readonlyValue" } }, providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], usesInheritance: true, ngImport: i0, template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BsDaysCalendarViewComponent, selector: "bs-days-calendar-view", inputs: ["calendar", "options", "isDisabled"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover", "onHoverWeek"] }, { kind: "ngmodule", type: TimepickerModule }, { kind: "component", type: i6.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "component", type: BsMonthCalendarViewComponent, selector: "bs-month-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsYearsCalendarViewComponent, selector: "bs-years-calendar-view", inputs: ["calendar"], outputs: ["onNavigate", "onViewMode", "onSelect", "onHover"] }, { kind: "component", type: BsCustomDatesViewComponent, selector: "bs-custom-date-view", inputs: ["ranges", "selectedRange", "customRangeLabel"], outputs: ["onSelect"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [datepickerAnimation] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-daterangepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], host: {
+            args: [{ selector: 'bs-daterangepicker-inline-container', providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions], host: {
                         '(click)': '_stopPropagation($event)'
-                    }, animations: [datepickerAnimation], standalone: true, imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n<div class=\"bs-datepicker\" [ngClass]=\"containerClass\" *ngIf=\"viewMode | async\">\n  <div class=\"bs-datepicker-container\"\n    [@datepickerAnimation]=\"animationState\"\n    (@datepickerAnimation.done)=\"positionServiceEnable()\">\n    <!--calendars-->\n    <div class=\"bs-calendar-container\" [ngSwitch]=\"viewMode | async\" role=\"application\">\n      <!--days calendar-->\n      <ng-container *ngSwitchCase=\"'day'\">\n        <div class=\"bs-media-container\">\n          <bs-days-calendar-view\n            *ngFor=\"let calendar of daysCalendar$ | async\"\n            [class.bs-datepicker-multiple]=\"multipleCalendars\"\n            [calendar]=\"calendar\"\n            [isDisabled]=\"isDatePickerDisabled\"\n            [options]=\"options$ | async\"\n            (onNavigate)=\"navigateTo($event)\"\n            (onViewMode)=\"setViewMode($event)\"\n            (onHover)=\"dayHoverHandler($event)\"\n            (onHoverWeek)=\"weekHoverHandler($event)\"\n            (onSelect)=\"daySelectHandler($event)\">\n          </bs-days-calendar-view>\n        </div>\n        <div *ngIf=\"withTimepicker\" class=\"bs-timepicker-in-datepicker-container\">\n          <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n          <timepicker #endTP *ngIf=\"isRangePicker\" [disabled]=\"isDatePickerDisabled\"></timepicker>\n        </div>\n      </ng-container>\n\n      <!--months calendar-->\n      <div *ngSwitchCase=\"'month'\" class=\"bs-media-container\">\n        <bs-month-calendar-view\n          *ngFor=\"let calendar of monthsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"monthHoverHandler($event)\"\n          (onSelect)=\"monthSelectHandler($event)\">\n        </bs-month-calendar-view>\n      </div>\n\n      <!--years calendar-->\n      <div *ngSwitchCase=\"'year'\" class=\"bs-media-container\">\n        <bs-years-calendar-view\n          *ngFor=\"let calendar of yearsCalendar | async\"\n          [class.bs-datepicker-multiple]=\"multipleCalendars\"\n          [calendar]=\"calendar\"\n          (onNavigate)=\"navigateTo($event)\"\n          (onViewMode)=\"setViewMode($event)\"\n          (onHover)=\"yearHoverHandler($event)\"\n          (onSelect)=\"yearSelectHandler($event)\">\n        </bs-years-calendar-view>\n      </div>\n    </div>\n\n    <!--applycancel buttons-->\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"false\">\n      <button class=\"btn btn-success\" type=\"button\">Apply</button>\n      <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n    </div>\n\n    <div class=\"bs-datepicker-buttons\" *ngIf=\"showTodayBtn || showClearBtn\">\n      <div class=\"btn-today-wrapper\"\n           [class.today-left]=\"todayPos === 'left'\"\n           [class.today-right]=\"todayPos === 'right'\"\n           [class.today-center]=\"todayPos === 'center'\"\n           *ngIf=\"showTodayBtn\">\n        <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n      </div>\n\n        <div class=\"btn-clear-wrapper\"\n        [class.clear-left]=\"clearPos === 'left'\"\n        [class.clear-right]=\"clearPos === 'right'\"\n        [class.clear-center]=\"clearPos === 'center'\"\n        *ngIf=\"showClearBtn\">\n          <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n        </div>\n    </div>\n\n  </div>\n\n  <!--custom dates or date ranges picker-->\n  <div class=\"bs-datepicker-custom-range\" *ngIf=\"customRanges && customRanges.length > 0\">\n    <bs-custom-date-view\n      [selectedRange]=\"chosenRange\"\n      [ranges]=\"customRanges\"\n      [customRangeLabel]=\"customRangeBtnLbl\"\n      (onSelect)=\"setRangeOnCalendar($event)\">\n    </bs-custom-date-view>\n  </div>\n</div>\n" }]
+                    }, animations: [datepickerAnimation], standalone: true, imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe], template: "<!-- days calendar view mode -->\n@if (viewMode | async) {\n  <div class=\"bs-datepicker\" [ngClass]=\"containerClass\">\n    <div class=\"bs-datepicker-container\"\n      [@datepickerAnimation]=\"animationState\"\n      (@datepickerAnimation.done)=\"positionServiceEnable()\">\n      <!--calendars-->\n      <div class=\"bs-calendar-container\" role=\"application\">\n        @switch (viewMode | async) {\n          <!--days calendar-->\n          @case ('day') {\n            <div class=\"bs-media-container\">\n              @for (calendar of daysCalendar$ | async; track calendar) {\n                <bs-days-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  [isDisabled]=\"isDatePickerDisabled\"\n                  [options]=\"options$ | async\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"dayHoverHandler($event)\"\n                  (onHoverWeek)=\"weekHoverHandler($event)\"\n                  (onSelect)=\"daySelectHandler($event)\">\n                </bs-days-calendar-view>\n              }\n            </div>\n            @if (withTimepicker) {\n              <div class=\"bs-timepicker-in-datepicker-container\">\n                <timepicker #startTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                @if (isRangePicker) {\n                  <timepicker #endTP [disabled]=\"isDatePickerDisabled\"></timepicker>\n                }\n              </div>\n            }\n          }\n          <!--months calendar-->\n          @case ('month') {\n            <div class=\"bs-media-container\">\n              @for (calendar of monthsCalendar | async; track calendar) {\n                <bs-month-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"monthHoverHandler($event)\"\n                  (onSelect)=\"monthSelectHandler($event)\">\n                </bs-month-calendar-view>\n              }\n            </div>\n          }\n          <!--years calendar-->\n          @case ('year') {\n            <div class=\"bs-media-container\">\n              @for (calendar of yearsCalendar | async; track calendar) {\n                <bs-years-calendar-view\n                  [class.bs-datepicker-multiple]=\"multipleCalendars\"\n                  [calendar]=\"calendar\"\n                  (onNavigate)=\"navigateTo($event)\"\n                  (onViewMode)=\"setViewMode($event)\"\n                  (onHover)=\"yearHoverHandler($event)\"\n                  (onSelect)=\"yearSelectHandler($event)\">\n                </bs-years-calendar-view>\n              }\n            </div>\n          }\n        }\n      </div>\n      <!--applycancel buttons-->\n      @if (false) {\n        <div class=\"bs-datepicker-buttons\">\n          <button class=\"btn btn-success\" type=\"button\">Apply</button>\n          <button class=\"btn btn-default\" type=\"button\">Cancel</button>\n        </div>\n      }\n      @if (showTodayBtn || showClearBtn) {\n        <div class=\"bs-datepicker-buttons\">\n          @if (showTodayBtn) {\n            <div class=\"btn-today-wrapper\"\n              [class.today-left]=\"todayPos === 'left'\"\n              [class.today-right]=\"todayPos === 'right'\"\n              [class.today-center]=\"todayPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"setToday()\">{{todayBtnLbl}}</button>\n            </div>\n          }\n          @if (showClearBtn) {\n            <div class=\"btn-clear-wrapper\"\n              [class.clear-left]=\"clearPos === 'left'\"\n              [class.clear-right]=\"clearPos === 'right'\"\n              [class.clear-center]=\"clearPos === 'center'\"\n              >\n              <button class=\"btn btn-success\" (click)=\"clearDate()\">{{clearBtnLbl}}</button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!--custom dates or date ranges picker-->\n    @if (customRanges && customRanges.length > 0) {\n      <div class=\"bs-datepicker-custom-range\">\n        <bs-custom-date-view\n          [selectedRange]=\"chosenRange\"\n          [ranges]=\"customRanges\"\n          [customRangeLabel]=\"customRangeBtnLbl\"\n          (onSelect)=\"setRangeOnCalendar($event)\">\n        </bs-custom-date-view>\n      </div>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: BsDatepickerConfig }, { type: BsDatepickerStore }, { type: i0.ElementRef }, { type: BsDatepickerActions }, { type: BsDatepickerEffects }, { type: i5.PositioningService }], propDecorators: { disabledValue: [{
                 type: HostBinding,
                 args: ['attr.disabled']
@@ -3196,20 +3256,16 @@ class BsDaterangepickerInlineDirective {
         this._datepicker.dispose();
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineDirective, deps: [{ token: BsDaterangepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: BsDaterangepickerInlineDirective, isStandalone: true, selector: "bs-daterangepicker-inline", inputs: { bsValue: "bsValue", bsConfig: "bsConfig", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", dateCustomClasses: "dateCustomClasses", daysDisabled: "daysDisabled", datesDisabled: "datesDisabled", datesEnabled: "datesEnabled" }, outputs: { bsValueChange: "bsValueChange" }, providers: [
-            ComponentLoaderFactory
-        ], exportAs: ["bsDaterangepickerInline"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineDirective, deps: [{ token: BsDaterangepickerInlineConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsDaterangepickerInlineDirective, isStandalone: true, selector: "bs-daterangepicker-inline", inputs: { bsValue: "bsValue", bsConfig: "bsConfig", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", dateCustomClasses: "dateCustomClasses", daysDisabled: "daysDisabled", datesDisabled: "datesDisabled", datesEnabled: "datesEnabled" }, outputs: { bsValueChange: "bsValueChange" }, providers: [ComponentLoaderFactory, PositioningService], exportAs: ["bsDaterangepickerInline"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInlineDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInlineDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'bs-daterangepicker-inline',
                     exportAs: 'bsDaterangepickerInline',
                     standalone: true,
-                    providers: [
-                        ComponentLoaderFactory
-                    ]
+                    providers: [ComponentLoaderFactory, PositioningService]
                 }]
         }], ctorParameters: () => [{ type: BsDaterangepickerInlineConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }], propDecorators: { bsValue: [{
                 type: Input
@@ -3363,13 +3419,13 @@ class BsDatepickerInputDirective {
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInputDirective, deps: [{ token: BsDatepickerDirective, host: true }, { token: BsLocaleService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: BsDatepickerInputDirective, isStandalone: true, selector: "input[bsDatepicker]", host: { listeners: { "change": "onChange($event)", "blur": "onBlur()", "keyup.esc": "hide()", "keydown.enter": "hide()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInputDirective, deps: [{ token: BsDatepickerDirective, host: true }, { token: BsLocaleService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsDatepickerInputDirective, isStandalone: true, selector: "input[bsDatepicker]", host: { listeners: { "change": "onChange($event)", "blur": "onBlur()", "keyup.esc": "hide()", "keydown.enter": "hide()" } }, providers: [
             BS_DATEPICKER_VALUE_ACCESSOR,
             BS_DATEPICKER_VALIDATOR
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[bsDatepicker]`,
@@ -3401,10 +3457,10 @@ class BsDaterangepickerConfig extends BsDatepickerConfig {
         // DatepickerRenderOptions
         this.displayMonths = 2;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerConfig, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3646,20 +3702,16 @@ class BsDaterangepickerDirective {
         }
         this.unsubscribeSubscriptions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerDirective, deps: [{ token: BsDaterangepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: BsDaterangepickerDirective, isStandalone: true, selector: "[bsDaterangepicker]", inputs: { placement: "placement", triggers: "triggers", outsideClick: "outsideClick", container: "container", outsideEsc: "outsideEsc", isOpen: "isOpen", bsValue: "bsValue", bsConfig: "bsConfig", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", dateCustomClasses: "dateCustomClasses", daysDisabled: "daysDisabled", datesDisabled: "datesDisabled", datesEnabled: "datesEnabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", bsValueChange: "bsValueChange" }, host: { properties: { "attr.readonly": "this.isDatepickerReadonly" } }, providers: [
-            ComponentLoaderFactory
-        ], exportAs: ["bsDaterangepicker"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerDirective, deps: [{ token: BsDaterangepickerConfig }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i2$1.ComponentLoaderFactory }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsDaterangepickerDirective, isStandalone: true, selector: "[bsDaterangepicker]", inputs: { placement: "placement", triggers: "triggers", outsideClick: "outsideClick", container: "container", outsideEsc: "outsideEsc", isOpen: "isOpen", bsValue: "bsValue", bsConfig: "bsConfig", isDisabled: "isDisabled", minDate: "minDate", maxDate: "maxDate", dateCustomClasses: "dateCustomClasses", daysDisabled: "daysDisabled", datesDisabled: "datesDisabled", datesEnabled: "datesEnabled" }, outputs: { onShown: "onShown", onHidden: "onHidden", bsValueChange: "bsValueChange" }, host: { properties: { "attr.readonly": "this.isDatepickerReadonly" } }, providers: [ComponentLoaderFactory, PositioningService], exportAs: ["bsDaterangepicker"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bsDaterangepicker]',
                     exportAs: 'bsDaterangepicker',
                     standalone: true,
-                    providers: [
-                        ComponentLoaderFactory
-                    ]
+                    providers: [ComponentLoaderFactory, PositioningService]
                 }]
         }], ctorParameters: () => [{ type: BsDaterangepickerConfig }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i2$1.ComponentLoaderFactory }], propDecorators: { placement: [{
                 type: Input
@@ -3880,13 +3932,13 @@ class BsDaterangepickerInputDirective {
             this._renderer.selectRootElement(this._elRef.nativeElement).focus();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInputDirective, deps: [{ token: BsDaterangepickerDirective, host: true }, { token: BsLocaleService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: BsDaterangepickerInputDirective, isStandalone: true, selector: "input[bsDaterangepicker]", host: { listeners: { "change": "onChange($event)", "keyup.esc": "hide()", "keydown": "onKeydownEvent($event)", "blur": "onBlur()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInputDirective, deps: [{ token: BsDaterangepickerDirective, host: true }, { token: BsLocaleService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BsDaterangepickerInputDirective, isStandalone: true, selector: "input[bsDaterangepicker]", host: { listeners: { "change": "onChange($event)", "keyup.esc": "hide()", "keydown": "onKeydownEvent($event)", "blur": "onBlur()" } }, providers: [
             BS_DATERANGEPICKER_VALUE_ACCESSOR,
             BS_DATERANGEPICKER_VALIDATOR
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDaterangepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDaterangepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `input[bsDaterangepicker]`,
@@ -3914,8 +3966,8 @@ class BsDatepickerModule {
             providers: []
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerModule, imports: [CommonModule, TooltipModule, TimepickerModule, BsCalendarLayoutComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerModule, imports: [CommonModule, TooltipModule, TimepickerModule, BsCalendarLayoutComponent,
             BsCurrentDateViewComponent,
             BsCustomDatesViewComponent,
             BsDatepickerDayDecoratorComponent,
@@ -3943,14 +3995,14 @@ class BsDatepickerModule {
             BsDaterangepickerInlineContainerComponent,
             BsDaterangepickerInlineDirective,
             BsDaterangepickerInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerModule, imports: [CommonModule, TooltipModule, TimepickerModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerModule, imports: [CommonModule, TooltipModule, TimepickerModule,
             BsDaysCalendarViewComponent,
             BsDatepickerContainerComponent,
             BsDatepickerInlineContainerComponent,
             BsDaterangepickerContainerComponent,
             BsDaterangepickerInlineContainerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: BsDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BsDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TooltipModule, TimepickerModule, BsCalendarLayoutComponent,