@design-system-rte/angular 1.0.1 → 1.2.0

package/fesm2022/design-system-rte-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, contentChild, NgModule, signal, viewChild, viewChildren, RendererFactory2 } from '@angular/core';
+import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, TemplateRef, contentChild, viewChild, signal, NgModule, viewChildren, RendererFactory2 } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -11,16 +11,19 @@ import { TOOLTIP_GAP, TOOLTIP_FADE_OUT_DURATION } from '@design-system-rte/core/
 import { getTooltipGap } from '@design-system-rte/core/components/tooltip/tooltip.utils';
 import { getAutoPlacement, getCoordinates, getAutoPlacementDropdown, getAutoAlignment } from '@design-system-rte/core/components/utils/auto-placement';
 import { FOCUSABLE_ELEMENTS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
+import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge, shouldDisplayBadge } from '@design-system-rte/core/components/badge/badge.utils';
 import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
 import { SPACE_KEY, ENTER_KEY, ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ESCAPE_KEY, TAB_KEY, BACKSPACE_KEY, DELETE_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { waitForNextFrame } from '@design-system-rte/core/common/animation';
+import { DROPDOWN_ANIMATION_DURATION } from '@design-system-rte/core/components/dropdown/dropdown.constants';
 import { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
 import { ButtonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
-import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge } from '@design-system-rte/core/components/badge/badge.utils';
 import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from '@design-system-rte/core/components/chip/chip.constants';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { TEXTAREA_ICON_SIZE, TEXTAREA_REQUIREMENT_INDICATOR_VALUE } from '@design-system-rte/core/components/textarea/textarea.constants';
+import { REQUIREMENT_INDICATOR_VALUE } from '@design-system-rte/core/components/required-indicator/required-indicator.constant';
+import { TEXTAREA_ICON_SIZE } from '@design-system-rte/core/components/textarea/textarea.constants';
 import { switchHeight, switchWidth } from '@design-system-rte/core/components/switch/switch.constants';
 import { isValidSegmentedControlOptions, focusNextSegmentElement, focusPreviousSegmentElement, focusPreviousNotSegmentElement, focusNextNotSegmentElement, getSegmentPosition } from '@design-system-rte/core/components/segmented-control/segmented-control-utils';
 import { BREADCRUMBS_DEFAULT_ARIA_LABEL } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.constants';
@@ -28,10 +31,16 @@ import { shouldTruncateBreadcrumbs, getBreadcrumbsTruncatedItems } from '@design
 import { cardSize } from '@design-system-rte/core/components/card/card.constats';
 import { POPOVER_GAP_ARROW, POPOVER_GAP } from '@design-system-rte/core/components/popover/popover.constants';
 import { IconSize, IconTypeMap } from '@design-system-rte/core/components/icon/icon.constants';
+import { APPEARANCE_CONFIG, SEARCHBAR_BORDER_RADIUS, SEARCHBAR_PADDING_LEFT, SEARCHBAR_BUTTON_WIDTH, SEARCHBAR_BUTTON_HEIGHT_COMPACT } from '@design-system-rte/core/components/searchbar/searchbar.constants';
 import { sideNavCollapsedSize, sideNavPanelSize, dividerAppearanceBySideNavAppearance } from '@design-system-rte/core/components/side-nav/side-nav.constants';
 import { getNavItemLabelIconSize } from '@design-system-rte/core/components/side-nav/nav-item/nav-item.utils';
+import { ToastDurationMap } from '@design-system-rte/core/components/toast/toast.constants';
 import { getToastPriority } from '@design-system-rte/core/components/toast/toast.utils';
 import { v4 } from 'uuid';
+import { MIN_SELECT_WIDTH, SELECT_DROPDOWN_OFFSET, THRESHOLD_BOTTOM_POSITION } from '@design-system-rte/core/components/select/select.constants';
+import { ASSISTIVE_TEXT_ICON_SIZE } from '@design-system-rte/core/components/assistive-text/assistive-text.constants';
+import { getIconNameFromAppearance } from '@design-system-rte/core/components/assistive-text/assistive-text.utils';
+import { scrollToSelectedTab } from '@design-system-rte/core/components/tab/tab.utils';
 
 class ButtonComponent {
     constructor() {
@@ -799,6 +808,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ["blur"]
             }] } });
 
+class BadgeComponent {
+    constructor() {
+        this.badgeType = input("brand");
+        this.badgeSize = input("m");
+        this.badgeContent = input("number");
+        this.count = input();
+        this.icon = input("notification");
+        this.simpleBadge = input(false);
+        this.isValidIconName = computed(() => {
+            const icon = this.icon();
+            return isValidIconName(icon);
+        });
+        this.showIcon = computed(() => getShowIcon({
+            size: this.badgeSize(),
+            content: this.badgeContent(),
+            iconSize: this.iconSize(),
+        }));
+        this.showText = computed(() => getShowText({
+            size: this.badgeSize(),
+            content: this.badgeContent(),
+            count: this.count(),
+        }));
+        this.displayCount = computed(() => getDisplayCount(this.count()));
+        this.countOverflow = computed(() => this.showText() && this.displayCount().length > 2);
+        this.iconSize = computed(() => getBadgeIconSize(this.badgeSize()));
+        this.showBadge = computed(() => getShowBadge({
+            size: this.badgeSize(),
+            content: this.badgeContent(),
+            count: this.count(),
+            iconSize: this.iconSize(),
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()!\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3px;right:-3px}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"] }]
+        }] });
+
+class BadgeDirective {
+    constructor() {
+        this.rteBadgeType = input("brand");
+        this.rteBadgeSize = input("m");
+        this.rteBadgeContent = input("number");
+        this.rteBadgeCount = input();
+        this.rteBadgeIcon = input("settings");
+        this.badgeComponentRef = null;
+        this.viewContainer = inject(ViewContainerRef);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    ngOnInit() {
+        this.badgeComponentRef = this.viewContainer.createComponent(BadgeComponent);
+        this.assignDirectiveToComponent();
+        this.appendComponentToHost();
+        this.renderer.setStyle(this.hostElement, "position", "relative");
+    }
+    ngOnChanges() {
+        this.assignDirectiveToComponent();
+    }
+    ngOnDestroy() {
+        if (this.badgeComponentRef) {
+            this.badgeComponentRef.destroy();
+        }
+    }
+    assignDirectiveToComponent() {
+        if (this.badgeComponentRef) {
+            this.badgeComponentRef.setInput("badgeType", this.rteBadgeType());
+            this.badgeComponentRef.setInput("badgeSize", this.rteBadgeSize());
+            this.badgeComponentRef.setInput("badgeContent", this.rteBadgeContent());
+            this.badgeComponentRef.setInput("count", this.rteBadgeCount());
+            this.badgeComponentRef.setInput("icon", this.rteBadgeIcon());
+        }
+    }
+    appendComponentToHost() {
+        if (this.badgeComponentRef) {
+            this.renderer.appendChild(this.elementRef.nativeElement, this.badgeComponentRef.location.nativeElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: BadgeDirective, isStandalone: true, selector: "[rteBadge]", inputs: { rteBadgeType: { classPropertyName: "rteBadgeType", publicName: "rteBadgeType", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeSize: { classPropertyName: "rteBadgeSize", publicName: "rteBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeContent: { classPropertyName: "rteBadgeContent", publicName: "rteBadgeContent", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeIcon: { classPropertyName: "rteBadgeIcon", publicName: "rteBadgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteBadge]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
 class DividerComponent {
     constructor() {
         this.orientation = input("horizontal");
@@ -820,6 +921,15 @@ class DropdownItemComponent {
         this.item = input();
         this.menuId = input();
         this.itemEvent = output();
+        this.shouldDisplayBadge = computed(() => {
+            const item = this.item();
+            return shouldDisplayBadge({
+                showBadge: !!item?.showBadge,
+                badgeContent: item?.badgeContent,
+                badgeCount: item?.badgeCount,
+                badgeIcon: item?.badgeIcon,
+            });
+        });
     }
     handleClick(event) {
         if (this.item()?.disabled) {
@@ -827,7 +937,10 @@ class DropdownItemComponent {
             event.stopPropagation();
             return;
         }
-        this.itemEvent.emit({ event, id: this.item()?.id || this.item()?.label || "" });
+        this.itemEvent.emit({
+            event,
+            id: this.item()?.id || this.item()?.label || "",
+        });
     }
     handleKeyDown(event) {
         event.preventDefault();
@@ -837,16 +950,49 @@ class DropdownItemComponent {
                 link?.click();
             }
             else {
-                this.itemEvent.emit({ event, id: this.item()?.id || this.item()?.label || "" });
+                this.itemEvent.emit({
+                    event,
+                    id: this.item()?.id || this.item()?.label || "",
+                });
             }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "rte-dropdown-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent" }, ngImport: i0, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.aria-disabled]=\"item()?.disabled\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "rte-dropdown-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent" }, ngImport: i0, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"item()?.selected\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-dropdown-item", imports: [CommonModule, IconComponent, DividerComponent], standalone: true, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.aria-disabled]=\"item()?.disabled\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"] }]
+            args: [{ selector: "rte-dropdown-item", imports: [CommonModule, IconComponent, DividerComponent, BadgeComponent], standalone: true, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"item()?.selected\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n  >\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"] }]
+        }] });
+
+class DropdownMenuFooterDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef), { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuFooterDirective, isStandalone: true, selector: "[rteDropdownMenuFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteDropdownMenuFooter]",
+                    standalone: true,
+                }]
+        }] });
+
+class DropdownMenuHeaderDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef), { optional: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuHeaderDirective, isStandalone: true, selector: "[rteDropdownMenuHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteDropdownMenuHeader]",
+                    standalone: true,
+                }]
         }] });
 
 class DropdownService {
@@ -870,7 +1016,6 @@ class DropdownService {
     }
     reset() {
         this.state$.next(this.initialState);
-        console.log("🔵 Dropdown Service - State Reset");
     }
     handleKeyboardInput(key, options) {
         if ([ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY].includes(key)) {
@@ -921,7 +1066,7 @@ class DropdownService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: "root", // Makes the service a singleton
+                    providedIn: "root",
                 }]
         }] });
 
@@ -932,6 +1077,29 @@ class DropdownMenuComponent {
         this.items = input([]);
         this.menuId = input();
         this.itemEvent = output();
+        this.widthStyle = computed(() => (this.width() !== undefined ? `${this.width()}px` : undefined));
+        this.isOpen = input(false);
+        this.width = input(null);
+        this.closingMenu = output();
+        this.menuStyle = computed(() => {
+            return this.width() ? { width: this.width() + "px", "max-width": this.width() + "px" } : {};
+        });
+        this.headerDirective = contentChild(DropdownMenuHeaderDirective);
+        this.footerDirective = contentChild(DropdownMenuFooterDirective);
+        this.headerTemplate = input(undefined);
+        this.footerTemplate = input(undefined);
+        this.headerContentRef = viewChild("headerContent");
+        this.footerContentRef = viewChild("footerContent");
+        this.hasHeaderContent = computed(() => {
+            const hasTemplate = !!this.headerTemplate();
+            const hasProjectedContent = !!this.headerContentRef()?.nativeElement?.children.length;
+            return hasTemplate || hasProjectedContent;
+        });
+        this.hasFooterContent = computed(() => {
+            const hasTemplate = !!this.footerTemplate();
+            const hasProjectedContent = !!this.footerContentRef()?.nativeElement?.children.length;
+            return hasTemplate || hasProjectedContent;
+        });
     }
     getChildMenuId(itemIndex) {
         return `${this.menuId()}:${itemIndex + 1}`;
@@ -946,6 +1114,9 @@ class DropdownMenuComponent {
         if ([ARROW_UP_KEY, ARROW_DOWN_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, TAB_KEY].includes(event.key)) {
             event.preventDefault();
         }
+        if (event.key === ESCAPE_KEY) {
+            this.closingMenu.emit();
+        }
         const menuId = this.menuId();
         this.dropdownService.handleKeyboardInput(event.key, {
             menuElement: this.elementRef,
@@ -953,11 +1124,11 @@ class DropdownMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "rte-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-menu-id": "menuId()" } }, ngImport: i0, template: "<div class=\"rte-dropdown-menu\">\n  <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n    @for (item of items(); track item.label; let i = $index) {\n      <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n    }\n  </ul>\n</div>\n", styles: [":host{opacity:0;display:none;position:absolute}.rte-dropdown-menu{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu.open{transition:opacity .15s ease-in-out}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DropdownItemComponent, selector: "rte-dropdown-item", inputs: ["item", "menuId"], outputs: ["itemEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "rte-dropdown-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemEvent: "itemEvent", closingMenu: "closingMenu" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "attr.data-menu-id": "menuId()" } }, queries: [{ propertyName: "headerDirective", first: true, predicate: DropdownMenuHeaderDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: DropdownMenuFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerContentRef", first: true, predicate: ["headerContent"], descendants: true, isSignal: true }, { propertyName: "footerContentRef", first: true, predicate: ["footerContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n  @if (hasHeaderContent()) {\n    <div class=\"rte-dropdown-menu-header\">\n      @if (headerTemplate() || headerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #headerContent>\n          <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n        </div>\n      }\n      <rte-divider />\n    </div>\n  }\n  <div class=\"rte-dropdown-menu-content\">\n    <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n      @for (item of items(); track item.label; let i = $index) {\n        <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n      }\n    </ul>\n  </div>\n  @if (hasFooterContent()) {\n    <div class=\"rte-dropdown-menu-footer\">\n      <rte-divider />\n      @if (footerTemplate() || footerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #footerContent>\n          <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DropdownItemComponent, selector: "rte-dropdown-item", inputs: ["item", "menuId"], outputs: ["itemEvent"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu\">\n  <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n    @for (item of items(); track item.label; let i = $index) {\n      <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n    }\n  </ul>\n</div>\n", styles: [":host{opacity:0;display:none;position:absolute}.rte-dropdown-menu{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu.open{transition:opacity .15s ease-in-out}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"] }]
+            args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent, DividerComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu {{ isOpen() ? 'open' : 'closed' }}\" [ngStyle]=\"menuStyle()\">\n  @if (hasHeaderContent()) {\n    <div class=\"rte-dropdown-menu-header\">\n      @if (headerTemplate() || headerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(headerTemplate() || headerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #headerContent>\n          <ng-content select=\"[dropdown-menu-header]\"></ng-content>\n        </div>\n      }\n      <rte-divider />\n    </div>\n  }\n  <div class=\"rte-dropdown-menu-content\">\n    <ul class=\"rte-dropdown-items\" role=\"menu\" [attr.aria-activedescendant]=\"menuId()\">\n      @for (item of items(); track item.label; let i = $index) {\n        <rte-dropdown-item [item]=\"item\" (itemEvent)=\"handleItemEvent($event)\" />\n      }\n    </ul>\n  </div>\n  @if (hasFooterContent()) {\n    <div class=\"rte-dropdown-menu-footer\">\n      <rte-divider />\n      @if (footerTemplate() || footerDirective()?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"(footerTemplate() || footerDirective()?.templateRef) ?? null\"></ng-container>\n      } @else {\n        <div #footerContent>\n          <ng-content select=\"[dropdown-menu-footer]\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:none;position:absolute}.rte-dropdown-menu{opacity:0;box-shadow:0 8px 16px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-4) 0%,var(--elevation-surface-shadow-4) 100%);background-color:var(--background-default);position:absolute;top:0;left:0;display:flex;min-width:112px;max-width:280px;padding:8px 0;flex-direction:column;align-items:flex-start;gap:0px;border-radius:4px;transition:opacity .1s ease-in-out;pointer-events:auto;overflow-x:hidden;overflow-y:auto}.rte-dropdown-menu-header,.rte-dropdown-menu-content,.rte-dropdown-menu-footer{width:100%}.rte-dropdown-menu.open{opacity:1}.rte-dropdown-menu .rte-dropdown-items{width:100%;padding:0;margin:0}.rte-dropdown-menu .rte-dropdown-items li{list-style:none}\n"] }]
         }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
@@ -970,6 +1141,9 @@ class DropdownTriggerDirective {
         this.dropdownKeyDown = output();
         this.dropdownTriggered = output();
         this.dropdownTriggerFocus = output();
+        this.dropdownTriggerClearContent = output();
+        this.dropdownTriggerOpenDropdown = output();
+        this.dropdownTriggerCloseDropdown = output();
     }
     onDropdownTriggered(event) {
         this.dropdownTriggered.emit(event);
@@ -980,8 +1154,17 @@ class DropdownTriggerDirective {
     onKeyDown(event) {
         this.dropdownKeyDown.emit(event);
     }
+    onDropdownTriggerClearContent(event) {
+        this.dropdownTriggerClearContent.emit(event);
+    }
+    onDropdownTriggerOpenDropdown(event) {
+        this.dropdownTriggerOpenDropdown.emit(event);
+    }
+    onDropdownTriggerCloseDropdown(event) {
+        this.dropdownTriggerCloseDropdown.emit(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[rteDropdownTrigger]", inputs: { rteDropdownTriggerActivateWithArrowDown: { classPropertyName: "rteDropdownTriggerActivateWithArrowDown", publicName: "rteDropdownTriggerActivateWithArrowDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownKeyDown: "dropdownKeyDown", dropdownTriggered: "dropdownTriggered", dropdownTriggerFocus: "dropdownTriggerFocus" }, host: { listeners: { "click": "onDropdownTriggered($event)", "focus": "onDropdownTriggerFocus($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[rteDropdownTrigger]", inputs: { rteDropdownTriggerActivateWithArrowDown: { classPropertyName: "rteDropdownTriggerActivateWithArrowDown", publicName: "rteDropdownTriggerActivateWithArrowDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownKeyDown: "dropdownKeyDown", dropdownTriggered: "dropdownTriggered", dropdownTriggerFocus: "dropdownTriggerFocus", dropdownTriggerClearContent: "dropdownTriggerClearContent", dropdownTriggerOpenDropdown: "dropdownTriggerOpenDropdown", dropdownTriggerCloseDropdown: "dropdownTriggerCloseDropdown" }, host: { listeners: { "click": "onDropdownTriggered($event)", "focus": "onDropdownTriggerFocus($event)", "keydown": "onKeyDown($event)", "clearContent": "onDropdownTriggerClearContent($event)", "openDropdown": "onDropdownTriggerOpenDropdown($event)", "closeDropdown": "onDropdownTriggerCloseDropdown($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
             type: Directive,
@@ -998,6 +1181,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], onKeyDown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]
+            }], onDropdownTriggerClearContent: [{
+                type: HostListener,
+                args: ["clearContent", ["$event"]]
+            }], onDropdownTriggerOpenDropdown: [{
+                type: HostListener,
+                args: ["openDropdown", ["$event"]]
+            }], onDropdownTriggerCloseDropdown: [{
+                type: HostListener,
+                args: ["closeDropdown", ["$event"]]
             }] } });
 
 const focusNextElement = (dropdown) => {
@@ -1044,12 +1236,16 @@ class DropdownDirective {
     constructor() {
         this.trigger = contentChild(DropdownTriggerDirective);
         this.menu = contentChild(DropdownMenuComponent);
+        this.rteDropdownId = input(undefined);
         this.rteDropdownPosition = input("bottom");
         this.rteDropdownAlignment = input("start");
         this.rteDropdownIsOpen = input(false);
         this.rteDropdownOffset = input(0);
-        this.dropdownId = `dropdown_${++DropdownDirective.idCounter}`;
+        this.rteDropdownAutofocus = input(true);
+        this.rteDropdownAutoOpen = input(true);
+        this.rteDropdownWidth = input(null);
         this.menuEvent = output();
+        this.dropdownId = `dropdown_${++DropdownDirective.idCounter}`;
         this.overlayService = inject(OverlayService);
         this.dropdownService = inject(DropdownService);
         this.viewContainerRef = inject(ViewContainerRef);
@@ -1057,6 +1253,21 @@ class DropdownDirective {
         this.renderer = inject(Renderer2);
         this.destroyRef = inject(DestroyRef);
         this.cdr = inject(ChangeDetectorRef);
+        this.clickedOutside = output();
+        this.closedDropdown = output();
+        this.isActive = signal(false);
+        this.menuInputs = computed(() => {
+            const menu = this.menu();
+            if (!menu) {
+                return null;
+            }
+            return {
+                items: menu.items(),
+                headerTemplate: menu.headerDirective()?.templateRef,
+                footerTemplate: menu.footerDirective()?.templateRef,
+                width: menu.width(),
+            };
+        });
         this.dropdownMenuRef = null;
         this.handleClickOutside = (event) => {
             const target = event.target;
@@ -1065,27 +1276,55 @@ class DropdownDirective {
                 return;
             }
             const clickedInTrigger = this.hostElement.contains(target);
-            if (!clickedInTrigger) {
+            const clickedInMenu = this.dropdownMenuRef?.location.nativeElement.contains(target);
+            if (!clickedInTrigger && !clickedInMenu) {
                 this.closeDropdown();
+                this.clickedOutside.emit();
             }
         };
         this.hostElement = this.elementRef.nativeElement;
+        effect(() => {
+            const isOpen = this.rteDropdownIsOpen();
+            if (isOpen) {
+                if (!this.dropdownMenuRef) {
+                    this.showDropdownMenu();
+                    if (this.rteDropdownAutofocus()) {
+                        waitForNextFrame(() => focusDropdownFirstElement(this.dropdownId));
+                    }
+                }
+            }
+            else if (this.dropdownMenuRef) {
+                this.dropdownService.closeAllMenus();
+            }
+        });
+        effect(() => {
+            const inputs = this.menuInputs();
+            if (this.dropdownMenuRef && inputs) {
+                this.assignInputs();
+            }
+        });
     }
     onTrigger() {
-        this.showDropdownMenu();
+        if (this.rteDropdownAutoOpen()) {
+            this.showDropdownMenu();
+        }
+        if (this.rteDropdownAutofocus()) {
+            waitForNextFrame(() => focusDropdownFirstElement(this.dropdownId));
+        }
     }
     onTriggerKeyEvent(event) {
         if (event.key === SPACE_KEY ||
             event.key === ENTER_KEY ||
             (event.key === ARROW_DOWN_KEY && this.trigger()?.rteDropdownTriggerActivateWithArrowDown())) {
             this.showDropdownMenu();
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => focusDropdownFirstElement(this.dropdownId));
-            });
+            if (this.rteDropdownAutofocus()) {
+                waitForNextFrame(() => focusDropdownFirstElement(this.dropdownId));
+            }
         }
     }
     onMenuEvent(event) {
         this.menuEvent.emit(event);
+        this.isActive.set(false);
         this.dropdownService.closeAllMenus();
     }
     ngAfterContentInit() {
@@ -1096,6 +1335,15 @@ class DropdownDirective {
             this.trigger()?.dropdownKeyDown.subscribe((event) => {
                 this.onTriggerKeyEvent(event);
             });
+            this.trigger()?.dropdownTriggerClearContent.subscribe(() => {
+                this.closeDropdown();
+            });
+            this.trigger()?.dropdownTriggerOpenDropdown.subscribe(() => {
+                this.showDropdownMenu();
+            });
+            this.trigger()?.dropdownTriggerCloseDropdown.subscribe(() => {
+                this.closeDropdown();
+            });
         }
     }
     showDropdownMenu() {
@@ -1103,10 +1351,10 @@ class DropdownDirective {
             this.dropdownMenuRef.destroy();
         }
         this.dropdownMenuRef = this.overlayService.create(DropdownMenuComponent, this.viewContainerRef);
-        const menuId = this.dropdownId;
+        const menuId = this.rteDropdownId() || this.dropdownId;
         this.dropdownMenuRef.setInput("menuId", menuId);
         this.dropdownService.openMenu(menuId);
-        this.assignItems();
+        this.assignInputs();
         this.positionDropdownMenu(this.rteDropdownPosition());
         this.addClickOutsideListener();
         this.dropdownMenuRef.instance.itemEvent.subscribe((event) => {
@@ -1124,9 +1372,26 @@ class DropdownDirective {
         });
         this.destroyRef.onDestroy(() => dropdownStateSubscription.unsubscribe());
     }
-    assignItems() {
+    assignInputs() {
         if (this.dropdownMenuRef) {
-            this.dropdownMenuRef.setInput("items", this.menu()?.items());
+            const items = this.menu()?.items() ?? [];
+            this.dropdownMenuRef.setInput("items", items);
+            this.dropdownMenuRef.setInput("headerTemplate", this.menu()?.headerDirective()?.templateRef);
+            this.dropdownMenuRef.setInput("footerTemplate", this.menu()?.footerDirective()?.templateRef);
+        }
+        this.assignWidth();
+    }
+    assignWidth() {
+        if (!this.dropdownMenuRef) {
+            return;
+        }
+        const width = this.menuInputs()?.width ?? this.rteDropdownWidth();
+        if (width !== undefined && width !== null) {
+            this.dropdownMenuRef.setInput("width", width);
+            waitForNextFrame(() => this.dropdownMenuRef?.setInput("isOpen", true));
+        }
+        else {
+            this.dropdownMenuRef.setInput("isOpen", true);
         }
     }
     positionDropdownMenu(position = "bottom") {
@@ -1158,10 +1423,14 @@ class DropdownDirective {
         document.removeEventListener("mousedown", this.handleClickOutside);
     }
     closeDropdown() {
-        this.dropdownService.closeAllMenus();
+        this.dropdownMenuRef?.setInput("isOpen", false);
+        this.isActive.set(false);
+        setTimeout(() => {
+            this.dropdownService.closeAllMenus();
+        }, DROPDOWN_ANIMATION_DURATION);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DropdownDirective, isStandalone: true, selector: "[rteDropdown]", inputs: { rteDropdownPosition: { classPropertyName: "rteDropdownPosition", publicName: "rteDropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAlignment: { classPropertyName: "rteDropdownAlignment", publicName: "rteDropdownAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownIsOpen: { classPropertyName: "rteDropdownIsOpen", publicName: "rteDropdownIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownOffset: { classPropertyName: "rteDropdownOffset", publicName: "rteDropdownOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuEvent: "menuEvent" }, host: { properties: { "class.dropdown": "true", "attr.data-dropdown-id": "dropdownId" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: DropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DropdownDirective, isStandalone: true, selector: "[rteDropdown]", inputs: { rteDropdownId: { classPropertyName: "rteDropdownId", publicName: "rteDropdownId", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownPosition: { classPropertyName: "rteDropdownPosition", publicName: "rteDropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAlignment: { classPropertyName: "rteDropdownAlignment", publicName: "rteDropdownAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownIsOpen: { classPropertyName: "rteDropdownIsOpen", publicName: "rteDropdownIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownOffset: { classPropertyName: "rteDropdownOffset", publicName: "rteDropdownOffset", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutofocus: { classPropertyName: "rteDropdownAutofocus", publicName: "rteDropdownAutofocus", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownAutoOpen: { classPropertyName: "rteDropdownAutoOpen", publicName: "rteDropdownAutoOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDropdownWidth: { classPropertyName: "rteDropdownWidth", publicName: "rteDropdownWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuEvent: "menuEvent", clickedOutside: "clickedOutside", closedDropdown: "closedDropdown" }, host: { properties: { "class.dropdown": "true", "attr.data-dropdown-id": "dropdownId" } }, queries: [{ propertyName: "trigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: DropdownMenuComponent, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, decorators: [{
             type: Directive,
@@ -1177,14 +1446,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class DropdownModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownDirective, DropdownTriggerDirective, DropdownMenuComponent, DropdownItemComponent], exports: [DropdownDirective, DropdownTriggerDirective, DropdownMenuComponent, DropdownItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownMenuComponent, DropdownItemComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownDirective,
+            DropdownTriggerDirective,
+            DropdownMenuComponent,
+            DropdownItemComponent,
+            DropdownMenuHeaderDirective,
+            DropdownMenuFooterDirective], exports: [DropdownDirective,
+            DropdownTriggerDirective,
+            DropdownMenuComponent,
+            DropdownItemComponent,
+            DropdownMenuHeaderDirective,
+            DropdownMenuFooterDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, imports: [DropdownMenuComponent,
+            DropdownItemComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [DropdownDirective, DropdownTriggerDirective, DropdownMenuComponent, DropdownItemComponent],
-                    exports: [DropdownDirective, DropdownTriggerDirective, DropdownMenuComponent, DropdownItemComponent],
+                    imports: [
+                        DropdownDirective,
+                        DropdownTriggerDirective,
+                        DropdownMenuComponent,
+                        DropdownItemComponent,
+                        DropdownMenuHeaderDirective,
+                        DropdownMenuFooterDirective,
+                    ],
+                    exports: [
+                        DropdownDirective,
+                        DropdownTriggerDirective,
+                        DropdownMenuComponent,
+                        DropdownItemComponent,
+                        DropdownMenuHeaderDirective,
+                        DropdownMenuFooterDirective,
+                    ],
                 }]
         }] });
 
@@ -1201,6 +1495,12 @@ class SplitButtonComponent {
         this.disabled = input(false);
         this.ariaLabelRight = input();
         this.options = input([]);
+        this.badgeType = input();
+        this.showBadge = input(false);
+        this.badgeContent = input();
+        this.badgeCount = input(undefined);
+        this.badgeIcon = input("notification");
+        this.badgeSize = input("m");
         this.splitButtonLeftIconSize = computed(() => splitButtonLeftIconSize[this.size()]);
         this.splitButtonRightIconSize = computed(() => splitButtonRightIconSize[this.size()]);
         this.isOpen = signal(false);
@@ -1210,6 +1510,12 @@ class SplitButtonComponent {
         this.internalAlignment = computed(() => {
             return this.position().split("-")[1];
         });
+        this.hasBadge = computed(() => shouldDisplayBadge({
+            showBadge: !!this.showBadge(),
+            badgeContent: this.badgeContent(),
+            badgeCount: this.badgeCount(),
+            badgeIcon: this.badgeIcon(),
+        }));
     }
     handleClickOutside(event) {
         const target = event.target;
@@ -1240,102 +1546,13 @@ class SplitButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n  [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{ label() }}\n    </p>\n  </button>\n\n  <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n  <div\n    rteDropdown\n    style=\"height: 100%\"\n    [rteDropdownPosition]=\"internalPosition()\"\n    [rteDropdownAlignment]=\"internalAlignment()\"\n    [attr.data-testid]=\"'Menu container'\"\n  >\n    <button\n      class=\"split-button-right size-{{ size() }}\"\n      rteDropdownTrigger\n      data-testid=\"Menu button\"\n      type=\"button\"\n      aria-haspopup=\"menu\"\n      [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n      [attr.data-expanded]=\"isOpen()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"ariaLabelRight()\"\n      [disabled]=\"disabled()\"\n      (click)=\"isOpen.set(true)\"\n      (keydown)=\"handleKeyDownOnRightButton($event)\"\n    >\n      <div class=\"split-button-right-icon-container\">\n        <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n      </div>\n    </button>\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset"], outputs: ["menuEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId"], outputs: ["itemEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n  [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{ label() }}\n    </p>\n  </button>\n\n  <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n  <div\n    rteDropdown\n    style=\"height: 100%\"\n    [rteDropdownPosition]=\"internalPosition()\"\n    [rteDropdownAlignment]=\"internalAlignment()\"\n    [attr.data-testid]=\"'Menu container'\"\n  >\n    @if (hasBadge()) {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteBadge\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteBadgeType]=\"badgeType()!\"\n        [rteBadgeContent]=\"badgeContent()!\"\n        [rteBadgeCount]=\"badgeCount()\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    } @else {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    }\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent, DropdownModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n  [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{ label() }}\n    </p>\n  </button>\n\n  <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n  <div\n    rteDropdown\n    style=\"height: 100%\"\n    [rteDropdownPosition]=\"internalPosition()\"\n    [rteDropdownAlignment]=\"internalAlignment()\"\n    [attr.data-testid]=\"'Menu container'\"\n  >\n    <button\n      class=\"split-button-right size-{{ size() }}\"\n      rteDropdownTrigger\n      data-testid=\"Menu button\"\n      type=\"button\"\n      aria-haspopup=\"menu\"\n      [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n      [attr.data-expanded]=\"isOpen()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"ariaLabelRight()\"\n      [disabled]=\"disabled()\"\n      (click)=\"isOpen.set(true)\"\n      (keydown)=\"handleKeyDownOnRightButton($event)\"\n    >\n      <div class=\"split-button-right-icon-container\">\n        <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n      </div>\n    </button>\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
-        }] });
-
-class BadgeComponent {
-    constructor() {
-        this.badgeType = input("brand");
-        this.badgeSize = input("m");
-        this.badgeContent = input("number");
-        this.count = input();
-        this.icon = input("notification");
-        this.simpleBadge = input(false);
-        this.isValidIconName = computed(() => isValidIconName(this.icon()));
-        this.showIcon = computed(() => getShowIcon({
-            size: this.badgeSize(),
-            content: this.badgeContent(),
-            iconSize: this.iconSize(),
-        }));
-        this.showText = computed(() => getShowText({
-            size: this.badgeSize(),
-            content: this.badgeContent(),
-            count: this.count(),
-        }));
-        this.displayCount = computed(() => getDisplayCount(this.count()));
-        this.countOverflow = computed(() => this.showText() && this.displayCount().length > 2);
-        this.iconSize = computed(() => getBadgeIconSize(this.badgeSize()));
-        this.showBadge = computed(() => getShowBadge({
-            size: this.badgeSize(),
-            content: this.badgeContent(),
-            count: this.count(),
-            iconSize: this.iconSize(),
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BadgeComponent, isStandalone: true, selector: "rte-badge", inputs: { badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, simpleBadge: { classPropertyName: "simpleBadge", publicName: "simpleBadge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3;right:-3}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "rte-badge", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"badge size-{{ badgeSize() }} type-{{ badgeType() }}\"\n  data-testid=\"badge\"\n  [attr.data-simple-badge]=\"simpleBadge()\"\n  [ngClass]=\"{ hidden: !showBadge(), 'count-overflow': countOverflow() }\"\n>\n  <rte-icon *ngIf=\"showIcon()\" class=\"badge-icon\" [name]=\"icon()\" [size]=\"iconSize()!\" />\n  <span *ngIf=\"showText()\" class=\"badge-text\">\n    {{ displayCount() }}\n  </span>\n</div>\n", styles: [".badge{position:absolute;border-radius:999px;display:flex;align-items:center;justify-content:center;transition:opacity .15s ease-in-out;box-sizing:border-box}.badge.hidden{opacity:0}.badge.type-brand{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.badge.type-neutral{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-neutral-regular-default);color:var(--content-secondary)}.badge.type-indicator{box-shadow:0 2px 4px 0 var(--elevation-shadow-key-brand),0 0 2px 0 var(--elevation-shadow-ambient-brand);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background-color:var(--background-danger-default);color:var(--content-primary-inverse)}.badge.size-xs{width:6px;height:6px;box-shadow:none;top:-3;right:-3}.badge.size-s{width:12px;height:12px;top:-6px;right:-6px}.badge.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;min-width:16px;width:fit-content;height:16px;top:-8px;right:-8px;padding:0 2px}.badge.size-m.count-overflow{padding:0 4px}.badge.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:16px;line-height:24px;letter-spacing:0px;min-width:24px;width:fit-content;height:24px;top:-12px;right:-12px;padding:0 4px}.badge.size-l.count-overflow{padding:0 6px}.badge[data-simple-badge=true]{position:static;box-shadow:none}.badge .badge-text{margin:0}\n"] }]
+            args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent, DropdownModule, BadgeDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"split-button-container size-{{ size() }} {{ appearance() }}\"\n  [ngClass]=\"{ 'compact-spacing': compactSpacing() }\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\"\n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon *ngIf=\"icon()\" [name]=\"icon()!\" [size]=\"splitButtonLeftIconSize()\" />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{ label() }}\n    </p>\n  </button>\n\n  <div class=\"split-button-divider\" [ngClass]=\"{ disabled: disabled() }\"></div>\n\n  <div\n    rteDropdown\n    style=\"height: 100%\"\n    [rteDropdownPosition]=\"internalPosition()\"\n    [rteDropdownAlignment]=\"internalAlignment()\"\n    [attr.data-testid]=\"'Menu container'\"\n  >\n    @if (hasBadge()) {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteBadge\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteBadgeType]=\"badgeType()!\"\n        [rteBadgeContent]=\"badgeContent()!\"\n        [rteBadgeCount]=\"badgeCount()\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    } @else {\n      <button\n        class=\"split-button-right size-{{ size() }}\"\n        rteDropdownTrigger\n        data-testid=\"Menu button\"\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        [rteDropdownTriggerActivateWithArrowDown]=\"true\"\n        [attr.data-expanded]=\"isOpen()\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-label]=\"ariaLabelRight()\"\n        [disabled]=\"disabled()\"\n        (click)=\"isOpen.set(true)\"\n        (keydown)=\"handleKeyDownOnRightButton($event)\"\n      >\n        <div class=\"split-button-right-icon-container\">\n          <rte-icon name=\"arrow-chevron-down\" [size]=\"splitButtonRightIconSize()\" />\n        </div>\n      </button>\n    }\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: [".split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container .split-button-left{display:flex;border:none;padding:4px 12px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left.size-s{padding:0 8px}.split-button-container .split-button-left.size-l{padding:8px 12px}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus-visible:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;height:100%;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right:active,.split-button-container .split-button-right[data-expanded=true]{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right:focus-visible{outline:none;position:relative;z-index:1}.split-button-container .split-button-right:focus-visible:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-dropdown{position:absolute}.split-button-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
         }] });
 
-class BadgeDirective {
-    constructor() {
-        this.rteBadgeType = input("brand");
-        this.rteBadgeSize = input("m");
-        this.rteBadgeContent = input("number");
-        this.rteBadgeCount = input();
-        this.rteBadgeIcon = input("settings");
-        this.badgeComponentRef = null;
-        this.viewContainer = inject(ViewContainerRef);
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.hostElement = this.elementRef.nativeElement;
-    }
-    ngOnInit() {
-        this.badgeComponentRef = this.viewContainer.createComponent(BadgeComponent);
-        this.assignDirectiveToComponent();
-        this.appendComponentToHost();
-        this.renderer.setStyle(this.hostElement, "position", "relative");
-    }
-    ngOnChanges() {
-        this.assignDirectiveToComponent();
-    }
-    ngOnDestroy() {
-        if (this.badgeComponentRef) {
-            this.badgeComponentRef.destroy();
-        }
-    }
-    assignDirectiveToComponent() {
-        if (this.badgeComponentRef) {
-            this.badgeComponentRef.setInput("badgeType", this.rteBadgeType());
-            this.badgeComponentRef.setInput("badgeSize", this.rteBadgeSize());
-            this.badgeComponentRef.setInput("badgeContent", this.rteBadgeContent());
-            this.badgeComponentRef.setInput("count", this.rteBadgeCount());
-            this.badgeComponentRef.setInput("icon", this.rteBadgeIcon());
-        }
-    }
-    appendComponentToHost() {
-        if (this.badgeComponentRef) {
-            this.renderer.appendChild(this.elementRef.nativeElement, this.badgeComponentRef.location.nativeElement);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: BadgeDirective, isStandalone: true, selector: "[rteBadge]", inputs: { rteBadgeType: { classPropertyName: "rteBadgeType", publicName: "rteBadgeType", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeSize: { classPropertyName: "rteBadgeSize", publicName: "rteBadgeSize", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeContent: { classPropertyName: "rteBadgeContent", publicName: "rteBadgeContent", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeIcon: { classPropertyName: "rteBadgeIcon", publicName: "rteBadgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[rteBadge]",
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [] });
-
 class IconButtonComponent {
     constructor() {
         this.disabled = input(false);
@@ -1351,9 +1568,10 @@ class IconButtonComponent {
         this.badgeContent = input();
         this.badgeType = input();
         this.badgeIcon = input("settings");
+        this.customStyle = input();
         this.buttonIconSize = computed(() => ButtonIconSize[this.size()]);
         this.isValidIconName = computed(() => isValidIconName(this.name()));
-        this.click = output();
+        this.clickEvent = output();
         this.shouldDisplayBadge = computed(() => {
             const count = this.badgeCount();
             const content = this.badgeContent();
@@ -1361,15 +1579,14 @@ class IconButtonComponent {
         });
     }
     onClick(event) {
-        event.stopPropagation();
-        this.click.emit(event);
+        this.clickEvent.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IconButtonComponent, isStandalone: true, selector: "rte-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@if (shouldDisplayBadge()) {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    rteBadge\n    [class.compact-spacing]=\"compactSpacing()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    [rteBadgeType]=\"badgeType()!\"\n    [rteBadgeSize]=\"size()\"\n    [rteBadgeContent]=\"size() === 's' ? 'empty' : badgeContent()!\"\n    [rteBadgeCount]=\"badgeCount()!\"\n    [rteBadgeIcon]=\"badgeIcon()!\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n} @else {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    [class.compact-spacing]=\"compactSpacing()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n}\n", styles: [".rte-icon-button{display:flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-pressed)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: IconButtonComponent, isStandalone: true, selector: "rte-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "@if (shouldDisplayBadge()) {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    rteBadge\n    [class.compact-spacing]=\"compactSpacing()\"\n    [ngStyle]=\"customStyle()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    [rteBadgeType]=\"badgeType()!\"\n    [rteBadgeSize]=\"size()\"\n    [rteBadgeContent]=\"size() === 's' ? 'empty' : badgeContent()!\"\n    [rteBadgeCount]=\"badgeCount()!\"\n    [rteBadgeIcon]=\"badgeIcon()!\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n} @else {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    [class.compact-spacing]=\"compactSpacing()\"\n    [ngStyle]=\"customStyle()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n}\n", styles: [".rte-icon-button{display:flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.primary:disabled ::ng-deep .rte-icon-container{color:var(--content-disabled)}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-pressed)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger:disabled ::ng-deep .rte-icon-container{color:var(--content-disabled)}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "directive", type: BadgeDirective, selector: "[rteBadge]", inputs: ["rteBadgeType", "rteBadgeSize", "rteBadgeContent", "rteBadgeCount", "rteBadgeIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent, BadgeDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (shouldDisplayBadge()) {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    rteBadge\n    [class.compact-spacing]=\"compactSpacing()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    [rteBadgeType]=\"badgeType()!\"\n    [rteBadgeSize]=\"size()\"\n    [rteBadgeContent]=\"size() === 's' ? 'empty' : badgeContent()!\"\n    [rteBadgeCount]=\"badgeCount()!\"\n    [rteBadgeIcon]=\"badgeIcon()!\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n} @else {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    [class.compact-spacing]=\"compactSpacing()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n}\n", styles: [".rte-icon-button{display:flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-pressed)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"] }]
+            args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent, BadgeDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (shouldDisplayBadge()) {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    rteBadge\n    [class.compact-spacing]=\"compactSpacing()\"\n    [ngStyle]=\"customStyle()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    [rteBadgeType]=\"badgeType()!\"\n    [rteBadgeSize]=\"size()\"\n    [rteBadgeContent]=\"size() === 's' ? 'empty' : badgeContent()!\"\n    [rteBadgeCount]=\"badgeCount()!\"\n    [rteBadgeIcon]=\"badgeIcon()!\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n} @else {\n  <button\n    *ngIf=\"isValidIconName\"\n    class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n    [class.compact-spacing]=\"compactSpacing()\"\n    [ngStyle]=\"customStyle()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [type]=\"type()\"\n    (click)=\"onClick($event)\"\n  >\n    <rte-icon [name]=\"name()\" [appearance]=\"appearance()\" [size]=\"buttonIconSize()\" />\n  </button>\n}\n", styles: [".rte-icon-button{display:flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default)}.rte-icon-button.primary ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.primary:disabled ::ng-deep .rte-icon-container{color:var(--content-disabled)}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-pressed)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none}.rte-icon-button.danger ::ng-deep .rte-icon-container{color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger:disabled ::ng-deep .rte-icon-container{color:var(--content-disabled)}.rte-icon-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-icon-button.neutral:hover{color:var(--content-secondary)}.rte-icon-button.neutral:active{color:var(--content-tertiary)}.rte-icon-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-icon-button.reverse:hover{color:var(--background-hover)}.rte-icon-button.reverse:active{color:var(--content-primary-inverse)}.rte-icon-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"] }]
         }] });
 
 class IconButtonToggleComponent {
@@ -1403,18 +1620,19 @@ class IconButtonToggleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button\n  [size]=\"size()\"\n  [name]=\"name()\"\n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n  (click)=\"onClick($event)\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, defaultSelected: { classPropertyName: "defaultSelected", publicName: "defaultSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button\n  [size]=\"size()\"\n  [name]=\"name()\"\n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n  (clickEvent)=\"onClick($event)\"\n/>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button\n  [size]=\"size()\"\n  [name]=\"name()\"\n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n  (click)=\"onClick($event)\"\n/>\n" }]
+            args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button\n  [size]=\"size()\"\n  [name]=\"name()\"\n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"isSelected() ? 'filled' : 'outlined'\"\n  (clickEvent)=\"onClick($event)\"\n/>\n" }]
         }] });
 
-class TextInputComponent {
+class BaseTextInputComponent {
     constructor() {
         this.id = input();
         this.label = input("");
         this.labelPosition = input("top");
+        this.placeholder = input("");
         this.required = input(false);
         this.showCounter = input(false);
         this.value = input("");
@@ -1434,6 +1652,10 @@ class TextInputComponent {
         this.ariaLabel = input("");
         this.ariaRequired = input(false);
         this.ariaLabelledby = input("");
+        this.compactSpacing = input(false);
+        this.customStyle = input();
+        this.autocomplete = input("");
+        this.highlighted = input(false);
         this.valueChange = output();
         this.rightIconClick = output();
         this.characterCount = signal(this.internalValue().length);
@@ -1444,10 +1666,7 @@ class TextInputComponent {
             if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
                 return this.isHiddenInput() ? "visibility-show" : "visibility-hide";
             }
-            else if (this.rightIconAction() === "clean") {
-                return "close";
-            }
-            return "";
+            return "cancel";
         });
         this.rightIconAriaLabel = computed(() => {
             if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
@@ -1478,12 +1697,12 @@ class TextInputComponent {
     }
     handleChange(event) {
         const input = event.target;
-        this.internalValue.set(input.value);
-        this.valueChange.emit(input.value);
+        const newValue = input.value;
+        this.internalValue.set(newValue);
         if (this.maxLength()) {
-            this.characterCount.set(input.value.length);
+            this.characterCount.set(newValue.length);
         }
-        this.valueChange.emit(input.value);
+        this.valueChange.emit(newValue);
     }
     onRightIconClickHandler() {
         this.rightIconClick.emit();
@@ -1502,14 +1721,23 @@ class TextInputComponent {
             this.toggleInputVisibility();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div class=\"container {{ labelPosition() }}\" [ngClass]=\"{ error: error() }\" [style.width]=\"width()\">\n  <ng-container *ngIf=\"label()\">\n    <div class=\"text\">\n      <div class=\"label-container\">\n        <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n          {{ label() }}\n        </label>\n        <ng-container *ngIf=\"required()\">\n          <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n            <span class=\"required-text\">(obligatoire)</span>\n          </ng-container>\n          <ng-template #requiredIcon>\n            <span class=\"required-icon-container\">\n              <rte-icon name=\"asterisk\" [size]=\"8\" />\n            </span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n          <span class=\"required-text\">(optionnel)</span>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n        <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div class=\"input {{ labelPosition() }}\" [ngClass]=\"{ disabled: disabled(), 'read-only': readOnly() }\">\n      <div\n        class=\"input-bar\"\n        [ngClass]=\"{ 'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction() }\"\n      >\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon appearance=\"outlined\" class=\"left-icon\" aria-hidden=\"true\" [name]=\"displayedLeftIcon()!\" />\n        </ng-container>\n\n        <input\n          #inputRef\n          class=\"input-field\"\n          [id]=\"id()\"\n          [ngClass]=\"{ error: error() }\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-labelledby]=\"ariaLabelledby()\"\n          [attr.aria-required]=\"ariaRequired()\"\n          [type]=\"isHiddenInput() ? 'password' : 'text'\"\n          [maxLength]=\"maxLength()\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readOnly()\"\n          [value]=\"internalValue()\"\n          (input)=\"handleChange($event)\"\n        />\n\n        <ng-container *ngIf=\"shouldShowRightIcon()\">\n          <rte-icon-button\n            appearance=\"outlined\"\n            variant=\"transparent\"\n            class=\"right-icon\"\n            data-testid=\"right-icon\"\n            [name]=\"rightIconName() || 'close'\"\n            [ariaLabel]=\"rightIconAriaLabel()\"\n            (click)=\"onRightIconClickHandler()\"\n          />\n        </ng-container>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"assistiveTextLabel()\">\n      <div class=\"assistive-text\">\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n          <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n          <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n          <rte-link [label]=\"assistiveTextLabel()\" />\n        </ng-container>\n        <ng-template #assistiveLabel>\n          <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n            {{ assistiveTextLabel() }}\n          </p>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n    <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n  </ng-container>\n</div>\n", styles: [".container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger-default)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger-default);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BaseTextInputComponent, isStandalone: true, selector: "rte-base-text-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div\n  class=\"container {{ labelPosition() }}\"\n  [ngClass]=\"{ error: error(), 'compact-spacing': compactSpacing() }\"\n  [style.width]=\"width()\"\n>\n  <ng-container *ngIf=\"label()\">\n    <div class=\"text\">\n      <div class=\"label-container\">\n        <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n          {{ label() }}\n        </label>\n        <ng-container *ngIf=\"required()\">\n          <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n            <span class=\"required-text\">(obligatoire)</span>\n          </ng-container>\n          <ng-template #requiredIcon>\n            <span class=\"required-icon-container\">\n              <rte-icon name=\"asterisk\" [size]=\"8\" />\n            </span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n          <span class=\"required-text\">(optionnel)</span>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n        <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div class=\"input {{ labelPosition() }}\" [ngClass]=\"{ disabled: disabled(), 'read-only': readOnly() }\">\n      <div\n        class=\"input-bar\"\n        [ngClass]=\"{ 'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction() }\"\n      >\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon appearance=\"outlined\" class=\"left-icon\" aria-hidden=\"true\" [name]=\"displayedLeftIcon()!\" />\n        </ng-container>\n\n        <input\n          #inputRef\n          class=\"input-field\"\n          [id]=\"id()\"\n          [ngClass]=\"{ error: error(), highlighted: highlighted() }\"\n          [ngStyle]=\"customStyle()\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-labelledby]=\"ariaLabelledby()\"\n          [attr.aria-required]=\"ariaRequired()\"\n          [type]=\"isHiddenInput() ? 'password' : 'text'\"\n          [maxLength]=\"maxLength()\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readOnly()\"\n          [value]=\"internalValue()\"\n          [placeholder]=\"placeholder()\"\n          [attr.autocomplete]=\"autocomplete()\"\n          (input)=\"handleChange($event)\"\n        />\n\n        <ng-container *ngIf=\"shouldShowRightIcon()\">\n          <rte-icon-button\n            appearance=\"outlined\"\n            variant=\"neutral\"\n            size=\"s\"\n            class=\"right-icon\"\n            data-testid=\"right-icon\"\n            [compactSpacing]=\"true\"\n            [name]=\"rightIconName()\"\n            [ariaLabel]=\"rightIconAriaLabel()\"\n            (clickEvent)=\"onRightIconClickHandler()\"\n          />\n        </ng-container>\n      </div>\n      <div class=\"right-slot\">\n        <ng-content select=\"[baseTextInputRightSlot]\"></ng-content>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"assistiveTextLabel()\">\n      <div class=\"assistive-text\">\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n          <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n          <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n          <rte-link [label]=\"assistiveTextLabel()\" />\n        </ng-container>\n        <ng-template #assistiveLabel>\n          <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n            {{ assistiveTextLabel() }}\n          </p>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n    <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n  </ng-container>\n</div>\n", styles: [".container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.compact-spacing .input-container,.container.compact-spacing .input-container .input .input-bar .input-field{height:24px;min-height:24px}.container.compact-spacing .rte-icon-button ::ng-deep button{height:24px;width:24px;padding:0 2px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger-default)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger-default);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input{display:flex;align-items:center;gap:0;width:100%;height:100%}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center;flex:1}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon:focus{outline:none}.container .input-container .input .input-bar .right-icon:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus,.container .input-container .input .input-bar .input-field.highlighted{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed;box-shadow:none}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .input .input-bar .input-field::placeholder{color:var(--content-tertiary)}.container .input-container .input .right-slot{display:flex;align-items:center;flex-shrink:0;position:relative}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseTextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container {{ labelPosition() }}\" [ngClass]=\"{ error: error() }\" [style.width]=\"width()\">\n  <ng-container *ngIf=\"label()\">\n    <div class=\"text\">\n      <div class=\"label-container\">\n        <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n          {{ label() }}\n        </label>\n        <ng-container *ngIf=\"required()\">\n          <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n            <span class=\"required-text\">(obligatoire)</span>\n          </ng-container>\n          <ng-template #requiredIcon>\n            <span class=\"required-icon-container\">\n              <rte-icon name=\"asterisk\" [size]=\"8\" />\n            </span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n          <span class=\"required-text\">(optionnel)</span>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n        <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div class=\"input {{ labelPosition() }}\" [ngClass]=\"{ disabled: disabled(), 'read-only': readOnly() }\">\n      <div\n        class=\"input-bar\"\n        [ngClass]=\"{ 'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction() }\"\n      >\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon appearance=\"outlined\" class=\"left-icon\" aria-hidden=\"true\" [name]=\"displayedLeftIcon()!\" />\n        </ng-container>\n\n        <input\n          #inputRef\n          class=\"input-field\"\n          [id]=\"id()\"\n          [ngClass]=\"{ error: error() }\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-labelledby]=\"ariaLabelledby()\"\n          [attr.aria-required]=\"ariaRequired()\"\n          [type]=\"isHiddenInput() ? 'password' : 'text'\"\n          [maxLength]=\"maxLength()\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readOnly()\"\n          [value]=\"internalValue()\"\n          (input)=\"handleChange($event)\"\n        />\n\n        <ng-container *ngIf=\"shouldShowRightIcon()\">\n          <rte-icon-button\n            appearance=\"outlined\"\n            variant=\"transparent\"\n            class=\"right-icon\"\n            data-testid=\"right-icon\"\n            [name]=\"rightIconName() || 'close'\"\n            [ariaLabel]=\"rightIconAriaLabel()\"\n            (click)=\"onRightIconClickHandler()\"\n          />\n        </ng-container>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"assistiveTextLabel()\">\n      <div class=\"assistive-text\">\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n          <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n          <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n          <rte-link [label]=\"assistiveTextLabel()\" />\n        </ng-container>\n        <ng-template #assistiveLabel>\n          <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n            {{ assistiveTextLabel() }}\n          </p>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n    <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n  </ng-container>\n</div>\n", styles: [".container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger-default)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger-default);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"] }]
+            args: [{ selector: "rte-base-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container {{ labelPosition() }}\"\n  [ngClass]=\"{ error: error(), 'compact-spacing': compactSpacing() }\"\n  [style.width]=\"width()\"\n>\n  <ng-container *ngIf=\"label()\">\n    <div class=\"text\">\n      <div class=\"label-container\">\n        <label class=\"input-label\" [id]=\"'input-label-' + id\" [for]=\"id()\">\n          {{ label() }}\n        </label>\n        <ng-container *ngIf=\"required()\">\n          <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n            <span class=\"required-text\">(obligatoire)</span>\n          </ng-container>\n          <ng-template #requiredIcon>\n            <span class=\"required-icon-container\">\n              <rte-icon name=\"asterisk\" [size]=\"8\" />\n            </span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n          <span class=\"required-text\">(optionnel)</span>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n        <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div class=\"input {{ labelPosition() }}\" [ngClass]=\"{ disabled: disabled(), 'read-only': readOnly() }\">\n      <div\n        class=\"input-bar\"\n        [ngClass]=\"{ 'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction() }\"\n      >\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon appearance=\"outlined\" class=\"left-icon\" aria-hidden=\"true\" [name]=\"displayedLeftIcon()!\" />\n        </ng-container>\n\n        <input\n          #inputRef\n          class=\"input-field\"\n          [id]=\"id()\"\n          [ngClass]=\"{ error: error(), highlighted: highlighted() }\"\n          [ngStyle]=\"customStyle()\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-labelledby]=\"ariaLabelledby()\"\n          [attr.aria-required]=\"ariaRequired()\"\n          [type]=\"isHiddenInput() ? 'password' : 'text'\"\n          [maxLength]=\"maxLength()\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readOnly()\"\n          [value]=\"internalValue()\"\n          [placeholder]=\"placeholder()\"\n          [attr.autocomplete]=\"autocomplete()\"\n          (input)=\"handleChange($event)\"\n        />\n\n        <ng-container *ngIf=\"shouldShowRightIcon()\">\n          <rte-icon-button\n            appearance=\"outlined\"\n            variant=\"neutral\"\n            size=\"s\"\n            class=\"right-icon\"\n            data-testid=\"right-icon\"\n            [compactSpacing]=\"true\"\n            [name]=\"rightIconName()\"\n            [ariaLabel]=\"rightIconAriaLabel()\"\n            (clickEvent)=\"onRightIconClickHandler()\"\n          />\n        </ng-container>\n      </div>\n      <div class=\"right-slot\">\n        <ng-content select=\"[baseTextInputRightSlot]\"></ng-content>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"assistiveTextLabel()\">\n      <div class=\"assistive-text\">\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n          <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n          <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n          <rte-link [label]=\"assistiveTextLabel()\" />\n        </ng-container>\n        <ng-template #assistiveLabel>\n          <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n            {{ assistiveTextLabel() }}\n          </p>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n    <p class=\"input-counter\" data-testid=\"input-counter\">{{ characterCount() }}/{{ maxLength() }}</p>\n  </ng-container>\n</div>\n", styles: [".container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.compact-spacing .input-container,.container.compact-spacing .input-container .input .input-bar .input-field{height:24px;min-height:24px}.container.compact-spacing .rte-icon-button ::ng-deep button{height:24px;width:24px;padding:0 2px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger-default)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger-default);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input{display:flex;align-items:center;gap:0;width:100%;height:100%}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center;flex:1}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon:focus{outline:none}.container .input-container .input .input-bar .right-icon:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus,.container .input-container .input .input-bar .input-field.highlighted{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed;box-shadow:none}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .input .input-bar .input-field::placeholder{color:var(--content-tertiary)}.container .input-container .input .right-slot{display:flex;align-items:center;flex-shrink:0;position:relative}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"] }]
         }], ctorParameters: () => [] });
 
+class TextInputComponent extends BaseTextInputComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", usesInheritance: true, ngImport: i0, template: "<rte-base-text-input\n  [id]=\"id()\"\n  [label]=\"label()\"\n  [labelPosition]=\"labelPosition()\"\n  [required]=\"required()\"\n  [showCounter]=\"showCounter()\"\n  [value]=\"value()\"\n  [leftIcon]=\"leftIcon()\"\n  [showRightIcon]=\"showRightIcon()\"\n  [rightIconAction]=\"rightIconAction()\"\n  [showLabelRequirement]=\"showLabelRequirement()\"\n  [assistiveAppearance]=\"assistiveAppearance()\"\n  [showAssistiveIcon]=\"showAssistiveIcon()\"\n  [assistiveTextLabel]=\"assistiveTextLabel()\"\n  [error]=\"error()\"\n  [maxLength]=\"maxLength()\"\n  [disabled]=\"disabled()\"\n  [readOnly]=\"readOnly()\"\n  [width]=\"width()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaRequired]=\"ariaRequired()\"\n  [ariaLabelledby]=\"ariaLabelledby()\"\n  [customStyle]=\"customStyle()\"\n  [autocomplete]=\"autocomplete()\"\n  (valueChange)=\"valueChange.emit($event)\"\n  (rightIconClick)=\"rightIconClick.emit()\"\n/>\n", dependencies: [{ kind: "component", type: BaseTextInputComponent, selector: "rte-base-text-input", inputs: ["id", "label", "labelPosition", "placeholder", "required", "showCounter", "value", "leftIcon", "showRightIcon", "rightIconAction", "showLabelRequirement", "assistiveAppearance", "showAssistiveIcon", "assistiveTextLabel", "error", "maxLength", "disabled", "readOnly", "width", "ariaLabel", "ariaRequired", "ariaLabelledby", "compactSpacing", "customStyle", "autocomplete", "highlighted"], outputs: ["valueChange", "rightIconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-text-input", imports: [BaseTextInputComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-base-text-input\n  [id]=\"id()\"\n  [label]=\"label()\"\n  [labelPosition]=\"labelPosition()\"\n  [required]=\"required()\"\n  [showCounter]=\"showCounter()\"\n  [value]=\"value()\"\n  [leftIcon]=\"leftIcon()\"\n  [showRightIcon]=\"showRightIcon()\"\n  [rightIconAction]=\"rightIconAction()\"\n  [showLabelRequirement]=\"showLabelRequirement()\"\n  [assistiveAppearance]=\"assistiveAppearance()\"\n  [showAssistiveIcon]=\"showAssistiveIcon()\"\n  [assistiveTextLabel]=\"assistiveTextLabel()\"\n  [error]=\"error()\"\n  [maxLength]=\"maxLength()\"\n  [disabled]=\"disabled()\"\n  [readOnly]=\"readOnly()\"\n  [width]=\"width()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaRequired]=\"ariaRequired()\"\n  [ariaLabelledby]=\"ariaLabelledby()\"\n  [customStyle]=\"customStyle()\"\n  [autocomplete]=\"autocomplete()\"\n  (valueChange)=\"valueChange.emit($event)\"\n  (rightIconClick)=\"rightIconClick.emit()\"\n/>\n" }]
+        }] });
+
 class ChipComponent {
     constructor() {
         this.id = input();
@@ -1591,9 +1819,9 @@ class TextareaComponent {
         this.assistiveTextIconSize = TEXTAREA_ICON_SIZE;
         this.requirementIndicatorValue = computed(() => this.required()
             ? this.showLabelRequirement()
-                ? TEXTAREA_REQUIREMENT_INDICATOR_VALUE.required
-                : TEXTAREA_REQUIREMENT_INDICATOR_VALUE.requiredIcon
-            : TEXTAREA_REQUIREMENT_INDICATOR_VALUE.optional);
+                ? REQUIREMENT_INDICATOR_VALUE.required
+                : REQUIREMENT_INDICATOR_VALUE.requiredIcon
+            : REQUIREMENT_INDICATOR_VALUE.optional);
         this.change = output();
         this.blur = output();
         this.textareaRef = viewChild("textarea");
@@ -1723,6 +1951,14 @@ class SegmentedControlComponent {
             segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
         });
     }
+    shouldDisplayBadge(option) {
+        return shouldDisplayBadge({
+            showBadge: !!option.showBadge,
+            badgeContent: option.badgeContent,
+            badgeCount: option.badgeCount,
+            badgeIcon: option.badgeIcon,
+        });
+    }
     selectSegment(id) {
         this.change.emit(id);
     }
@@ -1787,11 +2023,11 @@ class SegmentedControlComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n  <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SegmentedControlComponent, isStandalone: true, selector: "rte-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedSegment: { classPropertyName: "selectedSegment", publicName: "selectedSegment", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "segmentRefs", predicate: ["segment"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n  <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n        <rte-badge\n          *ngIf=\"shouldDisplayBadge(option)\"\n          [count]=\"option.badgeCount\"\n          [badgeContent]=\"option.badgeContent!\"\n          [icon]=\"option.badgeIcon!\"\n          [badgeType]=\"option.badgeType!\"\n          [simpleBadge]=\"true\"\n          [badgeSize]=\"option.badgeSize!\"\n        ></rte-badge>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n  <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"] }]
+            args: [{ selector: "rte-segmented-control", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"isValidOptions()\" class=\"rte-segmented-control\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n  <span class=\"rte-segment-selected-indicator\" [ngStyle]=\"segmentSelectedIndicatorStyle()\"></span>\n  <ng-container *ngFor=\"let option of options(); let idx = index\">\n    <div class=\"rte-segment-container\" [attr.data-position]=\"getSegmentPosition(idx)\">\n      <div\n        #segment\n        role=\"radio\"\n        class=\"rte-segment\"\n        tabindex=\"0\"\n        [attr.data-id]=\"option.id\"\n        [attr.data-segment-type]=\"option.icon ? 'icon' : 'label'\"\n        [class.selected]=\"isSegmentSelected(option.id)\"\n        [attr.aria-checked]=\"isSegmentSelected(option.id)\"\n        [attr.aria-label]=\"option.label\"\n        (click)=\"selectSegment(option.id)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (keyup)=\"handleKeyUp($event)\"\n      >\n        <rte-icon *ngIf=\"isSegmentSelected(option.id)\" name=\"check-small\" class=\"rte-selected-icon\" [size]=\"24\" />\n        <div class=\"rte-segment-content\">\n          <ng-container *ngIf=\"option.icon; else label\">\n            <rte-icon\n              [name]=\"option.icon\"\n              [size]=\"24\"\n              [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined'\"\n            ></rte-icon>\n          </ng-container>\n          <ng-template #label>\n            <span class=\"rte-segment-label\">{{ option.label }}</span>\n          </ng-template>\n        </div>\n        <rte-badge\n          *ngIf=\"shouldDisplayBadge(option)\"\n          [count]=\"option.badgeCount\"\n          [badgeContent]=\"option.badgeContent!\"\n          [icon]=\"option.badgeIcon!\"\n          [badgeType]=\"option.badgeType!\"\n          [simpleBadge]=\"true\"\n          [badgeSize]=\"option.badgeSize!\"\n        ></rte-badge>\n      </div>\n    </div>\n  </ng-container>\n</div>\n", styles: [".rte-segmented-control{display:flex;min-width:168px;max-width:720px;height:48px}.rte-segmented-control[data-number-of-segments=\"3\"]{min-width:256px}.rte-segment-selected-indicator{position:absolute;top:4px;height:40px;background:var(--background-default);border-radius:999px;transition:left .2s ease-out,width .2s ease-out}.rte-segment-container{display:flex;border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);background:var(--background-brand-default);padding:4px 2px;align-items:center;flex:1 0 0;overflow:hidden}.rte-segment-container[data-position=left]{border-radius:999px 0 0 999px;border-left:1px solid var(--border-inverse);background:var(--background-brand-default);padding-left:4px}.rte-segment-container[data-position=right]{border-radius:0 999px 999px 0;border-right:1px solid var(--border-inverse);background:var(--background-brand-default);padding-right:4px}.rte-segment{display:flex;padding:6px 8px;align-items:center;border-radius:999px;color:var(--content-primary-inverse);flex:1 1 auto;overflow:hidden;width:100%;z-index:0}.rte-segment:focus-visible{outline:1px solid var(--border-inverse);outline-offset:-2px}.rte-segment.selected{transition:color .2s ease-out;color:var(--content-brand-default)}.rte-segment.selected:focus-visible{outline:1px solid var(--border-brand-focused)}.rte-segment:hover:not(.selected){background:var(--background-brand-hover);cursor:pointer}.rte-segment[data-segment-type=icon]{padding:8px}.rte-segment .rte-segment-content{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.rte-segment .rte-segment-content .rte-segment-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-segment .rte-selected-icon{min-width:24px;min-height:24px}\n"] }]
         }] });
 
 class BreadcrumbItemComponent {
@@ -1808,6 +2044,18 @@ class BreadcrumbItemComponent {
             }
             return false;
         });
+        this.shouldDisplayBadge = computed(() => {
+            const item = this.item();
+            if (!item)
+                return false;
+            const { showBadge, badgeContent, badgeCount, badgeIcon } = item;
+            return shouldDisplayBadge({
+                showBadge: !!showBadge,
+                badgeContent,
+                badgeCount,
+                badgeIcon,
+            });
+        });
         this.tooltipTriggerStyle = computed(() => {
             return `overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ${this.breadcrumbItemMaxWidth() ? "max-width:" + this.breadcrumbItemMaxWidth() + "px" : ""}`;
         });
@@ -1820,11 +2068,11 @@ class BreadcrumbItemComponent {
         this.initialScrollWidth.set(el.scrollWidth);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n  @if (isLast()) {\n    @if (isEllipsisActive()) {\n      <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n        <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n          {{ item()!.label }}\n        </a>\n      </div>\n    } @else {\n      <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n        {{ item()!.label }}\n      </a>\n    }\n  } @else {\n    @if (isEllipsisActive()) {\n      <div\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n        [style.overflow]=\"'unset'\"\n        [rteTooltipShouldFocusTrigger]=\"false\"\n      >\n        <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      </div>\n    } @else {\n      <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n    }\n  }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbItemComponent, isStandalone: true, selector: "rte-breadcrumb-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-breadcrumb-item\">\n  @if (isLast()) {\n    @if (isEllipsisActive()) {\n      <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n        <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n          {{ item()!.label }}\n        </a>\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n        {{ item()!.label }}\n      </a>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  } @else {\n    @if (isEllipsisActive()) {\n      <div\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n        [style.overflow]=\"'unset'\"\n        [rteTooltipShouldFocusTrigger]=\"false\"\n      >\n        <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;gap:4px;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rteTooltip]", inputs: ["rteTooltip", "rteTooltipPosition", "rteTooltipAlignment", "rteTooltipArrow", "rteTooltipShouldFocusTrigger", "rteTooltipGap"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-breadcrumb-item", imports: [CommonModule, LinkComponent, TooltipDirective], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-breadcrumb-item\">\n  @if (isLast()) {\n    @if (isEllipsisActive()) {\n      <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n        <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n          {{ item()!.label }}\n        </a>\n      </div>\n    } @else {\n      <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n        {{ item()!.label }}\n      </a>\n    }\n  } @else {\n    @if (isEllipsisActive()) {\n      <div\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n        [style.overflow]=\"'unset'\"\n        [rteTooltipShouldFocusTrigger]=\"false\"\n      >\n        <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      </div>\n    } @else {\n      <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n    }\n  }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"] }]
+            args: [{ selector: "rte-breadcrumb-item", imports: [CommonModule, LinkComponent, TooltipDirective, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-breadcrumb-item\">\n  @if (isLast()) {\n    @if (isEllipsisActive()) {\n      <div [rteTooltip]=\"item()!.label\" [rteTooltipPosition]=\"'bottom'\" [style]=\"tooltipTriggerStyle()\">\n        <a role=\"link\" aria-current=\"page\" tabindex=\"-1\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n          {{ item()!.label }}\n        </a>\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <a role=\"link\" aria-current=\"page\" tabindex=\"0\" [attr.aria-label]=\"item()!.label\" [style]=\"linkStyle()\">\n        {{ item()!.label }}\n      </a>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  } @else {\n    @if (isEllipsisActive()) {\n      <div\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n        [style.overflow]=\"'unset'\"\n        [rteTooltipShouldFocusTrigger]=\"false\"\n      >\n        <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      </div>\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    } @else {\n      <rte-link [href]=\"item()!.link\" [label]=\"item()!.label\" [subtle]=\"true\" [maxWidth]=\"breadcrumbItemMaxWidth()\" />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"item()!.badgeCount\"\n        [badgeContent]=\"item()!.badgeContent!\"\n        [icon]=\"item()!.badgeIcon!\"\n        [badgeType]=\"item()!.badgeType!\"\n        [simpleBadge]=\"true\"\n        [badgeSize]=\"item()!.badgeSize!\"\n      />\n    }\n  }\n</div>\n", styles: [".rte-breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;gap:4px;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.rte-breadcrumb-item rte-link ::ng-deep a,.rte-breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.rte-breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}@keyframes fadeIn{to{opacity:1}}\n"] }]
         }] });
 
 class BreadcrumbsComponent {
@@ -1832,19 +2080,33 @@ class BreadcrumbsComponent {
         this.items = input([]);
         this.ariaLabel = input(BREADCRUMBS_DEFAULT_ARIA_LABEL);
         this.breadcrumbItemMaxWidth = input(150);
+        this.badgeContent = input();
+        this.badgeCount = input();
+        this.badgeIcon = input();
+        this.badgeType = input();
+        this.showBadge = input(false);
+        this.badgeSize = input("s");
         this.truncatedItems = computed(() => {
             if (shouldTruncateBreadcrumbs(this.items())) {
                 return getBreadcrumbsTruncatedItems(this.items());
             }
             return null;
         });
+        this.shouldDisplayBadge = computed(() => {
+            return shouldDisplayBadge({
+                showBadge: !!this.showBadge(),
+                badgeContent: this.badgeContent(),
+                badgeCount: this.badgeCount(),
+                badgeIcon: this.badgeIcon(),
+            });
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbsComponent, isStandalone: true, selector: "rte-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        dropdownTrigger\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset"], outputs: ["menuEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId"], outputs: ["itemEvent"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BreadcrumbsComponent, isStandalone: true, selector: "rte-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbItemMaxWidth: { classPropertyName: "breadcrumbItemMaxWidth", publicName: "breadcrumbItemMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, badgeContent: { classPropertyName: "badgeContent", publicName: "badgeContent", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, badgeIcon: { classPropertyName: "badgeIcon", publicName: "badgeIcon", isSignal: true, isRequired: false, transformFunction: null }, badgeType: { classPropertyName: "badgeType", publicName: "badgeType", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"badgeCount()\"\n        [simpleBadge]=\"true\"\n        [badgeContent]=\"badgeContent()!\"\n        [icon]=\"badgeIcon()!\"\n        [badgeType]=\"badgeType()!\"\n        [badgeSize]=\"badgeSize()!\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: BreadcrumbItemComponent, selector: "rte-breadcrumb-item", inputs: ["item", "isLast", "breadcrumbItemMaxWidth"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, DropdownModule, IconButtonComponent, BreadcrumbItemComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        dropdownTrigger\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"] }]
+            args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, DropdownModule, IconButtonComponent, BreadcrumbItemComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"badgeCount()\"\n        [simpleBadge]=\"true\"\n        [badgeContent]=\"badgeContent()!\"\n        [icon]=\"badgeIcon()!\"\n        [badgeType]=\"badgeType()!\"\n        [badgeSize]=\"badgeSize()!\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"] }]
         }] });
 
 class BannerComponent {
@@ -1906,11 +2168,11 @@ class BannerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BannerComponent, isStandalone: true, selector: "rte-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  class=\"rte-banner\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n>\n  <div class=\"rte-banner-icon\">\n    <rte-icon [name]=\"iconName()\" [size]=\"32\" />\n  </div>\n  <div class=\"rte-banner-content\">\n    <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n    <div *ngIf=\"message()\" class=\"rte-banner-message\">\n      <span>{{ message() }}</span>\n    </div>\n  </div>\n  <button\n    *ngIf=\"actionLabel()\"\n    rteButton\n    rteButtonVariant=\"text\"\n    rteButtonSize=\"s\"\n    [attr.aria-label]=\"actionLabel()!\"\n    (click)=\"clickAction()\"\n  >\n    {{ actionLabel() }}\n  </button>\n  <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n    <rte-icon-button name=\"close\" variant=\"neutral\" ariaLabel=\"close banner\" (click)=\"closeBanner()\" />\n  </div>\n</section>\n", styles: [".rte-banner{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);padding:16px;gap:16px;align-self:stretch;border-radius:0 0 4px 4px;display:flex;box-sizing:border-box;width:100%;min-width:320px;justify-content:center;align-items:center;color:var(--content-info-default);top:0;left:0;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;border-bottom:8px solid var(--border-info);background-color:var(--background-default)}.rte-banner.error{color:var(--content-danger-default);border-bottom-color:var(--border-danger)}.rte-banner.success{color:var(--content-success-default);border-bottom-color:var(--border-success)}.rte-banner.warning{color:var(--content-primary);border-bottom-color:var(--border-warning)}.rte-banner.overlay{position:fixed}.rte-banner.open{opacity:1;transform:translateY(0)}.rte-banner.close{opacity:0;transform:translateY(-10px)}.rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner .rte-banner-content .rte-banner-action-button{width:max-content}.rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BannerComponent, isStandalone: true, selector: "rte-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  class=\"rte-banner\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n>\n  <div class=\"rte-banner-icon\">\n    <rte-icon [name]=\"iconName()\" [size]=\"32\" />\n  </div>\n  <div class=\"rte-banner-content\">\n    <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n    <div *ngIf=\"message()\" class=\"rte-banner-message\">\n      <span>{{ message() }}</span>\n    </div>\n  </div>\n  <button\n    *ngIf=\"actionLabel()\"\n    rteButton\n    rteButtonVariant=\"text\"\n    rteButtonSize=\"s\"\n    [attr.aria-label]=\"actionLabel()!\"\n    (click)=\"clickAction()\"\n  >\n    {{ actionLabel() }}\n  </button>\n  <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n    <rte-icon-button name=\"close\" variant=\"neutral\" ariaLabel=\"close banner\" (clickEvent)=\"closeBanner()\" />\n  </div>\n</section>\n", styles: [".rte-banner{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);padding:16px;gap:16px;align-self:stretch;border-radius:0 0 4px 4px;display:flex;box-sizing:border-box;width:100%;min-width:320px;justify-content:center;align-items:center;color:var(--content-info-default);top:0;left:0;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;border-bottom:8px solid var(--border-info);background-color:var(--background-default)}.rte-banner.error{color:var(--content-danger-default);border-bottom-color:var(--border-danger)}.rte-banner.success{color:var(--content-success-default);border-bottom-color:var(--border-success)}.rte-banner.warning{color:var(--content-primary);border-bottom-color:var(--border-warning)}.rte-banner.overlay{position:fixed}.rte-banner.open{opacity:1;transform:translateY(0)}.rte-banner.close{opacity:0;transform:translateY(-10px)}.rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner .rte-banner-content .rte-banner-action-button{width:max-content}.rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-banner", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  class=\"rte-banner\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n>\n  <div class=\"rte-banner-icon\">\n    <rte-icon [name]=\"iconName()\" [size]=\"32\" />\n  </div>\n  <div class=\"rte-banner-content\">\n    <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n    <div *ngIf=\"message()\" class=\"rte-banner-message\">\n      <span>{{ message() }}</span>\n    </div>\n  </div>\n  <button\n    *ngIf=\"actionLabel()\"\n    rteButton\n    rteButtonVariant=\"text\"\n    rteButtonSize=\"s\"\n    [attr.aria-label]=\"actionLabel()!\"\n    (click)=\"clickAction()\"\n  >\n    {{ actionLabel() }}\n  </button>\n  <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n    <rte-icon-button name=\"close\" variant=\"neutral\" ariaLabel=\"close banner\" (click)=\"closeBanner()\" />\n  </div>\n</section>\n", styles: [".rte-banner{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);padding:16px;gap:16px;align-self:stretch;border-radius:0 0 4px 4px;display:flex;box-sizing:border-box;width:100%;min-width:320px;justify-content:center;align-items:center;color:var(--content-info-default);top:0;left:0;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;border-bottom:8px solid var(--border-info);background-color:var(--background-default)}.rte-banner.error{color:var(--content-danger-default);border-bottom-color:var(--border-danger)}.rte-banner.success{color:var(--content-success-default);border-bottom-color:var(--border-success)}.rte-banner.warning{color:var(--content-primary);border-bottom-color:var(--border-warning)}.rte-banner.overlay{position:fixed}.rte-banner.open{opacity:1;transform:translateY(0)}.rte-banner.close{opacity:0;transform:translateY(-10px)}.rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner .rte-banner-content .rte-banner-action-button{width:max-content}.rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"] }]
+            args: [{ selector: "rte-banner", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  class=\"rte-banner\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n>\n  <div class=\"rte-banner-icon\">\n    <rte-icon [name]=\"iconName()\" [size]=\"32\" />\n  </div>\n  <div class=\"rte-banner-content\">\n    <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n    <div *ngIf=\"message()\" class=\"rte-banner-message\">\n      <span>{{ message() }}</span>\n    </div>\n  </div>\n  <button\n    *ngIf=\"actionLabel()\"\n    rteButton\n    rteButtonVariant=\"text\"\n    rteButtonSize=\"s\"\n    [attr.aria-label]=\"actionLabel()!\"\n    (click)=\"clickAction()\"\n  >\n    {{ actionLabel() }}\n  </button>\n  <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n    <rte-icon-button name=\"close\" variant=\"neutral\" ariaLabel=\"close banner\" (clickEvent)=\"closeBanner()\" />\n  </div>\n</section>\n", styles: [".rte-banner{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);padding:16px;gap:16px;align-self:stretch;border-radius:0 0 4px 4px;display:flex;box-sizing:border-box;width:100%;min-width:320px;justify-content:center;align-items:center;color:var(--content-info-default);top:0;left:0;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;border-bottom:8px solid var(--border-info);background-color:var(--background-default)}.rte-banner.error{color:var(--content-danger-default);border-bottom-color:var(--border-danger)}.rte-banner.success{color:var(--content-success-default);border-bottom-color:var(--border-success)}.rte-banner.warning{color:var(--content-primary);border-bottom-color:var(--border-warning)}.rte-banner.overlay{position:fixed}.rte-banner.open{opacity:1;transform:translateY(0)}.rte-banner.close{opacity:0;transform:translateY(-10px)}.rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner .rte-banner-content .rte-banner-action-button{width:max-content}.rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"] }]
         }] });
 
 class CardComponent {
@@ -2248,11 +2510,11 @@ class ModalComponent {
         this.closeModal.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: ModalComponent, isStandalone: true, selector: "rte-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAppearance: { classPropertyName: "iconAppearance", publicName: "iconAppearance", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, primaryButton: { classPropertyName: "primaryButton", publicName: "primaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButton: { classPropertyName: "secondaryButton", publicName: "secondaryButton", isSignal: true, isRequired: false, transformFunction: null }, customContent: { classPropertyName: "customContent", publicName: "customContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-modal-wrapper\">\n  <div class=\"rte-modal-backdrop\" [attr.data-open]=\"isOpen()\"></div>\n  <dialog\n    #modal\n    class=\"rte-modal-container\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"id() + '-modal-title'\"\n    [attr.aria-describedby]=\"description() ? id() + '-modal-desc' : ariaDescribedby()\"\n    [attr.data-size]=\"size()\"\n    [attr.data-open]=\"isOpen()\"\n  >\n    <div class=\"rte-modal-header\">\n      <div class=\"rte-modal-header-text\">\n        <rte-icon *ngIf=\"icon()\" [name]=\"icon() ?? ''\" [size]=\"iconSize()\" [appearance]=\"iconAppearance()\" />\n        <h2 class=\"rte-modal-title\" [id]=\"id() + '-modal-title'\">\n          {{ title() }}\n        </h2>\n        <rte-icon-button\n          data-testid=\"modal-close-button\"\n          name=\"close\"\n          size=\"l\"\n          class=\"close-icon\"\n          variant=\"neutral\"\n          [ariaLabel]=\"'Close modal ' + id()\"\n          (click)=\"onClose()\"\n        />\n      </div>\n      <rte-divider />\n    </div>\n    <div *ngIf=\"description()\" class=\"rte-modal-content\">\n      <p class=\"rte-modal-content-description\" [id]=\"id() + '-modal-desc'\">\n        {{ description() }}\n      </p>\n      <ng-container [ngTemplateOutlet]=\"customContent()\"></ng-container>\n    </div>\n    <div class=\"rte-modal-footer\">\n      <ng-container [ngTemplateOutlet]=\"secondaryButton()\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"primaryButton()\"></ng-container>\n    </div>\n  </dialog>\n</div>\n", styles: [".rte-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;background-color:#201f1f80;transition:opacity .15s ease-out}.rte-modal-backdrop[data-open=true]{opacity:1}.rte-modal-container{box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%);border:none;box-sizing:border-box;position:absolute;max-height:90vh;top:50%;transform:translateY(-50%) scale(.98);display:flex;width:496px;padding:24px;flex-direction:column;align-items:flex-start;gap:24px;background-color:var(--background-default);border-radius:8px;opacity:0;transition:opacity .15s ease-in,transform .15s ease-in}.rte-modal-container[data-open=true]{opacity:1;transform:translateY(-50%) scale(1)}.rte-modal-container[data-size=s]{width:656px}.rte-modal-container[data-size=m]{width:936px}.rte-modal-container[data-size=l]{width:1168px;border-radius:12px}.rte-modal-container[data-size=xl]{width:1328px;border-radius:16px}.rte-modal-container .rte-modal-header{display:flex;flex-direction:column;gap:8px;width:100%;flex:0 0 auto}.rte-modal-container .rte-modal-header .rte-modal-header-text{display:flex;flex-direction:row;align-items:center;gap:8px}.rte-modal-container .rte-modal-header .rte-modal-header-text .rte-modal-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px;margin:0;overflow:hidden;color:var(--content-primary);text-overflow:ellipsis;flex:1 1 0}.rte-modal-container .rte-modal-content{display:flex;padding:1px;flex-direction:column;align-items:flex-start;gap:16px;color:var(--content-secondary);width:100%;overflow:auto}.rte-modal-container .rte-modal-content .rte-modal-content-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;margin:0;color:var(--content-secondary)}.rte-modal-container .rte-modal-footer{display:flex;padding:0;justify-content:flex-end;align-items:center;gap:24px;align-self:stretch;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: ModalComponent, isStandalone: true, selector: "rte-modal", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAppearance: { classPropertyName: "iconAppearance", publicName: "iconAppearance", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, primaryButton: { classPropertyName: "primaryButton", publicName: "primaryButton", isSignal: true, isRequired: false, transformFunction: null }, secondaryButton: { classPropertyName: "secondaryButton", publicName: "secondaryButton", isSignal: true, isRequired: false, transformFunction: null }, customContent: { classPropertyName: "customContent", publicName: "customContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-modal-wrapper\">\n  <div class=\"rte-modal-backdrop\" [attr.data-open]=\"isOpen()\"></div>\n  <dialog\n    #modal\n    class=\"rte-modal-container\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"id() + '-modal-title'\"\n    [attr.aria-describedby]=\"description() ? id() + '-modal-desc' : ariaDescribedby()\"\n    [attr.data-size]=\"size()\"\n    [attr.data-open]=\"isOpen()\"\n  >\n    <div class=\"rte-modal-header\">\n      <div class=\"rte-modal-header-text\">\n        <rte-icon *ngIf=\"icon()\" [name]=\"icon() ?? ''\" [size]=\"iconSize()\" [appearance]=\"iconAppearance()\" />\n        <h2 class=\"rte-modal-title\" [id]=\"id() + '-modal-title'\">\n          {{ title() }}\n        </h2>\n        <rte-icon-button\n          data-testid=\"modal-close-button\"\n          name=\"close\"\n          size=\"l\"\n          class=\"close-icon\"\n          variant=\"neutral\"\n          [ariaLabel]=\"'Close modal ' + id()\"\n          (clickEvent)=\"onClose()\"\n        />\n      </div>\n      <rte-divider />\n    </div>\n    <div *ngIf=\"description()\" class=\"rte-modal-content\">\n      <p class=\"rte-modal-content-description\" [id]=\"id() + '-modal-desc'\">\n        {{ description() }}\n      </p>\n      <ng-container [ngTemplateOutlet]=\"customContent()\"></ng-container>\n    </div>\n    <div class=\"rte-modal-footer\">\n      <ng-container [ngTemplateOutlet]=\"secondaryButton()\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"primaryButton()\"></ng-container>\n    </div>\n  </dialog>\n</div>\n", styles: [".rte-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;background-color:#201f1f80;transition:opacity .15s ease-out}.rte-modal-backdrop[data-open=true]{opacity:1}.rte-modal-container{box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%);border:none;box-sizing:border-box;position:absolute;max-height:90vh;top:50%;transform:translateY(-50%) scale(.98);display:flex;width:496px;padding:24px;flex-direction:column;align-items:flex-start;gap:24px;background-color:var(--background-default);border-radius:8px;opacity:0;transition:opacity .15s ease-in,transform .15s ease-in}.rte-modal-container[data-open=true]{opacity:1;transform:translateY(-50%) scale(1)}.rte-modal-container[data-size=s]{width:656px}.rte-modal-container[data-size=m]{width:936px}.rte-modal-container[data-size=l]{width:1168px;border-radius:12px}.rte-modal-container[data-size=xl]{width:1328px;border-radius:16px}.rte-modal-container .rte-modal-header{display:flex;flex-direction:column;gap:8px;width:100%;flex:0 0 auto}.rte-modal-container .rte-modal-header .rte-modal-header-text{display:flex;flex-direction:row;align-items:center;gap:8px}.rte-modal-container .rte-modal-header .rte-modal-header-text .rte-modal-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px;margin:0;overflow:hidden;color:var(--content-primary);text-overflow:ellipsis;flex:1 1 0}.rte-modal-container .rte-modal-content{display:flex;padding:1px;flex-direction:column;align-items:flex-start;gap:16px;color:var(--content-secondary);width:100%;overflow:auto}.rte-modal-container .rte-modal-content .rte-modal-content-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;margin:0;color:var(--content-secondary)}.rte-modal-container .rte-modal-footer{display:flex;padding:0;justify-content:flex-end;align-items:center;gap:24px;align-self:stretch;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-modal", imports: [CommonModule, IconButtonComponent, IconComponent, DividerComponent], standalone: true, template: "<div class=\"rte-modal-wrapper\">\n  <div class=\"rte-modal-backdrop\" [attr.data-open]=\"isOpen()\"></div>\n  <dialog\n    #modal\n    class=\"rte-modal-container\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"id() + '-modal-title'\"\n    [attr.aria-describedby]=\"description() ? id() + '-modal-desc' : ariaDescribedby()\"\n    [attr.data-size]=\"size()\"\n    [attr.data-open]=\"isOpen()\"\n  >\n    <div class=\"rte-modal-header\">\n      <div class=\"rte-modal-header-text\">\n        <rte-icon *ngIf=\"icon()\" [name]=\"icon() ?? ''\" [size]=\"iconSize()\" [appearance]=\"iconAppearance()\" />\n        <h2 class=\"rte-modal-title\" [id]=\"id() + '-modal-title'\">\n          {{ title() }}\n        </h2>\n        <rte-icon-button\n          data-testid=\"modal-close-button\"\n          name=\"close\"\n          size=\"l\"\n          class=\"close-icon\"\n          variant=\"neutral\"\n          [ariaLabel]=\"'Close modal ' + id()\"\n          (click)=\"onClose()\"\n        />\n      </div>\n      <rte-divider />\n    </div>\n    <div *ngIf=\"description()\" class=\"rte-modal-content\">\n      <p class=\"rte-modal-content-description\" [id]=\"id() + '-modal-desc'\">\n        {{ description() }}\n      </p>\n      <ng-container [ngTemplateOutlet]=\"customContent()\"></ng-container>\n    </div>\n    <div class=\"rte-modal-footer\">\n      <ng-container [ngTemplateOutlet]=\"secondaryButton()\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"primaryButton()\"></ng-container>\n    </div>\n  </dialog>\n</div>\n", styles: [".rte-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;background-color:#201f1f80;transition:opacity .15s ease-out}.rte-modal-backdrop[data-open=true]{opacity:1}.rte-modal-container{box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%);border:none;box-sizing:border-box;position:absolute;max-height:90vh;top:50%;transform:translateY(-50%) scale(.98);display:flex;width:496px;padding:24px;flex-direction:column;align-items:flex-start;gap:24px;background-color:var(--background-default);border-radius:8px;opacity:0;transition:opacity .15s ease-in,transform .15s ease-in}.rte-modal-container[data-open=true]{opacity:1;transform:translateY(-50%) scale(1)}.rte-modal-container[data-size=s]{width:656px}.rte-modal-container[data-size=m]{width:936px}.rte-modal-container[data-size=l]{width:1168px;border-radius:12px}.rte-modal-container[data-size=xl]{width:1328px;border-radius:16px}.rte-modal-container .rte-modal-header{display:flex;flex-direction:column;gap:8px;width:100%;flex:0 0 auto}.rte-modal-container .rte-modal-header .rte-modal-header-text{display:flex;flex-direction:row;align-items:center;gap:8px}.rte-modal-container .rte-modal-header .rte-modal-header-text .rte-modal-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px;margin:0;overflow:hidden;color:var(--content-primary);text-overflow:ellipsis;flex:1 1 0}.rte-modal-container .rte-modal-content{display:flex;padding:1px;flex-direction:column;align-items:flex-start;gap:16px;color:var(--content-secondary);width:100%;overflow:auto}.rte-modal-container .rte-modal-content .rte-modal-content-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;margin:0;color:var(--content-secondary)}.rte-modal-container .rte-modal-footer{display:flex;padding:0;justify-content:flex-end;align-items:center;gap:24px;align-self:stretch;flex:0 0 auto}\n"] }]
+            args: [{ selector: "rte-modal", imports: [CommonModule, IconButtonComponent, IconComponent, DividerComponent], standalone: true, template: "<div class=\"rte-modal-wrapper\">\n  <div class=\"rte-modal-backdrop\" [attr.data-open]=\"isOpen()\"></div>\n  <dialog\n    #modal\n    class=\"rte-modal-container\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-labelledby]=\"id() + '-modal-title'\"\n    [attr.aria-describedby]=\"description() ? id() + '-modal-desc' : ariaDescribedby()\"\n    [attr.data-size]=\"size()\"\n    [attr.data-open]=\"isOpen()\"\n  >\n    <div class=\"rte-modal-header\">\n      <div class=\"rte-modal-header-text\">\n        <rte-icon *ngIf=\"icon()\" [name]=\"icon() ?? ''\" [size]=\"iconSize()\" [appearance]=\"iconAppearance()\" />\n        <h2 class=\"rte-modal-title\" [id]=\"id() + '-modal-title'\">\n          {{ title() }}\n        </h2>\n        <rte-icon-button\n          data-testid=\"modal-close-button\"\n          name=\"close\"\n          size=\"l\"\n          class=\"close-icon\"\n          variant=\"neutral\"\n          [ariaLabel]=\"'Close modal ' + id()\"\n          (clickEvent)=\"onClose()\"\n        />\n      </div>\n      <rte-divider />\n    </div>\n    <div *ngIf=\"description()\" class=\"rte-modal-content\">\n      <p class=\"rte-modal-content-description\" [id]=\"id() + '-modal-desc'\">\n        {{ description() }}\n      </p>\n      <ng-container [ngTemplateOutlet]=\"customContent()\"></ng-container>\n    </div>\n    <div class=\"rte-modal-footer\">\n      <ng-container [ngTemplateOutlet]=\"secondaryButton()\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"primaryButton()\"></ng-container>\n    </div>\n  </dialog>\n</div>\n", styles: [".rte-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;background-color:#201f1f80;transition:opacity .15s ease-out}.rte-modal-backdrop[data-open=true]{opacity:1}.rte-modal-container{box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%);border:none;box-sizing:border-box;position:absolute;max-height:90vh;top:50%;transform:translateY(-50%) scale(.98);display:flex;width:496px;padding:24px;flex-direction:column;align-items:flex-start;gap:24px;background-color:var(--background-default);border-radius:8px;opacity:0;transition:opacity .15s ease-in,transform .15s ease-in}.rte-modal-container[data-open=true]{opacity:1;transform:translateY(-50%) scale(1)}.rte-modal-container[data-size=s]{width:656px}.rte-modal-container[data-size=m]{width:936px}.rte-modal-container[data-size=l]{width:1168px;border-radius:12px}.rte-modal-container[data-size=xl]{width:1328px;border-radius:16px}.rte-modal-container .rte-modal-header{display:flex;flex-direction:column;gap:8px;width:100%;flex:0 0 auto}.rte-modal-container .rte-modal-header .rte-modal-header-text{display:flex;flex-direction:row;align-items:center;gap:8px}.rte-modal-container .rte-modal-header .rte-modal-header-text .rte-modal-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:24px;line-height:32px;letter-spacing:-.5px;margin:0;overflow:hidden;color:var(--content-primary);text-overflow:ellipsis;flex:1 1 0}.rte-modal-container .rte-modal-content{display:flex;padding:1px;flex-direction:column;align-items:flex-start;gap:16px;color:var(--content-secondary);width:100%;overflow:auto}.rte-modal-container .rte-modal-content .rte-modal-content-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;margin:0;color:var(--content-secondary)}.rte-modal-container .rte-modal-footer{display:flex;padding:0;justify-content:flex-end;align-items:center;gap:24px;align-self:stretch;flex:0 0 auto}\n"] }]
         }], ctorParameters: () => [] });
 
 class ModalDirective {
@@ -2380,6 +2642,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+class SearchbarComponent {
+    constructor() {
+        this.id = input();
+        this.label = input("Rechercher");
+        this.disabled = input(false);
+        this.showResetButton = input(true);
+        this.appearance = input("primary");
+        this.compactSpacing = input(false);
+        this.value = input("");
+        this.assistiveText = input("");
+        this.valueChange = output();
+        this.searchEvent = output();
+        this.clear = output();
+        this.hasFocusWithin = signal(false);
+        this.appearanceConfig = computed(() => APPEARANCE_CONFIG[this.appearance()]);
+        this.placeholder = computed(() => (this.disabled() ? "Recherche indisponible" : this.label()));
+        this.textInputStyles = computed(() => {
+            const styles = {};
+            const hasLeftIcon = this.appearanceConfig().showLeftIcon;
+            if (this.appearance() === "primary") {
+                styles["border-right"] = "none";
+                styles["border-radius"] = `${SEARCHBAR_BORDER_RADIUS} 0 0 ${SEARCHBAR_BORDER_RADIUS}`;
+                if (!hasLeftIcon) {
+                    styles["padding-left"] = SEARCHBAR_PADDING_LEFT;
+                }
+            }
+            else if (this.appearance() === "secondary") {
+                styles["border-radius"] = SEARCHBAR_BORDER_RADIUS;
+            }
+            return styles;
+        });
+        this.searchButtonStyles = computed(() => {
+            const styles = {
+                width: SEARCHBAR_BUTTON_WIDTH,
+                "border-radius": `0 ${SEARCHBAR_BORDER_RADIUS} ${SEARCHBAR_BORDER_RADIUS} 0`,
+                display: "flex",
+                "justify-content": "center",
+            };
+            if (this.compactSpacing()) {
+                styles["height"] = SEARCHBAR_BUTTON_HEIGHT_COMPACT;
+            }
+            return styles;
+        });
+    }
+    handleChange(value) {
+        this.valueChange.emit(value);
+    }
+    handleSearch() {
+        this.searchEvent.emit(this.value());
+    }
+    handleEnter(event) {
+        if (event.key === ENTER_KEY) {
+            this.handleSearch();
+        }
+    }
+    handleClear() {
+        this.valueChange.emit("");
+        this.clear.emit();
+    }
+    handleFocusIn() {
+        this.hasFocusWithin.set(true);
+    }
+    handleFocusOut(event) {
+        const next = event.relatedTarget;
+        const currentTarget = event.currentTarget;
+        if (next && currentTarget.contains(next)) {
+            return;
+        }
+        this.hasFocusWithin.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SearchbarComponent, isStandalone: true, selector: "rte-searchbar", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, assistiveText: { classPropertyName: "assistiveText", publicName: "assistiveText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", searchEvent: "searchEvent", clear: "clear" }, ngImport: i0, template: "<div class=\"searchbar-container\" role=\"search\" [ngClass]=\"appearance()\">\n  <div\n    class=\"text-input-wrapper\"\n    [attr.data-disabled]=\"disabled()\"\n    (focusin)=\"handleFocusIn()\"\n    (focusout)=\"handleFocusOut($event)\"\n  >\n    <rte-base-text-input\n      rightIconAction=\"clean\"\n      autocomplete=\"off\"\n      [id]=\"id() ?? ''\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [value]=\"value()\"\n      [showRightIcon]=\"showResetButton()\"\n      [assistiveTextLabel]=\"assistiveText()\"\n      [compactSpacing]=\"compactSpacing()\"\n      [leftIcon]=\"appearanceConfig().showLeftIcon ? 'search' : null\"\n      [customStyle]=\"textInputStyles()\"\n      [highlighted]=\"hasFocusWithin()\"\n      (valueChange)=\"handleChange($event)\"\n      (rightIconClick)=\"handleClear()\"\n    >\n      @if (appearanceConfig().showSearchButton) {\n        <rte-icon-button\n          baseTextInputRightSlot\n          name=\"search\"\n          size=\"m\"\n          variant=\"primary\"\n          appearance=\"filled\"\n          class=\"search-button\"\n          [ariaLabel]=\"label()\"\n          [disabled]=\"disabled()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [customStyle]=\"searchButtonStyles()\"\n          (clickEvent)=\"handleSearch()\"\n        />\n      }\n    </rte-base-text-input>\n  </div>\n</div>\n", styles: [".searchbar-container{display:flex;flex-direction:column;width:fit-content}.text-input-wrapper{min-width:0;display:flex;align-items:stretch;border-radius:8px;transition:outline .2s,border .2s}.text-input-wrapper:focus-within{outline:1px solid var(--border-brand-default);outline-offset:0}.search-button{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BaseTextInputComponent, selector: "rte-base-text-input", inputs: ["id", "label", "labelPosition", "placeholder", "required", "showCounter", "value", "leftIcon", "showRightIcon", "rightIconAction", "showLabelRequirement", "assistiveAppearance", "showAssistiveIcon", "assistiveTextLabel", "error", "maxLength", "disabled", "readOnly", "width", "ariaLabel", "ariaRequired", "ariaLabelledby", "compactSpacing", "customStyle", "autocomplete", "highlighted"], outputs: ["valueChange", "rightIconClick"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-searchbar", imports: [CommonModule, BaseTextInputComponent, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"searchbar-container\" role=\"search\" [ngClass]=\"appearance()\">\n  <div\n    class=\"text-input-wrapper\"\n    [attr.data-disabled]=\"disabled()\"\n    (focusin)=\"handleFocusIn()\"\n    (focusout)=\"handleFocusOut($event)\"\n  >\n    <rte-base-text-input\n      rightIconAction=\"clean\"\n      autocomplete=\"off\"\n      [id]=\"id() ?? ''\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [value]=\"value()\"\n      [showRightIcon]=\"showResetButton()\"\n      [assistiveTextLabel]=\"assistiveText()\"\n      [compactSpacing]=\"compactSpacing()\"\n      [leftIcon]=\"appearanceConfig().showLeftIcon ? 'search' : null\"\n      [customStyle]=\"textInputStyles()\"\n      [highlighted]=\"hasFocusWithin()\"\n      (valueChange)=\"handleChange($event)\"\n      (rightIconClick)=\"handleClear()\"\n    >\n      @if (appearanceConfig().showSearchButton) {\n        <rte-icon-button\n          baseTextInputRightSlot\n          name=\"search\"\n          size=\"m\"\n          variant=\"primary\"\n          appearance=\"filled\"\n          class=\"search-button\"\n          [ariaLabel]=\"label()\"\n          [disabled]=\"disabled()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [customStyle]=\"searchButtonStyles()\"\n          (clickEvent)=\"handleSearch()\"\n        />\n      }\n    </rte-base-text-input>\n  </div>\n</div>\n", styles: [".searchbar-container{display:flex;flex-direction:column;width:fit-content}.text-input-wrapper{min-width:0;display:flex;align-items:stretch;border-radius:8px;transition:outline .2s,border .2s}.text-input-wrapper:focus-within{outline:1px solid var(--border-brand-default);outline-offset:0}.search-button{flex-shrink:0}\n"] }]
+        }] });
+
 class BaseSideNavComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
@@ -2668,7 +3008,6 @@ class ToastComponent {
         this.onActionButtonClick = input(() => { });
         this.close = output();
         this.displayCustomIcon = computed(() => {
-            console.log("iconName", this.iconName());
             return this.showLeftIcon() && !!this.iconName();
         });
         this.displayLeftIcon = computed(() => {
@@ -2677,27 +3016,66 @@ class ToastComponent {
         this.displayActionButton = computed(() => {
             return this.showActionButton() && this.actionButtonLabel() && !!this.onActionButtonClick();
         });
+        this.shouldAutoDismiss = computed(() => {
+            return this.isOpen() && this.autoDismiss() && (!this.actionButtonLabel() || !this.showActionButton());
+        });
+        this.timer = signal(null);
         this.position = computed(() => this.placement()?.split("-")[0]);
         this.alignment = computed(() => this.placement()?.split("-")[1]);
         this.visible = signal(false);
         this.defaultIconName = computed(() => IconTypeMap[this.type()]);
         this.iconSize = IconSize["xl"];
     }
+    ngOnChanges(changes) {
+        if (changes["isOpen"]) {
+            if (this.shouldAutoDismiss()) {
+                this.startTimer();
+            }
+        }
+    }
     onClickActionButton() {
         const action = this.onActionButtonClick();
         if (action) {
             action();
         }
     }
+    handleMouseEnter() {
+        if (this.timer()) {
+            this.stopTimer();
+        }
+    }
+    handleMouseLeave() {
+        if (this.shouldAutoDismiss()) {
+            this.startTimer();
+        }
+    }
     clickCloseButton() {
         this.close.emit();
     }
+    startTimer() {
+        this.stopTimer();
+        const duration = this.duration();
+        if (duration) {
+            const timerId = setTimeout(() => {
+                this.close.emit();
+                this.stopTimer();
+            }, ToastDurationMap[duration]);
+            this.timer.set(timerId);
+        }
+    }
+    stopTimer() {
+        const timer = this.timer();
+        if (timer) {
+            clearTimeout(timer);
+            this.timer.set(null);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "rte-toast", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, showActionButton: { classPropertyName: "showActionButton", publicName: "showActionButton", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, actionButtonLabel: { classPropertyName: "actionButtonLabel", publicName: "actionButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, onActionButtonClick: { classPropertyName: "onActionButtonClick", publicName: "onActionButtonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div\n  class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n  role=\"status\"\n  ref=\"{ref}\"\n  [ngClass]=\"{ open: isOpen() }\"\n>\n  <div class=\"rte-toast-content\">\n    @if (displayLeftIcon()) {\n      <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n    } @else {\n      @if (displayCustomIcon()) {\n        <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n      }\n    }\n    <span class=\"rte-toast-message\">{{ message() }}</span>\n  </div>\n  @if (displayActionButton()) {\n    <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n      {{ actionButtonLabel() }}\n    </button>\n  }\n  @if (closable()) {\n    <rte-icon-button\n      name=\"close\"\n      [attr.data-testid]=\"'toast-close-button'\"\n      [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n      (click)=\"clickCloseButton()\"\n    />\n  }\n</div>\n", styles: [".rte-toast{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon"], outputs: ["click"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "rte-toast", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, showActionButton: { classPropertyName: "showActionButton", publicName: "showActionButton", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, actionButtonLabel: { classPropertyName: "actionButtonLabel", publicName: "actionButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, onActionButtonClick: { classPropertyName: "onActionButtonClick", publicName: "onActionButtonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n  role=\"status\"\n  [ngClass]=\"{ open: isOpen() }\"\n  (mouseenter)=\"handleMouseEnter()\"\n  (mouseleave)=\"handleMouseLeave()\"\n>\n  <div class=\"rte-toast-content\">\n    @if (displayLeftIcon()) {\n      <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n    } @else {\n      @if (displayCustomIcon()) {\n        <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n      }\n    }\n    <span class=\"rte-toast-message\">{{ message() }}</span>\n  </div>\n  @if (displayActionButton()) {\n    <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n      {{ actionButtonLabel() }}\n    </button>\n  }\n  @if (closable()) {\n    <rte-icon-button\n      name=\"close\"\n      [attr.data-testid]=\"'toast-close-button'\"\n      [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n      (clickEvent)=\"clickCloseButton()\"\n    />\n  }\n</div>\n", styles: [".rte-toast{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-toast", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n  role=\"status\"\n  ref=\"{ref}\"\n  [ngClass]=\"{ open: isOpen() }\"\n>\n  <div class=\"rte-toast-content\">\n    @if (displayLeftIcon()) {\n      <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n    } @else {\n      @if (displayCustomIcon()) {\n        <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n      }\n    }\n    <span class=\"rte-toast-message\">{{ message() }}</span>\n  </div>\n  @if (displayActionButton()) {\n    <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n      {{ actionButtonLabel() }}\n    </button>\n  }\n  @if (closable()) {\n    <rte-icon-button\n      name=\"close\"\n      [attr.data-testid]=\"'toast-close-button'\"\n      [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n      (click)=\"clickCloseButton()\"\n    />\n  }\n</div>\n", styles: [".rte-toast{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"] }]
+            args: [{ selector: "rte-toast", imports: [CommonModule, IconComponent, IconButtonComponent, ButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n  role=\"status\"\n  [ngClass]=\"{ open: isOpen() }\"\n  (mouseenter)=\"handleMouseEnter()\"\n  (mouseleave)=\"handleMouseLeave()\"\n>\n  <div class=\"rte-toast-content\">\n    @if (displayLeftIcon()) {\n      <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n    } @else {\n      @if (displayCustomIcon()) {\n        <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n      }\n    }\n    <span class=\"rte-toast-message\">{{ message() }}</span>\n  </div>\n  @if (displayActionButton()) {\n    <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n      {{ actionButtonLabel() }}\n    </button>\n  }\n  @if (closable()) {\n    <rte-icon-button\n      name=\"close\"\n      [attr.data-testid]=\"'toast-close-button'\"\n      [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n      (clickEvent)=\"clickCloseButton()\"\n    />\n  }\n</div>\n", styles: [".rte-toast{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"] }]
         }] });
 
 class ToastService {
@@ -2845,9 +3223,522 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-tag", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"rte-tag\"\n  [attr.data-tag-type]=\"tagType()\"\n  [attr.data-status]=\"status()\"\n  [attr.data-color]=\"color()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n>\n  <ng-container *ngIf=\"isValidIconName() && (tagType() === 'status' || showLeftIcon())\">\n    <rte-icon [name]=\"computedIconName()\" [size]=\"16\"></rte-icon>\n  </ng-container>\n  <ng-container *ngIf=\"label\">\n    <label class=\"tag-label\" [attr.data-compact-spacing]=\"compactSpacing()\">{{ label() }}</label>\n  </ng-container>\n</div>\n", styles: [".rte-tag{height:32px;display:inline-flex;padding:4px 6px;justify-content:center;align-items:center;gap:0px;border-radius:4px;text-wrap:nowrap}.rte-tag[data-compact-spacing=true]{padding:0 6px;height:24px}.rte-tag .tag-label{padding:0 6px;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px;color:var(--content-status)}.rte-tag .tag-label[data-compact-spacing=true]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px}.rte-tag[data-tag-type=status][data-status=success],.rte-tag[data-tag-type=status][data-status=information],.rte-tag[data-tag-type=status][data-status=alert]{color:var(--content-primary-inverse)}.rte-tag[data-tag-type=status][data-status=success]{background-color:var(--background-success-default)}.rte-tag[data-tag-type=status][data-status=information]{background-color:var(--background-info-default)}.rte-tag[data-tag-type=status][data-status=warning]{background-color:var(--background-warning-default)}.rte-tag[data-tag-type=status][data-status=alert]{background-color:var(--background-danger-default)}.rte-tag[data-tag-type=decorative][data-color=brand]{background-color:var(--background-brand-default)}.rte-tag[data-tag-type=decorative][data-color=neutral]{background-color:var(--decorative-neutral)}.rte-tag[data-tag-type=decorative][data-color=azur]{background-color:var(--decorative-bleu-iceberg)}.rte-tag[data-tag-type=decorative][data-color=jade]{background-color:var(--decorative-vert-foret)}.rte-tag[data-tag-type=decorative][data-color=lavande]{background-color:var(--decorative-violet)}.rte-tag[data-tag-type=decorative][data-color=ciel]{background-color:var(--decorative-bleu-rte)}.rte-tag[data-tag-type=decorative][data-color=nuage]{background-color:var(--decorative-bleu-digital)}.rte-tag[data-tag-type=decorative][data-color=givre]{background-color:var(--decorative-marine)}.rte-tag[data-tag-type=decorative][data-color=brume]{background-color:var(--decorative-bleu-petrole)}.rte-tag[data-tag-type=decorative][data-color=glacier]{background-color:var(--decorative-bleu-cyan)}.rte-tag[data-tag-type=decorative][data-color=turquoise]{background-color:var(--decorative-vert)}.rte-tag[data-tag-type=decorative][data-color=anis]{background-color:var(--decorative-vert-indications)}.rte-tag[data-tag-type=decorative][data-color=menthe]{background-color:var(--decorative-vert-digital)}.rte-tag[data-tag-type=decorative][data-color=citronnelle]{background-color:var(--decorative-jaune)}.rte-tag[data-tag-type=decorative][data-color=sable]{background-color:var(--decorative-jaune-ocre)}.rte-tag[data-tag-type=decorative][data-color=abricot]{background-color:var(--decorative-jaune-indications)}.rte-tag[data-tag-type=decorative][data-color=coral]{background-color:var(--decorative-saumon)}.rte-tag[data-tag-type=decorative][data-color=rose]{background-color:var(--decorative-rose-digital)}.rte-tag[data-tag-type=decorative][data-color=petale]{background-color:var(--decorative-fuschia)}.rte-tag[data-tag-type=decorative][data-color=quartz]{background-color:var(--decorative-rouge-indication)}.rte-tag[data-tag-type=decorative][data-color=cendre]{background-color:var(--decorative-taupe)}.rte-tag[data-tag-type=decorative][data-color=brand],.rte-tag[data-tag-type=decorative][data-color=brand] .tag-label{color:var(--content-primary-inverse)}\n"] }]
         }] });
 
+class AssistiveTextComponent {
+    constructor() {
+        this.label = input();
+        this.appearance = input("description");
+        this.showIcon = input(false);
+        this.href = input();
+        this.width = input();
+        this.isLink = computed(() => {
+            return this.appearance() === "link" && this.href() !== undefined;
+        });
+        this.widthStyle = computed(() => {
+            return `${this.width()}px`;
+        });
+        this.assistiveTextIconSize = ASSISTIVE_TEXT_ICON_SIZE;
+        this.iconName = computed(() => {
+            return getIconNameFromAppearance(this.appearance());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AssistiveTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AssistiveTextComponent, isStandalone: true, selector: "rte-assistive-text", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"rte-assistive-text {{ appearance() }}\" [ngStyle]=\"{ width: widthStyle() }\">\n  <rte-icon\n    *ngIf=\"showIcon() && iconName()\"\n    class=\"assistive-icon-{{ appearance() }}\"\n    [name]=\"iconName()!\"\n    [size]=\"assistiveTextIconSize\"\n  ></rte-icon>\n  @if (isLink()) {\n    <rte-link class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"href() || ''\" [label]=\"label() || ''\">\n    </rte-link>\n  } @else {\n    <span>{{ label() }}</span>\n  }\n</div>\n", styles: [".rte-assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AssistiveTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-assistive-text", imports: [CommonModule, IconComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-assistive-text {{ appearance() }}\" [ngStyle]=\"{ width: widthStyle() }\">\n  <rte-icon\n    *ngIf=\"showIcon() && iconName()\"\n    class=\"assistive-icon-{{ appearance() }}\"\n    [name]=\"iconName()!\"\n    [size]=\"assistiveTextIconSize\"\n  ></rte-icon>\n  @if (isLink()) {\n    <rte-link class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"href() || ''\" [label]=\"label() || ''\">\n    </rte-link>\n  } @else {\n    <span>{{ label() }}</span>\n  }\n</div>\n", styles: [".rte-assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-assistive-text.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
+        }] });
+
+class SelectComponent {
+    constructor() {
+        this.id = input();
+        this.name = input();
+        this.ariaLabelledby = input();
+        this.label = input();
+        this.labelId = input();
+        this.labelPosition = input("top");
+        this.assistiveTextLabel = input();
+        this.assistiveTextAppearance = input("description");
+        this.assistiveTextLink = input();
+        this.required = input(false);
+        this.showLabelRequirement = input(false);
+        this.disabled = input(false);
+        this.readOnly = input(false);
+        this.value = input();
+        this.options = input([]);
+        this.isError = input(false);
+        this.showAssistiveIcon = input(false);
+        this.showResetButton = input(false);
+        this.width = input(MIN_SELECT_WIDTH);
+        this.selectRef = viewChild("selectRef");
+        this.buttonsContainerRef = viewChild("buttonsContainerRef");
+        this.selectDropdownOffset = SELECT_DROPDOWN_OFFSET;
+        this.computedWidth = computed(() => {
+            return `${this.width()}px`;
+        });
+        this.clearButton = computed(() => {
+            return this.buttonsContainerRef()?.nativeElement.querySelector(".rte-icon-button.clear-button");
+        });
+        this.dropdownPosition = computed(() => {
+            const selectElement = this.selectRef()?.nativeElement;
+            if (selectElement) {
+                const rect = selectElement.getBoundingClientRect();
+                const spaceBelow = window.innerHeight - rect.bottom;
+                return spaceBelow >= THRESHOLD_BOTTOM_POSITION ? "bottom" : "top";
+            }
+            return "bottom";
+        });
+        this.internalValue = signal(this.value());
+        this.requirementIndicatorValue = computed(() => this.required()
+            ? this.showLabelRequirement()
+                ? REQUIREMENT_INDICATOR_VALUE.required
+                : REQUIREMENT_INDICATOR_VALUE.requiredIcon
+            : REQUIREMENT_INDICATOR_VALUE.optional);
+        this.valueChange = output();
+        this.currentOptionLabel = computed(() => {
+            return this.options().find((option) => option.value === this.internalValue())?.label;
+        });
+        this.isAssistiveTextLinkVisible = computed(() => {
+            return this.assistiveTextAppearance() === "link" && this.assistiveTextLink() !== undefined;
+        });
+        this.formattedOptions = computed(() => {
+            return this.options().map(({ value, label }) => ({
+                id: value,
+                label: label,
+                selected: value === this.internalValue(),
+            }));
+        });
+        this.shouldDisplayClearButton = computed(() => this.showResetButton() && !!this.internalValue() && !this.disabled());
+        this.shouldDisplayErrorIcon = computed(() => this.isError() && !this.disabled() && !this.readOnly());
+        this.isActive = signal(false);
+        this.selectWidth = computed(() => {
+            const nativeElement = this.selectRef()?.nativeElement;
+            if (nativeElement) {
+                return nativeElement.getBoundingClientRect().width;
+            }
+            return null;
+        });
+    }
+    handleOnClickTrigger() {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        this.toggleDropdown();
+    }
+    handleOnKeyDownTrigger(event) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        if (this.shouldDisplayClearButton()) {
+            const clearButton = this.buttonsContainerRef()?.nativeElement.children[0].children[0];
+            const isClearButtonFocused = document.activeElement === clearButton;
+            if (isClearButtonFocused && (event.key === SPACE_KEY || event.key === ENTER_KEY)) {
+                this.clearSelection(event);
+                return;
+            }
+        }
+        if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
+            this.toggleDropdown();
+        }
+    }
+    handleOnClickClearButton(event) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.clearSelection(event);
+    }
+    handleOnClickItem(id) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        this.internalValue.set(id);
+        const event = new CustomEvent("change", {
+            bubbles: true,
+            detail: { target: { value: id } },
+        });
+        this.valueChange.emit(event);
+        this.isActive.set(!this.isActive());
+        this.selectRef()?.nativeElement.focus();
+    }
+    handleOnClosingDropdown() {
+        this.isActive.set(false);
+    }
+    handleOnClickOutside() {
+        this.isActive.set(false);
+    }
+    toggleDropdown() {
+        this.isActive.set(!this.isActive());
+        if (this.isActive()) {
+            this.selectRef()?.nativeElement.dispatchEvent(new Event("openDropdown"));
+        }
+        else {
+            this.selectRef()?.nativeElement.dispatchEvent(new Event("closeDropdown"));
+        }
+    }
+    clearSelection(event) {
+        this.internalValue.set(undefined);
+        this.isActive.set(false);
+        this.valueChange.emit(event);
+        this.selectRef()?.nativeElement.dispatchEvent(new Event("clearContent"));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "rte-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelId: { classPropertyName: "labelId", publicName: "labelId", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextAppearance: { classPropertyName: "assistiveTextAppearance", publicName: "assistiveTextAppearance", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLink: { classPropertyName: "assistiveTextLink", publicName: "assistiveTextLink", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SelectComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true, isSignal: true }, { propertyName: "buttonsContainerRef", first: true, predicate: ["buttonsContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n  <label\n    *ngIf=\"label() && labelPosition() === 'side'\"\n    class=\"rte-select-label\"\n    [attr.data-label-position]=\"labelPosition()\"\n    [attr.id]=\"labelId()\"\n    [attr.for]=\"id()\"\n    >{{ label()\n    }}<span\n      *ngIf=\"required() || showLabelRequirement()\"\n      class=\"requirement-indicator\"\n      aria-hidden=\"true\"\n      [ngClass]=\"{\n        required: required(),\n        'show-label-requirement': showLabelRequirement(),\n      }\"\n      >{{ requirementIndicatorValue() }}</span\n    ></label\n  >\n\n  <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n    <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n      >{{ label()\n      }}<span\n        *ngIf=\"required() || showLabelRequirement()\"\n        class=\"requirement-indicator\"\n        aria-hidden=\"true\"\n        [ngClass]=\"{\n          required: required(),\n          'show-label-requirement': showLabelRequirement(),\n        }\"\n        >{{ requirementIndicatorValue() }}</span\n      ></label\n    >\n  </div>\n  <div\n    rteDropdown\n    [rteDropdownId]=\"'dropdown_select_' + id()\"\n    [rteDropdownPosition]=\"dropdownPosition()\"\n    [rteDropdownOffset]=\"selectDropdownOffset\"\n    [rteDropdownWidth]=\"selectWidth()\"\n    (menuEvent)=\"handleOnClickItem($event.id)\"\n    (clickedOutside)=\"handleOnClickOutside()\"\n    (closedDropdown)=\"handleOnClosingDropdown()\"\n  >\n    <div\n      #selectRef\n      rteDropdownTrigger\n      class=\"rte-select-wrapper\"\n      [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.data-error]=\"isError()\"\n      [attr.data-disabled]=\"disabled()\"\n      [attr.data-read-only]=\"readOnly()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-readonly]=\"readOnly()\"\n      [attr.aria-labelledby]=\"labelId()\"\n      [attr.aria-expanded]=\"isActive()\"\n      [attr.data-active]=\"isActive()\"\n      [ngStyle]=\"{ width: computedWidth() }\"\n      (dropdownTriggered)=\"handleOnClickTrigger()\"\n      (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n    >\n      <div class=\"rte-select-content\">\n        <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n        <div class=\"rte-select-value\">\n          <span>{{ currentOptionLabel() }}</span>\n        </div>\n        <div #buttonsContainerRef class=\"rte-select-right-icons\">\n          <rte-icon-button\n            *ngIf=\"shouldDisplayClearButton()\"\n            name=\"cancel\"\n            variant=\"neutral\"\n            class=\"rte-select-icon-button clear-icon\"\n            [disabled]=\"disabled()\"\n            (clickEvent)=\"handleOnClickClearButton($event)\"\n          />\n          <rte-icon\n            class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n            variant=\"neutral\"\n            [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n          />\n        </div>\n      </div>\n    </div>\n    <rte-dropdown-menu [items]=\"formattedOptions()\" />\n    <rte-assistive-text\n      *ngIf=\"assistiveTextLabel()\"\n      [label]=\"assistiveTextLabel()\"\n      [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n      [showIcon]=\"showAssistiveIcon()\"\n      [href]=\"assistiveTextLink()\"\n      [width]=\"width()\"\n    />\n  </div>\n</div>\n", styles: [".rte-select-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;padding:2px 8px;color:var(--content-secondary);justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;padding:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: AssistiveTextComponent, selector: "rte-assistive-text", inputs: ["label", "appearance", "showIcon", "href", "width"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-select", imports: [CommonModule, IconComponent, DropdownModule, IconButtonComponent, AssistiveTextComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SelectComponent,
+                            multi: true,
+                        },
+                    ], template: "<div class=\"rte-select-container\" [attr.data-label-position]=\"labelPosition()\">\n  <label\n    *ngIf=\"label() && labelPosition() === 'side'\"\n    class=\"rte-select-label\"\n    [attr.data-label-position]=\"labelPosition()\"\n    [attr.id]=\"labelId()\"\n    [attr.for]=\"id()\"\n    >{{ label()\n    }}<span\n      *ngIf=\"required() || showLabelRequirement()\"\n      class=\"requirement-indicator\"\n      aria-hidden=\"true\"\n      [ngClass]=\"{\n        required: required(),\n        'show-label-requirement': showLabelRequirement(),\n      }\"\n      >{{ requirementIndicatorValue() }}</span\n    ></label\n  >\n\n  <div class=\"rte-select-header\" [attr.data-label-position]=\"labelPosition()\">\n    <label *ngIf=\"label() && labelPosition() === 'top'\" class=\"rte-select-label\" [attr.id]=\"labelId()\" [attr.for]=\"id()\"\n      >{{ label()\n      }}<span\n        *ngIf=\"required() || showLabelRequirement()\"\n        class=\"requirement-indicator\"\n        aria-hidden=\"true\"\n        [ngClass]=\"{\n          required: required(),\n          'show-label-requirement': showLabelRequirement(),\n        }\"\n        >{{ requirementIndicatorValue() }}</span\n      ></label\n    >\n  </div>\n  <div\n    rteDropdown\n    [rteDropdownId]=\"'dropdown_select_' + id()\"\n    [rteDropdownPosition]=\"dropdownPosition()\"\n    [rteDropdownOffset]=\"selectDropdownOffset\"\n    [rteDropdownWidth]=\"selectWidth()\"\n    (menuEvent)=\"handleOnClickItem($event.id)\"\n    (clickedOutside)=\"handleOnClickOutside()\"\n    (closedDropdown)=\"handleOnClosingDropdown()\"\n  >\n    <div\n      #selectRef\n      rteDropdownTrigger\n      class=\"rte-select-wrapper\"\n      [attr.tabIndex]=\"disabled() || readOnly() ? -1 : 0\"\n      [attr.role]=\"'combobox'\"\n      [attr.data-error]=\"isError()\"\n      [attr.data-disabled]=\"disabled()\"\n      [attr.data-read-only]=\"readOnly()\"\n      [attr.aria-disabled]=\"disabled()\"\n      [attr.aria-readonly]=\"readOnly()\"\n      [attr.aria-labelledby]=\"labelId()\"\n      [attr.aria-expanded]=\"isActive()\"\n      [attr.data-active]=\"isActive()\"\n      [ngStyle]=\"{ width: computedWidth() }\"\n      (dropdownTriggered)=\"handleOnClickTrigger()\"\n      (dropdownKeyDown)=\"handleOnKeyDownTrigger($event)\"\n    >\n      <div class=\"rte-select-content\">\n        <rte-icon *ngIf=\"shouldDisplayErrorIcon()\" name=\"error\" class=\"error-icon\" />\n        <div class=\"rte-select-value\">\n          <span>{{ currentOptionLabel() }}</span>\n        </div>\n        <div #buttonsContainerRef class=\"rte-select-right-icons\">\n          <rte-icon-button\n            *ngIf=\"shouldDisplayClearButton()\"\n            name=\"cancel\"\n            variant=\"neutral\"\n            class=\"rte-select-icon-button clear-icon\"\n            [disabled]=\"disabled()\"\n            (clickEvent)=\"handleOnClickClearButton($event)\"\n          />\n          <rte-icon\n            class=\"trigger-icon trigger-icon-{{ isActive() ? 'up' : 'down' }}\"\n            variant=\"neutral\"\n            [name]=\"isActive() ? 'arrow-chevron-up' : 'arrow-chevron-down'\"\n          />\n        </div>\n      </div>\n    </div>\n    <rte-dropdown-menu [items]=\"formattedOptions()\" />\n    <rte-assistive-text\n      *ngIf=\"assistiveTextLabel()\"\n      [label]=\"assistiveTextLabel()\"\n      [appearance]=\"isError() ? 'error' : assistiveTextAppearance()!\"\n      [showIcon]=\"showAssistiveIcon()\"\n      [href]=\"assistiveTextLink()\"\n      [width]=\"width()\"\n    />\n  </div>\n</div>\n", styles: [".rte-select-container{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;flex-direction:column}.rte-select-container[data-label-position=side]{flex-direction:row;align-self:start}.rte-select-container[data-label-position=side] .rte-select-header{display:flex;flex-direction:column}.rte-select-container[data-label-position=side] .rte-select-label{height:32px;padding:0 8px}.rte-select-container .rte-select-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;padding:2px 8px;color:var(--content-secondary);justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}.rte-select-container .rte-select-label .requirement-indicator{margin-left:2px}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;color:var(--content-tertiary)}.rte-select-container .rte-select-label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}.rte-select-container .rte-select-label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper{box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%);display:flex;min-width:112px;min-height:32px;max-height:32px;align-items:center;align-self:stretch;border-radius:4px;border:1px solid var(--border-secondary);box-sizing:border-box}.rte-select-container .rte-select-wrapper .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper:hover{border-color:var(--border-primary);cursor:pointer}.rte-select-container .rte-select-wrapper:focus-visible,.rte-select-container .rte-select-wrapper[data-active=true]{border-color:var(--border-brand-default);outline:1px solid var(--border-brand-default)}.rte-select-container .rte-select-wrapper[data-error=true]{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]{color:var(--content-disabled);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-disabled=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]{color:var(--content-tertiary);border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true]:hover{cursor:default;border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true][data-read-only=true] .rte-select-content .rte-select-value{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper[data-error=true]:hover{border-color:var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true]:focus-visible{border-color:var(--border-danger);outline:1px solid var(--border-danger)}.rte-select-container .rte-select-wrapper[data-error=true] .rte-select-content .rte-select-value{color:var(--content-secondary)}.rte-select-container .rte-select-wrapper[data-disabled=true]{color:var(--content-disabled);background-color:var(--background-disabled);border-color:var(--border-disabled)}.rte-select-container .rte-select-wrapper[data-disabled=true]:hover{cursor:not-allowed}.rte-select-container .rte-select-wrapper[data-disabled=true] .trigger-icon,.rte-select-container .rte-select-wrapper[data-disabled=true] .rte-select-content .rte-select-value{color:var(--content-disabled)}.rte-select-container .rte-select-wrapper[data-read-only=true]{color:var(--content-tertiary);background-color:var(--background-disabled);border-color:var(--border-tertiary)}.rte-select-container .rte-select-wrapper[data-read-only=true]:hover{cursor:default}.rte-select-container .rte-select-wrapper[data-read-only=true] .trigger-icon{color:var(--content-tertiary)}.rte-select-container .rte-select-wrapper .rte-select-content{display:flex;min-width:96px;padding:4px 8px;align-items:center;flex:1 0 0}.rte-select-container .rte-select-wrapper .rte-select-content .error-icon{padding:0;color:var(--content-danger-default)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;padding:0 8px;align-items:center;flex:1 0 0;text-overflow:ellipsis;overflow:hidden;color:var(--content-primary)}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-value span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons{display:flex;align-items:center;gap:8px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button{padding:0;height:20px;width:20px}.rte-select-container .rte-select-wrapper .rte-select-content .rte-select-right-icons ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:2px;outline-offset:3px}.rte-select-container .assistive-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;display:flex;align-items:center;gap:4px;padding:4px 8px;color:var(--content-secondary)}.rte-select-container .assistive-text .assistive-icon-error{color:var(--content-danger-default)}.rte-select-container .assistive-text .assistive-icon-success{color:var(--content-success-default)}.rte-select-container .assistive-text.error{color:var(--content-danger-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.rte-select-container .assistive-text.success{color:var(--content-success-default);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}\n"] }]
+        }] });
+
+class TabItemComponent {
+    constructor() {
+        this.direction = input("horizontal");
+        this.option = input();
+        this.compactSpacing = input();
+        this.isSelected = input(false);
+        this.click = output();
+        this.handleKeydown = input();
+        this.inverted = input(false);
+        this.isHidden = input(false);
+        this.tabItemRef = viewChild("tabItem");
+        this.hoverIndicatorStyle = signal(null);
+        this.displayBadge = (option) => {
+            return !!(option.badgeContent || option.badgeType || option.badgeIcon || option.badgeCount);
+        };
+        this.hoverIndicatorWidth = computed(() => {
+            return `${this.hoverIndicatorStyle()?.width}px`;
+        });
+        this.hoverIndicatorHeight = computed(() => {
+            return `${this.hoverIndicatorStyle()?.height}px`;
+        });
+        this.hoverIndicatorLeft = computed(() => {
+            return `${this.hoverIndicatorStyle()?.left}px`;
+        });
+        this.hoverIndicatorTop = computed(() => {
+            return `${this.hoverIndicatorStyle()?.top}px`;
+        });
+        this.hoverIndicatorOpacity = computed(() => {
+            return this.hoverIndicatorStyle()?.opacity ?? 0;
+        });
+        this.computeHoverIndicatorStyle = () => {
+            if (this.direction() === "horizontal") {
+                this.hoverIndicatorStyle.set({
+                    width: this.tabItemRef()?.nativeElement.offsetWidth,
+                    height: 2,
+                    left: this.tabItemRef()?.nativeElement.offsetLeft,
+                    top: this.tabItemRef()
+                        ? this.tabItemRef().nativeElement.offsetTop + this.tabItemRef().nativeElement.offsetHeight
+                        : 0,
+                    opacity: 0,
+                });
+            }
+            else {
+                this.hoverIndicatorStyle.set({
+                    width: 2,
+                    height: this.tabItemRef()?.nativeElement.offsetHeight,
+                    left: this.tabItemRef()?.nativeElement.offsetLeft && this.tabItemRef().nativeElement.offsetLeft - 4,
+                    top: this.tabItemRef().nativeElement.offsetTop,
+                    opacity: 0,
+                });
+            }
+        };
+    }
+    ngAfterViewInit() {
+        this.computeHoverIndicatorStyle();
+        if (this.tabItemRef && this.tabItemRef()?.nativeElement) {
+            if (this.option()?.disabled)
+                return;
+            window.addEventListener("resize", this.computeHoverIndicatorStyle);
+            const parent = this.tabItemRef()?.nativeElement.parentElement?.parentElement;
+            if (parent) {
+                parent.addEventListener("scroll", this.computeHoverIndicatorStyle);
+            }
+        }
+    }
+    ngOnDestroy() {
+        const parent = this.tabItemRef()?.nativeElement.parentElement?.parentElement;
+        window.removeEventListener("resize", this.computeHoverIndicatorStyle);
+        if (parent) {
+            parent.removeEventListener("scroll", this.computeHoverIndicatorStyle);
+        }
+    }
+    onClickTabItem(event, id) {
+        this.hoverIndicatorStyle.set({
+            ...this.hoverIndicatorStyle(),
+            opacity: 0,
+        });
+        if (!this.option()?.disabled) {
+            this.click.emit(id);
+        }
+        else {
+            event.stopPropagation();
+        }
+    }
+    handleMouseHover() {
+        if (!this.isSelected()) {
+            this.hoverIndicatorStyle.set({
+                ...this.hoverIndicatorStyle(),
+                opacity: 1,
+            });
+        }
+    }
+    handleMouseOut() {
+        this.hoverIndicatorStyle.set({
+            ...this.hoverIndicatorStyle(),
+            opacity: 0,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "rte-tab-item", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, handleKeydown: { classPropertyName: "handleKeydown", publicName: "handleKeydown", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null }, isHidden: { classPropertyName: "isHidden", publicName: "isHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "tabItemRef", first: true, predicate: ["tabItem"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #tabItem\n  class=\"rte-tabitem\"\n  role=\"tab\"\n  [id]=\"option()?.id\"\n  [attr.aria-selected]=\"isSelected()\"\n  [attr.aria-controls]=\"option()?.panelId\"\n  [tabIndex]=\"isSelected() ? 0 : -1\"\n  [attr.data-selected]=\"isSelected()\"\n  [attr.data-inverted]=\"inverted()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [attr.data-hidden]=\"isHidden()\"\n  (click)=\"onClickTabItem($event, option()?.id || '')\"\n  (mouseover)=\"handleMouseHover()\"\n  (mouseout)=\"handleMouseOut()\"\n  (keydown)=\"handleKeydown()\"\n>\n  <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n  <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n  <rte-badge\n    *ngIf=\"displayBadge(option()!)\"\n    [simpleBadge]=\"true\"\n    [badgeContent]=\"option()?.badgeContent || 'empty'\"\n    [badgeType]=\"option()?.badgeType || 'neutral'\"\n    [icon]=\"option()?.badgeIcon || ''\"\n    [count]=\"option()?.badgeCount\"\n  />\n</button>\n<span\n  #hoverIndicator\n  class=\"rte-tab-hover-indicator\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [id]=\"'tab-hover-indicator' + option()?.id\"\n  [ngStyle]=\"{\n    width: hoverIndicatorWidth(),\n    height: hoverIndicatorHeight(),\n    left: hoverIndicatorLeft(),\n    top: hoverIndicatorTop(),\n    opacity: hoverIndicatorOpacity(),\n  }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-secondary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem[data-selected=true]:not([data-disabled=true]),.rte-tabitem:hover:not([data-disabled=true]){font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-tab-item", imports: [CommonModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #tabItem\n  class=\"rte-tabitem\"\n  role=\"tab\"\n  [id]=\"option()?.id\"\n  [attr.aria-selected]=\"isSelected()\"\n  [attr.aria-controls]=\"option()?.panelId\"\n  [tabIndex]=\"isSelected() ? 0 : -1\"\n  [attr.data-selected]=\"isSelected()\"\n  [attr.data-inverted]=\"inverted()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [attr.data-hidden]=\"isHidden()\"\n  (click)=\"onClickTabItem($event, option()?.id || '')\"\n  (mouseover)=\"handleMouseHover()\"\n  (mouseout)=\"handleMouseOut()\"\n  (keydown)=\"handleKeydown()\"\n>\n  <rte-icon *ngIf=\"option()?.icon\" [name]=\"option()?.icon || ''\" [appearance]=\"isSelected() ? 'filled' : 'outlined'\" />\n  <span *ngIf=\"option()?.label\">{{ option()?.label }}</span>\n  <rte-badge\n    *ngIf=\"displayBadge(option()!)\"\n    [simpleBadge]=\"true\"\n    [badgeContent]=\"option()?.badgeContent || 'empty'\"\n    [badgeType]=\"option()?.badgeType || 'neutral'\"\n    [icon]=\"option()?.badgeIcon || ''\"\n    [count]=\"option()?.badgeCount\"\n  />\n</button>\n<span\n  #hoverIndicator\n  class=\"rte-tab-hover-indicator\"\n  [attr.data-disabled]=\"option()?.disabled\"\n  [id]=\"'tab-hover-indicator' + option()?.id\"\n  [ngStyle]=\"{\n    width: hoverIndicatorWidth(),\n    height: hoverIndicatorHeight(),\n    left: hoverIndicatorLeft(),\n    top: hoverIndicatorTop(),\n    opacity: hoverIndicatorOpacity(),\n  }\"\n></span>\n", styles: [":host{pointer-events:none;display:flex}.rte-tabitem{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;display:flex;padding:12px;justify-content:center;align-items:center;gap:12px;background:transparent;color:var(--content-secondary);cursor:pointer;border:none;text-align:left;flex-shrink:0;margin-left:2px;height:100%;pointer-events:auto}.rte-tabitem[data-inverted=true]{color:var(--content-primary-inverse)}.rte-tabitem[data-direction=vertical]{flex-shrink:1;margin-left:0}.rte-tabitem[data-hidden=true]{visibility:hidden}.rte-tabitem[data-selected=true]:not([data-disabled=true]),.rte-tabitem:hover:not([data-disabled=true]){font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px}.rte-tabitem[data-disabled=true]{color:var(--content-disabled);cursor:not-allowed}.rte-tabitem[data-compact-spacing=true]{padding:4px 12px}.rte-tabitem:focus-visible{z-index:1;outline:2px solid var(--border-brand-focused)}.rte-tab-hover-indicator{position:absolute;top:4px;height:2px;width:2px;background:var(--background-neutral-regular-hover);opacity:0;transition:left .2s ease,width .2s ease;z-index:10}.rte-tab-hover-indicator[data-disabled=true]{display:none}\n"] }]
+        }] });
+
+class TabComponent {
+    constructor() {
+        this.alignment = input("start");
+        this.direction = input("horizontal");
+        this.options = input([]);
+        this.selectedTabId = input();
+        this.compactSpacing = input(false);
+        this.overflowType = input("scrollable");
+        this.inverted = input(false);
+        this.sliderLeft = signal(0);
+        this.sliderWidth = signal(0);
+        this.sliderTop = signal(0);
+        this.sliderHeight = signal(0);
+        this.tabItemRefs = viewChildren("tabItem");
+        this.containerRef = viewChild("tabList");
+        this.hoverIndicatorRefs = viewChildren("hoverIndicator");
+        this.selectedTabRef = computed(() => {
+            const idx = this.options().findIndex((opt) => opt.id === this.selectedTabId());
+            const tabItem = this.tabItemRefs()[idx];
+            return tabItem;
+        });
+        this.hoverIndicatorStyle = signal(null);
+        this.change = output();
+        this.isScrollable = signal(false);
+        this.isOverflowingLeft = signal(false);
+        this.isOverflowingRight = signal(false);
+        this.isOverflowingTop = signal(false);
+        this.isOverflowingBottom = signal(false);
+        this.canScrollBackward = computed(() => {
+            return this.isOverflowingLeft() || this.isOverflowingTop();
+        });
+        this.canScrollForward = computed(() => {
+            return this.isOverflowingRight() || this.isOverflowingBottom();
+        });
+        this.isHorizontal = computed(() => this.direction() === "horizontal" && (this.isOverflowingRight() || this.isOverflowingLeft()));
+        this.shouldDisplayDropdown = computed(() => this.overflowType() === "dropdown" && this.isHorizontal());
+        this.selectedTab = computed(() => {
+            return this.options().find((option) => option.id === this.selectedTabId());
+        });
+        this.dropdownFilteredOptions = computed(() => {
+            return this.options().filter((option) => option.id !== this.selectedTabId());
+        });
+        this.displayBadge = (option) => {
+            return (!!option.showBadge ||
+                (option.badgeCount !== undefined && option.badgeCount > 0 && option.badgeContent === "number") ||
+                (option.badgeContent === "icon" && !!option.badgeIcon));
+        };
+        this.tabItemSelectedIndicatorStyle = computed(() => ({
+            left: `${this.shouldDisplayDropdown() ? 0 : this.sliderLeft()}px`,
+            top: `${this.sliderTop()}px`,
+            width: `${this.sliderWidth() + (this.shouldDisplayDropdown() ? 32 : 0)}px`,
+            height: `${this.sliderHeight()}px`,
+        }));
+        this.onKeydownTabItem = (event) => {
+            const isVertical = this.direction() === "vertical";
+            const isDownKeyPressed = isVertical && event.key === ARROW_DOWN_KEY;
+            const isUpKeyPressed = isVertical && event.key === ARROW_UP_KEY;
+            const isRightKeyPressed = !isVertical && event.key === ARROW_RIGHT_KEY;
+            const isLeftKeyPressed = !isVertical && event.key === ARROW_LEFT_KEY;
+            const isArrowNext = isDownKeyPressed || isRightKeyPressed;
+            const isArrowPrev = isUpKeyPressed || isLeftKeyPressed;
+            if (isArrowNext || isArrowPrev) {
+                event.preventDefault();
+                this.focusItem(isArrowNext ? "next" : "previous");
+            }
+        };
+        this.onClickTabItem = (id) => {
+            if (id !== this.selectedTabId()) {
+                this.change.emit(id);
+                if (!this.shouldDisplayDropdown()) {
+                    const newTab = this.getTabItem(id)?.tabItemRef()?.nativeElement;
+                    if (newTab) {
+                        const container = this.containerRef()?.nativeElement;
+                        if (container) {
+                            scrollToSelectedTab(newTab, container, this.direction());
+                        }
+                    }
+                }
+            }
+        };
+        this.getTabItem = (id) => {
+            return this.tabItemRefs().find((tab) => tab.option()?.id === id);
+        };
+        this.focusItem = (direction) => {
+            const currentIndex = this.tabItemRefs().findIndex((tab) => tab === this.selectedTabRef());
+            const maxIterations = this.tabItemRefs().length;
+            let newIndex = this.computeNextItemIndex(currentIndex, maxIterations, direction);
+            let counter = 0;
+            while (this.tabItemRefs()[newIndex].tabItemRef()?.nativeElement.getAttribute("data-disabled") === "true" &&
+                counter < maxIterations) {
+                newIndex = this.computeNextItemIndex(newIndex, maxIterations, direction);
+                counter++;
+            }
+            this.tabItemRefs()[newIndex].tabItemRef()?.nativeElement.focus();
+            this.tabItemRefs()[newIndex].tabItemRef()?.nativeElement.click();
+        };
+        this.computeScrollableSignals = () => {
+            this.computeIsScrollable();
+            this.computeIsOverflowingLeft();
+            this.computeIsOverflowingRight();
+            this.computeIsOverflowingTop();
+            this.computeIsOverflowingBottom();
+        };
+    }
+    isSelected(id) {
+        return this.selectedTabId() === id;
+    }
+    ngAfterViewInit() {
+        this.updateSelectedTabItemIndicator();
+        this.computeScrollableSignals();
+        window.addEventListener("resize", this.updateSelectedTabItemIndicator.bind(this));
+        window.addEventListener("resize", this.computeScrollableSignals.bind(this));
+        if (this.containerRef()) {
+            this.containerRef()?.nativeElement.addEventListener("scroll", this.computeScrollableSignals.bind(this));
+        }
+        this.hoverIndicatorRefs().forEach((hoverIndicator) => {
+            hoverIndicator.nativeElement.style.opacity = "0";
+        });
+    }
+    ngOnDestroy() {
+        window.removeEventListener("resize", this.updateSelectedTabItemIndicator.bind(this));
+        window.removeEventListener("resize", this.computeScrollableSignals.bind(this));
+        if (this.containerRef()) {
+            this.containerRef()?.nativeElement.removeEventListener("scroll", this.computeScrollableSignals.bind(this));
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes["selectedTabId"]) {
+            this.updateSelectedTabItemIndicator();
+        }
+    }
+    scrollBackward() {
+        if (this.containerRef()?.nativeElement) {
+            const scrollObject = this.direction() === "horizontal" ? { left: -300 } : { top: -300 };
+            this.containerRef()?.nativeElement.scrollBy({ ...scrollObject, behavior: "smooth" });
+        }
+    }
+    scrollForward() {
+        if (this.containerRef() && this.containerRef()?.nativeElement) {
+            const scrollObject = this.direction() === "horizontal" ? { left: 300 } : { top: 300 };
+            this.containerRef()?.nativeElement.scrollBy({ ...scrollObject, behavior: "smooth" });
+        }
+    }
+    computeNextItemIndex(currentIndex, totalItems, direction) {
+        return direction === "next" ? (currentIndex + 1) % totalItems : (currentIndex - 1 + totalItems) % totalItems;
+    }
+    computeIndicatorStyle(tabItem) {
+        if (this.direction() === "horizontal") {
+            return {
+                width: tabItem.offsetWidth,
+                left: tabItem.offsetLeft,
+                top: tabItem.offsetTop + tabItem.offsetHeight,
+            };
+        }
+        else {
+            return {
+                left: 0,
+                top: tabItem.offsetTop,
+                height: tabItem.offsetHeight,
+                width: 2,
+            };
+        }
+    }
+    updateSelectedTabItemIndicator() {
+        const idx = this.options().findIndex((opt) => opt.id === this.selectedTabId());
+        const tabItem = this.tabItemRefs()[idx];
+        if (tabItem?.tabItemRef) {
+            if (tabItem.option()?.disabled) {
+                return;
+            }
+            const tabItemRef = tabItem.tabItemRef?.();
+            if (tabItemRef && tabItemRef.nativeElement) {
+                const tabItemElement = tabItemRef.nativeElement;
+                const indicatorStyle = this.computeIndicatorStyle(tabItemElement);
+                this.sliderHeight.set(indicatorStyle.height ?? 2);
+                this.sliderTop.set(indicatorStyle.top);
+                this.sliderWidth.set(indicatorStyle.width ?? 2);
+                this.sliderLeft.set(indicatorStyle.left);
+            }
+        }
+    }
+    computeIsScrollable() {
+        if (this.containerRef()?.nativeElement) {
+            const containerNativeElement = this.containerRef()?.nativeElement;
+            if (containerNativeElement) {
+                this.isScrollable.set(containerNativeElement.offsetWidth < containerNativeElement.scrollWidth ||
+                    containerNativeElement.offsetHeight < containerNativeElement.scrollHeight);
+            }
+        }
+        return false;
+    }
+    computeIsOverflowingLeft() {
+        const containerNativeElement = this.containerRef()?.nativeElement;
+        if (containerNativeElement) {
+            const isOverFlowingLeft = containerNativeElement.scrollLeft > 0;
+            this.isOverflowingLeft.set(this.isScrollable() && isOverFlowingLeft);
+        }
+    }
+    computeIsOverflowingRight() {
+        const containerNativeElement = this.containerRef()?.nativeElement;
+        if (containerNativeElement) {
+            const isOverflowingRight = containerNativeElement.scrollWidth - containerNativeElement.clientWidth - containerNativeElement.scrollLeft > 0;
+            this.isOverflowingRight.set(this.isScrollable() && isOverflowingRight);
+        }
+    }
+    computeIsOverflowingTop() {
+        const containerNativeElement = this.containerRef()?.nativeElement;
+        if (containerNativeElement) {
+            const isOverFlowingTop = containerNativeElement.scrollTop > 0;
+            this.isOverflowingTop.set(this.isScrollable() && isOverFlowingTop);
+        }
+    }
+    computeIsOverflowingBottom() {
+        const containerNativeElement = this.containerRef()?.nativeElement;
+        if (containerNativeElement) {
+            const isOverflowingBottom = containerNativeElement.scrollHeight - containerNativeElement.clientHeight - containerNativeElement.scrollTop >
+                0;
+            this.isOverflowingBottom.set(this.isScrollable() && isOverflowingBottom);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "rte-tab", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedTabId: { classPropertyName: "selectedTabId", publicName: "selectedTabId", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, overflowType: { classPropertyName: "overflowType", publicName: "overflowType", isSignal: true, isRequired: false, transformFunction: null }, inverted: { classPropertyName: "inverted", publicName: "inverted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tabItemRefs", predicate: ["tabItem"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "hoverIndicatorRefs", predicate: ["hoverIndicator"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n  <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n  <div\n    [ngStyle]=\"{\n      position: 'relative',\n      display: 'flex',\n      'align-items': 'center',\n      'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n    }\"\n  >\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Previous tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n      [ngStyle]=\"{\n        opacity: canScrollBackward() ? '1' : '0',\n        'pointer-events': canScrollBackward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollBackward()\"\n    />\n    <div\n      #tabList\n      role=\"tablist\"\n      aria-label=\"Sample Tabs\"\n      class=\"rte-tab\"\n      [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n      [attr.data-direction]=\"direction()\"\n      [attr.data-overflow-type]=\"overflowType()\"\n    >\n      <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n      <div\n        *ngIf=\"shouldDisplayDropdown() && options().length\"\n        rteDropdown\n        [rteDropdownOffset]=\"10\"\n        (menuEvent)=\"onClickTabItem($event.id)\"\n      >\n        <button\n          rteDropdownTrigger\n          class=\"rte-tab-dropdown-button\"\n          [attr.data-inverted]=\"inverted()\"\n          [attr.data-overflow-type]=\"overflowType()\"\n        >\n          <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n          <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n          <rte-badge\n            *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n            [badgeType]=\"selectedTab()?.badgeType!\"\n            [badgeContent]=\"selectedTab()?.badgeContent!\"\n            [count]=\"selectedTab()?.badgeCount\"\n            [simpleBadge]=\"true\"\n          ></rte-badge>\n          <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n        </button>\n        <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n      </div>\n      <ng-container *ngFor=\"let option of options(); let idx = index\">\n        <rte-tab-item\n          #tabItem\n          [option]=\"option\"\n          [direction]=\"direction()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [isSelected]=\"isSelected(option.id)\"\n          [inverted]=\"inverted()\"\n          [attr.data-hidden]=\"shouldDisplayDropdown()\"\n          [isHidden]=\"shouldDisplayDropdown()\"\n          (keydown)=\"onKeydownTabItem($event)\"\n          (click)=\"onClickTabItem(option.id)\"\n        ></rte-tab-item>\n      </ng-container>\n    </div>\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Next tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n      [ngStyle]=\"{\n        opacity: canScrollForward() ? '1' : '0',\n        'pointer-events': canScrollForward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollForward()\"\n    />\n  </div>\n  <div\n    class=\"rte-tab-border-horizontal\"\n    aria-hidden=\"true\"\n    role=\"presentation\"\n    [attr.data-direction]=\"direction()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n    [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n  ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TabItemComponent, selector: "rte-tab-item", inputs: ["direction", "option", "compactSpacing", "isSelected", "handleKeydown", "inverted", "isHidden"], outputs: ["click"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth"], outputs: ["menuEvent", "clickedOutside", "closedDropdown"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-tab", imports: [CommonModule, TabItemComponent, IconButtonComponent, DropdownModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n  <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n  <div\n    [ngStyle]=\"{\n      position: 'relative',\n      display: 'flex',\n      'align-items': 'center',\n      'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n    }\"\n  >\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Previous tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n      [ngStyle]=\"{\n        opacity: canScrollBackward() ? '1' : '0',\n        'pointer-events': canScrollBackward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollBackward()\"\n    />\n    <div\n      #tabList\n      role=\"tablist\"\n      aria-label=\"Sample Tabs\"\n      class=\"rte-tab\"\n      [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n      [attr.data-direction]=\"direction()\"\n      [attr.data-overflow-type]=\"overflowType()\"\n    >\n      <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n      <div\n        *ngIf=\"shouldDisplayDropdown() && options().length\"\n        rteDropdown\n        [rteDropdownOffset]=\"10\"\n        (menuEvent)=\"onClickTabItem($event.id)\"\n      >\n        <button\n          rteDropdownTrigger\n          class=\"rte-tab-dropdown-button\"\n          [attr.data-inverted]=\"inverted()\"\n          [attr.data-overflow-type]=\"overflowType()\"\n        >\n          <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n          <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n          <rte-badge\n            *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n            [badgeType]=\"selectedTab()?.badgeType!\"\n            [badgeContent]=\"selectedTab()?.badgeContent!\"\n            [count]=\"selectedTab()?.badgeCount\"\n            [simpleBadge]=\"true\"\n          ></rte-badge>\n          <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n        </button>\n        <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n      </div>\n      <ng-container *ngFor=\"let option of options(); let idx = index\">\n        <rte-tab-item\n          #tabItem\n          [option]=\"option\"\n          [direction]=\"direction()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [isSelected]=\"isSelected(option.id)\"\n          [inverted]=\"inverted()\"\n          [attr.data-hidden]=\"shouldDisplayDropdown()\"\n          [isHidden]=\"shouldDisplayDropdown()\"\n          (keydown)=\"onKeydownTabItem($event)\"\n          (click)=\"onClickTabItem(option.id)\"\n        ></rte-tab-item>\n      </ng-container>\n    </div>\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Next tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n      [ngStyle]=\"{\n        opacity: canScrollForward() ? '1' : '0',\n        'pointer-events': canScrollForward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollForward()\"\n    />\n  </div>\n  <div\n    class=\"rte-tab-border-horizontal\"\n    aria-hidden=\"true\"\n    role=\"presentation\"\n    [attr.data-direction]=\"direction()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n    [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n  ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\n"] }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
+export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
 //# sourceMappingURL=design-system-rte-angular.mjs.map