@coreui/angular-pro 4.2.12 → 4.2.13

package/fesm2020/coreui-angular-pro.mjs

@@ -7,17 +7,17 @@ import * as i1 from '@angular/animations';
 import { animation, animate, style, useAnimation, trigger, state, transition, group, query } from '@angular/animations';
 import * as i3 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { BehaviorSubject, Observable, fromEvent, zipWith, withLatestFrom, Subject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { isValid, format } from 'date-fns';
 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 * as i1$3 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 * as i1$2 from '@angular/cdk/a11y';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import * as i5 from '@coreui/icons-angular';
 import { IconModule } from '@coreui/icons-angular';
 
@@ -3272,6 +3272,12 @@ class CarouselComponent {
          * @type {'hover' | 'focus' | 'click'}
          */
         this.pause = 'hover';
+        /**
+         * Support left/right swipe interactions on touchscreen devices.
+         * @type boolean
+         * @default true
+         */
+        this.touch = true;
         /**
          * Set type of the transition.
          * @type {'slide' | 'crossfade'}
@@ -3308,12 +3314,14 @@ class CarouselComponent {
         this.clearListeners();
         this.carouselStateSubscribe(false);
         this.intersectionServiceSubscribe(false);
+        this.swipeSubscribe(false);
     }
     ngAfterContentInit() {
         this.intersectionService.createIntersectionObserver(this.hostElement);
         this.intersectionServiceSubscribe();
         this.carouselState.state = { activeItemIndex: this.activeIndex, animate: this.animate };
         this.setListeners();
+        this.swipeSubscribe();
     }
     setListeners() {
         const config = {
@@ -3376,9 +3384,30 @@ class CarouselComponent {
             this.intersectingSubscription?.unsubscribe();
         }
     }
+    swipeSubscribe(subscribe = true) {
+        if (this.touch && subscribe) {
+            const carouselElement = this.hostElement.nativeElement;
+            const touchStart$ = fromEvent(carouselElement, 'touchstart');
+            const touchEnd$ = fromEvent(carouselElement, 'touchend');
+            const touchMove$ = fromEvent(carouselElement, 'touchmove');
+            this.swipeSubscription = touchStart$.pipe(zipWith(touchEnd$.pipe(withLatestFrom(touchMove$))))
+                .subscribe(([touchstart, [touchend, touchmove]]) => {
+                touchstart.stopPropagation();
+                touchmove.stopPropagation();
+                const distanceX = touchstart.touches[0].clientX - touchmove.touches[0].clientX;
+                if (Math.abs(distanceX) > 0.3 * carouselElement.clientWidth && touchstart.timeStamp <= touchmove.timeStamp) {
+                    const nextIndex = this.carouselState.direction(distanceX > 0 ? 'next' : 'prev');
+                    this.carouselState.state = { activeItemIndex: nextIndex };
+                }
+            });
+        }
+        else {
+            this.swipeSubscription?.unsubscribe();
+        }
+    }
 }
 CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: CarouselComponent, deps: [{ token: CarouselConfig }, { token: i0.ElementRef }, { token: CarouselService }, { token: CarouselState }, { token: IntersectionService }, { token: ListenersService }], target: i0.ɵɵFactoryTarget.Component });
-CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: CarouselComponent, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] });
+CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: CarouselComponent, selector: "c-carousel", inputs: { activeIndex: "activeIndex", animate: "animate", dark: "dark", direction: "direction", interval: "interval", pause: "pause", touch: "touch", transition: "transition", wrap: "wrap" }, outputs: { itemChange: "itemChange" }, host: { properties: { "class": "this.hostClasses" } }, providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-carousel', template: '<ng-content></ng-content>', providers: [CarouselService, CarouselState, CarouselConfig, IntersectionService, ListenersService], styles: [":host{display:block}\n"] }]
@@ -3397,6 +3426,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                 type: Input
             }], pause: [{
                 type: Input
+            }], touch: [{
+                type: Input
             }], transition: [{
                 type: Input
             }], wrap: [{
@@ -4043,12 +4074,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                 args: ['click', ['$event']]
             }] } });
 class DropdownComponent {
-    constructor(document, elementRef, renderer, ngZone, changeDetectorRef, dropdownService) {
+    constructor(document, elementRef, renderer, ngZone, changeDetectorRef, focusMonitor, dropdownService) {
         this.document = document;
         this.elementRef = elementRef;
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.changeDetectorRef = changeDetectorRef;
+        this.focusMonitor = focusMonitor;
         this.dropdownService = dropdownService;
         this.autoClose = true;
         this._dark = false;
@@ -4195,12 +4227,21 @@ class DropdownComponent {
         if (this.variant === 'nav-item') {
             this.renderer.addClass(this._toggler.elementRef.nativeElement, 'nav-link');
         }
+        this.focusMonitor.monitor(this.elementRef, true).subscribe(origin => {
+            this.ngZone.run(() => {
+                if ((!origin) && (this.autoClose === true || this.autoClose === 'outside')) {
+                    this.setVisibleState(false);
+                    this.changeDetectorRef.markForCheck();
+                }
+            });
+        });
     }
     ngOnInit() {
         this.dropdownStateSubscribe();
         this.setVisibleState(this.visible);
     }
     ngOnDestroy() {
+        this.focusMonitor?.stopMonitoring(this.elementRef);
         this.clearListeners();
         this.dropdownStateSubscribe(false);
         this.destroyPopperInstance();
@@ -4220,6 +4261,7 @@ class DropdownComponent {
                 }
                 this.ngZone.run(() => {
                     this.setListeners();
+                    this.changeDetectorRef.markForCheck();
                     this.changeDetectorRef.detectChanges();
                 });
             });
@@ -4250,9 +4292,11 @@ class DropdownComponent {
                 return;
             }
         }));
-        this.listeners.push(this.renderer.listen(this.document, 'keyup', (event) => {
+        this.listeners.push(this.renderer.listen(this.elementRef.nativeElement, 'keyup', (event) => {
             if (event.key === 'Escape' && this.autoClose !== false) {
+                event.stopPropagation();
                 this.setVisibleState(false);
+                return;
             }
         }));
     }
@@ -4265,7 +4309,7 @@ class DropdownComponent {
         this.listeners = [];
     }
 }
-DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DropdownComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$2.FocusMonitor }, { token: DropdownService }], target: i0.ɵɵFactoryTarget.Component });
 DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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 }], 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"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -4273,7 +4317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DropdownService }]; }, propDecorators: { alignment: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$2.FocusMonitor }, { type: DropdownService }]; }, propDecorators: { alignment: [{
                 type: Input
             }], autoClose: [{
                 type: Input
@@ -6101,7 +6145,7 @@ class DateRangePickerComponent {
         this.endDate = time ?? this.endDate;
     }
 }
-DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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", 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" }, outputs: { valueChange: "valueChange", calendarCellHover: "calendarCellHover", calendarDateChange: "calendarDateChange", endDateChange: "endDateChange", startDateChange: "startDateChange" }, host: { listeners: { "blur": "onBlur()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -6118,7 +6162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                             multi: true
                         }
                     ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
+        }], ctorParameters: function () { return [{ type: i1$3.BreakpointObserver }]; }, propDecorators: { dayFormat: [{
                 type: Input
             }], calendars: [{
                 type: Input
@@ -6969,7 +7013,7 @@ class DatePickerComponent extends DateRangePickerComponent {
         });
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: DatePickerComponent, selector: "c-date-picker", inputs: { placeholder: "placeholder", date: "date" }, outputs: { startDateChange: "dateChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -6986,7 +7030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                             multi: true
                         }
                     ], template: "<c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" class=\"date-picker picker\" [visible]=\"visible\">\r\n  <c-input-group [caret]=\"false\"\r\n                 [disabled]=\"disabled ?? dropdown.visible\"\r\n                 [sizing]=\"size ?? ''\"\r\n                 cDropdownToggle\r\n                 class=\"picker-input-group\"\r\n  >\r\n    <input (change)=\"handleStartDateInputChange($event)\"\r\n           [formControl]=\"startDateInput\"\r\n           [ngClass]=\"{hover: !!inputStartHoverValue}\"\r\n           [placeholder]=\"startDatePlaceholder ?? placeholder[0]\"\r\n           cFormControl\r\n           #startDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"range && separator !== false\" cInputGroupText>\r\n        <span class=\"picker-input-group-icon date-picker-arrow-icon\"></span>\r\n      </span>\r\n    <input (change)=\"handleEndDateInputChange($event)\"\r\n           *ngIf=\"range\"\r\n           [formControl]=\"endDateInput\"\r\n           [ngClass]=\"{hover: !!inputEndHoverValue}\"\r\n           [placeholder]=\"endDatePlaceholder ?? placeholder[1]\"\r\n           cFormControl\r\n           #endDateElementRef\r\n           [attr.tabindex]=\"disabled ? -1 : 0\"\r\n           [attr.disabled]=\"disabled ? '' : null\"\r\n           pattern=\"[1-9]*\"\r\n           [readonly]=\"inputReadOnly ?? null\"\r\n    >\r\n    <span *ngIf=\"indicator || cleaner\" cInputGroupText>\r\n      <span *ngIf=\"indicator\" class=\"picker-input-group-indicator\">\r\n        <span class=\"picker-input-group-icon date-picker-input-icon\"></span>\r\n      </span>\r\n      <span (click)=\"!disabled && handleClear($event)\" *ngIf=\"cleaner && startDateElementRef.value && !disabled\" class=\"picker-input-group-cleaner\" role=\"button\">\r\n        <span class=\"picker-input-group-icon date-picker-cleaner-icon\"></span>\r\n      </span>\r\n    </span>\r\n\r\n  </c-input-group>\r\n  <div cDropdownMenu>\r\n    <div class=\"date-picker-body\">\r\n      <ng-template [ngIf]=\"!isMobile\">\r\n        <div *ngIf=\"ranges\" class=\"date-picker-ranges\">\r\n          <button (click)=\"setCustomRange(customRange)\"\r\n                  *ngFor=\"let customRange of customRanges\"\r\n                  [color]=\"rangesButtonsColor\"\r\n                  [size]=\"rangesButtonsSize\"\r\n                  [variant]=\"rangesButtonsVariant\"\r\n                  cButton>\r\n            {{getCustomRangeKey(customRange)}}\r\n          </button>\r\n        </div>\r\n      </ng-template>\r\n      <c-calendar\r\n        (calendarCellHover)=\"handleCalendarCellHover($event)\"\r\n        (calendarDateChange)=\"handleCalendarDateChange($event)\"\r\n        (endDateChange)=\"handleEndDateChange($event)\"\r\n        (startDateChange)=\"handleStartDateChange($event)\"\r\n        [calendarDate]=\"calendarDate\"\r\n        [calendars]=\"isMobile ? 1 : calendars\"\r\n        [dateFilter]=\"dateFilter\"\r\n        [disabledDates]=\"disabledDates\"\r\n        [endDate]=\"endDate\"\r\n        [firstDayOfWeek]=\"firstDayOfWeek\"\r\n        [locale]=\"locale\"\r\n        [maxDate]=\"maxDate\"\r\n        [minDate]=\"minDate\"\r\n        [navigation]=\"navigation\"\r\n        [range]=\"range\"\r\n        [startDate]=\"startDate\"\r\n        [navYearFirst]=\"navYearFirst\"\r\n        [dayFormat]=\"dayFormat\"\r\n        [weekdayFormat]=\"weekdayFormat\"\r\n        class=\"date-picker-calendars\"\r\n      ></c-calendar>\r\n      <div *ngIf=\"false && timepicker\" class=\"date-picker-timepickers\">\r\n        <!-- todo-->\r\n        <c-time-picker\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!startDate\"\r\n          [time]=\"startDate ?? undefined\"\r\n          (timeChange)=\"handleStartTimeChange($event)\"\r\n        ></c-time-picker>\r\n        <c-time-picker\r\n          *ngIf=\"range\"\r\n          variant=\"select\"\r\n          [locale]=\"locale\"\r\n          [disabled]=\"!endDate\"\r\n          [time]=\"endDate ?? undefined\"\r\n          (timeChange)=\"handleEndTimeChange($event)\"\r\n        ></c-time-picker>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"templates?.datePickerFooter\" class=\"picker-footer\">\r\n      <ng-container *ngTemplateOutlet=\"templates?.datePickerFooter; context: {$implicit: dropdown}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</c-dropdown>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { placeholder: [{
+        }], ctorParameters: function () { return [{ type: i1$3.BreakpointObserver }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], startDateChange: [{
                 type: Output,
@@ -8297,12 +8341,12 @@ class MultiSelectOptionComponent {
         });
     }
 }
-MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1$2.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible", disabled: "disabled", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\r\n<div *ngIf=\"!hasContent\">\r\n  {{label ?? value}}\r\n</div>\r\n\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { optionsStyle: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { optionsStyle: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -8838,7 +8882,7 @@ class MultiSelectComponent {
         });
     }
 }
-MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$3.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$2.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
 MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", selectionTypeCounterTextPluralMap: "selectionTypeCounterTextPluralMap", size: "size", value: "value", visible: "visible" }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "onKeyDown($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
         MultiSelectService,
         // ListenersService,
@@ -8859,7 +8903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                             multi: true
                         }
                     ], template: "<div class=\"form-multi-select-selection\">\r\n  <ng-template [ngIf]=\"selectionType === 'tags'\">\r\n    <c-multi-select-tag *ngFor=\"let option of selectedOptions; index as i\"\r\n                        (remove)=\"handleTagRemove($event)\"\r\n                        [option]=\"option\"\r\n                        tabindex=\"-1\">\r\n    </c-multi-select-tag>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType === 'text' && !!selectedOptionsText\">\r\n    <span>{{ selectedOptionsText }}</span>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"selectionType === 'counter'\">\r\n    <span *ngIf=\"counterTextType === 'string'; else pluralMap\">{{ counterText }}</span>\r\n    <ng-template #pluralMap>\r\n      <span>{{selectedOptions.length}} {{ selectedOptions.length | i18nPlural: selectionTypeCounterTextPluralMap ?? { other: counterText } }}</span>\r\n    </ng-template>\r\n  </ng-template>\r\n  <ng-template [ngIf]=\"!search && selectedOptions.length === 0 && selectionType !== 'counter'\">\r\n    <span>{{ placeholder }}</span>\r\n  </ng-template>\r\n</div>\r\n\r\n<input\r\n  #inputElement\r\n  (keydown)=\"handleSearchKeyDown($event)\"\r\n  *ngIf=\"search && !disabled\"\r\n  [(ngModel)]=\"searchValue\"\r\n  [disabled]=\"disabled || !search\"\r\n  [ngClass]=\"{ 'form-multi-select-search': true, disabled: disabled }\"\r\n  [placeholder]=\"selectedOptions.length === 0 && selectionType !== 'counter' ? placeholder : ''\"\r\n  autocomplete=\"off\"\r\n  tabindex=\"{{ disabled ? '-1' : '0' }}\"\r\n  type=\"text\"\r\n>\r\n\r\n<button\r\n  (click)=\"clearAllOptions($event)\"\r\n  *ngIf=\"cleaner && selectedOptions.length > 0 && !disabled\"\r\n  [disabled]=\"disabled || !isDropdownVisible\"\r\n  aria-label=\"Clear all\"\r\n  class=\"form-multi-select-selection-cleaner\"\r\n></button>\r\n\r\n<div #dropdownElement *ngIf=\"!disabled\" class=\"form-multi-select-dropdown\">\r\n  <ng-template [ngIfElse]=\"optionsEmpty\" [ngIf]=\"visibleOptions > 0\">\r\n    <button (click)=\"selectAllOptions()\" *ngIf=\"selectAll && multiple\" class=\"form-multi-select-all\">\r\n      {{ selectAllLabel }}\r\n    </button>\r\n    <div #multiselectOptionsDiv\r\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflow: 'scroll' } : {}\"\r\n         class=\"form-multi-select-options\"\r\n    >\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #optionsEmpty>\r\n    <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\r\n  </ng-template>\r\n</div>\r\n", styles: [":host{display:block}:host.cdk-focused:not(.disabled){color:var(--cui-form-multi-select-focus-color, rgba(44, 56, 74, .95));background-color:var(--cui-form-multi-select-focus-bg, #fff);border-color:var(--cui-form-multi-select-focus-border-color, #6557e4);box-shadow:0 0 0 .25rem #321fdb40}:host .form-multi-select-search:disabled,:host .form-multi-select-search.disabled{background-color:var(--cui-input-disabled-bg, #d8dbe0);border-color:var(--cui-input-disabled-border-color, #b1b7c1);opacity:1}:host .form-multi-select-search[size]{display:inline}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$3.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { cleaner: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { cleaner: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -9155,12 +9199,12 @@ class NavbarComponent {
         }
     }
 }
-NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: NavbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: NavbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: NavbarComponent, selector: "c-navbar", inputs: { color: "color", colorScheme: "colorScheme", container: "container", expand: "expand", placement: "placement", role: "role" }, host: { properties: { "attr.role": "this.role", "class": "this.hostClasses" } }, queries: [{ propertyName: "collapse", first: true, predicate: CollapseDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"container ? withContainerTemplate : noContainerTemplate\"></ng-container>\r\n\r\n<ng-template #withContainerTemplate>\r\n  <div [ngClass]=\"containerClass\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noContainerTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-navbar', template: "<ng-container *ngTemplateOutlet=\"container ? withContainerTemplate : noContainerTemplate\"></ng-container>\r\n\r\n<ng-template #withContainerTemplate>\r\n  <div [ngClass]=\"containerClass\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #noContainerTemplate>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.BreakpointObserver }]; }, propDecorators: { color: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.BreakpointObserver }]; }, propDecorators: { color: [{
                 type: Input
             }], colorScheme: [{
                 type: Input
@@ -9393,7 +9437,7 @@ class ModalContentComponent {
             this.interactivityChecker.isFocusable(targetElement);
     }
 }
-ModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ModalContentComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Component });
+ModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ModalContentComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Component });
 ModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: ModalContentComponent, selector: "c-modal-content", host: { listeners: { "click": "onClickHandler($event)" }, properties: { "class": "this.hostClasses" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ModalContentComponent, decorators: [{
             type: Component,
@@ -9401,7 +9445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                     selector: 'c-modal-content',
                     template: '<ng-content></ng-content>'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.InteractivityChecker }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.InteractivityChecker }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], onClickHandler: [{
@@ -9799,7 +9843,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ModalComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ModalService }, { token: BackdropService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: ModalComponent, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: "keyboard", id: "id", size: "size", transition: "transition", role: "role", ariaModal: "ariaModal", scrollable: "scrollable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keydown": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($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" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: ElementRef }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\r\n  [alignment]=\"alignment\"\r\n  [fullscreen]=\"fullscreen\"\r\n  [scrollable]=\"scrollable\"\r\n  [size]=\"size\">\r\n  <c-modal-content>\r\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </c-modal-content>\r\n</c-modal-dialog>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }], animations: [
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: ModalComponent, selector: "c-modal", inputs: { alignment: "alignment", backdrop: "backdrop", fullscreen: "fullscreen", keyboard: "keyboard", id: "id", size: "size", transition: "transition", role: "role", ariaModal: "ariaModal", scrollable: "scrollable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@showHide.start": "animateStart($event)", "@showHide.done": "animateDone($event)", "document:keyup": "onKeyDownHandler($event)", "mousedown": "onMouseDownHandler($event)", "click": "onClickHandler($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" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ModalContentComponent, descendants: true, read: ElementRef }], exportAs: ["cModal"], ngImport: i0, template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ModalContentComponent, selector: "c-modal-content" }, { kind: "component", type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }], animations: [
         trigger('showHide', [
             state('visible', style({
             // display: 'block'
@@ -9822,7 +9866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                             })),
                             transition('visible <=> *', [animate('300ms')])
                         ])
-                    ], exportAs: 'cModal', template: "<c-modal-dialog\r\n  [alignment]=\"alignment\"\r\n  [fullscreen]=\"fullscreen\"\r\n  [scrollable]=\"scrollable\"\r\n  [size]=\"size\">\r\n  <c-modal-content>\r\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </c-modal-content>\r\n</c-modal-dialog>\r\n" }]
+                    ], exportAs: 'cModal', template: "<c-modal-dialog\n  [alignment]=\"alignment\"\n  [fullscreen]=\"fullscreen\"\n  [scrollable]=\"scrollable\"\n  [size]=\"size\">\n  <c-modal-content>\n    <div [cdkTrapFocus]=\"visible\" [cdkTrapFocusAutoCapture]=\"visible\" style=\"display: contents;\">\n      <ng-content></ng-content>\n    </div>\n  </c-modal-content>\n</c-modal-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -9879,7 +9923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
                 args: ['@showHide.done', ['$event']]
             }], onKeyDownHandler: [{
                 type: HostListener,
-                args: ['document:keydown', ['$event']]
+                args: ['document:keyup', ['$event']]
             }], onMouseDownHandler: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
@@ -10127,7 +10171,7 @@ class OffcanvasComponent {
     }
 }
 OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", 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.9", 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>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", 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>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
         trigger('showHide', [
             state('true', style({
                 visibility: 'visible',
@@ -11361,7 +11405,7 @@ class SidebarComponent {
         }
     }
 }
-SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$2.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component });
+SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$3.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component });
 SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.9", type: SidebarComponent, selector: "c-sidebar", inputs: { colorScheme: "colorScheme", id: "id", narrow: "narrow", overlaid: "overlaid", placement: "placement", position: "position", size: "size", unfoldable: "unfoldable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.getClasses" } }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -11373,7 +11417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i1$2.BreakpointObserver }, { type: SidebarService }, { type: SidebarBackdropService }]; }, propDecorators: { colorScheme: [{
+                }] }, { type: i0.Renderer2 }, { type: i1$3.BreakpointObserver }, { type: SidebarService }, { type: SidebarBackdropService }]; }, propDecorators: { colorScheme: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -13448,7 +13492,7 @@ class RoundedDirective {
                     classes[`rounded-${val}`] = true;
                 }
             });
-            console.log('rounded keys', keys, classes);
+            // console.log('rounded keys', keys, classes);
             return Object.entries(classes).length === 0 ? { rounded: false } : classes;
         }
     }