@coreui/angular-pro 5.7.13 → 5.7.15

package/fesm2022/coreui-angular-pro.mjs

@@ -14,8 +14,8 @@ import { DomPortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$1 from '@angular/router';
 import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
-import { animation, group, query, animate, style, trigger, state, transition, useAnimation, animateChild } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { IconDirective } from '@coreui/icons-angular';
 
 var BreakpointInfix;
@@ -2997,7 +2997,11 @@ class MultiSelectComponent {
             return this.multiSelectOptionsContent.reset(sortedOptions);
         });
         this.scrollViewportView.changes
-            .pipe(take(1), map((changes) => changes.toArray()[0]), tap((scrollViewport) => {
+            .pipe(take(1), tap((changes) => {
+            changes.toArray()[0]
+                ?.getElementRef()
+                ?.nativeElement?.firstElementChild?.classList.add('form-multi-select-options');
+        }), map((changes) => changes.toArray()[0]), tap((scrollViewport) => {
             if (!this.scrollViewport) {
                 this.scrollViewport = scrollViewport;
                 const cdkVirtualScrollContentWrapper = this.scrollViewport.getElementRef().nativeElement?.firstElementChild;
@@ -3105,7 +3109,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          [attr.aria-label]=\"ariaCleanerLabel()\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        [attr.aria-label]=\"ariaIndicatorLabel()\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\" role=\"status\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
+        ], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          [attr.aria-label]=\"ariaCleanerLabel()\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        [attr.aria-label]=\"ariaIndicatorLabel()\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\" role=\"status\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
                 import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), /* @ts-ignore */
                 import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), /* @ts-ignore */
                 import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf), NgStyle,
@@ -3148,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.0", ng
                             '[attr.aria-expanded]': 'visible()',
                             '[attr.aria-disabled]': 'disabled()',
                             '[attr.tabindex]': 'tabIndex'
-                        }, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          [attr.aria-label]=\"ariaCleanerLabel()\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        [attr.aria-label]=\"ariaIndicatorLabel()\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\" role=\"status\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        class=\"form-multi-select-options\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"] }]
+                        }, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown\n  #dropdown=\"cDropdown\"\n  [(visible)]=\"visible\"\n  [autoClose]=\"'outside'\"\n  [class]=\"multiselectClasses()\"\n  [popperOptions]=\"popperOptions()\"\n>\n  <div\n    #dropdownToggle=\"cDropdownToggle\"\n    [caret]=\"false\"\n    [disabled]=\"isDisabled\"\n    cDropdownToggle\n    role=\"button\"\n    class=\"form-multi-select-input-group\"\n  >\n    <span\n      [class]=\"multiselectSelectionClasses()\"\n      [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n    >\n      @if (selType === 'tags') {\n        @for (option of optionTags(); track option.value; let i = $index) {\n          <c-multi-select-tag\n            (remove)=\"handleTagRemove($event)\"\n            [disabled]=\"isDisabled || (option.disabled ?? false)\"\n            [label]=\"option.label ?? option.value?.toString()\"\n            [option]=\"option\"\n            [value]=\"option.value\"\n            class=\"form-multi-select-tag text-truncate\"\n            tabindex=\"-1\"\n          />\n        }\n      } @else if (selType === 'text' && !!selectedOpts.length) {\n        @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n          <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? '&nbsp;' : ',&nbsp;' }}</span>\n        }\n      }\n      @if (!searchOn) {\n        <span class=\"text-placeholder text-truncate\">\n          {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n        </span>\n      } @else {\n        <input\n          #inputElement\n          (keydown)=\"handleSearchKeyDown($event)\"\n          (valueChange)=\"handleSearchValueChange($event)\"\n          [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n          [disabled]=\"isDisabled || !searchOn\"\n          [class]=\"{ 'form-multi-select-search': true, disabled: isDisabled || !searchOn, 'text-truncate': true }\"\n          [ngModel]=\"searchValue\"\n          [value]=\"searchValue\"\n          autocomplete=\"off\"\n          cMultiSelectSearch\n          size=\"2\"\n          tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n          type=\"text\"\n        />\n      }\n    </span>\n    <div class=\"form-multi-select-buttons\">\n      @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n        <button\n          (click)=\"clearAllOptions($event)\"\n          [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n          [attr.aria-label]=\"ariaCleanerLabel()\"\n          class=\"form-multi-select-cleaner\"\n          type=\"button\"\n        ></button>\n      }\n      <button\n        (click)=\"handleIndicatorClick($event)\"\n        [disabled]=\"isDisabled\"\n        [attr.aria-label]=\"ariaIndicatorLabel()\"\n        class=\"form-multi-select-indicator\"\n        type=\"button\"\n      ></button>\n    </div>\n  </div>\n  @if (!isDisabled) {\n    <div\n      #dropdownMenu=\"cDropdownMenu\"\n      [visible]=\"dropdown.visible()\"\n      cDropdownMenu\n      class=\"form-multi-select-dropdown\"\n      role=\"menu\"\n    >\n      @if (visibleOptions() && options.length > 0) {\n        @if (selectAll() && multiple() && !vScroller) {\n          <div class=\"form-multi-select-dropdown-header\">\n            <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n              {{ selectAllLabel() }}\n            </button>\n          </div>\n        }\n      }\n      @if ((visibleOptions() && options.length > 0) || loading()) {\n        <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n      } @else {\n        <div class=\"form-multi-select-options-empty\" role=\"status\">{{ searchNoResultsLabel() }}</div>\n      }\n      @if (loading()) {\n        <c-element-cover [style]=\"{ 'border-radius': '6px', 'z-index': 2 }\" />\n      }\n    </div>\n  }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n  @let itemSizePx = itemSize();\n  @let bufferPx = itemSizePx * visibleItems();\n  @defer (on immediate) {\n    @let optionsArray = $safeNavigationMigration(multiSelectService?.optionsArray$) | async;\n    @if (optionsArray) {\n      @let optMaxHeight = optionsMaxHeight();\n      @let optMinWidth = minWidth();\n      <cdk-virtual-scroll-viewport\n        #scrollViewport\n        (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n        [itemSize]=\"itemSizePx\"\n        [ngStyle]=\"\n          optMaxHeight !== 'auto'\n            ? {\n                'height.px': optMaxHeight,\n                'maxHeight.px': optMaxHeight,\n                'minWidth.px': optMinWidth,\n                overflowX: 'hidden'\n              }\n            : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n        \"\n        maxBufferPx=\"{{ bufferPx }}\"\n        minBufferPx=\"{{ bufferPx }}\"\n        tabindex=\"-1\"\n      >\n        <ng-container\n          #cdkVirtualFor\n          *cdkVirtualFor=\"\n            let option of optionsArray;\n            trackBy: trackByFn;\n            templateCacheSize: 0;\n            even as even;\n            odd as odd;\n            index as index;\n            count as count;\n            first as first;\n            last as last\n          \"\n          [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n          [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n        />\n      </cdk-virtual-scroll-viewport>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n  @let optMaxHeight = optionsMaxHeight();\n  <div\n    [class.form-multi-select-options]=\"visibleOptions()\"\n    [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\"\n  >\n    <ng-content />\n    <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n  </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n  <c-multi-select-option\n    [disabled]=\"option.disabled\"\n    [label]=\"option.label\"\n    [text]=\"option.text\"\n    [value]=\"option.value\"\n    [visible]=\"option.visible\"\n  >\n    {{ option.text }}\n  </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n  @for (\n    option of userOptionsArray$ | async;\n    track option;\n    let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n  ) {\n    <ng-container\n      [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: option, even, odd, index, count, first, last }\"\n    />\n  }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"] }]
             }], ctorParameters: () => [], propDecorators: { allowCreateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreateOptions", required: false }] }], ariaCleanerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCleanerLabel", required: false }] }], ariaIndicatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaIndicatorLabel", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{
                     type: Input
                 }], optionsMaxHeightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionsStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsStyle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], resetSelectionOnOptionsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSelectionOnOptionsChange", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], searchValue: [{
@@ -8233,15 +8237,8 @@ class CarouselService {
     setIndex(index) {
         this.#carouselIndex.next(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, decorators: [{
-            type: Injectable
-        }] });
-
-class CarouselState {
-    #carouselService = inject(CarouselService);
+    animating = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animating" }] : /* istanbul ignore next */ []));
     #state = {
         activeItemIndex: -1,
         animate: true,
@@ -8260,7 +8257,7 @@ class CarouselState {
         if (prevState.activeItemIndex !== nextState.activeItemIndex) {
             const activeItemIndex = this.state.activeItemIndex || 0;
             const itemInterval = (this.state.items && this.state.items[activeItemIndex]?.interval()) || -1;
-            this.#carouselService.setIndex({
+            this.setIndex({
                 active: nextState.activeItemIndex,
                 interval: itemInterval,
                 lastItemIndex: (nextState.items?.length ?? 0) - 1
@@ -8282,7 +8279,7 @@ class CarouselState {
         }
     }
     setNextIndex(nextIndex) {
-        this.#carouselService.setIndex(nextIndex);
+        this.setIndex(nextIndex);
     }
     direction(direction = 'next') {
         this.state = { direction };
@@ -8311,10 +8308,10 @@ class CarouselState {
             interval: 0
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselState });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselService, decorators: [{
             type: Injectable
         }] });
 
@@ -8323,9 +8320,9 @@ class CarouselConfig {
     activeIndex = 0;
     /* Animate transition of slides */
     animate = true;
-    /* Default direction of auto changing of slides */
+    /* Default direction of auto-changing of slides */
     direction = 'next';
-    /* Default interval of auto changing of slides */
+    /* Default interval of auto-changing of slides */
     interval;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselConfig, providedIn: 'root' });
@@ -8339,7 +8336,6 @@ class CarouselComponent {
     config = inject(CarouselConfig);
     #hostElement = inject(ElementRef);
     #carouselService = inject(CarouselService);
-    #carouselState = inject(CarouselState);
     #intersectionService = inject(IntersectionService);
     #listenersService = inject(ListenersService);
     constructor() {
@@ -8347,7 +8343,7 @@ class CarouselComponent {
     }
     loadConfig() {
         this.activeIndex.update((activeIndex) => this.config?.activeIndex ?? activeIndex);
-        this.animate.update((animate) => this.config?.animate ?? animate);
+        this.animate.update((animate) => (animate === false ? animate : (this.config?.animate ?? animate)));
         this.direction.update((direction) => this.config?.direction ?? direction);
         this.interval.update((interval) => this.config?.interval ?? interval);
     }
@@ -8363,8 +8359,8 @@ class CarouselComponent {
      * @return boolean
      */
     animateInput = input(true, { ...(ngDevMode ? { debugName: "animateInput" } : /* istanbul ignore next */ {}), alias: 'animate' });
-    animate = linkedSignal({ ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), source: this.animateInput,
-        computation: (value) => value });
+    animate = linkedSignal(this.animateInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
     /**
      * Carousel direction. [docs]
      * @return {'next' | 'prev'}
@@ -8382,7 +8378,7 @@ class CarouselComponent {
         computation: (value) => value });
     #intervalEffect = effect(() => {
         const interval = this.interval();
-        this.#carouselState.state = { interval: interval };
+        this.#carouselService.state = { interval: interval };
         interval ? this.setTimer() : this.resetTimer();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#intervalEffect" }] : /* istanbul ignore next */ []));
@@ -8400,7 +8396,7 @@ class CarouselComponent {
     touch = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touch" }] : /* istanbul ignore next */ []));
     /**
-     * Set type of the transition.
+     * Set the type of the transition.
      * @return {'slide' | 'crossfade'}
      * @default 'slide'
      */
@@ -8423,16 +8419,18 @@ class CarouselComponent {
     swipeSubscription;
     #destroyRef = inject(DestroyRef);
     ngOnInit() {
-        this.carouselStateSubscribe();
+        this.carouselServiceSubscribe();
     }
     ngOnDestroy() {
         this.resetTimer();
         this.clearListeners();
         this.swipeSubscribe(false);
+        // Ensure IntersectionObserver is cleaned up
+        this.#intersectionService?.unobserve(this.#hostElement);
     }
     ngAfterContentInit() {
         this.intersectionServiceSubscribe();
-        this.#carouselState.state = {
+        this.#carouselService.state = {
             activeItemIndex: this.activeIndex(),
             animate: this.animate(),
             interval: this.interval(),
@@ -8470,8 +8468,8 @@ class CarouselComponent {
         this.resetTimer();
         if (interval > 0) {
             this.timerId = setTimeout(() => {
-                const nextIndex = this.#carouselState.direction(direction);
-                this.#carouselState.state = { activeItemIndex: nextIndex };
+                const nextIndex = this.#carouselService.direction(direction);
+                this.#carouselService.state = { activeItemIndex: nextIndex };
             }, interval);
         }
     }
@@ -8479,7 +8477,7 @@ class CarouselComponent {
         clearTimeout(this.timerId);
         this.timerId = undefined;
     }
-    carouselStateSubscribe() {
+    carouselServiceSubscribe() {
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextItem) => {
             if ('active' in nextItem && typeof nextItem.active === 'number') {
                 this.itemChange?.emit(nextItem.active);
@@ -8496,7 +8494,7 @@ class CarouselComponent {
         this.#intersectionService.createIntersectionObserver(this.#hostElement);
         this.#intersectionService.intersecting$
             .pipe(filter((next) => next.hostElement === this.#hostElement), finalize(() => {
-            this.#intersectionService.unobserve(this.#hostElement);
+            this.#intersectionService?.unobserve(this.#hostElement);
         }), takeUntilDestroyed(this.#destroyRef))
             .subscribe((next) => {
             this.visible = next.isIntersecting;
@@ -8514,10 +8512,13 @@ class CarouselComponent {
                 .subscribe(([touchstart, [touchend, touchmove]]) => {
                 touchstart.stopPropagation();
                 touchmove.stopPropagation();
+                if (this.#carouselService.animating()) {
+                    return;
+                }
                 const distanceX = touchstart.touches[0]?.clientX - touchmove.touches[0]?.clientX || 0;
                 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 };
+                    const nextIndex = this.#carouselService.direction(distanceX > 0 ? 'next' : 'prev');
+                    this.#carouselService.state = { activeItemIndex: nextIndex };
                 }
             });
         }
@@ -8526,11 +8527,11 @@ class CarouselComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndexInput: { classPropertyName: "activeIndexInput", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, directionInput: { classPropertyName: "directionInput", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, intervalInput: { classPropertyName: "intervalInput", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, pause: { classPropertyName: "pause", publicName: "pause", isSignal: true, isRequired: false, transformFunction: null }, touch: { classPropertyName: "touch", publicName: "touch", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, host: { properties: { "class.carousel-fade": "transition() === \"crossfade\" && animate()" }, classAttribute: "carousel slide" }, providers: [CarouselService, CarouselState, ListenersService], exportAs: ["cCarousel"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselComponent, isStandalone: true, selector: "c-carousel", inputs: { activeIndexInput: { classPropertyName: "activeIndexInput", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, animateInput: { classPropertyName: "animateInput", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, directionInput: { classPropertyName: "directionInput", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, intervalInput: { classPropertyName: "intervalInput", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, pause: { classPropertyName: "pause", publicName: "pause", isSignal: true, isRequired: false, transformFunction: null }, touch: { classPropertyName: "touch", publicName: "touch", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, host: { properties: { "class.carousel-fade": "transition() === \"crossfade\" && animate()" }, classAttribute: "carousel slide" }, providers: [CarouselService, ListenersService], exportAs: ["cCarousel"], hostDirectives: [{ directive: ThemeDirective, inputs: ["dark", "dark"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel', template: '<ng-content />', providers: [CarouselService, CarouselState, ListenersService], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], exportAs: 'cCarousel', host: {
+            args: [{ selector: 'c-carousel', template: '<ng-content />', providers: [CarouselService, ListenersService], hostDirectives: [{ directive: ThemeDirective, inputs: ['dark'] }], exportAs: 'cCarousel', host: {
                         class: 'carousel slide',
                         '[class.carousel-fade]': 'transition() === "crossfade" && animate()'
                     }, styles: [":host{display:block}\n"] }]
@@ -8548,7 +8549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }] });
 
 class CarouselControlComponent {
-    #carouselState = inject(CarouselState);
+    #carouselService = inject(CarouselService);
     /**
      * Carousel control caption. [docs]
      * @return string
@@ -8590,11 +8591,14 @@ class CarouselControlComponent {
         }
     }
     onClick($event) {
+        if (this.#carouselService.animating()) {
+            return;
+        }
         this.#play();
     }
     #play(direction = this.direction()) {
-        const nextIndex = this.#carouselState.direction(direction);
-        this.#carouselState.state = { activeItemIndex: nextIndex };
+        const nextIndex = this.#carouselService.direction(direction);
+        this.#carouselService.state = { activeItemIndex: nextIndex };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselControlComponent, isStandalone: true, selector: "c-carousel-control", inputs: { captionInput: { classPropertyName: "captionInput", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "attr.role": "role()", "class": "hostClasses()" } }, exportAs: ["cCarouselControl"], ngImport: i0, template: "<ng-content>\n  <span [attr.aria-hidden]=\"true\" [class]=\"carouselControlIconClass()\"></span>\n  <span class=\"visually-hidden\">{{ caption() }}</span>\n</ng-content>\n" });
@@ -8612,7 +8616,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 class CarouselIndicatorsComponent {
     #destroyRef = inject(DestroyRef);
     #carouselService = inject(CarouselService);
-    #carouselState = inject(CarouselState);
     items = [];
     active = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
@@ -8626,16 +8629,19 @@ class CarouselIndicatorsComponent {
     ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextIndex) => {
-            this.items = this.#carouselState?.state?.items?.map((item) => item.index) ?? [];
+            this.items = this.#carouselService?.state?.items?.map((item) => item.index) ?? [];
             if ('active' in nextIndex) {
                 this.active.set(nextIndex.active ?? 0);
             }
         });
     }
     onClick(index) {
+        if (this.#carouselService.animating()) {
+            return;
+        }
         if (index !== this.active()) {
             const direction = index < this.active() ? 'prev' : 'next';
-            this.#carouselState.state = { direction, activeItemIndex: index };
+            this.#carouselService.state = { direction, activeItemIndex: index };
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -8647,19 +8653,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], propDecorators: { contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 class CarouselItemComponent {
+    #elementRef = inject((ElementRef));
     #destroyRef = inject(DestroyRef);
     #carouselService = inject(CarouselService);
+    #timeoutId;
+    #rafId;
     index;
     /**
      * @ignore
      */
     activeInput = input(false, { ...(ngDevMode ? { debugName: "activeInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'active' });
-    active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), source: this.activeInput,
-        computation: (value) => {
-            return value;
-        } });
+    active = linkedSignal(this.activeInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     /**
-     * Time delay before cycling to next item. If -1, uses carousel interval value.
+     * Time delay before cycling to the next item. If -1, uses carousel interval value.
      * @return number
      * @default -1
      */
@@ -8673,102 +8680,119 @@ class CarouselItemComponent {
     role = input('group', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.#elementRef.nativeElement.style.transition = '1ms';
+    }
+    ngOnInit() {
+        console.log('OnInit', this.#carouselService.state.animate);
         this.#carouselService.carouselIndex$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((nextIndex) => {
             if ('active' in nextIndex) {
+                console.log('#carouselService', this.#carouselService.state.animate, this.#elementRef.nativeElement.style.transition);
+                if (this.#carouselService.state.animate && this.#elementRef.nativeElement.style.transition !== '') {
+                    this.#timeoutId = setTimeout(() => {
+                        this.#elementRef.nativeElement.style.transition = '';
+                        this.#timeoutId = undefined;
+                    }, 500);
+                }
+                this.prevActive.set(this.active());
                 this.active.set(nextIndex.active === this.index);
             }
         });
+        // Clean up timeout on destroy
+        this.#destroyRef.onDestroy(() => {
+            if (this.#timeoutId !== undefined) {
+                clearTimeout(this.#timeoutId);
+            }
+            if (this.#rafId !== undefined) {
+                cancelAnimationFrame(this.#rafId);
+            }
+        });
     }
+    hostClasses = computed(() => {
+        const order = this.orderClassName();
+        const direction = this.directionClassName();
+        return {
+            active: this.activeClass(),
+            [`${order}`]: !!order,
+            [`${direction}`]: !!direction,
+            'd-none': !this.activeClass() && !order && !direction
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    prevActive = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevActive" }] : /* istanbul ignore next */ []));
+    activeClass = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeClass" }] : /* istanbul ignore next */ []));
+    orderClassName = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orderClassName" }] : /* istanbul ignore next */ []));
+    directionClassName = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionClassName" }] : /* istanbul ignore next */ []));
+    #activeEffect = effect((OnCleanup) => {
+        const active = this.active();
+        const prevActive = untracked(this.prevActive);
+        const direction = this.#carouselService.state?.direction;
+        this.activeClass.set(prevActive);
+        if (active) {
+            this.orderClassName.set(`carousel-item-${direction}`);
+        }
+        if (prevActive || active) {
+            if (this.#rafId) {
+                cancelAnimationFrame(this.#rafId);
+            }
+            this.#rafId = requestAnimationFrame(() => {
+                //  reflow is necessary to proper transition
+                void this.#elementRef.nativeElement.offsetHeight;
+                this.directionClassName.set(`carousel-item-${direction === 'next' ? 'start' : 'end'}`);
+                this.#rafId = undefined;
+            });
+        }
+        const handleTransitionStart = () => {
+            if (active) {
+                this.#carouselService.animating.set(true);
+            }
+        };
+        const handleTransitionEnd = () => {
+            if (active) {
+                this.#carouselService.animating.set(false);
+            }
+            this.directionClassName.set('');
+            this.orderClassName.set('');
+            this.activeClass.set(active);
+        };
+        this.#elementRef.nativeElement.addEventListener('transitionstart', handleTransitionStart);
+        this.#elementRef.nativeElement.addEventListener('transitionend', handleTransitionEnd);
+        OnCleanup(() => {
+            this.#elementRef.nativeElement.removeEventListener('transitionstart', handleTransitionStart);
+            this.#elementRef.nativeElement.removeEventListener('transitionend', handleTransitionEnd);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#activeEffect" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "active()", "attr.role": "role()" }, classAttribute: "carousel-item" }, exportAs: ["cCarouselItem"], ngImport: i0, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CarouselItemComponent, isStandalone: true, selector: "c-carousel-item", inputs: { activeInput: { classPropertyName: "activeInput", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.role": "role()" }, classAttribute: "carousel-item" }, exportAs: ["cCarouselItem"], ngImport: i0, template: `
+    <!--    @if (this.activeClass() || (this.orderClassName() && this.directionClassName())) {-->
+    <ng-content />
+    <!--    }-->
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-item', exportAs: 'cCarouselItem', host: {
+            args: [{
+                    selector: 'c-carousel-item',
+                    template: `
+    <!--    @if (this.activeClass() || (this.orderClassName() && this.directionClassName())) {-->
+    <ng-content />
+    <!--    }-->
+  `,
+                    exportAs: 'cCarouselItem',
+                    host: {
                         class: 'carousel-item',
-                        '[class.active]': 'active()',
+                        '[class]': 'hostClasses()',
                         '[attr.role]': 'role()'
-                    }, template: "@if (active()) {\n  <ng-content />\n}\n", styles: [":host{display:block}\n"] }]
+                    }
+                }]
         }], ctorParameters: () => [], propDecorators: { activeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }] } });
 
-function toSlideLeft(fromState, toState) {
-    return toState.left === true && toState.type === 'slide';
-}
-function toSlideRight(fromState, toState) {
-    return toState.left === false && toState.type === 'slide';
-}
-function toFadeLeft(fromState, toState) {
-    return toState.left === true && toState.type !== 'slide';
-}
-function toFadeRight(fromState, toState) {
-    return toState.left === false && toState.type !== 'slide';
-}
-const slideAnimationLeft = animation(group([
-    query(':leave', [
-        animate('0.6s ease-in-out', style({
-            transform: 'translateX(-100%)'
-        }))
-    ], { optional: true }),
-    query(':enter', [
-        style({
-            transform: 'translateX(100%)'
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true })
-]));
-const slideAnimationRight = animation(group([
-    query(':enter', [
-        style({
-            transform: 'translateX(-100%)'
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true }),
-    query(':leave', [
-        animate('0.6s ease-in-out', style({
-            transform: 'translateX(100%)'
-        }))
-    ], { optional: true })
-]));
-const fadeAnimationLeft = animation(group([
-    query(':leave', [
-        animate('0.9s ease-in-out', style({
-            zIndex: 0,
-            opacity: 0
-        }))
-    ], { optional: true }),
-    query(':enter', [
-        style({
-            zIndex: 1,
-            opacity: 1
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true })
-]));
-const fadeAnimationRight = animation(group([
-    query(':enter', [
-        style({
-            zIndex: 1,
-            opacity: 1
-        }),
-        animate('0.6s ease-in-out', style('*'))
-    ], { optional: true }),
-    query(':leave', [
-        animate('0.9s ease-in-out', style({
-            zIndex: 0,
-            opacity: 0
-        }))
-    ], { optional: true })
-]));
-const carouselPlay = trigger('carouselPlay', [
-    state('*', style({ transform: 'translateX(0)', display: 'block', opacity: 1 })),
-    transition(toFadeLeft, useAnimation(fadeAnimationLeft)),
-    transition(toFadeRight, useAnimation(fadeAnimationRight)),
-    transition(toSlideLeft, useAnimation(slideAnimationLeft)),
-    transition(toSlideRight, useAnimation(slideAnimationRight))
-]);
-
 class CarouselInnerComponent {
-    #carouselState = inject(CarouselState);
+    #carouselService = inject(CarouselService);
     activeIndex = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     animate = signal(true, /* @ts-ignore */
@@ -8796,7 +8820,7 @@ class CarouselInnerComponent {
     }
     ngAfterContentChecked() {
         this.setItems();
-        const state = this.#carouselState?.state;
+        const state = this.#carouselService?.state;
         const nextIndex = state?.activeItemIndex;
         const nextDirection = state?.direction;
         if (this.activeIndex() !== nextIndex) {
@@ -8811,18 +8835,16 @@ class CarouselInnerComponent {
         const contentItems = this.contentItems();
         if (this.#prevContentItems() !== contentItems) {
             this.#prevContentItems.set([...contentItems]);
-            this.#carouselState.setItems(contentItems);
+            this.#carouselService.setItems(contentItems);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: CarouselInnerComponent, isStandalone: true, selector: "c-carousel-inner", host: { properties: { "@carouselPlay": "slideType()", "@.disabled": "!animate()", "attr.aria-live": "ariaLive()" }, classAttribute: "carousel-inner" }, queries: [{ propertyName: "contentItems", predicate: CarouselItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"], animations: [carouselPlay] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: CarouselInnerComponent, isStandalone: true, selector: "c-carousel-inner", host: { properties: { "attr.aria-live": "ariaLive()" }, classAttribute: "carousel-inner" }, queries: [{ propertyName: "contentItems", predicate: CarouselItemComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselInnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c-carousel-inner', animations: [carouselPlay], template: '<ng-content />', host: {
+            args: [{ selector: 'c-carousel-inner', template: '<ng-content />', host: {
                         class: 'carousel-inner',
-                        '[@carouselPlay]': 'slideType()',
-                        '[@.disabled]': '!animate()',
                         '[attr.aria-live]': 'ariaLive()'
                     }, styles: [":host{display:block}\n"] }]
         }], propDecorators: { contentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CarouselItemComponent), { isSignal: true }] }] } });
@@ -8843,7 +8865,7 @@ class CarouselModule {
             CarouselIndicatorsComponent,
             CarouselInnerComponent,
             CarouselItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselModule, providers: [CarouselService, CarouselState, CarouselConfig] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselModule, providers: [CarouselService, CarouselConfig] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselModule, decorators: [{
             type: NgModule,
@@ -8856,7 +8878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         CarouselInnerComponent,
                         CarouselItemComponent
                     ],
-                    providers: [CarouselService, CarouselState, CarouselConfig],
+                    providers: [CarouselService, CarouselConfig],
                     exports: [
                         CarouselComponent,
                         CarouselCaptionComponent,
@@ -20213,85 +20235,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 }]
         }] });
 
+const getTransitionDurationFromElement = (element) => {
+    if (!element) {
+        return 0;
+    }
+    // Get transition-duration of the element
+    let { transitionDuration, transitionDelay } = window.getComputedStyle(element);
+    const floatTransitionDuration = Number.parseFloat(transitionDuration);
+    const floatTransitionDelay = Number.parseFloat(transitionDelay);
+    // Return 0 if element or transition duration is not found
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+        return 0;
+    }
+    // If multiple durations are defined, take the first
+    transitionDuration = transitionDuration.split(',')[0];
+    transitionDelay = transitionDelay.split(',')[0];
+    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+};
+
 class TabPanelComponent {
-    tabsService = inject(TabsService);
+    #tabsService = inject(TabsService);
+    #elementRef = inject(ElementRef);
     /**
      * aria-labelledby attribute
-     * @type string
+     * @return string
      * @default undefined
      */
     ariaLabelledBy = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     /**
      * Element id attribute
-     * @type string
+     * @return string
      * @default undefined
      */
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
     /**
      * Item key.
-     * @type string | number
+     * @return string | number
      * @required
      */
     itemKey = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []));
     /**
      * Element role.
-     * @type string
+     * @return string
      * @default 'tabpanel'
      */
     role = input('tabpanel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
     /**
      * tabindex attribute.
-     * @type number
+     * @return number
      * @default 0
      */
     tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Enable fade in transition.
-     * @type boolean
+     * @return boolean
      * @default true
      */
     transition = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "transition" }] : /* istanbul ignore next */ []));
     /**
      * visible change output
-     * @type OutputEmitterRef<VisibleChangeEvent>
+     * @return VisibleChangeEvent
      */
     visibleChange = output();
     show = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []));
     visible = computed(() => {
-        const visible = this.tabsService.activeItemKey() === this.itemKey() && !this.tabsService.activeItem()?.disabled;
+        const visible = this.#tabsService.activeItemKey() === this.itemKey() && !this.#tabsService.activeItem()?.disabled;
         this.visibleChange?.emit({ itemKey: this.itemKey(), visible });
         return visible;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    propId = computed(() => this.id() ?? `${this.tabsService.id()}-panel-${this.itemKey()}`, /* @ts-ignore */
+    #transitionDuration = 0;
+    #visibleEffect = effect(() => {
+        const isVisible = this.visible();
+        const hasTransition = this.transition();
+        if (!hasTransition) {
+            this.show.set(isVisible);
+        }
+        else {
+            requestAnimationFrame(() => {
+                if (this.#transitionDuration === 0) {
+                    this.#transitionDuration = getTransitionDurationFromElement(this.#elementRef.nativeElement);
+                }
+                setTimeout(() => this.show.set(isVisible), this.#transitionDuration || 0);
+            });
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#visibleEffect" }] : /* istanbul ignore next */ []));
+    propId = computed(() => this.id() ?? `${this.#tabsService.id()}-panel-${this.itemKey()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "propId" }] : /* istanbul ignore next */ []));
-    attrAriaLabelledBy = computed(() => this.ariaLabelledBy() ?? `${this.tabsService.id()}-tab-${this.itemKey()}`, /* @ts-ignore */
+    attrAriaLabelledBy = computed(() => this.ariaLabelledBy() ?? `${this.#tabsService.id()}-tab-${this.itemKey()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "attrAriaLabelledBy" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         'tab-pane': true,
-        active: this.show(),
+        active: this.visible(),
         fade: this.transition(),
         show: this.show(),
-        invisible: this.tabsService.activeItem()?.disabled
+        invisible: this.#tabsService.activeItem()?.disabled
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    onAnimationDone($event) {
-        this.show.set(this.visible());
+    onTransitionEnd($event) {
+        if ($event.propertyName === 'opacity' && $event.target === this.#elementRef.nativeElement) {
+            this.show.set(this.visible());
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TabPanelComponent, isStandalone: true, selector: "c-tab-panel", inputs: { ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: true, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "@fadeInOut.done": "onAnimationDone($event)" }, properties: { "class": "hostClasses()", "tabindex": "visible() ? tabindex() : -1", "attr.aria-labelledby": "attrAriaLabelledBy()", "id": "propId()", "attr.role": "role()", "@.disabled": "!transition()", "@fadeInOut": "visible() ? \"show\" : \"hide\"" } }, exportAs: ["cTabPanel"], ngImport: i0, template: '<ng-content />', isInline: true, animations: [
-            trigger('fadeInOut', [
-                state('show', style({ opacity: 1 })),
-                state('hide', style({ opacity: 0 })),
-                state('void', style({ opacity: 1 })),
-                transition('* => *', [query('@*', [animateChild()], { optional: true }), animate('150ms linear')])
-            ])
-        ] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TabPanelComponent, isStandalone: true, selector: "c-tab-panel", inputs: { ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: true, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { listeners: { "transitionend": "onTransitionEnd($event)" }, properties: { "class": "hostClasses()", "tabindex": "visible() ? tabindex() : -1", "attr.aria-labelledby": "attrAriaLabelledBy()", "id": "propId()", "attr.role": "role()" } }, exportAs: ["cTabPanel"], ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TabPanelComponent, decorators: [{
             type: Component,
@@ -20305,18 +20358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[attr.aria-labelledby]': 'attrAriaLabelledBy()',
                         '[id]': 'propId()',
                         '[attr.role]': 'role()',
-                        '[@.disabled]': '!transition()',
-                        '[@fadeInOut]': 'visible() ? "show" : "hide"',
-                        '(@fadeInOut.done)': 'onAnimationDone($event)'
-                    },
-                    animations: [
-                        trigger('fadeInOut', [
-                            state('show', style({ opacity: 1 })),
-                            state('hide', style({ opacity: 0 })),
-                            state('void', style({ opacity: 1 })),
-                            transition('* => *', [query('@*', [animateChild()], { optional: true }), animate('150ms linear')])
-                        ])
-                    ]
+                        '(transitionend)': 'onTransitionEnd($event)'
+                    }
                 }]
         }], propDecorators: { ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], itemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKey", required: true }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });