@coreui/angular-pro 4.0.0-alpha.3 → 4.0.0-alpha.4

package/fesm2020/coreui-angular-pro.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Inject, ViewChild, Optional, ContentChild, ElementRef, PLATFORM_ID, TemplateRef, ViewContainerRef, Pipe, ChangeDetectionStrategy, VERSION } from '@angular/core';
+import { Directive, Input, NgModule, HostBinding, Injectable, Component, EventEmitter, Output, ContentChildren, HostListener, Inject, ViewChild, Optional, ContentChild, ChangeDetectionStrategy, forwardRef, ElementRef, PLATFORM_ID, TemplateRef, ViewContainerRef, Pipe, VERSION } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -10,10 +10,12 @@ import { NavigationEnd, RouterModule } from '@angular/router';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { createPopper } from '@popperjs/core';
-import * as i1$1 from '@angular/cdk/layout';
-import * as i1$2 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i5 from '@coreui/icons-angular';
+import * as i1$1 from '@angular/cdk/a11y';
+import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
+import * as i5 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1$2 from '@angular/cdk/layout';
+import * as i5$1 from '@coreui/icons-angular';
 import { IconModule } from '@coreui/icons-angular';
 
 var BreakpointInfix;
@@ -4329,6 +4331,714 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }] });
 
+class MultiSelectOptgroupLabelComponent {
+    constructor() { }
+    get hostClasses() {
+        return {
+            'form-multi-select-optgroup-label': true
+        };
+    }
+}
+MultiSelectOptgroupLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptgroupLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-multi-select-optgroup-label', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MultiSelectOptgroupComponent {
+    get hostClasses() {
+        return {
+            'form-multi-select-options': true
+        };
+    }
+}
+MultiSelectOptgroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptgroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], components: [{ type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-multi-select-optgroup', template: "<c-multi-select-optgroup-label *ngIf=\"label\">{{label}}</c-multi-select-optgroup-label>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MultiSelectService {
+    constructor() {
+        this.multiSelectState = new BehaviorSubject({});
+        this.multiSelectState$ = this.multiSelectState.asObservable();
+        this.multiSelectVisible = new BehaviorSubject(false);
+        this.multiSelectVisible$ = this.multiSelectVisible.asObservable();
+    }
+    toggleOption(option) {
+        this.multiSelectState.next(option);
+    }
+    toggleVisible(visible) {
+        this.multiSelectVisible.next(visible);
+    }
+}
+MultiSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MultiSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class MultiSelectOptionComponent {
+    constructor(elementRef, renderer, focusMonitor, multiSelectService) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.focusMonitor = focusMonitor;
+        this.multiSelectService = multiSelectService;
+        this._disabled = false;
+        this._selected = false;
+        this.optionsStyle = 'checkbox';
+        this.visible = true;
+        this.selectedChange = new EventEmitter();
+        this.hasContent = true;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set selected(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (this._selected !== newValue) {
+            this._selected = newValue;
+            this.selectedChange.emit(newValue);
+            this.multiSelectService.toggleOption(this);
+            if (newValue) {
+                this.focus();
+            }
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
+    get hostClasses() {
+        return {
+            'form-multi-select-option': true,
+            'form-multi-selected': this.selected,
+            [`form-multi-select-option-with-${this.optionsStyle}`]: !!this.optionsStyle,
+            disabled: this.disabled,
+            'd-none': !this.visible
+        };
+    }
+    get tabIndex() {
+        return this.disabled ? '-1' : '0';
+    }
+    get ariaDisabled() {
+        return this.disabled || null;
+    }
+    get ariaSelected() {
+        return this.selected;
+    }
+    onKeyUp($event) {
+        if ($event.key === 'Enter' || $event.code === 'Space') {
+            $event.preventDefault();
+            this.selected = this.disabled ? this.selected : !this.selected;
+        }
+    }
+    onClick() {
+        this.selected = this.disabled ? this.selected : !this.selected;
+    }
+    ngAfterContentInit() {
+        setTimeout(() => {
+            this.hasContent = !!this.content?.nativeElement.childNodes.length;
+        });
+        if (!this.label) {
+            this.label = this.elementRef.nativeElement.innerText || this.value;
+        }
+        if (this.value === undefined) {
+            this.value = this.elementRef.nativeElement.innerText || this.label;
+        }
+    }
+    setActiveStyles() {
+    }
+    setInactiveStyles() {
+    }
+    getLabel() {
+        return (this.label ?? this.value);
+    }
+    focus(origin) {
+        this.focusMonitor.focusVia(this.elementRef, 'program');
+    }
+}
+MultiSelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: { disabled: "disabled", selected: "selected", optionsStyle: "optionsStyle", label: "label", value: "value", visible: "visible" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "keydown": "onKeyUp($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>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-multi-select-option', template: "<div #contentDiv><ng-content></ng-content></div>\n<div *ngIf=\"!hasContent\">\n  {{label ?? value}}\n</div>\n\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host.form-multi-select-option.disabled,:host.form-multi-select-option:disabled{pointer-events:all;cursor:default}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], optionsStyle: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], content: [{
+                type: ViewChild,
+                args: ['contentDiv']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class MultiSelectTagComponent {
+    constructor(multiSelectService) {
+        this.multiSelectService = multiSelectService;
+        this.multiselectVisible = false;
+        this.remove = new EventEmitter();
+    }
+    get hostClasses() {
+        return {
+            '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: "13.0.3", ngImport: i0, type: MultiSelectTagComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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        cButtonClose class=\"form-multi-select-tag-delete close btn btn-xs\" type=\"button\">\n  <span aria-hidden=\"true\" class=\"visually-hidden\">x</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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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        cButtonClose class=\"form-multi-select-tag-delete close btn btn-xs\" type=\"button\">\n  <span aria-hidden=\"true\" class=\"visually-hidden\">x</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: [{
+                type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MultiSelectNativeSelectComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.form = '';
+        this.id = '';
+    }
+}
+MultiSelectNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectNativeSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectNativeSelectComponent, selector: "c-multi-select-native-select", inputs: { form: "form", id: "id", multiple: "multiple", name: "name", options: "options" }, ngImport: i0, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\">\n  <option\n    *ngFor=\"let option of options\"\n    [label]=\"option.label\"\n    [selected]=\"option.selected\"\n    [value]=\"option.value\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectNativeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-multi-select-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select [multiple]=\"multiple\" [name]=\"name\" style=\"display: none\" tabindex=\"-1\" [id]=\"id\">\n  <option\n    *ngFor=\"let option of options\"\n    [label]=\"option.label\"\n    [selected]=\"option.selected\"\n    [value]=\"option.value\"\n    tabindex=\"-1\"\n  ></option>\n</select>\n\n", styles: [":host{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+// const flattenArray = (options: IOption[]): IOption[] => {
+//   return options.reduce((acc: IOption[], val: IOption) => {
+//     return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
+//   }, []);
+// };
+//
+// const getSelectedOptions = (options: IOption[]) => {
+//   return flattenArray(options).filter((option: IOption) => {
+//     if (option.selected) {
+//       return option;
+//     }
+//     return;
+//   });
+// };
+class MultiSelectComponent {
+    constructor(elementRef, renderer, ngZone, changeDetectorRef, viewContainerRef, focusMonitor, multiSelectService) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.changeDetectorRef = changeDetectorRef;
+        this.viewContainerRef = viewContainerRef;
+        this.focusMonitor = focusMonitor;
+        this.multiSelectService = multiSelectService;
+        this.onChange = (value) => { };
+        this.cleaner = true;
+        this._disabled = false;
+        this._multiple = false;
+        this.nativeName = '';
+        this.nativeId = '';
+        this.options = [];
+        this.optionsMaxHeight = 'auto';
+        this.optionsStyle = 'checkbox';
+        this.placeholder = 'Select...';
+        this.search = true;
+        this.searchNoResultsLabel = 'no items';
+        this.selectAll = true;
+        this.selectAllLabel = 'Select all options';
+        this.selectionType = 'tags';
+        this.selectionTypeCounterText = 'item(s) selected';
+        this._value = [''];
+        this.valueChange = new EventEmitter();
+        this._visible = false;
+        this.visibleChange = new EventEmitter();
+        this.isDropdownVisible = false;
+        this._selectedOptions = [];
+        this._tabIndex = '-1';
+        this.visibleOptions = 0;
+        this._inputValue = '';
+        this._subtreeFocused = this.focusOrigin(null);
+    }
+    writeValue(value) {
+        this.onChange(this.value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set multiple(value) {
+        this._multiple = coerceBooleanProperty(value);
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    set value(value) {
+        const newValue = Array.isArray(value) ? [...value] : [value ?? ''];
+        if (this._value.toString() !== newValue.toString()) {
+            this._value = newValue;
+            this.writeValue(this.value);
+            this.updateNativeSelect();
+            this.valueChange.emit(this.value);
+        }
+    }
+    get value() {
+        return this.multiple ? [...this._value] : this._value[0]?.toString() ?? '';
+    }
+    set visible(value) {
+        const newValue = coerceBooleanProperty(value);
+        if (newValue !== this._visible) {
+            this._visible = newValue;
+            this.multiSelectService.toggleVisible(newValue);
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    get selectedOptions() {
+        return this._selectedOptions;
+    }
+    get selectedOptionsText() {
+        return this.selectedOptions.map((option) => option.label).join(', ');
+    }
+    get counterText() {
+        return `${this.selectedOptions.length} ${this.selectionTypeCounterText}`;
+    }
+    get hostClasses() {
+        return {
+            'form-multi-select': true,
+            'form-multi-select-selection-tags': this.selectionType === 'tags',
+            show: this.visible
+        };
+    }
+    get tabIndex() {
+        return this._tabIndex;
+    }
+    set tabIndex(value) {
+        setTimeout(() => {
+            this._tabIndex = this._disabled || this.search ? '-1' : value === null ? null : '0';
+        });
+    }
+    onKeyUp($event) {
+        console.log('keyup', $event.key);
+        if ($event.key === 'Escape') {
+            this.visible = false;
+            this.inputValue = '';
+            this.setFocus();
+            // this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'keyboard');
+        }
+        else if ($event.key === 'Enter') {
+            // } else {
+            this.visible = true;
+            if (!this.search) {
+                this.setFocus();
+            }
+        }
+    }
+    manage($event) {
+        console.log('keydown', $event.key);
+        if ($event.key === 'Enter' && $event.target === this.inputElement.nativeElement) {
+            $event.preventDefault();
+        }
+        this.listKeyManager.onKeydown($event);
+    }
+    onClick($event) {
+        if (!this.visible) {
+            this.visible = !this.visible;
+        }
+        this.setFocus();
+    }
+    set inputValue(value) {
+        console.log('inputValue', value);
+        this._inputValue = value;
+        // this.visible = !!value ?? this.visible;
+        this.filterOptions(value);
+    }
+    get inputValue() {
+        return this._inputValue;
+    }
+    get subtreeFocused() {
+        return this._subtreeFocused;
+    }
+    set subtreeFocused(value) {
+        this._subtreeFocused = value;
+        this.visible = value === false ? false : this.visible;
+    }
+    focusOrigin(origin) {
+        const focused = !!origin;
+        this.inputValue = focused ? this.inputValue : '';
+        return focused;
+    }
+    ngOnInit() {
+        this.tabIndex = '0';
+    }
+    ngOnDestroy() {
+        this.multiselectSubscribe(false);
+        // this.clearListeners();
+        this.focusMonitor.stopMonitoring(this.elementRef);
+        this.focusMonitorSubscription?.unsubscribe();
+    }
+    ngAfterContentInit() {
+        this.visibleOptions = this.multiSelectOptions.length;
+        this.multiSelectOptions.forEach((option, index) => {
+            option.optionsStyle = this.optionsStyle;
+        });
+        this._selectedOptions = this.multiSelectOptions.filter((option) => option.selected);
+        setTimeout(() => {
+            this.value = this._selectedOptions.map(item => item.value);
+        });
+        this.value = this._selectedOptions.map(item => item.value);
+        this.listKeyManager = new FocusKeyManager(this.multiSelectOptions).withHomeAndEnd();
+        this.listKeyManager.skipPredicate(item => !item.visible);
+        this.multiselectSubscribe();
+        this.createNativeSelect();
+    }
+    ngAfterViewInit() {
+        // this.setListeners();
+        this.focusMonitorSubscription = this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => this.ngZone.run(() => {
+            this.subtreeFocused = this.focusOrigin(origin);
+            this.changeDetectorRef.markForCheck();
+        }));
+    }
+    handleInputClick($event) {
+        console.log('handleInputClick', $event);
+        // this.visible = !this.visible;
+    }
+    multiselectSubscribe(subscribe = true) {
+        if (subscribe) {
+            this.multiselectVisibleSubscription = this.multiSelectService.multiSelectVisible$.subscribe((visible) => {
+                this.isDropdownVisible = visible;
+                this.visibleChange.emit(visible);
+            });
+            this.multiselectStateSubscription = this.multiSelectService.multiSelectState$.subscribe((option) => {
+                if (option.selected === true && !this.multiple) {
+                    const selectedOptions = this.multiSelectOptions
+                        .toArray()
+                        .filter((item) => item.selected);
+                    selectedOptions.reverse().forEach((item) => {
+                        if (item !== option) {
+                            item.selected = false;
+                        }
+                    });
+                }
+                this._selectedOptions = this.multiSelectOptions.filter((option) => option.selected);
+                this.value = this._selectedOptions.map(item => item.value);
+            });
+        }
+        else {
+            this.multiselectVisibleSubscription?.unsubscribe();
+            this.multiSelectOptionsSubscription?.unsubscribe();
+            this.multiselectStateSubscription?.unsubscribe();
+        }
+    }
+    clearAllOptions($event) {
+        this._selectedOptions.forEach((option) => {
+            if (!option._disabled)
+                option.selected = false;
+        });
+        this.setFocus();
+    }
+    selectAllOptions() {
+        this.multiSelectOptions.forEach((option, index) => {
+            if (!option.disabled)
+                option.selected = true;
+        });
+    }
+    // private setListeners() {
+    //   if (this.search) {
+    //     const configForInput: IListenersConfig = {
+    //       hostElement: this.inputElement ?? this.elementRef,
+    //       trigger: ['focus', 'click'],
+    //       callbackOn: () => {
+    //         console.log('focus input');
+    //         this.tabIndex = null;
+    //         // this.visible = true;
+    //       }
+    //     };
+    //     this.listenersService.setListeners(configForInput);
+    //   }
+    //
+    //   const configForHost: IListenersConfig = {
+    //     hostElement: this.elementRef,
+    //     trigger: ['focus'],
+    //     callbackOn: () => {
+    //       console.log('focus');
+    //       if (this.inputElement) {
+    //         this.setFocus()
+    //       }
+    //       // this.inputElement?.nativeElement.focus();
+    //     },
+    //     callbackOff: () => {
+    //       console.log('blur');
+    //     }
+    //   };
+    //   this.listenersService.setListeners(configForHost);
+    // }
+    clearListeners() {
+        // this.listenersService.clearListeners();
+    }
+    handleTagRemove($event) {
+        this.setFocus();
+    }
+    setFocus() {
+        const firstSelectedOption = this.selectedOptions.find((item) => item.selected) ??
+            this.multiSelectOptions.find((item, index) => index === 0);
+        if (firstSelectedOption && this.isDropdownVisible) {
+            this.listKeyManager.setActiveItem(firstSelectedOption);
+            this.changeDetectorRef.markForCheck();
+            if (!this.search) {
+                return;
+            }
+        }
+        this.focusMonitor.focusVia(this.inputElement ?? this.elementRef, 'program');
+    }
+    filterOptions(value) {
+        const searchString = value.toLowerCase() ?? '';
+        this.multiSelectOptions?.forEach((item, index) => {
+            if (!!searchString) {
+                item.visible = item.label?.toLowerCase().includes(searchString) ?? true;
+            }
+            else {
+                item.visible = true;
+            }
+        });
+        this.visibleOptions = this.multiSelectOptions?.filter((item) => item.visible).length;
+    }
+    createNativeSelect() {
+        this.viewContainerRef.clear();
+        const nativeSelectRef = this.viewContainerRef.createComponent(MultiSelectNativeSelectComponent);
+        this.nativeSelectRef = nativeSelectRef;
+        this.updateNativeSelect();
+    }
+    updateNativeSelect() {
+        if (!this.nativeSelectRef)
+            return;
+        const options = this.selectedOptions.map(item => {
+            const { selected, value, label } = item;
+            return { selected, value, label };
+        });
+        // const nativeSelectRef = this.nativeSelectRef;
+        this.nativeSelectRef.instance.multiple = this.multiple;
+        this.nativeSelectRef.instance.name = this.nativeName;
+        this.nativeSelectRef.instance.form = this.nativeId;
+        this.nativeSelectRef.instance.options = options;
+        this.nativeSelectRef.instance.changeDetectorRef.detectChanges();
+    }
+}
+MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1$1.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: MultiSelectComponent, selector: "c-multi-select", inputs: { cleaner: "cleaner", disabled: "disabled", multiple: "multiple", nativeName: "nativeName", nativeId: "nativeId", options: "options", optionsMaxHeight: "optionsMaxHeight", optionsStyle: "optionsStyle", placeholder: "placeholder", search: "search", searchNoResultsLabel: "searchNoResultsLabel", selectAll: "selectAll", selectAllLabel: "selectAllLabel", selectionType: "selectionType", selectionTypeCounterText: "selectionTypeCounterText", value: "value", visible: "visible" }, outputs: { valueChange: "valueChange", visibleChange: "visibleChange" }, host: { listeners: { "keyup": "onKeyUp($event)", "keydown": "manage($event)", "click": "onClick($event)" }, properties: { "class": "this.hostClasses", "attr.tabindex": "this.tabIndex" } }, providers: [
+        MultiSelectService,
+        // ListenersService,
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MultiSelectComponent),
+            multi: true
+        }
+    ], queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], exportAs: ["cMultiSelect"], ngImport: i0, template: "<div class=\"form-multi-select-selection\">\n  <ng-template [ngIf]=\"selectionType==='tags'\">\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='text'\">\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='counter'\">\n    <span>{{counterText}}</span>\n  </ng-template>\n</div>\n\n<input #inputElement\n       [(ngModel)]=\"inputValue\"\n       [disabled]=\"!search\"\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\n       autocomplete=\"off\"\n       class=\"form-multi-select-search ms-1\" tabindex=\"0\"\n       type=\"text\">\n\n<button (click)=\"clearAllOptions($event)\"\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\n        [disabled]=\"!isDropdownVisible\"\n        aria-label=\"Clear all\"\n        cButtonClose\n        class=\"form-multi-select-selection-cleaner\"\n        size=\"sm\">\n</button>\n\n<div #dropdownElement class=\"form-multi-select-dropdown\">\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\n    <button (click)=\"selectAllOptions()\"\n            *ngIf=\"selectAll && multiple\"\n            class=\"form-multi-select-all\">\n      {{selectAllLabel}}\n    </button>\n    <div #multiselectOptionsDiv\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, 'overflow': 'scroll'} : {}\"\n         class=\"form-multi-select-options\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n  <ng-template #optionsEmpty>\n    <div class=\"form-multi-select-options-empty\">{{searchNoResultsLabel}}</div>\n  </ng-template>\n</div>\n\n", styles: [":host{display:block}:host.cdk-focused{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-selection-tags{padding-top:.0625rem}\n"], components: [{ type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c-multi-select', exportAs: 'cMultiSelect', providers: [
+                        MultiSelectService,
+                        // ListenersService,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"form-multi-select-selection\">\n  <ng-template [ngIf]=\"selectionType==='tags'\">\n    <c-multi-select-tag (remove)=\"handleTagRemove($event)\" *ngFor=\"let option of selectedOptions; index as i\"\n                        [option]=\"option\" tabindex=\"-1\"></c-multi-select-tag>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='text'\">\n    <span class=\"bg-light\">{{selectedOptionsText}}</span>\n  </ng-template>\n  <ng-template [ngIf]=\"selectionType==='counter'\">\n    <span>{{counterText}}</span>\n  </ng-template>\n</div>\n\n<input #inputElement\n       [(ngModel)]=\"inputValue\"\n       [disabled]=\"!search\"\n       [placeholder]=\"(selectedOptions.length === 0 && selectionType!=='counter') ? placeholder : ''\"\n       autocomplete=\"off\"\n       class=\"form-multi-select-search ms-1\" tabindex=\"0\"\n       type=\"text\">\n\n<button (click)=\"clearAllOptions($event)\"\n        *ngIf=\"cleaner && selectedOptions.length > 0\"\n        [disabled]=\"!isDropdownVisible\"\n        aria-label=\"Clear all\"\n        cButtonClose\n        class=\"form-multi-select-selection-cleaner\"\n        size=\"sm\">\n</button>\n\n<div #dropdownElement class=\"form-multi-select-dropdown\">\n  <ng-template [ngIf]=\"visibleOptions>0\" [ngIfElse]=\"optionsEmpty\">\n    <button (click)=\"selectAllOptions()\"\n            *ngIf=\"selectAll && multiple\"\n            class=\"form-multi-select-all\">\n      {{selectAllLabel}}\n    </button>\n    <div #multiselectOptionsDiv\n         [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, 'overflow': 'scroll'} : {}\"\n         class=\"form-multi-select-options\">\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n  <ng-template #optionsEmpty>\n    <div class=\"form-multi-select-options-empty\">{{searchNoResultsLabel}}</div>\n  </ng-template>\n</div>\n\n", styles: [":host{display:block}:host.cdk-focused{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-selection-tags{padding-top:.0625rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$1.FocusMonitor }, { type: MultiSelectService }]; }, propDecorators: { cleaner: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], nativeName: [{
+                type: Input
+            }], nativeId: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionsMaxHeight: [{
+                type: Input
+            }], optionsStyle: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], search: [{
+                type: Input
+            }], searchNoResultsLabel: [{
+                type: Input
+            }], selectAll: [{
+                type: Input
+            }], selectAllLabel: [{
+                type: Input
+            }], selectionType: [{
+                type: Input
+            }], selectionTypeCounterText: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], multiSelectOptions: [{
+                type: ContentChildren,
+                args: [MultiSelectOptionComponent, { descendants: true }]
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], dropdownElement: [{
+                type: ViewChild,
+                args: ['dropdownElement']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], manage: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class MultiSelectModule {
+}
+MultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelectComponent,
+        MultiSelectOptionComponent,
+        MultiSelectOptgroupComponent,
+        MultiSelectOptgroupLabelComponent,
+        MultiSelectTagComponent,
+        MultiSelectNativeSelectComponent], imports: [CommonModule, A11yModule, ButtonModule, FormsModule], exports: [MultiSelectComponent,
+        MultiSelectOptionComponent,
+        MultiSelectOptgroupComponent,
+        MultiSelectOptgroupLabelComponent,
+        MultiSelectTagComponent] });
+MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectModule, providers: [MultiSelectService], imports: [[CommonModule, A11yModule, ButtonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: MultiSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        MultiSelectComponent,
+                        MultiSelectOptionComponent,
+                        MultiSelectOptgroupComponent,
+                        MultiSelectOptgroupLabelComponent,
+                        MultiSelectTagComponent,
+                        MultiSelectNativeSelectComponent
+                    ],
+                    imports: [CommonModule, A11yModule, ButtonModule, FormsModule],
+                    exports: [
+                        MultiSelectComponent,
+                        MultiSelectOptionComponent,
+                        MultiSelectOptgroupComponent,
+                        MultiSelectOptgroupLabelComponent,
+                        MultiSelectTagComponent
+                    ],
+                    providers: [MultiSelectService]
+                }]
+        }] });
+
 class NavLinkDirective {
     constructor() {
         this._cNavLink = true;
@@ -4524,12 +5234,12 @@ class NavbarComponent {
         }
     }
 }
-NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NavbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NavbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
 NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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: [""], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.BreakpointObserver }]; }, propDecorators: { color: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.BreakpointObserver }]; }, propDecorators: { color: [{
                 type: Input
             }], colorScheme: [{
                 type: Input
@@ -4764,7 +5474,7 @@ class ModalContentComponent {
             this.interactivityChecker.isFocusable(targetElement);
     }
 }
-ModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ModalContentComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Component });
+ModalContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: ModalContentComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.InteractivityChecker }], target: i0.ɵɵFactoryTarget.Component });
 ModalContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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: "13.0.3", ngImport: i0, type: ModalContentComponent, decorators: [{
             type: Component,
@@ -4772,7 +5482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     selector: 'c-modal-content',
                     template: '<ng-content></ng-content>'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.InteractivityChecker }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.InteractivityChecker }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], onClickHandler: [{
@@ -5175,7 +5885,7 @@ class ModalComponent {
     }
 }
 ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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: "12.0.0", version: "13.0.3", 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: [""], components: [{ type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { type: ModalContentComponent, selector: "c-modal-content" }], directives: [{ type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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: [""], components: [{ type: ModalDialogComponent, selector: "c-modal-dialog", inputs: ["alignment", "fullscreen", "scrollable", "size"] }, { type: ModalContentComponent, selector: "c-modal-content" }], directives: [{ type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
         trigger('showHide', [
             state('visible', style({
                 display: 'block'
@@ -5505,7 +6215,7 @@ class OffcanvasComponent {
     }
 }
 OffcanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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: "12.0.0", version: "13.0.3", 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: [""], directives: [{ type: i1$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
+OffcanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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: [""], directives: [{ type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
         trigger('showHide', [
             state('true', style({
                 visibility: 'visible',
@@ -6680,7 +7390,7 @@ class SidebarComponent {
         }
     }
 }
-SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$1.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component });
+SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$2.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component });
 SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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: "13.0.3", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -6692,7 +7402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i1$1.BreakpointObserver }, { type: SidebarService }, { type: SidebarBackdropService }]; }, propDecorators: { colorScheme: [{
+                }] }, { type: i0.Renderer2 }, { type: i1$2.BreakpointObserver }, { type: SidebarService }, { type: SidebarBackdropService }]; }, propDecorators: { colorScheme: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -7143,7 +7853,7 @@ class SidebarNavLinkComponent {
     }
 }
 SidebarNavLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarNavLinkComponent, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Component });
-SidebarNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SidebarNavLinkComponent, selector: "c-sidebar-nav-link", inputs: { item: "item" }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "<ng-container [ngSwitch]=\"linkType\">\r\n  <a *ngSwitchCase=\"'disabled'\"\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n  <a *ngSwitchCase=\"'external'\"\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [href]=\"href\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n  <a *ngSwitchDefault\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n     [target]=\"item.attributes?.['target']\"\r\n     [queryParams]=\"item.linkProps?.queryParams ?? null\"\r\n     [fragment]=\"item.linkProps?.fragment\"\r\n     [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\r\n     [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\r\n     [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\r\n     [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\r\n     [state]=\"item.linkProps?.state ?? {}\"\r\n     [routerLink]=\"item.url\"\r\n     routerLinkActive=\"active\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n<!--    [class.active]=\"linkActive\"-->\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n</ng-container>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", components: [{ type: SidebarNavLinkContentComponent, selector: "c-sidebar-nav-link-content", inputs: ["item"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }], pipes: { "cSidebarNavLink": SidebarNavLinkPipe, "cSidebarNavBadge": SidebarNavBadgePipe, "cSidebarNavIcon": SidebarNavIconPipe } });
+SidebarNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SidebarNavLinkComponent, selector: "c-sidebar-nav-link", inputs: { item: "item" }, outputs: { linkClick: "linkClick" }, providers: [SidebarNavHelper], ngImport: i0, template: "<ng-container [ngSwitch]=\"linkType\">\r\n  <a *ngSwitchCase=\"'disabled'\"\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n  <a *ngSwitchCase=\"'external'\"\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [href]=\"href\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n  <a *ngSwitchDefault\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n     [target]=\"item.attributes?.['target']\"\r\n     [queryParams]=\"item.linkProps?.queryParams ?? null\"\r\n     [fragment]=\"item.linkProps?.fragment\"\r\n     [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\r\n     [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\r\n     [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\r\n     [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\r\n     [state]=\"item.linkProps?.state ?? {}\"\r\n     [routerLink]=\"item.url\"\r\n     routerLinkActive=\"active\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n<!--    [class.active]=\"linkActive\"-->\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n</ng-container>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", components: [{ type: SidebarNavLinkContentComponent, selector: "c-sidebar-nav-link-content", inputs: ["item"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i5$1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }], pipes: { "cSidebarNavLink": SidebarNavLinkPipe, "cSidebarNavBadge": SidebarNavBadgePipe, "cSidebarNavIcon": SidebarNavIconPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarNavLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-sidebar-nav-link', providers: [SidebarNavHelper], template: "<ng-container [ngSwitch]=\"linkType\">\r\n  <a *ngSwitchCase=\"'disabled'\"\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n  <a *ngSwitchCase=\"'external'\"\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [href]=\"href\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n  <a *ngSwitchDefault\r\n     [ngClass]=\"item | cSidebarNavLink\"\r\n     [cHtmlAttr]=\"item.attributes ?? {}\"\r\n     [target]=\"item.attributes?.['target']\"\r\n     [queryParams]=\"item.linkProps?.queryParams ?? null\"\r\n     [fragment]=\"item.linkProps?.fragment\"\r\n     [queryParamsHandling]=\"item.linkProps?.queryParamsHandling\"\r\n     [preserveFragment]=\"item.linkProps?.preserveFragment ?? false\"\r\n     [skipLocationChange]=\"item.linkProps?.skipLocationChange ?? false\"\r\n     [replaceUrl]=\"item.linkProps?.replaceUrl ?? false\"\r\n     [state]=\"item.linkProps?.state ?? {}\"\r\n     [routerLink]=\"item.url\"\r\n     routerLinkActive=\"active\"\r\n     (click)=\"linkClicked()\"\r\n  >\r\n<!--    [class.active]=\"linkActive\"-->\r\n    <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n    <c-sidebar-nav-link-content [item]=\"item\"></c-sidebar-nav-link-content>\r\n    <span *ngIf=\"item.badge\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge?.text }}</span>\r\n  </a>\r\n</ng-container>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n" }]
@@ -7286,7 +7996,7 @@ class SidebarNavGroupComponent {
     }
 }
 SidebarNavGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarNavGroupComponent, deps: [{ token: i3.Router }, { token: SidebarNavHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SidebarNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show" }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper], ngImport: i0, template: "<a class=\"nav-link nav-group-toggle\"\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\">\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], components: [{ type: SidebarNavComponent, selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }], directives: [{ type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }], pipes: { "cSidebarNavBadge": SidebarNavBadgePipe, "cSidebarNavIcon": SidebarNavIconPipe } });
+SidebarNavGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: SidebarNavGroupComponent, selector: "c-sidebar-nav-group", inputs: { item: "item", dropdownMode: "dropdownMode", show: "show" }, host: { properties: { "class": "this.hostClasses" } }, providers: [SidebarNavHelper], ngImport: i0, template: "<a class=\"nav-link nav-group-toggle\"\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\">\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"], components: [{ type: SidebarNavComponent, selector: "c-sidebar-nav", inputs: ["navItems", "dropdownMode", "groupItems", "compact"] }], directives: [{ type: HtmlAttributesDirective, selector: "[cHtmlAttr]", inputs: ["cHtmlAttr"], exportAs: ["cHtmlAttr"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5$1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "size", "title", "customClasses", "width", "height", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }], pipes: { "cSidebarNavBadge": SidebarNavBadgePipe, "cSidebarNavIcon": SidebarNavIconPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: SidebarNavGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c-sidebar-nav-group', providers: [SidebarNavHelper], template: "<a class=\"nav-link nav-group-toggle\"\r\n   (click)=\"toggleGroup($event)\"\r\n   [cHtmlAttr]=\"item.attributes\">\r\n  <ng-container *ngTemplateOutlet=\"iconTemplate ; context: {$implicit: item}\"></ng-container>\r\n  <ng-container>{{ item.name }}</ng-container>\r\n  <span *ngIf=\"helper.hasBadge(item)\" [ngClass]=\"item | cSidebarNavBadge\">{{ item.badge.text }}</span>\r\n</a>\r\n<c-sidebar-nav\r\n  [groupItems]=\"true\"\r\n  [navItems]=\"navItems\">\r\n</c-sidebar-nav>\r\n\r\n<ng-template #iconTemplate let-item>\r\n  <i *ngIf=\"item?.icon\" [ngClass]=\"item | cSidebarNavIcon\"></i>\r\n  <ng-template [ngIf]=\"item?.iconComponent\">\r\n    <svg\r\n      [cIcon]=\"item.iconComponent?.content\"\r\n      [name]=\"item.iconComponent?.name\"\r\n      [customClasses]=\"item | cSidebarNavIcon\"\r\n    ></svg>\r\n  </ng-template>\r\n  <span *ngIf=\"!item?.icon && !item?.iconComponent\" [ngClass]=\"item | cSidebarNavIcon\"></span>\r\n</ng-template>\r\n", styles: [".nav-group-toggle{cursor:pointer}.nav-group-items{display:block}\n"] }]
@@ -9329,5 +10039,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, ListGroupDirective, ListGroupItemDirective, ListGroupModule, LoadingButtonComponent, LoadingButtonModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
+export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, ListGroupDirective, ListGroupItemDirective, ListGroupModule, LoadingButtonComponent, LoadingButtonModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, MultiSelectComponent, MultiSelectModule, MultiSelectOptgroupComponent, MultiSelectOptgroupLabelComponent, MultiSelectOptionComponent, MultiSelectTagComponent, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
 //# sourceMappingURL=coreui-angular-pro.mjs.map