@design-system-rte/angular 0.14.0 → 0.16.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, ChangeDetectionStrategy, Directive, HostBinding, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, computed, ElementRef, ViewContainerRef, Renderer2, HostListener, signal, viewChild, viewChildren, contentChild, NgModule } from '@angular/core';
+import { input, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, computed, ElementRef, ViewContainerRef, Renderer2, HostListener, output, contentChild, NgModule, signal, viewChild, viewChildren, RendererFactory2 } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -9,45 +9,42 @@ import { isValidIconName as isValidIconName$1 } from '@design-system-rte/core/co
 import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
 import { TOOLTIP_GAP_ARROW, TOOLTIP_GAP } from '@design-system-rte/core/components/tooltip/tooltip.constants';
 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 { 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 { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
 import { buttonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
-import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from '@design-system-rte/core/components/chip/chip.constants';
-import { SPACE_KEY, ENTER_KEY, BACKSPACE_KEY, DELETE_KEY, ARROW_RIGHT_KEY, ARROW_LEFT_KEY, TAB_KEY, ARROW_DOWN_KEY, ARROW_UP_KEY, ESCAPE_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.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 { 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 { FOCUSABLE_ELEMENTS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
 import { BREADCRUMBS_DEFAULT_ARIA_LABEL } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.constants';
 import { shouldTruncateBreadcrumbs, getBreadcrumbsTruncatedItems } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.utils';
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { POPOVER_GAP_ARROW, POPOVER_GAP } from '@design-system-rte/core/components/popover/popover.constants';
+import { IconSize } from '@design-system-rte/core/components/icon/icon.constants';
 
 class ButtonComponent {
     constructor() {
-        this.label = input("");
-        this.variant = input("primary");
-        this.size = input("m");
-        this.disabled = input(false);
-        this.icon = input("");
-        this.ariaLabel = input("");
-        this.ariaLabelledBy = input("");
-        this.buttonType = input("button");
-        this.click = output();
+        this.rteButtonVariant = input("primary");
+        this.rteButtonSize = input("m");
     }
-    onClick(event) {
-        event.stopPropagation();
-        this.click.emit();
+    get classes() {
+        return `rte-button ${this.rteButtonVariant()} size-${this.rteButtonSize()}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", 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 }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0}.rte-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.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;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "button[rteButton]", inputs: { rteButtonVariant: { classPropertyName: "rteButtonVariant", publicName: "rteButtonVariant", isSignal: true, isRequired: false, transformFunction: null }, rteButtonSize: { classPropertyName: "rteButtonSize", publicName: "rteButtonSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<span class=\"rte-button-label\">\n    <ng-content/>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;justify-content:center;width:fit-content}:host:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}:host.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}:host.size-s .rte-button-label{margin:0 4px}:host.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;height:32px;border-radius:4px;padding:4px 12px}:host.size-m .rte-button-label{margin:0 6px}:host.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;height:40px;border-radius:8px;padding:4px 16px}:host.size-l .rte-button-label{margin:0 8px}:host.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}:host.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}:host.primary:active{background:var(--background-brand-pressed)}:host.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}:host.secondary:hover{background:var(--background-brand-inverse-hover)}:host.secondary:active{background:var(--background-brand-inverse-pressed)}:host.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}:host.text{background:transparent;border:none;color:var(--content-brand-default)}:host.text:hover{background:var(--background-brand-inverse-hover)}:host.text:active{background:var(--background-brand-inverse-pressed)}:host.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}:host.transparent{background:transparent;border:none;color:var(--content-brand-default)}:host.transparent:hover{color:var(--content-brand-hover)}:host.transparent:active{color:var(--content-brand-pressed)}:host.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}:host.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}:host.danger:hover{background:var(--background-danger-hover)}:host.danger:active{background:var(--background-danger-pressed)}:host.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.neutral{background:none;border:none;color:var(--content-primary)}:host.neutral:hover{color:var(--content-secondary)}:host.neutral:active{color:var(--content-tertiary)}:host.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}:host.reverse{background:none;border:none;color:var(--content-primary-inverse)}:host.reverse:hover{color:var(--background-hover)}:host.reverse:active{color:var(--content-primary-inverse)}:host.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-button", imports: [], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0}.rte-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.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;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.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;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover)}.rte-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-press)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.neutral{background:none;border:none;color:var(--content-primary)}.rte-button.neutral:hover{color:var(--content-secondary)}.rte-button.neutral:active{color:var(--content-tertiary)}.rte-button.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-button.reverse{background:none;border:none;color:var(--content-primary-inverse)}.rte-button.reverse:hover{color:var(--background-hover)}.rte-button.reverse:active{color:var(--content-primary-inverse)}.rte-button.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"] }]
-        }] });
+            args: [{ selector: "button[rteButton]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"rte-button-label\">\n    <ng-content/>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{display:inline-flex;flex-shrink:0;align-items:center;cursor:pointer;justify-content:center;width:fit-content}:host:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}:host.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}:host.size-s .rte-button-label{margin:0 4px}:host.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;height:32px;border-radius:4px;padding:4px 12px}:host.size-m .rte-button-label{margin:0 6px}:host.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;height:40px;border-radius:8px;padding:4px 16px}:host.size-l .rte-button-label{margin:0 8px}:host.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}:host.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}:host.primary:active{background:var(--background-brand-pressed)}:host.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}:host.secondary:hover{background:var(--background-brand-inverse-hover)}:host.secondary:active{background:var(--background-brand-inverse-pressed)}:host.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}:host.text{background:transparent;border:none;color:var(--content-brand-default)}:host.text:hover{background:var(--background-brand-inverse-hover)}:host.text:active{background:var(--background-brand-inverse-pressed)}:host.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}:host.transparent{background:transparent;border:none;color:var(--content-brand-default)}:host.transparent:hover{color:var(--content-brand-hover)}:host.transparent:active{color:var(--content-brand-pressed)}:host.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}:host.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}:host.danger:hover{background:var(--background-danger-hover)}:host.danger:active{background:var(--background-danger-pressed)}:host.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}:host.neutral{background:none;border:none;color:var(--content-primary)}:host.neutral:hover{color:var(--content-secondary)}:host.neutral:active{color:var(--content-tertiary)}:host.neutral:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}:host.reverse{background:none;border:none;color:var(--content-primary-inverse)}:host.reverse:hover{color:var(--background-hover)}:host.reverse:active{color:var(--content-primary-inverse)}:host.reverse:disabled{background:var(--background-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}\n"] }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
 
 class GridDirective {
     get hostClasses() {
@@ -490,13 +487,15 @@ class LinkComponent {
         this.href = input("#");
         this.subtle = input(false);
         this.externalLink = input(false);
+        this.reverse = input(false);
+        this.maxWidth = input();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\" [target]=\"externalLink() ? '_blank' : undefined\" [rel]=\"externalLink() ? 'noopener noreferrer' : null\">\n    <span class=\"rte-link-label\">\n        {{ label() }}\n    </span>\n    <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n  href=\"{{ href() }}\"\n  class=\"rte-link\"\n  role=\"link\"\n  [ngClass]=\"{ subtle: subtle(), reverse: reverse() }\"\n  [target]=\"externalLink() ? '_blank' : undefined\"\n  [rel]=\"externalLink() ? 'noopener noreferrer' : null\"\n  [style.max-width]=\"maxWidth() + 'px'\"\n>\n  <span class=\"rte-link-label\" [style.max-width]=\"maxWidth() + 'px'\">\n    {{ label() }}\n  </span>\n  <rte-icon\n    *ngIf=\"externalLink()\"\n    name=\"external-link\"\n    style=\"align-self: start; margin-left: 2px\"\n    [size]=\"12\"\n  ></rte-icon>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited-default);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-pressed);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-pressed);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle.reverse{color:var(--content-primary-inverse);text-decoration:none}.rte-link.subtle.reverse:hover{color:var(--content-primary-inverse);text-decoration:underline}.rte-link.subtle.reverse:focus-visible{color:var(--content-primary-inverse);text-decoration:underline;outline:1px solid var(--border-inverse);outline-offset:4px;border-radius:4px}.rte-link.reverse{color:var(--content-primary-inverse);text-decoration:underline}.rte-link.reverse:hover{color:var(--content-primary-inverse);text-decoration:none}.rte-link.reverse:focus-visible{color:var(--content-primary-inverse);text-decoration:underline;outline:1px solid var(--border-inverse);outline-offset:4px;border-radius:4px}.rte-link .rte-link-external-icon{align-self:start;margin-left:2px}.rte-link .rte-link-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\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: LinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\" [target]=\"externalLink() ? '_blank' : undefined\" [rel]=\"externalLink() ? 'noopener noreferrer' : null\">\n    <span class=\"rte-link-label\">\n        {{ label() }}\n    </span>\n    <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
+            args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  href=\"{{ href() }}\"\n  class=\"rte-link\"\n  role=\"link\"\n  [ngClass]=\"{ subtle: subtle(), reverse: reverse() }\"\n  [target]=\"externalLink() ? '_blank' : undefined\"\n  [rel]=\"externalLink() ? 'noopener noreferrer' : null\"\n  [style.max-width]=\"maxWidth() + 'px'\"\n>\n  <span class=\"rte-link-label\" [style.max-width]=\"maxWidth() + 'px'\">\n    {{ label() }}\n  </span>\n  <rte-icon\n    *ngIf=\"externalLink()\"\n    name=\"external-link\"\n    style=\"align-self: start; margin-left: 2px\"\n    [size]=\"12\"\n  ></rte-icon>\n</a>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{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;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited-default);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-pressed);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-pressed);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle.reverse{color:var(--content-primary-inverse);text-decoration:none}.rte-link.subtle.reverse:hover{color:var(--content-primary-inverse);text-decoration:underline}.rte-link.subtle.reverse:focus-visible{color:var(--content-primary-inverse);text-decoration:underline;outline:1px solid var(--border-inverse);outline-offset:4px;border-radius:4px}.rte-link.reverse{color:var(--content-primary-inverse);text-decoration:underline}.rte-link.reverse:hover{color:var(--content-primary-inverse);text-decoration:none}.rte-link.reverse:focus-visible{color:var(--content-primary-inverse);text-decoration:underline;outline:1px solid var(--border-inverse);outline-offset:4px;border-radius:4px}.rte-link .rte-link-external-icon{align-self:start;margin-left:2px}.rte-link .rte-link-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }] });
 
 class RadioButtonComponent {
@@ -511,11 +510,11 @@ class RadioButtonComponent {
         this.isDisplayed = computed(() => !(this.disabled() && this.error()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            class=\"rte-radio-button\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-radio-button-label\" \n            [for]=\"label()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            class=\"rte-radio-button\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-radio-button-label\" \n            [for]=\"label()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger-default);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger-default)}.rte-radio-button.error:before{background:var(--content-danger-default)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger-default)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            class=\"rte-radio-button\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-radio-button-label\" \n            [for]=\"label()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
+            args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            class=\"rte-radio-button\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-radio-button-label\" \n            [for]=\"label()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger-default);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger-default)}.rte-radio-button.error:before{background:var(--content-danger-default)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger-default)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:var(--content-primary)}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
         }] });
 
 class RadioButtonGroupComponent {
@@ -535,11 +534,11 @@ class RadioButtonGroupComponent {
         this.isDisplayed = computed(() => !(this.disabled() && this.error()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 } }, ngImport: i0, template: "<div  \n    *ngIf=\"isDisplayed()\"\n    class=\"radio-button-group-container\">\n    <div\n        class=\"radio-button-group-header\"\n        [ngClass]=\"{\n            'disabled': disabled(),\n            'error': error(),\n            'read-only': readOnly(),\n        }\">\n        <h3\n            *ngIf=\"showGroupTitle()\"\n            class=\"group-title\"\n            >\n            {{ groupTitle() }}\n        </h3>\n        <p\n            *ngIf=\"showHelpText()\"\n            class=\"group-help-text\"\n            >\n            {{ groupHelpText() }}\n\n        </p>\n        <p\n            *ngIf=\"error()\"\n            class=\"group-error-message\"\n            >\n            {{ errorMessage() }}\n        </p>\n    </div>\n    <div class=\"radio-button-group\" \n        [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n        <ng-container \n        *ngFor=\"let item of items()\">\n            <rte-radio-button\n                [label]=\"item\"\n                [groupName]=\"groupName()\"\n                [showLabel]=\"showItemsLabel()\"\n                [disabled]=\"disabled()\"\n                [error]=\"error()\"\n                [readOnly]=\"readOnly()\"\n            />\n        </ng-container>\n    </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-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;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{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-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonGroupComponent, isStandalone: true, selector: "rte-radio-button-group", inputs: { groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 } }, ngImport: i0, template: "<div  \n    *ngIf=\"isDisplayed()\"\n    class=\"radio-button-group-container\">\n    <div\n        class=\"radio-button-group-header\"\n        [ngClass]=\"{\n            'disabled': disabled(),\n            'error': error(),\n            'read-only': readOnly(),\n        }\">\n        <h3\n            *ngIf=\"showGroupTitle()\"\n            class=\"group-title\"\n            >\n            {{ groupTitle() }}\n        </h3>\n        <p\n            *ngIf=\"showHelpText()\"\n            class=\"group-help-text\"\n            >\n            {{ groupHelpText() }}\n\n        </p>\n        <p\n            *ngIf=\"error()\"\n            class=\"group-error-message\"\n            >\n            {{ errorMessage() }}\n        </p>\n    </div>\n    <div class=\"radio-button-group\" \n        [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n        <ng-container \n        *ngFor=\"let item of items()\">\n            <rte-radio-button\n                [label]=\"item\"\n                [groupName]=\"groupName()\"\n                [showLabel]=\"showItemsLabel()\"\n                [disabled]=\"disabled()\"\n                [error]=\"error()\"\n                [readOnly]=\"readOnly()\"\n            />\n        </ng-container>\n    </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-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;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{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-danger-default);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioButtonComponent, selector: "rte-radio-button", inputs: ["label", "groupName", "showLabel", "disabled", "error", "readOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div  \n    *ngIf=\"isDisplayed()\"\n    class=\"radio-button-group-container\">\n    <div\n        class=\"radio-button-group-header\"\n        [ngClass]=\"{\n            'disabled': disabled(),\n            'error': error(),\n            'read-only': readOnly(),\n        }\">\n        <h3\n            *ngIf=\"showGroupTitle()\"\n            class=\"group-title\"\n            >\n            {{ groupTitle() }}\n        </h3>\n        <p\n            *ngIf=\"showHelpText()\"\n            class=\"group-help-text\"\n            >\n            {{ groupHelpText() }}\n\n        </p>\n        <p\n            *ngIf=\"error()\"\n            class=\"group-error-message\"\n            >\n            {{ errorMessage() }}\n        </p>\n    </div>\n    <div class=\"radio-button-group\" \n        [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n        <ng-container \n        *ngFor=\"let item of items()\">\n            <rte-radio-button\n                [label]=\"item\"\n                [groupName]=\"groupName()\"\n                [showLabel]=\"showItemsLabel()\"\n                [disabled]=\"disabled()\"\n                [error]=\"error()\"\n                [readOnly]=\"readOnly()\"\n            />\n        </ng-container>\n    </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-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;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{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-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
+            args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div  \n    *ngIf=\"isDisplayed()\"\n    class=\"radio-button-group-container\">\n    <div\n        class=\"radio-button-group-header\"\n        [ngClass]=\"{\n            'disabled': disabled(),\n            'error': error(),\n            'read-only': readOnly(),\n        }\">\n        <h3\n            *ngIf=\"showGroupTitle()\"\n            class=\"group-title\"\n            >\n            {{ groupTitle() }}\n        </h3>\n        <p\n            *ngIf=\"showHelpText()\"\n            class=\"group-help-text\"\n            >\n            {{ groupHelpText() }}\n\n        </p>\n        <p\n            *ngIf=\"error()\"\n            class=\"group-error-message\"\n            >\n            {{ errorMessage() }}\n        </p>\n    </div>\n    <div class=\"radio-button-group\" \n        [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n        <ng-container \n        *ngFor=\"let item of items()\">\n            <rte-radio-button\n                [label]=\"item\"\n                [groupName]=\"groupName()\"\n                [showLabel]=\"showItemsLabel()\"\n                [disabled]=\"disabled()\"\n                [error]=\"error()\"\n                [readOnly]=\"readOnly()\"\n            />\n        </ng-container>\n    </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-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;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{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-danger-default);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger-default)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
         }] });
 
 class CheckboxComponent {
@@ -564,11 +563,11 @@ class CheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CheckboxComponent, isStandalone: true, selector: "rte-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            class=\"rte-checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-checkbox-label\" \n            [for]=\"id()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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-primary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{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;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{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;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CheckboxComponent, isStandalone: true, selector: "rte-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            class=\"rte-checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-checkbox-label\" \n            [for]=\"id()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger-default);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger-default);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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-primary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{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;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{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;font-weight:700;margin:0;color:var(--content-danger-default)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\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: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            class=\"rte-checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-checkbox-label\" \n            [for]=\"id()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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-primary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{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;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{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;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
+            args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            class=\"rte-checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-checkbox-label\" \n            [for]=\"id()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger-default);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger-default);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{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-primary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{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;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{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;font-weight:700;margin:0;color:var(--content-danger-default)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
         }] });
 
 class CheckboxGroupComponent {
@@ -587,30 +586,42 @@ class CheckboxGroupComponent {
         this.isDisplayed = computed(() => !(this.disabled() && this.error()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CheckboxGroupComponent, isStandalone: true, selector: "rte-checkbox-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 } }, ngImport: i0, template: "<div  \n  *ngIf=\"isDisplayed()\"\n  class=\"checkbox-group-container\">\n  <div\n    class=\"checkbox-group-header\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'error': error(),\n        'read-only': readOnly(),\n    }\">\n    <h3\n        *ngIf=\"showGroupTitle()\"\n        class=\"group-title\"\n        >\n        {{ groupTitle() }}\n    </h3>\n    <p\n        *ngIf=\"showHelpText()\"\n        class=\"group-help-text\"\n        >\n        {{ groupHelpText() }}\n\n    </p>\n    <p\n        *ngIf=\"error()\"\n        class=\"group-error-message\"\n        >\n        {{ errorMessage() }}\n    </p>\n  </div>\n  <div class=\"checkbox-group\" \n    [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n    <ng-container \n    *ngFor=\"let item of items(); let i = index\">\n      <rte-checkbox\n        [id]=\"item + '-' + i\"\n        [label]=\"item\"\n        [showLabel]=\"showItemsLabel()\"\n        [disabled]=\"disabled()\"\n        [error]=\"error()\"\n        [readOnly]=\"readOnly()\"\n      />\n    </ng-container>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{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-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CheckboxGroupComponent, isStandalone: true, selector: "rte-checkbox-group", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, showItemsLabel: { classPropertyName: "showItemsLabel", publicName: "showItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, showGroupTitle: { classPropertyName: "showGroupTitle", publicName: "showGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, groupHelpText: { classPropertyName: "groupHelpText", publicName: "groupHelpText", isSignal: true, isRequired: false, transformFunction: null }, showHelpText: { classPropertyName: "showHelpText", publicName: "showHelpText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 } }, ngImport: i0, template: "<div  \n  *ngIf=\"isDisplayed()\"\n  class=\"checkbox-group-container\">\n  <div\n    class=\"checkbox-group-header\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'error': error(),\n        'read-only': readOnly(),\n    }\">\n    <h3\n        *ngIf=\"showGroupTitle()\"\n        class=\"group-title\"\n        >\n        {{ groupTitle() }}\n    </h3>\n    <p\n        *ngIf=\"showHelpText()\"\n        class=\"group-help-text\"\n        >\n        {{ groupHelpText() }}\n\n    </p>\n    <p\n        *ngIf=\"error()\"\n        class=\"group-error-message\"\n        >\n        {{ errorMessage() }}\n    </p>\n  </div>\n  <div class=\"checkbox-group\" \n    [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n    <ng-container \n    *ngFor=\"let item of items(); let i = index\">\n      <rte-checkbox\n        [id]=\"item + '-' + i\"\n        [label]=\"item\"\n        [showLabel]=\"showItemsLabel()\"\n        [disabled]=\"disabled()\"\n        [error]=\"error()\"\n        [readOnly]=\"readOnly()\"\n      />\n    </ng-container>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{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-danger-default);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div  \n  *ngIf=\"isDisplayed()\"\n  class=\"checkbox-group-container\">\n  <div\n    class=\"checkbox-group-header\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'error': error(),\n        'read-only': readOnly(),\n    }\">\n    <h3\n        *ngIf=\"showGroupTitle()\"\n        class=\"group-title\"\n        >\n        {{ groupTitle() }}\n    </h3>\n    <p\n        *ngIf=\"showHelpText()\"\n        class=\"group-help-text\"\n        >\n        {{ groupHelpText() }}\n\n    </p>\n    <p\n        *ngIf=\"error()\"\n        class=\"group-error-message\"\n        >\n        {{ errorMessage() }}\n    </p>\n  </div>\n  <div class=\"checkbox-group\" \n    [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n    <ng-container \n    *ngFor=\"let item of items(); let i = index\">\n      <rte-checkbox\n        [id]=\"item + '-' + i\"\n        [label]=\"item\"\n        [showLabel]=\"showItemsLabel()\"\n        [disabled]=\"disabled()\"\n        [error]=\"error()\"\n        [readOnly]=\"readOnly()\"\n      />\n    </ng-container>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{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-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
+            args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div  \n  *ngIf=\"isDisplayed()\"\n  class=\"checkbox-group-container\">\n  <div\n    class=\"checkbox-group-header\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'error': error(),\n        'read-only': readOnly(),\n    }\">\n    <h3\n        *ngIf=\"showGroupTitle()\"\n        class=\"group-title\"\n        >\n        {{ groupTitle() }}\n    </h3>\n    <p\n        *ngIf=\"showHelpText()\"\n        class=\"group-help-text\"\n        >\n        {{ groupHelpText() }}\n\n    </p>\n    <p\n        *ngIf=\"error()\"\n        class=\"group-error-message\"\n        >\n        {{ errorMessage() }}\n    </p>\n  </div>\n  <div class=\"checkbox-group\" \n    [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n    <ng-container \n    *ngFor=\"let item of items(); let i = index\">\n      <rte-checkbox\n        [id]=\"item + '-' + i\"\n        [label]=\"item\"\n        [showLabel]=\"showItemsLabel()\"\n        [disabled]=\"disabled()\"\n        [error]=\"error()\"\n        [readOnly]=\"readOnly()\"\n      />\n    </ng-container>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-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;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{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-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{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-danger-default);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger-default)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
         }] });
 
 class OverlayService {
     constructor() {
         this.activeOverlays = new Set();
+        this.isNavigationFrozen = false;
     }
-    getOverlayRoot() {
+    getOverlayRoot(freezeNavigation) {
         if (!this.overlayRoot) {
             this.overlayRoot = document.getElementById("overlay-root");
             if (!this.overlayRoot) {
                 this.overlayRoot = document.createElement("div");
                 this.overlayRoot.id = "overlay-root";
+                this.overlayRoot.tabIndex = -1;
+                if (freezeNavigation) {
+                    this.isNavigationFrozen = true;
+                    this.overlayRoot.style.position = "fixed";
+                    this.overlayRoot.style.width = "100%";
+                    this.overlayRoot.style.height = "100%";
+                    this.overlayRoot.style.top = "0";
+                    this.overlayRoot.style.left = "0";
+                    this.overlayRoot.style.zIndex = "999";
+                    document.body.style.overflow = "hidden";
+                }
                 document.body.appendChild(this.overlayRoot);
             }
         }
         return this.overlayRoot;
     }
-    create(component, viewContainer) {
-        const root = this.getOverlayRoot();
+    create(component, viewContainer, freezeNavigation = false) {
+        const root = this.getOverlayRoot(freezeNavigation);
         const componentRef = viewContainer.createComponent(component);
         root.appendChild(componentRef.location.nativeElement);
         this.activeOverlays.add(componentRef);
@@ -623,6 +634,9 @@ class OverlayService {
     }
     destroy() {
         if (this.activeOverlays.size === 0) {
+            if (this.isNavigationFrozen) {
+                document.body.style.overflow = "unset";
+            }
             this.overlayRoot?.remove();
             this.overlayRoot = undefined;
         }
@@ -668,6 +682,7 @@ class TooltipDirective {
         this.rteTooltipPosition = input("auto");
         this.rteTooltipAlignment = input("center");
         this.rteTooltipArrow = input(true);
+        this.rteTooltipShouldFocusTrigger = input(true);
         this.tooltipRef = null;
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
@@ -675,12 +690,25 @@ class TooltipDirective {
         this.cdr = inject(ChangeDetectorRef);
         this.overlayService = inject(OverlayService);
         this.hostElement = this.elementRef.nativeElement;
-        this.hostElement.setAttribute("tabindex", "0");
     }
     ngAfterViewInit() {
+        if (!this.rteTooltipShouldFocusTrigger()) {
+            this.renderer.setAttribute(this.hostElement, "tabindex", "-1");
+            const focusableTrigger = this.hostElement.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY)[0];
+            focusableTrigger.addEventListener("focus", () => this.onFocus());
+            focusableTrigger.addEventListener("blur", () => this.onBlur());
+        }
+        else {
+            this.renderer.setAttribute(this.hostElement, "tabindex", "0");
+        }
         window.addEventListener("scroll", this.positionTooltip.bind(this));
     }
     ngOnDestroy() {
+        if (!this.rteTooltipShouldFocusTrigger()) {
+            const focusableTrigger = this.hostElement.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY)[0];
+            focusableTrigger.removeEventListener("focus", () => this.onFocus());
+            focusableTrigger.removeEventListener("blur", () => this.onBlur());
+        }
         window.removeEventListener("scroll", this.positionTooltip.bind(this));
     }
     showTooltip() {
@@ -726,7 +754,7 @@ class TooltipDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[rteTooltip]", inputs: { rteTooltip: { classPropertyName: "rteTooltip", publicName: "rteTooltip", isSignal: true, isRequired: true, transformFunction: null }, rteTooltipPosition: { classPropertyName: "rteTooltipPosition", publicName: "rteTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipAlignment: { classPropertyName: "rteTooltipAlignment", publicName: "rteTooltipAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipArrow: { classPropertyName: "rteTooltipArrow", publicName: "rteTooltipArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: TooltipDirective, isStandalone: true, selector: "[rteTooltip]", inputs: { rteTooltip: { classPropertyName: "rteTooltip", publicName: "rteTooltip", isSignal: true, isRequired: true, transformFunction: null }, rteTooltipPosition: { classPropertyName: "rteTooltipPosition", publicName: "rteTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipAlignment: { classPropertyName: "rteTooltipAlignment", publicName: "rteTooltipAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipArrow: { classPropertyName: "rteTooltipArrow", publicName: "rteTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipShouldFocusTrigger: { classPropertyName: "rteTooltipShouldFocusTrigger", publicName: "rteTooltipShouldFocusTrigger", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
@@ -748,262 +776,453 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ["blur"]
             }] } });
 
-class SplitButtonComponent {
+class DividerComponent {
     constructor() {
-        this.appearance = input("primary");
-        this.size = input("m");
-        this.label = input.required();
-        this.compactSpacing = input(false);
-        this.selected = input(false);
-        this.position = input("bottom-start");
-        this.icon = input(null);
-        this.disabled = input(false);
-        this.ariaLabelRight = input();
-        this.splitButtonLeftIconSize = computed(() => splitButtonLeftIconSize[this.size()]);
-        this.splitButtonRightIconSize = computed(() => splitButtonRightIconSize[this.size()]);
-        this.isOpen = signal(false);
-    }
-    handleKeyDownOnRightButton(event) {
-        this.handleKeyDown(event, "ArrowDown", () => this.isOpen.set(true));
-        this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
+        this.orientation = input("horizontal");
+        this.thickness = input("light");
+        this.appearance = input("default");
+        this.endPoint = input("round");
+        this.isHorizontal = computed(() => this.orientation() === "horizontal");
     }
-    handleKeyDownOnMenu(event) {
-        this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DividerComponent, isStandalone: true, selector: "rte-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isHorizontal()) {\n  <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n  <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-divider", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isHorizontal()) {\n  <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n  <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.horizontal.brand{border-top-color:var(--border-brand-default)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}.vertical.brand{background-color:var(--border-brand-default)}\n"] }]
+        }] });
+
+class DropdownItemComponent {
+    constructor() {
+        this.item = input();
+        this.menuId = input();
+        this.itemEvent = output();
     }
-    handleKeyDown(event, key, callback) {
-        if (event.key === key) {
+    handleClick(event) {
+        if (this.item()?.disabled) {
             event.preventDefault();
-            callback();
+            event.stopPropagation();
+            return;
         }
+        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: 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 }, selected: { classPropertyName: "selected", publicName: "selected", 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 } }, 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 \n      *ngIf=\"icon()\"\n      [name]=\"icon()!\"\n      [size]=\"splitButtonLeftIconSize()\"\n    />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{label()}}\n    </p>\n  </button>\n\n  <div \n    class=\"split-button-divider\"\n    [ngClass]=\"{'disabled': disabled()}\"\n  ></div>\n\n  <div class=\"split-button-right-container\">\n    <button\n      class=\"split-button-right size-{{ size() }}\"\n      data-testid=\"Menu button\"\n      type=\"button\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"ariaLabelRight()\"\n      [attr.data-selected]=\"selected()\"\n      [disabled]=\"disabled()\"\n      (click)=\"isOpen.set(true)\"\n      (mouseenter)=\"isOpen.set(true)\"\n      (mouseleave)=\"isOpen.set(false)\"\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    <div\n      class=\"split-button-dropdown position-{{ position() }}\"\n      role=\"menu\"\n      data-testid=\"Menu container\"\n      [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n      (keydown)=\"handleKeyDownOnMenu($event)\"\n    >\n      <ng-content/>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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.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-container .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-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-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-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{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus: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-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;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-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-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-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus: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-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    handleKeyDown(event) {
+        event.preventDefault();
+        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            if (this.item()?.link) {
+                const link = event.target.closest("li")?.querySelector("a");
+                link?.click();
+            }
+            else {
+                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\">{{ item()?.label }} </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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent], 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 \n      *ngIf=\"icon()\"\n      [name]=\"icon()!\"\n      [size]=\"splitButtonLeftIconSize()\"\n    />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{label()}}\n    </p>\n  </button>\n\n  <div \n    class=\"split-button-divider\"\n    [ngClass]=\"{'disabled': disabled()}\"\n  ></div>\n\n  <div class=\"split-button-right-container\">\n    <button\n      class=\"split-button-right size-{{ size() }}\"\n      data-testid=\"Menu button\"\n      type=\"button\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"ariaLabelRight()\"\n      [attr.data-selected]=\"selected()\"\n      [disabled]=\"disabled()\"\n      (click)=\"isOpen.set(true)\"\n      (mouseenter)=\"isOpen.set(true)\"\n      (mouseleave)=\"isOpen.set(false)\"\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    <div\n      class=\"split-button-dropdown position-{{ position() }}\"\n      role=\"menu\"\n      data-testid=\"Menu container\"\n      [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n      (keydown)=\"handleKeyDownOnMenu($event)\"\n    >\n      <ng-content/>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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.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-container .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-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-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-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{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus: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-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:4px 12px;align-items:center;justify-content:center;align-self:stretch;width:34px;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-container .split-button-right.size-s{width:24px;padding:2px 8px}.split-button-container .split-button-right-container .split-button-right.size-l{width:44px;padding:6px 16px}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-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-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus: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-container .split-button-right .split-button-right-icon-container{display:flex;pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.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"] }]
+            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\">{{ item()?.label }} </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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }]
         }] });
 
-class IconButtonComponent {
+class DropdownService {
     constructor() {
-        this.disabled = input(false);
-        this.name = input.required();
-        this.size = input("m");
-        this.variant = input("primary");
-        this.type = input("button");
-        this.appearance = input("outlined");
-        this.compactSpacing = input(false);
-        this.ariaLabel = input(undefined);
-        this.ariaLabelledBy = input(undefined);
-        this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
-        this.isValidIconName = computed(() => isValidIconName(this.name()));
-        this.click = output();
+        this.initialState = {
+            activeMenuId: "",
+        };
+        this.state$ = new BehaviorSubject(this.initialState);
+        this.activeMenuId$ = this.state$.pipe(map((state) => state?.activeMenuId));
     }
-    onClick(event) {
-        event.stopPropagation();
-        this.click.emit(event);
+    openMenu(menuId) {
+        this.state$.next({
+            activeMenuId: menuId,
+        });
     }
-    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.1.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 } }, outputs: { click: "click" }, ngImport: i0, template: "<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\n    [name]=\"name()\"\n    [appearance]=\"appearance()\"\n    [size]=\"buttonIconSize()\"\n  />\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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-press)}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    closeAllMenus() {
+        this.state$.next(null);
+    }
+    isMenuActive(menuId) {
+        return this.activeMenuId$.pipe(map((activeId) => activeId === menuId));
+    }
+    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)) {
+            this.handleKeyboardNavigation(key, options);
+        }
+        if (key === ESCAPE_KEY) {
+            this.closeAllMenus();
+        }
+    }
+    handleKeyboardNavigation(key, options) {
+        const { menuElement } = options;
+        const nativeElement = menuElement?.nativeElement;
+        switch (key) {
+            case ARROW_DOWN_KEY:
+                this.focusNextElement(nativeElement);
+                break;
+            case ARROW_UP_KEY:
+                this.focusPreviousElement(nativeElement);
+                break;
+        }
+    }
+    focusNextElement(element) {
+        if (!element)
+            return;
+        const focusableElements = this.getFocusableElements(element);
+        const currentIndex = focusableElements.indexOf(document.activeElement);
+        const nextIndex = currentIndex + 1 < focusableElements.length ? currentIndex + 1 : 0;
+        focusableElements[nextIndex]?.focus();
+    }
+    focusPreviousElement(element) {
+        if (!element)
+            return;
+        const focusableElements = this.getFocusableElements(element);
+        const currentIndex = focusableElements.indexOf(document.activeElement);
+        const previousIndex = currentIndex ? currentIndex - 1 : focusableElements.length - 1;
+        focusableElements[previousIndex]?.focus();
+    }
+    getFocusableElements(element) {
+        const menuId = element.dataset["menuId"];
+        return Array.from(element.querySelectorAll("li")).filter((el) => {
+            const closestMenu = el.closest("[data-menu-id]");
+            return closestMenu?.dataset["menuId"] === menuId;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownService, providedIn: "root" }); }
 }
-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], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<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\n    [name]=\"name()\"\n    [appearance]=\"appearance()\"\n    [size]=\"buttonIconSize()\"\n  />\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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-press)}.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"] }]
+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
+                }]
         }] });
 
-class IconButtonToggleComponent {
+class DropdownMenuComponent {
     constructor() {
-        this.disabled = input(false);
-        this.name = input.required();
-        this.size = input("m");
-        this.variant = input("primary");
-        this.type = input("button");
-        this.compactSpacing = input(false);
-        this.ariaLabel = input();
-        this.ariaLabelledBy = input();
-        this.selected = input();
-        this.internalSelected = signal(false);
-        this.defaultSelected = input(false);
-        this.isControlled = computed(() => this.selected() !== undefined);
-        this.click = output();
-        this.isSelected = computed(() => {
-            return this.isControlled() ? this.selected() : this.internalSelected();
-        });
-        this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
+        this.elementRef = inject(ElementRef);
+        this.dropdownService = inject(DropdownService);
+        this.items = input([]);
+        this.menuId = input();
+        this.itemEvent = output();
     }
-    toggleInternalSelectedState() {
-        this.internalSelected.set(!this.internalSelected());
+    getChildMenuId(itemIndex) {
+        return `${this.menuId()}:${itemIndex + 1}`;
     }
-    onClick(event) {
-        event.stopPropagation();
-        this.click.emit(event);
-        if (!this.isControlled()) {
-            this.toggleInternalSelectedState();
+    handleItemEvent(itemEvent) {
+        this.itemEvent.emit(itemEvent);
+    }
+    onKeyDown(event) {
+        if (!event.target || !this.menuId()) {
+            return;
+        }
+        if ([ARROW_UP_KEY, ARROW_DOWN_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, TAB_KEY].includes(event.key)) {
+            event.preventDefault();
         }
+        const menuId = this.menuId();
+        this.dropdownService.handleKeyboardInput(event.key, {
+            menuElement: this.elementRef,
+            menuId,
+        });
     }
-    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/>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 \n    class=\"rte-dropdown-items\"\n    role=\"menu\" \n    [attr.aria-activedescendant]=\"menuId()\"\n  >\n    @for (item of items(); track item.label; let i = $index) {\n      <rte-dropdown-item \n        [item]=\"item\"\n        (itemEvent)=\"handleItemEvent($event)\"\n      />\n    }\n  </ul>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{opacity:0;display:none;position:absolute}.rte-dropdown-menu{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.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, 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/>" }]
-        }] });
+            args: [{ selector: "rte-dropdown-menu", imports: [CommonModule, DropdownItemComponent], standalone: true, host: { "[attr.data-menu-id]": "menuId()" }, template: "<div class=\"rte-dropdown-menu\">\n  <ul \n    class=\"rte-dropdown-items\"\n    role=\"menu\" \n    [attr.aria-activedescendant]=\"menuId()\"\n  >\n    @for (item of items(); track item.label; let i = $index) {\n      <rte-dropdown-item \n        [item]=\"item\"\n        (itemEvent)=\"handleItemEvent($event)\"\n      />\n    }\n  </ul>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{opacity:0;display:none;position:absolute}.rte-dropdown-menu{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.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"] }]
+        }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }] } });
 
-class TextInputComponent {
+class DropdownTriggerDirective {
     constructor() {
-        this.id = input();
-        this.label = input("");
-        this.labelPosition = input("top");
-        this.required = input(false);
-        this.showCounter = input(false);
-        this.value = input("");
-        this.internalValue = signal(this.value());
-        this.leftIcon = input(null);
-        this.showRightIcon = input(true);
-        this.rightIconAction = input("clean");
-        this.showLabelRequirement = input(false);
-        this.assistiveAppearance = input("description");
-        this.showAssistiveIcon = input(false);
-        this.assistiveTextLabel = input("");
-        this.error = input(false);
-        this.maxLength = input(150);
-        this.disabled = input(false);
-        this.readOnly = input(false);
-        this.width = input("300px");
-        this.ariaLabel = input("");
-        this.ariaRequired = input(false);
-        this.ariaLabelledby = input("");
-        this.valueChange = output();
-        this.rightIconClick = output();
-        this.characterCount = signal(this.internalValue().length);
-        this.isHiddenInput = signal(this.showRightIcon() && this.rightIconAction() === "visibilityOn");
-        this.displayedLeftIcon = computed(() => (this.error() ? "error" : this.leftIcon()));
-        this.displayCounter = computed(() => this.showCounter() && typeof this.maxLength() === "number");
-        this.rightIconName = computed(() => {
-            if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
-                return this.isHiddenInput() ? "visibility-show" : "visibility-hide";
-            }
-            else if (this.rightIconAction() === "clean") {
-                return "close";
-            }
-            return "";
-        });
-        this.rightIconAriaLabel = computed(() => {
-            if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
-                return this.isHiddenInput() ? "show text" : "hide text";
+        this.elementRef = inject(ElementRef);
+        this.rteDropdownTriggerActivateWithArrowDown = input(false);
+        this.dropdownKeyDown = output();
+        this.dropdownTriggered = output();
+        this.dropdownTriggerFocus = output();
+    }
+    onDropdownTriggered(event) {
+        this.dropdownTriggered.emit(event);
+    }
+    onDropdownTriggerFocus(event) {
+        this.dropdownTriggerFocus.emit(event);
+    }
+    onKeyDown(event) {
+        this.dropdownKeyDown.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteDropdownTrigger]",
+                    standalone: true,
+                }]
+        }], propDecorators: { onDropdownTriggered: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }], onDropdownTriggerFocus: [{
+                type: HostListener,
+                args: ["focus", ["$event"]]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }] } });
+
+const focusNextElement = (dropdown) => {
+    const menuItems = getDropdownMenuItems(dropdown);
+    const activeElementIndex = menuItems.indexOf(document.activeElement);
+    if (activeElementIndex < menuItems.length - 1) {
+        const nextElement = menuItems[activeElementIndex + 1];
+        nextElement.focus();
+    }
+    else {
+        menuItems[0]?.focus();
+    }
+};
+const focusPreviousElement = (dropdown) => {
+    const menuItems = getDropdownMenuItems(dropdown);
+    const activeElementIndex = menuItems.indexOf(document.activeElement);
+    if (activeElementIndex > 0) {
+        const previousElement = menuItems[activeElementIndex - 1];
+        previousElement.focus();
+    }
+    else {
+        menuItems.at(-1)?.focus();
+    }
+};
+const focusDropdownFirstElement = (dropdownId) => {
+    const childDropdown = document.querySelector(`[data-menu-id='${dropdownId}']`);
+    if (childDropdown) {
+        const allChildDropdownElement = childDropdown?.querySelectorAll('li[role="menuitem"]');
+        allChildDropdownElement[0]?.focus();
+    }
+};
+const focusParentDropdownFirstElement = (dropdownId) => {
+    const parentDropdownId = DropdownManager.getParentDropdownId(dropdownId);
+    const parentDropdown = document.querySelector(`[data-menu-id='${parentDropdownId}']`);
+    parentDropdown?.querySelector("[data-active=true]")?.focus();
+};
+const getDropdownMenuItems = (dropdown) => {
+    const allDropdownElement = dropdown?.querySelectorAll('li[role="menuitem"]');
+    return allDropdownElement ? Array.from(allDropdownElement) : [];
+};
+
+class DropdownDirective {
+    static { this.idCounter = 0; }
+    constructor() {
+        this.trigger = contentChild(DropdownTriggerDirective);
+        this.menu = contentChild(DropdownMenuComponent);
+        this.rteDropdownPosition = input("bottom");
+        this.rteDropdownAlignment = input("start");
+        this.rteDropdownIsOpen = input(false);
+        this.rteDropdownOffset = input(0);
+        this.dropdownId = `dropdown_${++DropdownDirective.idCounter}`;
+        this.menuEvent = output();
+        this.overlayService = inject(OverlayService);
+        this.dropdownService = inject(DropdownService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.dropdownMenuRef = null;
+        this.handleClickOutside = (event) => {
+            const target = event.target;
+            const isMenuItemClick = target.closest(".rte-dropdown-item") !== null;
+            if (isMenuItemClick) {
+                return;
             }
-            else if (this.rightIconAction() === "clean") {
-                return "clear";
+            const clickedInTrigger = this.hostElement.contains(target);
+            if (!clickedInTrigger) {
+                this.closeDropdown();
             }
-            return "";
+        };
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    onTrigger() {
+        this.showDropdownMenu();
+    }
+    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));
+            });
+        }
+    }
+    onMenuEvent(event) {
+        this.menuEvent.emit(event);
+        this.dropdownService.closeAllMenus();
+    }
+    ngAfterContentInit() {
+        if (this.trigger()) {
+            this.trigger()?.dropdownTriggered.subscribe(() => {
+                this.onTrigger();
+            });
+            this.trigger()?.dropdownKeyDown.subscribe((event) => {
+                this.onTriggerKeyEvent(event);
+            });
+        }
+    }
+    showDropdownMenu() {
+        if (this.dropdownMenuRef) {
+            this.dropdownMenuRef.destroy();
+        }
+        this.dropdownMenuRef = this.overlayService.create(DropdownMenuComponent, this.viewContainerRef);
+        const menuId = this.dropdownId;
+        this.dropdownMenuRef.setInput("menuId", menuId);
+        this.dropdownService.openMenu(menuId);
+        this.assignItems();
+        this.positionDropdownMenu(this.rteDropdownPosition());
+        this.addClickOutsideListener();
+        this.dropdownMenuRef.instance.itemEvent.subscribe((event) => {
+            this.onMenuEvent(event);
         });
-        this.shouldShowRightIcon = computed(() => {
-            if (this.readOnly() || this.disabled()) {
-                return false;
-            }
-            if (this.rightIconAction() === "clean") {
-                return !!this.internalValue()?.length && this.showRightIcon();
+        const dropdownStateSubscription = this.dropdownService.state$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((state) => {
+            if (state === null) {
+                if (this.dropdownMenuRef) {
+                    this.dropdownMenuRef.destroy();
+                    this.dropdownMenuRef = null;
+                    this.removeClickOutsideListener();
+                    dropdownStateSubscription.unsubscribe();
+                }
             }
-            return this.showRightIcon() && !!this.rightIconAction();
         });
-        this.lastParentValue = this.value();
-        effect(() => {
-            const parentValue = this.value();
-            if (parentValue !== this.lastParentValue) {
-                this.lastParentValue = parentValue;
-                this.internalValue.set(parentValue);
+    }
+    assignItems() {
+        if (this.dropdownMenuRef) {
+            this.dropdownMenuRef.setInput("items", this.menu()?.items());
+        }
+    }
+    positionDropdownMenu(position = "bottom") {
+        if (this.dropdownMenuRef && this.trigger()) {
+            const dropdownMenuElement = this.dropdownMenuRef.location.nativeElement;
+            const triggerElement = this.trigger()?.elementRef.nativeElement;
+            if (triggerElement) {
+                this.renderer.setStyle(dropdownMenuElement, "display", "block");
+                this.cdr.detectChanges();
+                const computedPosition = position === "auto" ? getAutoPlacementDropdown(triggerElement, dropdownMenuElement, "bottom") : position;
+                const autoAlignment = this.rteDropdownAlignment() ?? getAutoAlignment(triggerElement, dropdownMenuElement, computedPosition);
+                const computedCoordinates = getCoordinates(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
+                this.renderer.setStyle(dropdownMenuElement, "top", `${computedCoordinates.top}px`);
+                this.renderer.setStyle(dropdownMenuElement, "left", `${computedCoordinates.left}px`);
+                this.renderer.setStyle(dropdownMenuElement, "opacity", "1");
             }
-        }, { allowSignalWrites: true });
+        }
     }
-    handleChange(event) {
-        const input = event.target;
-        this.internalValue.set(input.value);
-        this.valueChange.emit(input.value);
-        if (this.maxLength()) {
-            this.characterCount.set(input.value.length);
+    ngOnDestroy() {
+        this.removeClickOutsideListener();
+        if (this.dropdownMenuRef) {
+            this.dropdownMenuRef.destroy();
         }
-        this.valueChange.emit(input.value);
     }
-    onRightIconClickHandler() {
-        this.rightIconClick.emit();
-        this.triggerRightIconAction();
+    addClickOutsideListener() {
+        document.addEventListener("mousedown", this.handleClickOutside);
     }
-    toggleInputVisibility() {
-        this.isHiddenInput.set(!this.isHiddenInput());
+    removeClickOutsideListener() {
+        document.removeEventListener("mousedown", this.handleClickOutside);
     }
-    triggerRightIconAction() {
-        if (this.rightIconAction() === "clean") {
-            this.internalValue.set("");
-            this.valueChange.emit("");
-            this.characterCount.set(0);
-        }
-        if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
-            this.toggleInputVisibility();
-        }
+    closeDropdown() {
+        this.dropdownService.closeAllMenus();
     }
-    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\n  class=\"container {{labelPosition()}}\"\n  [ngClass]=\"{'error': error()}\"\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\">\n          {{ characterCount() }}/{{ maxLength() }}\n        </p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div\n      class=\"input {{labelPosition()}}\"\n      [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n    >\n      <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon\n            appearance=\"outlined\"\n            class=\"left-icon\"\n            aria-hidden=\"true\"\n            [name]=\"displayedLeftIcon()!\"\n          />\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\">\n      {{ characterCount() }}/{{ maxLength() }}\n    </p>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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)}.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);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)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);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);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"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "rte-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container {{labelPosition()}}\"\n  [ngClass]=\"{'error': error()}\"\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\">\n          {{ characterCount() }}/{{ maxLength() }}\n        </p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div\n      class=\"input {{labelPosition()}}\"\n      [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n    >\n      <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon\n            appearance=\"outlined\"\n            class=\"left-icon\"\n            aria-hidden=\"true\"\n            [name]=\"displayedLeftIcon()!\"\n          />\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\">\n      {{ characterCount() }}/{{ maxLength() }}\n    </p>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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)}.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);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)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);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);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"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteDropdown]",
+                    host: {
+                        "[class.dropdown]": "true",
+                        "[attr.data-dropdown-id]": "dropdownId",
+                    },
+                    standalone: true,
+                }]
         }], ctorParameters: () => [] });
 
-class ChipComponent {
+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] }); }
+}
+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],
+                }]
+        }] });
+
+// Main dropdown module - import this to get everything
+
+class SplitButtonComponent {
     constructor() {
-        this.id = input();
-        this.label = input("");
-        this.selected = input(false);
-        this.disabled = input(false);
-        this.type = input("single");
+        this.appearance = input("primary");
+        this.size = input("m");
+        this.label = input.required();
         this.compactSpacing = input(false);
-        this.click = output();
-        this.close = output();
-        this.isCheckable = computed(() => this.type() === "single" || this.type() === "multi");
-        this.role = computed(() => CHIP_TYPE_TO_ARIA_ROLE_MAP[this.type()] || null);
+        this.position = input("bottom-start");
+        this.icon = input(null);
+        this.disabled = input(false);
+        this.ariaLabelRight = input();
+        this.options = input([]);
+        this.splitButtonLeftIconSize = computed(() => splitButtonLeftIconSize[this.size()]);
+        this.splitButtonRightIconSize = computed(() => splitButtonRightIconSize[this.size()]);
+        this.isOpen = signal(false);
+        this.internalPosition = computed(() => {
+            return this.position().split("-")[0];
+        });
+        this.internalAlignment = computed(() => {
+            return this.position().split("-")[1];
+        });
     }
-    onClick(event) {
-        event.stopPropagation();
-        if (!this.disabled()) {
-            this.click.emit(event);
+    handleClickOutside(event) {
+        const target = event.target;
+        const allDropdowns = document.querySelectorAll("[data-dropdown-id]");
+        const clickedInside = Array.from(allDropdowns).some((dropdown) => dropdown.contains(target));
+        if (!clickedInside) {
+            this.isOpen.set(false);
         }
     }
-    onKeyUp(event) {
-        event.preventDefault();
-        if (!this.disabled()) {
-            if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
-                const target = event.target;
-                const isCloseButton = target.classList.contains("chip-close-button");
-                if (isCloseButton) {
-                    target.click();
-                }
-                else {
-                    this.onClick(event);
-                }
-            }
-            else if ((event.key === BACKSPACE_KEY || event.key === DELETE_KEY) && this.type() === "input") {
-                const closeButton = event.target.querySelector(".chip-close-button");
-                if (closeButton) {
-                    closeButton.click();
-                }
-            }
-        }
+    ngOnInit() {
+        window.addEventListener("click", this.handleClickOutside.bind(this));
+    }
+    ngOnDestroy() {
+        window.removeEventListener("click", this.handleClickOutside.bind(this));
+    }
+    handleKeyDownOnRightButton(event) {
+        this.handleKeyDown(event, ARROW_DOWN_KEY, () => this.isOpen.set(true));
+        this.handleKeyDown(event, SPACE_KEY, () => this.isOpen.set(true));
+        this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
     }
-    onBlur(event) {
-        event.stopPropagation();
+    handleKeyDownOnMenu(event) {
+        this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
     }
-    onCloseClick(event) {
-        event.stopPropagation();
-        if (!this.disabled()) {
-            this.close.emit(event);
+    handleKeyDown(event, key, callback) {
+        if (event.key === key) {
+            event.preventDefault();
+            callback();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n  class=\"chip\"\n  tabindex=\"0\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"selected()\"\n        [attr.aria-hidden]=\"!selected()\"\n      >\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"!selected()\"\n        [attr.aria-hidden]=\"selected()\"\n      >\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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\n      *ngIf=\"icon()\"\n      [name]=\"icon()!\"\n      [size]=\"splitButtonLeftIconSize()\"\n    />\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\n          name=\"arrow-chevron-down\"\n          [size]=\"splitButtonRightIconSize()\"\n        />\n      </div>\n    </button>\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"chip\"\n  tabindex=\"0\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"selected()\"\n        [attr.aria-hidden]=\"!selected()\"\n      >\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"!selected()\"\n        [attr.aria-hidden]=\"selected()\"\n      >\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
+            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\n      *ngIf=\"icon()\"\n      [name]=\"icon()!\"\n      [size]=\"splitButtonLeftIconSize()\"\n    />\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\n          name=\"arrow-chevron-down\"\n          [size]=\"splitButtonRightIconSize()\"\n        />\n      </div>\n    </button>\n    <rte-dropdown-menu [items]=\"options()\" />\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 {
@@ -1095,584 +1314,502 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class TextareaComponent {
-    constructor() {
-        this.id = input(undefined);
-        this.name = input(undefined);
-        this.ariaLabelledby = input(undefined);
-        this.label = input(undefined);
-        this.labelId = input(undefined);
-        this.labelPosition = input("top");
-        this.assistiveTextLabel = input(undefined);
-        this.assistiveTextAppearance = input("description");
-        this.assistiveTextLink = input(undefined);
-        this.required = input(false);
-        this.showLabelRequirement = input(false);
-        this.resizeable = input(true);
-        this.maxLength = input(undefined);
-        this.disabled = input(false);
-        this.readOnly = input(false);
-        this.value = input(undefined);
-        this.rows = input(3);
-        this.defaultValue = input(undefined);
-        this.showCounter = input(false);
-        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);
-        this.change = output();
-        this.blur = output();
-        this.textareaRef = viewChild("textarea");
-        this.isAssistiveTextLinkVisible = computed(() => this.assistiveTextAppearance() === "link" && this.assistiveTextLink() !== undefined);
-        this.characterCount = 0;
-        this.isCounterVisible = computed(() => {
-            return this.showCounter() && this.maxLength();
-        });
-    }
-    onInput(event) {
-        const target = event.target;
-        this.characterCount = target.value.length;
-        this.change.emit(event);
-    }
-    onBlur(event) {
-        this.textareaRef()?.nativeElement?.scrollTo({ top: 0 });
-        this.blur.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "rte-textarea", 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 }, resizeable: { classPropertyName: "resizeable", publicName: "resizeable", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", blur: "blur" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: TextareaComponent,
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container\" [attr.data-label-position]=\"labelPosition()\"> \n  <label *ngIf=\"label() && labelPosition() === 'side'\" [attr.data-label-position]=\"labelPosition()\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n  <div class=\"top-position-container\" [attr.data-label-position]=\"labelPosition()\">\n    <div class=\"header-container\" [attr.data-label-position]=\"labelPosition()\">\n      <label *ngIf=\"label() && labelPosition() === 'top'\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n      <span *ngIf=\"isCounterVisible()\" class=\"character-counter\">{{ characterCount }}/{{ maxLength() }}</span>\n    </div>\n    <div class=\"textarea-container\" [attr.data-label-position]=\"labelPosition()\">\n      <textarea\n      #textarea\n      class=\"textarea {{ assistiveTextAppearance() }}\"\n      [class.resizeable]=\"resizeable()\"\n      [attr.id]=\"id()\"\n      [attr.name]=\"name()\"\n      [attr.aria-labelledby]=\"labelId() || ariaLabelledby()\"\n      [attr.required]=\"required() || null\"\n      [attr.maxLength]=\"maxLength() !== undefined ? maxLength() : null\"\n      [attr.disabled]=\"disabled() || null\"\n      [attr.readonly]=\"readOnly() || null\"\n      [value]=\"value() !== undefined ? value() : null\"\n      [defaultValue]=\"defaultValue() !== undefined ? defaultValue() : null\"\n      [attr.rows]=\"rows()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      ></textarea>\n      <rte-link *ngIf=\"isAssistiveTextLinkVisible()\" class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"assistiveTextLink() || ''\" [label]=\"assistiveTextLabel() || ''\">\n      </rte-link>\n      <div *ngIf=\"assistiveTextAppearance() !== 'link'\" class=\"assistive-text {{ assistiveTextAppearance() }}\" [ngClass]=\"{'disabled' : disabled()}\">\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'error'\" name=\"error\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'success'\" name=\"check-circle\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <span>{{ assistiveTextLabel() }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container[data-label-position=side]{display:flex;flex-direction:row}.top-position-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;height:100%;padding:0;flex-direction:column;align-items:flex-start;gap:0px;flex-shrink:0;border-radius:0;opacity:100%}.top-position-container[data-label-position=side]{flex-grow:1}.top-position-container .header-container{display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box;gap:8px}.top-position-container .header-container[data-label-position=side]{padding:0;justify-content:flex-end}.top-position-container .textarea-container{display:flex;flex-direction:column;width:100%;align-items:flex-start}.top-position-container .textarea-container .textarea{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%);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-primary);min-height:70px;padding:8px 16px;width:100%;min-width:140px;border-radius:8px;border:1px solid var(--border-secondary);opacity:100%;background-color:var(--background-default);resize:none;box-sizing:border-box}@media (min-width: 1024px){.top-position-container .textarea-container .textarea{min-height:56px;min-width:112px;max-width:1100px}}.top-position-container .textarea-container .textarea:focus-visible,.top-position-container .textarea-container .textarea:active{outline:none}.top-position-container .textarea-container .textarea:focus-visible:not(:disabled),.top-position-container .textarea-container .textarea:active:not(:disabled){outline:1px solid var(--border-brand-default);border:1px solid var(--border-brand-default)}.top-position-container .textarea-container .textarea.error:not(:disabled){outline:1px solid var(--border-danger);border:1px solid var(--border-danger)}.top-position-container .textarea-container .textarea.resizeable{resize:vertical}.top-position-container .textarea-container .textarea:disabled,.top-position-container .textarea-container .textarea:read-only{cursor:not-allowed;background-color:var(--background-disabled)}.top-position-container .textarea-container .textarea:disabled{resize:none}.top-position-container .textarea-container .textarea:read-only{color:var(--content-secondary)}.top-position-container .textarea-container .assistive-text-link{padding:4px 8px}.top-position-container .textarea-container .assistive-text{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;display:flex;padding:4px 8px;color:var(--content-tertiary);gap:4px}.top-position-container .textarea-container .assistive-text.error:not(.disabled){color:var(--content-danger)}.top-position-container .textarea-container .assistive-text.success{color:var(--content-success)}.character-counter{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)}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;color:var(--content-secondary);max-width:300px;justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}label[data-label-position=side]{padding:24px 8px;align-items:flex-start;gap:0px;align-self:stretch}label .requirement-indicator{margin-left:2px}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)}label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger)}\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: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "rte-textarea", imports: [CommonModule, IconComponent, LinkComponent], standalone: true, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: TextareaComponent,
-                            multi: true,
-                        },
-                    ], template: "<div class=\"container\" [attr.data-label-position]=\"labelPosition()\"> \n  <label *ngIf=\"label() && labelPosition() === 'side'\" [attr.data-label-position]=\"labelPosition()\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n  <div class=\"top-position-container\" [attr.data-label-position]=\"labelPosition()\">\n    <div class=\"header-container\" [attr.data-label-position]=\"labelPosition()\">\n      <label *ngIf=\"label() && labelPosition() === 'top'\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n      <span *ngIf=\"isCounterVisible()\" class=\"character-counter\">{{ characterCount }}/{{ maxLength() }}</span>\n    </div>\n    <div class=\"textarea-container\" [attr.data-label-position]=\"labelPosition()\">\n      <textarea\n      #textarea\n      class=\"textarea {{ assistiveTextAppearance() }}\"\n      [class.resizeable]=\"resizeable()\"\n      [attr.id]=\"id()\"\n      [attr.name]=\"name()\"\n      [attr.aria-labelledby]=\"labelId() || ariaLabelledby()\"\n      [attr.required]=\"required() || null\"\n      [attr.maxLength]=\"maxLength() !== undefined ? maxLength() : null\"\n      [attr.disabled]=\"disabled() || null\"\n      [attr.readonly]=\"readOnly() || null\"\n      [value]=\"value() !== undefined ? value() : null\"\n      [defaultValue]=\"defaultValue() !== undefined ? defaultValue() : null\"\n      [attr.rows]=\"rows()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      ></textarea>\n      <rte-link *ngIf=\"isAssistiveTextLinkVisible()\" class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"assistiveTextLink() || ''\" [label]=\"assistiveTextLabel() || ''\">\n      </rte-link>\n      <div *ngIf=\"assistiveTextAppearance() !== 'link'\" class=\"assistive-text {{ assistiveTextAppearance() }}\" [ngClass]=\"{'disabled' : disabled()}\">\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'error'\" name=\"error\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'success'\" name=\"check-circle\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <span>{{ assistiveTextLabel() }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container[data-label-position=side]{display:flex;flex-direction:row}.top-position-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;height:100%;padding:0;flex-direction:column;align-items:flex-start;gap:0px;flex-shrink:0;border-radius:0;opacity:100%}.top-position-container[data-label-position=side]{flex-grow:1}.top-position-container .header-container{display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box;gap:8px}.top-position-container .header-container[data-label-position=side]{padding:0;justify-content:flex-end}.top-position-container .textarea-container{display:flex;flex-direction:column;width:100%;align-items:flex-start}.top-position-container .textarea-container .textarea{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%);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-primary);min-height:70px;padding:8px 16px;width:100%;min-width:140px;border-radius:8px;border:1px solid var(--border-secondary);opacity:100%;background-color:var(--background-default);resize:none;box-sizing:border-box}@media (min-width: 1024px){.top-position-container .textarea-container .textarea{min-height:56px;min-width:112px;max-width:1100px}}.top-position-container .textarea-container .textarea:focus-visible,.top-position-container .textarea-container .textarea:active{outline:none}.top-position-container .textarea-container .textarea:focus-visible:not(:disabled),.top-position-container .textarea-container .textarea:active:not(:disabled){outline:1px solid var(--border-brand-default);border:1px solid var(--border-brand-default)}.top-position-container .textarea-container .textarea.error:not(:disabled){outline:1px solid var(--border-danger);border:1px solid var(--border-danger)}.top-position-container .textarea-container .textarea.resizeable{resize:vertical}.top-position-container .textarea-container .textarea:disabled,.top-position-container .textarea-container .textarea:read-only{cursor:not-allowed;background-color:var(--background-disabled)}.top-position-container .textarea-container .textarea:disabled{resize:none}.top-position-container .textarea-container .textarea:read-only{color:var(--content-secondary)}.top-position-container .textarea-container .assistive-text-link{padding:4px 8px}.top-position-container .textarea-container .assistive-text{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;display:flex;padding:4px 8px;color:var(--content-tertiary);gap:4px}.top-position-container .textarea-container .assistive-text.error:not(.disabled){color:var(--content-danger)}.top-position-container .textarea-container .assistive-text.success{color:var(--content-success)}.character-counter{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)}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;color:var(--content-secondary);max-width:300px;justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}label[data-label-position=side]{padding:24px 8px;align-items:flex-start;gap:0px;align-self:stretch}label .requirement-indicator{margin-left:2px}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)}label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger)}\n"] }]
-        }] });
-
-class DividerComponent {
-    constructor() {
-        this.orientation = input("horizontal");
-        this.thickness = input("light");
-        this.appearance = input("default");
-        this.endPoint = input("round");
-        this.isHorizontal = computed(() => this.orientation() === "horizontal");
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DividerComponent, isStandalone: true, selector: "rte-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, endPoint: { classPropertyName: "endPoint", publicName: "endPoint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isHorizontal()) {\n  <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n  <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DividerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "rte-divider", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isHorizontal()) {\n  <hr class=\"horizontal {{thickness()}} {{appearance()}} {{endPoint()}}\" />\n} @else {\n  <div class=\"vertical {{thickness()}} {{appearance()}} {{endPoint()}}\" role=\"separator\"></div>\n}", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.horizontal{border:none;padding:0;margin:0;width:100%}.horizontal.round{border-radius:999px}.horizontal.light{border-top:1px solid var(--border-divider)}.horizontal.medium{border-top:2px solid var(--border-divider)}.horizontal.bold{border-top:4px solid var(--border-divider)}.horizontal.inverse{border-top-color:var(--border-inverse)}.vertical{height:100%;background-color:var(--border-divider);margin:0;padding:0}.vertical.round{border-radius:999px}.vertical.light{width:1px}.vertical.medium{width:2px}.vertical.bold{width:4px}.vertical.inverse{background-color:var(--border-inverse)}\n"] }]
-        }] });
-
-class SwitchComponent {
+class IconButtonComponent {
     constructor() {
-        this.label = input("");
-        this.appearance = input("brand");
-        this.showLabel = input(true);
-        this.showIcon = input(true);
         this.disabled = input(false);
-        this.readOnly = input(false);
-        this.checked = input(false);
-        this.stateChange = output();
-        this.switchHeight = switchHeight;
-        this.switchWidth = switchWidth;
-        this.isChecked = signal(false);
-    }
-    ngOnInit() {
-        this.isChecked.set(this.checked());
-    }
-    handleChange(event) {
-        const target = event.target;
-        this.isChecked.set(target.checked);
-        this.stateChange.emit(event);
-    }
-    handleClick(event) {
-        if (this.readOnly() || this.disabled()) {
-            event.stopPropagation();
-        }
-        else {
-            const inputElement = event.currentTarget.querySelector('input[type="checkbox"]');
-            if (inputElement) {
-                inputElement.checked = !this.isChecked();
-                const changeEvent = new Event("change", { bubbles: true });
-                Object.defineProperty(changeEvent, "target", {
-                    value: inputElement,
-                    writable: false,
-                });
-                this.handleChange(changeEvent);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "rte-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div\n    class=\"switch-container appearance-{{appearance()}}\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n    (click)=\"handleClick($event)\"\n>\n    <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"switch\"\n        [attr.aria-checked]=\"isChecked()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readOnly()\"\n        [ariaLabel]=\"label()\"\n        [name]=\"label()\"\n        [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n        [style.min-height.px]=\"switchHeight\"\n        [style.min-width.px]=\"switchWidth\"\n        [disabled]=\"disabled()\"\n        [checked]=\"isChecked()\"\n    />\n    <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n        @if (showIcon()) {\n            <rte-icon\n            class=\"icon\"\n            [name]=\"isChecked() ? 'check' : 'close'\"\n            [size]=\"16\"\n            (click)=\"handleClick($event)\"\n            ></rte-icon>\n        }\n    </div>\n    @if (showLabel() && label()) {\n        <label\n            class=\"switch-label\"\n            [for]=\"label()\"\n        >\n        {{ label() }}\n    </label>\n    }\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;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-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "rte-switch", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"switch-container appearance-{{appearance()}}\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n    (click)=\"handleClick($event)\"\n>\n    <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"switch\"\n        [attr.aria-checked]=\"isChecked()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readOnly()\"\n        [ariaLabel]=\"label()\"\n        [name]=\"label()\"\n        [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n        [style.min-height.px]=\"switchHeight\"\n        [style.min-width.px]=\"switchWidth\"\n        [disabled]=\"disabled()\"\n        [checked]=\"isChecked()\"\n    />\n    <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n        @if (showIcon()) {\n            <rte-icon\n            class=\"icon\"\n            [name]=\"isChecked() ? 'check' : 'close'\"\n            [size]=\"16\"\n            (click)=\"handleClick($event)\"\n            ></rte-icon>\n        }\n    </div>\n    @if (showLabel() && label()) {\n        <label\n            class=\"switch-label\"\n            [for]=\"label()\"\n        >\n        {{ label() }}\n    </label>\n    }\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;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-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
-        }] });
-
-const segmentClass = "rte-segment";
-const segmentSelector = `.${segmentClass}`;
-class SegmentedControlComponent {
-    constructor() {
-        this.options = input([]);
-        this.change = output();
-        this.selectedSegment = input();
-        this.ariaLabel = input();
-        this.ariaLabelledBy = input();
-        this.segmentRefs = viewChildren("segment");
-        this.sliderLeft = signal(0);
-        this.sliderWidth = signal(0);
-        this.sliderTop = signal(0);
-        this.segmentSelectedIndicatorStyle = computed(() => ({
-            left: `${this.sliderLeft()}px`,
-            top: `${this.sliderTop()}px`,
-            width: `${this.sliderWidth()}px`,
-        }));
-        this.isValidOptions = computed(() => isValidSegmentedControlOptions(this.options()));
-        this.lastKeydown = null;
-        this.onGlobalKeyDown = (event) => {
-            this.lastKeydown = event.key;
-        };
-    }
-    ngOnChanges(changes) {
-        if (changes["selectedSegment"]) {
-            this.updateSelectedSegmentIndicator();
-        }
-    }
-    ngAfterViewInit() {
-        this.updateSelectedSegmentIndicator();
-        window.addEventListener("resize", this.updateSelectedSegmentIndicator.bind(this));
-        window.addEventListener("keydown", this.onGlobalKeyDown.bind(this));
-        this.segmentRefs().forEach((segmentElement) => {
-            segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
-        });
-    }
-    ngOnDestroy() {
-        window.removeEventListener("resize", this.updateSelectedSegmentIndicator.bind(this));
-        window.removeEventListener("keydown", this.onGlobalKeyDown.bind(this));
-        this.segmentRefs().forEach((segmentElement) => {
-            segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
+        this.name = input.required();
+        this.size = input("m");
+        this.variant = input("primary");
+        this.type = input("button");
+        this.appearance = input("outlined");
+        this.compactSpacing = input(false);
+        this.ariaLabel = input(undefined);
+        this.ariaLabelledBy = input(undefined);
+        this.badgeCount = input();
+        this.badgeContent = input();
+        this.badgeType = input();
+        this.badgeIcon = input("settings");
+        this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
+        this.isValidIconName = computed(() => isValidIconName(this.name()));
+        this.click = output();
+        this.shouldDisplayBadge = computed(() => {
+            const count = this.badgeCount();
+            const content = this.badgeContent();
+            return (count && count > 0 && content === "number") || content === "icon";
         });
     }
-    selectSegment(id) {
-        this.change.emit(id);
-    }
-    isSegmentSelected(id) {
-        return this.selectedSegment() === id;
-    }
-    handleKeyUp(event) {
-        event.preventDefault();
-        if (event.key === ARROW_RIGHT_KEY || event.key === ARROW_LEFT_KEY) {
-            const allSegmentElements = Array.from(document.activeElement?.parentElement?.parentElement?.querySelectorAll(segmentSelector)) || [];
-            const currentActiveSegmentElementIndex = Array.from(allSegmentElements).findIndex((element) => element === document.activeElement);
-            if (event.key === ARROW_RIGHT_KEY) {
-                focusNextSegmentElement(currentActiveSegmentElementIndex, allSegmentElements);
-            }
-            else if (event.key === ARROW_LEFT_KEY) {
-                focusPreviousSegmentElement(currentActiveSegmentElementIndex, allSegmentElements);
-            }
-        }
-        else if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
-            const target = event.target;
-            const dataId = target.getAttribute("data-id");
-            this.selectSegment(dataId || "");
-        }
-    }
-    handleKeyDown(event) {
-        if (event.key === TAB_KEY || event.key === SPACE_KEY || event.key === ENTER_KEY) {
-            event.preventDefault();
-        }
-        if (event.key === TAB_KEY) {
-            const allFocusableElements = Array.from(document.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY));
-            const currentActiveElement = document.activeElement;
-            const currentIndex = allFocusableElements.indexOf(currentActiveElement);
-            if (event.shiftKey) {
-                focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
-            }
-            else {
-                focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
-            }
-        }
-    }
-    getSegmentPosition(index) {
-        return getSegmentPosition(index, this.options().length);
-    }
-    updateSelectedSegmentIndicator() {
-        const idx = this.options().findIndex((opt) => opt.id === this.selectedSegment());
-        const segment = this.segmentRefs()[idx]?.nativeElement;
-        if (segment) {
-            this.sliderWidth.set(segment.offsetWidth);
-            this.sliderTop.set(segment.offsetTop);
-            this.sliderLeft.set(segment.offsetLeft);
-        }
-    }
-    focusCurrentSegmentElement() {
-        if (this.lastKeydown === "Tab") {
-            const selectedSegmentElement = this.segmentRefs().find((segment) => segment.nativeElement.classList.contains("selected"))?.nativeElement;
-            if (selectedSegmentElement) {
-                selectedSegmentElement.focus();
-            }
-            else {
-                this.segmentRefs()[0]?.nativeElement?.focus();
-            }
-        }
+    onClick(event) {
+        event.stopPropagation();
+        this.click.emit(event);
     }
-    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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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.ɵ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\n      [name]=\"name()\"\n      [appearance]=\"appearance()\"\n      [size]=\"buttonIconSize()\"\n    />\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\n      [name]=\"name()\"\n      [appearance]=\"appearance()\"\n      [size]=\"buttonIconSize()\"\n    />\n  </button>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonComponent, 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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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-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\n      [name]=\"name()\"\n      [appearance]=\"appearance()\"\n      [size]=\"buttonIconSize()\"\n    />\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\n      [name]=\"name()\"\n      [appearance]=\"appearance()\"\n      [size]=\"buttonIconSize()\"\n    />\n  </button>\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }]
         }] });
 
-class DropdownItemComponent {
+class IconButtonToggleComponent {
     constructor() {
-        this.item = input();
-        this.menuId = input();
-        this.itemEvent = output();
+        this.disabled = input(false);
+        this.name = input.required();
+        this.size = input("m");
+        this.variant = input("primary");
+        this.type = input("button");
+        this.compactSpacing = input(false);
+        this.ariaLabel = input();
+        this.ariaLabelledBy = input();
+        this.selected = input();
+        this.internalSelected = signal(false);
+        this.defaultSelected = input(false);
+        this.isControlled = computed(() => this.selected() !== undefined);
+        this.click = output();
+        this.isSelected = computed(() => {
+            return this.isControlled() ? this.selected() : this.internalSelected();
+        });
+        this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
     }
-    handleClick(event) {
-        if (this.item()?.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.itemEvent.emit({ event, id: this.item()?.id || this.item()?.label || "" });
+    toggleInternalSelectedState() {
+        this.internalSelected.set(!this.internalSelected());
     }
-    handleKeyDown(event) {
-        event.preventDefault();
-        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
-            if (this.item()?.link) {
-                const link = event.target.closest("li")?.querySelector("a");
-                link?.click();
-            }
-            else {
-                this.itemEvent.emit({ event, id: this.item()?.id || this.item()?.label || "" });
-            }
+    onClick(event) {
+        event.stopPropagation();
+        this.click.emit(event);
+        if (!this.isControlled()) {
+            this.toggleInternalSelectedState();
         }
     }
-    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\">{{ item()?.label }} </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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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.ɵ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/>", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconButtonToggleComponent, 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\">{{ item()?.label }} </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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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-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/>" }]
         }] });
 
-class DropdownService {
+class TextInputComponent {
     constructor() {
-        this.initialState = {
-            activeMenuId: "",
-        };
-        this.state$ = new BehaviorSubject(this.initialState);
-        this.activeMenuId$ = this.state$.pipe(map((state) => state?.activeMenuId));
-    }
-    openMenu(menuId) {
-        this.state$.next({
-            activeMenuId: menuId,
+        this.id = input();
+        this.label = input("");
+        this.labelPosition = input("top");
+        this.required = input(false);
+        this.showCounter = input(false);
+        this.value = input("");
+        this.internalValue = signal(this.value());
+        this.leftIcon = input(null);
+        this.showRightIcon = input(true);
+        this.rightIconAction = input("clean");
+        this.showLabelRequirement = input(false);
+        this.assistiveAppearance = input("description");
+        this.showAssistiveIcon = input(false);
+        this.assistiveTextLabel = input("");
+        this.error = input(false);
+        this.maxLength = input(150);
+        this.disabled = input(false);
+        this.readOnly = input(false);
+        this.width = input("300px");
+        this.ariaLabel = input("");
+        this.ariaRequired = input(false);
+        this.ariaLabelledby = input("");
+        this.valueChange = output();
+        this.rightIconClick = output();
+        this.characterCount = signal(this.internalValue().length);
+        this.isHiddenInput = signal(this.showRightIcon() && this.rightIconAction() === "visibilityOn");
+        this.displayedLeftIcon = computed(() => (this.error() ? "error" : this.leftIcon()));
+        this.displayCounter = computed(() => this.showCounter() && typeof this.maxLength() === "number");
+        this.rightIconName = computed(() => {
+            if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
+                return this.isHiddenInput() ? "visibility-show" : "visibility-hide";
+            }
+            else if (this.rightIconAction() === "clean") {
+                return "close";
+            }
+            return "";
+        });
+        this.rightIconAriaLabel = computed(() => {
+            if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
+                return this.isHiddenInput() ? "show text" : "hide text";
+            }
+            else if (this.rightIconAction() === "clean") {
+                return "clear";
+            }
+            return "";
+        });
+        this.shouldShowRightIcon = computed(() => {
+            if (this.readOnly() || this.disabled()) {
+                return false;
+            }
+            if (this.rightIconAction() === "clean") {
+                return !!this.internalValue()?.length && this.showRightIcon();
+            }
+            return this.showRightIcon() && !!this.rightIconAction();
         });
+        this.lastParentValue = this.value();
+        effect(() => {
+            const parentValue = this.value();
+            if (parentValue !== this.lastParentValue) {
+                this.lastParentValue = parentValue;
+                this.internalValue.set(parentValue);
+            }
+        }, { allowSignalWrites: true });
     }
-    closeAllMenus() {
-        this.state$.next(null);
+    handleChange(event) {
+        const input = event.target;
+        this.internalValue.set(input.value);
+        this.valueChange.emit(input.value);
+        if (this.maxLength()) {
+            this.characterCount.set(input.value.length);
+        }
+        this.valueChange.emit(input.value);
     }
-    isMenuActive(menuId) {
-        return this.activeMenuId$.pipe(map((activeId) => activeId === menuId));
+    onRightIconClickHandler() {
+        this.rightIconClick.emit();
+        this.triggerRightIconAction();
     }
-    reset() {
-        this.state$.next(this.initialState);
-        console.log("🔵 Dropdown Service - State Reset");
+    toggleInputVisibility() {
+        this.isHiddenInput.set(!this.isHiddenInput());
     }
-    handleKeyboardInput(key, options) {
-        if ([ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY].includes(key)) {
-            this.handleKeyboardNavigation(key, options);
-        }
-        if (key === ESCAPE_KEY) {
-            this.closeAllMenus();
+    triggerRightIconAction() {
+        if (this.rightIconAction() === "clean") {
+            this.internalValue.set("");
+            this.valueChange.emit("");
+            this.characterCount.set(0);
         }
-    }
-    handleKeyboardNavigation(key, options) {
-        const { menuElement } = options;
-        const nativeElement = menuElement?.nativeElement;
-        switch (key) {
-            case ARROW_DOWN_KEY:
-                this.focusNextElement(nativeElement);
-                break;
-            case ARROW_UP_KEY:
-                this.focusPreviousElement(nativeElement);
-                break;
+        if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
+            this.toggleInputVisibility();
         }
     }
-    focusNextElement(element) {
-        if (!element)
-            return;
-        const focusableElements = this.getFocusableElements(element);
-        const currentIndex = focusableElements.indexOf(document.activeElement);
-        const nextIndex = currentIndex + 1 < focusableElements.length ? currentIndex + 1 : 0;
-        focusableElements[nextIndex]?.focus();
-    }
-    focusPreviousElement(element) {
-        if (!element)
-            return;
-        const focusableElements = this.getFocusableElements(element);
-        const currentIndex = focusableElements.indexOf(document.activeElement);
-        const previousIndex = currentIndex ? currentIndex - 1 : focusableElements.length - 1;
-        focusableElements[previousIndex]?.focus();
-    }
-    getFocusableElements(element) {
-        const menuId = element.dataset["menuId"];
-        return Array.from(element.querySelectorAll("li")).filter((el) => {
-            const closestMenu = el.closest("[data-menu-id]");
-            return closestMenu?.dataset["menuId"] === menuId;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownService, providedIn: "root" }); }
+    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\n  class=\"container {{labelPosition()}}\"\n  [ngClass]=\"{'error': error()}\"\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\">\n          {{ characterCount() }}/{{ maxLength() }}\n        </p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div\n      class=\"input {{labelPosition()}}\"\n      [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n    >\n      <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon\n            appearance=\"outlined\"\n            class=\"left-icon\"\n            aria-hidden=\"true\"\n            [name]=\"displayedLeftIcon()!\"\n          />\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\">\n      {{ characterCount() }}/{{ maxLength() }}\n    </p>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 }); }
 }
-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
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container {{labelPosition()}}\"\n  [ngClass]=\"{'error': error()}\"\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\">\n          {{ characterCount() }}/{{ maxLength() }}\n        </p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div\n      class=\"input {{labelPosition()}}\"\n      [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n    >\n      <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon\n            appearance=\"outlined\"\n            class=\"left-icon\"\n            aria-hidden=\"true\"\n            [name]=\"displayedLeftIcon()!\"\n          />\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\">\n      {{ characterCount() }}/{{ maxLength() }}\n    </p>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }]
+        }], ctorParameters: () => [] });
 
-class DropdownMenuComponent {
+class ChipComponent {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.dropdownService = inject(DropdownService);
-        this.items = input([]);
-        this.menuId = input();
-        this.itemEvent = output();
+        this.id = input();
+        this.label = input("");
+        this.selected = input(false);
+        this.disabled = input(false);
+        this.type = input("single");
+        this.compactSpacing = input(false);
+        this.click = output();
+        this.close = output();
+        this.isCheckable = computed(() => this.type() === "single" || this.type() === "multi");
+        this.role = computed(() => CHIP_TYPE_TO_ARIA_ROLE_MAP[this.type()] || null);
     }
-    getChildMenuId(itemIndex) {
-        return `${this.menuId()}:${itemIndex + 1}`;
+    onClick(event) {
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.click.emit(event);
+        }
+    }
+    onKeyUp(event) {
+        event.preventDefault();
+        if (!this.disabled()) {
+            if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
+                const target = event.target;
+                const isCloseButton = target.classList.contains("chip-close-button");
+                if (isCloseButton) {
+                    target.click();
+                }
+                else {
+                    this.onClick(event);
+                }
+            }
+            else if ((event.key === BACKSPACE_KEY || event.key === DELETE_KEY) && this.type() === "input") {
+                const closeButton = event.target.querySelector(".chip-close-button");
+                if (closeButton) {
+                    closeButton.click();
+                }
+            }
+        }
     }
-    handleItemEvent(itemEvent) {
-        this.itemEvent.emit(itemEvent);
+    onBlur(event) {
+        event.stopPropagation();
     }
-    onKeyDown(event) {
-        if (!event.target || !this.menuId()) {
-            return;
-        }
-        if ([ARROW_UP_KEY, ARROW_DOWN_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, TAB_KEY].includes(event.key)) {
-            event.preventDefault();
+    onCloseClick(event) {
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.close.emit(event);
         }
-        const menuId = this.menuId();
-        this.dropdownService.handleKeyboardInput(event.key, {
-            menuElement: this.elementRef,
-            menuId,
-        });
     }
-    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 \n    class=\"rte-dropdown-items\"\n    role=\"menu\" \n    [attr.aria-activedescendant]=\"menuId()\"\n  >\n    @for (item of items(); track item.label; let i = $index) {\n      <rte-dropdown-item \n        [item]=\"item\"\n        (itemEvent)=\"handleItemEvent($event)\"\n      />\n    }\n  </ul>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{opacity:0;display:none;position:absolute}.rte-dropdown-menu{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.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "rte-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { click: "click", close: "close" }, ngImport: i0, template: "<span\n  class=\"chip\"\n  tabindex=\"0\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"selected()\"\n        [attr.aria-hidden]=\"!selected()\"\n      >\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"!selected()\"\n        [attr.aria-hidden]=\"selected()\"\n      >\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, 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 \n    class=\"rte-dropdown-items\"\n    role=\"menu\" \n    [attr.aria-activedescendant]=\"menuId()\"\n  >\n    @for (item of items(); track item.label; let i = $index) {\n      <rte-dropdown-item \n        [item]=\"item\"\n        (itemEvent)=\"handleItemEvent($event)\"\n      />\n    }\n  </ul>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{opacity:0;display:none;position:absolute}.rte-dropdown-menu{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.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"] }]
-        }], propDecorators: { onKeyDown: [{
-                type: HostListener,
-                args: ["keydown", ["$event"]]
-            }] } });
+            args: [{ selector: "rte-chip", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"chip\"\n  tabindex=\"0\"\n  [attr.role]=\"role()\"\n  [attr.data-selected]=\"isCheckable() ? selected() : null\"\n  [attr.data-disabled]=\"disabled()\"\n  [attr.data-compact-spacing]=\"compactSpacing()\"\n  [attr.data-type]=\"type()\"\n  [attr.aria-checked]=\"isCheckable() ? selected() : null\"\n  [attr.aria-disabled]=\"disabled()\"\n  (click)=\"onClick($event)\"\n  (keyup)=\"onKeyUp($event)\"\n  (blur)=\"onBlur($event)\"\n>\n  <ng-container *ngIf=\"type() === 'multi'\">\n    <span class=\"chip-icon-container\">\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"selected()\"\n        [attr.aria-hidden]=\"!selected()\"\n      >\n        <rte-icon name=\"check-circle\" appearance=\"filled\" [size]=\"16\"></rte-icon>\n      </span>\n      <span\n        class=\"chip-icon\"\n        [class.chip-icon--visible]=\"!selected()\"\n        [attr.aria-hidden]=\"selected()\"\n      >\n        <rte-icon name=\"radio-button-empty\" [size]=\"16\"></rte-icon>\n      </span>\n    </span>\n  </ng-container>\n  <span class=\"chip-label\" [attr.data-type]=\"type()\">{{ label() }}</span>\n  <button\n    *ngIf=\"type() === 'input'\"\n    type=\"button\"\n    class=\"chip-close-button\"\n    [attr.aria-label]=\"'Supprimer ' + label()\"\n    [disabled]=\"disabled()\"\n    [value]=\"label()\"\n    (click)=\"onCloseClick($event)\"\n  >\n    <rte-icon class=\"chip-close-button--icon\" name=\"close\" [size]=\"16\"></rte-icon>\n  </button>\n</span>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.chip{overflow:hidden;color:var(--content-brand-default);text-overflow:ellipsis;display:inline-flex;padding:4px 12px;justify-content:center;align-items:center;gap:0px;border-radius:999px;background:var(--background-brand-unselected-default);transition:background-color .2s ease-in-out,color .2s ease-in-out}.chip:hover{cursor:pointer;color:var(--content-brand-hover);background:var(--background-brand-unselected-hover)}.chip:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.chip[data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip[data-selected=true]{color:var(--content-primary-inverse);background:var(--background-brand-selected-default)}.chip[data-selected=true]:hover{background:var(--background-brand-selected-hover)}.chip[data-selected=true][data-disabled=true]{cursor:default;color:var(--content-disabled);background:var(--background-disabled)}.chip[data-compact-spacing=true]{padding:0 12px}.chip[data-type=input]{padding:0 4px;pointer-events:none}.chip-label{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;padding:0 6px}.chip-label[data-type=input]{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;padding:0 8px}.chip-icon-container{position:relative;width:16px;height:16px}.chip-icon{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out,transform .2s ease-in-out;pointer-events:none}.chip-icon--visible{opacity:1;pointer-events:auto}.chip-close-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--content-brand-default);border-radius:999px;width:16px;height:16px;pointer-events:auto;transition:background-color .2s ease-in-out}.chip-close-button:disabled{cursor:default;color:var(--content-disabled);background:var(--background-disabled);outline:none}.chip-close-button:hover:not(:disabled){background:var(--background-brand-hover);color:var(--background-brand-unselected-hover)}.chip-close-button:focus-visible{outline:1px solid var(--border-brand-focused)}.chip-close-button--icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
+        }] });
 
-class DropdownTriggerDirective {
+class TextareaComponent {
     constructor() {
-        this.elementRef = inject(ElementRef);
-        this.dropdownKeyDown = output();
-        this.dropdownTriggered = output();
+        this.id = input(undefined);
+        this.name = input(undefined);
+        this.ariaLabelledby = input(undefined);
+        this.label = input(undefined);
+        this.labelId = input(undefined);
+        this.labelPosition = input("top");
+        this.assistiveTextLabel = input(undefined);
+        this.assistiveTextAppearance = input("description");
+        this.assistiveTextLink = input(undefined);
+        this.required = input(false);
+        this.showLabelRequirement = input(false);
+        this.resizeable = input(true);
+        this.maxLength = input(undefined);
+        this.disabled = input(false);
+        this.readOnly = input(false);
+        this.value = input(undefined);
+        this.rows = input(3);
+        this.defaultValue = input(undefined);
+        this.showCounter = input(false);
+        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);
+        this.change = output();
+        this.blur = output();
+        this.textareaRef = viewChild("textarea");
+        this.isAssistiveTextLinkVisible = computed(() => this.assistiveTextAppearance() === "link" && this.assistiveTextLink() !== undefined);
+        this.characterCount = 0;
+        this.isCounterVisible = computed(() => {
+            return this.showCounter() && this.maxLength();
+        });
     }
-    onDropdownTriggered(event) {
-        this.dropdownTriggered.emit(event);
+    onInput(event) {
+        const target = event.target;
+        this.characterCount = target.value.length;
+        this.change.emit(event);
     }
-    onKeyDown(event) {
-        this.dropdownKeyDown.emit(event);
+    onBlur(event) {
+        this.textareaRef()?.nativeElement?.scrollTo({ top: 0 });
+        this.blur.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: "14.0.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[rteDropdownTrigger]", outputs: { dropdownKeyDown: "dropdownKeyDown", dropdownTriggered: "dropdownTriggered" }, host: { listeners: { "click": "onDropdownTriggered($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TextareaComponent, isStandalone: true, selector: "rte-textarea", 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 }, resizeable: { classPropertyName: "resizeable", publicName: "resizeable", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", blur: "blur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: TextareaComponent,
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container\" [attr.data-label-position]=\"labelPosition()\"> \n  <label *ngIf=\"label() && labelPosition() === 'side'\" [attr.data-label-position]=\"labelPosition()\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n  <div class=\"top-position-container\" [attr.data-label-position]=\"labelPosition()\">\n    <div class=\"header-container\" [attr.data-label-position]=\"labelPosition()\">\n      <label *ngIf=\"label() && labelPosition() === 'top'\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n      <span *ngIf=\"isCounterVisible()\" class=\"character-counter\">{{ characterCount }}/{{ maxLength() }}</span>\n    </div>\n    <div class=\"textarea-container\" [attr.data-label-position]=\"labelPosition()\">\n      <textarea\n      #textarea\n      class=\"textarea {{ assistiveTextAppearance() }}\"\n      [class.resizeable]=\"resizeable()\"\n      [attr.id]=\"id()\"\n      [attr.name]=\"name()\"\n      [attr.aria-labelledby]=\"labelId() || ariaLabelledby()\"\n      [attr.required]=\"required() || null\"\n      [attr.maxLength]=\"maxLength() !== undefined ? maxLength() : null\"\n      [attr.disabled]=\"disabled() || null\"\n      [attr.readonly]=\"readOnly() || null\"\n      [value]=\"value() !== undefined ? value() : null\"\n      [defaultValue]=\"defaultValue() !== undefined ? defaultValue() : null\"\n      [attr.rows]=\"rows()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      ></textarea>\n      <rte-link *ngIf=\"isAssistiveTextLinkVisible()\" class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"assistiveTextLink() || ''\" [label]=\"assistiveTextLabel() || ''\">\n      </rte-link>\n      <div *ngIf=\"assistiveTextAppearance() !== 'link'\" class=\"assistive-text {{ assistiveTextAppearance() }}\" [ngClass]=\"{'disabled' : disabled()}\">\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'error'\" name=\"error\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'success'\" name=\"check-circle\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <span>{{ assistiveTextLabel() }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{width:100%}.container{width:100%}.container[data-label-position=side]{display:flex;flex-direction:row}.top-position-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;height:100%;padding:0;flex-direction:column;align-items:flex-start;gap:0px;flex-shrink:0;border-radius:0;opacity:100%;width:100%}.top-position-container[data-label-position=side]{flex-grow:1}.top-position-container .header-container{display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box;gap:8px}.top-position-container .header-container[data-label-position=side]{padding:0;justify-content:flex-end}.top-position-container .textarea-container{display:flex;flex-direction:column;width:100%;align-items:flex-start}.top-position-container .textarea-container .textarea{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%);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-primary);min-height:70px;padding:8px 16px;width:100%;min-width:140px;border-radius:8px;border:1px solid var(--border-secondary);opacity:100%;background-color:var(--background-default);resize:none;box-sizing:border-box}@media (min-width: 1024px){.top-position-container .textarea-container .textarea{min-height:56px;min-width:112px;max-width:1100px}}.top-position-container .textarea-container .textarea:focus-visible,.top-position-container .textarea-container .textarea:active{outline:none}.top-position-container .textarea-container .textarea:focus-visible:not(:disabled),.top-position-container .textarea-container .textarea:active:not(:disabled){outline:1px solid var(--border-brand-default);border:1px solid var(--border-brand-default)}.top-position-container .textarea-container .textarea.error:not(:disabled){outline:1px solid var(--border-danger);border:1px solid var(--border-danger)}.top-position-container .textarea-container .textarea.resizeable{resize:vertical}.top-position-container .textarea-container .textarea:disabled,.top-position-container .textarea-container .textarea:read-only{cursor:not-allowed;background-color:var(--background-disabled)}.top-position-container .textarea-container .textarea:disabled{resize:none}.top-position-container .textarea-container .textarea:read-only{color:var(--content-secondary)}.top-position-container .textarea-container .assistive-text-link{padding:4px 8px}.top-position-container .textarea-container .assistive-text{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;display:flex;padding:4px 8px;color:var(--content-tertiary);gap:4px}.top-position-container .textarea-container .assistive-text.error:not(.disabled){color:var(--content-danger-default)}.top-position-container .textarea-container .assistive-text.success{color:var(--content-success-default)}.character-counter{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)}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;color:var(--content-secondary);max-width:300px;justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}label[data-label-position=side]{padding:24px 8px;align-items:flex-start;gap:0px;align-self:stretch}label .requirement-indicator{margin-left:2px}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)}label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}\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: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink", "reverse", "maxWidth"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[rteDropdownTrigger]",
-                    standalone: true,
-                }]
-        }], propDecorators: { onDropdownTriggered: [{
-                type: HostListener,
-                args: ["click", ["$event"]]
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ["keydown", ["$event"]]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-textarea", imports: [CommonModule, IconComponent, LinkComponent], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TextareaComponent,
+                            multi: true,
+                        },
+                    ], template: "<div class=\"container\" [attr.data-label-position]=\"labelPosition()\"> \n  <label *ngIf=\"label() && labelPosition() === 'side'\" [attr.data-label-position]=\"labelPosition()\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n  <div class=\"top-position-container\" [attr.data-label-position]=\"labelPosition()\">\n    <div class=\"header-container\" [attr.data-label-position]=\"labelPosition()\">\n      <label *ngIf=\"label() && labelPosition() === 'top'\" [attr.id]=\"labelId()\" [attr.for]=\"id()\">{{label()}}<span *ngIf=\"required() || showLabelRequirement()\" class=\"requirement-indicator\" aria-hidden=\"true\" [ngClass]=\"{'required': required(), 'show-label-requirement': showLabelRequirement() }\">{{requirementIndicatorValue()}}</span></label>\n      <span *ngIf=\"isCounterVisible()\" class=\"character-counter\">{{ characterCount }}/{{ maxLength() }}</span>\n    </div>\n    <div class=\"textarea-container\" [attr.data-label-position]=\"labelPosition()\">\n      <textarea\n      #textarea\n      class=\"textarea {{ assistiveTextAppearance() }}\"\n      [class.resizeable]=\"resizeable()\"\n      [attr.id]=\"id()\"\n      [attr.name]=\"name()\"\n      [attr.aria-labelledby]=\"labelId() || ariaLabelledby()\"\n      [attr.required]=\"required() || null\"\n      [attr.maxLength]=\"maxLength() !== undefined ? maxLength() : null\"\n      [attr.disabled]=\"disabled() || null\"\n      [attr.readonly]=\"readOnly() || null\"\n      [value]=\"value() !== undefined ? value() : null\"\n      [defaultValue]=\"defaultValue() !== undefined ? defaultValue() : null\"\n      [attr.rows]=\"rows()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n      ></textarea>\n      <rte-link *ngIf=\"isAssistiveTextLinkVisible()\" class=\"assistive-text-link\" [externalLink]=\"true\" [href]=\"assistiveTextLink() || ''\" [label]=\"assistiveTextLabel() || ''\">\n      </rte-link>\n      <div *ngIf=\"assistiveTextAppearance() !== 'link'\" class=\"assistive-text {{ assistiveTextAppearance() }}\" [ngClass]=\"{'disabled' : disabled()}\">\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'error'\" name=\"error\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <rte-icon *ngIf=\"assistiveTextAppearance() === 'success'\" name=\"check-circle\" [size]=\"assistiveTextIconSize\"></rte-icon>\n        <span>{{ assistiveTextLabel() }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{width:100%}.container{width:100%}.container[data-label-position=side]{display:flex;flex-direction:row}.top-position-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;height:100%;padding:0;flex-direction:column;align-items:flex-start;gap:0px;flex-shrink:0;border-radius:0;opacity:100%;width:100%}.top-position-container[data-label-position=side]{flex-grow:1}.top-position-container .header-container{display:flex;width:100%;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box;gap:8px}.top-position-container .header-container[data-label-position=side]{padding:0;justify-content:flex-end}.top-position-container .textarea-container{display:flex;flex-direction:column;width:100%;align-items:flex-start}.top-position-container .textarea-container .textarea{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%);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-primary);min-height:70px;padding:8px 16px;width:100%;min-width:140px;border-radius:8px;border:1px solid var(--border-secondary);opacity:100%;background-color:var(--background-default);resize:none;box-sizing:border-box}@media (min-width: 1024px){.top-position-container .textarea-container .textarea{min-height:56px;min-width:112px;max-width:1100px}}.top-position-container .textarea-container .textarea:focus-visible,.top-position-container .textarea-container .textarea:active{outline:none}.top-position-container .textarea-container .textarea:focus-visible:not(:disabled),.top-position-container .textarea-container .textarea:active:not(:disabled){outline:1px solid var(--border-brand-default);border:1px solid var(--border-brand-default)}.top-position-container .textarea-container .textarea.error:not(:disabled){outline:1px solid var(--border-danger);border:1px solid var(--border-danger)}.top-position-container .textarea-container .textarea.resizeable{resize:vertical}.top-position-container .textarea-container .textarea:disabled,.top-position-container .textarea-container .textarea:read-only{cursor:not-allowed;background-color:var(--background-disabled)}.top-position-container .textarea-container .textarea:disabled{resize:none}.top-position-container .textarea-container .textarea:read-only{color:var(--content-secondary)}.top-position-container .textarea-container .assistive-text-link{padding:4px 8px}.top-position-container .textarea-container .assistive-text{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;display:flex;padding:4px 8px;color:var(--content-tertiary);gap:4px}.top-position-container .textarea-container .assistive-text.error:not(.disabled){color:var(--content-danger-default)}.top-position-container .textarea-container .assistive-text.success{color:var(--content-success-default)}.character-counter{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)}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;color:var(--content-secondary);max-width:300px;justify-content:space-between;white-space:normal;overflow-wrap:normal;word-break:normal}label[data-label-position=side]{padding:24px 8px;align-items:flex-start;gap:0px;align-self:stretch}label .requirement-indicator{margin-left:2px}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)}label .requirement-indicator.show-label-requirement:not(.required){font-style:italic}label .requirement-indicator:not(.show-label-requirement).required{color:var(--content-danger-default)}\n"] }]
+        }] });
 
-class DropdownDirective {
-    static { this.idCounter = 0; }
+class SwitchComponent {
     constructor() {
-        this.trigger = contentChild(DropdownTriggerDirective);
-        this.menu = contentChild(DropdownMenuComponent);
-        this.rteDropdownPosition = input("bottom");
-        this.rteDropdownIsOpen = input(false);
-        this.rteDropdownOffset = input(0);
-        this.dropdownId = `dropdown_${++DropdownDirective.idCounter}`;
-        this.menuEvent = output();
-        this.overlayService = inject(OverlayService);
-        this.dropdownService = inject(DropdownService);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.elementRef = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-        this.destroyRef = inject(DestroyRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.dropdownMenuRef = null;
-        this.handleClickOutside = (event) => {
-            const target = event.target;
-            const isMenuItemClick = target.closest(".rte-dropdown-item") !== null;
-            if (isMenuItemClick) {
-                return;
-            }
-            const clickedInTrigger = this.hostElement.contains(target);
-            if (!clickedInTrigger) {
-                this.closeDropdown();
-            }
-        };
-        this.hostElement = this.elementRef.nativeElement;
+        this.label = input("");
+        this.appearance = input("brand");
+        this.showLabel = input(true);
+        this.showIcon = input(true);
+        this.disabled = input(false);
+        this.readOnly = input(false);
+        this.checked = input(false);
+        this.stateChange = output();
+        this.switchHeight = switchHeight;
+        this.switchWidth = switchWidth;
+        this.isChecked = signal(false);
     }
-    onTrigger() {
-        this.showDropdownMenu();
+    ngOnInit() {
+        this.isChecked.set(this.checked());
     }
-    onTriggerKeyEvent(event) {
-        if (event.key === SPACE_KEY) {
-            this.showDropdownMenu();
+    handleChange(event) {
+        const target = event.target;
+        this.isChecked.set(target.checked);
+        this.stateChange.emit(event);
+    }
+    handleClick(event) {
+        if (this.readOnly() || this.disabled()) {
+            event.stopPropagation();
         }
-        if (event.key === TAB_KEY && this.dropdownMenuRef) {
-            event.preventDefault();
-            const menuElement = this.dropdownMenuRef.location.nativeElement;
-            const focusableElements = menuElement.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
-            if (focusableElements.length) {
-                focusableElements[0].focus();
+        else {
+            const inputElement = event.currentTarget.querySelector('input[type="checkbox"]');
+            if (inputElement) {
+                inputElement.checked = !this.isChecked();
+                const changeEvent = new Event("change", { bubbles: true });
+                Object.defineProperty(changeEvent, "target", {
+                    value: inputElement,
+                    writable: false,
+                });
+                this.handleChange(changeEvent);
             }
         }
     }
-    onMenuEvent(event) {
-        this.menuEvent.emit(event);
-        this.dropdownService.closeAllMenus();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwitchComponent, isStandalone: true, selector: "rte-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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 }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange" }, ngImport: i0, template: "<div\n    class=\"switch-container appearance-{{appearance()}}\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n    (click)=\"handleClick($event)\"\n>\n    <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"switch\"\n        [attr.aria-checked]=\"isChecked()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readOnly()\"\n        [ariaLabel]=\"label()\"\n        [name]=\"label()\"\n        [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n        [style.min-height.px]=\"switchHeight\"\n        [style.min-width.px]=\"switchWidth\"\n        [disabled]=\"disabled()\"\n        [checked]=\"isChecked()\"\n    />\n    <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n        @if (showIcon()) {\n            <rte-icon\n            class=\"icon\"\n            [name]=\"isChecked() ? 'check' : 'close'\"\n            [size]=\"16\"\n            (click)=\"handleClick($event)\"\n            ></rte-icon>\n        }\n    </div>\n    @if (showLabel() && label()) {\n        <label\n            class=\"switch-label\"\n            [for]=\"label()\"\n        >\n        {{ label() }}\n    </label>\n    }\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;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-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-switch", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"switch-container appearance-{{appearance()}}\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n    (click)=\"handleClick($event)\"\n>\n    <input\n        type=\"checkbox\"\n        role=\"switch\"\n        class=\"switch\"\n        [attr.aria-checked]=\"isChecked()\"\n        [attr.aria-label]=\"label()\"\n        [attr.aria-disabled]=\"disabled()\"\n        [attr.aria-readonly]=\"readOnly()\"\n        [ariaLabel]=\"label()\"\n        [name]=\"label()\"\n        [ngClass]=\"{\n        'disabled': disabled(),\n        'read-only': readOnly(),\n        'checked': isChecked()\n    }\"\n        [style.min-height.px]=\"switchHeight\"\n        [style.min-width.px]=\"switchWidth\"\n        [disabled]=\"disabled()\"\n        [checked]=\"isChecked()\"\n    />\n    <div class=\"switch-icon-check\" [ngClass]=\"{'checked': isChecked() }\" (click)=\"handleClick($event)\">\n        @if (showIcon()) {\n            <rte-icon\n            class=\"icon\"\n            [name]=\"isChecked() ? 'check' : 'close'\"\n            [size]=\"16\"\n            (click)=\"handleClick($event)\"\n            ></rte-icon>\n        }\n    </div>\n    @if (showLabel() && label()) {\n        <label\n            class=\"switch-label\"\n            [for]=\"label()\"\n        >\n        {{ label() }}\n    </label>\n    }\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.switch-container{display:inline-flex;align-items:center;gap:12px;position:relative}.switch-container:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.checked:hover .switch{background-color:var(--background-brand-selected-hover)}.switch-container .switch{appearance:none;cursor:pointer;position:relative;display:block;padding:0;margin:0;background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary);border-radius:999px;transition:background-color .4s ease-in-out,border-color .4s ease-in-out}.switch-container .switch:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.switch-container .checked{background-color:var(--background-brand-selected-default);border:none}.switch-container .switch-icon-check{content:\"\";cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;background-color:var(--background-neutral-bold-default);color:var(--background-default);height:16px;width:16px;border-radius:999px;top:calc(50% - 8px);left:4px;transition:background-color .4s ease-in-out,color .4s ease-in-out,transform .4s ease-in-out}.switch-container .switch-icon-check.checked{background-color:var(--background-default);color:var(--background-brand-selected-default);transform:translate(16px)}.switch-container.appearance-neutral .switch{background-color:var(--background-neutral-regular-default);border:2px solid var(--border-primary)}.switch-container.appearance-neutral .switch-icon-check{background-color:var(--background-neutral-bold-default);color:var(--content-primary-inverse);border:none}.switch-container.appearance-neutral:hover .switch-icon-check{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.checked .switch{background-color:var(--background-neutral-bold-default);border:none}.switch-container.appearance-neutral.checked .switch-icon-check{background-color:var(--background-default);color:var(--content-tertiary)}.switch-container.appearance-neutral.checked:hover .switch{background-color:var(--background-neutral-bold-hover)}.switch-container.appearance-neutral.read-only{cursor:not-allowed}.switch-container.appearance-neutral.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.appearance-neutral.read-only .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.appearance-neutral.read-only .switch-icon-check .icon,.switch-container.appearance-neutral.disabled{cursor:not-allowed}.switch-container.appearance-neutral.disabled .switch{background-color:var(--background-disabled);border:none}.switch-container.appearance-neutral.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.appearance-neutral.disabled .switch-icon-check .icon{cursor:not-allowed}.switch-container .switch-label{cursor:pointer;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-primary);word-wrap:break-word}.switch-container.read-only{cursor:not-allowed}.switch-container.read-only:hover .switch{background-color:var(--background-disabled)}.switch-container.read-only .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.read-only .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-primary);border:2px solid var(--border-primary)}.switch-container.read-only .switch-label{cursor:not-allowed;color:var(--content-tertiary)}.switch-container.disabled{cursor:not-allowed}.switch-container.disabled:hover .switch{background-color:var(--background-disabled)}.switch-container.disabled .switch{cursor:not-allowed;background-color:var(--background-disabled);border:none}.switch-container.disabled .switch-icon-check{cursor:not-allowed;top:calc(50% - 10px);left:2px;background-color:var(--background-default);color:var(--border-disabled);border:2px solid var(--border-disabled)}.switch-container.disabled .switch-label{cursor:not-allowed;color:var(--content-disabled)}\n"] }]
+        }] });
+
+const segmentClass = "rte-segment";
+const segmentSelector = `.${segmentClass}`;
+class SegmentedControlComponent {
+    constructor() {
+        this.options = input([]);
+        this.change = output();
+        this.selectedSegment = input();
+        this.ariaLabel = input();
+        this.ariaLabelledBy = input();
+        this.segmentRefs = viewChildren("segment");
+        this.sliderLeft = signal(0);
+        this.sliderWidth = signal(0);
+        this.sliderTop = signal(0);
+        this.segmentSelectedIndicatorStyle = computed(() => ({
+            left: `${this.sliderLeft()}px`,
+            top: `${this.sliderTop()}px`,
+            width: `${this.sliderWidth()}px`,
+        }));
+        this.isValidOptions = computed(() => isValidSegmentedControlOptions(this.options()));
+        this.lastKeydown = null;
+        this.onGlobalKeyDown = (event) => {
+            this.lastKeydown = event.key;
+        };
     }
-    ngAfterContentInit() {
-        if (this.trigger()) {
-            this.trigger()?.dropdownTriggered.subscribe(() => {
-                this.onTrigger();
-            });
-            this.trigger()?.dropdownKeyDown.subscribe((event) => {
-                this.onTriggerKeyEvent(event);
-            });
+    ngOnChanges(changes) {
+        if (changes["selectedSegment"]) {
+            this.updateSelectedSegmentIndicator();
         }
     }
-    showDropdownMenu() {
-        if (this.dropdownMenuRef) {
-            this.dropdownMenuRef.destroy();
-        }
-        this.dropdownMenuRef = this.overlayService.create(DropdownMenuComponent, this.viewContainerRef);
-        const menuId = this.dropdownId;
-        this.dropdownMenuRef.setInput("menuId", menuId);
-        this.dropdownService.openMenu(menuId);
-        this.assignItems();
-        this.positionDropdownMenu(this.rteDropdownPosition());
-        this.addClickOutsideListener();
-        this.dropdownMenuRef.instance.itemEvent.subscribe((event) => {
-            this.onMenuEvent(event);
+    ngAfterViewInit() {
+        this.updateSelectedSegmentIndicator();
+        window.addEventListener("resize", this.updateSelectedSegmentIndicator.bind(this));
+        window.addEventListener("keydown", this.onGlobalKeyDown.bind(this));
+        this.segmentRefs().forEach((segmentElement) => {
+            segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
         });
-        const dropdownStateSubscription = this.dropdownService.state$
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((state) => {
-            if (state === null) {
-                if (this.dropdownMenuRef) {
-                    this.dropdownMenuRef.destroy();
-                    this.dropdownMenuRef = null;
-                    this.removeClickOutsideListener();
-                    dropdownStateSubscription.unsubscribe();
-                }
-            }
+    }
+    ngOnDestroy() {
+        window.removeEventListener("resize", this.updateSelectedSegmentIndicator.bind(this));
+        window.removeEventListener("keydown", this.onGlobalKeyDown.bind(this));
+        this.segmentRefs().forEach((segmentElement) => {
+            segmentElement.nativeElement.addEventListener("focus", this.focusCurrentSegmentElement.bind(this));
         });
     }
-    assignItems() {
-        if (this.dropdownMenuRef) {
-            this.dropdownMenuRef.setInput("items", this.menu()?.items());
-        }
+    selectSegment(id) {
+        this.change.emit(id);
     }
-    positionDropdownMenu(position = "bottom") {
-        if (this.dropdownMenuRef && this.trigger()) {
-            const dropdownMenuElement = this.dropdownMenuRef.location.nativeElement;
-            const triggerElement = this.trigger()?.elementRef.nativeElement;
-            if (triggerElement) {
-                this.renderer.setStyle(dropdownMenuElement, "display", "block");
-                this.cdr.detectChanges();
-                const computedPosition = position === "auto" ? getAutoPlacementDropdown(triggerElement, dropdownMenuElement, "bottom") : position;
-                const autoAlignment = getAutoAlignment(triggerElement, dropdownMenuElement, computedPosition);
-                const computedCoordinates = getCoordinates(computedPosition, triggerElement, dropdownMenuElement.children[0], this.rteDropdownOffset(), autoAlignment);
-                this.renderer.setStyle(dropdownMenuElement, "top", `${computedCoordinates.top}px`);
-                this.renderer.setStyle(dropdownMenuElement, "left", `${computedCoordinates.left}px`);
-                this.renderer.setStyle(dropdownMenuElement, "opacity", "1");
+    isSegmentSelected(id) {
+        return this.selectedSegment() === id;
+    }
+    handleKeyUp(event) {
+        event.preventDefault();
+        if (event.key === ARROW_RIGHT_KEY || event.key === ARROW_LEFT_KEY) {
+            const allSegmentElements = Array.from(document.activeElement?.parentElement?.parentElement?.querySelectorAll(segmentSelector)) || [];
+            const currentActiveSegmentElementIndex = Array.from(allSegmentElements).findIndex((element) => element === document.activeElement);
+            if (event.key === ARROW_RIGHT_KEY) {
+                focusNextSegmentElement(currentActiveSegmentElementIndex, allSegmentElements);
+            }
+            else if (event.key === ARROW_LEFT_KEY) {
+                focusPreviousSegmentElement(currentActiveSegmentElementIndex, allSegmentElements);
             }
         }
+        else if (event.key === SPACE_KEY || event.key === ENTER_KEY) {
+            const target = event.target;
+            const dataId = target.getAttribute("data-id");
+            this.selectSegment(dataId || "");
+        }
     }
-    ngOnDestroy() {
-        this.removeClickOutsideListener();
-        if (this.dropdownMenuRef) {
-            this.dropdownMenuRef.destroy();
+    handleKeyDown(event) {
+        if (event.key === TAB_KEY || event.key === SPACE_KEY || event.key === ENTER_KEY) {
+            event.preventDefault();
+        }
+        if (event.key === TAB_KEY) {
+            const allFocusableElements = Array.from(document.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY));
+            const currentActiveElement = document.activeElement;
+            const currentIndex = allFocusableElements.indexOf(currentActiveElement);
+            if (event.shiftKey) {
+                focusPreviousNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
+            }
+            else {
+                focusNextNotSegmentElement(currentIndex, allFocusableElements, segmentClass);
+            }
         }
     }
-    addClickOutsideListener() {
-        document.addEventListener("mousedown", this.handleClickOutside);
+    getSegmentPosition(index) {
+        return getSegmentPosition(index, this.options().length);
     }
-    removeClickOutsideListener() {
-        document.removeEventListener("mousedown", this.handleClickOutside);
+    updateSelectedSegmentIndicator() {
+        const idx = this.options().findIndex((opt) => opt.id === this.selectedSegment());
+        const segment = this.segmentRefs()[idx]?.nativeElement;
+        if (segment) {
+            this.sliderWidth.set(segment.offsetWidth);
+            this.sliderTop.set(segment.offsetTop);
+            this.sliderLeft.set(segment.offsetLeft);
+        }
     }
-    closeDropdown() {
-        this.dropdownService.closeAllMenus();
+    focusCurrentSegmentElement() {
+        if (this.lastKeydown === "Tab") {
+            const selectedSegmentElement = this.segmentRefs().find((segment) => segment.nativeElement.classList.contains("selected"))?.nativeElement;
+            if (selectedSegmentElement) {
+                selectedSegmentElement.focus();
+            }
+            else {
+                this.segmentRefs()[0]?.nativeElement?.focus();
+            }
+        }
     }
-    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 }, 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.ɵ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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[rteDropdown]",
-                    host: {
-                        "[class.dropdown]": "true",
-                        "[attr.data-dropdown-id]": "dropdownId",
-                    },
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [] });
+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\n          *ngIf=\"isSegmentSelected(option.id)\"\n          name=\"check-small\"\n          class=\"rte-selected-icon\"\n          [size]=\"24\"\n      />\n      <div class=\"rte-segment-content\">\n        <ng-container *ngIf=\"option.icon; else label\">\n          <rte-icon [name]=\"option.icon\" [size]=\"24\" [appearance]=\"isSegmentSelected(option.id) ? 'filled' : 'outlined' \"></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>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 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] }); }
+class BreadcrumbItemComponent {
+    constructor() {
+        this.item = input();
+        this.isLast = input(false);
+        this.breadcrumbItemMaxWidth = input();
+        this.initialScrollWidth = signal(Number.MAX_VALUE);
+        this.elementRef = inject(ElementRef);
+        this.isEllipsisActive = computed(() => {
+            const maxValue = this.breadcrumbItemMaxWidth();
+            if (maxValue) {
+                return this.initialScrollWidth() >= maxValue;
+            }
+            return false;
+        });
+        this.tooltipTriggerStyle = computed(() => {
+            return `overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ${this.breadcrumbItemMaxWidth() ? "max-width:" + this.breadcrumbItemMaxWidth() + "px" : ""}`;
+        });
+        this.linkStyle = computed(() => {
+            return `${this.breadcrumbItemMaxWidth() ? "max-width:" + this.breadcrumbItemMaxWidth() + "px" : ""}`;
+        });
+    }
+    ngAfterViewInit() {
+        const el = this.elementRef.nativeElement.querySelector(".rte-breadcrumb-item");
+        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\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n      >\n        <a\n          role=\"link\"\n          aria-current=\"page\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"item()!.label\"\n          [style]=\"linkStyle()\"\n        >\n          {{ item()!.label }}\n        </a>\n      </div>\n    } @else {\n      <a\n        role=\"link\"\n        aria-current=\"page\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"item()!.label\"\n        [style]=\"linkStyle()\"\n      >\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\n          [href]=\"item()!.link\"\n          [label]=\"item()!.label\"\n          [subtle]=\"true\"\n          [maxWidth]=\"breadcrumbItemMaxWidth()\"\n        />\n      </div>\n    } @else {\n      <rte-link\n        [href]=\"item()!.link\"\n        [label]=\"item()!.label\"\n        [subtle]=\"true\"\n        [maxWidth]=\"breadcrumbItemMaxWidth()\"\n      />\n    }\n  }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-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],
-                }]
+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\n        [rteTooltip]=\"item()!.label\"\n        [rteTooltipPosition]=\"'bottom'\"\n        [style]=\"tooltipTriggerStyle()\"\n      >\n        <a\n          role=\"link\"\n          aria-current=\"page\"\n          tabindex=\"-1\"\n          [attr.aria-label]=\"item()!.label\"\n          [style]=\"linkStyle()\"\n        >\n          {{ item()!.label }}\n        </a>\n      </div>\n    } @else {\n      <a\n        role=\"link\"\n        aria-current=\"page\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"item()!.label\"\n        [style]=\"linkStyle()\"\n      >\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\n          [href]=\"item()!.link\"\n          [label]=\"item()!.label\"\n          [subtle]=\"true\"\n          [maxWidth]=\"breadcrumbItemMaxWidth()\"\n        />\n      </div>\n    } @else {\n      <rte-link\n        [href]=\"item()!.link\"\n        [label]=\"item()!.label\"\n        [subtle]=\"true\"\n        [maxWidth]=\"breadcrumbItemMaxWidth()\"\n      />\n    }\n  }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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"] }]
         }] });
 
-// Main dropdown module - import this to get everything
-
 class BreadcrumbsComponent {
     constructor() {
         this.items = input([]);
         this.ariaLabel = input(BREADCRUMBS_DEFAULT_ARIA_LABEL);
+        this.breadcrumbItemMaxWidth = input(150);
         this.truncatedItems = computed(() => {
             if (shouldTruncateBreadcrumbs(this.items())) {
                 return getBreadcrumbsTruncatedItems(this.items());
@@ -1681,11 +1818,11 @@ class BreadcrumbsComponent {
         });
     }
     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 } }, 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    <div class=\"breadcrumb-item\">\n      <rte-link\n        [href]=\"truncatedItems()!.root.link\"\n        [label]=\"truncatedItems()!.root.label\"\n        [subtle]=\"true\"\n      />\n    </div>\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 (\n      item of truncatedItems()!.remaining;\n      track item.link;\n      let i = $index\n    ) {\n      <div class=\"breadcrumb-item\">\n        @if (i === truncatedItems()!.remaining.length - 1) {\n          <a\n            role=\"link\"\n            aria-current=\"page\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"item.label\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\" />\n        }\n      </div>\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      <div class=\"breadcrumb-item\">\n        @if (i === items().length - 1) {\n          <a\n            role=\"link\"\n            aria-current=\"page\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"item.label\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\" />\n        }\n      </div>\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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)}.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: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownPosition", "rteDropdownIsOpen", "rteDropdownOffset"], outputs: ["menuEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", outputs: ["dropdownKeyDown", "dropdownTriggered"] }, { 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"], outputs: ["click"] }], 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 } }, 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\n      [item]=\"truncatedItems()!.root\"\n      [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n    />\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 (\n      item of truncatedItems()!.remaining;\n      track item.link;\n      let i = $index\n    ) {\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, LinkComponent, DropdownModule, IconButtonComponent], 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    <div class=\"breadcrumb-item\">\n      <rte-link\n        [href]=\"truncatedItems()!.root.link\"\n        [label]=\"truncatedItems()!.root.label\"\n        [subtle]=\"true\"\n      />\n    </div>\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 (\n      item of truncatedItems()!.remaining;\n      track item.link;\n      let i = $index\n    ) {\n      <div class=\"breadcrumb-item\">\n        @if (i === truncatedItems()!.remaining.length - 1) {\n          <a\n            role=\"link\"\n            aria-current=\"page\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"item.label\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\" />\n        }\n      </div>\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      <div class=\"breadcrumb-item\">\n        @if (i === items().length - 1) {\n          <a\n            role=\"link\"\n            aria-current=\"page\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"item.label\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <rte-link [href]=\"item.link\" [label]=\"item.label\" [subtle]=\"true\" />\n        }\n      </div>\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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)}.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], 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\n      [item]=\"truncatedItems()!.root\"\n      [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n    />\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 (\n      item of truncatedItems()!.remaining;\n      track item.link;\n      let i = $index\n    ) {\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 {
@@ -1739,13 +1876,74 @@ 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 }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n  <div class=\"rte-banner\">\n    <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n      <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [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        <rte-button\n          *ngIf=\"actionLabel()\"\n          variant=\"neutral\"\n          size=\"s\"\n          [label]=\"actionLabel()!\"\n          [ariaLabel]=\"actionLabel()!\"\n          (click)=\"clickAction()\"\n        />\n      </div>\n    </div>\n    <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n      <rte-icon-button\n        name=\"close\"\n        variant=\"neutral\"\n        ariaLabel=\"close banner\"\n        (click)=\"closeBanner()\"\n      />\n    </div>\n  </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);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, #FFF)}.rte-banner-container .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-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .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-container .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-container .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:12px;line-height:16px;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-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .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"], outputs: ["click"] }, { kind: "component", type: ButtonComponent, selector: "rte-button", inputs: ["label", "variant", "size", "disabled", "icon", "ariaLabel", "ariaLabelledBy", "buttonType"], outputs: ["click"] }], 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 }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n  <div class=\"rte-banner\">\n    <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n      <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [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        <button *ngIf=\"actionLabel()\"\n          rteButton\n          rteButtonVariant=\"neutral\"\n          rteButtonSize=\"s\"\n          [attr.aria-label]=\"actionLabel()!\"\n          (click)=\"clickAction()\"\n        >{{ actionLabel() }}</button>\n      </div>\n    </div>\n    <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n      <rte-icon-button\n        name=\"close\"\n        variant=\"neutral\"\n        ariaLabel=\"close banner\"\n        (click)=\"closeBanner()\"\n      />\n    </div>\n  </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info-default);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger-default)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);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, #FFF)}.rte-banner-container .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-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .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-container .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-container .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:12px;line-height:16px;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-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .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"] }], 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  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n  <div class=\"rte-banner\">\n    <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n      <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [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        <rte-button\n          *ngIf=\"actionLabel()\"\n          variant=\"neutral\"\n          size=\"s\"\n          [label]=\"actionLabel()!\"\n          [ariaLabel]=\"actionLabel()!\"\n          (click)=\"clickAction()\"\n        />\n      </div>\n    </div>\n    <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n      <rte-icon-button\n        name=\"close\"\n        variant=\"neutral\"\n        ariaLabel=\"close banner\"\n        (click)=\"closeBanner()\"\n      />\n    </div>\n  </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);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, #FFF)}.rte-banner-container .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-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .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-container .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-container .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:12px;line-height:16px;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-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .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  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'default' ? 'status' : 'alert'\"\n>\n  <div class=\"rte-banner\">\n    <div *ngIf=\"showIcon()\" class=\"rte-banner-icon\">\n      <rte-icon [name]=\"type() === 'default' ? 'info' : 'error'\" [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        <button *ngIf=\"actionLabel()\"\n          rteButton\n          rteButtonVariant=\"neutral\"\n          rteButtonSize=\"s\"\n          [attr.aria-label]=\"actionLabel()!\"\n          (click)=\"clickAction()\"\n        >{{ actionLabel() }}</button>\n      </div>\n    </div>\n    <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n      <rte-icon-button\n        name=\"close\"\n        variant=\"neutral\"\n        ariaLabel=\"close banner\"\n        (click)=\"closeBanner()\"\n      />\n    </div>\n  </div>\n</section>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-banner-container{display:flex;box-sizing:border-box;width:100%;min-width:320px;padding:24px;flex-direction:column;justify-content:center;align-items:center;gap:0px;border-radius:0;background:var(--background-info-default);color:var(--content-info-default);top:0;left:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.rte-banner-container.alert{background:var(--background-danger-default);color:var(--content-danger-default)}.rte-banner-container.overlay{position:fixed}.rte-banner-container.open{opacity:1;transform:translateY(0)}.rte-banner-container.close{opacity:0;transform:translateY(-10px)}.rte-banner-container .rte-banner{display:flex;padding:16px;align-items:flex-start;gap:16px;align-self:stretch;border-radius:var(--radius-S, 4px);opacity:var(--100, 1);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, #FFF)}.rte-banner-container .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-container .rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner-container .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-container .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-container .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:12px;line-height:16px;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-container .rte-banner .rte-banner-content .rte-banner-message .rte-banner-action-button{width:max-content}.rte-banner-container .rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"] }]
         }] });
 
+class FocusTrapService {
+    constructor() {
+        this.activeTrapElement = null;
+        this.previouslyFocusedElement = null;
+        this.focusable = [];
+        this.rendererFactory = inject(RendererFactory2);
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    activate(element) {
+        this.previouslyFocusedElement = document.activeElement;
+        this.activeTrapElement = element;
+        this.focusable = this.getFocusableElements(element);
+        this.focusFirstElement();
+        this.keyUnlisten = this.renderer.listen(element, "keydown", (event) => {
+            if (event.key === "Tab") {
+                this.handleTab(event, this.focusable);
+            }
+        });
+    }
+    deactivate() {
+        if (this.keyUnlisten)
+            this.keyUnlisten();
+        this.keyUnlisten = undefined;
+        if (this.previouslyFocusedElement) {
+            this.previouslyFocusedElement.focus();
+        }
+        this.activeTrapElement = null;
+    }
+    focusFirstElement() {
+        if (!this.activeTrapElement)
+            return;
+        const focusable = this.activeTrapElement.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
+        if (focusable.length > 0)
+            focusable[0].focus();
+    }
+    handleTab(event, focusable) {
+        if (!this.activeTrapElement || focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const current = document.activeElement;
+        if (event.shiftKey && current === first) {
+            last.focus();
+            event.preventDefault();
+        }
+        else if (!event.shiftKey && current === last) {
+            first.focus();
+            event.preventDefault();
+        }
+    }
+    getFocusableElements(container) {
+        return Array.from(container.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusTrapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusTrapService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusTrapService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
 class PopoverComponent {
     constructor() {
         this.primaryButtonLabel = input.required();
@@ -1760,45 +1958,29 @@ class PopoverComponent {
         this.clickPrimaryButton = output();
         this.clickSecondaryButton = output();
         this.elementRef = inject(ElementRef);
-        this.element = this.elementRef.nativeElement;
+        this.focusTrap = inject(FocusTrapService);
     }
     ngAfterViewInit() {
-        this.focusFirstElement();
-    }
-    handleKeydown(event) {
-        if (event.key === TAB_KEY) {
-            if (this.isOpen()) {
-                const focusable = this.element.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
-                const first = focusable[0];
-                const last = focusable[focusable.length - 1];
-                if (event.shiftKey && document.activeElement === first) {
-                    event.preventDefault();
-                    last.focus();
-                }
-                else if (!event.shiftKey && document.activeElement === last) {
-                    event.preventDefault();
-                    first.focus();
-                }
-            }
+        const native = this.elementRef?.nativeElement;
+        if (native) {
+            this.focusTrap.activate(native);
         }
     }
+    ngOnDestroy() {
+        this.focusTrap.deactivate();
+    }
     handleClickPrimaryButton() {
         this.clickPrimaryButton.emit();
     }
     handleClickSecondaryButton() {
         this.clickSecondaryButton.emit();
     }
-    focusFirstElement() {
-        const focusable = this.element.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY);
-        if (focusable.length > 0)
-            focusable[0].focus();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "rte-popover", inputs: { primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 }, coordinates: { classPropertyName: "coordinates", publicName: "coordinates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, ngImport: i0, template: "<div\n  #root\n  class=\"rte-popover\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.data-arrow]=\"arrow()\"\n  [attr.data-position]=\"position()\"\n  [attr.data-alignment]=\"alignment()\"\n  [attr.data-open]=\"isOpen()\"\n  [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n  (keydown)=\"handleKeydown($event)\"\n>\n  <div class=\"popoverInner\">\n    <div class=\"popoverContentContainer\">\n      <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n      <div class=\"popoverContent\">{{ content() }}</div>\n    </div>\n    <div class=\"popoverButtonContainer\">\n      <rte-button\n        *ngIf=\"secondaryButtonLabel()\"\n        variant=\"secondary\"\n        [label]=\"secondaryButtonLabel() || ''\"\n        (click)=\"handleClickSecondaryButton()\"\n      />\n      <rte-button\n        variant=\"primary\"\n        [label]=\"primaryButtonLabel()\"\n        (click)=\"handleClickPrimaryButton()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);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}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);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;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "rte-button", inputs: ["label", "variant", "size", "disabled", "icon", "ariaLabel", "ariaLabelledBy", "buttonType"], outputs: ["click"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PopoverComponent, isStandalone: true, selector: "rte-popover", inputs: { primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 }, coordinates: { classPropertyName: "coordinates", publicName: "coordinates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickPrimaryButton: "clickPrimaryButton", clickSecondaryButton: "clickSecondaryButton" }, ngImport: i0, template: "<div\n  #root\n  class=\"rte-popover\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.data-arrow]=\"arrow()\"\n  [attr.data-position]=\"position()\"\n  [attr.data-alignment]=\"alignment()\"\n  [attr.data-open]=\"isOpen()\"\n  [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n>\n  <div class=\"popoverInner\">\n    <div class=\"popoverContentContainer\">\n      <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n      <div class=\"popoverContent\">{{ content() }}</div>\n    </div>\n    <div class=\"popoverButtonContainer\">\n      <button *ngIf=\"secondaryButtonLabel()\"\n        rteButton\n        rteButtonVariant=\"secondary\"\n        (click)=\"handleClickSecondaryButton()\"\n      >{{ secondaryButtonLabel() }}</button>\n      <button rteButton\n        rteButtonVariant=\"primary\"\n        (click)=\"handleClickPrimaryButton()\"\n      >{{ primaryButtonLabel() }}</button>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);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}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);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;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-popover", imports: [CommonModule, ButtonComponent], standalone: true, template: "<div\n  #root\n  class=\"rte-popover\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.data-arrow]=\"arrow()\"\n  [attr.data-position]=\"position()\"\n  [attr.data-alignment]=\"alignment()\"\n  [attr.data-open]=\"isOpen()\"\n  [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n  (keydown)=\"handleKeydown($event)\"\n>\n  <div class=\"popoverInner\">\n    <div class=\"popoverContentContainer\">\n      <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n      <div class=\"popoverContent\">{{ content() }}</div>\n    </div>\n    <div class=\"popoverButtonContainer\">\n      <rte-button\n        *ngIf=\"secondaryButtonLabel()\"\n        variant=\"secondary\"\n        [label]=\"secondaryButtonLabel() || ''\"\n        (click)=\"handleClickSecondaryButton()\"\n      />\n      <rte-button\n        variant=\"primary\"\n        [label]=\"primaryButtonLabel()\"\n        (click)=\"handleClickPrimaryButton()\"\n      />\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);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}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);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;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"] }]
+            args: [{ selector: "rte-popover", imports: [CommonModule, ButtonComponent], standalone: true, template: "<div\n  #root\n  class=\"rte-popover\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.data-arrow]=\"arrow()\"\n  [attr.data-position]=\"position()\"\n  [attr.data-alignment]=\"alignment()\"\n  [attr.data-open]=\"isOpen()\"\n  [style]=\"{ top: coordinates().top + 'px', left: coordinates().left + 'px' }\"\n>\n  <div class=\"popoverInner\">\n    <div class=\"popoverContentContainer\">\n      <div *ngIf=\"title\" class=\"popoverTitle\">{{ title() }}</div>\n      <div class=\"popoverContent\">{{ content() }}</div>\n    </div>\n    <div class=\"popoverButtonContainer\">\n      <button *ngIf=\"secondaryButtonLabel()\"\n        rteButton\n        rteButtonVariant=\"secondary\"\n        (click)=\"handleClickSecondaryButton()\"\n      >{{ secondaryButtonLabel() }}</button>\n      <button rteButton\n        rteButtonVariant=\"primary\"\n        (click)=\"handleClickPrimaryButton()\"\n      >{{ primaryButtonLabel() }}</button>\n    </div>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-popoverTrigger{position:relative;width:max-content}.rte-popover{position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.08));background-color:var(--background-default);transition:opacity .15s ease-out;opacity:0;z-index:1000;min-width:320px;max-width:600px;width:fit-content;height:fit-content}.rte-popover .popoverInner{display:flex;flex-direction:column;align-items:flex-start;padding:24px;gap:24px;border-radius:4px}.rte-popover .popoverInner .popoverContentContainer{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:16px}.rte-popover .popoverInner .popoverContentContainer .popoverTitle{overflow:hidden;text-overflow:ellipsis;color:var(--content-primary);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}.rte-popover .popoverInner .popoverContentContainer .popoverContent{color:var(--content-secondary);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;width:100%;word-break:break-word}.rte-popover .popoverInner .popoverButtonContainer{display:flex;justify-content:flex-end;align-items:flex-start;padding:0;gap:24px;width:100%}.rte-popover:after{content:\"\";position:absolute;border-width:12px;border-style:solid}.rte-popover[data-position=top]:after{top:100%;left:50%;margin-left:-12px;border-color:var(--background-default) transparent transparent transparent}.rte-popover[data-position=top][data-alignment=start]:after{left:20px}.rte-popover[data-position=top][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=bottom]:after{bottom:100%;left:50%;margin-left:-12px;border-color:transparent transparent var(--background-default) transparent}.rte-popover[data-position=bottom][data-alignment=start]:after{left:20px}.rte-popover[data-position=bottom][data-alignment=end]:after{left:auto;right:20px}.rte-popover[data-position=left]:after{top:50%;left:100%;margin-top:-12px;border-color:transparent transparent transparent var(--background-default)}.rte-popover[data-position=left][data-alignment=start]:after{top:20px}.rte-popover[data-position=left][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-position=right]:after{top:50%;right:100%;margin-top:-12px;border-color:transparent var(--background-default) transparent transparent}.rte-popover[data-position=right][data-alignment=start]:after{top:20px}.rte-popover[data-position=right][data-alignment=end]:after{top:auto;bottom:20px}.rte-popover[data-arrow=false]:after{display:none}.rte-popover[data-open=true]{opacity:1}\n"] }]
         }], ctorParameters: () => [] });
 
 class PopoverDirective {
@@ -1941,9 +2123,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ["click"]
             }] } });
 
+class ModalTriggerDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.modalTriggerKeyDown = output();
+        this.modalTriggerClicked = output();
+    }
+    onModalTriggerClicked(event) {
+        this.modalTriggerClicked.emit(event);
+    }
+    onKeyDown(event) {
+        this.modalTriggerKeyDown.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ModalTriggerDirective, isStandalone: true, selector: "[rteModalTrigger]", outputs: { modalTriggerKeyDown: "modalTriggerKeyDown", modalTriggerClicked: "modalTriggerClicked" }, host: { listeners: { "click": "onModalTriggerClicked($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteModalTrigger]",
+                    standalone: true,
+                }]
+        }], propDecorators: { onModalTriggerClicked: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }] } });
+
+class ModalComponent {
+    constructor() {
+        this.id = input();
+        this.icon = input();
+        this.iconAppearance = input("outlined");
+        this.title = input();
+        this.description = input();
+        this.secondaryButtonLabel = input();
+        this.isOpen = input(false);
+        this.size = input("m");
+        this.ariaDescribedby = input(undefined);
+        this.primaryButton = input(null);
+        this.secondaryButton = input(null);
+        this.customContent = input(null);
+        this.elementRef = viewChild("modal");
+        this.focusTrap = inject(FocusTrapService);
+        this.closeModal = output();
+        this.iconSize = signal(IconSize["xl"]);
+    }
+    ngAfterViewInit() {
+        const native = this.elementRef()?.nativeElement;
+        if (native) {
+            this.focusTrap.activate(native);
+        }
+    }
+    ngOnDestroy() {
+        this.focusTrap.deactivate();
+    }
+    onClose() {
+        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]=\"\n      description() ? id() + '-modal-desc' : ariaDescribedby()\n    \"\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\n          *ngIf=\"icon()\"\n          [name]=\"icon() ?? ''\"\n          [size]=\"iconSize()\"\n          [appearance]=\"iconAppearance()\"\n        />\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 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%);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}.rte-modal-container[data-size=xl]{width:1328px}.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"] }] }); }
+}
+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]=\"\n      description() ? id() + '-modal-desc' : ariaDescribedby()\n    \"\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\n          *ngIf=\"icon()\"\n          [name]=\"icon() ?? ''\"\n          [size]=\"iconSize()\"\n          [appearance]=\"iconAppearance()\"\n        />\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: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.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 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%);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}.rte-modal-container[data-size=xl]{width:1328px}.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 {
+    constructor() {
+        this.modalCompRef = null;
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.trigger = contentChild(ModalTriggerDirective);
+        this.rteModalId = input();
+        this.rteModalIcon = input();
+        this.rteModalIconAppearance = input("outlined");
+        this.rteModalTitle = input();
+        this.rteModalDescription = input();
+        this.rteModalIsOpen = input(false);
+        this.rteModalSize = input("m");
+        this.rteModalAriaDescribedby = input();
+        this.rteModalCloseOnClickOutside = input(true);
+        this.primaryButton = contentChild.required("primaryButton");
+        this.secondaryButton = contentChild("secondaryButton");
+        this.customContent = contentChild("customContent");
+        this.modalElement = null;
+        this.onMouseDown = (e) => this.handleClickAway(e);
+        this.onKeyDown = (e) => this.handleKeydown(e);
+        this.overlayService = inject(OverlayService);
+        this.hostElement = this.elementRef.nativeElement;
+    }
+    onTrigger() {
+        this.showModal();
+    }
+    ngAfterContentInit() {
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+        if (this.trigger()) {
+            this.trigger()?.modalTriggerClicked.subscribe(() => {
+                this.onTrigger();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroyModal();
+    }
+    showModal() {
+        if (this.modalCompRef) {
+            this.modalCompRef.destroy();
+        }
+        if (!this.primaryButton()) {
+            console.warn("Primary button required, add it as child to the modal directive.");
+            return;
+        }
+        this.modalCompRef = this.overlayService.create(ModalComponent, this.viewContainerRef, true);
+        this.modalCompRef?.instance.closeModal.subscribe(() => {
+            this.closeModal();
+        });
+        this.modalElement = this.modalCompRef?.location.nativeElement.children[0].children[1];
+        this.assignInputsValues();
+    }
+    handleKeydown(event) {
+        if (event.key === ESCAPE_KEY && this.rteModalCloseOnClickOutside()) {
+            event.preventDefault();
+            this.closeModal();
+        }
+    }
+    assignInputsValues() {
+        if (this.modalCompRef) {
+            this.modalCompRef.setInput("id", this.rteModalId());
+            this.modalCompRef.setInput("icon", this.rteModalIcon());
+            this.modalCompRef.setInput("iconAppearance", this.rteModalIconAppearance());
+            this.modalCompRef.setInput("title", this.rteModalTitle());
+            this.modalCompRef.setInput("description", this.rteModalDescription());
+            this.modalCompRef.setInput("size", this.rteModalSize());
+            this.modalCompRef.setInput("ariaDescribedby", this.rteModalAriaDescribedby());
+            this.modalCompRef.setInput("primaryButton", this.primaryButton());
+            this.modalCompRef.setInput("secondaryButton", this.secondaryButton());
+            this.modalCompRef.setInput("customContent", this.customContent());
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.modalCompRef?.setInput("isOpen", true);
+                });
+            });
+        }
+    }
+    handleClickAway(event) {
+        const elements = [this.hostElement, this.modalElement];
+        if (elements.some((element) => !element))
+            return;
+        const shouldIgnore = elements.some((element) => element.contains(event.target));
+        if (!shouldIgnore && this.rteModalCloseOnClickOutside()) {
+            this.closeModal();
+        }
+    }
+    closeModal() {
+        if (this.modalCompRef) {
+            this.modalCompRef.setInput("isOpen", false);
+            setTimeout(() => this.destroyModal(), 200);
+        }
+    }
+    destroyModal() {
+        if (this.modalCompRef) {
+            this.modalCompRef.destroy();
+            this.modalCompRef = null;
+            this.overlayService.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: ModalDirective, isStandalone: true, selector: "[rteModal]", inputs: { rteModalId: { classPropertyName: "rteModalId", publicName: "rteModalId", isSignal: true, isRequired: false, transformFunction: null }, rteModalIcon: { classPropertyName: "rteModalIcon", publicName: "rteModalIcon", isSignal: true, isRequired: false, transformFunction: null }, rteModalIconAppearance: { classPropertyName: "rteModalIconAppearance", publicName: "rteModalIconAppearance", isSignal: true, isRequired: false, transformFunction: null }, rteModalTitle: { classPropertyName: "rteModalTitle", publicName: "rteModalTitle", isSignal: true, isRequired: false, transformFunction: null }, rteModalDescription: { classPropertyName: "rteModalDescription", publicName: "rteModalDescription", isSignal: true, isRequired: false, transformFunction: null }, rteModalIsOpen: { classPropertyName: "rteModalIsOpen", publicName: "rteModalIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteModalSize: { classPropertyName: "rteModalSize", publicName: "rteModalSize", isSignal: true, isRequired: false, transformFunction: null }, rteModalAriaDescribedby: { classPropertyName: "rteModalAriaDescribedby", publicName: "rteModalAriaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, rteModalCloseOnClickOutside: { classPropertyName: "rteModalCloseOnClickOutside", publicName: "rteModalCloseOnClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "trigger", first: true, predicate: ModalTriggerDirective, descendants: true, isSignal: true }, { propertyName: "primaryButton", first: true, predicate: ["primaryButton"], descendants: true, isSignal: true }, { propertyName: "secondaryButton", first: true, predicate: ["secondaryButton"], descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteModal]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+class ModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ModalModule, imports: [ModalDirective, ModalTriggerDirective], exports: [ModalDirective, ModalTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ModalDirective, ModalTriggerDirective],
+                    exports: [ModalDirective, ModalTriggerDirective],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SplitButtonComponent, SwitchComponent, TextInputComponent, TextareaComponent, TooltipDirective };
+export { BadgeDirective, BannerComponent, BreadcrumbsComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SegmentedControlComponent, SplitButtonComponent, SwitchComponent, TextInputComponent, TextareaComponent, TooltipDirective };
 //# sourceMappingURL=design-system-rte-angular.mjs.map