@coreui/angular-pro 4.2.26 → 4.2.28

package/fesm2020/coreui-angular-pro.mjs

@@ -10,12 +10,12 @@ import { NavigationEnd, RouterModule } from '@angular/router';
 import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject, distinctUntilChanged, takeUntil, map, debounceTime } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isValid, format } from 'date-fns';
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import { createPopper } from '@popperjs/core';
-import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i1$3 from '@angular/cdk/a11y';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
 import * as i5 from '@coreui/icons-angular';
@@ -4108,6 +4108,7 @@ class DropdownComponent {
         this.dropdownContext = { $implicit: this.visible };
         this.activeTrap = false;
         this.listeners = [];
+        this.dropdownStateSubscribe();
     }
     /**
      * Sets a darker color scheme to match a dark navbar.
@@ -4177,10 +4178,12 @@ class DropdownComponent {
      */
     set visible(value) {
         const _value = coerceBooleanProperty(value);
-        this.activeTrap = _value;
-        this._visible = _value;
-        _value ? this.createPopperInstance() : this.destroyPopperInstance();
-        this.visibleChange.emit(_value);
+        if (_value !== this._visible) {
+            this.activeTrap = _value;
+            this._visible = _value;
+            _value ? this.createPopperInstance() : this.destroyPopperInstance();
+            this.visibleChange.emit(_value);
+        }
     }
     get visible() {
         return this._visible;
@@ -4205,13 +4208,13 @@ class DropdownComponent {
     dropdownStateSubscribe(subscribe = true) {
         if (subscribe) {
             this.dropdownStateSubscription =
-                this.dropdownService.dropdownState$.subscribe((state) => {
-                    if (this === state.dropdown) {
-                        if ('visible' in state) {
-                            state?.visible === 'toggle'
-                                ? this.toggleDropdown()
-                                : (this.visible = state.visible);
-                        }
+                this.dropdownService.dropdownState$.pipe(filter((state) => {
+                    return this === state.dropdown;
+                })).subscribe((state) => {
+                    if ('visible' in state) {
+                        state?.visible === 'toggle'
+                            ? this.toggleDropdown()
+                            : (this.visible = state.visible);
                     }
                 });
         }
@@ -4233,9 +4236,13 @@ class DropdownComponent {
         }
     }
     ngOnInit() {
-        this.dropdownStateSubscribe();
         this.setVisibleState(this.visible);
     }
+    ngOnChanges(changes) {
+        if (changes['visible'] && !changes['visible'].firstChange) {
+            this.setVisibleState(changes['visible'].currentValue);
+        }
+    }
     ngOnDestroy() {
         this.clearListeners();
         this.dropdownStateSubscribe(false);
@@ -4314,7 +4321,7 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropdownComponent, selector: "c-dropdown", inputs: { alignment: "alignment", autoClose: "autoClose", dark: "dark", direction: "direction", placement: "placement", popper: "popper", popperOptions: "popperOptions", variant: "variant", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "this.hostClasses", "style": "this.hostStyle" } }, providers: [DropdownService], queries: [{ propertyName: "_toggler", first: true, predicate: DropdownToggleDirective, descendants: true }, { propertyName: "_menu", first: true, predicate: DropdownMenuDirective, descendants: true }, { propertyName: "_menuElementRef", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }], exportAs: ["cDropdown"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-dropdown', template: '<ng-content></ng-content>', exportAs: 'cDropdown', providers: [DropdownService], styles: [":host-context(.dropdown,.dropup):not(.btn-group){display:block}:host-context(.dropstart,.dropend):not(.btn-group){display:inline-flex}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-right-radius:0;border-bottom-right-radius:0}:host-context(html:not([dir=rtl])) :host-context(.input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host{direction:rtl}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :first-child{border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:first-child::ng-deep :not(:first-child):not(.dropdown-menu):not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child{border-top-right-radius:0;border-bottom-right-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :first-child:not(:only-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl] .input-group) :host:last-child::ng-deep :not(:first-child):not(.dropdown-menu){margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
@@ -5977,6 +5984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: [TemplateIdDirective, { descendants: true }]
             }] } });
 
+var _DateRangePickerComponent_closeOnSelect;
 /** Must be a valid date string */
 // todo: validation
 // export function invalidDateStringValidator(locale: string): ValidatorFn {
@@ -6003,6 +6011,7 @@ class DateRangePickerComponent {
         this.dayFormat = 'numeric';
         this._calendars = 2;
         this._cleaner = true;
+        _DateRangePickerComponent_closeOnSelect.set(this, false);
         this._indicator = true;
         this._inputReadOnly = false;
         this._navYearFirst = false;
@@ -6104,6 +6113,17 @@ class DateRangePickerComponent {
     get cleaner() {
         return this._cleaner;
     }
+    /**
+     * Determine if the dropdown should be closed after value setting.
+     * @type boolean
+     * @default false
+     */
+    set closeOnSelect(value) {
+        __classPrivateFieldSet(this, _DateRangePickerComponent_closeOnSelect, coerceBooleanProperty(value), "f");
+    }
+    get closeOnSelect() {
+        return __classPrivateFieldGet(this, _DateRangePickerComponent_closeOnSelect, "f");
+    }
     /**
      * Toggle visibility or set the content of the input indicator.
      * @type boolean
@@ -6234,6 +6254,10 @@ class DateRangePickerComponent {
             this.onChange(newValue);
             this.onTouched();
             this.valueChange.emit(this.value);
+            if (this.closeOnSelect) {
+                const hasValue = this.range ? !!(this.value.startDate && this.value.endDate) : !!this.value;
+                this.visible = !hasValue;
+            }
         }
     }
     get value() {
@@ -6460,14 +6484,15 @@ class DateRangePickerComponent {
         this.endDate = time ?? this.endDate;
     }
 }
+_DateRangePickerComponent_closeOnSelect = new WeakMap();
 DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
+DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DateRangePickerComponent, selector: "c-date-range-picker", inputs: { dayFormat: "dayFormat", calendars: "calendars", cleaner: "cleaner", closeOnSelect: "closeOnSelect", format: "format", indicator: "indicator", inputReadOnly: "inputReadOnly", navYearFirst: "navYearFirst", placeholder: "placeholder", ranges: "ranges", rangesButtonsColor: "rangesButtonsColor", rangesButtonsSize: "rangesButtonsSize", rangesButtonsVariant: "rangesButtonsVariant", separator: "separator", size: "size", timepicker: "timepicker", valid: "valid", visible: "visible", startDate: "startDate", endDate: "endDate", calendarDate: "calendarDate", disabledDates: "disabledDates", firstDayOfWeek: "firstDayOfWeek", locale: "locale", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", range: "range", dateFilter: "dateFilter", disabled: "disabled", value: "value", weekdayFormat: "weekdayFormat", popperjsOptions: ["popperOptions", "popperjsOptions"] }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DateRangePickerComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "startDateElementRef", first: true, predicate: ["startDateElementRef"], descendants: true }, { propertyName: "endDateElementRef", first: true, predicate: ["endDateElementRef"], descendants: true }], exportAs: ["cDateRangePicker"], usesOnChanges: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-range-picker', exportAs: 'cDateRangePicker', providers: [
@@ -6476,13 +6501,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
                 type: Input
             }], cleaner: [{
                 type: Input
+            }], closeOnSelect: [{
+                type: Input
             }], format: [{
                 type: Input
             }], indicator: [{
@@ -7074,7 +7101,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             useExisting: forwardRef(() => DatePickerComponent),
             multi: true
         }
-    ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
+    ], exportAs: ["cDatePicker"], usesInheritance: true, ngImport: i0, template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter"], outputs: ["calendarCellHover", "calendarDateChange", "endDateChange", "startDateChange", "viewChange"], exportAs: ["cCalendar"] }, { kind: "directive", type: FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "dark", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible", "dark"], exportAs: ["cDropdownMenu"] }, { kind: "component", type: TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-date-picker', exportAs: 'cDatePicker', providers: [
@@ -7083,7 +7110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [visible]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
+                    ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [ngClass]=\"datePickerClasses\" [(visible)]=\"visible\" [popperOptions]=\"popperjsOptions\">\n  <c-input-group [caret]=\"false\"\n                 [disabled]=\"disabled ?? dropdown.visible\"\n                 [sizing]=\"size ?? ''\"\n                 cDropdownToggle\n                 class=\"picker-input-group\"\n  >\n    <input (change)=\"handleStartDateInputChange($event)\"\n           [formControl]=\"startDateInput\"\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\n           cFormControl\n           #startDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"range ? undefined : valid\"\n    >\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\n      </span>\n    <input (change)=\"handleEndDateInputChange($event)\"\n           *ngIf=\"range\"\n           [formControl]=\"endDateInput\"\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\n           cFormControl\n           #endDateElementRef\n           [attr.tabindex]=\"disabled ? -1 : 0\"\n           [attr.disabled]=\"disabled ? '' : null\"\n           pattern=\"[1-9]*\"\n           [readonly]=\"inputReadOnly ?? null\"\n           [valid]=\"valid\"\n    >\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\n      </span>\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\n      </span>\n    </span>\n\n  </c-input-group>\n  <div cDropdownMenu>\n    <div class=\"date-picker-body\">\n      <ng-template [ngIf]=\"!isMobile\">\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\n          <button (click)=\"setCustomRange(customRange)\"\n                  *ngFor=\"let customRange of customRanges\"\n                  [color]=\"rangesButtonsColor\"\n                  [size]=\"rangesButtonsSize\"\n                  [variant]=\"rangesButtonsVariant\"\n                  cButton>\n            {{getCustomRangeKey(customRange)}}\n          </button>\n        </div>\n      </ng-template>\n      <c-calendar\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\n        (endDateChange)=\"handleEndDateChange($event)\"\n        (startDateChange)=\"handleStartDateChange($event)\"\n        [calendarDate]=\"calendarDate\"\n        [calendars]=\"isMobile ? 1 : calendars\"\n        [dateFilter]=\"dateFilter\"\n        [disabledDates]=\"disabledDates\"\n        [endDate]=\"endDate\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [locale]=\"locale\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [navigation]=\"navigation\"\n        [range]=\"range\"\n        [startDate]=\"startDate\"\n        [navYearFirst]=\"navYearFirst\"\n        [dayFormat]=\"dayFormat\"\n        [weekdayFormat]=\"weekdayFormat\"\n        class=\"date-picker-calendars\"\n      ></c-calendar>\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\n        <!-- todo-->\n        <c-time-picker\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!startDate\"\n          [time]=\"startDate ?? undefined\"\n          (timeChange)=\"handleStartTimeChange($event)\"\n        ></c-time-picker>\n        <c-time-picker\n          *ngIf=\"range\"\n          variant=\"select\"\n          [locale]=\"locale\"\n          [disabled]=\"!endDate\"\n          [time]=\"endDate ?? undefined\"\n          (timeChange)=\"handleEndTimeChange($event)\"\n        ></c-time-picker>\n      </div>\n    </div>\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\n    </div>\n  </div>\n  <ng-content></ng-content>\n</c-dropdown>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
@@ -8492,7 +8519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class MultiSelectTagComponent {
     constructor(multiSelectService) {
         this.multiSelectService = multiSelectService;
-        this.multiselectVisible = false;
+        this.multiselectVisible$ = this.multiSelectService.multiSelectVisible$;
         this.remove = new EventEmitter();
     }
     get hostClasses() {
@@ -8500,37 +8527,18 @@ class MultiSelectTagComponent {
             'form-multi-select-tag': true
         };
     }
-    ngOnInit() {
-        this.multiselectSubscribe();
-    }
-    ngOnDestroy() {
-        this.multiselectSubscribe(false);
-    }
     handleRemove($event) {
         if (this.option) {
             this.option.selected = false;
             this.remove.emit(this.option);
         }
     }
-    multiselectSubscribe(subscribe = true) {
-        if (subscribe) {
-            this.multiselectVisibleSubscription =
-                this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
-                    setTimeout(() => {
-                        this.multiselectVisible = visible;
-                    });
-                });
-        }
-        else {
-            this.multiselectVisibleSubscription.unsubscribe();
-        }
-    }
 }
 MultiSelectTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectTagComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: { option: "option" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIfElse]=\"elseContent\"\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\n<ng-template #elseContent>\n  <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\" [disabled]=\"!multiselectVisible\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: { option: "option" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template [ngIfElse]=\"elseContent\"\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}\n</ng-template>\n<ng-template #elseContent>\n  <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? false) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiSelectTagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-multi-select-tag', template: "<ng-template [ngIfElse]=\"elseContent\"\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}</ng-template>\n<ng-template #elseContent>\n  <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\" [disabled]=\"!multiselectVisible\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
+            args: [{ selector: 'c-multi-select-tag', template: "<ng-template [ngIfElse]=\"elseContent\"\n             [ngIf]=\"!!option\">{{option.label ?? option.value ?? 'undefined'}}\n</ng-template>\n<ng-template #elseContent>\n  <ng-content></ng-content>\n</ng-template>\n<button (click)=\"handleRemove($event)\" *ngIf=\"!option?.disabled\"\n        [disabled]=\"((multiselectVisible$ | async) ?? false) === false\" aria-label=\"Clear\"\n        class=\"form-multi-select-tag-delete close\" type=\"button\">\n  <span aria-hidden=\"true\">\u00D7</span>\n</button>\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all}\n"] }]
         }], ctorParameters: function () { return [{ type: MultiSelectService }]; }, propDecorators: { option: [{
                 type: Input
             }], remove: [{
@@ -9699,6 +9707,12 @@ class BackdropService {
         this.backdropClick$ = this.backdropClick.asObservable();
         this.renderer = rendererFactory.createRenderer(null, null);
     }
+    get scrollbarWidth() {
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+        const documentWidth = this.document.documentElement.clientWidth;
+        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+        return `${scrollbarWidth}px`;
+    }
     setBackdrop(type = 'modal') {
         const backdropElement = this.renderer.createElement('div');
         this.renderer.addClass(backdropElement, `${type}-backdrop`);
@@ -9734,7 +9748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: i0.RendererFactory2 }]; } });
@@ -9838,14 +9852,8 @@ class ModalComponent {
     set show(value) {
         this._show = value;
     }
-    get scrollbarWidth() {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-        const documentWidth = this.document.documentElement.clientWidth;
-        const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
-        return `${scrollbarWidth}px`;
-    }
     animateStart(event) {
-        const scrollbarWidth = this.scrollbarWidth;
+        const scrollbarWidth = this.backdropService.scrollbarWidth;
         if (event.toState === 'visible') {
             this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
             this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
@@ -10113,18 +10121,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+var _OffcanvasComponent_scroll, _OffcanvasComponent_visible, _OffcanvasComponent_activeBackdrop, _OffcanvasComponent_scrollbarWidth, _OffcanvasComponent_stateToggleSubscription, _OffcanvasComponent_backdropClickSubscription, _OffcanvasComponent_layoutChangeSubscription, _OffcanvasComponent_show;
 let nextId = 0;
 class OffcanvasComponent {
-    constructor(document, platformId, renderer, hostElement, offcanvasService, backdropService) {
+    constructor(document, platformId, renderer, hostElement, offcanvasService, backdropService, breakpointObserver) {
         this.document = document;
         this.platformId = platformId;
         this.renderer = renderer;
         this.hostElement = hostElement;
         this.offcanvasService = offcanvasService;
         this.backdropService = backdropService;
+        this.breakpointObserver = breakpointObserver;
         /**
          * Apply a backdrop on body while offcanvas is open.
-         * @type boolean
+         * @type boolean | 'static'
          * @default true
          */
         this.backdrop = true;
@@ -10140,7 +10150,14 @@ class OffcanvasComponent {
          * @default 'start'
          */
         this.placement = 'start';
-        this._scroll = false;
+        /**
+         * Responsive offcanvas property hides content outside the viewport from a specified breakpoint and down.
+         * @type boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+         * @default true
+         * @since 4.3.10
+         */
+        this.responsive = true;
+        _OffcanvasComponent_scroll.set(this, false);
         this.id = `offcanvas-${this.placement}-${nextId++}`;
         /**
          * Default role for offcanvas. [docs]
@@ -10154,166 +10171,220 @@ class OffcanvasComponent {
          * @default true
          */
         this.ariaModal = true;
+        _OffcanvasComponent_visible.set(this, false);
         /**
          * Event triggered on visible change.
          */
         this.visibleChange = new EventEmitter();
+        _OffcanvasComponent_activeBackdrop.set(this, void 0);
+        _OffcanvasComponent_scrollbarWidth.set(this, void 0);
+        _OffcanvasComponent_stateToggleSubscription.set(this, void 0);
+        _OffcanvasComponent_backdropClickSubscription.set(this, void 0);
+        _OffcanvasComponent_layoutChangeSubscription.set(this, void 0);
+        _OffcanvasComponent_show.set(this, false);
     }
     /**
      * Allow body scrolling while offcanvas is visible.
      * @type boolean
+     * @default false
      */
     set scroll(value) {
-        this._scroll = coerceBooleanProperty(value);
+        __classPrivateFieldSet(this, _OffcanvasComponent_scroll, coerceBooleanProperty(value), "f");
     }
-    ;
     get scroll() {
-        return this._scroll;
+        return __classPrivateFieldGet(this, _OffcanvasComponent_scroll, "f");
     }
     /**
      * Toggle the visibility of offcanvas component.
      * @type boolean
+     * @default false
      */
     set visible(value) {
-        this._visible = coerceBooleanProperty(value);
-        if (value) {
+        __classPrivateFieldSet(this, _OffcanvasComponent_visible, coerceBooleanProperty(value), "f");
+        if (__classPrivateFieldGet(this, _OffcanvasComponent_visible, "f")) {
             this.setBackdrop(this.backdrop);
             this.setFocus();
         }
         else {
             this.setBackdrop(false);
         }
-        this.setScroll();
+        this.layoutChangeSubscribe(__classPrivateFieldGet(this, _OffcanvasComponent_visible, "f"));
         this.visibleChange.emit(value);
     }
     get visible() {
-        return this._visible;
+        return __classPrivateFieldGet(this, _OffcanvasComponent_visible, "f");
     }
     get hostClasses() {
         return {
-            offcanvas: true,
+            offcanvas: typeof this.responsive === 'boolean',
+            [`offcanvas-${this.responsive}`]: typeof this.responsive !== 'boolean',
             [`offcanvas-${this.placement}`]: !!this.placement,
-            show: this.visible,
+            show: this.show
         };
     }
     get ariaHidden() {
         return this.visible ? null : true;
     }
-    ;
     get tabIndex() {
         return '-1';
     }
-    get animateType() {
-        return this.visible;
+    get animateTrigger() {
+        return this.visible ? 'visible' : 'hidden';
+    }
+    get show() {
+        return this.visible && __classPrivateFieldGet(this, _OffcanvasComponent_show, "f");
+    }
+    set show(value) {
+        __classPrivateFieldSet(this, _OffcanvasComponent_show, value, "f");
+    }
+    animateStart(event) {
+        const scrollbarWidth = __classPrivateFieldGet(this, _OffcanvasComponent_scrollbarWidth, "f");
+        if (event.toState === 'visible') {
+            if (!this.scroll) {
+                this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
+                this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+            }
+            this.renderer.addClass(this.hostElement.nativeElement, 'showing');
+        }
+        else {
+            this.renderer.addClass(this.hostElement.nativeElement, 'hiding');
+        }
+    }
+    animateDone(event) {
+        setTimeout(() => {
+            if (event.toState === 'visible') {
+                this.renderer.removeClass(this.hostElement.nativeElement, 'showing');
+            }
+            if (event.toState === 'hidden') {
+                this.renderer.removeClass(this.hostElement.nativeElement, 'hiding');
+                this.renderer.removeStyle(this.document.body, 'overflow');
+                this.renderer.removeStyle(this.document.body, 'paddingRight');
+            }
+        });
+        this.show = this.visible;
     }
     onKeyDownHandler(event) {
-        if (event.key === 'Escape' && this.keyboard && this.visible) {
+        if (event.key === 'Escape' &&
+            this.keyboard &&
+            this.visible &&
+            this.backdrop !== 'static') {
             this.offcanvasService.toggle({ show: false, id: this.id });
         }
     }
     ngOnInit() {
-        this.setScroll();
+        __classPrivateFieldSet(this, _OffcanvasComponent_scrollbarWidth, this.backdropService.scrollbarWidth, "f");
         this.stateToggleSubscribe();
+        // hotfix to avoid end offcanvas flicker on first render
+        this.renderer.setStyle(this.hostElement.nativeElement, 'display', 'flex');
     }
     ngOnDestroy() {
         this.offcanvasService.toggle({ show: false, id: this.id });
         this.stateToggleSubscribe(false);
     }
-    ngOnChanges(changes) {
-        if (changes['scroll']) {
-            this.setScroll();
-        }
-    }
     stateToggleSubscribe(subscribe = true) {
         if (subscribe) {
-            this.stateToggleSubscription = this.offcanvasService.offcanvasState$.subscribe((action) => {
+            __classPrivateFieldSet(this, _OffcanvasComponent_stateToggleSubscription, this.offcanvasService.offcanvasState$.subscribe((action) => {
                 if (this === action.offcanvas || this.id === action.id) {
                     if ('show' in action) {
-                        this.visible = action?.show === 'toggle' ? !this.visible : action.show;
+                        this.visible =
+                            action?.show === 'toggle' ? !this.visible : action.show;
                     }
                 }
-            });
+            }), "f");
         }
         else {
-            this.stateToggleSubscription.unsubscribe();
+            __classPrivateFieldGet(this, _OffcanvasComponent_stateToggleSubscription, "f").unsubscribe();
         }
     }
     backdropClickSubscribe(subscribe = true) {
         if (subscribe) {
-            this.backdropClickSubscription = this.backdropService.backdropClick$.subscribe((clicked) => {
+            __classPrivateFieldSet(this, _OffcanvasComponent_backdropClickSubscription, this.backdropService.backdropClick$.subscribe((clicked) => {
                 this.offcanvasService.toggle({ show: !clicked, id: this.id });
-            });
+            }), "f");
         }
         else {
-            this.backdropClickSubscription?.unsubscribe();
+            __classPrivateFieldGet(this, _OffcanvasComponent_backdropClickSubscription, "f")?.unsubscribe();
         }
     }
     setBackdrop(setBackdrop) {
-        if (setBackdrop) {
-            this.activeBackdrop = this.backdropService.setBackdrop('offcanvas');
-            this.backdropClickSubscribe();
-        }
-        else {
-            this.activeBackdrop = this.backdropService.clearBackdrop(this.activeBackdrop);
-            this.backdropClickSubscribe(false);
-        }
+        __classPrivateFieldSet(this, _OffcanvasComponent_scrollbarWidth, this.backdropService.scrollbarWidth, "f");
+        __classPrivateFieldSet(this, _OffcanvasComponent_activeBackdrop, !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
+            : this.backdropService.clearBackdrop(__classPrivateFieldGet(this, _OffcanvasComponent_activeBackdrop, "f")), "f");
+        setBackdrop === true ? this.backdropClickSubscribe()
+            : this.backdropClickSubscribe(false);
     }
     setFocus() {
         if (isPlatformBrowser(this.platformId)) {
             setTimeout(() => this.hostElement.nativeElement.focus());
         }
     }
-    setScroll() {
-        if (this.visible) {
-            if (!this.scroll) {
-                this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
-                this.renderer.setStyle(this.document.body, 'paddingRight.px', '0');
+    get responsiveBreakpoint() {
+        if (typeof this.responsive !== 'string') {
+            return false;
+        }
+        const element = this.document.documentElement;
+        const responsiveBreakpoint = this.responsive;
+        const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${responsiveBreakpoint.trim()}`) || false;
+        return breakpointValue ? `${parseFloat(breakpointValue.trim()) - 0.02}px` : false;
+    }
+    layoutChangeSubscribe(subscribe = true) {
+        if (subscribe) {
+            if (!this.responsiveBreakpoint) {
+                return;
             }
-            return;
+            const responsiveBreakpoint = `(max-width: ${this.responsiveBreakpoint})`;
+            const layoutChanges = this.breakpointObserver.observe([responsiveBreakpoint]);
+            __classPrivateFieldSet(this, _OffcanvasComponent_layoutChangeSubscription, layoutChanges
+                .pipe(filter(breakpointState => !breakpointState.matches))
+                .subscribe((breakpointState) => {
+                this.visible = breakpointState.matches;
+            }), "f");
         }
-        if (!this.scroll) {
-            this.renderer.removeStyle(this.document.body, 'overflow');
-            this.renderer.removeStyle(this.document.body, 'paddingRight');
+        else {
+            __classPrivateFieldGet(this, _OffcanvasComponent_layoutChangeSubscription, "f")?.unsubscribe();
         }
     }
 }
-OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }], target: i0.ɵɵFactoryTarget.Component });
-OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: OffcanvasComponent, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: "keyboard", placement: "placement", scroll: "scroll", id: "id", role: "role", ariaModal: "ariaModal", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateType" } }, exportAs: ["cOffcanvas"], usesOnChanges: true, ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+_OffcanvasComponent_scroll = new WeakMap(), _OffcanvasComponent_visible = new WeakMap(), _OffcanvasComponent_activeBackdrop = new WeakMap(), _OffcanvasComponent_scrollbarWidth = new WeakMap(), _OffcanvasComponent_stateToggleSubscription = new WeakMap(), _OffcanvasComponent_backdropClickSubscription = new WeakMap(), _OffcanvasComponent_layoutChangeSubscription = new WeakMap(), _OffcanvasComponent_show = new WeakMap();
+OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OffcanvasComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: OffcanvasService }, { token: BackdropService }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: OffcanvasComponent, selector: "c-offcanvas", inputs: { backdrop: "backdrop", keyboard: "keyboard", placement: "placement", responsive: "responsive", scroll: "scroll", id: "id", role: "role", ariaModal: "ariaModal", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)" }, properties: { "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "class": "this.hostClasses", "attr.aria-hidden": "this.ariaHidden", "attr.tabindex": "this.tabIndex", "@showHide": "this.animateTrigger" } }, exportAs: ["cOffcanvas"], ngImport: i0, template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
         trigger('showHide', [
-            state('true', style({
-                visibility: 'visible',
+            state('visible', style({
+            // visibility: 'visible'
             })),
-            state('false', style({
-                visibility: 'hidden',
+            state('hidden', style({
+            // visibility: 'hidden'
             })),
-            transition('true => false', [animate('300ms')]),
-        ]),
+            transition('visible <=> *', [animate('300ms')])
+        ])
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: OffcanvasComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-offcanvas', animations: [
                         trigger('showHide', [
-                            state('true', style({
-                                visibility: 'visible',
+                            state('visible', style({
+                            // visibility: 'visible'
                             })),
-                            state('false', style({
-                                visibility: 'hidden',
+                            state('hidden', style({
+                            // visibility: 'hidden'
                             })),
-                            transition('true => false', [animate('300ms')]),
-                        ]),
-                    ], exportAs: 'cOffcanvas', template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n" }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                            transition('visible <=> *', [animate('300ms')])
+                        ])
+                    ], exportAs: 'cOffcanvas', template: "<div cdkTrapFocus cdkTrapFocusAutoCapture>\n  <ng-content></ng-content>\n</div>\n\n", styles: [":host{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OffcanvasService }, { type: BackdropService }]; }, propDecorators: { backdrop: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: OffcanvasService }, { type: BackdropService }, { type: i1$2.BreakpointObserver }]; }, propDecorators: { backdrop: [{
                 type: Input
             }], keyboard: [{
                 type: Input
             }], placement: [{
                 type: Input
+            }], responsive: [{
+                type: Input
             }], scroll: [{
                 type: Input
             }], id: [{
@@ -10341,9 +10412,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], animateType: [{
+            }], animateTrigger: [{
                 type: HostBinding,
                 args: ['@showHide']
+            }], animateStart: [{
+                type: HostListener,
+                args: ['@showHide.start', ['$event']]
+            }], animateDone: [{
+                type: HostListener,
+                args: ['@showHide.done', ['$event']]
             }], onKeyDownHandler: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
@@ -11507,7 +11584,7 @@ class SidebarComponent {
             }), "f");
         }
         else {
-            __classPrivateFieldGet(this, _SidebarComponent_stateToggleSubscription, "f").unsubscribe();
+            __classPrivateFieldGet(this, _SidebarComponent_stateToggleSubscription, "f")?.unsubscribe();
         }
     }
     layoutChangeSubscribe(subscribe = true) {
@@ -13977,7 +14054,7 @@ class TabContentComponent {
         this.tabService = tabService;
         this._activeTabPaneIdx = -1;
         /**
-         * Event emited on the active tab pane index change.
+         * Event emitted on the active tab pane index change.
          */
         this.activeTabPaneIdxChange = new EventEmitter();
     }