@design-system-rte/angular 0.5.1 → 0.5.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, ChangeDetectionStrategy, Component, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, computed } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, Component, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, computed, ElementRef, ViewContainerRef, Renderer2, HostListener, signal } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -7,6 +7,9 @@ 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 } from '@design-system-rte/core/components/utils/auto-placement';
+import { splitButtonLeftIconSize, splitButtonRightIconSize } from '@design-system-rte/core/components/split-button/split-button.constants';
+import { buttonIconSize } from '@design-system-rte/core/components/button/common/common-button.constants';
 
 class ButtonComponent {
     constructor() {
@@ -575,9 +578,254 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div  \n  *ngIf=\"isDisplayed()\"\n  class=\"checkbox-group-container\">\n  <div\n    class=\"checkbox-group-header\"\n    [ngClass]=\"{\n        'disabled': disabled(),\n        'error': error(),\n        'read-only': readOnly(),\n    }\">\n    <h3\n        *ngIf=\"showGroupTitle()\"\n        class=\"group-title\"\n        >\n        {{ groupTitle() }}\n    </h3>\n    <p\n        *ngIf=\"showHelpText()\"\n        class=\"group-help-text\"\n        >\n        {{ groupHelpText() }}\n\n    </p>\n    <p\n        *ngIf=\"error()\"\n        class=\"group-error-message\"\n        >\n        {{ errorMessage() }}\n    </p>\n  </div>\n  <div class=\"checkbox-group\" \n    [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n    <ng-container \n    *ngFor=\"let item of items(); let i = index\">\n      <rte-checkbox\n      [id]=\"item + '-' + i\"\n      [label]=\"item\"\n      [groupName]=\"groupName()\"\n      [showLabel]=\"showItemsLabel()\"\n      [disabled]=\"disabled()\"\n      [error]=\"error()\"\n      [readOnly]=\"readOnly()\"\n      />\n    </ng-container>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.checkbox-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.checkbox-group-container .checkbox-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.checkbox-group-container .checkbox-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.checkbox-group-container .checkbox-group-header.error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.read-only .group-title{color:var(--content-tertiary)}.checkbox-group-container .checkbox-group-header.read-only .error .group-title{color:var(--content-danger)}.checkbox-group-container .checkbox-group-header.disabled{pointer-events:none}.checkbox-group-container .checkbox-group-header.disabled .group-title,.checkbox-group-container .checkbox-group-header.disabled .group-help-text{color:var(--content-disabled)}.checkbox-group-container .checkbox-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.checkbox-group-container .checkbox-group.vertical{flex-direction:column;gap:8px}\n"] }]
         }] });
 
+class TooltipComponent {
+    constructor() {
+        this.label = input.required();
+        this.position = input("auto");
+        this.alignment = input("center");
+        this.arrow = input(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TooltipComponent, isStandalone: true, selector: "rte-tooltip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n    class=\"tooltip {{position()}} {{alignment()}}\"\n    role=\"tooltip\"\n    [ngClass]=\"{'arrow': arrow()}\"\n>\n    <span class=\"tooltip-label\"> {{label()}} </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{position:absolute;max-width:160px;max-height:40px;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-primary-inverse);position:absolute;text-align:center;z-index:1;max-width:160px;max-height:40px;width:fit-content;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip.top{transform:translate(-50%)}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom{transform:translate(-50%)}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{transform:translateY(-50%)}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right{transform:translateY(-50%)}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-tooltip", imports: [CommonModule], standalone: true, template: "<div\n    class=\"tooltip {{position()}} {{alignment()}}\"\n    role=\"tooltip\"\n    [ngClass]=\"{'arrow': arrow()}\"\n>\n    <span class=\"tooltip-label\"> {{label()}} </span>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";:host{position:absolute;max-width:160px;max-height:40px;transition:opacity .15s ease-out}:host:not(:hover){transition:opacity .1s ease-in}.tooltip{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-primary-inverse);position:absolute;text-align:center;z-index:1;max-width:160px;max-height:40px;width:fit-content;padding-block:4px;padding-inline:16px;border-radius:4px;background:var(--background-inverse)}.tooltip.top{transform:translate(-50%)}.tooltip.top:after{top:100%;left:50%;margin-left:-5px;border-color:var(--background-inverse) transparent transparent transparent}.tooltip.top.start:after{left:25%}.tooltip.top.end:after{left:75%}.tooltip.bottom{transform:translate(-50%)}.tooltip.bottom:after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent var(--background-inverse) transparent}.tooltip.bottom.start:after{left:25%}.tooltip.bottom.end:after{left:75%}.tooltip.left{transform:translateY(-50%)}.tooltip.left:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent var(--background-inverse)}.tooltip.left.start:after{top:25%}.tooltip.left.end:after{top:75%}.tooltip.right{transform:translateY(-50%)}.tooltip.right:after{top:50%;right:100%;margin-top:-5px;border-color:transparent var(--background-inverse) transparent transparent}.tooltip.right.start:after{top:25%}.tooltip.right.end:after{top:75%}.tooltip.arrow:after{content:\"\";position:absolute;border-width:5px;border-style:solid}\n"] }]
+        }] });
+
+const TOOLTIP_GAP = 8;
+class TooltipDirective {
+    onMouseEnter() {
+        this.showTooltip();
+    }
+    onMouseLeave() {
+        this.hideTooltip();
+    }
+    onFocus() {
+        this.showTooltip();
+    }
+    onBlur() {
+        this.hideTooltip();
+    }
+    constructor() {
+        this.rteTooltip = input.required();
+        this.rteTooltipPosition = input("auto");
+        this.rteTooltipAlignment = input("center");
+        this.rteTooltipArrow = input(true);
+        this.tooltipRef = null;
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.cdr = inject(ChangeDetectorRef);
+        this.hostElement = this.elementRef.nativeElement;
+        this.hostElement.setAttribute("tabindex", "0");
+    }
+    showTooltip() {
+        if (this.tooltipRef) {
+            this.tooltipRef.destroy();
+        }
+        this.tooltipRef = this.viewContainerRef.createComponent(TooltipComponent);
+        this.assignDirectiveToComponent();
+        this.appendComponentToHost();
+        this.cdr.detectChanges();
+        if (this.tooltipRef) {
+            const tooltipElement = this.tooltipRef.location.nativeElement;
+            this.renderer.setStyle(tooltipElement, "opacity", "0");
+            this.positionTooltip();
+            this.renderer.setStyle(tooltipElement, "opacity", "1");
+        }
+    }
+    assignDirectiveToComponent() {
+        if (this.tooltipRef) {
+            const tooltipElement = this.tooltipRef.location.nativeElement;
+            const position = this.rteTooltipPosition() === "auto"
+                ? getAutoPlacement(this.hostElement, tooltipElement, "top")
+                : this.rteTooltipPosition();
+            this.tooltipRef.setInput("label", this.rteTooltip());
+            this.tooltipRef.setInput("position", position);
+            this.tooltipRef.setInput("alignment", this.rteTooltipAlignment());
+            this.tooltipRef.setInput("arrow", this.rteTooltipArrow());
+        }
+    }
+    appendComponentToHost() {
+        if (this.tooltipRef) {
+            this.renderer.appendChild(this.elementRef.nativeElement, this.tooltipRef.location.nativeElement);
+        }
+    }
+    positionTooltip() {
+        if (this.tooltipRef) {
+            const tooltipElement = this.tooltipRef.location.nativeElement;
+            const bounds = this.getTooltipPosition(this.hostElement, this.tooltipRef);
+            this.renderer.setStyle(this.hostElement, "position", "relative");
+            this.renderer.setStyle(tooltipElement, bounds.x.position, `${bounds.x.offset}px`);
+            this.renderer.setStyle(tooltipElement, bounds.y.position, `${bounds.y.offset}px`);
+        }
+    }
+    getTooltipPosition(host, tooltip) {
+        return {
+            x: this.getTooltipXBound(host, tooltip),
+            y: this.getTooltipYBound(host, tooltip),
+        };
+    }
+    getTooltipXBound(host, tooltip) {
+        return {
+            position: tooltip.instance.position() === "right" ? "right" : "left",
+            offset: this.getTooltipXOffset(host, tooltip),
+        };
+    }
+    getTooltipXOffset(host, tooltip) {
+        const hostRect = host.getBoundingClientRect();
+        if (tooltip.instance.position() === "left") {
+            return -tooltip.location.nativeElement.querySelector(".tooltip").offsetWidth - TOOLTIP_GAP;
+        }
+        if (tooltip.instance.position() === "right") {
+            return -TOOLTIP_GAP;
+        }
+        return hostRect.width / 2;
+    }
+    getTooltipYBound(host, tooltip) {
+        return {
+            position: tooltip.instance.position() === "bottom" ? "bottom" : "top",
+            offset: this.getTooltipYOffset(host, tooltip),
+        };
+    }
+    getTooltipYOffset(host, tooltip) {
+        const hostRect = host.getBoundingClientRect();
+        if (tooltip.instance.position() === "top") {
+            return -tooltip.location.nativeElement.querySelector(".tooltip").offsetHeight - TOOLTIP_GAP;
+        }
+        if (tooltip.instance.position() === "bottom") {
+            return -TOOLTIP_GAP;
+        }
+        return hostRect.height / 2;
+    }
+    hideTooltip() {
+        if (this.tooltipRef) {
+            const tooltipElement = this.tooltipRef.location.nativeElement;
+            this.renderer.setStyle(tooltipElement, "opacity", "0");
+            setTimeout(() => {
+                if (this.tooltipRef) {
+                    this.tooltipRef.destroy();
+                    this.tooltipRef = null;
+                }
+            }, 200);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: TooltipDirective, isStandalone: true, selector: "[rteTooltip]", inputs: { rteTooltip: { classPropertyName: "rteTooltip", publicName: "rteTooltip", isSignal: true, isRequired: true, transformFunction: null }, rteTooltipPosition: { classPropertyName: "rteTooltipPosition", publicName: "rteTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipAlignment: { classPropertyName: "rteTooltipAlignment", publicName: "rteTooltipAlignment", isSignal: true, isRequired: false, transformFunction: null }, rteTooltipArrow: { classPropertyName: "rteTooltipArrow", publicName: "rteTooltipArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[rteTooltip]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter"]
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave"]
+            }], onFocus: [{
+                type: HostListener,
+                args: ["focus"]
+            }], onBlur: [{
+                type: HostListener,
+                args: ["blur"]
+            }] } });
+
+class SplitButtonComponent {
+    constructor() {
+        this.appearance = input("primary");
+        this.size = input("m");
+        this.label = input.required();
+        this.compactSpacing = input(false);
+        this.selected = input(false);
+        this.position = input("bottom-start");
+        this.icon = input();
+        this.disabled = input(false);
+        this.ariaLabelRight = input();
+        this.splitButtonLeftIconSize = computed(() => splitButtonLeftIconSize[this.size()]);
+        this.splitButtonRightIconSize = computed(() => splitButtonRightIconSize[this.size()]);
+        this.isOpen = signal(false);
+    }
+    handleKeyDownOnRightButton(event) {
+        this.handleKeyDown(event, "ArrowDown", () => this.isOpen.set(true));
+        this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
+    }
+    handleKeyDownOnMenu(event) {
+        this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
+    }
+    handleKeyDown(event, key, callback) {
+        if (event.key === key) {
+            event.preventDefault();
+            callback();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SplitButtonComponent, isStandalone: true, selector: "rte-split-button", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelRight: { classPropertyName: "ariaLabelRight", publicName: "ariaLabelRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div \n  class=\"split-button-container size-{{ size() }} {{appearance()}}\"\n  [ngClass]=\"{'compact-spacing': compactSpacing()}\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\" \n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon \n      *ngIf=\"icon()\"\n      [name]=\"icon()!\"\n      [size]=\"splitButtonLeftIconSize()\"\n    />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{label()}}\n    </p>\n  </button>\n\n  <div \n    class=\"split-button-divider\"\n    [ngClass]=\"{'disabled': disabled()}\"\n  ></div>\n\n  <div class=\"split-button-right-container\">\n    <button\n      class=\"split-button-right size-{{ size() }}\"\n      data-testid=\"Menu button\"\n      type=\"button\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"ariaLabelRight()\"\n      [attr.data-selected]=\"selected()\"\n      [disabled]=\"disabled()\"\n      (click)=\"isOpen.set(true)\"\n      (mouseenter)=\"isOpen.set(true)\"\n      (mouseleave)=\"isOpen.set(false)\"\n      (keydown)=\"handleKeyDownOnRightButton($event)\"\n    >\n      <div class=\"split-button-right-icon-container\">\n        <rte-icon name=\"arrow-chevron-down\"[size]=\"splitButtonRightIconSize()\"/>\n      </div>\n    </button>\n\n    <div\n      class=\"split-button-dropdown position-{{ position() }}\"\n      role=\"menu\"\n      data-testid=\"Menu container\"\n      [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n      (keydown)=\"handleKeyDownOnMenu($event)\"\n    >\n      <ng-content/>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left{display:flex;border:none;padding:0 8px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container.size-s{width:24px}.split-button-container .split-button-right-container.size-m{width:34px}.split-button-container .split-button-right-container.size-l{width:44px}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:6px 16px;align-items:center;justify-content:center;align-self:stretch;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right-container .split-button-right .split-button-right-icon-container{pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-split-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"split-button-container size-{{ size() }} {{appearance()}}\"\n  [ngClass]=\"{'compact-spacing': compactSpacing()}\"\n>\n  <button\n    class=\"split-button-left size-{{ size() }}\"\n    data-testid=\"Main action button\" \n    type=\"button\"\n    [disabled]=\"disabled()\"\n  >\n    <rte-icon \n      *ngIf=\"icon()\"\n      [name]=\"icon()!\"\n      [size]=\"splitButtonLeftIconSize()\"\n    />\n    <p class=\"split-button-label size-{{ size() }}\">\n      {{label()}}\n    </p>\n  </button>\n\n  <div \n    class=\"split-button-divider\"\n    [ngClass]=\"{'disabled': disabled()}\"\n  ></div>\n\n  <div class=\"split-button-right-container\">\n    <button\n      class=\"split-button-right size-{{ size() }}\"\n      data-testid=\"Menu button\"\n      type=\"button\"\n      aria-haspopup=\"menu\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-label]=\"ariaLabelRight()\"\n      [attr.data-selected]=\"selected()\"\n      [disabled]=\"disabled()\"\n      (click)=\"isOpen.set(true)\"\n      (mouseenter)=\"isOpen.set(true)\"\n      (mouseleave)=\"isOpen.set(false)\"\n      (keydown)=\"handleKeyDownOnRightButton($event)\"\n    >\n      <div class=\"split-button-right-icon-container\">\n        <rte-icon name=\"arrow-chevron-down\"[size]=\"splitButtonRightIconSize()\"/>\n      </div>\n    </button>\n\n    <div\n      class=\"split-button-dropdown position-{{ position() }}\"\n      role=\"menu\"\n      data-testid=\"Menu container\"\n      [style.visibility]=\"isOpen() ? 'visible' : 'hidden'\"\n      (keydown)=\"handleKeyDownOnMenu($event)\"\n    >\n      <ng-content/>\n    </div>\n  </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.split-button-container{display:inline-flex;padding:0;align-items:center;gap:0px;align-self:stretch}.split-button-container.size-s{height:24px}.split-button-container.size-s.compact-spacing{height:20px}.split-button-container.size-m{height:32px}.split-button-container.size-m.compact-spacing{height:24px}.split-button-container.size-l{height:40px}.split-button-container.size-l.compact-spacing{height:28px}.split-button-container.secondary .split-button-left{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-left:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-left:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container.secondary .split-button-divider{background-color:var(--border-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right{border-top:1px solid var(--border-brand-default);border-bottom:1px solid var(--border-brand-default);border-right:1px solid var(--border-brand-default);background-color:var(--background-default);color:var(--content-brand-default)}.split-button-container.secondary .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-inverse-hover)}.split-button-container.secondary .split-button-right-container .split-button-right:active{background-color:var(--background-brand-inverse-pressed)}.split-button-container.secondary .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left{display:flex;border:none;padding:0 8px;align-items:center;gap:0px;align-self:stretch;border-radius:4px 0 0 4px;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-left .split-button-label{margin:0}.split-button-container .split-button-left .split-button-label.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:14px;line-height:20px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px}.split-button-container .split-button-left .split-button-label.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px}.split-button-container .split-button-left:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-left:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-left:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-left:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-left:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-left:focus:after{content:\"\";position:absolute;inset:-8px -1px -8px -8px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-divider{width:1px;height:100%;background-color:var(--content-primary-inverse)}.split-button-container .split-button-divider.disabled{background-color:var(--border-disabled)}.split-button-container .split-button-right-container{display:flex;position:relative;padding:0;align-items:center;justify-content:center;gap:0px;align-self:stretch}.split-button-container .split-button-right-container.size-s{width:24px}.split-button-container .split-button-right-container.size-m{width:34px}.split-button-container .split-button-right-container.size-l{width:44px}.split-button-container .split-button-right-container .split-button-right{display:flex;border:none;padding:6px 16px;align-items:center;justify-content:center;align-self:stretch;border-radius:0 4px 4px 0;border-color:var(--border-brand-default);background-color:var(--background-brand-default);color:var(--content-primary-inverse)}.split-button-container .split-button-right-container .split-button-right:hover{cursor:pointer;background-color:var(--background-brand-hover)}.split-button-container .split-button-right-container .split-button-right:active{background-color:var(--background-brand-pressed)}.split-button-container .split-button-right-container .split-button-right:disabled{background-color:var(--background-disabled);color:var(--content-disabled);border-top:1px solid var(--border-disabled);border-bottom:1px solid var(--border-disabled);border-right:1px solid var(--border-disabled);cursor:not-allowed}.split-button-container .split-button-right-container .split-button-right:focus{outline:none;position:relative;z-index:1}.split-button-container .split-button-right-container .split-button-right:focus:after{content:\"\";position:absolute;inset:-8px -8px -8px -1px;border:1px solid var(--border-brand-focused);pointer-events:none;border-radius:4px;z-index:2}.split-button-container .split-button-right-container .split-button-right .split-button-right-icon-container{pointer-events:none}.split-button-container .split-button-right-container .split-button-dropdown{position:absolute}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-start{top:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-bottom-end{top:100%;right:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-start{bottom:100%;left:0}.split-button-container .split-button-right-container .split-button-dropdown.position-top-end{bottom:100%;right:0}.animation-slide-from-top{animation:slide-from-top .2s ease-in-out}@keyframes slide-from-top{0%{transform:translateY(-10px);pointer-events:none;opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
+        }] });
+
+class IconButtonComponent {
+    constructor() {
+        this.disabled = input(false);
+        this.name = input.required();
+        this.size = input("m");
+        this.variant = input("primary");
+        this.type = input("button");
+        this.appearance = input("outlined");
+        this.compactSpacing = input(false);
+        this.ariaLabel = input(undefined);
+        this.ariaLabelledBy = input(undefined);
+        this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
+        this.isValidIconName = computed(() => isValidIconName(this.name()));
+        this.click = output();
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.click.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconButtonComponent, isStandalone: true, selector: "rte-icon-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n  *ngIf=\"isValidIconName\"\n  class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n  [class.compact-spacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  (click)=\"onClick($event)\"\n>\n  <rte-icon\n    [name]=\"name()\"\n    [appearance]=\"appearance()\"\n    [size]=\"buttonIconSize()\"\n  />\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-icon-button{display:inline-flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative}.rte-icon-button:focus-visible:after{content:\"\";position:absolute;inset:-4px;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px var(--border-brand-focused)}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default);color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-press)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-icon-button", imports: [CommonModule, IconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"isValidIconName\"\n  class=\"rte-icon-button {{ variant() }} size-{{ size() }}\"\n  [class.compact-spacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-labelledby]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  (click)=\"onClick($event)\"\n>\n  <rte-icon\n    [name]=\"name()\"\n    [appearance]=\"appearance()\"\n    [size]=\"buttonIconSize()\"\n  />\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-icon-button{display:inline-flex;cursor:pointer;height:24px;align-items:center;gap:0px;flex-shrink:0}.rte-icon-button:focus-visible{outline:none;position:relative}.rte-icon-button:focus-visible:after{content:\"\";position:absolute;inset:-4px;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px var(--border-brand-focused)}.rte-icon-button.size-s{border-radius:4px;height:24px;padding:2px 4px}.rte-icon-button.size-s.compact-spacing{height:16px}.rte-icon-button.size-m{border-radius:4px;height:32px;padding:4px 6px}.rte-icon-button.size-m.compact-spacing{height:20px}.rte-icon-button.size-l{border-radius:8px;height:40px;padding:6px 8px}.rte-icon-button.size-l.compact-spacing{height:24px}.rte-icon-button.primary{background:var(--background-brand-default);border:var(--border-brand-default);color:var(--content-primary-inverse)}.rte-icon-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-icon-button.primary:active{background:var(--background-brand-pressed)}.rte-icon-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);box-shadow:none;color:var(--content-disabled);cursor:default}.rte-icon-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-icon-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-icon-button.secondary:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-icon-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-icon-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-icon-button.transparent:hover{color:var(--content-brand-hover)}.rte-icon-button.transparent:active{color:var(--content-brand-press)}.rte-icon-button.transparent:disabled{box-shadow:none;background-color:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse)}.rte-icon-button.danger:hover{background:var(--background-danger-hover)}.rte-icon-button.danger:active{background:var(--background-danger-pressed)}.rte-icon-button.danger:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-icon-button.compact-spacing{padding:0}\n"] }]
+        }] });
+
+class IconButtonToggleComponent {
+    constructor() {
+        this.disabled = input(false);
+        this.name = input.required();
+        this.size = input("m");
+        this.variant = input("primary");
+        this.type = input("button");
+        this.compactSpacing = input(false);
+        this.ariaLabel = input(undefined);
+        this.ariaLabelledBy = input(undefined);
+        this.selected = input(false);
+        this.click = output();
+        this.buttonIconSize = computed(() => buttonIconSize[this.size()]);
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.click.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: IconButtonToggleComponent, isStandalone: true, selector: "rte-icon-button-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, compactSpacing: { classPropertyName: "compactSpacing", publicName: "compactSpacing", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<rte-icon-button \n  [size]=\"size()\" \n  [name]=\"name()\" \n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"selected() ? 'filled' : 'outlined'\"\n  (click)=\"onClick($event)\"\n/>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconButtonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button \n  [size]=\"size()\" \n  [name]=\"name()\" \n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"selected() ? 'filled' : 'outlined'\"\n  (click)=\"onClick($event)\"\n/>" }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ColDirective, GridDirective, IconComponent, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent };
+export { ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ColDirective, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent, SplitButtonComponent, TooltipDirective };
 //# sourceMappingURL=design-system-rte-angular.mjs.map