@design-system-rte/angular 1.5.0 → 1.6.1-rc1

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ElementRef, ViewContainerRef, Renderer2, HostListener, output, signal, TemplateRef, contentChild, viewChild, viewChildren, NgModule, RendererFactory2 } from '@angular/core';
+import { inject, Injectable, input, DestroyRef, ChangeDetectorRef, effect, Component, ChangeDetectionStrategy, computed, HostBinding, Directive, ElementRef, ViewContainerRef, Renderer2, HostListener, output, signal, TemplateRef, contentChild, viewChild, viewChildren, NgModule, RendererFactory2, Injector, untracked, afterNextRender } from '@angular/core';
+import { ButtonIconSize, getAutoPlacement, getCoordinates, shouldUseDrawerDefaultHeader, shouldUseDrawerDefaultFooter, DRAWER_PADDING, waitForNextFrame as waitForNextFrame$1, DRAWER_TRANSITION_DURATION, getDrawerConfigurationIssues, dividerAppearanceBySideNavAppearance as dividerAppearanceBySideNavAppearance$1 } from '@design-system-rte/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -7,13 +8,12 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { HttpClient } from '@angular/common/http';
 import { isValidIconName as isValidIconName$1 } from '@design-system-rte/core/components/icon/icon-utils';
 import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
-import { getAutoPlacement, getCoordinates, dividerAppearanceBySideNavAppearance as dividerAppearanceBySideNavAppearance$1 } from '@design-system-rte/core';
 import { TOOLTIP_GAP, TOOLTIP_FADE_OUT_DURATION } from '@design-system-rte/core/components/tooltip/tooltip.constants';
 import { getTooltipGap } from '@design-system-rte/core/components/tooltip/tooltip.utils';
 import { FOCUSABLE_ELEMENTS_QUERY, FOCUSABLE_BUTTONS_QUERY } from '@design-system-rte/core/constants/dom/dom.constants';
 import { getShowIcon, getShowText, getDisplayCount, getBadgeIconSize, getShowBadge, shouldDisplayBadge } from '@design-system-rte/core/components/badge/badge.utils';
 import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
-import { SPACE_KEY, ENTER_KEY, ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ESCAPE_KEY, TAB_KEY, BACKSPACE_KEY, DELETE_KEY } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
+import { SPACE_KEY, ENTER_KEY, ARROW_DOWN_KEY, ARROW_UP_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ESCAPE_KEY, TAB_KEY, BACKSPACE_KEY, DELETE_KEY, ARROW_KEYS } from '@design-system-rte/core/constants/keyboard/keyboard.constants';
 import { DropdownManager } from '@design-system-rte/core/components/dropdown/DropdownManager';
 import { getAutoPlacementDropdown, getAutoAlignment, getCoordinates as getCoordinates$1, getAutoPlacement as getAutoPlacement$1 } from '@design-system-rte/core/components/utils/auto-placement';
 import { logWarn, logError } from '@design-system-rte/core/utils/log-handlers';
@@ -21,7 +21,7 @@ import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { waitForNextFrame } from '@design-system-rte/core/common/animation';
 import { DROPDOWN_ANIMATION_DURATION } from '@design-system-rte/core/components/dropdown/dropdown.constants';
-import { ButtonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
+import { ButtonIconSize as ButtonIconSize$1 } from '@design-system-rte/core/components/button/common/common-button.constants';
 import { loaderSize } from '@design-system-rte/core/components/loader/loader.constants';
 import { CHIP_TYPE_TO_ARIA_ROLE_MAP } from '@design-system-rte/core/components/chip/chip.constants';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -31,7 +31,8 @@ import { switchHeight, switchWidth } from '@design-system-rte/core/components/sw
 import { isValidSegmentedControlOptions, focusNextSegmentElement, focusPreviousSegmentElement, focusPreviousNotSegmentElement, focusNextNotSegmentElement, getSegmentPosition } from '@design-system-rte/core/components/segmented-control/segmented-control-utils';
 import { BREADCRUMBS_DEFAULT_ARIA_LABEL } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.constants';
 import { shouldTruncateBreadcrumbs, getBreadcrumbsTruncatedItems } from '@design-system-rte/core/components/breadcrumbs/breadcrumbs.utils';
-import { cardSize } from '@design-system-rte/core/components/card/card.constats';
+import { AccordionIconSizeMap } from '@design-system-rte/core/components/accordion/accordion.constants';
+import { DEFAULT_CARD_WIDTH } from '@design-system-rte/core/components/card/card.constants';
 import { POPOVER_GAP_ARROW, POPOVER_GAP } from '@design-system-rte/core/components/popover/popover.constants';
 import { IconSize, IconTypeMap } from '@design-system-rte/core/components/icon/icon.constants';
 import { APPEARANCE_CONFIG, SEARCHBAR_BORDER_RADIUS, SEARCHBAR_PADDING_LEFT, SEARCHBAR_BUTTON_WIDTH, SEARCHBAR_BUTTON_HEIGHT_COMPACT } from '@design-system-rte/core/components/searchbar/searchbar.constants';
@@ -46,105 +47,16 @@ import { getSelectedOption } from '@design-system-rte/core/components/select/sel
 import { ASSISTIVE_TEXT_ICON_SIZE } from '@design-system-rte/core/components/assistive-text/assistive-text.constants';
 import { getIconNameFromAppearance } from '@design-system-rte/core/components/assistive-text/assistive-text.utils';
 import { scrollToSelectedTab } from '@design-system-rte/core/components/tab/tab.utils';
-
-class ButtonComponent {
-    constructor() {
-        this.rteButtonVariant = input("primary");
-        this.rteButtonSize = input("m");
-        this.rteBadgeCount = input();
-        this.rteBadgeContent = input();
-        this.shouldDisplayBadge = computed(() => {
-            const count = this.rteBadgeCount();
-            const content = this.rteBadgeContent();
-            return (count && count > 0 && content === "number") || content === "icon";
-        });
-    }
-    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: "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 }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeContent: { classPropertyName: "rteBadgeContent", publicName: "rteBadgeContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<span class=\"rte-button-label\">\n  <ng-content />\n  <!-- Le badge est g\u00E9r\u00E9 par BadgeDirective attach\u00E9e via hostDirectives -->\n</span>\n", styles: [":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)}: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: "button[rteButton]", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"rte-button-label\">\n  <ng-content />\n  <!-- Le badge est g\u00E9r\u00E9 par BadgeDirective attach\u00E9e via hostDirectives -->\n</span>\n", styles: [":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)}: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() {
-        return "grid";
-    }
-    get hostDataClasses() {
-        const variation = this.gridType();
-        return `${variation}`;
-    }
-    constructor() {
-        this.gridType = input("fluid");
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: GridDirective, isStandalone: true, selector: "[rteGrid]", inputs: { gridType: { classPropertyName: "gridType", publicName: "gridType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.data-gridtype": "this.hostDataClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[rteGrid]",
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ["class"]
-            }], hostDataClasses: [{
-                type: HostBinding,
-                args: ["attr.data-gridtype"]
-            }] } });
-
-class ColDirective {
-    get colClasses() {
-        return [
-            "col",
-            this.generateColumnClass("col-xxs", this.xxs()),
-            this.generateColumnClass("col-xs", this.xs()),
-            this.generateColumnClass("col-s", this.s()),
-            this.generateColumnClass("col-m", this.m()),
-            this.generateColumnClass("col-l", this.l()),
-            this.generateColumnClass("col-xl", this.xl()),
-        ]
-            .filter(Boolean)
-            .join(" ");
-    }
-    constructor() {
-        this.xxs = input();
-        this.xs = input();
-        this.s = input();
-        this.m = input();
-        this.l = input();
-        this.xl = input();
-    }
-    generateColumnClass(prefix, size) {
-        return size ? `${prefix}-${size}` : "";
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: ColDirective, isStandalone: true, selector: "[rteCol]", inputs: { xxs: { classPropertyName: "xxs", publicName: "xxs", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, s: { classPropertyName: "s", publicName: "s", isSignal: true, isRequired: false, transformFunction: null }, m: { classPropertyName: "m", publicName: "m", isSignal: true, isRequired: false, transformFunction: null }, l: { classPropertyName: "l", publicName: "l", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.colClasses" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "[rteCol]",
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { colClasses: [{
-                type: HostBinding,
-                args: ["class"]
-            }] } });
+import { computeCheckedIdsAfterToggle, getChildBorderTypes, hasChildren, allDescendantsChecked, isNodeIndeterminate, isItemSelected, buildTreeviewNodeId, computeCheckboxId, computeConnectorBorderTypes, canToggleOpen, getTreeviewItemKey } from '@design-system-rte/core/components/treeview/treeview.utils';
+import { parsePathString, getNodeAtPath, TREEVIEW_BORDER_SVG_MAP_COMPACT, TREEVIEW_BORDER_SVG_MAP, isTreeviewFocusable, getVisibleFocusableRows, findFocusedPosition, getNextFocusTarget, setMovingTabindex, resetMovingTabIndex, hasNestedItemsInTree } from '@design-system-rte/core/components/treeview';
+import { IconSizeMap, StatusIndicatorSizeMap } from '@design-system-rte/core/components/avatar';
+import { computeBackgroundColor, computeMaskImage } from '@design-system-rte/core/components/avatar/avatar.utils';
 
 // This file is auto-generated. Do not edit manually.
 const RegularIcons = {
-    add: "add",
+    "add": "add",
     "alt-route": "alt_route",
-    apps: "apps",
+    "apps": "apps",
     "arrow-alt-down": "arrow_alt_down",
     "arrow-alt-down-left": "arrow_alt_down_left",
     "arrow-alt-down-right": "arrow_alt_down_right",
@@ -161,6 +73,7 @@ const RegularIcons = {
     "arrow-chevron-left": "arrow_chevron_left",
     "arrow-chevron-right": "arrow_chevron_right",
     "arrow-chevron-up": "arrow_chevron_up",
+    "arrow-compare": "arrow_compare",
     "arrow-double-down": "arrow_double_down",
     "arrow-double-left": "arrow_double_left",
     "arrow-double-right": "arrow_double_right",
@@ -175,100 +88,103 @@ const RegularIcons = {
     "arrow-up": "arrow_up",
     "arrow-up-left": "arrow_up_left",
     "arrow-up-right": "arrow_up_right",
-    asterisk: "asterisk",
+    "asterisk": "asterisk",
     "attach-file": "attach_file",
     "battery-alt-empty": "battery_alt_empty",
     "battery-alt-full": "battery_alt_full",
     "battery-charging": "battery_charging",
     "battery-empty": "battery_empty",
     "battery-full": "battery_full",
-    bluetooth: "bluetooth",
+    "bluetooth": "bluetooth",
     "bluetooth-off": "bluetooth_off",
     "chart-bar": "chart_bar",
     "chart-bar-stacked": "chart_bar_stacked",
-    check: "check",
+    "check": "check",
     "check-indeterminate": "check_indeterminate",
     "check-small": "check_small",
     "checkbox-empty": "checkbox_empty",
-    close: "close",
-    compare: "compare",
+    "close": "close",
+    "company": "company",
+    "compare": "compare",
     "copy-all": "copy_all",
     "crisis-alert": "crisis_alert",
-    cut: "cut",
-    download: "download",
+    "cut": "cut",
+    "download": "download",
     "download-done": "download_done",
     "drag-handle": "drag_handle",
     "drag-indicator": "drag_indicator",
-    exclamation: "exclamation",
+    "exclamation": "exclamation",
     "explore-travel": "explore_travel",
     "external-link": "external_link",
-    filter: "filter",
+    "filter": "filter",
     "filter-off": "filter_off",
     "first-page": "first_page",
-    forward: "forward",
-    fullscreen: "fullscreen",
+    "forward": "forward",
+    "fullscreen": "fullscreen",
     "fullscreen-exit": "fullscreen_exit",
-    history: "history",
+    "history": "history",
     "hourglass-empty": "hourglass_empty",
     "info-i": "info_i",
-    language: "language",
+    "language": "language",
     "last-page": "last_page",
-    link: "link",
+    "link": "link",
     "link-off": "link_off",
-    list: "list",
+    "list": "list",
     "location-disabled": "location_disabled",
-    login: "login",
-    logout: "logout",
-    menu: "menu",
+    "login": "login",
+    "logout": "logout",
+    "menu": "menu",
     "menu-open": "menu_open",
-    monitoring: "monitoring",
+    "monitoring": "monitoring",
     "more-down": "more_down",
     "more-horiz": "more_horiz",
     "more-up": "more_up",
     "more-vert": "more_vert",
-    ohm: "ohm",
+    "ohm": "ohm",
     "open-in-full": "open_in_full",
-    paste: "paste",
+    "paste": "paste",
     "play-pause": "play_pause",
     "power-input": "power_input",
     "power-plug": "power_plug",
     "power-settings": "power_settings",
     "priority-high": "priority_high",
-    public: "public",
-    publish: "publish",
+    "public": "public",
+    "publish": "publish",
     "question-mark": "question_mark",
-    radar: "radar",
+    "radar": "radar",
     "radio-button-empty": "radio_button_empty",
-    redo: "redo",
-    reload: "reload",
-    remove: "remove",
-    reply: "reply",
+    "redo": "redo",
+    "reload": "reload",
+    "remove": "remove",
+    "reply": "reply",
     "reply-all": "reply_all",
-    route: "route",
-    search: "search",
+    "route": "route",
+    "search": "search",
     "side-navigation": "side_navigation",
-    sort: "sort",
+    "sort": "sort",
     "support-agent": "support_agent",
-    timeline: "timeline",
+    "swap-horiz": "swap_horiz",
+    "swap-vert": "swap_vert",
+    "timeline": "timeline",
     "trending-down": "trending_down",
     "trending-flat": "trending_flat",
     "trending-up": "trending_up",
-    tune: "tune",
-    undo: "undo",
-    upload: "upload",
-    water: "water",
+    "tune": "tune",
+    "undo": "undo",
+    "upload": "upload",
+    "water": "water",
     "water-alt": "water_alt",
-    wifi: "wifi",
+    "wifi": "wifi",
     "wifi-off": "wifi_off",
-    windmill: "windmill",
+    "windmill": "windmill",
     "zoom-in": "zoom_in",
     "zoom-out": "zoom_out",
 };
 const TogglableIcons = {
     "add-circle": ["add_circle_outlined", "add_circle_filled"],
     "admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
-    analytics: ["analytics_outlined", "analytics_filled"],
-    archive: ["archive_outlined", "archive_filled"],
+    "analytics": ["analytics_outlined", "analytics_filled"],
+    "archive": ["archive_outlined", "archive_filled"],
     "arrow-circle-chevron-down": ["arrow_circle_chevron_down_outlined", "arrow_circle_chevron_down_filled"],
     "arrow-circle-chevron-left": ["arrow_circle_chevron_left_outlined", "arrow_circle_chevron_left_filled"],
     "arrow-circle-chevron-right": ["arrow_circle_chevron_right_outlined", "arrow_circle_chevron_right_filled"],
@@ -277,153 +193,156 @@ const TogglableIcons = {
     "arrow-circle-left": ["arrow_circle_left_outlined", "arrow_circle_left_filled"],
     "arrow-circle-right": ["arrow_circle_right_outlined", "arrow_circle_right_filled"],
     "arrow-circle-up": ["arrow_circle_up_outlined", "arrow_circle_up_filled"],
-    article: ["article_outlined", "article_filled"],
+    "article": ["article_outlined", "article_filled"],
     "assignment-complete": ["assignment_complete_outlined", "assignment_complete_filled"],
-    assignment: ["assignment_outlined", "assignment_filled"],
+    "assignment": ["assignment_outlined", "assignment_filled"],
     "battery-alert": ["battery_alert_outlined", "battery_alert_filled"],
     "battery-charging-full": ["battery_charging_full_outlined", "battery_charging_full_filled"],
     "bolt-alt-circle": ["bolt_alt_circle_outlined", "bolt_alt_circle_filled"],
     "bolt-alt": ["bolt_alt_outlined", "bolt_alt_filled"],
     "bolt-circle": ["bolt_circle_outlined", "bolt_circle_filled"],
-    bolt: ["bolt_outlined", "bolt_filled"],
-    bookmark: ["bookmark_outlined", "bookmark_filled"],
-    bookmarks: ["bookmarks_outlined", "bookmarks_filled"],
-    build: ["build_outlined", "build_filled"],
+    "bolt": ["bolt_outlined", "bolt_filled"],
+    "bookmark": ["bookmark_outlined", "bookmark_filled"],
+    "bookmarks": ["bookmarks_outlined", "bookmarks_filled"],
+    "build": ["build_outlined", "build_filled"],
     "calendar-available": ["calendar_available_outlined", "calendar_available_filled"],
     "calendar-busy": ["calendar_busy_outlined", "calendar_busy_filled"],
     "calendar-month": ["calendar_month_outlined", "calendar_month_filled"],
     "calendar-today": ["calendar_today_outlined", "calendar_today_filled"],
-    call: ["call_outlined", "call_filled"],
-    cancel: ["cancel_outlined", "cancel_filled"],
-    category: ["category_outlined", "category_filled"],
+    "call": ["call_outlined", "call_filled"],
+    "cancel": ["cancel_outlined", "cancel_filled"],
+    "category": ["category_outlined", "category_filled"],
     "chart-add": ["chart_add_outlined", "chart_add_filled"],
     "chart-area": ["chart_area_outlined", "chart_area_filled"],
     "chart-pie": ["chart_pie_outlined", "chart_pie_filled"],
     "chart-table": ["chart_table_outlined", "chart_table_filled"],
     "chat-alt": ["chat_alt_outlined", "chat_alt_filled"],
     "chat-alt-unread": ["chat_alt_unread_outlined", "chat_alt_unread_filled"],
-    chat: ["chat_outlined", "chat_filled"],
+    "chat": ["chat_outlined", "chat_filled"],
     "chat-unread": ["chat_unread_outlined", "chat_unread_filled"],
     "check-circle": ["check_circle_outlined", "check_circle_filled"],
-    checkbox: ["checkbox_outlined", "checkbox_filled"],
+    "checkbox": ["checkbox_outlined", "checkbox_filled"],
     "checkbox-indeterminate": ["checkbox_indeterminate_outlined", "checkbox_indeterminate_filled"],
-    clock: ["clock_outlined", "clock_filled"],
+    "clock": ["clock_outlined", "clock_filled"],
     "cloud-download": ["cloud_download_outlined", "cloud_download_filled"],
-    cloud: ["cloud_outlined", "cloud_filled"],
+    "cloud": ["cloud_outlined", "cloud_filled"],
     "cloud-off": ["cloud_off_outlined", "cloud_off_filled"],
     "cloud-upload": ["cloud_upload_outlined", "cloud_upload_filled"],
     "comment-add": ["comment_add_outlined", "comment_add_filled"],
-    comment: ["comment_outlined", "comment_filled"],
-    copy: ["copy_outlined", "copy_filled"],
-    dangerous: ["dangerous_outlined", "dangerous_filled"],
-    dashboard: ["dashboard_outlined", "dashboard_filled"],
-    database: ["database_outlined", "database_filled"],
-    delete: ["delete_outlined", "delete_filled"],
-    desktop: ["desktop_outlined", "desktop_filled"],
-    devices: ["devices_outlined", "devices_filled"],
-    draft: ["draft_outlined", "draft_filled"],
-    eco: ["eco_outlined", "eco_filled"],
-    edit: ["edit_outlined", "edit_filled"],
+    "comment": ["comment_outlined", "comment_filled"],
+    "contact": ["contact_outlined", "contact_filled"],
+    "copy": ["copy_outlined", "copy_filled"],
+    "dangerous": ["dangerous_outlined", "dangerous_filled"],
+    "dashboard": ["dashboard_outlined", "dashboard_filled"],
+    "database": ["database_outlined", "database_filled"],
+    "delete": ["delete_outlined", "delete_filled"],
+    "desktop": ["desktop_outlined", "desktop_filled"],
+    "devices": ["devices_outlined", "devices_filled"],
+    "draft": ["draft_outlined", "draft_filled"],
+    "eco": ["eco_outlined", "eco_filled"],
+    "edit": ["edit_outlined", "edit_filled"],
     "electric-meter": ["electric_meter_outlined", "electric_meter_filled"],
-    error: ["error_outlined", "error_filled"],
-    explore: ["explore_outlined", "explore_filled"],
+    "error": ["error_outlined", "error_filled"],
+    "explore": ["explore_outlined", "explore_filled"],
     "explore-off": ["explore_off_outlined", "explore_off_filled"],
+    "export-xls": ["export_xls_outlined", "export_xls_filled"],
     "fast-forward": ["fast_forward_outlined", "fast_forward_filled"],
     "fast-rewind": ["fast_rewind_outlined", "fast_rewind_filled"],
-    feedback: ["feedback_outlined", "feedback_filled"],
+    "feedback": ["feedback_outlined", "feedback_filled"],
     "file-copy": ["file_copy_outlined", "file_copy_filled"],
     "file-download": ["file_download_outlined", "file_download_filled"],
     "file-upload": ["file_upload_outlined", "file_upload_filled"],
     "filter-alt": ["filter_alt_outlined", "filter_alt_filled"],
     "filter-alt-off": ["filter_alt_off_outlined", "filter_alt_off_filled"],
-    fire: ["fire_outlined", "fire_filled"],
+    "fire": ["fire_outlined", "fire_filled"],
     "fit-screen": ["fit_screen_outlined", "fit_screen_filled"],
-    flag: ["flag_outlined", "flag_filled"],
-    flash: ["flash_outlined", "flash_filled"],
+    "flag": ["flag_outlined", "flag_filled"],
+    "flash": ["flash_outlined", "flash_filled"],
     "flash-off": ["flash_off_outlined", "flash_off_filled"],
     "folder-add": ["folder_add_outlined", "folder_add_filled"],
-    folder: ["folder_outlined", "folder_filled"],
+    "folder": ["folder_outlined", "folder_filled"],
     "folder-move": ["folder_move_outlined", "folder_move_filled"],
     "folder-open": ["folder_open_outlined", "folder_open_filled"],
     "folder-shared": ["folder_shared_outlined", "folder_shared_filled"],
-    forum: ["forum_outlined", "forum_filled"],
+    "forum": ["forum_outlined", "forum_filled"],
     "group-add": ["group_add_outlined", "group_add_filled"],
-    group: ["group_outlined", "group_filled"],
-    groups: ["groups_outlined", "groups_filled"],
-    headphones: ["headphones_outlined", "headphones_filled"],
-    heart: ["heart_outlined", "heart_filled"],
-    help: ["help_outlined", "help_filled"],
-    home: ["home_outlined", "home_filled"],
-    hourglass: ["hourglass_outlined", "hourglass_filled"],
+    "group": ["group_outlined", "group_filled"],
+    "groups": ["groups_outlined", "groups_filled"],
+    "handshake": ["handshake_outlined", "handshake_filled"],
+    "headphones": ["headphones_outlined", "headphones_filled"],
+    "heart": ["heart_outlined", "heart_filled"],
+    "help": ["help_outlined", "help_filled"],
+    "home": ["home_outlined", "home_filled"],
+    "hourglass": ["hourglass_outlined", "hourglass_filled"],
     "image-broken": ["image_broken_outlined", "image_broken_filled"],
-    image: ["image_outlined", "image_filled"],
+    "image": ["image_outlined", "image_filled"],
     "image-gallery": ["image_gallery_outlined", "image_gallery_filled"],
-    inbox: ["inbox_outlined", "inbox_filled"],
-    info: ["info_outlined", "info_filled"],
-    keep: ["keep_outlined", "keep_filled"],
+    "inbox": ["inbox_outlined", "inbox_filled"],
+    "info": ["info_outlined", "info_filled"],
+    "keep": ["keep_outlined", "keep_filled"],
     "keep-off": ["keep_off_outlined", "keep_off_filled"],
-    label: ["label_outlined", "label_filled"],
-    laptop: ["laptop_outlined", "laptop_filled"],
+    "label": ["label_outlined", "label_filled"],
+    "laptop": ["laptop_outlined", "laptop_filled"],
     "left-panel-close": ["left_panel_close_outlined", "left_panel_close_filled"],
     "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
     "light-off": ["light_off_outlined", "light_off_filled"],
     "lightbulb-alt": ["lightbulb_alt_outlined", "lightbulb_alt_filled"],
     "lightbulb-circle": ["lightbulb_circle_outlined", "lightbulb_circle_filled"],
-    lightbulb: ["lightbulb_outlined", "lightbulb_filled"],
+    "lightbulb": ["lightbulb_outlined", "lightbulb_filled"],
     "list-alt": ["list_alt_outlined", "list_alt_filled"],
     "location-me": ["location_me_outlined", "location_me_filled"],
     "location-off": ["location_off_outlined", "location_off_filled"],
     "location-on": ["location_on_outlined", "location_on_filled"],
-    lock: ["lock_outlined", "lock_filled"],
+    "lock": ["lock_outlined", "lock_filled"],
     "lock-open": ["lock_open_outlined", "lock_open_filled"],
     "lock-open-right": ["lock_open_right_outlined", "lock_open_right_filled"],
-    mail: ["mail_outlined", "mail_filled"],
+    "mail": ["mail_outlined", "mail_filled"],
     "mail-unread": ["mail_unread_outlined", "mail_unread_filled"],
-    map: ["map_outlined", "map_filled"],
-    mic: ["mic_outlined", "mic_filled"],
+    "map": ["map_outlined", "map_filled"],
+    "mic": ["mic_outlined", "mic_filled"],
     "mic-off": ["mic_off_outlined", "mic_off_filled"],
     "mode-dark": ["mode_dark_outlined", "mode_dark_filled"],
     "mode-light": ["mode_light_outlined", "mode_light_filled"],
-    notification: ["notification_outlined", "notification_filled"],
+    "notification": ["notification_outlined", "notification_filled"],
     "notification-important": ["notification_important_outlined", "notification_important_filled"],
     "notification-off": ["notification_off_outlined", "notification_off_filled"],
     "notification-unread": ["notification_unread_outlined", "notification_unread_filled"],
-    palette: ["palette_outlined", "palette_filled"],
+    "palette": ["palette_outlined", "palette_filled"],
     "pause-circle": ["pause_circle_outlined", "pause_circle_filled"],
-    pause: ["pause_outlined", "pause_filled"],
+    "pause": ["pause_outlined", "pause_filled"],
     "photo-camera": ["photo_camera_outlined", "photo_camera_filled"],
     "play-circle": ["play_circle_outlined", "play_circle_filled"],
-    play: ["play_outlined", "play_filled"],
-    power: ["power_outlined", "power_filled"],
+    "play": ["play_outlined", "play_filled"],
+    "power": ["power_outlined", "power_filled"],
     "power-off": ["power_off_outlined", "power_off_filled"],
     "power-plug-connect": ["power_plug_connect_outlined", "power_plug_connect_filled"],
     "power-settings-circle": ["power_settings_circle_outlined", "power_settings_circle_filled"],
     "power-solar": ["power_solar_outlined", "power_solar_filled"],
     "power-switch": ["power_switch_outlined", "power_switch_filled"],
     "power-wind": ["power_wind_outlined", "power_wind_filled"],
-    print: ["print_outlined", "print_filled"],
+    "print": ["print_outlined", "print_filled"],
     "right-panel-close": ["right_panel_close_outlined", "right_panel_close_filled"],
     "right-panel-open": ["right_panel_open_outlined", "right_panel_open_filled"],
-    save: ["save_outlined", "save_filled"],
-    send: ["send_outlined", "send_filled"],
-    settings: ["settings_outlined", "settings_filled"],
-    share: ["share_outlined", "share_filled"],
+    "save": ["save_outlined", "save_filled"],
+    "send": ["send_outlined", "send_filled"],
+    "settings": ["settings_outlined", "settings_filled"],
+    "share": ["share_outlined", "share_filled"],
     "skip-next": ["skip_next_outlined", "skip_next_filled"],
     "skip-previous": ["skip_previous_outlined", "skip_previous_filled"],
-    smartphone: ["smartphone_outlined", "smartphone_filled"],
-    star: ["star_outlined", "star_filled"],
+    "smartphone": ["smartphone_outlined", "smartphone_filled"],
+    "star": ["star_outlined", "star_filled"],
     "sticky-note": ["sticky_note_outlined", "sticky_note_filled"],
     "stop-circle": ["stop_circle_outlined", "stop_circle_filled"],
-    stop: ["stop_outlined", "stop_filled"],
-    subtitles: ["subtitles_outlined", "subtitles_filled"],
+    "stop": ["stop_outlined", "stop_filled"],
+    "subtitles": ["subtitles_outlined", "subtitles_filled"],
     "text-snippet": ["text_snippet_outlined", "text_snippet_filled"],
     "trash-restore": ["trash_restore_outlined", "trash_restore_filled"],
-    unarchive: ["unarchive_outlined", "unarchive_filled"],
+    "unarchive": ["unarchive_outlined", "unarchive_filled"],
     "user-add": ["user_add_outlined", "user_add_filled"],
     "user-circle": ["user_circle_outlined", "user_circle_filled"],
-    user: ["user_outlined", "user_filled"],
+    "user": ["user_outlined", "user_filled"],
     "user-settings": ["user_settings_outlined", "user_settings_filled"],
-    verified: ["verified_outlined", "verified_filled"],
+    "verified": ["verified_outlined", "verified_filled"],
     "video-camera": ["video_camera_outlined", "video_camera_filled"],
     "video-camera-off": ["video_camera_off_outlined", "video_camera_off_filled"],
     "video-gallery": ["video_gallery_outlined", "video_gallery_filled"],
@@ -439,8 +358,8 @@ const TogglableIcons = {
     "volume-mute": ["volume_mute_outlined", "volume_mute_filled"],
     "volume-off": ["volume_off_outlined", "volume_off_filled"],
     "volume-up": ["volume_up_outlined", "volume_up_filled"],
-    warning: ["warning_outlined", "warning_filled"],
-    waterdrop: ["waterdrop_outlined", "waterdrop_filled"],
+    "warning": ["warning_outlined", "warning_filled"],
+    "waterdrop": ["waterdrop_outlined", "waterdrop_filled"],
 };
 function isValidIconName(iconName) {
     return isValidIconName$1(iconName, RegularIcons, TogglableIcons);
@@ -479,7 +398,7 @@ class IconComponent {
     constructor() {
         this.name = input.required();
         this.size = input(20);
-        this.color = input("currentColor");
+        this.color = input();
         this.classes = input("");
         this.appearance = input();
         this.destroyRef = inject(DestroyRef);
@@ -488,26 +407,122 @@ class IconComponent {
         this.iconService = inject(IconService);
         this.cdr = inject(ChangeDetectorRef);
         effect(() => {
-            this.setSvgContent(this.name());
-        });
+            this.setSvgContent(this.name(), this.size(), this.appearance(), this.color());
+        }, { allowSignalWrites: true });
     }
-    setSvgContent(svgName) {
-        const svgFile = this.iconService.getSvg(svgName, this.appearance() || "outlined");
+    setSvgContent(svgName, size, appearance, color) {
+        const svgFile = this.iconService.getSvg(svgName, appearance || "outlined");
         svgFile.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((res) => {
-            const size = this.size();
-            const svgWithSize = res.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+            const svgWithSize = res.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}" color="${color}">`);
             this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svgWithSize);
             this.cdr.markForCheck();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: IconComponent, isStandalone: true, selector: "rte-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [IconService], ngImport: i0, template: "<div\n  class=\"rte-icon-container\"\n  [innerHTML]=\"svgContent\"\n  [style.height]=\"size() + 'px'\"\n  [style.width]=\"size() + 'px'\"\n></div>\n", styles: [".rte-icon-container{display:flex;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: IconComponent, isStandalone: true, selector: "rte-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, providers: [IconService], ngImport: i0, template: "<div\n  class=\"rte-icon-container\"\n  [innerHTML]=\"svgContent\"\n  [style.height]=\"size() + 'px'\"\n  [style.width]=\"size() + 'px'\"\n  [style.color]=\"color()\"\n></div>\n", styles: [".rte-icon-container{display:flex;color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-icon", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IconService], template: "<div\n  class=\"rte-icon-container\"\n  [innerHTML]=\"svgContent\"\n  [style.height]=\"size() + 'px'\"\n  [style.width]=\"size() + 'px'\"\n></div>\n", styles: [".rte-icon-container{display:flex;color:inherit}\n"] }]
+            args: [{ selector: "rte-icon", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IconService], template: "<div\n  class=\"rte-icon-container\"\n  [innerHTML]=\"svgContent\"\n  [style.height]=\"size() + 'px'\"\n  [style.width]=\"size() + 'px'\"\n  [style.color]=\"color()\"\n></div>\n", styles: [".rte-icon-container{display:flex;color:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
+class ButtonComponent {
+    constructor() {
+        this.rteButtonVariant = input("primary");
+        this.rteButtonSize = input("m");
+        this.rteBadgeCount = input();
+        this.rteBadgeContent = input();
+        this.rteButtonIcon = input();
+        this.rteButtonIconPosition = input("left");
+        this.rteButtonIconAppearance = input("filled");
+        this.iconSize = computed(() => ButtonIconSize[this.rteButtonSize()]);
+        this.shouldDisplayBadge = computed(() => {
+            const count = this.rteBadgeCount();
+            const content = this.rteBadgeContent();
+            return (count && count > 0 && content === "number") || content === "icon";
+        });
+    }
+    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.0.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 }, rteBadgeCount: { classPropertyName: "rteBadgeCount", publicName: "rteBadgeCount", isSignal: true, isRequired: false, transformFunction: null }, rteBadgeContent: { classPropertyName: "rteBadgeContent", publicName: "rteBadgeContent", isSignal: true, isRequired: false, transformFunction: null }, rteButtonIcon: { classPropertyName: "rteButtonIcon", publicName: "rteButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, rteButtonIconPosition: { classPropertyName: "rteButtonIconPosition", publicName: "rteButtonIconPosition", isSignal: true, isRequired: false, transformFunction: null }, rteButtonIconAppearance: { classPropertyName: "rteButtonIconAppearance", publicName: "rteButtonIconAppearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "@if (rteButtonIcon() && rteButtonIconPosition() === \"left\") {\n  <rte-icon [name]=\"rteButtonIcon()!\" [appearance]=\"rteButtonIconAppearance()\" [size]=\"iconSize()!\"></rte-icon>\n}\n<span class=\"rte-button-label\">\n  <ng-content />\n  <!-- Le badge est g\u00E9r\u00E9 par BadgeDirective attach\u00E9e via hostDirectives -->\n</span>\n@if (rteButtonIcon() && rteButtonIconPosition() === \"right\") {\n  <rte-icon #icon [name]=\"rteButtonIcon()!\" [appearance]=\"rteButtonIconAppearance()\" [size]=\"iconSize()!\"></rte-icon>\n}\n", styles: [":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)}: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"], dependencies: [{ 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: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "button[rteButton]", imports: [IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (rteButtonIcon() && rteButtonIconPosition() === \"left\") {\n  <rte-icon [name]=\"rteButtonIcon()!\" [appearance]=\"rteButtonIconAppearance()\" [size]=\"iconSize()!\"></rte-icon>\n}\n<span class=\"rte-button-label\">\n  <ng-content />\n  <!-- Le badge est g\u00E9r\u00E9 par BadgeDirective attach\u00E9e via hostDirectives -->\n</span>\n@if (rteButtonIcon() && rteButtonIconPosition() === \"right\") {\n  <rte-icon #icon [name]=\"rteButtonIcon()!\" [appearance]=\"rteButtonIconAppearance()\" [size]=\"iconSize()!\"></rte-icon>\n}\n", styles: [":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)}: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() {
+        return "grid";
+    }
+    get hostDataClasses() {
+        const variation = this.gridType();
+        return `${variation}`;
+    }
+    constructor() {
+        this.gridType = input("fluid");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: GridDirective, isStandalone: true, selector: "[rteGrid]", inputs: { gridType: { classPropertyName: "gridType", publicName: "gridType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.data-gridtype": "this.hostDataClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteGrid]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ["class"]
+            }], hostDataClasses: [{
+                type: HostBinding,
+                args: ["attr.data-gridtype"]
+            }] } });
+
+class ColDirective {
+    get colClasses() {
+        return [
+            "col",
+            this.generateColumnClass("col-xxs", this.xxs()),
+            this.generateColumnClass("col-xs", this.xs()),
+            this.generateColumnClass("col-s", this.s()),
+            this.generateColumnClass("col-m", this.m()),
+            this.generateColumnClass("col-l", this.l()),
+            this.generateColumnClass("col-xl", this.xl()),
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    constructor() {
+        this.xxs = input();
+        this.xs = input();
+        this.s = input();
+        this.m = input();
+        this.l = input();
+        this.xl = input();
+    }
+    generateColumnClass(prefix, size) {
+        return size ? `${prefix}-${size}` : "";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.14", type: ColDirective, isStandalone: true, selector: "[rteCol]", inputs: { xxs: { classPropertyName: "xxs", publicName: "xxs", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, s: { classPropertyName: "s", publicName: "s", isSignal: true, isRequired: false, transformFunction: null }, m: { classPropertyName: "m", publicName: "m", isSignal: true, isRequired: false, transformFunction: null }, l: { classPropertyName: "l", publicName: "l", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.colClasses" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteCol]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { colClasses: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
+
 class LinkComponent {
     constructor() {
         this.label = input("");
@@ -581,6 +596,7 @@ class CheckboxComponent {
         this.errorMessage = input("");
         this.readOnly = input(false);
         this.checked = input(false);
+        this.tabindex = input(undefined);
     }
     onKeydown(event) {
         if (event.code === "Space") {
@@ -590,11 +606,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: [".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 }); }
+    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 }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", 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    [attr.tabindex]=\"tabindex()\"\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: [".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: [".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"] }]
+            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    [attr.tabindex]=\"tabindex()\"\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: [".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 {
@@ -613,7 +629,7 @@ 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 *ngIf=\"isDisplayed()\" 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  >\n    <h3 *ngIf=\"showGroupTitle()\" class=\"group-title\">\n      {{ groupTitle() }}\n    </h3>\n    <p *ngIf=\"showHelpText()\" class=\"group-help-text\">\n      {{ groupHelpText() }}\n    </p>\n    <p *ngIf=\"error()\" class=\"group-error-message\">\n      {{ errorMessage() }}\n    </p>\n  </div>\n  <div\n    class=\"checkbox-group\"\n    [ngClass]=\"{ horizontal: direction() === 'horizontal', vertical: direction() === 'vertical' }\"\n  >\n    <ng-container *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>\n", styles: [".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 }); }
+    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 *ngIf=\"isDisplayed()\" 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  >\n    <h3 *ngIf=\"showGroupTitle()\" class=\"group-title\">\n      {{ groupTitle() }}\n    </h3>\n    <p *ngIf=\"showHelpText()\" class=\"group-help-text\">\n      {{ groupHelpText() }}\n    </p>\n    <p *ngIf=\"error()\" class=\"group-error-message\">\n      {{ errorMessage() }}\n    </p>\n  </div>\n  <div\n    class=\"checkbox-group\"\n    [ngClass]=\"{ horizontal: direction() === 'horizontal', vertical: direction() === 'vertical' }\"\n  >\n    <ng-container *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>\n", styles: [".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", "tabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
@@ -1147,7 +1163,7 @@ class DropdownItemComponent {
         this.destroySubMenu();
     }
     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", submenuRequest: "submenuRequest" }, ngImport: i0, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n    [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n    [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (focus)=\"handleFocus()\"\n  >\n    <rte-checkbox\n      *ngIf=\"item()?.hasCheckbox\"\n      [label]=\"item()?.label ?? ''\"\n      [id]=\"menuId() + ':' + item()?.id\"\n      [checked]=\"item()?.selected ?? false\"\n      [disabled]=\"item()?.disabled ?? false\"\n      [showLabel]=\"false\"\n      [indeterminate]=\"item()?.isIndeterminate ?? false\"\n    ></rte-checkbox>\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked"] }] }); }
+    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", submenuRequest: "submenuRequest" }, ngImport: i0, template: "<ng-container>\n  <li\n    #itemRef\n    class=\"rte-dropdown-item\"\n    role=\"menuitem\"\n    tabindex=\"0\"\n    [attr.data-disabled]=\"item()?.disabled\"\n    [attr.data-active]=\"hasChildren() ? subMenuOpen() : item()?.selected\"\n    [attr.aria-haspopup]=\"hasChildren() ? 'menu' : null\"\n    [attr.aria-expanded]=\"hasChildren() ? subMenuOpen() : null\"\n    (click)=\"handleClick($event)\"\n    (keydown)=\"handleKeyDown($event)\"\n    (mouseenter)=\"handleMouseEnter()\"\n    (mouseleave)=\"handleMouseLeave()\"\n    (focus)=\"handleFocus()\"\n  >\n    <rte-checkbox\n      *ngIf=\"item()?.hasCheckbox\"\n      [label]=\"item()?.label ?? ''\"\n      [id]=\"menuId() + ':' + item()?.id\"\n      [checked]=\"item()?.selected ?? false\"\n      [disabled]=\"item()?.disabled ?? false\"\n      [showLabel]=\"false\"\n      [indeterminate]=\"item()?.isIndeterminate ?? false\"\n    ></rte-checkbox>\n    <span *ngIf=\"item()?.hasIndent && !item()?.leftIcon\" style=\"width: 20px\"></span>\n    <rte-icon *ngIf=\"item()?.leftIcon\" [name]=\"item()?.leftIcon ?? ''\" />\n    <ng-container [ngSwitch]=\"!!item()?.link\">\n      <a *ngSwitchCase=\"true\" style=\"flex: 2; text-decoration: none; color: inherit\" [href]=\"item()?.link\"\n        >{{ item()?.label }}\n      </a>\n      <span *ngSwitchDefault style=\"flex: 2\">{{ item()?.label }}</span>\n    </ng-container>\n    <rte-icon *ngIf=\"hasChildren()\" name=\"arrow-chevron-right\" />\n    <div *ngIf=\"item()?.trailingText\">{{ item()?.trailingText }}</div>\n    <rte-badge\n      *ngIf=\"shouldDisplayBadge()\"\n      [badgeType]=\"item()?.badgeType!\"\n      [badgeContent]=\"item()?.badgeContent!\"\n      [count]=\"item()?.badgeCount\"\n      [simpleBadge]=\"true\"\n      [icon]=\"item()?.badgeIcon ?? ''\"\n      [badgeSize]=\"item()?.badgeSize!\"\n    ></rte-badge>\n  </li>\n  <div *ngIf=\"item()?.hasSeparator\" class=\"dropdown-divider\">\n    <rte-divider />\n  </div>\n</ng-container>\n", styles: [".rte-dropdown-item{font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;height:40px;padding:8px 12px;align-items:center;gap:12px;align-self:stretch;cursor:pointer;box-sizing:border-box}.rte-dropdown-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-dropdown-item:hover{background-color:var(--background-hover)}.rte-dropdown-item[data-disabled=true]{cursor:not-allowed;color:var(--content-disabled);background:var(--background-disabled)}.rte-dropdown-item[data-active=true]{background-color:var(--background-brand-inverse-pressed)}.rte-dropdown-item:focus-visible{outline:none;background-color:var(--background-hover)}.dropdown-divider{width:100%;padding:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked", "tabindex"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
             type: Component,
@@ -1798,7 +1814,7 @@ class IconButtonComponent {
         this.badgeType = input();
         this.badgeIcon = input("settings");
         this.customStyle = input();
-        this.buttonIconSize = computed(() => ButtonIconSize[this.size()]);
+        this.buttonIconSize = computed(() => ButtonIconSize$1[this.size()]);
         this.isValidIconName = computed(() => isValidIconName(this.name()));
         this.clickEvent = output();
         this.shouldDisplayBadge = computed(() => {
@@ -1836,7 +1852,7 @@ class IconButtonToggleComponent {
         this.isSelected = computed(() => {
             return this.isControlled() ? this.selected() : this.internalSelected();
         });
-        this.buttonIconSize = computed(() => ButtonIconSize[this.size()]);
+        this.buttonIconSize = computed(() => ButtonIconSize$1[this.size()]);
     }
     toggleInternalSelectedState() {
         this.internalSelected.set(!this.internalSelected());
@@ -2358,6 +2374,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-breadcrumbs", imports: [CommonModule, DropdownModule, IconButtonComponent, BreadcrumbItemComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  class=\"breadcrumbs-container\"\n  role=\"navigation\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [ngClass]=\"{ truncated: truncatedItems()?.truncated?.length }\"\n>\n  @if (truncatedItems()?.truncated?.length) {\n    <rte-breadcrumb-item [item]=\"truncatedItems()!.root\" [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\" />\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    <span class=\"breadcrumb-item\" rteDropdown [rteDropdownOffset]=\"8\">\n      <rte-icon-button\n        rteDropdownTrigger\n        name=\"more-horiz\"\n        role=\"menu\"\n        variant=\"neutral\"\n        aria-label=\"More items\"\n        data-testid=\"show-more\"\n        tabindex=\"-1\"\n        [compactSpacing]=\"true\"\n      />\n      <rte-badge\n        *ngIf=\"shouldDisplayBadge()\"\n        [count]=\"badgeCount()\"\n        [simpleBadge]=\"true\"\n        [badgeContent]=\"badgeContent()!\"\n        [icon]=\"badgeIcon()!\"\n        [badgeType]=\"badgeType()!\"\n        [badgeSize]=\"badgeSize()!\"\n      />\n      <rte-dropdown-menu [items]=\"truncatedItems()?.truncated ?? []\" />\n    </span>\n    <span aria-hidden=\"true\" class=\"separator\">/</span>\n    @for (item of truncatedItems()!.remaining; track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === truncatedItems()!.remaining.length - 1\"\n      />\n      @if (i < truncatedItems()!.remaining.length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  } @else {\n    @for (item of items(); track item.link; let i = $index) {\n      <rte-breadcrumb-item\n        [item]=\"item\"\n        [breadcrumbItemMaxWidth]=\"breadcrumbItemMaxWidth()\"\n        [isLast]=\"i === items().length - 1\"\n      />\n      @if (i < items().length - 1) {\n        <span aria-hidden=\"true\" class=\"separator\">/</span>\n      }\n    }\n  }\n</nav>\n", styles: [".breadcrumbs-container{display:flex;align-items:center;gap:2px}.breadcrumbs-container .breadcrumb-item{display:inline-flex;align-items:center;opacity:0;animation:fadeIn .15s forwards;font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a,.breadcrumbs-container .breadcrumb-item rte-link ::ng-deep a.subtle{color:var(--content-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs-container .breadcrumb-item:last-child{cursor:default;color:var(--content-primary)}.breadcrumbs-container .breadcrumb-item :focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.separator{color:var(--content-secondary);padding:0 8px;-webkit-user-select:none;user-select:none;opacity:0;animation:fadeIn .15s forwards}@keyframes fadeIn{to{opacity:1}}\n"] }]
         }] });
 
+class AccordionComponent {
+    static { this.nextFallbackId = 0; }
+    get hostClasses() {
+        return ["rte-accordion", this.internalOpen() ? "is-open" : ""].filter(Boolean).join(" ");
+    }
+    constructor() {
+        this.id = input(undefined);
+        this.appearance = input("brand");
+        this.alignement = input("right");
+        this.compactSpacing = input(false);
+        this.icon = input(undefined);
+        this.disabled = input(false);
+        this.isOpen = input(undefined);
+        this.size = input("small");
+        this.isOpenChange = output();
+        this.clicked = output();
+        this.internalOpen = signal(false);
+        this.isAnimating = signal(false);
+        this.panelHeightPx = signal(0);
+        this.generatedInstanceId = AccordionComponent.createInstanceId();
+        this.contentArea = viewChild("accordionContent");
+        effect(() => {
+            const fromParent = this.isOpen();
+            if (fromParent !== undefined) {
+                this.internalOpen.set(fromParent);
+            }
+        }, { allowSignalWrites: true });
+        effect((onCleanup) => {
+            const open = this.internalOpen();
+            if (open) {
+                this.isAnimating.set(false);
+                this.panelHeightPx.set(0);
+                const cancelWaitForNextFrame = waitForNextFrame(() => {
+                    this.isAnimating.set(true);
+                    this.syncPanelHeightFromContent();
+                });
+                onCleanup(cancelWaitForNextFrame);
+            }
+            else {
+                this.isAnimating.set(false);
+                this.panelHeightPx.set(0);
+            }
+        }, { allowSignalWrites: true });
+    }
+    summaryElementId() {
+        return `accordion-summary-${this.id() ?? this.generatedInstanceId}`;
+    }
+    contentElementId() {
+        return `accordion-content-${this.id() ?? this.generatedInstanceId}`;
+    }
+    iconPixelSize() {
+        const currentSize = this.size() ?? "small";
+        return AccordionIconSizeMap[currentSize];
+    }
+    onSummaryClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.clicked.emit(event);
+        const next = !this.internalOpen();
+        this.internalOpen.set(next);
+        this.isOpenChange.emit(next);
+    }
+    syncPanelHeightFromContent() {
+        const contentElement = this.contentArea()?.nativeElement;
+        if (!contentElement) {
+            return;
+        }
+        this.panelHeightPx.set(contentElement.scrollHeight);
+    }
+    static createInstanceId() {
+        if (typeof globalThis.crypto !== "undefined" && "randomUUID" in globalThis.crypto) {
+            return globalThis.crypto.randomUUID();
+        }
+        AccordionComponent.nextFallbackId += 1;
+        return `accordion-${AccordionComponent.nextFallbackId}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AccordionComponent, isStandalone: true, selector: "rte-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, alignement: { classPropertyName: "alignement", publicName: "alignement", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", 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 }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpenChange: "isOpenChange", clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "contentArea", first: true, predicate: ["accordionContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"accordion\">\n  <button\n    class=\"rte-accordion-summary {{ appearance() }} size-{{ size() }}\"\n    type=\"button\"\n    [class.compact-spacing]=\"compactSpacing()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"internalOpen()\"\n    [attr.aria-controls]=\"contentElementId()\"\n    (click)=\"onSummaryClick($event)\"\n  >\n    <div class=\"rte-accordion-summary-row\" [id]=\"summaryElementId()\">\n      @if (alignement() === \"left\") {\n        <rte-icon\n          class=\"rte-accordion-chevron\"\n          name=\"arrow-chevron-down\"\n          [class.animating]=\"isAnimating()\"\n          [size]=\"iconPixelSize()\"\n        />\n      }\n      @if (icon(); as iconName) {\n        <rte-icon [name]=\"iconName\" [size]=\"iconPixelSize()\" />\n      }\n      <span class=\"rte-accordion-title size-{{ size() }}\">Accordion title</span>\n      @if (alignement() === \"right\") {\n        <rte-icon\n          class=\"rte-accordion-chevron\"\n          name=\"arrow-chevron-down\"\n          [class.animating]=\"isAnimating()\"\n          [size]=\"iconPixelSize()\"\n        />\n      }\n    </div>\n  </button>\n  <div\n    #accordionContent\n    class=\"rte-accordion-panel\"\n    [class.animating]=\"isAnimating()\"\n    [class.is-disabled]=\"disabled()\"\n    [attr.aria-hidden]=\"!internalOpen()\"\n    [id]=\"contentElementId()\"\n    [style.height.px]=\"panelHeightPx()\"\n  >\n    <ng-content />\n  </div>\n  <rte-divider thickness=\"light\" />\n</div>\n", styles: [":host{display:block;width:100%;inline-size:100%;background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background:var(--background-default)}.rte-accordion-summary{text-align:left;display:flex;padding:8px 0;flex-direction:column;align-items:flex-start;color:var(--content-brand-default);height:48px;border:none;background:none;width:100%}.rte-accordion-summary:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-accordion-summary:hover{color:var(--content-brand-hover);background:var(--background-default);cursor:pointer}.rte-accordion-summary:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:not-allowed}.rte-accordion-summary.neutral{color:var(--content-primary)}.rte-accordion-summary.neutral:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:not-allowed}.rte-accordion-summary.compact-spacing{padding:0;height:32px}.rte-accordion-summary.compact-spacing:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:not-allowed}.rte-accordion-summary.size-large{height:60px}.rte-accordion-summary.size-large.compact-spacing{height:48px}.rte-accordion-summary .rte-accordion-summary-row{width:100%;display:flex;padding:2px 4px;align-items:center;gap:8px;align-self:stretch;box-sizing:border-box}.rte-accordion-summary .rte-accordion-summary-row .rte-accordion-chevron{transition:transform .11s cubic-bezier(0,0,.38,.9) allow-discrete}.rte-accordion-summary .rte-accordion-summary-row .rte-accordion-chevron.animating{transform:rotate(180deg)}.rte-accordion-summary .rte-accordion-title{flex:1 1 auto;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-accordion-summary .rte-accordion-title.size-large{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:32px;line-height:40px;letter-spacing:-1px}.rte-accordion-panel-container{border-block-end:solid 1px var(--border-divider)}.rte-accordion-panel{padding:0 8px;transform:translateY(-10px);overflow:hidden;opacity:0;transition:all .12s cubic-bezier(0,0,.38,.9) allow-discrete}.rte-accordion-panel.animating{padding:16px 8px;opacity:1;overflow:visible;transform:translateY(0)}.rte-accordion-panel.is-disabled{background:var(--background-disabled);color:var(--content-disabled)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-accordion", imports: [IconComponent, DividerComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"accordion\">\n  <button\n    class=\"rte-accordion-summary {{ appearance() }} size-{{ size() }}\"\n    type=\"button\"\n    [class.compact-spacing]=\"compactSpacing()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"internalOpen()\"\n    [attr.aria-controls]=\"contentElementId()\"\n    (click)=\"onSummaryClick($event)\"\n  >\n    <div class=\"rte-accordion-summary-row\" [id]=\"summaryElementId()\">\n      @if (alignement() === \"left\") {\n        <rte-icon\n          class=\"rte-accordion-chevron\"\n          name=\"arrow-chevron-down\"\n          [class.animating]=\"isAnimating()\"\n          [size]=\"iconPixelSize()\"\n        />\n      }\n      @if (icon(); as iconName) {\n        <rte-icon [name]=\"iconName\" [size]=\"iconPixelSize()\" />\n      }\n      <span class=\"rte-accordion-title size-{{ size() }}\">Accordion title</span>\n      @if (alignement() === \"right\") {\n        <rte-icon\n          class=\"rte-accordion-chevron\"\n          name=\"arrow-chevron-down\"\n          [class.animating]=\"isAnimating()\"\n          [size]=\"iconPixelSize()\"\n        />\n      }\n    </div>\n  </button>\n  <div\n    #accordionContent\n    class=\"rte-accordion-panel\"\n    [class.animating]=\"isAnimating()\"\n    [class.is-disabled]=\"disabled()\"\n    [attr.aria-hidden]=\"!internalOpen()\"\n    [id]=\"contentElementId()\"\n    [style.height.px]=\"panelHeightPx()\"\n  >\n    <ng-content />\n  </div>\n  <rte-divider thickness=\"light\" />\n</div>\n", styles: [":host{display:block;width:100%;inline-size:100%;background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);background:var(--background-default)}.rte-accordion-summary{text-align:left;display:flex;padding:8px 0;flex-direction:column;align-items:flex-start;color:var(--content-brand-default);height:48px;border:none;background:none;width:100%}.rte-accordion-summary:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-accordion-summary:hover{color:var(--content-brand-hover);background:var(--background-default);cursor:pointer}.rte-accordion-summary:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:not-allowed}.rte-accordion-summary.neutral{color:var(--content-primary)}.rte-accordion-summary.neutral:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:not-allowed}.rte-accordion-summary.compact-spacing{padding:0;height:32px}.rte-accordion-summary.compact-spacing:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:not-allowed}.rte-accordion-summary.size-large{height:60px}.rte-accordion-summary.size-large.compact-spacing{height:48px}.rte-accordion-summary .rte-accordion-summary-row{width:100%;display:flex;padding:2px 4px;align-items:center;gap:8px;align-self:stretch;box-sizing:border-box}.rte-accordion-summary .rte-accordion-summary-row .rte-accordion-chevron{transition:transform .11s cubic-bezier(0,0,.38,.9) allow-discrete}.rte-accordion-summary .rte-accordion-summary-row .rte-accordion-chevron.animating{transform:rotate(180deg)}.rte-accordion-summary .rte-accordion-title{flex:1 1 auto;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-accordion-summary .rte-accordion-title.size-large{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:32px;line-height:40px;letter-spacing:-1px}.rte-accordion-panel-container{border-block-end:solid 1px var(--border-divider)}.rte-accordion-panel{padding:0 8px;transform:translateY(-10px);overflow:hidden;opacity:0;transition:all .12s cubic-bezier(0,0,.38,.9) allow-discrete}.rte-accordion-panel.animating{padding:16px 8px;opacity:1;overflow:visible;transform:translateY(0)}.rte-accordion-panel.is-disabled{background:var(--background-disabled);color:var(--content-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
+
 class BannerComponent {
     constructor() {
         this.type = input("info");
@@ -2417,7 +2521,7 @@ class BannerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BannerComponent, isStandalone: true, selector: "rte-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  class=\"rte-banner\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n>\n  <div class=\"rte-banner-icon\">\n    <rte-icon [name]=\"iconName()\" [size]=\"32\" />\n  </div>\n  <div class=\"rte-banner-content\">\n    <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n    <div *ngIf=\"message()\" class=\"rte-banner-message\">\n      <span>{{ message() }}</span>\n    </div>\n  </div>\n  <button\n    *ngIf=\"actionLabel()\"\n    rteButton\n    rteButtonVariant=\"text\"\n    rteButtonSize=\"s\"\n    [attr.aria-label]=\"actionLabel()!\"\n    (click)=\"clickAction()\"\n  >\n    {{ actionLabel() }}\n  </button>\n  <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n    <rte-icon-button name=\"close\" variant=\"neutral\" ariaLabel=\"close banner\" (clickEvent)=\"closeBanner()\" />\n  </div>\n</section>\n", styles: [".rte-banner{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);padding:16px;gap:16px;align-self:stretch;border-radius:0 0 4px 4px;display:flex;box-sizing:border-box;width:100%;min-width:320px;justify-content:center;align-items:center;color:var(--content-info-default);top:0;left:0;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;border-bottom:8px solid var(--border-info);background-color:var(--background-default)}.rte-banner.error{color:var(--content-danger-default);border-bottom-color:var(--border-danger)}.rte-banner.success{color:var(--content-success-default);border-bottom-color:var(--border-success)}.rte-banner.warning{color:var(--content-primary);border-bottom-color:var(--border-warning)}.rte-banner.overlay{position:fixed}.rte-banner.open{opacity:1;transform:translateY(0)}.rte-banner.close{opacity:0;transform:translateY(-10px)}.rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner .rte-banner-content .rte-banner-action-button{width:max-content}.rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: BannerComponent, isStandalone: true, selector: "rte-banner", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<section\n  *ngIf=\"rendering()\"\n  class=\"rte-banner-container {{ type() }} {{ position() }}\"\n  class=\"rte-banner\"\n  [ngClass]=\"{ open: visible(), close: !visible() }\"\n  [attr.role]=\"type() === 'error' ? 'alert' : 'status'\"\n>\n  <div class=\"rte-banner-icon\">\n    <rte-icon [name]=\"iconName()\" [size]=\"32\" />\n  </div>\n  <div class=\"rte-banner-content\">\n    <span *ngIf=\"title()\" class=\"rte-banner-title\">{{ title() }}</span>\n    <div *ngIf=\"message()\" class=\"rte-banner-message\">\n      <span>{{ message() }}</span>\n    </div>\n  </div>\n  <button\n    *ngIf=\"actionLabel()\"\n    rteButton\n    rteButtonVariant=\"text\"\n    rteButtonSize=\"s\"\n    [attr.aria-label]=\"actionLabel()!\"\n    (click)=\"clickAction()\"\n  >\n    {{ actionLabel() }}\n  </button>\n  <div *ngIf=\"closable()\" class=\"rte-banner-close-icon\">\n    <rte-icon-button name=\"close\" variant=\"neutral\" ariaLabel=\"close banner\" (clickEvent)=\"closeBanner()\" />\n  </div>\n</section>\n", styles: [".rte-banner{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);padding:16px;gap:16px;align-self:stretch;border-radius:0 0 4px 4px;display:flex;box-sizing:border-box;width:100%;min-width:320px;justify-content:center;align-items:center;color:var(--content-info-default);top:0;left:0;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10;border-bottom:8px solid var(--border-info);background-color:var(--background-default)}.rte-banner.error{color:var(--content-danger-default);border-bottom-color:var(--border-danger)}.rte-banner.success{color:var(--content-success-default);border-bottom-color:var(--border-success)}.rte-banner.warning{color:var(--content-primary);border-bottom-color:var(--border-warning)}.rte-banner.overlay{position:fixed}.rte-banner.open{opacity:1;transform:translateY(0)}.rte-banner.close{opacity:0;transform:translateY(-10px)}.rte-banner .rte-banner-icon{display:flex;padding:0 0 0 16px;justify-content:center;align-items:center;gap:var(--positive-spacing_0, 0);align-self:stretch}.rte-banner .banner-close-icon{color:var(--content-secondary)}.rte-banner .rte-banner-content{display:flex;padding:0 16px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:0;opacity:100%}.rte-banner .rte-banner-content .rte-banner-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.rte-banner .rte-banner-content .rte-banner-action-button{width:max-content}.rte-banner .rte-banner-content .rte-banner-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);display:flex;align-items:center;gap:24px;padding:8px 0;justify-content:space-between;width:100%}.rte-banner .rte-banner-close-icon{color:var(--content-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent", "rteButtonIcon", "rteButtonIconPosition", "rteButtonIconAppearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
@@ -2426,7 +2530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class CardComponent {
     constructor() {
-        this.size = input("m");
+        this.width = input(DEFAULT_CARD_WIDTH);
         this.cardType = input("default");
         this.clickable = input(false);
         this.disabled = input(false);
@@ -2434,7 +2538,6 @@ class CardComponent {
         this.ariaLabelledby = input(undefined);
         this.ariaRole = input(undefined);
         this.cardClicked = output();
-        this.cardWidth = computed(() => `${cardSize[this.size()]}px`);
         this.tabIndex = computed(() => (this.clickable() ? 0 : -1));
     }
     onClick() {
@@ -2451,11 +2554,11 @@ class CardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "rte-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, cardType: { classPropertyName: "cardType", publicName: "cardType", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<div\n  class=\"card card-{{ cardType() }}\"\n  [style.width]=\"cardWidth()\"\n  [attr.disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-role]=\"ariaRole()\"\n  [ngClass]=\"{ clickable: clickable() }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <ng-content />\n</div>\n", styles: [".card{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;border-radius:4px;box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);transition:background-color .3s,box-shadow .3s}.card:hover{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%)}.card[disabled=true]{background:var(--background-disabled);opacity:30%;box-shadow:none;pointer-events:none}.card[disabled=true].card-outlined{border:1px solid var(--border-disabled);background:var(--background-disabled);box-shadow:none}.card.card-outlined{box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);flex-shrink:0;border:1px solid var(--border-tertiary)}.card.card-outlined:active.clickable{border-color:var(--border-secondary)}.card.clickable{cursor:pointer}.card:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "rte-card", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, cardType: { classPropertyName: "cardType", publicName: "cardType", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, ariaRole: { classPropertyName: "ariaRole", publicName: "ariaRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClicked: "cardClicked" }, ngImport: i0, template: "<div\n  class=\"card card-{{ cardType() }}\"\n  [style.width]=\"width()\"\n  [attr.disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-role]=\"ariaRole()\"\n  [ngClass]=\"{ clickable: clickable() }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <ng-content />\n</div>\n", styles: [".card{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;border-radius:4px;box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);transition:background-color .3s,box-shadow .3s}.card:hover{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%)}.card[disabled=true]{background:var(--background-disabled);opacity:30%;box-shadow:none;pointer-events:none}.card[disabled=true].card-outlined{border:1px solid var(--border-disabled);background:var(--background-disabled);box-shadow:none}.card.card-outlined{box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);flex-shrink:0;border:1px solid var(--border-tertiary)}.card.card-outlined:active.clickable{border-color:var(--border-secondary)}.card.clickable{cursor:pointer}.card:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: "rte-card", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"card card-{{ cardType() }}\"\n  [style.width]=\"cardWidth()\"\n  [attr.disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-role]=\"ariaRole()\"\n  [ngClass]=\"{ clickable: clickable() }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <ng-content />\n</div>\n", styles: [".card{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;border-radius:4px;box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);transition:background-color .3s,box-shadow .3s}.card:hover{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%)}.card[disabled=true]{background:var(--background-disabled);opacity:30%;box-shadow:none;pointer-events:none}.card[disabled=true].card-outlined{border:1px solid var(--border-disabled);background:var(--background-disabled);box-shadow:none}.card.card-outlined{box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);flex-shrink:0;border:1px solid var(--border-tertiary)}.card.card-outlined:active.clickable{border-color:var(--border-secondary)}.card.clickable{cursor:pointer}.card:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}\n"] }]
+            args: [{ selector: "rte-card", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"card card-{{ cardType() }}\"\n  [style.width]=\"width()\"\n  [attr.disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledby()\"\n  [attr.aria-role]=\"ariaRole()\"\n  [ngClass]=\"{ clickable: clickable() }\"\n  [tabIndex]=\"tabIndex()\"\n  (click)=\"onClick()\"\n  (keydown)=\"onKeyDown($event)\"\n>\n  <ng-content />\n</div>\n", styles: [".card{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;border-radius:4px;box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);transition:background-color .3s,box-shadow .3s}.card:hover{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%)}.card[disabled=true]{background:var(--background-disabled);opacity:30%;box-shadow:none;pointer-events:none}.card[disabled=true].card-outlined{border:1px solid var(--border-disabled);background:var(--background-disabled);box-shadow:none}.card.card-outlined{box-shadow:0 1px 2px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-1) 0%,var(--elevation-surface-shadow-1) 100%);flex-shrink:0;border:1px solid var(--border-tertiary)}.card.card-outlined:active.clickable{border-color:var(--border-secondary)}.card.clickable{cursor:pointer}.card:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}\n"] }]
         }] });
 
 class FocusTrapService {
@@ -2551,7 +2654,7 @@ class PopoverComponent {
         this.clickSecondaryButton.emit();
     }
     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>\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\n        *ngIf=\"secondaryButtonLabel()\"\n        rteButton\n        rteButtonVariant=\"secondary\"\n        (click)=\"handleClickSecondaryButton()\"\n      >\n        {{ secondaryButtonLabel() }}\n      </button>\n      <button rteButton rteButtonVariant=\"primary\" (click)=\"handleClickPrimaryButton()\">\n        {{ primaryButtonLabel() }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".rte-popoverTrigger{position:relative;width:max-content}.rte-popover{filter:drop-shadow(0px 2px 4px var(--elevation-shadow-key)) drop-shadow(0px 0px 2px var(--elevation-shadow-ambient));background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;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]{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);filter:none;background:var(--background-default)}.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", "rteBadgeCount", "rteBadgeContent"] }] }); }
+    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\n        *ngIf=\"secondaryButtonLabel()\"\n        rteButton\n        rteButtonVariant=\"secondary\"\n        (click)=\"handleClickSecondaryButton()\"\n      >\n        {{ secondaryButtonLabel() }}\n      </button>\n      <button rteButton rteButtonVariant=\"primary\" (click)=\"handleClickPrimaryButton()\">\n        {{ primaryButtonLabel() }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".rte-popoverTrigger{position:relative;width:max-content}.rte-popover{filter:drop-shadow(0px 2px 4px var(--elevation-shadow-key)) drop-shadow(0px 0px 2px var(--elevation-shadow-ambient));background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);position:absolute;pointer-events:auto;top:0;left:0;padding:0;display:flex;flex-direction:column;gap:0px;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]{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);filter:none;background:var(--background-default)}.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", "rteBadgeCount", "rteBadgeContent", "rteButtonIcon", "rteButtonIconPosition", "rteButtonIconAppearance"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
@@ -2891,36 +2994,525 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-class SearchbarComponent {
+class DrawerComponent {
     constructor() {
-        this.id = input();
-        this.label = input("Rechercher");
-        this.disabled = input(false);
-        this.showResetButton = input(true);
-        this.appearance = input("primary");
-        this.compactSpacing = input(false);
-        this.value = input("");
-        this.assistiveText = input("");
-        this.valueChange = output();
-        this.searchEvent = output();
-        this.clear = output();
-        this.hasFocusWithin = signal(false);
-        this.appearanceConfig = computed(() => APPEARANCE_CONFIG[this.appearance()]);
-        this.placeholder = computed(() => (this.disabled() ? "Recherche indisponible" : this.label()));
-        this.textInputStyles = computed(() => {
-            const styles = {};
-            const hasLeftIcon = this.appearanceConfig().showLeftIcon;
-            if (this.appearance() === "primary") {
-                styles["border-right"] = "none";
-                styles["border-radius"] = `${SEARCHBAR_BORDER_RADIUS} 0 0 ${SEARCHBAR_BORDER_RADIUS}`;
-                if (!hasLeftIcon) {
-                    styles["padding-left"] = SEARCHBAR_PADDING_LEFT;
-                }
-            }
-            else if (this.appearance() === "secondary") {
-                styles["border-radius"] = SEARCHBAR_BORDER_RADIUS;
-            }
-            return styles;
+        this.id = input.required();
+        this.title = input();
+        this.icon = input();
+        this.iconAppearance = input("outlined");
+        this.isOpen = input(false);
+        this.position = input("modal");
+        this.width = input();
+        this.closeOnOverlayClick = input(false);
+        this.primaryButtonLabel = input();
+        this.secondaryButtonLabel = input();
+        this.isCollapsible = input(false);
+        this.fixedHeader = input(false);
+        this.closeOnEscape = input(false);
+        this.isClosable = input(true);
+        this.modalHostMode = input(false);
+        this.drawerContent = input(null);
+        this.drawerHeader = input(null);
+        this.drawerFooter = input(null);
+        this.drawerContextContent = input(null);
+        this.closed = output();
+        this.clickToggle = output();
+        this.iconSize = signal(IconSize["xl"]);
+        this.drawerPanelModal = viewChild("drawerPanelModal");
+        this.drawerPanelResponsive = viewChild("drawerPanelResponsive");
+        this.isAnimating = signal(false);
+        this.shouldRenderModalLayer = signal(false);
+        this.shouldDisplayDefaultHeader = computed(() => shouldUseDrawerDefaultHeader(!!this.drawerHeader(), this.title()));
+        this.shouldDisplayDefaultFooter = computed(() => shouldUseDrawerDefaultFooter(!!this.drawerFooter(), this.primaryButtonLabel()));
+        this.panelWidthPx = signal(0);
+        this.collapsibleToggleTransform = computed(() => {
+            const widthPx = this.panelWidthPx();
+            return this.isAnimating() ? `translateX(-${widthPx + DRAWER_PADDING}px)` : "none";
+        });
+        this.responsiveDividerTransform = computed(() => {
+            const widthPx = this.panelWidthPx();
+            return this.isAnimating() ? `translateX(-${widthPx}px)` : "none";
+        });
+        this.floatingToggleOpacity = computed(() => (this.isAnimating() ? 0 : 1));
+        this.collapsibleToggleIconName = computed(() => this.isOpen() ? "right-panel-close" : "right-panel-open");
+        this.collapsibleToggleAriaLabel = computed(() => {
+            const verb = this.isOpen() ? "Close" : "Open";
+            return `${verb} drawer ${this.id()}`;
+        });
+        this.responsiveMainMarginRight = computed(() => (this.isAnimating() ? (this.width() ?? "0") : "0"));
+        this.focusTrap = inject(FocusTrapService);
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        this.resizeObserver = null;
+        this.focusTrapActive = false;
+        effect(() => {
+            const open = this.isOpen();
+            const usesModalLayer = this.position() === "modal";
+            if (open) {
+                this.handleDrawerOpen(usesModalLayer);
+            }
+            else {
+                this.handleDrawerClose(usesModalLayer);
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const modalPanel = this.drawerPanelModal()?.nativeElement;
+            const responsivePanel = this.drawerPanelResponsive()?.nativeElement;
+            const panel = modalPanel ?? responsivePanel;
+            if (!panel) {
+                untracked(() => {
+                    this.resizeObserver?.disconnect();
+                    this.resizeObserver = null;
+                });
+                return;
+            }
+            untracked(() => {
+                this.resizeObserver?.disconnect();
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.panelWidthPx.set(panel.clientWidth);
+                });
+                this.resizeObserver.observe(panel);
+                this.panelWidthPx.set(panel.clientWidth);
+            });
+        }, { allowSignalWrites: true });
+        this.destroyRef.onDestroy(() => {
+            this.resizeObserver?.disconnect();
+            if (this.focusTrapActive) {
+                this.focusTrap.deactivate();
+                this.focusTrapActive = false;
+            }
+        });
+    }
+    activateFocusTrapForPanel(resolvePanel) {
+        afterNextRender(() => {
+            const panelElement = resolvePanel();
+            if (panelElement && !this.focusTrapActive) {
+                this.focusTrap.activate(panelElement);
+                this.focusTrapActive = true;
+            }
+        }, { injector: this.injector });
+    }
+    handleDrawerOpen(usesModalLayer) {
+        if (usesModalLayer) {
+            this.shouldRenderModalLayer.set(true);
+        }
+        this.isAnimating.set(false);
+        const resolvePanel = () => {
+            if (usesModalLayer) {
+                return this.drawerPanelModal()?.nativeElement ?? this.drawerPanelResponsive()?.nativeElement;
+            }
+            return this.drawerPanelResponsive()?.nativeElement;
+        };
+        untracked(() => {
+            waitForNextFrame$1(() => {
+                this.isAnimating.set(true);
+                this.activateFocusTrapForPanel(resolvePanel);
+            });
+        });
+    }
+    handleDrawerClose(usesModalLayer) {
+        this.isAnimating.set(false);
+        if (this.focusTrapActive) {
+            this.focusTrap.deactivate();
+            this.focusTrapActive = false;
+        }
+        if (usesModalLayer && this.shouldRenderModalLayer()) {
+            setTimeout(() => {
+                this.shouldRenderModalLayer.set(false);
+            }, DRAWER_TRANSITION_DURATION);
+        }
+    }
+    onClose() {
+        this.closed.emit();
+    }
+    onClickToggle() {
+        this.clickToggle.emit();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        if (this.focusTrapActive) {
+            this.focusTrap.deactivate();
+            this.focusTrapActive = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerComponent, isStandalone: true, selector: "rte-drawer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnOverlayClick: { classPropertyName: "closeOnOverlayClick", publicName: "closeOnOverlayClick", isSignal: true, isRequired: false, transformFunction: null }, primaryButtonLabel: { classPropertyName: "primaryButtonLabel", publicName: "primaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryButtonLabel: { classPropertyName: "secondaryButtonLabel", publicName: "secondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isCollapsible: { classPropertyName: "isCollapsible", publicName: "isCollapsible", isSignal: true, isRequired: false, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, isClosable: { classPropertyName: "isClosable", publicName: "isClosable", isSignal: true, isRequired: false, transformFunction: null }, modalHostMode: { classPropertyName: "modalHostMode", publicName: "modalHostMode", isSignal: true, isRequired: false, transformFunction: null }, drawerContent: { classPropertyName: "drawerContent", publicName: "drawerContent", isSignal: true, isRequired: false, transformFunction: null }, drawerHeader: { classPropertyName: "drawerHeader", publicName: "drawerHeader", isSignal: true, isRequired: false, transformFunction: null }, drawerFooter: { classPropertyName: "drawerFooter", publicName: "drawerFooter", isSignal: true, isRequired: false, transformFunction: null }, drawerContextContent: { classPropertyName: "drawerContextContent", publicName: "drawerContextContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", clickToggle: "clickToggle" }, viewQueries: [{ propertyName: "drawerPanelModal", first: true, predicate: ["drawerPanelModal"], descendants: true, isSignal: true }, { propertyName: "drawerPanelResponsive", first: true, predicate: ["drawerPanelResponsive"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rte-drawer-root\" [class.rte-drawer-modal-host-layer]=\"modalHostMode()\" [attr.data-position]=\"position()\">\n  @if (isCollapsible()) {\n    <rte-icon-button\n      class=\"drawer-toggle drawer-toggle--floating\"\n      size=\"l\"\n      variant=\"primary\"\n      [ariaLabel]=\"collapsibleToggleAriaLabel()\"\n      [name]=\"collapsibleToggleIconName()\"\n      [customStyle]=\"{\n        position: 'absolute',\n        top: '24px',\n        right: '4px',\n        opacity: floatingToggleOpacity().toString(),\n      }\"\n      (clickEvent)=\"onClickToggle()\"\n    />\n  }\n\n  @if (position() === \"responsive\") {\n    <div class=\"drawer-responsive-container\">\n      @if (isCollapsible()) {\n        <rte-icon-button\n          class=\"drawer-toggle drawer-toggle--responsive-floating\"\n          size=\"l\"\n          variant=\"primary\"\n          [ariaLabel]=\"collapsibleToggleAriaLabel()\"\n          [name]=\"collapsibleToggleIconName()\"\n          [customStyle]=\"{\n            position: 'absolute',\n            top: '24px',\n            right: '4px',\n            opacity: isAnimating() ? '0' : '1',\n            transform: collapsibleToggleTransform(),\n          }\"\n          (clickEvent)=\"onClickToggle()\"\n        />\n      }\n      <div\n        class=\"drawer-responsive-divider-wrap\"\n        [style.visibility]=\"isAnimating() ? 'visible' : 'hidden'\"\n        [style.transform]=\"responsiveDividerTransform()\"\n      >\n        <rte-divider orientation=\"vertical\" />\n      </div>\n      <div\n        #drawerPanelResponsive\n        class=\"drawer\"\n        data-drawer-panel\n        data-testid=\"drawer-responsive-panel\"\n        role=\"region\"\n        [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"\n        [attr.data-position]=\"position()\"\n        [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\"\n        [attr.aria-labelledby]=\"id() + '-drawer-title'\"\n        [style.width]=\"width()\"\n        [style.transform]=\"isAnimating() ? 'none' : 'translateX(' + (width() ?? '100%') + ')'\"\n        [style.visibility]=\"isAnimating() ? 'visible' : 'hidden'\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerAndContent\" />\n        <ng-container *ngTemplateOutlet=\"footerBlock\" />\n      </div>\n      <div\n        class=\"drawer-children\"\n        [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"\n        [style.marginRight]=\"responsiveMainMarginRight()\"\n        [style.maxHeight]=\"isAnimating() ? '100%' : undefined\"\n        [style.overflowY]=\"isAnimating() ? 'auto' : undefined\"\n      >\n        <ng-container *ngTemplateOutlet=\"drawerContextContent() ?? null\" />\n      </div>\n    </div>\n  }\n\n  @if (position() === \"modal\" && shouldRenderModalLayer()) {\n    <div class=\"rte-drawer-modal-layer\">\n      <div class=\"rte-drawer-backdrop\" [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"></div>\n      <div\n        #drawerPanelModal\n        class=\"drawer\"\n        data-drawer-panel\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"\n        [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\"\n        [attr.aria-labelledby]=\"id() + '-drawer-title'\"\n        [style.width]=\"width()\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerAndContent\" />\n        <ng-container *ngTemplateOutlet=\"footerBlock\" />\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #headerAndContent>\n  @if (fixedHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerBlock\" />\n    <ng-container *ngTemplateOutlet=\"contentBlock\" />\n  } @else {\n    <div class=\"drawer-header-content\">\n      <ng-container *ngTemplateOutlet=\"headerBlock\" />\n      <ng-container *ngTemplateOutlet=\"contentBlock\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #headerBlock>\n  @if (isCollapsible()) {\n    <rte-icon-button\n      class=\"drawer-toggle\"\n      size=\"l\"\n      variant=\"primary\"\n      [ariaLabel]=\"collapsibleToggleAriaLabel()\"\n      [name]=\"collapsibleToggleIconName()\"\n      [customStyle]=\"{ transform: collapsibleToggleTransform() }\"\n      (clickEvent)=\"onClickToggle()\"\n    />\n  }\n  @if (shouldDisplayDefaultHeader()) {\n    <div class=\"rte-drawer-base-header\">\n      <div class=\"rte-drawer-base-header-text\">\n        @if (icon()) {\n          <rte-icon [name]=\"icon() ?? ''\" [size]=\"iconSize()\" [appearance]=\"iconAppearance()\" />\n        }\n        <h2 id=\"{{ id() }}-drawer-title\" class=\"rte-drawer-base-header-title\">\n          {{ title() }}\n        </h2>\n        @if (isClosable()) {\n          <rte-icon-button\n            ariaLabel=\"Close drawer {{ id() }}\"\n            data-testid=\"drawer-close-button\"\n            name=\"close\"\n            size=\"l\"\n            class=\"rte-drawer-close-icon\"\n            variant=\"neutral\"\n            (clickEvent)=\"onClose()\"\n          />\n        }\n      </div>\n      <rte-divider />\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"drawerHeader() ?? null\" />\n  }\n</ng-template>\n\n<ng-template #contentBlock>\n  <div class=\"drawer-content\" tabindex=\"-1\" [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\">\n    <ng-container *ngTemplateOutlet=\"drawerContent() ?? null\" />\n  </div>\n</ng-template>\n\n<ng-template #footerBlock>\n  <div class=\"drawer-footer\" [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\">\n    @if (shouldDisplayDefaultFooter()) {\n      <div class=\"rte-drawer-base-footer\">\n        @if (secondaryButtonLabel()) {\n          <button rteButton rteButtonVariant=\"neutral\">\n            {{ secondaryButtonLabel() }}\n          </button>\n        }\n        <button rteButton rteButtonVariant=\"primary\">\n          {{ primaryButtonLabel() }}\n        </button>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"drawerFooter() ?? null\" />\n    }\n  </div>\n</ng-template>\n", styles: [":host-context(.rte-drawer-host--responsive-layout){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box}.rte-drawer-root{position:relative}.rte-drawer-root[data-position=responsive]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}.rte-drawer-root[data-position=responsive] .drawer-responsive-container{flex:1 1 auto;min-height:0;height:auto;position:relative;overflow-x:clip}.rte-drawer-modal-host-layer{position:fixed;inset:0;z-index:999;pointer-events:none}.rte-drawer-modal-host-layer .drawer-toggle--floating,.rte-drawer-modal-host-layer .rte-drawer-modal-layer{pointer-events:auto}.rte-drawer-modal-layer{position:fixed;inset:0}.rte-drawer-backdrop{position:absolute;inset:0;opacity:0;background-color:#201f1f80;transition:opacity .24s ease-out}.rte-drawer-backdrop[data-open=true]{opacity:1}.drawer-responsive-divider-wrap{position:absolute;right:0;transition:transform .24s ease-out;height:100%}.drawer{display:flex;height:100%;box-sizing:border-box;min-width:64px;padding:24px;gap:24px;flex-direction:column;align-items:flex-start;transform:translate(100%);transition:transform .24s ease-out;box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%);background-color:var(--background-default);position:absolute;right:0}.drawer[data-fixed-header=false]{padding:24px 8px 24px 24px}.drawer[data-open=true]{transform:translate(0)}.drawer[data-position=responsive]{width:100%;position:absolute;right:0;box-shadow:none;transition:transform .24s ease-out;flex:0 0 auto;height:100%;max-height:100%;background:transparent}.drawer[data-position=responsive][data-open=true]{transform:none}.drawer .drawer-content{flex:1 1 auto;width:100%}.drawer .drawer-content[data-fixed-header=true]{padding-right:16px;overflow-y:auto}.drawer .drawer-toggle{position:absolute;top:24px;right:0;transition:transform .24s ease-out}.drawer .drawer-toggle:focus-visible{position:absolute}.drawer .drawer-footer{width:100%}.drawer .drawer-footer[data-fixed-header=false]{padding-right:16px;box-sizing:border-box}.drawer .drawer-header-content{display:flex;flex-direction:column;height:100%;gap:24px;overflow-y:auto;padding-right:16px;box-sizing:border-box}.rte-drawer-base-header{display:flex;flex-direction:column;gap:8px;width:100%;flex:0 0 auto}.rte-drawer-base-header .rte-drawer-base-header-text{display:flex;flex-direction:row;align-items:center;gap:8px}.rte-drawer-base-header .rte-drawer-base-header-text .rte-drawer-base-header-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-drawer-base-footer{display:flex;padding:0;justify-content:flex-end;align-items:center;gap:24px;align-self:stretch;flex:0 0 auto;width:100%}.drawer-children{box-sizing:border-box;min-height:0;height:100%;transition:margin-right .24s ease-out}.drawer-toggle--floating,.drawer-toggle--responsive-floating{z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent", "rteButtonIcon", "rteButtonIconPosition", "rteButtonIconAppearance"] }, { kind: "component", type: DividerComponent, selector: "rte-divider", inputs: ["orientation", "thickness", "appearance", "endPoint"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-drawer", imports: [CommonModule, ButtonComponent, DividerComponent, IconComponent, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-drawer-root\" [class.rte-drawer-modal-host-layer]=\"modalHostMode()\" [attr.data-position]=\"position()\">\n  @if (isCollapsible()) {\n    <rte-icon-button\n      class=\"drawer-toggle drawer-toggle--floating\"\n      size=\"l\"\n      variant=\"primary\"\n      [ariaLabel]=\"collapsibleToggleAriaLabel()\"\n      [name]=\"collapsibleToggleIconName()\"\n      [customStyle]=\"{\n        position: 'absolute',\n        top: '24px',\n        right: '4px',\n        opacity: floatingToggleOpacity().toString(),\n      }\"\n      (clickEvent)=\"onClickToggle()\"\n    />\n  }\n\n  @if (position() === \"responsive\") {\n    <div class=\"drawer-responsive-container\">\n      @if (isCollapsible()) {\n        <rte-icon-button\n          class=\"drawer-toggle drawer-toggle--responsive-floating\"\n          size=\"l\"\n          variant=\"primary\"\n          [ariaLabel]=\"collapsibleToggleAriaLabel()\"\n          [name]=\"collapsibleToggleIconName()\"\n          [customStyle]=\"{\n            position: 'absolute',\n            top: '24px',\n            right: '4px',\n            opacity: isAnimating() ? '0' : '1',\n            transform: collapsibleToggleTransform(),\n          }\"\n          (clickEvent)=\"onClickToggle()\"\n        />\n      }\n      <div\n        class=\"drawer-responsive-divider-wrap\"\n        [style.visibility]=\"isAnimating() ? 'visible' : 'hidden'\"\n        [style.transform]=\"responsiveDividerTransform()\"\n      >\n        <rte-divider orientation=\"vertical\" />\n      </div>\n      <div\n        #drawerPanelResponsive\n        class=\"drawer\"\n        data-drawer-panel\n        data-testid=\"drawer-responsive-panel\"\n        role=\"region\"\n        [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"\n        [attr.data-position]=\"position()\"\n        [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\"\n        [attr.aria-labelledby]=\"id() + '-drawer-title'\"\n        [style.width]=\"width()\"\n        [style.transform]=\"isAnimating() ? 'none' : 'translateX(' + (width() ?? '100%') + ')'\"\n        [style.visibility]=\"isAnimating() ? 'visible' : 'hidden'\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerAndContent\" />\n        <ng-container *ngTemplateOutlet=\"footerBlock\" />\n      </div>\n      <div\n        class=\"drawer-children\"\n        [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"\n        [style.marginRight]=\"responsiveMainMarginRight()\"\n        [style.maxHeight]=\"isAnimating() ? '100%' : undefined\"\n        [style.overflowY]=\"isAnimating() ? 'auto' : undefined\"\n      >\n        <ng-container *ngTemplateOutlet=\"drawerContextContent() ?? null\" />\n      </div>\n    </div>\n  }\n\n  @if (position() === \"modal\" && shouldRenderModalLayer()) {\n    <div class=\"rte-drawer-modal-layer\">\n      <div class=\"rte-drawer-backdrop\" [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"></div>\n      <div\n        #drawerPanelModal\n        class=\"drawer\"\n        data-drawer-panel\n        role=\"dialog\"\n        aria-modal=\"true\"\n        [attr.data-open]=\"isAnimating() ? 'true' : 'false'\"\n        [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\"\n        [attr.aria-labelledby]=\"id() + '-drawer-title'\"\n        [style.width]=\"width()\"\n      >\n        <ng-container *ngTemplateOutlet=\"headerAndContent\" />\n        <ng-container *ngTemplateOutlet=\"footerBlock\" />\n      </div>\n    </div>\n  }\n</div>\n\n<ng-template #headerAndContent>\n  @if (fixedHeader()) {\n    <ng-container *ngTemplateOutlet=\"headerBlock\" />\n    <ng-container *ngTemplateOutlet=\"contentBlock\" />\n  } @else {\n    <div class=\"drawer-header-content\">\n      <ng-container *ngTemplateOutlet=\"headerBlock\" />\n      <ng-container *ngTemplateOutlet=\"contentBlock\" />\n    </div>\n  }\n</ng-template>\n\n<ng-template #headerBlock>\n  @if (isCollapsible()) {\n    <rte-icon-button\n      class=\"drawer-toggle\"\n      size=\"l\"\n      variant=\"primary\"\n      [ariaLabel]=\"collapsibleToggleAriaLabel()\"\n      [name]=\"collapsibleToggleIconName()\"\n      [customStyle]=\"{ transform: collapsibleToggleTransform() }\"\n      (clickEvent)=\"onClickToggle()\"\n    />\n  }\n  @if (shouldDisplayDefaultHeader()) {\n    <div class=\"rte-drawer-base-header\">\n      <div class=\"rte-drawer-base-header-text\">\n        @if (icon()) {\n          <rte-icon [name]=\"icon() ?? ''\" [size]=\"iconSize()\" [appearance]=\"iconAppearance()\" />\n        }\n        <h2 id=\"{{ id() }}-drawer-title\" class=\"rte-drawer-base-header-title\">\n          {{ title() }}\n        </h2>\n        @if (isClosable()) {\n          <rte-icon-button\n            ariaLabel=\"Close drawer {{ id() }}\"\n            data-testid=\"drawer-close-button\"\n            name=\"close\"\n            size=\"l\"\n            class=\"rte-drawer-close-icon\"\n            variant=\"neutral\"\n            (clickEvent)=\"onClose()\"\n          />\n        }\n      </div>\n      <rte-divider />\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"drawerHeader() ?? null\" />\n  }\n</ng-template>\n\n<ng-template #contentBlock>\n  <div class=\"drawer-content\" tabindex=\"-1\" [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\">\n    <ng-container *ngTemplateOutlet=\"drawerContent() ?? null\" />\n  </div>\n</ng-template>\n\n<ng-template #footerBlock>\n  <div class=\"drawer-footer\" [attr.data-fixed-header]=\"fixedHeader() ? 'true' : 'false'\">\n    @if (shouldDisplayDefaultFooter()) {\n      <div class=\"rte-drawer-base-footer\">\n        @if (secondaryButtonLabel()) {\n          <button rteButton rteButtonVariant=\"neutral\">\n            {{ secondaryButtonLabel() }}\n          </button>\n        }\n        <button rteButton rteButtonVariant=\"primary\">\n          {{ primaryButtonLabel() }}\n        </button>\n      </div>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"drawerFooter() ?? null\" />\n    }\n  </div>\n</ng-template>\n", styles: [":host-context(.rte-drawer-host--responsive-layout){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box}.rte-drawer-root{position:relative}.rte-drawer-root[data-position=responsive]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;width:100%}.rte-drawer-root[data-position=responsive] .drawer-responsive-container{flex:1 1 auto;min-height:0;height:auto;position:relative;overflow-x:clip}.rte-drawer-modal-host-layer{position:fixed;inset:0;z-index:999;pointer-events:none}.rte-drawer-modal-host-layer .drawer-toggle--floating,.rte-drawer-modal-host-layer .rte-drawer-modal-layer{pointer-events:auto}.rte-drawer-modal-layer{position:fixed;inset:0}.rte-drawer-backdrop{position:absolute;inset:0;opacity:0;background-color:#201f1f80;transition:opacity .24s ease-out}.rte-drawer-backdrop[data-open=true]{opacity:1}.drawer-responsive-divider-wrap{position:absolute;right:0;transition:transform .24s ease-out;height:100%}.drawer{display:flex;height:100%;box-sizing:border-box;min-width:64px;padding:24px;gap:24px;flex-direction:column;align-items:flex-start;transform:translate(100%);transition:transform .24s ease-out;box-shadow:0 4px 8px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-3) 0%,var(--elevation-surface-shadow-3) 100%);background-color:var(--background-default);position:absolute;right:0}.drawer[data-fixed-header=false]{padding:24px 8px 24px 24px}.drawer[data-open=true]{transform:translate(0)}.drawer[data-position=responsive]{width:100%;position:absolute;right:0;box-shadow:none;transition:transform .24s ease-out;flex:0 0 auto;height:100%;max-height:100%;background:transparent}.drawer[data-position=responsive][data-open=true]{transform:none}.drawer .drawer-content{flex:1 1 auto;width:100%}.drawer .drawer-content[data-fixed-header=true]{padding-right:16px;overflow-y:auto}.drawer .drawer-toggle{position:absolute;top:24px;right:0;transition:transform .24s ease-out}.drawer .drawer-toggle:focus-visible{position:absolute}.drawer .drawer-footer{width:100%}.drawer .drawer-footer[data-fixed-header=false]{padding-right:16px;box-sizing:border-box}.drawer .drawer-header-content{display:flex;flex-direction:column;height:100%;gap:24px;overflow-y:auto;padding-right:16px;box-sizing:border-box}.rte-drawer-base-header{display:flex;flex-direction:column;gap:8px;width:100%;flex:0 0 auto}.rte-drawer-base-header .rte-drawer-base-header-text{display:flex;flex-direction:row;align-items:center;gap:8px}.rte-drawer-base-header .rte-drawer-base-header-text .rte-drawer-base-header-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-drawer-base-footer{display:flex;padding:0;justify-content:flex-end;align-items:center;gap:24px;align-self:stretch;flex:0 0 auto;width:100%}.drawer-children{box-sizing:border-box;min-height:0;height:100%;transition:margin-right .24s ease-out}.drawer-toggle--floating,.drawer-toggle--responsive-floating{z-index:1}\n"] }]
+        }], ctorParameters: () => [] });
+
+class DrawerDirective {
+    get isResponsiveLayoutHost() {
+        return this.rteDrawerPosition() === "responsive";
+    }
+    get responsiveHostDisplay() {
+        return this.rteDrawerPosition() === "responsive" ? "flex" : undefined;
+    }
+    get responsiveHostFlexDirection() {
+        return this.rteDrawerPosition() === "responsive" ? "column" : undefined;
+    }
+    get responsiveHostMinHeight() {
+        return this.rteDrawerPosition() === "responsive" ? "0" : undefined;
+    }
+    get responsiveHostBoxSizing() {
+        return this.rteDrawerPosition() === "responsive" ? "border-box" : undefined;
+    }
+    static { this.responsiveShellMountMaxAttempts = 12; }
+    constructor() {
+        this.drawerCompRef = null;
+        this.drawerPanelElement = null;
+        this.usedOverlay = false;
+        this.isOpenProvided = false;
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.overlayService = inject(OverlayService);
+        this.injector = inject(Injector);
+        this.drawerContent = contentChild.required("drawerContent");
+        this.drawerHeader = contentChild("drawerHeader");
+        this.drawerFooter = contentChild("drawerFooter");
+        this.drawerContextContent = contentChild("drawerContextContent");
+        this.rteDrawerId = input.required();
+        this.rteDrawerIsOpen = input(false);
+        this.rteDrawerTitle = input();
+        this.rteDrawerIcon = input();
+        this.rteDrawerIconAppearance = input("outlined");
+        this.rteDrawerPosition = input("modal");
+        this.rteDrawerWidth = input();
+        this.rteDrawerCloseOnOverlayClick = input(false);
+        this.rteDrawerPrimaryButtonLabel = input();
+        this.rteDrawerSecondaryButtonLabel = input();
+        this.rteDrawerIsCollapsible = input(false);
+        this.rteDrawerFixedHeader = input(false);
+        this.rteDrawerCloseOnEscape = input(false);
+        this.rteDrawerIsClosable = input(true);
+        this.effectiveOpen = signal(false);
+        this.onMouseDown = (mouseEvent) => this.handleClickAway(mouseEvent);
+        this.onKeyDown = (keyboardEvent) => this.handleKeydown(keyboardEvent);
+        this.scheduleResponsiveShellMount(DrawerDirective.responsiveShellMountMaxAttempts);
+        effect(() => {
+            this.rteDrawerIsOpen();
+            untracked(() => {
+                if (this.isOpenProvided) {
+                    return;
+                }
+                this.effectiveOpen.set(this.rteDrawerIsOpen());
+                this.isOpenProvided = true;
+            });
+        });
+        effect(() => {
+            const open = this.effectiveOpen();
+            untracked(() => {
+                if (open) {
+                    this.runOpenTransition();
+                }
+                else {
+                    this.runCloseTransition();
+                }
+            });
+        }, { allowSignalWrites: true });
+    }
+    open() {
+        if (!this.validateForOpen()) {
+            return;
+        }
+        this.effectiveOpen.set(true);
+    }
+    close() {
+        this.effectiveOpen.set(false);
+    }
+    scheduleResponsiveShellMount(attemptsRemaining) {
+        afterNextRender(() => {
+            if (this.rteDrawerPosition() !== "responsive" || this.drawerCompRef) {
+                return;
+            }
+            if (this.validateForOpen()) {
+                this.mountDrawer();
+                const mountedRef = this.drawerCompRef;
+                if (mountedRef === null) {
+                    return;
+                }
+                this.syncInputsToDrawer();
+                mountedRef.setInput("isOpen", false);
+                return;
+            }
+            if (attemptsRemaining > 1) {
+                this.scheduleResponsiveShellMount(attemptsRemaining - 1);
+            }
+            else {
+                console.warn("Drawer: responsive shell could not mount after multiple attempts (content queries may still be empty).");
+            }
+        }, { injector: this.injector });
+    }
+    ngAfterContentInit() {
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+    onHostClick(clickEvent) {
+        const target = clickEvent.target;
+        if (!(target instanceof Node)) {
+            return;
+        }
+        const triggerElement = target instanceof Element ? target.closest("[data-rte-drawer-trigger]") : null;
+        if (!triggerElement || !this.elementRef.nativeElement.contains(triggerElement)) {
+            return;
+        }
+        this.open();
+    }
+    ngOnDestroy() {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+        this.teardownDrawer();
+    }
+    runOpenTransition() {
+        if (!this.validateForOpen()) {
+            this.close();
+            return;
+        }
+        if (!this.drawerCompRef) {
+            this.mountDrawer();
+        }
+        if (!this.drawerCompRef) {
+            return;
+        }
+        this.syncInputsToDrawer();
+        this.refreshDrawerPanelElement();
+        waitForNextFrame$1(() => {
+            this.drawerCompRef?.setInput("isOpen", true);
+            this.refreshDrawerPanelElement();
+        });
+        if (this.rteDrawerPosition() === "modal" && this.rteDrawerIsCollapsible()) {
+            document.body.style.overflow = "hidden";
+        }
+    }
+    runCloseTransition() {
+        if (!this.drawerCompRef) {
+            return;
+        }
+        this.drawerCompRef.setInput("isOpen", false);
+        const keepMounted = this.rteDrawerIsCollapsible() || this.rteDrawerPosition() === "responsive";
+        if (!keepMounted) {
+            setTimeout(() => this.teardownDrawer(), DRAWER_TRANSITION_DURATION);
+        }
+        else if (this.rteDrawerPosition() === "modal" && this.rteDrawerIsCollapsible()) {
+            document.body.style.overflow = "";
+        }
+    }
+    handleClosed() {
+        this.close();
+    }
+    handleToggle() {
+        this.effectiveOpen.update((current) => !current);
+    }
+    mountDrawer() {
+        const position = this.rteDrawerPosition();
+        const collapsible = this.rteDrawerIsCollapsible();
+        const useOverlay = position === "modal" && !collapsible;
+        if (useOverlay) {
+            this.drawerCompRef = this.overlayService.create(DrawerComponent, this.viewContainerRef, true);
+            this.usedOverlay = true;
+        }
+        else {
+            this.drawerCompRef = this.viewContainerRef.createComponent(DrawerComponent);
+            this.usedOverlay = false;
+            this.elementRef.nativeElement.appendChild(this.drawerCompRef.location.nativeElement);
+        }
+        this.drawerCompRef.instance.closed.subscribe(() => {
+            this.handleClosed();
+        });
+        this.drawerCompRef.instance.clickToggle.subscribe(() => {
+            this.handleToggle();
+        });
+    }
+    teardownDrawer() {
+        if (this.drawerCompRef) {
+            this.drawerCompRef.destroy();
+            this.drawerCompRef = null;
+        }
+        if (this.usedOverlay) {
+            this.overlayService.destroy();
+            this.usedOverlay = false;
+        }
+        document.body.style.overflow = "";
+        this.drawerPanelElement = null;
+    }
+    syncInputsToDrawer() {
+        const componentRef = this.drawerCompRef;
+        if (!componentRef) {
+            return;
+        }
+        componentRef.setInput("id", this.rteDrawerId());
+        componentRef.setInput("title", this.rteDrawerTitle());
+        componentRef.setInput("icon", this.rteDrawerIcon());
+        componentRef.setInput("iconAppearance", this.rteDrawerIconAppearance());
+        componentRef.setInput("position", this.rteDrawerPosition());
+        componentRef.setInput("width", this.rteDrawerWidth());
+        componentRef.setInput("closeOnOverlayClick", this.rteDrawerCloseOnOverlayClick());
+        componentRef.setInput("primaryButtonLabel", this.rteDrawerPrimaryButtonLabel());
+        componentRef.setInput("secondaryButtonLabel", this.rteDrawerSecondaryButtonLabel());
+        componentRef.setInput("isCollapsible", this.rteDrawerIsCollapsible());
+        componentRef.setInput("fixedHeader", this.rteDrawerFixedHeader());
+        componentRef.setInput("closeOnEscape", this.rteDrawerCloseOnEscape());
+        componentRef.setInput("isClosable", this.rteDrawerIsClosable());
+        componentRef.setInput("modalHostMode", this.rteDrawerPosition() === "modal" && this.rteDrawerIsCollapsible());
+        componentRef.setInput("drawerContent", this.drawerContent());
+        componentRef.setInput("drawerHeader", this.drawerHeader() ?? null);
+        componentRef.setInput("drawerFooter", this.drawerFooter() ?? null);
+        componentRef.setInput("drawerContextContent", this.drawerContextContent() ?? null);
+    }
+    refreshDrawerPanelElement() {
+        const root = this.drawerCompRef?.location.nativeElement;
+        this.drawerPanelElement = root?.querySelector("[data-drawer-panel]") ?? null;
+    }
+    validateForOpen() {
+        const issues = getDrawerConfigurationIssues({
+            hasCustomHeader: !!this.drawerHeader(),
+            hasTitle: !!this.rteDrawerTitle(),
+            hasCustomFooter: !!this.drawerFooter(),
+            hasPrimaryButtonLabel: !!this.rteDrawerPrimaryButtonLabel(),
+            position: this.rteDrawerPosition(),
+            hasMainContent: !!this.drawerContextContent(),
+        });
+        if (issues) {
+            console.warn(issues);
+            return false;
+        }
+        return true;
+    }
+    handleKeydown(keyboardEvent) {
+        if (!this.effectiveOpen()) {
+            return;
+        }
+        if (keyboardEvent.key === ESCAPE_KEY && this.rteDrawerCloseOnEscape()) {
+            keyboardEvent.preventDefault();
+            this.close();
+        }
+    }
+    handleClickAway(mouseEvent) {
+        if (!this.effectiveOpen()) {
+            return;
+        }
+        if (this.rteDrawerPosition() !== "modal") {
+            return;
+        }
+        if (!this.rteDrawerCloseOnOverlayClick()) {
+            return;
+        }
+        const hostElement = this.elementRef.nativeElement;
+        const target = mouseEvent.target;
+        if (hostElement.contains(target)) {
+            return;
+        }
+        if (this.drawerPanelElement?.contains(target)) {
+            return;
+        }
+        this.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.14", type: DrawerDirective, isStandalone: true, selector: "[rteDrawer]", inputs: { rteDrawerId: { classPropertyName: "rteDrawerId", publicName: "rteDrawerId", isSignal: true, isRequired: true, transformFunction: null }, rteDrawerIsOpen: { classPropertyName: "rteDrawerIsOpen", publicName: "rteDrawerIsOpen", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerTitle: { classPropertyName: "rteDrawerTitle", publicName: "rteDrawerTitle", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerIcon: { classPropertyName: "rteDrawerIcon", publicName: "rteDrawerIcon", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerIconAppearance: { classPropertyName: "rteDrawerIconAppearance", publicName: "rteDrawerIconAppearance", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerPosition: { classPropertyName: "rteDrawerPosition", publicName: "rteDrawerPosition", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerWidth: { classPropertyName: "rteDrawerWidth", publicName: "rteDrawerWidth", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerCloseOnOverlayClick: { classPropertyName: "rteDrawerCloseOnOverlayClick", publicName: "rteDrawerCloseOnOverlayClick", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerPrimaryButtonLabel: { classPropertyName: "rteDrawerPrimaryButtonLabel", publicName: "rteDrawerPrimaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerSecondaryButtonLabel: { classPropertyName: "rteDrawerSecondaryButtonLabel", publicName: "rteDrawerSecondaryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerIsCollapsible: { classPropertyName: "rteDrawerIsCollapsible", publicName: "rteDrawerIsCollapsible", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerFixedHeader: { classPropertyName: "rteDrawerFixedHeader", publicName: "rteDrawerFixedHeader", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerCloseOnEscape: { classPropertyName: "rteDrawerCloseOnEscape", publicName: "rteDrawerCloseOnEscape", isSignal: true, isRequired: false, transformFunction: null }, rteDrawerIsClosable: { classPropertyName: "rteDrawerIsClosable", publicName: "rteDrawerIsClosable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class.rte-drawer-host--responsive-layout": "this.isResponsiveLayoutHost", "style.display": "this.responsiveHostDisplay", "style.flex-direction": "this.responsiveHostFlexDirection", "style.min-height": "this.responsiveHostMinHeight", "style.box-sizing": "this.responsiveHostBoxSizing" } }, queries: [{ propertyName: "drawerContent", first: true, predicate: ["drawerContent"], descendants: true, isSignal: true }, { propertyName: "drawerHeader", first: true, predicate: ["drawerHeader"], descendants: true, isSignal: true }, { propertyName: "drawerFooter", first: true, predicate: ["drawerFooter"], descendants: true, isSignal: true }, { propertyName: "drawerContextContent", first: true, predicate: ["drawerContextContent"], descendants: true, isSignal: true }], exportAs: ["rteDrawer"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteDrawer]",
+                    exportAs: "rteDrawer",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { isResponsiveLayoutHost: [{
+                type: HostBinding,
+                args: ["class.rte-drawer-host--responsive-layout"]
+            }], responsiveHostDisplay: [{
+                type: HostBinding,
+                args: ["style.display"]
+            }], responsiveHostFlexDirection: [{
+                type: HostBinding,
+                args: ["style.flex-direction"]
+            }], responsiveHostMinHeight: [{
+                type: HostBinding,
+                args: ["style.min-height"]
+            }], responsiveHostBoxSizing: [{
+                type: HostBinding,
+                args: ["style.box-sizing"]
+            }], onHostClick: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }] } });
+
+class DrawerTriggerDirective {
+    constructor() {
+        this.drawerTriggerKeyDown = output();
+        this.drawerTriggerClicked = output();
+    }
+    onDrawerTriggerClicked(clickEvent) {
+        this.drawerTriggerClicked.emit(clickEvent);
+    }
+    onKeyDown(keyboardEvent) {
+        this.drawerTriggerKeyDown.emit(keyboardEvent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DrawerTriggerDirective, isStandalone: true, selector: "[rteDrawerTrigger]", outputs: { drawerTriggerKeyDown: "drawerTriggerKeyDown", drawerTriggerClicked: "drawerTriggerClicked" }, host: { listeners: { "click": "onDrawerTriggerClicked($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.data-rte-drawer-trigger": "true" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteDrawerTrigger]",
+                    standalone: true,
+                    host: {
+                        "[attr.data-rte-drawer-trigger]": "true",
+                    },
+                }]
+        }], propDecorators: { onDrawerTriggerClicked: [{
+                type: HostListener,
+                args: ["click", ["$event"]]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ["keydown", ["$event"]]
+            }] } });
+
+class DrawerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DrawerModule, imports: [DrawerDirective, DrawerTriggerDirective], exports: [DrawerDirective, DrawerTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [DrawerDirective, DrawerTriggerDirective],
+                    exports: [DrawerDirective, DrawerTriggerDirective],
+                }]
+        }] });
+
+class SearchbarComponent {
+    constructor() {
+        this.id = input();
+        this.label = input("Rechercher");
+        this.disabled = input(false);
+        this.showResetButton = input(true);
+        this.appearance = input("primary");
+        this.compactSpacing = input(false);
+        this.value = input("");
+        this.assistiveText = input("");
+        this.valueChange = output();
+        this.searchEvent = output();
+        this.clear = output();
+        this.hasFocusWithin = signal(false);
+        this.appearanceConfig = computed(() => APPEARANCE_CONFIG[this.appearance()]);
+        this.placeholder = computed(() => (this.disabled() ? "Recherche indisponible" : this.label()));
+        this.textInputStyles = computed(() => {
+            const styles = {};
+            const hasLeftIcon = this.appearanceConfig().showLeftIcon;
+            if (this.appearance() === "primary") {
+                styles["border-right"] = "none";
+                styles["border-radius"] = `${SEARCHBAR_BORDER_RADIUS} 0 0 ${SEARCHBAR_BORDER_RADIUS}`;
+                if (!hasLeftIcon) {
+                    styles["padding-left"] = SEARCHBAR_PADDING_LEFT;
+                }
+            }
+            else if (this.appearance() === "secondary") {
+                styles["border-radius"] = SEARCHBAR_BORDER_RADIUS;
+            }
+            return styles;
         });
         this.searchButtonStyles = computed(() => {
             const styles = {
@@ -3414,7 +4006,7 @@ class ToastComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "rte-toast", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, showActionButton: { classPropertyName: "showActionButton", publicName: "showActionButton", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, actionButtonLabel: { classPropertyName: "actionButtonLabel", publicName: "actionButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, onActionButtonClick: { classPropertyName: "onActionButtonClick", publicName: "onActionButtonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n  role=\"status\"\n  [ngClass]=\"{ open: isOpen() }\"\n  (mouseenter)=\"handleMouseEnter()\"\n  (mouseleave)=\"handleMouseLeave()\"\n>\n  <div class=\"rte-toast-content\">\n    @if (displayLeftIcon()) {\n      <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n    } @else {\n      @if (displayCustomIcon()) {\n        <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n      }\n    }\n    <span class=\"rte-toast-message\">{{ message() }}</span>\n  </div>\n  @if (displayActionButton()) {\n    <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n      {{ actionButtonLabel() }}\n    </button>\n  }\n  @if (closable()) {\n    <rte-icon-button\n      name=\"close\"\n      [attr.data-testid]=\"'toast-close-button'\"\n      [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n      (clickEvent)=\"clickCloseButton()\"\n    />\n  }\n</div>\n", styles: [".rte-toast{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastComponent, isStandalone: true, selector: "rte-toast", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null }, showActionButton: { classPropertyName: "showActionButton", publicName: "showActionButton", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, showLeftIcon: { classPropertyName: "showLeftIcon", publicName: "showLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, actionButtonLabel: { classPropertyName: "actionButtonLabel", publicName: "actionButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, onActionButtonClick: { classPropertyName: "onActionButtonClick", publicName: "onActionButtonClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"rte-toast {{ type() }} {{ position() }} {{ alignment() }}\"\n  role=\"status\"\n  [ngClass]=\"{ open: isOpen() }\"\n  (mouseenter)=\"handleMouseEnter()\"\n  (mouseleave)=\"handleMouseLeave()\"\n>\n  <div class=\"rte-toast-content\">\n    @if (displayLeftIcon()) {\n      <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"defaultIconName()\" [size]=\"iconSize\" />\n    } @else {\n      @if (displayCustomIcon()) {\n        <rte-icon class=\"rte-toast-icon\" aria-hidden=\"true\" [name]=\"iconName()!\" [size]=\"iconSize\" />\n      }\n    }\n    <span class=\"rte-toast-message\">{{ message() }}</span>\n  </div>\n  @if (displayActionButton()) {\n    <button rteButton rteButtonVariant=\"text\" class=\"rte-toast-action-button\" (click)=\"onClickActionButton()\">\n      {{ actionButtonLabel() }}\n    </button>\n  }\n  @if (closable()) {\n    <rte-icon-button\n      name=\"close\"\n      [attr.data-testid]=\"'toast-close-button'\"\n      [variant]=\"type() === 'neutral' ? 'reverse' : 'neutral'\"\n      (clickEvent)=\"clickCloseButton()\"\n    />\n  }\n</div>\n", styles: [".rte-toast{box-shadow:0 2px 4px 0 var(--elevation-shadow-key),0 0 2px 0 var(--elevation-shadow-ambient);background:linear-gradient(0deg,var(--elevation-surface-shadow-2) 0%,var(--elevation-surface-shadow-2) 100%);display:flex;width:400px;min-width:240px;max-width:336px;padding:8px 4px 8px 16px;align-items:center;border-radius:4px;border-bottom:4px solid var(--border-info);color:var(--content-primary);background-color:var(--background-default);z-index:10;position:fixed;inset:auto;opacity:0;transition:opacity .3s ease,transform .2s ease}.rte-toast.top{top:12px}.rte-toast.bottom{bottom:12px}.rte-toast.bottom.center{left:50%;transform:translate(-50%,10px)}.rte-toast.bottom.center.open{opacity:1;transform:translate(-50%)}.rte-toast.left{left:12px;transform:translate(-10px)}.rte-toast.left.open{opacity:1;transform:translate(0)}.rte-toast.right{right:12px;transform:translate(10px)}.rte-toast.right.open{opacity:1;transform:translate(0)}.rte-toast .rte-toast-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;width:100%;-webkit-line-clamp:2;line-clamp:2}.rte-toast .rte-toast-icon{flex:1 0 auto}.rte-toast .rte-toast-content{display:flex;align-items:center;gap:12px;flex-grow:1;overflow:hidden;width:100%}.rte-toast.info{border-bottom-color:var(--border-info)}.rte-toast.info .rte-toast-icon{color:var(--content-info-default)}.rte-toast.error{border-bottom-color:var(--border-danger)}.rte-toast.error .rte-toast-icon{color:var(--content-danger-default)}.rte-toast.success{border-bottom-color:var(--border-success)}.rte-toast.success .rte-toast-icon{color:var(--content-success-default)}.rte-toast.warning{border-bottom-color:var(--border-warning)}.rte-toast.warning .rte-toast-icon{color:var(--content-warning-default)}.rte-toast.neutral{background-color:var(--background-inverse);color:var(--content-primary-inverse);border-bottom-color:var(--border-primary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy", "badgeCount", "badgeContent", "badgeType", "badgeIcon", "customStyle"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonComponent, selector: "button[rteButton]", inputs: ["rteButtonVariant", "rteButtonSize", "rteBadgeCount", "rteBadgeContent", "rteButtonIcon", "rteButtonIconPosition", "rteButtonIconAppearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
@@ -4241,9 +4833,494 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ selector: "rte-tab", imports: [CommonModule, TabItemComponent, IconButtonComponent, DropdownModule, IconComponent, BadgeComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rte-tab-container\" [attr.data-direction]=\"direction()\">\n  <div class=\"rte-tab-border-vertical\" aria-hidden=\"true\" role=\"presentation\" [attr.data-direction]=\"direction()\"></div>\n  <div\n    [ngStyle]=\"{\n      position: 'relative',\n      display: 'flex',\n      'align-items': 'center',\n      'flex-direction': direction() === 'horizontal' ? 'row' : 'column',\n    }\"\n  >\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Previous tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-left' : 'arrow-chevron-up'\"\n      [ngStyle]=\"{\n        opacity: canScrollBackward() ? '1' : '0',\n        'pointer-events': canScrollBackward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollBackward()\"\n    />\n    <div\n      #tabList\n      role=\"tablist\"\n      aria-label=\"Sample Tabs\"\n      class=\"rte-tab\"\n      [attr.data-alignment]=\"shouldDisplayDropdown() ? 'start' : alignment()\"\n      [attr.data-direction]=\"direction()\"\n      [attr.data-overflow-type]=\"overflowType()\"\n    >\n      <span class=\"rte-tab-selected-indicator\" [ngStyle]=\"tabItemSelectedIndicatorStyle()\"></span>\n      <div\n        *ngIf=\"shouldDisplayDropdown() && options().length\"\n        rteDropdown\n        [rteDropdownOffset]=\"10\"\n        (menuEvent)=\"onClickTabItem($event.id)\"\n      >\n        <button\n          rteDropdownTrigger\n          class=\"rte-tab-dropdown-button\"\n          [attr.data-inverted]=\"inverted()\"\n          [attr.data-overflow-type]=\"overflowType()\"\n        >\n          <rte-icon *ngIf=\"selectedTab()?.icon\" appearance=\"filled\" [name]=\"selectedTab()?.icon!\"></rte-icon>\n          <span *ngIf=\"selectedTab()?.label\">{{ selectedTab()?.label }}</span>\n          <rte-badge\n            *ngIf=\"selectedTab()?.badgeCount && selectedTab()?.badgeContent === 'number'\"\n            [badgeType]=\"selectedTab()?.badgeType!\"\n            [badgeContent]=\"selectedTab()?.badgeContent!\"\n            [count]=\"selectedTab()?.badgeCount\"\n            [simpleBadge]=\"true\"\n          ></rte-badge>\n          <rte-icon name=\"arrow-chevron-down\" appearance=\"outlined\"></rte-icon>\n        </button>\n        <rte-dropdown-menu [items]=\"dropdownFilteredOptions()\" />\n      </div>\n      <ng-container *ngFor=\"let option of options(); let idx = index\">\n        <rte-tab-item\n          #tabItem\n          [option]=\"option\"\n          [direction]=\"direction()\"\n          [compactSpacing]=\"compactSpacing()\"\n          [isSelected]=\"isSelected(option.id)\"\n          [inverted]=\"inverted()\"\n          [attr.data-hidden]=\"shouldDisplayDropdown()\"\n          [isHidden]=\"shouldDisplayDropdown()\"\n          (keydown)=\"onKeydownTabItem($event)\"\n          (click)=\"onClickTabItem(option.id)\"\n        ></rte-tab-item>\n      </ng-container>\n    </div>\n    <rte-icon-button\n      *ngIf=\"isScrollable() && !shouldDisplayDropdown()\"\n      aria-label=\"Next tabs\"\n      variant=\"transparent\"\n      [name]=\"direction() === 'horizontal' ? 'arrow-chevron-right' : 'arrow-chevron-down'\"\n      [ngStyle]=\"{\n        opacity: canScrollForward() ? '1' : '0',\n        'pointer-events': canScrollForward() ? 'auto' : 'none',\n      }\"\n      (clickEvent)=\"scrollForward()\"\n    />\n  </div>\n  <div\n    class=\"rte-tab-border-horizontal\"\n    aria-hidden=\"true\"\n    role=\"presentation\"\n    [attr.data-direction]=\"direction()\"\n    [attr.data-compact-spacing]=\"compactSpacing()\"\n    [attr.data-scrollable]=\"isScrollable() && overflowType() === 'scrollable'\"\n  ></div>\n</div>\n", styles: [".rte-tab-container{position:relative;display:flex;flex-direction:column}.rte-tab-container[data-direction=vertical]{flex-direction:row;height:100%}.rte-tab{position:relative;display:flex;height:100%;gap:24px;justify-content:flex-start;padding-bottom:2px;margin-bottom:-2px;margin-left:-2px;scrollbar-width:none;width:100%;padding-top:2px;padding-left:2px;align-items:center}.rte-tab[data-direction=horizontal]{overflow-x:scroll}.rte-tab[data-direction=horizontal][data-overflow-type=dropdown]{overflow:hidden;margin-left:0}.rte-tab[data-direction=vertical]{flex-direction:column;border-bottom:none;gap:4px;height:100%;padding-right:2px;margin-left:-2px;width:max-content;align-items:start;margin-bottom:0}.rte-tab[data-direction=vertical] .rte-tab-selected-indicator{width:2px;transition:top .2s ease,height .2s ease}.rte-tab[data-alignment=center]{justify-content:center}.rte-tab .rte-tab-selected-indicator{position:absolute;bottom:0;height:2px;background:var(--background-brand-selected-default);transition:left .2s ease,width .2s ease;pointer-events:none;z-index:1}.rte-tab .rte-tab-separator{width:24px;flex-shrink:0}.rte-tab-border-horizontal{background-color:var(--background-neutral-regular-default);position:relative;height:2px}.rte-tab-border-horizontal[data-compact-spacing=true][data-scrollable=true]{bottom:5px}.rte-tab-border-horizontal[data-direction=vertical]{display:none}.rte-tab-border-vertical{background-color:var(--background-neutral-regular-default);position:relative;width:2px}.rte-tab-border-vertical[data-direction=horizontal]{display:none}.rte-tab-dropdown-button{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-secondary);width:max-content;display:flex;align-items:center;gap:12px;background-color:transparent;border:none;cursor:pointer;padding:0;margin:12px}.rte-tab-dropdown-button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:12px;z-index:1}.rte-tab-dropdown-button[data-inverted=true]{color:var(--content-primary-inverse)}\n"] }]
         }] });
 
+class TreeviewCheckService {
+    constructor() {
+        this.checkedIds = signal(new Set());
+        this.rootItems = signal([]);
+    }
+    setRootItems(items) {
+        this.rootItems.set(items);
+    }
+    toggleChecked(node, rootItemsOverride) {
+        const current = this.checkedIds();
+        const rootItems = rootItemsOverride ?? this.rootItems();
+        const next = computeCheckedIdsAfterToggle(current, node, rootItems);
+        this.checkedIds.set(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewCheckService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewCheckService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewCheckService, decorators: [{
+            type: Injectable
+        }] });
+
+class TreeviewSelectionService {
+    constructor() {
+        this.selectedId = signal(undefined);
+    }
+    select(id) {
+        this.selectedId.set(id);
+    }
+    selectByNodePath(pathString, items) {
+        const pathIndices = parsePathString(pathString);
+        const node = getNodeAtPath(items, pathIndices);
+        const id = node?.id ?? node?.labelText;
+        this.select(id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewSelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewSelectionService, decorators: [{
+            type: Injectable
+        }] });
+
+class TreeviewItemBorderComponent {
+    constructor() {
+        this.borderType = input.required();
+        this.isCompact = input(false);
+        this.svgConfig = computed(() => {
+            const map = this.isCompact() ? TREEVIEW_BORDER_SVG_MAP_COMPACT : TREEVIEW_BORDER_SVG_MAP;
+            return map[this.borderType()];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewItemBorderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeviewItemBorderComponent, isStandalone: true, selector: "rte-treeview-item-border", inputs: { borderType: { classPropertyName: "borderType", publicName: "borderType", isSignal: true, isRequired: true, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n  class=\"treeview-item-border\"\n  fill=\"none\"\n  aria-hidden=\"true\"\n  [attr.width]=\"svgConfig().width\"\n  [attr.height]=\"svgConfig().height\"\n  [attr.viewBox]=\"svgConfig().viewBox\"\n>\n  @for (element of svgConfig().elements; track $index) {\n    @if (element.kind === \"path\") {\n      <path class=\"treeview-item-border-path\" [attr.d]=\"element.d\" />\n    } @else {\n      <line\n        class=\"treeview-item-border-path\"\n        [attr.x1]=\"element.x1\"\n        [attr.y1]=\"element.y1\"\n        [attr.x2]=\"element.x2\"\n        [attr.y2]=\"element.y2\"\n      />\n    }\n  }\n</svg>\n", styles: [":host{display:block;flex-shrink:0;width:16px;min-width:16px;height:32px;align-self:stretch}:host-context(.treeview-item.compact){height:24px}.treeview-item-border{display:block;width:100%;height:100%}.treeview-item-border .treeview-item-border-path{stroke:var(--border-tertiary);stroke-width:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewItemBorderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-treeview-item-border", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  class=\"treeview-item-border\"\n  fill=\"none\"\n  aria-hidden=\"true\"\n  [attr.width]=\"svgConfig().width\"\n  [attr.height]=\"svgConfig().height\"\n  [attr.viewBox]=\"svgConfig().viewBox\"\n>\n  @for (element of svgConfig().elements; track $index) {\n    @if (element.kind === \"path\") {\n      <path class=\"treeview-item-border-path\" [attr.d]=\"element.d\" />\n    } @else {\n      <line\n        class=\"treeview-item-border-path\"\n        [attr.x1]=\"element.x1\"\n        [attr.y1]=\"element.y1\"\n        [attr.x2]=\"element.x2\"\n        [attr.y2]=\"element.y2\"\n      />\n    }\n  }\n</svg>\n", styles: [":host{display:block;flex-shrink:0;width:16px;min-width:16px;height:32px;align-self:stretch}:host-context(.treeview-item.compact){height:24px}.treeview-item-border{display:block;width:100%;height:100%}.treeview-item-border .treeview-item-border-path{stroke:var(--border-tertiary);stroke-width:1px}\n"] }]
+        }] });
+
+class TreeviewItemComponent {
+    get hostClasses() {
+        const classes = ["treeview-item"];
+        if (this.isCompact())
+            classes.push("compact");
+        if (this.isSelected())
+            classes.push("selected");
+        if (this.disabled())
+            classes.push("disabled");
+        if (this.hasChildren())
+            classes.push("has-children");
+        if (this.hasChildren() && this.isOpenSignal())
+            classes.push("is-expanded");
+        if (this.effectiveDepth() === 0)
+            classes.push("root-depth");
+        return classes.join(" ");
+    }
+    get dataItemId() {
+        return this.itemId();
+    }
+    get ariaLevel() {
+        return this.effectiveDepth() + 1;
+    }
+    get ariaExpanded() {
+        return this.hasChildren() ? this.isOpenSignal() : undefined;
+    }
+    get ariaSelected() {
+        return !!this.isSelected();
+    }
+    getChildBorderTypes(isLastChild) {
+        return getChildBorderTypes(this.resolvedBorderTypes(), isLastChild);
+    }
+    constructor() {
+        this.role = "treeitem";
+        this.treeId = input.required();
+        this.nodePath = input([]);
+        this.labelText = input.required();
+        this.icon = input();
+        this.disabled = input(false);
+        this.isCompact = input(false);
+        this.hasCheckbox = input(false);
+        this.isOpen = input(false);
+        this.hasIcon = input(false);
+        this.hasBadge = input(false);
+        this.items = input([]);
+        this.rootItems = input(undefined);
+        this.id = input();
+        this.depth = input(undefined);
+        this.isLastChild = input(undefined);
+        this.borderTypes = input([]);
+        this.actionIcon = input();
+        this.actionMenuItems = input();
+        this.isOpenSignal = signal(false);
+        this.itemClick = output();
+        this.openChange = output();
+        this.actionIconClick = output();
+        this.actionMenuClick = output();
+        this.parentItem = inject(TreeviewItemComponent, { optional: true, skipSelf: true });
+        this.selectionService = inject(TreeviewSelectionService, { optional: true });
+        this.checkService = inject(TreeviewCheckService, { optional: true });
+        this.hasChildren = computed(() => hasChildren(this.items()));
+        this.isChecked = computed(() => {
+            const ids = this.checkService?.checkedIds() ?? new Set();
+            const node = { id: this.itemId(), labelText: this.labelText(), items: this.items() };
+            const hasChildren$1 = hasChildren(this.items());
+            return allDescendantsChecked(node, ids) || (ids.has(this.itemId()) && !hasChildren$1);
+        });
+        this.isIndeterminate = computed(() => {
+            const ids = this.checkService?.checkedIds() ?? new Set();
+            const node = { id: this.itemId(), labelText: this.labelText(), items: this.items() };
+            return isNodeIndeterminate(node, ids);
+        });
+        this.itemId = computed(() => this.id() ?? this.labelText());
+        this.isSelected = computed(() => this.selectionService && !!isItemSelected(this.itemId(), this.selectionService.selectedId()));
+        this.effectiveDepth = computed(() => {
+            const depthInput = this.depth();
+            if (depthInput !== undefined) {
+                return depthInput;
+            }
+            const parent = this.parentItem;
+            return parent ? parent.effectiveDepth() + 1 : 0;
+        });
+        this.nodeUid = computed(() => buildTreeviewNodeId({
+            treeId: this.treeId(),
+            path: this.nodePath(),
+            itemId: this.itemId(),
+        }));
+        this.checkboxId = computed(() => computeCheckboxId(this.nodeUid()));
+        this.resolvedBorderTypes = computed(() => {
+            const inputBorderTypes = this.borderTypes();
+            return inputBorderTypes.length > 0 ? inputBorderTypes : [];
+        });
+        this.connectorBorderTypes = computed(() => computeConnectorBorderTypes({
+            depth: this.effectiveDepth(),
+            isCompact: this.isCompact(),
+            resolvedBorderTypes: this.resolvedBorderTypes(),
+            hasChildren: this.hasChildren(),
+        }));
+        effect(() => {
+            this.isOpenSignal.set(this.isOpen());
+        }, { allowSignalWrites: true });
+    }
+    toggleOpen() {
+        if (!canToggleOpen(this.hasChildren(), this.disabled())) {
+            return;
+        }
+        const newOpen = !this.isOpenSignal();
+        this.isOpenSignal.set(newOpen);
+        this.openChange.emit({ id: this.itemId(), open: newOpen });
+    }
+    handleContentClick() {
+        if (this.disabled()) {
+            return;
+        }
+        const service = this.selectionService;
+        if (service) {
+            const currentItemId = this.itemId();
+            service.select(currentItemId);
+        }
+        this.itemClick.emit(this.itemId());
+    }
+    handleChevronKeyDown(event) {
+        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            event.preventDefault();
+            this.toggleOpen();
+        }
+    }
+    handleContentKeyDown(event) {
+        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            event.preventDefault();
+            this.handleContentClick();
+        }
+    }
+    handleCheckboxClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled()) {
+            return;
+        }
+        this.checkService?.toggleChecked({ id: this.itemId(), labelText: this.labelText(), items: this.items() }, this.rootItems());
+    }
+    handleCheckboxKeydown(event) {
+        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            event.preventDefault();
+            this.handleCheckboxClick(event);
+        }
+    }
+    handleActionIconClick(event) {
+        event.stopPropagation();
+        if (this.disabled()) {
+            return;
+        }
+        this.actionIconClick.emit({ itemId: this.itemId(), event });
+    }
+    handleActionIconKeyDown(event) {
+        if ([SPACE_KEY, ENTER_KEY].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleActionIconClick(event);
+        }
+    }
+    handleActionMenuClick(menuEvent) {
+        if (this.disabled()) {
+            return;
+        }
+        const menuItemId = menuEvent.id;
+        const menuItemLabel = menuEvent.item?.label ?? menuItemId;
+        this.actionMenuClick.emit({
+            itemId: this.itemId(),
+            menuItemId,
+            menuItemLabel,
+            event: menuEvent.event,
+            item: menuEvent.item,
+        });
+    }
+    trackChild(child) {
+        return getTreeviewItemKey(child);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeviewItemComponent, isStandalone: true, selector: "li[rteTreeviewItem]", inputs: { treeId: { classPropertyName: "treeId", publicName: "treeId", isSignal: true, isRequired: true, transformFunction: null }, nodePath: { classPropertyName: "nodePath", publicName: "nodePath", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, hasCheckbox: { classPropertyName: "hasCheckbox", publicName: "hasCheckbox", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, hasIcon: { classPropertyName: "hasIcon", publicName: "hasIcon", isSignal: true, isRequired: false, transformFunction: null }, hasBadge: { classPropertyName: "hasBadge", publicName: "hasBadge", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, rootItems: { classPropertyName: "rootItems", publicName: "rootItems", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, isLastChild: { classPropertyName: "isLastChild", publicName: "isLastChild", isSignal: true, isRequired: false, transformFunction: null }, borderTypes: { classPropertyName: "borderTypes", publicName: "borderTypes", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, actionMenuItems: { classPropertyName: "actionMenuItems", publicName: "actionMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange", actionIconClick: "actionIconClick", actionMenuClick: "actionMenuClick" }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role", "attr.data-item-id": "this.dataItemId", "attr.aria-level": "this.ariaLevel", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected" } }, ngImport: i0, template: "<div class=\"treeview-item-row\">\n  @if (hasCheckbox()) {\n    <div\n      class=\"treeview-item-checkbox\"\n      role=\"input\"\n      data-treeview-focusable=\"checkbox\"\n      tabindex=\"-1\"\n      [attr.aria-checked]=\"isChecked() ? 'true' : isIndeterminate() ? 'mixed' : 'false'\"\n      [attr.aria-label]=\"labelText()\"\n      (click)=\"handleCheckboxClick($event)\"\n      (keydown)=\"handleCheckboxKeydown($event)\"\n    >\n      <rte-checkbox\n        [id]=\"checkboxId()\"\n        [label]=\"labelText()\"\n        [showLabel]=\"false\"\n        [tabindex]=\"-1\"\n        [disabled]=\"disabled()\"\n        [checked]=\"isChecked()\"\n        [indeterminate]=\"isIndeterminate()\"\n      />\n    </div>\n  }\n  <div class=\"treeview-item-borders-container\">\n    @for (borderType of connectorBorderTypes(); track $index) {\n      <rte-treeview-item-border [borderType]=\"borderType\" [isCompact]=\"isCompact()\" />\n    }\n    @if (hasChildren()) {\n      <button\n        type=\"button\"\n        class=\"treeview-item-chevron\"\n        data-treeview-focusable=\"chevron\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"isOpenSignal() ? 'Replier' : 'D\u00E9plier'\"\n        [disabled]=\"disabled()\"\n        (click)=\"toggleOpen(); $event.stopPropagation()\"\n        (keydown)=\"handleChevronKeyDown($event)\"\n      >\n        <rte-icon [name]=\"isOpenSignal() ? 'arrow-chevron-down' : 'arrow-chevron-right'\" [size]=\"16\" />\n      </button>\n    }\n  </div>\n  <div class=\"treeview-item-content-wrapper\">\n    <div class=\"treeview-item-main-content\" (keydown)=\"handleContentKeyDown($event)\" (click)=\"handleContentClick()\">\n      @if (hasIcon() && icon() && !isCompact()) {\n        <rte-icon class=\"treeview-item-icon\" [name]=\"icon()!\" [size]=\"16\" />\n      }\n      <div\n        class=\"treeview-item-content\"\n        data-treeview-focusable=\"content\"\n        tabindex=\"-1\"\n        [class.treeview-item-content-compact]=\"isCompact()\"\n      >\n        <span class=\"treeview-item-label\">{{ labelText() }}</span>\n      </div>\n      @if (hasBadge()) {\n        <span class=\"treeview-item-badge\">\n          <rte-badge badgeType=\"indicator\" badgeContent=\"empty\" badgeSize=\"s\" [simpleBadge]=\"true\" />\n        </span>\n      }\n      @if (actionIcon()) {\n        @if (actionMenuItems() && actionMenuItems()!.length > 0) {\n          <div\n            class=\"treeview-item-action\"\n            rteDropdown\n            (menuEvent)=\"handleActionMenuClick($event)\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <button\n              type=\"button\"\n              class=\"treeview-item-action-button\"\n              data-treeview-focusable=\"action\"\n              tabindex=\"-1\"\n              rteDropdownTrigger\n              [attr.aria-label]=\"'Actions pour ' + labelText()\"\n              [disabled]=\"disabled()\"\n            >\n              <rte-icon [name]=\"actionIcon()!\" [size]=\"16\" />\n            </button>\n            <rte-dropdown-menu [items]=\"actionMenuItems()!\" />\n          </div>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"treeview-item-action-button\"\n            data-treeview-focusable=\"action\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"'Actions pour ' + labelText()\"\n            [disabled]=\"disabled()\"\n            (click)=\"handleActionIconClick($event)\"\n            (keydown)=\"handleActionIconKeyDown($event)\"\n          >\n            <rte-icon [name]=\"actionIcon()!\" [size]=\"16\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</div>\n@if (hasChildren()) {\n  <ul class=\"treeview-item-children\" role=\"group\" [class.treeview-item-children-open]=\"isOpenSignal()\">\n    @for (child of items(); track trackChild(child); let childIndex = $index) {\n      <li\n        rteTreeviewItem\n        [rootItems]=\"rootItems()\"\n        [treeId]=\"treeId()\"\n        [nodePath]=\"nodePath().concat(childIndex)\"\n        [id]=\"child.id\"\n        [labelText]=\"child.labelText\"\n        [icon]=\"child.icon\"\n        [disabled]=\"child.disabled ?? false\"\n        [isCompact]=\"child.isCompact ?? isCompact()\"\n        [hasCheckbox]=\"child.hasCheckbox ?? hasCheckbox()\"\n        [isOpen]=\"child.isOpen ?? false\"\n        [hasIcon]=\"child.hasIcon ?? hasIcon()\"\n        [hasBadge]=\"child.hasBadge ?? false\"\n        [items]=\"child.items ?? []\"\n        [actionIcon]=\"child.actionIcon\"\n        [actionMenuItems]=\"child.actionMenuItems\"\n        [depth]=\"effectiveDepth() + 1\"\n        [isLastChild]=\"childIndex === items().length - 1\"\n        [borderTypes]=\"getChildBorderTypes(childIndex === items().length - 1)\"\n        (itemClick)=\"itemClick.emit($event)\"\n        (openChange)=\"openChange.emit($event)\"\n        (actionIconClick)=\"actionIconClick.emit($event)\"\n        (actionMenuClick)=\"actionMenuClick.emit($event)\"\n      ></li>\n    }\n  </ul>\n}\n", styles: [":host{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;min-height:32px}:host.root-depth:not(.has-children) .treeview-item-borders-container{padding-left:var(--treeview-root-indent, 0)}:host.compact{min-height:24px}:host.compact .treeview-item-row{min-height:24px}:host.compact .treeview-item-main-content{height:20px;padding:2px 4px}:host.compact .treeview-item-chevron{background:transparent}:host.compact .treeview-item-chevron:hover{background:transparent}:host.compact .treeview-item-chevron:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}:host.disabled .treeview-item-row{cursor:not-allowed;pointer-events:none}:host.disabled .treeview-item-main-content{background:var(--background-disabled)}:host.disabled .treeview-item-content,:host.disabled .treeview-item-icon{color:var(--content-disabled)}:host.selected>.treeview-item-row .treeview-item-main-content{background:var(--background-brand-default);color:var(--content-primary-inverse)}:host.selected>.treeview-item-row .treeview-item-content,:host.selected>.treeview-item-row .treeview-item-icon{color:var(--content-primary-inverse)}:host.selected>.treeview-item-row:hover .treeview-item-main-content{background:var(--background-brand-hover)}:host.is-expanded:not(.compact)>.treeview-item-row .treeview-item-chevron:after{content:\"\";position:absolute;bottom:0;left:50%;width:1px;height:8px;background:var(--border-tertiary);transform:translate(-50%) translateY(100%)}.treeview-item-row{display:flex;align-items:center;gap:4px;min-height:32px;border-radius:4px;cursor:pointer;box-sizing:border-box;flex:1;min-width:0}.treeview-item-row .treeview-item-main-content:hover{background:var(--background-hover)}.treeview-item-borders-container{display:flex;align-items:center;flex-shrink:0}.treeview-item-content-wrapper{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.treeview-item-main-content{flex:1;display:flex;align-items:center;gap:4px;min-width:0;padding:4px;border-radius:4px;transition:background-color .12s;box-sizing:border-box}@media (prefers-reduced-motion: reduce){.treeview-item-main-content{transition:none}}.treeview-item-main-content:focus-within:not(:has(.treeview-item-action-button:focus)){box-shadow:0 0 0 1px var(--border-brand-focused);border-radius:4px}.treeview-item-checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:16px;visibility:hidden;cursor:pointer;border-radius:2px}:host-context(.has-checked-items) .treeview-item-checkbox,.treeview-item-row:hover .treeview-item-checkbox,.treeview-item-row:focus-within .treeview-item-checkbox{visibility:visible}.treeview-item-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}.treeview-item-checkbox ::ng-deep .rte-checkbox{margin:0}.treeview-item-checkbox ::ng-deep .rte-checkbox-container,.treeview-item-checkbox ::ng-deep .rte-checkbox-container *{pointer-events:none}.treeview-item-checkbox ::ng-deep .rte-checkbox-container{padding:0 4px;gap:0}.treeview-item-checkbox-spacer{flex-shrink:0;width:20px;min-width:20px}.treeview-item-chevron{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;min-width:16px;height:16px;padding:0;background:var(--background-neutral-regular-default);border:none;border-radius:2px;cursor:pointer;color:inherit;position:relative}.treeview-item-chevron:hover{background:var(--background-neutral-navigation-hover)}.treeview-item-chevron:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}.treeview-item-chevron-spacer{flex-shrink:0;width:16px;min-width:16px}.treeview-item-action{flex-shrink:0;display:flex;align-items:center;justify-content:center}.treeview-item-action-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:16px;height:16px;background:transparent;border:none;border-radius:2px;cursor:pointer;color:inherit;padding:0}.treeview-item-action-button:hover{background:transparent}.treeview-item-action-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}:host(.selected) .treeview-item-action-button:focus-visible{outline-color:var(--border-inverse)}.treeview-item-action-button:disabled{cursor:not-allowed;opacity:.5}.treeview-item-icon{flex-shrink:0}.treeview-item-content{flex:1;display:flex;align-items:center;gap:4px;min-width:0;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;color:var(--content-secondary)}.treeview-item-content:focus,.treeview-item-content:focus-visible{outline:none}.treeview-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}.treeview-item-badge{flex-shrink:0;margin-left:auto}.treeview-item-children{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;transition:max-height .14s ease-out}@media (prefers-reduced-motion: reduce){.treeview-item-children{transition:none}}.treeview-item-children.treeview-item-children-open{max-height:2000px;overflow:visible}\n"], dependencies: [{ kind: "component", type: TreeviewItemComponent, selector: "li[rteTreeviewItem]", inputs: ["treeId", "nodePath", "labelText", "icon", "disabled", "isCompact", "hasCheckbox", "isOpen", "hasIcon", "hasBadge", "items", "rootItems", "id", "depth", "isLastChild", "borderTypes", "actionIcon", "actionMenuItems"], outputs: ["itemClick", "openChange", "actionIconClick", "actionMenuClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CheckboxComponent, selector: "rte-checkbox", inputs: ["id", "label", "value", "indeterminate", "description", "showLabel", "disabled", "error", "errorMessage", "readOnly", "checked", "tabindex"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: BadgeComponent, selector: "rte-badge", inputs: ["badgeType", "badgeSize", "badgeContent", "count", "icon", "simpleBadge", "withPlusSign"] }, { kind: "component", type: TreeviewItemBorderComponent, selector: "rte-treeview-item-border", inputs: ["borderType", "isCompact"] }, { kind: "directive", type: DropdownDirective, selector: "[rteDropdown]", inputs: ["rteDropdownId", "rteDropdownPosition", "rteDropdownAlignment", "rteDropdownIsOpen", "rteDropdownOffset", "rteDropdownAutofocus", "rteDropdownAutoOpen", "rteDropdownWidth", "rteCloseOnItemClick"], outputs: ["menuEvent", "clickedOutside", "closedDropdown", "menuChangeEvent"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[rteDropdownTrigger]", inputs: ["rteDropdownTriggerActivateWithArrowDown"], outputs: ["dropdownKeyDown", "dropdownTriggered", "dropdownTriggerFocus", "dropdownTriggerClearContent", "dropdownTriggerOpenDropdown", "dropdownTriggerCloseDropdown"] }, { kind: "component", type: DropdownMenuComponent, selector: "rte-dropdown-menu", inputs: ["items", "menuId", "isOpen", "width", "headerTemplate", "footerTemplate"], outputs: ["itemEvent", "closingMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "li[rteTreeviewItem]", imports: [
+                        CommonModule,
+                        CheckboxComponent,
+                        IconComponent,
+                        BadgeComponent,
+                        TreeviewItemBorderComponent,
+                        DropdownDirective,
+                        DropdownTriggerDirective,
+                        DropdownMenuComponent,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"treeview-item-row\">\n  @if (hasCheckbox()) {\n    <div\n      class=\"treeview-item-checkbox\"\n      role=\"input\"\n      data-treeview-focusable=\"checkbox\"\n      tabindex=\"-1\"\n      [attr.aria-checked]=\"isChecked() ? 'true' : isIndeterminate() ? 'mixed' : 'false'\"\n      [attr.aria-label]=\"labelText()\"\n      (click)=\"handleCheckboxClick($event)\"\n      (keydown)=\"handleCheckboxKeydown($event)\"\n    >\n      <rte-checkbox\n        [id]=\"checkboxId()\"\n        [label]=\"labelText()\"\n        [showLabel]=\"false\"\n        [tabindex]=\"-1\"\n        [disabled]=\"disabled()\"\n        [checked]=\"isChecked()\"\n        [indeterminate]=\"isIndeterminate()\"\n      />\n    </div>\n  }\n  <div class=\"treeview-item-borders-container\">\n    @for (borderType of connectorBorderTypes(); track $index) {\n      <rte-treeview-item-border [borderType]=\"borderType\" [isCompact]=\"isCompact()\" />\n    }\n    @if (hasChildren()) {\n      <button\n        type=\"button\"\n        class=\"treeview-item-chevron\"\n        data-treeview-focusable=\"chevron\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"isOpenSignal() ? 'Replier' : 'D\u00E9plier'\"\n        [disabled]=\"disabled()\"\n        (click)=\"toggleOpen(); $event.stopPropagation()\"\n        (keydown)=\"handleChevronKeyDown($event)\"\n      >\n        <rte-icon [name]=\"isOpenSignal() ? 'arrow-chevron-down' : 'arrow-chevron-right'\" [size]=\"16\" />\n      </button>\n    }\n  </div>\n  <div class=\"treeview-item-content-wrapper\">\n    <div class=\"treeview-item-main-content\" (keydown)=\"handleContentKeyDown($event)\" (click)=\"handleContentClick()\">\n      @if (hasIcon() && icon() && !isCompact()) {\n        <rte-icon class=\"treeview-item-icon\" [name]=\"icon()!\" [size]=\"16\" />\n      }\n      <div\n        class=\"treeview-item-content\"\n        data-treeview-focusable=\"content\"\n        tabindex=\"-1\"\n        [class.treeview-item-content-compact]=\"isCompact()\"\n      >\n        <span class=\"treeview-item-label\">{{ labelText() }}</span>\n      </div>\n      @if (hasBadge()) {\n        <span class=\"treeview-item-badge\">\n          <rte-badge badgeType=\"indicator\" badgeContent=\"empty\" badgeSize=\"s\" [simpleBadge]=\"true\" />\n        </span>\n      }\n      @if (actionIcon()) {\n        @if (actionMenuItems() && actionMenuItems()!.length > 0) {\n          <div\n            class=\"treeview-item-action\"\n            rteDropdown\n            (menuEvent)=\"handleActionMenuClick($event)\"\n            (click)=\"$event.stopPropagation()\"\n          >\n            <button\n              type=\"button\"\n              class=\"treeview-item-action-button\"\n              data-treeview-focusable=\"action\"\n              tabindex=\"-1\"\n              rteDropdownTrigger\n              [attr.aria-label]=\"'Actions pour ' + labelText()\"\n              [disabled]=\"disabled()\"\n            >\n              <rte-icon [name]=\"actionIcon()!\" [size]=\"16\" />\n            </button>\n            <rte-dropdown-menu [items]=\"actionMenuItems()!\" />\n          </div>\n        } @else {\n          <button\n            type=\"button\"\n            class=\"treeview-item-action-button\"\n            data-treeview-focusable=\"action\"\n            tabindex=\"-1\"\n            [attr.aria-label]=\"'Actions pour ' + labelText()\"\n            [disabled]=\"disabled()\"\n            (click)=\"handleActionIconClick($event)\"\n            (keydown)=\"handleActionIconKeyDown($event)\"\n          >\n            <rte-icon [name]=\"actionIcon()!\" [size]=\"16\" />\n          </button>\n        }\n      }\n    </div>\n  </div>\n</div>\n@if (hasChildren()) {\n  <ul class=\"treeview-item-children\" role=\"group\" [class.treeview-item-children-open]=\"isOpenSignal()\">\n    @for (child of items(); track trackChild(child); let childIndex = $index) {\n      <li\n        rteTreeviewItem\n        [rootItems]=\"rootItems()\"\n        [treeId]=\"treeId()\"\n        [nodePath]=\"nodePath().concat(childIndex)\"\n        [id]=\"child.id\"\n        [labelText]=\"child.labelText\"\n        [icon]=\"child.icon\"\n        [disabled]=\"child.disabled ?? false\"\n        [isCompact]=\"child.isCompact ?? isCompact()\"\n        [hasCheckbox]=\"child.hasCheckbox ?? hasCheckbox()\"\n        [isOpen]=\"child.isOpen ?? false\"\n        [hasIcon]=\"child.hasIcon ?? hasIcon()\"\n        [hasBadge]=\"child.hasBadge ?? false\"\n        [items]=\"child.items ?? []\"\n        [actionIcon]=\"child.actionIcon\"\n        [actionMenuItems]=\"child.actionMenuItems\"\n        [depth]=\"effectiveDepth() + 1\"\n        [isLastChild]=\"childIndex === items().length - 1\"\n        [borderTypes]=\"getChildBorderTypes(childIndex === items().length - 1)\"\n        (itemClick)=\"itemClick.emit($event)\"\n        (openChange)=\"openChange.emit($event)\"\n        (actionIconClick)=\"actionIconClick.emit($event)\"\n        (actionMenuClick)=\"actionMenuClick.emit($event)\"\n      ></li>\n    }\n  </ul>\n}\n", styles: [":host{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;min-height:32px}:host.root-depth:not(.has-children) .treeview-item-borders-container{padding-left:var(--treeview-root-indent, 0)}:host.compact{min-height:24px}:host.compact .treeview-item-row{min-height:24px}:host.compact .treeview-item-main-content{height:20px;padding:2px 4px}:host.compact .treeview-item-chevron{background:transparent}:host.compact .treeview-item-chevron:hover{background:transparent}:host.compact .treeview-item-chevron:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}:host.disabled .treeview-item-row{cursor:not-allowed;pointer-events:none}:host.disabled .treeview-item-main-content{background:var(--background-disabled)}:host.disabled .treeview-item-content,:host.disabled .treeview-item-icon{color:var(--content-disabled)}:host.selected>.treeview-item-row .treeview-item-main-content{background:var(--background-brand-default);color:var(--content-primary-inverse)}:host.selected>.treeview-item-row .treeview-item-content,:host.selected>.treeview-item-row .treeview-item-icon{color:var(--content-primary-inverse)}:host.selected>.treeview-item-row:hover .treeview-item-main-content{background:var(--background-brand-hover)}:host.is-expanded:not(.compact)>.treeview-item-row .treeview-item-chevron:after{content:\"\";position:absolute;bottom:0;left:50%;width:1px;height:8px;background:var(--border-tertiary);transform:translate(-50%) translateY(100%)}.treeview-item-row{display:flex;align-items:center;gap:4px;min-height:32px;border-radius:4px;cursor:pointer;box-sizing:border-box;flex:1;min-width:0}.treeview-item-row .treeview-item-main-content:hover{background:var(--background-hover)}.treeview-item-borders-container{display:flex;align-items:center;flex-shrink:0}.treeview-item-content-wrapper{display:flex;align-items:center;gap:4px;flex:1;min-width:0}.treeview-item-main-content{flex:1;display:flex;align-items:center;gap:4px;min-width:0;padding:4px;border-radius:4px;transition:background-color .12s;box-sizing:border-box}@media (prefers-reduced-motion: reduce){.treeview-item-main-content{transition:none}}.treeview-item-main-content:focus-within:not(:has(.treeview-item-action-button:focus)){box-shadow:0 0 0 1px var(--border-brand-focused);border-radius:4px}.treeview-item-checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:16px;visibility:hidden;cursor:pointer;border-radius:2px}:host-context(.has-checked-items) .treeview-item-checkbox,.treeview-item-row:hover .treeview-item-checkbox,.treeview-item-row:focus-within .treeview-item-checkbox{visibility:visible}.treeview-item-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}.treeview-item-checkbox ::ng-deep .rte-checkbox{margin:0}.treeview-item-checkbox ::ng-deep .rte-checkbox-container,.treeview-item-checkbox ::ng-deep .rte-checkbox-container *{pointer-events:none}.treeview-item-checkbox ::ng-deep .rte-checkbox-container{padding:0 4px;gap:0}.treeview-item-checkbox-spacer{flex-shrink:0;width:20px;min-width:20px}.treeview-item-chevron{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;min-width:16px;height:16px;padding:0;background:var(--background-neutral-regular-default);border:none;border-radius:2px;cursor:pointer;color:inherit;position:relative}.treeview-item-chevron:hover{background:var(--background-neutral-navigation-hover)}.treeview-item-chevron:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}.treeview-item-chevron-spacer{flex-shrink:0;width:16px;min-width:16px}.treeview-item-action{flex-shrink:0;display:flex;align-items:center;justify-content:center}.treeview-item-action-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:16px;height:16px;background:transparent;border:none;border-radius:2px;cursor:pointer;color:inherit;padding:0}.treeview-item-action-button:hover{background:transparent}.treeview-item-action-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:0}:host(.selected) .treeview-item-action-button:focus-visible{outline-color:var(--border-inverse)}.treeview-item-action-button:disabled{cursor:not-allowed;opacity:.5}.treeview-item-icon{flex-shrink:0}.treeview-item-content{flex:1;display:flex;align-items:center;gap:4px;min-width:0;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;color:var(--content-secondary)}.treeview-item-content:focus,.treeview-item-content:focus-visible{outline:none}.treeview-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}.treeview-item-badge{flex-shrink:0;margin-left:auto}.treeview-item-children{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;overflow:hidden;max-height:0;transition:max-height .14s ease-out}@media (prefers-reduced-motion: reduce){.treeview-item-children{transition:none}}.treeview-item-children.treeview-item-children-open{max-height:2000px;overflow:visible}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ["class"]
+            }], role: [{
+                type: HostBinding,
+                args: ["attr.role"]
+            }], dataItemId: [{
+                type: HostBinding,
+                args: ["attr.data-item-id"]
+            }], ariaLevel: [{
+                type: HostBinding,
+                args: ["attr.aria-level"]
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ["attr.aria-expanded"]
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ["attr.aria-selected"]
+            }] } });
+
+class TreeviewKeyboardService {
+    handleKeyDown(event, treeElement) {
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        if (ARROW_KEYS.includes(event.key)) {
+            this.handleArrowKey(treeElement, event);
+        }
+    }
+    handleArrowKey(treeElement, event) {
+        const target = event.target;
+        if (!treeElement.contains(target)) {
+            return;
+        }
+        if (!isTreeviewFocusable(target)) {
+            return;
+        }
+        const rows = getVisibleFocusableRows(treeElement);
+        if (rows.length === 0) {
+            return;
+        }
+        const position = findFocusedPosition(rows, target);
+        if (position.rowIndex === -1 || position.focusableIndex === -1) {
+            return;
+        }
+        if ([ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
+            const direction = event.key === ARROW_UP_KEY ? -1 : 1;
+            const nextTarget = getNextFocusTarget(rows, position, direction, true);
+            if (nextTarget) {
+                const element = rows[nextTarget.rowIndex].focusables[nextTarget.focusableIndex];
+                event.preventDefault();
+                setMovingTabindex(treeElement, element);
+                element.focus();
+            }
+            else {
+                event.preventDefault();
+            }
+            return;
+        }
+        if ([ARROW_LEFT_KEY, ARROW_RIGHT_KEY].includes(event.key)) {
+            const direction = event.key === ARROW_LEFT_KEY ? -1 : 1;
+            const nextTarget = getNextFocusTarget(rows, position, direction, false);
+            if (nextTarget) {
+                const element = rows[nextTarget.rowIndex].focusables[nextTarget.focusableIndex];
+                event.preventDefault();
+                setMovingTabindex(treeElement, element);
+                element.focus();
+            }
+            else {
+                event.preventDefault();
+            }
+        }
+    }
+    onFocusIn(treeElement, event) {
+        const target = event.target;
+        if (treeElement.contains(target) && isTreeviewFocusable(target)) {
+            setMovingTabindex(treeElement, target);
+        }
+    }
+    onFocusOut(treeElement, event) {
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget && treeElement.contains(relatedTarget)) {
+            return;
+        }
+        resetMovingTabIndex(treeElement);
+    }
+    initialize(treeElement) {
+        resetMovingTabIndex(treeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewKeyboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewKeyboardService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewKeyboardService, decorators: [{
+            type: Injectable
+        }] });
+
+class TreeviewComponent {
+    constructor() {
+        this.treeRef = viewChild("treeRef");
+        this.isCompact = input(false);
+        this.hasCheckbox = input(false);
+        this.items = input([]);
+        this.selectedId = input(undefined);
+        this.selectedPath = input(undefined);
+        this.id = input("treeview");
+        this.itemClick = output();
+        this.openChange = output();
+        this.actionIconClick = output();
+        this.actionMenuClick = output();
+        this.selectionChange = output();
+        this.checkedIdsChange = output();
+        this.selectionService = inject(TreeviewSelectionService);
+        this.checkService = inject(TreeviewCheckService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.keyboardService = inject(TreeviewKeyboardService);
+        this.destroyRef = inject(DestroyRef);
+        this.hasCheckedItems = computed(() => this.hasCheckbox() && this.checkService.checkedIds().size > 0);
+        this.hasNestedItems = computed(() => hasNestedItemsInTree(this.items()));
+        effect(() => {
+            const id = this.selectedId();
+            this.selectionService.select(id);
+            this.selectionChange.emit({ id, selected: true });
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const pathString = this.selectedPath();
+            const currentItems = this.items();
+            if (pathString != null && pathString !== "" && currentItems.length > 0) {
+                this.selectionService.selectByNodePath(pathString, currentItems);
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const ids = this.checkService.checkedIds();
+            this.checkedIdsChange.emit(ids);
+            this.cdr.markForCheck();
+        }, { allowSignalWrites: true });
+        effect(() => {
+            this.checkService.setRootItems(this.items());
+        }, { allowSignalWrites: true });
+    }
+    setupKeyboardListeners() {
+        const treeElement = this.treeRef()?.nativeElement;
+        if (!treeElement) {
+            return;
+        }
+        this.keyboardService.initialize(treeElement);
+        const handleKeyDown = (event) => {
+            this.keyboardService.handleKeyDown(event, treeElement);
+        };
+        const handleFocusIn = (event) => {
+            this.keyboardService.onFocusIn(treeElement, event);
+        };
+        const handleFocusOut = (event) => {
+            this.keyboardService.onFocusOut(treeElement, event);
+        };
+        treeElement.addEventListener("keydown", handleKeyDown, true);
+        treeElement.addEventListener("focusin", handleFocusIn);
+        treeElement.addEventListener("focusout", handleFocusOut);
+        this.destroyRef.onDestroy(() => {
+            treeElement.removeEventListener("keydown", handleKeyDown, true);
+            treeElement.removeEventListener("focusin", handleFocusIn);
+            treeElement.removeEventListener("focusout", handleFocusOut);
+        });
+    }
+    ngAfterViewInit() {
+        this.setupKeyboardListeners();
+    }
+    itemTrack(item) {
+        return item.id ?? item.labelText;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TreeviewComponent, isStandalone: true, selector: "rte-treeview", inputs: { isCompact: { classPropertyName: "isCompact", publicName: "isCompact", isSignal: true, isRequired: false, transformFunction: null }, hasCheckbox: { classPropertyName: "hasCheckbox", publicName: "hasCheckbox", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedId: { classPropertyName: "selectedId", publicName: "selectedId", isSignal: true, isRequired: false, transformFunction: null }, selectedPath: { classPropertyName: "selectedPath", publicName: "selectedPath", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", openChange: "openChange", actionIconClick: "actionIconClick", actionMenuClick: "actionMenuClick", selectionChange: "selectionChange", checkedIdsChange: "checkedIdsChange" }, providers: [TreeviewSelectionService, TreeviewCheckService, TreeviewKeyboardService], viewQueries: [{ propertyName: "treeRef", first: true, predicate: ["treeRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  #treeRef\n  class=\"treeview\"\n  role=\"tree\"\n  [class.compact]=\"isCompact()\"\n  [class.has-checked-items]=\"hasCheckedItems()\"\n  [class.has-nested-items]=\"hasNestedItems()\"\n>\n  @for (item of items(); track itemTrack(item); let itemIndex = $index) {\n    <li\n      rteTreeviewItem\n      [rootItems]=\"items()\"\n      [treeId]=\"id()\"\n      [nodePath]=\"[itemIndex]\"\n      [id]=\"item.id\"\n      [labelText]=\"item.labelText\"\n      [icon]=\"item.icon\"\n      [disabled]=\"item.disabled ?? false\"\n      [isCompact]=\"item.isCompact ?? isCompact()\"\n      [hasCheckbox]=\"item.hasCheckbox ?? hasCheckbox()\"\n      [isOpen]=\"item.isOpen ?? false\"\n      [hasIcon]=\"item.hasIcon ?? false\"\n      [hasBadge]=\"item.hasBadge ?? false\"\n      [items]=\"item.items ?? []\"\n      [actionIcon]=\"item.actionIcon\"\n      [actionMenuItems]=\"item.actionMenuItems\"\n      [isLastChild]=\"itemIndex === items().length - 1\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (openChange)=\"openChange.emit($event)\"\n      (actionIconClick)=\"actionIconClick.emit($event)\"\n      (actionMenuClick)=\"actionMenuClick.emit($event)\"\n    ></li>\n  }\n</ul>\n", styles: [".treeview{display:flex;flex-direction:column;margin:0;padding:0 2px}.treeview.has-nested-items{--treeview-root-indent: 16px}.treeview>li[rteTreeviewItem]:not(:first-child){padding-top:8px}.treeview.compact>li[rteTreeviewItem]:not(:first-child){padding-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TreeviewItemComponent, selector: "li[rteTreeviewItem]", inputs: ["treeId", "nodePath", "labelText", "icon", "disabled", "isCompact", "hasCheckbox", "isOpen", "hasIcon", "hasBadge", "items", "rootItems", "id", "depth", "isLastChild", "borderTypes", "actionIcon", "actionMenuItems"], outputs: ["itemClick", "openChange", "actionIconClick", "actionMenuClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TreeviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-treeview", imports: [CommonModule, TreeviewItemComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TreeviewSelectionService, TreeviewCheckService, TreeviewKeyboardService], template: "<ul\n  #treeRef\n  class=\"treeview\"\n  role=\"tree\"\n  [class.compact]=\"isCompact()\"\n  [class.has-checked-items]=\"hasCheckedItems()\"\n  [class.has-nested-items]=\"hasNestedItems()\"\n>\n  @for (item of items(); track itemTrack(item); let itemIndex = $index) {\n    <li\n      rteTreeviewItem\n      [rootItems]=\"items()\"\n      [treeId]=\"id()\"\n      [nodePath]=\"[itemIndex]\"\n      [id]=\"item.id\"\n      [labelText]=\"item.labelText\"\n      [icon]=\"item.icon\"\n      [disabled]=\"item.disabled ?? false\"\n      [isCompact]=\"item.isCompact ?? isCompact()\"\n      [hasCheckbox]=\"item.hasCheckbox ?? hasCheckbox()\"\n      [isOpen]=\"item.isOpen ?? false\"\n      [hasIcon]=\"item.hasIcon ?? false\"\n      [hasBadge]=\"item.hasBadge ?? false\"\n      [items]=\"item.items ?? []\"\n      [actionIcon]=\"item.actionIcon\"\n      [actionMenuItems]=\"item.actionMenuItems\"\n      [isLastChild]=\"itemIndex === items().length - 1\"\n      (itemClick)=\"itemClick.emit($event)\"\n      (openChange)=\"openChange.emit($event)\"\n      (actionIconClick)=\"actionIconClick.emit($event)\"\n      (actionMenuClick)=\"actionMenuClick.emit($event)\"\n    ></li>\n  }\n</ul>\n", styles: [".treeview{display:flex;flex-direction:column;margin:0;padding:0 2px}.treeview.has-nested-items{--treeview-root-indent: 16px}.treeview>li[rteTreeviewItem]:not(:first-child){padding-top:8px}.treeview.compact>li[rteTreeviewItem]:not(:first-child){padding-top:4px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class StatusComponent {
+    constructor() {
+        this.status = input();
+        this.size = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatusComponent, isStandalone: true, selector: "rte-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"rte-avatar-status\"\n  [style]=\"{\n    width: size() + 'px',\n    height: size() + 'px',\n  }\"\n>\n  @switch (status()) {\n    @case (\"available\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM20.4629 8C20.1963 8.00003 19.9627 8.09983 19.7627 8.2998L11.2881 16.7754L7.73828 13.2002C7.53828 13.0002 7.30039 12.9004 7.02539 12.9004C6.7505 12.9004 6.51342 13.0003 6.31348 13.2002C6.11357 13.4001 6.0094 13.6373 6.00098 13.9121C5.99264 14.1871 6.08809 14.425 6.28809 14.625L10.5879 18.9248C10.7879 19.1248 11.0214 19.2246 11.2881 19.2246C11.5547 19.2246 11.7883 19.1248 11.9883 18.9248L21.1631 9.72461C21.3629 9.52471 21.4628 9.2875 21.4629 9.0127C21.4629 8.7377 21.3631 8.4998 21.1631 8.2998C20.9631 8.09984 20.7295 8 20.4629 8Z\"\n          fill=\"#0B8A4D\"\n        />\n      </svg>\n    }\n\n    @case (\"away\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 6C16.2167 6 18.1038 6.77956 19.6621 8.33789C21.2204 9.89622 22 11.7833 22 14C22 16.2167 21.2204 18.1038 19.6621 19.6621C18.1038 21.2204 16.2167 22 14 22C11.7833 22 9.89622 21.2204 8.33789 19.6621C6.77956 18.1038 6 16.2167 6 14C6 11.7833 6.77956 9.89622 8.33789 8.33789C9.89622 6.77956 11.7833 6 14 6ZM14 9C13.7167 9 13.4788 9.09544 13.2871 9.28711C13.0954 9.47878 13 9.71667 13 10V13.9746C13 14.1079 13.0252 14.2373 13.0752 14.3623C13.1252 14.4873 13.1998 14.6002 13.2998 14.7002L16.5996 18C16.7829 18.1833 17.0166 18.2753 17.2998 18.2754C17.5831 18.2754 17.8167 18.1833 18 18C18.1833 17.8167 18.2754 17.5831 18.2754 17.2998C18.2753 17.0166 18.1833 16.7829 18 16.5996L15 13.5996V10C15 9.71667 14.9046 9.47878 14.7129 9.28711C14.5212 9.09544 14.2833 9 14 9Z\"\n          fill=\"#ED6E13\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM14 4C12.6167 4 11.3163 4.26211 10.0996 4.78711C8.88302 5.3121 7.82476 6.02485 6.9248 6.9248C6.02485 7.82476 5.3121 8.88302 4.78711 10.0996C4.26211 11.3163 4 12.6167 4 14C4 15.3833 4.26211 16.6837 4.78711 17.9004C5.3121 19.117 6.02485 20.1752 6.9248 21.0752C7.82476 21.9751 8.88302 22.6879 10.0996 23.2129C11.3163 23.7379 12.6167 24 14 24C15.3833 24 16.6837 23.7379 17.9004 23.2129C19.117 22.6879 20.1752 21.9751 21.0752 21.0752C21.9751 20.1752 22.6879 19.117 23.2129 17.9004C23.7379 16.6837 24 15.3833 24 14C24 12.6167 23.7379 11.3163 23.2129 10.0996C22.6879 8.88302 21.9751 7.82476 21.0752 6.9248C20.1752 6.02485 19.117 5.3121 17.9004 4.78711C16.6837 4.26211 15.3833 4 14 4Z\"\n          fill=\"#ED6E13\"\n        />\n      </svg>\n    }\n\n    @case (\"busy\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0Z\"\n          fill=\"#DE2048\"\n        />\n      </svg>\n    }\n\n    @case (\"offline\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M17.5996 9.4248C17.8829 9.4248 18.1165 9.51686 18.2998 9.7002C18.4831 9.88353 18.5752 10.1171 18.5752 10.4004C18.5751 10.6835 18.483 10.9164 18.2998 11.0996L15.4004 14L18.2998 16.9004C18.483 17.0836 18.5751 17.3165 18.5752 17.5996C18.5752 17.8829 18.4831 18.1165 18.2998 18.2998C18.1165 18.4831 17.8829 18.5752 17.5996 18.5752C17.3165 18.5751 17.0836 18.483 16.9004 18.2998L14 15.4004L11.0996 18.2998C10.9164 18.483 10.6835 18.5751 10.4004 18.5752C10.1171 18.5752 9.88353 18.4831 9.7002 18.2998C9.51686 18.1165 9.4248 17.8829 9.4248 17.5996C9.42489 17.3165 9.51701 17.0836 9.7002 16.9004L12.5996 14L9.7002 11.0996C9.51701 10.9164 9.42489 10.6835 9.4248 10.4004C9.4248 10.1171 9.51686 9.88353 9.7002 9.7002C9.88353 9.51686 10.1171 9.4248 10.4004 9.4248C10.6835 9.42489 10.9164 9.51701 11.0996 9.7002L14 12.5996L16.9004 9.7002C17.0836 9.51701 17.3165 9.42489 17.5996 9.4248Z\"\n          fill=\"#737272\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM14 4C12.6167 4 11.3163 4.26211 10.0996 4.78711C8.88302 5.3121 7.82476 6.02485 6.9248 6.9248C6.02485 7.82476 5.3121 8.88302 4.78711 10.0996C4.26211 11.3163 4 12.6167 4 14C4 15.3833 4.26211 16.6837 4.78711 17.9004C5.3121 19.117 6.02485 20.1752 6.9248 21.0752C7.82476 21.9751 8.88302 22.6879 10.0996 23.2129C11.3163 23.7379 12.6167 24 14 24C15.3833 24 16.6837 23.7379 17.9004 23.2129C19.117 22.6879 20.1752 21.9751 21.0752 21.0752C21.9751 20.1752 22.6879 19.117 23.2129 17.9004C23.7379 16.6837 24 15.3833 24 14C24 12.6167 23.7379 11.3163 23.2129 10.0996C22.6879 8.88302 21.9751 7.82476 21.0752 6.9248C20.1752 6.02485 19.117 5.3121 17.9004 4.78711C16.6837 4.26211 15.3833 4 14 4Z\"\n          fill=\"#737272\"\n        />\n      </svg>\n    }\n\n    @case (\"unknown\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM13.9922 19C13.4422 19 12.9708 19.1962 12.5791 19.5879C12.1877 19.9795 11.9922 20.4502 11.9922 21C11.9922 21.5498 12.1877 22.0205 12.5791 22.4121C12.9708 22.8038 13.4422 23 13.9922 23C14.5421 23 15.0127 22.8037 15.4043 22.4121C15.7959 22.0205 15.9922 21.55 15.9922 21C15.9922 20.45 15.7959 19.9795 15.4043 19.5879C15.0127 19.1963 14.5421 19 13.9922 19ZM13.9922 4C13.0089 4 12.1043 4.22044 11.2793 4.66211C10.4543 5.10378 9.77552 5.72539 9.24219 6.52539C9.05897 6.80862 8.97993 7.10827 9.00488 7.4248C9.02987 7.74129 9.15853 8.00801 9.3916 8.22461C9.72483 8.52451 10.121 8.64609 10.5791 8.58789C11.0374 8.52956 11.4003 8.30814 11.667 7.9248C11.9503 7.52487 12.2881 7.22101 12.6797 7.0127C13.0713 6.80439 13.5089 6.7002 13.9922 6.7002C14.7754 6.70023 15.4049 6.91631 15.8799 7.34961C16.3549 7.78294 16.5918 8.35854 16.5918 9.0752C16.5918 9.55831 16.4545 10.0039 16.1797 10.4121C15.9047 10.8204 15.3422 11.4004 14.4922 12.1504C13.8257 12.7502 13.3507 13.3208 13.0674 13.8623C12.784 14.404 12.6416 15.0004 12.6416 15.6504C12.6417 16.0336 12.7798 16.3541 13.0547 16.6123C13.3297 16.8706 13.6587 17 14.042 17C14.4253 17 14.7543 16.8663 15.0293 16.5996C15.3042 16.333 15.4753 15.9996 15.542 15.5996C15.6087 15.1831 15.7502 14.8122 15.9668 14.4873C16.1835 14.1623 16.6002 13.7083 17.2168 13.125C18.0668 12.3084 18.6501 11.6 18.9668 11C19.2835 10.4 19.4424 9.72461 19.4424 8.97461C19.4423 7.49151 18.9379 6.29157 17.9297 5.375C16.9214 4.45837 15.6088 4.00004 13.9922 4Z\"\n          fill=\"#737272\"\n        />\n      </svg>\n    }\n  }\n</div>\n", styles: [".rte-avatar-status{display:flex;position:absolute;bottom:0;right:0;border-radius:50%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-status", standalone: true, template: "<div\n  class=\"rte-avatar-status\"\n  [style]=\"{\n    width: size() + 'px',\n    height: size() + 'px',\n  }\"\n>\n  @switch (status()) {\n    @case (\"available\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM20.4629 8C20.1963 8.00003 19.9627 8.09983 19.7627 8.2998L11.2881 16.7754L7.73828 13.2002C7.53828 13.0002 7.30039 12.9004 7.02539 12.9004C6.7505 12.9004 6.51342 13.0003 6.31348 13.2002C6.11357 13.4001 6.0094 13.6373 6.00098 13.9121C5.99264 14.1871 6.08809 14.425 6.28809 14.625L10.5879 18.9248C10.7879 19.1248 11.0214 19.2246 11.2881 19.2246C11.5547 19.2246 11.7883 19.1248 11.9883 18.9248L21.1631 9.72461C21.3629 9.52471 21.4628 9.2875 21.4629 9.0127C21.4629 8.7377 21.3631 8.4998 21.1631 8.2998C20.9631 8.09984 20.7295 8 20.4629 8Z\"\n          fill=\"#0B8A4D\"\n        />\n      </svg>\n    }\n\n    @case (\"away\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 6C16.2167 6 18.1038 6.77956 19.6621 8.33789C21.2204 9.89622 22 11.7833 22 14C22 16.2167 21.2204 18.1038 19.6621 19.6621C18.1038 21.2204 16.2167 22 14 22C11.7833 22 9.89622 21.2204 8.33789 19.6621C6.77956 18.1038 6 16.2167 6 14C6 11.7833 6.77956 9.89622 8.33789 8.33789C9.89622 6.77956 11.7833 6 14 6ZM14 9C13.7167 9 13.4788 9.09544 13.2871 9.28711C13.0954 9.47878 13 9.71667 13 10V13.9746C13 14.1079 13.0252 14.2373 13.0752 14.3623C13.1252 14.4873 13.1998 14.6002 13.2998 14.7002L16.5996 18C16.7829 18.1833 17.0166 18.2753 17.2998 18.2754C17.5831 18.2754 17.8167 18.1833 18 18C18.1833 17.8167 18.2754 17.5831 18.2754 17.2998C18.2753 17.0166 18.1833 16.7829 18 16.5996L15 13.5996V10C15 9.71667 14.9046 9.47878 14.7129 9.28711C14.5212 9.09544 14.2833 9 14 9Z\"\n          fill=\"#ED6E13\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM14 4C12.6167 4 11.3163 4.26211 10.0996 4.78711C8.88302 5.3121 7.82476 6.02485 6.9248 6.9248C6.02485 7.82476 5.3121 8.88302 4.78711 10.0996C4.26211 11.3163 4 12.6167 4 14C4 15.3833 4.26211 16.6837 4.78711 17.9004C5.3121 19.117 6.02485 20.1752 6.9248 21.0752C7.82476 21.9751 8.88302 22.6879 10.0996 23.2129C11.3163 23.7379 12.6167 24 14 24C15.3833 24 16.6837 23.7379 17.9004 23.2129C19.117 22.6879 20.1752 21.9751 21.0752 21.0752C21.9751 20.1752 22.6879 19.117 23.2129 17.9004C23.7379 16.6837 24 15.3833 24 14C24 12.6167 23.7379 11.3163 23.2129 10.0996C22.6879 8.88302 21.9751 7.82476 21.0752 6.9248C20.1752 6.02485 19.117 5.3121 17.9004 4.78711C16.6837 4.26211 15.3833 4 14 4Z\"\n          fill=\"#ED6E13\"\n        />\n      </svg>\n    }\n\n    @case (\"busy\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0Z\"\n          fill=\"#DE2048\"\n        />\n      </svg>\n    }\n\n    @case (\"offline\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M17.5996 9.4248C17.8829 9.4248 18.1165 9.51686 18.2998 9.7002C18.4831 9.88353 18.5752 10.1171 18.5752 10.4004C18.5751 10.6835 18.483 10.9164 18.2998 11.0996L15.4004 14L18.2998 16.9004C18.483 17.0836 18.5751 17.3165 18.5752 17.5996C18.5752 17.8829 18.4831 18.1165 18.2998 18.2998C18.1165 18.4831 17.8829 18.5752 17.5996 18.5752C17.3165 18.5751 17.0836 18.483 16.9004 18.2998L14 15.4004L11.0996 18.2998C10.9164 18.483 10.6835 18.5751 10.4004 18.5752C10.1171 18.5752 9.88353 18.4831 9.7002 18.2998C9.51686 18.1165 9.4248 17.8829 9.4248 17.5996C9.42489 17.3165 9.51701 17.0836 9.7002 16.9004L12.5996 14L9.7002 11.0996C9.51701 10.9164 9.42489 10.6835 9.4248 10.4004C9.4248 10.1171 9.51686 9.88353 9.7002 9.7002C9.88353 9.51686 10.1171 9.4248 10.4004 9.4248C10.6835 9.42489 10.9164 9.51701 11.0996 9.7002L14 12.5996L16.9004 9.7002C17.0836 9.51701 17.3165 9.42489 17.5996 9.4248Z\"\n          fill=\"#737272\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM14 4C12.6167 4 11.3163 4.26211 10.0996 4.78711C8.88302 5.3121 7.82476 6.02485 6.9248 6.9248C6.02485 7.82476 5.3121 8.88302 4.78711 10.0996C4.26211 11.3163 4 12.6167 4 14C4 15.3833 4.26211 16.6837 4.78711 17.9004C5.3121 19.117 6.02485 20.1752 6.9248 21.0752C7.82476 21.9751 8.88302 22.6879 10.0996 23.2129C11.3163 23.7379 12.6167 24 14 24C15.3833 24 16.6837 23.7379 17.9004 23.2129C19.117 22.6879 20.1752 21.9751 21.0752 21.0752C21.9751 20.1752 22.6879 19.117 23.2129 17.9004C23.7379 16.6837 24 15.3833 24 14C24 12.6167 23.7379 11.3163 23.2129 10.0996C22.6879 8.88302 21.9751 7.82476 21.0752 6.9248C20.1752 6.02485 19.117 5.3121 17.9004 4.78711C16.6837 4.26211 15.3833 4 14 4Z\"\n          fill=\"#737272\"\n        />\n      </svg>\n    }\n\n    @case (\"unknown\") {\n      <svg viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z\"\n          fill=\"white\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          clip-rule=\"evenodd\"\n          d=\"M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM13.9922 19C13.4422 19 12.9708 19.1962 12.5791 19.5879C12.1877 19.9795 11.9922 20.4502 11.9922 21C11.9922 21.5498 12.1877 22.0205 12.5791 22.4121C12.9708 22.8038 13.4422 23 13.9922 23C14.5421 23 15.0127 22.8037 15.4043 22.4121C15.7959 22.0205 15.9922 21.55 15.9922 21C15.9922 20.45 15.7959 19.9795 15.4043 19.5879C15.0127 19.1963 14.5421 19 13.9922 19ZM13.9922 4C13.0089 4 12.1043 4.22044 11.2793 4.66211C10.4543 5.10378 9.77552 5.72539 9.24219 6.52539C9.05897 6.80862 8.97993 7.10827 9.00488 7.4248C9.02987 7.74129 9.15853 8.00801 9.3916 8.22461C9.72483 8.52451 10.121 8.64609 10.5791 8.58789C11.0374 8.52956 11.4003 8.30814 11.667 7.9248C11.9503 7.52487 12.2881 7.22101 12.6797 7.0127C13.0713 6.80439 13.5089 6.7002 13.9922 6.7002C14.7754 6.70023 15.4049 6.91631 15.8799 7.34961C16.3549 7.78294 16.5918 8.35854 16.5918 9.0752C16.5918 9.55831 16.4545 10.0039 16.1797 10.4121C15.9047 10.8204 15.3422 11.4004 14.4922 12.1504C13.8257 12.7502 13.3507 13.3208 13.0674 13.8623C12.784 14.404 12.6416 15.0004 12.6416 15.6504C12.6417 16.0336 12.7798 16.3541 13.0547 16.6123C13.3297 16.8706 13.6587 17 14.042 17C14.4253 17 14.7543 16.8663 15.0293 16.5996C15.3042 16.333 15.4753 15.9996 15.542 15.5996C15.6087 15.1831 15.7502 14.8122 15.9668 14.4873C16.1835 14.1623 16.6002 13.7083 17.2168 13.125C18.0668 12.3084 18.6501 11.6 18.9668 11C19.2835 10.4 19.4424 9.72461 19.4424 8.97461C19.4423 7.49151 18.9379 6.29157 17.9297 5.375C16.9214 4.45837 15.6088 4.00004 13.9922 4Z\"\n          fill=\"#737272\"\n        />\n      </svg>\n    }\n  }\n</div>\n", styles: [".rte-avatar-status{display:flex;position:absolute;bottom:0;right:0;border-radius:50%}\n"] }]
+        }] });
+
+class AvatarComponent {
+    constructor() {
+        this.size = input(32);
+        this.type = input("user");
+        this.imgSrc = input();
+        this.alt = input("Avatar");
+        this.status = input();
+        this.layout = input("initials");
+        this.initials = input();
+        this.colorType = input("neutral");
+        this.decorativeColor = input();
+        this.isInteractive = input(false);
+        this.avatarClick = output();
+        this.backgroundColor = computed(() => {
+            return computeBackgroundColor(this.layout(), this.colorType(), this.decorativeColor());
+        });
+        this.maskImage = computed(() => {
+            return computeMaskImage(this.size(), !!this.status());
+        });
+        this.iconSize = computed(() => {
+            return IconSizeMap[this.size()] || IconSizeMap[32];
+        });
+        this.statusIndicatorSize = computed(() => {
+            return StatusIndicatorSizeMap[this.size()] || StatusIndicatorSizeMap[32];
+        });
+        this.isValidAvatar = computed(() => {
+            return ((this.layout() === "initials" && !!this.initials() && this.initials().length <= 2) ||
+                (this.layout() === "image" && this.imgSrc()) ||
+                this.layout() === "icon");
+        });
+    }
+    handleClick(e) {
+        if (this.isInteractive()) {
+            this.avatarClick.emit(e);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "rte-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, colorType: { classPropertyName: "colorType", publicName: "colorType", isSignal: true, isRequired: false, transformFunction: null }, decorativeColor: { classPropertyName: "decorativeColor", publicName: "decorativeColor", isSignal: true, isRequired: false, transformFunction: null }, isInteractive: { classPropertyName: "isInteractive", publicName: "isInteractive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { avatarClick: "avatarClick" }, ngImport: i0, template: "@if (isInteractive()) {\n  <button\n    class=\"rte-avatar__button rte-avatar__container\"\n    aria-label=\"Avatar button\"\n    [attr.data-avatar-type]=\"type()\"\n    (click)=\"handleClick($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"baseAvatar\"></ng-container>\n  </button>\n} @else {\n  <div class=\"rte-avatar__container\">\n    <ng-container *ngTemplateOutlet=\"baseAvatar\"></ng-container>\n  </div>\n}\n\n<ng-template #baseAvatar>\n  <div *ngIf=\"isValidAvatar()\" [style.width]=\"size() + 'px'\" [style.height]=\"size() + 'px'\">\n    <div\n      class=\"rte-avatar\"\n      [attr.data-size]=\"size()\"\n      [attr.data-avatar-type]=\"type()\"\n      [attr.data-color]=\"colorType()\"\n      [style.background-color]=\"backgroundColor()\"\n      [style.maskImage]=\"maskImage()\"\n    >\n      @if (layout() === \"initials\") {\n        <span class=\"rte-avatar__initials\" [attr.data-size]=\"size()\">{{ initials() }}</span>\n      }\n      @if (layout() === \"icon\") {\n        <rte-icon [name]=\"type() === 'user' ? 'user' : 'company'\" [size]=\"iconSize()\"></rte-icon>\n      }\n      @if (layout() === \"image\") {\n        <img class=\"rte-avatar__image\" [src]=\"imgSrc()\" [alt]=\"alt()\" />\n      }\n    </div>\n    @if (status()) {\n      <rte-status [status]=\"status()\" [size]=\"statusIndicatorSize()\"></rte-status>\n    }\n  </div>\n</ng-template>\n", styles: [".rte-avatar__button{background:none;border:none;padding:0;cursor:pointer;border-radius:999px}.rte-avatar__button[data-avatar-type=entity]{border-radius:0}.rte-avatar__button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:4px}.rte-avatar__container{position:relative;display:block}.rte-avatar{position:relative;width:100%;height:100%;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--content-tertiary)}.rte-avatar[data-color=decorative]{color:var(--content-secondary)}.rte-avatar[data-avatar-type=entity]{border-radius:4px}.rte-avatar[data-avatar-type=entity][data-size=\"48\"],.rte-avatar[data-avatar-type=entity][data-size=\"56\"],.rte-avatar[data-avatar-type=entity][data-size=\"64\"],.rte-avatar[data-avatar-type=entity][data-size=\"72\"]{border-radius:8px}.rte-avatar[data-avatar-type=entity][data-size=\"96\"],.rte-avatar[data-avatar-type=entity][data-size=\"120\"]{border-radius:12px}.rte-avatar[data-color=brand]{background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.rte-avatar .rte-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.rte-avatar .rte-avatar__initials{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0px}.rte-avatar .rte-avatar__initials[data-size=\"24\"]{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}.rte-avatar .rte-avatar__initials[data-size=\"36\"],.rte-avatar .rte-avatar__initials[data-size=\"40\"]{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}.rte-avatar .rte-avatar__initials[data-size=\"48\"]{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-avatar .rte-avatar__initials[data-size=\"56\"]{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-avatar .rte-avatar__initials[data-size=\"64\"],.rte-avatar .rte-avatar__initials[data-size=\"72\"]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:32px;line-height:40px;letter-spacing:-1px}.rte-avatar .rte-avatar__initials[data-size=\"96\"]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:40px;line-height:48px;letter-spacing:-1px}.rte-avatar .rte-avatar__initials[data-size=\"120\"]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:48px;line-height:56px;letter-spacing:-1px}.rte-avatar__status-indicator{position:absolute;bottom:0;right:0;border-radius:50%;z-index:0}\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: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: StatusComponent, selector: "rte-status", inputs: ["status", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-avatar", imports: [CommonModule, IconComponent, StatusComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isInteractive()) {\n  <button\n    class=\"rte-avatar__button rte-avatar__container\"\n    aria-label=\"Avatar button\"\n    [attr.data-avatar-type]=\"type()\"\n    (click)=\"handleClick($event)\"\n  >\n    <ng-container *ngTemplateOutlet=\"baseAvatar\"></ng-container>\n  </button>\n} @else {\n  <div class=\"rte-avatar__container\">\n    <ng-container *ngTemplateOutlet=\"baseAvatar\"></ng-container>\n  </div>\n}\n\n<ng-template #baseAvatar>\n  <div *ngIf=\"isValidAvatar()\" [style.width]=\"size() + 'px'\" [style.height]=\"size() + 'px'\">\n    <div\n      class=\"rte-avatar\"\n      [attr.data-size]=\"size()\"\n      [attr.data-avatar-type]=\"type()\"\n      [attr.data-color]=\"colorType()\"\n      [style.background-color]=\"backgroundColor()\"\n      [style.maskImage]=\"maskImage()\"\n    >\n      @if (layout() === \"initials\") {\n        <span class=\"rte-avatar__initials\" [attr.data-size]=\"size()\">{{ initials() }}</span>\n      }\n      @if (layout() === \"icon\") {\n        <rte-icon [name]=\"type() === 'user' ? 'user' : 'company'\" [size]=\"iconSize()\"></rte-icon>\n      }\n      @if (layout() === \"image\") {\n        <img class=\"rte-avatar__image\" [src]=\"imgSrc()\" [alt]=\"alt()\" />\n      }\n    </div>\n    @if (status()) {\n      <rte-status [status]=\"status()\" [size]=\"statusIndicatorSize()\"></rte-status>\n    }\n  </div>\n</ng-template>\n", styles: [".rte-avatar__button{background:none;border:none;padding:0;cursor:pointer;border-radius:999px}.rte-avatar__button[data-avatar-type=entity]{border-radius:0}.rte-avatar__button:focus-visible{outline:2px solid var(--border-brand-focused);outline-offset:4px}.rte-avatar__container{position:relative;display:block}.rte-avatar{position:relative;width:100%;height:100%;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--content-tertiary)}.rte-avatar[data-color=decorative]{color:var(--content-secondary)}.rte-avatar[data-avatar-type=entity]{border-radius:4px}.rte-avatar[data-avatar-type=entity][data-size=\"48\"],.rte-avatar[data-avatar-type=entity][data-size=\"56\"],.rte-avatar[data-avatar-type=entity][data-size=\"64\"],.rte-avatar[data-avatar-type=entity][data-size=\"72\"]{border-radius:8px}.rte-avatar[data-avatar-type=entity][data-size=\"96\"],.rte-avatar[data-avatar-type=entity][data-size=\"120\"]{border-radius:12px}.rte-avatar[data-color=brand]{background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.rte-avatar .rte-avatar__image{width:100%;height:100%;object-fit:cover;border-radius:inherit}.rte-avatar .rte-avatar__initials{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0px}.rte-avatar .rte-avatar__initials[data-size=\"24\"]{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}.rte-avatar .rte-avatar__initials[data-size=\"36\"],.rte-avatar .rte-avatar__initials[data-size=\"40\"]{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}.rte-avatar .rte-avatar__initials[data-size=\"48\"]{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-avatar .rte-avatar__initials[data-size=\"56\"]{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-avatar .rte-avatar__initials[data-size=\"64\"],.rte-avatar .rte-avatar__initials[data-size=\"72\"]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:32px;line-height:40px;letter-spacing:-1px}.rte-avatar .rte-avatar__initials[data-size=\"96\"]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:40px;line-height:48px;letter-spacing:-1px}.rte-avatar .rte-avatar__initials[data-size=\"120\"]{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:48px;line-height:56px;letter-spacing:-1px}.rte-avatar__status-indicator{position:absolute;bottom:0;right:0;border-radius:50%;z-index:0}\n"] }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeDirective, BannerComponent, BaseSideNavComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, DropdownDirective, DropdownItemComponent, DropdownMenuComponent, DropdownMenuFooterDirective, DropdownMenuHeaderDirective, DropdownModule, DropdownTriggerDirective, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, StepperComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective };
+export { AccordionComponent, AvatarComponent, BadgeDirective, BannerComponent, BaseSideNavComponent, BreadcrumbsComponent, ButtonComponent, CardComponent, CheckboxComponent, CheckboxGroupComponent, ChipComponent, ColDirective, DividerComponent, DrawerComponent, DrawerDirective, DrawerModule, DrawerTriggerDirective, DropdownDirective, DropdownItemComponent, DropdownMenuComponent, DropdownMenuFooterDirective, DropdownMenuHeaderDirective, DropdownModule, DropdownTriggerDirective, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, LoaderComponent, ModalDirective, ModalModule, ModalTriggerDirective, PopoverDirective, RadioButtonComponent, RadioButtonGroupComponent, SearchbarComponent, SegmentedControlComponent, SelectComponent, SideNavComponent, SplitButtonComponent, StepperComponent, SwitchComponent, TabComponent, TagComponent, TextInputComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TreeviewComponent, TreeviewItemComponent, TreeviewSelectionService };
 //# sourceMappingURL=design-system-rte-angular.mjs.map