@design-system-rte/angular 0.2.0 → 0.2.2

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

@@ -1,15 +1,22 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, HostBinding, Directive, computed } from '@angular/core';
+import { input, output, Component, HostBinding, Directive, inject, Injectable, DestroyRef, ChangeDetectorRef, effect, ChangeDetectionStrategy, computed } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DomSanitizer } from '@angular/platform-browser';
+import { HttpClient } from '@angular/common/http';
 import { labelSize } from '@design-system-rte/core/components/radio-button/radio-button.constants';
 
 class ButtonComponent {
     constructor() {
-        this.label = input('');
-        this.variant = input('filled');
-        this.size = input('m');
+        this.label = input("");
+        this.variant = input("primary");
+        this.size = input("m");
         this.disabled = input(false);
+        this.icon = input("");
+        this.ariaLabel = input("");
+        this.ariaLabelledBy = input("");
+        this.buttonType = input("button");
         this.click = output();
     }
     onClick(event) {
@@ -17,23 +24,23 @@ class ButtonComponent {
         this.click.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.filled{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.filled:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.filled:active{background:var(--background-brand-pressed)}.rte-button.filled:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.outlined{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.outlined:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.outlined:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.outlined:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: ButtonComponent, isStandalone: true, selector: "rte-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.secondary:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rte-button', standalone: true, imports: [], template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.filled{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.filled:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.filled:active{background:var(--background-brand-pressed)}.rte-button.filled:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.outlined{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.outlined:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.outlined:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.outlined:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }]
+            args: [{ selector: "rte-button", imports: [], standalone: true, template: "<button\n    class=\"rte-button {{ variant() }} size-{{ size() }}\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.type]=\"buttonType()\"\n    [disabled]=\"disabled()\"\n    (click)=\"onClick($event)\"\n>\n    <span class=\"rte-button-label\">{{ label() }}</span>\n</button>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-button{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center}.rte-button:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-button.size-s{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-size:14px;letter-spacing:-.5px;font-weight:600;line-height:20px;height:24px;border-radius:4px;padding:4px 8px}.rte-button.size-s .rte-button-label{margin:0 4px}.rte-button.size-m{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:16px;line-height:24px;letter-spacing:-.5px;height:32px;border-radius:4px;padding:4px 12px}.rte-button.size-m .rte-button-label{margin:0 6px}.rte-button.size-l{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;height:40px;border-radius:8px;padding:4px 16px}.rte-button.size-l .rte-button-label{margin:0 8px}.rte-button.primary{border:var(--border-brand-default);color:var(--content-primary-inverse);background:var(--background-brand-default)}.rte-button.primary:hover{background:var(--background-brand-hover);border:var(--background-brand-hover)}.rte-button.primary:active{background:var(--background-brand-pressed)}.rte-button.primary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.secondary{background:var(--background-default);border:solid 1px var(--border-brand-default);color:var(--content-brand-default)}.rte-button.secondary:hover{background:var(--background-brand-inverse-hover);border:solid 1px var(--border-brand-default)}.rte-button.secondary:active{border:var(--background-brand-inverse);background:var(--background-brand-inverse-pressed)}.rte-button.secondary:disabled{background:var(--background-disabled);border:solid 1px var(--border-disabled);color:var(--content-disabled);cursor:default}.rte-button.text{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.text:hover{background:var(--background-brand-inverse-hover)}.rte-button.text:active{background:var(--background-brand-inverse-pressed)}.rte-button.text:disabled{background:var(--background-disabled);color:var(--content-disabled);cursor:default}.rte-button.transparent{background:transparent;border:none;color:var(--content-brand-default)}.rte-button.transparent:hover{color:var(--content-brand-hover)}.rte-button.transparent:active{color:var(--content-brand-pressed)}.rte-button.transparent:disabled{color:var(--content-disabled);box-shadow:none;cursor:default}.rte-button.danger{background:var(--background-danger-default);border:none;color:var(--content-primary-inverse);border-radius:8px}.rte-button.danger:hover{background:var(--background-danger-hover)}.rte-button.danger:active{background:var(--background-danger-pressed)}.rte-button.danger:disabled{background:var(--background-disabled);border:var(--border-disabled);color:var(--content-disabled);box-shadow:none;cursor:default}\n"] }]
         }] });
 
 class GridDirective {
     get hostClasses() {
-        return 'grid';
+        return "grid";
     }
     get hostDataClasses() {
         const variation = this.gridType();
         return `${variation}`;
     }
     constructor() {
-        this.gridType = input('fluid');
+        this.gridType = input("fluid");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: GridDirective, isStandalone: true, selector: "[rte-grid]", inputs: { gridType: { classPropertyName: "gridType", publicName: "gridType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.data-gridtype": "this.hostDataClasses" } }, ngImport: i0 }); }
@@ -41,8 +48,8 @@ class GridDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rte-grid]',
-                    standalone: true
+                    selector: "[rte-grid]",
+                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -55,16 +62,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 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()),
+            "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(' ');
+            .join(" ");
     }
     constructor() {
         this.xxs = input();
@@ -75,7 +82,7 @@ class ColDirective {
         this.xl = input();
     }
     generateColumnClass(prefix, size) {
-        return size ? `${prefix}-${size}` : '';
+        return size ? `${prefix}-${size}` : "";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: ColDirective, isStandalone: true, selector: "[dsCol]", 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 }); }
@@ -83,33 +90,396 @@ class ColDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[dsCol]',
-                    standalone: true
+                    selector: "[dsCol]",
+                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { colClasses: [{
                 type: HostBinding,
                 args: ["class"]
             }] } });
 
+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"],
+    "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"],
+    "arrow-circle-chevron-up": ["arrow_circle_chevron_up_outlined", "arrow_circle_chevron_up_filled"],
+    "arrow-circle-down": ["arrow_circle_down_outlined", "arrow_circle_down_filled"],
+    "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"],
+    "assignment-complete": ["assignment_complete_outlined", "assignment_complete_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"],
+    "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"],
+    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-unread": ["chat_unread_outlined", "chat_unread_filled"],
+    "check-circle": ["check_circle_outlined", "check_circle_filled"],
+    checkbox: ["checkbox_outlined", "checkbox_filled"],
+    "checkbox-indeterminate": ["checkbox_indeterminate_outlined", "checkbox_indeterminate_filled"],
+    clock: ["clock_outlined", "clock_filled"],
+    "cloud-download": ["cloud_download_outlined", "cloud_download_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"],
+    "electric-meter": ["electric_meter_outlined", "electric_meter_filled"],
+    error: ["error_outlined", "error_filled"],
+    explore: ["explore_outlined", "explore_filled"],
+    "explore-off": ["explore_off_outlined", "explore_off_filled"],
+    "fast-forward": ["fast_forward_outlined", "fast_forward_filled"],
+    "fast-rewind": ["fast_rewind_outlined", "fast_rewind_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"],
+    "fit-screen": ["fit_screen_outlined", "fit_screen_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-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"],
+    "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"],
+    "image-broken": ["image_broken_outlined", "image_broken_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"],
+    "keep-off": ["keep_off_outlined", "keep_off_filled"],
+    label: ["label_outlined", "label_filled"],
+    laptop: ["laptop_outlined", "laptop_filled"],
+    "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
+    "left-panel-close": ["left_panel_close_outlined", "left_panel_close_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"],
+    "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-open": ["lock_open_outlined", "lock_open_filled"],
+    "lock-open-right": ["lock_open_right_outlined", "lock_open_right_filled"],
+    mail: ["mail_outlined", "mail_filled"],
+    "mail-unread": ["mail_unread_outlined", "mail_unread_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-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"],
+    "pause-circle": ["pause_circle_outlined", "pause_circle_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"],
+    "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"],
+    "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"],
+    "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"],
+    "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"],
+    "text-snippet": ["text_snippet_outlined", "text_snippet_filled"],
+    "trash-restore": ["trash_restore_outlined", "trash_restore_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-settings": ["user_settings_outlined", "user_settings_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"],
+    "view-agenda": ["view_agenda_outlined", "view_agenda_filled"],
+    "view-column": ["view_column_outlined", "view_column_filled"],
+    "view-grid": ["view_grid_outlined", "view_grid_filled"],
+    "view-kanban": ["view_kanban_outlined", "view_kanban_filled"],
+    "view-module": ["view_module_outlined", "view_module_filled"],
+    "view-timeline": ["view_timeline_outlined", "view_timeline_filled"],
+    "visibility-hide": ["visibility_hide_outlined", "visibility_hide_filled"],
+    "visibility-show": ["visibility_show_outlined", "visibility_show_filled"],
+    "volume-down": ["volume_down_outlined", "volume_down_filled"],
+    "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"],
+};
+const regularIcons = {
+    add: "add",
+    "alt-route": "alt_route",
+    apps: "apps",
+    "arrow-alt-down": "arrow_alt_down",
+    "arrow-alt-down-left": "arrow_alt_down_left",
+    "arrow-alt-down-right": "arrow_alt_down_right",
+    "arrow-alt-left": "arrow_alt_left",
+    "arrow-alt-right": "arrow_alt_right",
+    "arrow-alt-up": "arrow_alt_up",
+    "arrow-alt-up-left": "arrow_alt_up_left",
+    "arrow-alt-up-right": "arrow_alt_up_right",
+    "arrow-angle-down-left": "arrow_angle_down_left",
+    "arrow-angle-down-right": "arrow_angle_down_right",
+    "arrow-angle-up-left": "arrow_angle_up_left",
+    "arrow-angle-up-right": "arrow_angle_up_right",
+    "arrow-chevron-down": "arrow_chevron_down",
+    "arrow-chevron-left": "arrow_chevron_left",
+    "arrow-chevron-right": "arrow_chevron_right",
+    "arrow-chevron-up": "arrow_chevron_up",
+    "arrow-double-down": "arrow_double_down",
+    "arrow-double-left": "arrow_double_left",
+    "arrow-double-right": "arrow_double_right",
+    "arrow-double-up": "arrow_double_up",
+    "arrow-down": "arrow_down",
+    "arrow-down-left": "arrow_down_left",
+    "arrow-down-right": "arrow_down_right",
+    "arrow-drop-down": "arrow_drop_down",
+    "arrow-drop-up": "arrow_drop_up",
+    "arrow-left": "arrow_left",
+    "arrow-right": "arrow_right",
+    "arrow-up": "arrow_up",
+    "arrow-up-left": "arrow_up_left",
+    "arrow-up-right": "arrow_up_right",
+    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-off": "bluetooth_off",
+    "chart-bar": "chart_bar",
+    "chart-bar-stacked": "chart_bar_stacked",
+    check: "check",
+    "check-indeterminate": "check_indeterminate",
+    "check-small": "check_small",
+    "checkbox-empty": "checkbox_empty",
+    close: "close",
+    compare: "compare",
+    "copy-all": "copy_all",
+    "crisis-alert": "crisis_alert",
+    cut: "cut",
+    download: "download",
+    "download-done": "download_done",
+    "drag-handle": "drag_handle",
+    "drag-indicator": "drag_indicator",
+    exclamation: "exclamation",
+    "explore-travel": "explore_travel",
+    "external-link": "external_link",
+    filter: "filter",
+    "filter-off": "filter_off",
+    "first-page": "first_page",
+    forward: "forward",
+    fullscreen: "fullscreen",
+    "fullscreen-exit": "fullscreen_exit",
+    history: "history",
+    "hourglass-empty": "hourglass_empty",
+    "info-i": "info_i",
+    language: "language",
+    "last-page": "last_page",
+    link: "link",
+    "link-off": "link_off",
+    list: "list",
+    "location-disabled": "location_disabled",
+    login: "login",
+    logout: "logout",
+    menu: "menu",
+    "menu-open": "menu_open",
+    monitoring: "monitoring",
+    "more-down": "more_down",
+    "more-horiz": "more_horiz",
+    "more-up": "more_up",
+    "more-vert": "more_vert",
+    ohm: "ohm",
+    "open-in-full": "open_in_full",
+    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",
+    "question-mark": "question_mark",
+    radar: "radar",
+    "radio-button-empty": "radio_button_empty",
+    redo: "redo",
+    reload: "reload",
+    remove: "remove",
+    reply: "reply",
+    "reply-all": "reply_all",
+    route: "route",
+    search: "search",
+    "side-navigation": "side_navigation",
+    sort: "sort",
+    "support-agent": "support_agent",
+    timeline: "timeline",
+    "trending-down": "trending_down",
+    "trending-flat": "trending_flat",
+    "trending-up": "trending_up",
+    tune: "tune",
+    undo: "undo",
+    upload: "upload",
+    water: "water",
+    "water-alt": "water_alt",
+    wifi: "wifi",
+    "wifi-off": "wifi_off",
+    windmill: "windmill",
+    "zoom-out": "zoom_out",
+    "zoom-in": "zoom_in",
+};
+
+class IconService {
+    constructor() {
+        this.http = inject(HttpClient);
+    }
+    getSvg(name, appearance) {
+        if (!this.http) {
+            throw new Error("HttpClient is not available");
+        }
+        const toggableIcon = togglableIcons[name];
+        if (toggableIcon) {
+            const [outlinedIconName, filledIconName] = toggableIcon;
+            const iconName = appearance === "filled" ? filledIconName : outlinedIconName;
+            return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
+        }
+        else {
+            const iconName = regularIcons[name];
+            if (!iconName) {
+                throw new Error(`Icon ${name} not found`);
+            }
+            return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable
+        }] });
+
+class IconComponent {
+    constructor() {
+        this.name = input.required();
+        this.size = input(20);
+        this.color = input("currentColor");
+        this.classes = input("");
+        this.appearance = input();
+        this.destroyRef = inject(DestroyRef);
+        this.svgContent = null;
+        this.sanitizer = inject(DomSanitizer);
+        this.iconService = inject(IconService);
+        this.cdr = inject(ChangeDetectorRef);
+        effect(() => {
+            this.setSvgContent(this.name());
+        });
+    }
+    setSvgContent(svgName) {
+        const svgFile = this.iconService.getSvg(svgName, this.appearance() || "outlined");
+        svgFile.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((res) => {
+            const size = this.size();
+            const svgWithSize = res.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+            this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svgWithSize);
+            this.cdr.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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 class=\"rte-icon-container\" [innerHTML]=\"svgContent\" [style.height]=\"(size())+'px'\" [style.width]=\"(size())+'px'\"></div>", styles: [".rte-icon-container{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-icon", imports: [CommonModule], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [IconService], template: "<div class=\"rte-icon-container\" [innerHTML]=\"svgContent\" [style.height]=\"(size())+'px'\" [style.width]=\"(size())+'px'\"></div>", styles: [".rte-icon-container{display:flex}\n"] }]
+        }], ctorParameters: () => [] });
+
 class LinkComponent {
     constructor() {
-        this.label = input('');
-        this.href = input('#');
+        this.label = input("");
+        this.href = input("#");
         this.subtle = input(false);
         this.externalLink = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a class=\"rte-link\" [ngClass]=\"{'subtle': subtle()}\" href=\"{{ href() }}\" role=\"link\">\n    <span class=\"rte-link-label\">\n        {{ label() }}\n    </span>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: LinkComponent, isStandalone: true, selector: "rte-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, subtle: { classPropertyName: "subtle", publicName: "subtle", isSignal: true, isRequired: false, transformFunction: null }, externalLink: { classPropertyName: "externalLink", publicName: "externalLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n    <span class=\"rte-link-label\">\n        {{ label() }}\n    </span>\n    <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rte-link', standalone: true, imports: [CommonModule], template: "<a class=\"rte-link\" [ngClass]=\"{'subtle': subtle()}\" href=\"{{ href() }}\" role=\"link\">\n    <span class=\"rte-link-label\">\n        {{ label() }}\n    </span>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
+            args: [{ selector: "rte-link", imports: [CommonModule, IconComponent], standalone: true, template: "<a href=\"{{ href() }}\" class=\"rte-link\" role=\"link\" [ngClass]=\"{'subtle': subtle()}\">\n    <span class=\"rte-link-label\">\n        {{ label() }}\n    </span>\n    <rte-icon *ngIf=\"externalLink()\" name=\"external-link\" [size]=\"12\"></rte-icon>\n</a>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-link{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;align-items:center;cursor:pointer;display:inline-flex;justify-content:center}.rte-link:visited{color:var(--content-link-visited);text-decoration:underline}.rte-link:visited:hover{color:var(--content-link-visited-hover);text-decoration:none}.rte-link:visited:active{color:var(--content-link-visited-press);text-decoration:underline}.rte-link:visited:focus-visible{color:var(--content-link-visited);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link:not(:visited){color:var(--content-link-default)}.rte-link:not(:visited):hover{color:var(--content-link-hover);text-decoration:none}.rte-link:not(:visited):active{color:var(--content-link-press);text-decoration:underline}.rte-link:not(:visited):focus-visible{color:var(--content-link-default);text-decoration:underline;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:visited{color:var(--content-primary);text-decoration:none}.rte-link.subtle:visited:hover{color:var(--content-link-secondary);text-decoration:underline}.rte-link.subtle:visited:active{color:var(--content-link-primary);text-decoration:none}.rte-link.subtle:visited:focus-visible{color:var(--content-link-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}.rte-link.subtle:not(:visited){color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):hover{color:var(--content-secondary);text-decoration:underline}.rte-link.subtle:not(:visited):active{color:var(--content-primary);text-decoration:none}.rte-link.subtle:not(:visited):focus-visible{color:var(--content-primary);text-decoration:none;outline:1px solid var(--border-brand-focused);outline-offset:4px;border-radius:4px}\n"] }]
         }] });
 
 class RadioButtonComponent {
     constructor() {
-        this.label = input('');
-        this.groupName = input('');
+        this.label = input("");
+        this.groupName = input("");
         this.showLabel = input(true);
         this.disabled = input(false);
         this.error = input(false);
@@ -118,24 +488,24 @@ class RadioButtonComponent {
         this.isDisplayed = computed(() => !(this.disabled() && this.error()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            class=\"rte-radio-button\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            [for]=\"label()\" \n            class=\"rte-radio-button-label\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px #c8164033}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px #c8164033}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus{outline:none}.rte-radio-button:focus:after{opacity:100}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100}.rte-radio-button:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px #22508233}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: RadioButtonComponent, isStandalone: true, selector: "rte-radio-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            class=\"rte-radio-button\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-radio-button-label\" \n            [for]=\"label()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rte-radio-button', standalone: true, imports: [CommonModule], template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            class=\"rte-radio-button\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            [for]=\"label()\" \n            class=\"rte-radio-button-label\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px #c8164033}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px #c8164033}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus{outline:none}.rte-radio-button:focus:after{opacity:100}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100}.rte-radio-button:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px #22508233}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
+            args: [{ selector: "rte-radio-button", imports: [CommonModule], standalone: true, template: "    <div *ngIf=\"isDisplayed()\" class=\"rte-radio-button-container\">\n        <input\n            type=\"radio\"\n            class=\"rte-radio-button\"\n            [id]=\"label()\"\n            [value]=\"label()\"\n            [size]=\"labelSize\"\n            [name]=\"groupName()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n        />\n        <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-radio-button-label\" \n            [for]=\"label()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n        >\n            {{ label() }}\n        </label>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-radio-button-container{display:flex;padding-right:4px;align-items:center;gap:12px}.rte-radio-button{appearance:none;display:flex;width:16px;height:16px;padding:0;justify-content:center;align-items:center;border-radius:999px;border:1px solid var(--content-tertiary);background:var(--background-default);position:relative;cursor:pointer;transition:box-shadow .3s ease-in-out;margin:0}.rte-radio-button:before{content:\"\";width:10px;height:10px;border-radius:999px;background:var(--content-brand-default);opacity:0%}.rte-radio-button:after{content:\"\";width:calc(100% + 8px);height:calc(100% + 8px);border-radius:4px;border:1px solid var(--content-primary);position:absolute;z-index:-1;opacity:0%}.rte-radio-button.error{border:1px solid var(--content-danger);transition:box-shadow .3s ease-in-out}.rte-radio-button.error:checked{border:1px solid var(--content-danger)}.rte-radio-button.error:before{background:var(--content-danger)}.rte-radio-button.error:hover{transition:box-shadow .15s ease-in-out;box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button.error:hover:checked{box-shadow:0 0 0 8px var(--background-danger-hover-opacity-20)}.rte-radio-button.read-only{pointer-events:none;cursor:default}.rte-radio-button.read-only:before{background:var(--content-tertiary)}.rte-radio-button.read-only:checked{border:1px solid var(--content-tertiary)}.rte-radio-button.read-only.error{border:1px solid var(--content-danger)}.rte-radio-button:focus-visible{outline:none}.rte-radio-button:focus-visible:after{opacity:100%}.rte-radio-button:checked{border:1px solid var(--content-brand-default)}.rte-radio-button:checked:before{opacity:100%}.rte-radio-button:hover{box-shadow:0 0 0 8px var(--background-hover-opacity-50)}.rte-radio-button:hover:checked{box-shadow:0 0 0 8px var(--background-brand-hover-opacity-20)}.rte-radio-button:disabled{pointer-events:none;background:var(--background-disabled);border:1px solid var(--content-disabled);cursor:not-allowed}.rte-radio-button:disabled:before{background:var(--content-disabled)}.rte-radio-button-label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}.rte-radio-button-label.read-only{pointer-events:none;cursor:default;color:var(--content-tertiary)}.rte-radio-button-label.disabled{pointer-events:none;color:var(--content-disabled)}\n"] }]
         }] });
 
 class RadioButtonGroupComponent {
     constructor() {
-        this.groupName = input('');
+        this.groupName = input("");
         this.items = input([]);
-        this.direction = input('horizontal');
+        this.direction = input("horizontal");
         this.showItemsLabel = input(true);
-        this.groupTitle = input('');
+        this.groupTitle = input("");
         this.showGroupTitle = input(false);
-        this.groupHelpText = input('');
+        this.groupHelpText = input("");
         this.showHelpText = input(false);
-        this.errorMessage = input('');
+        this.errorMessage = input("");
         this.error = input(false);
         this.disabled = input(false);
         this.readOnly = input(false);
@@ -146,23 +516,23 @@ class RadioButtonGroupComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rte-radio-button-group', standalone: true, imports: [CommonModule, RadioButtonComponent], template: "<div  \n    *ngIf=\"isDisplayed()\"\n    class=\"radio-button-group-container\">\n    <div\n        class=\"radio-button-group-header\"\n        [ngClass]=\"{\n            'disabled': disabled(),\n            'error': error(),\n            'read-only': readOnly(),\n        }\">\n        <h3\n            *ngIf=\"showGroupTitle()\"\n            class=\"group-title\"\n            >\n            {{ groupTitle() }}\n        </h3>\n        <p\n            *ngIf=\"showHelpText()\"\n            class=\"group-help-text\"\n            >\n            {{ groupHelpText() }}\n\n        </p>\n        <p\n            *ngIf=\"error()\"\n            class=\"group-error-message\"\n            >\n            {{ errorMessage() }}\n        </p>\n    </div>\n    <div class=\"radio-button-group\" \n        [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n        <ng-container \n        *ngFor=\"let item of items()\">\n            <rte-radio-button\n                [label]=\"item\"\n                [groupName]=\"groupName()\"\n                [showLabel]=\"showItemsLabel()\"\n                [disabled]=\"disabled()\"\n                [error]=\"error()\"\n                [readOnly]=\"readOnly()\"\n            />\n        </ng-container>\n    </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
+            args: [{ selector: "rte-radio-button-group", imports: [CommonModule, RadioButtonComponent], standalone: true, template: "<div  \n    *ngIf=\"isDisplayed()\"\n    class=\"radio-button-group-container\">\n    <div\n        class=\"radio-button-group-header\"\n        [ngClass]=\"{\n            'disabled': disabled(),\n            'error': error(),\n            'read-only': readOnly(),\n        }\">\n        <h3\n            *ngIf=\"showGroupTitle()\"\n            class=\"group-title\"\n            >\n            {{ groupTitle() }}\n        </h3>\n        <p\n            *ngIf=\"showHelpText()\"\n            class=\"group-help-text\"\n            >\n            {{ groupHelpText() }}\n\n        </p>\n        <p\n            *ngIf=\"error()\"\n            class=\"group-error-message\"\n            >\n            {{ errorMessage() }}\n        </p>\n    </div>\n    <div class=\"radio-button-group\" \n        [ngClass]=\"{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}\">\n        <ng-container \n        *ngFor=\"let item of items()\">\n            <rte-radio-button\n                [label]=\"item\"\n                [groupName]=\"groupName()\"\n                [showLabel]=\"showItemsLabel()\"\n                [disabled]=\"disabled()\"\n                [error]=\"error()\"\n                [readOnly]=\"readOnly()\"\n            />\n        </ng-container>\n    </div>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.radio-button-group-container{display:flex;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}.radio-button-group-container .radio-button-group-header .group-title{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Nunito;font-weight:600;font-size:20px;line-height:28px;letter-spacing:-.5px;align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-help-text{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-tertiary);align-self:stretch;margin:0}.radio-button-group-container .radio-button-group-header .group-error-message{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:14px;line-height:20px;letter-spacing:0px;color:var(--content-danger);align-self:stretch;margin:4px 0 0}.radio-button-group-container .radio-button-group-header.error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.read-only .group-title{color:var(--content-tertiary)}.radio-button-group-container .radio-button-group-header.read-only .error .group-title{color:var(--content-danger)}.radio-button-group-container .radio-button-group-header.disabled{pointer-events:none}.radio-button-group-container .radio-button-group-header.disabled .group-title,.radio-button-group-container .radio-button-group-header.disabled .group-help-text{color:var(--content-disabled)}.radio-button-group-container .radio-button-group{display:flex;flex-direction:row;padding:0;align-items:flex-start;gap:24px}.radio-button-group-container .radio-button-group.vertical{flex-direction:column;gap:8px}\n"] }]
         }] });
 
 class CheckboxComponent {
     constructor() {
         this.id = input.required();
         this.label = input.required();
-        this.value = input('');
+        this.value = input("");
         this.indeterminate = input(false);
-        this.description = input('');
+        this.description = input("");
         this.showLabel = input(true);
         this.disabled = input(false);
         this.error = input(false);
-        this.errorMessage = input('');
+        this.errorMessage = input("");
         this.readOnly = input(false);
         this.checked = input(false);
-        this.groupName = input('');
+        this.groupName = input("");
     }
     onKeydown(event) {
         if (event.code === "Space") {
@@ -172,24 +542,24 @@ class CheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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 }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            class=\"rte-checkbox\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n        <!-- TODO: Replace with the real icon from Iconography ticket -->\n        <div class=\"rte-checkbox-icons rte-checkbox-icon-selected\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M6.66667 9.06668L10.6 5.13335C10.7222 5.01112 10.8778 4.95001 11.0667 4.95001C11.2556 4.95001 11.4111 5.01112 11.5333 5.13335C11.6556 5.25557 11.7167 5.41112 11.7167 5.60001C11.7167 5.7889 11.6556 5.94446 11.5333 6.06668L7.13334 10.4667C7.00001 10.6 6.84445 10.6667 6.66667 10.6667C6.4889 10.6667 6.33334 10.6 6.20001 10.4667L4.46667 8.73335C4.34445 8.61112 4.28334 8.45557 4.28334 8.26668C4.28334 8.07779 4.34445 7.92223 4.46667 7.80001C4.5889 7.67779 4.74445 7.61668 4.93334 7.61668C5.12223 7.61668 5.27778 7.67779 5.40001 7.80001L6.66667 9.06668Z\" />\n            </svg>\n        </div>\n        <div class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M4.66667 8.66665C4.47778 8.66665 4.31944 8.60276 4.19167 8.47498C4.06389 8.3472 4 8.18887 4 7.99998C4 7.81109 4.06389 7.65276 4.19167 7.52498C4.31944 7.3972 4.47778 7.33331 4.66667 7.33331H11.3333C11.5222 7.33331 11.6806 7.3972 11.8083 7.52498C11.9361 7.65276 12 7.81109 12 7.99998C12 8.18887 11.9361 8.3472 11.8083 8.47498C11.6806 8.60276 11.5222 8.66665 11.3333 8.66665H4.66667Z\" />\n            </svg>\n        </div>\n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            [for]=\"id()\" \n            class=\"rte-checkbox-label\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100;background:var(--background-default);align-items:center;justify-content:center}.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-within{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 svg{fill: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 svg{fill: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 svg{fill:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translate(4px,3px);position:absolute}.rte-checkbox-container .rte-checkbox-icons svg{fill:#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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", 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 }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            class=\"rte-checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-checkbox-label\" \n            [for]=\"id()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rte-checkbox', standalone: true, imports: [CommonModule], template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            class=\"rte-checkbox\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n        <!-- TODO: Replace with the real icon from Iconography ticket -->\n        <div class=\"rte-checkbox-icons rte-checkbox-icon-selected\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M6.66667 9.06668L10.6 5.13335C10.7222 5.01112 10.8778 4.95001 11.0667 4.95001C11.2556 4.95001 11.4111 5.01112 11.5333 5.13335C11.6556 5.25557 11.7167 5.41112 11.7167 5.60001C11.7167 5.7889 11.6556 5.94446 11.5333 6.06668L7.13334 10.4667C7.00001 10.6 6.84445 10.6667 6.66667 10.6667C6.4889 10.6667 6.33334 10.6 6.20001 10.4667L4.46667 8.73335C4.34445 8.61112 4.28334 8.45557 4.28334 8.26668C4.28334 8.07779 4.34445 7.92223 4.46667 7.80001C4.5889 7.67779 4.74445 7.61668 4.93334 7.61668C5.12223 7.61668 5.27778 7.67779 5.40001 7.80001L6.66667 9.06668Z\" />\n            </svg>\n        </div>\n        <div class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M4.66667 8.66665C4.47778 8.66665 4.31944 8.60276 4.19167 8.47498C4.06389 8.3472 4 8.18887 4 7.99998C4 7.81109 4.06389 7.65276 4.19167 7.52498C4.31944 7.3972 4.47778 7.33331 4.66667 7.33331H11.3333C11.5222 7.33331 11.6806 7.3972 11.8083 7.52498C11.9361 7.65276 12 7.81109 12 7.99998C12 8.18887 11.9361 8.3472 11.8083 8.47498C11.6806 8.60276 11.5222 8.66665 11.3333 8.66665H4.66667Z\" />\n            </svg>\n        </div>\n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            [for]=\"id()\" \n            class=\"rte-checkbox-label\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100;background:var(--background-default);align-items:center;justify-content:center}.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-within{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 svg{fill: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 svg{fill: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 svg{fill:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translate(4px,3px);position:absolute}.rte-checkbox-container .rte-checkbox-icons svg{fill:#fff}\n"] }]
+            args: [{ selector: "rte-checkbox", imports: [CommonModule, IconComponent], standalone: true, template: "    <div class=\"rte-checkbox-container\">\n        <input\n            type=\"checkbox\"\n            class=\"rte-checkbox\"\n            [id]=\"id()\"\n            [value]=\"value()\"\n            [ngClass]=\"{'error': error(), 'read-only': readOnly()}\"\n            [disabled]=\"disabled()\"\n            [indeterminate]=\"indeterminate()\"\n            [checked]=\"checked()\"\n            (keydown)=\"onKeydown($event)\"\n        />\n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-selected\" name=\"check-small\" [size]=\"16\"/> \n            <rte-icon class=\"rte-checkbox-icons rte-checkbox-icon-indeterminated\" name=\"check-indeterminate\" [size]=\"16\" /> \n        <div class=\"rte-checkbox-text-container\">\n            <label \n            *ngIf=\"showLabel()\" \n            class=\"rte-checkbox-label\" \n            [for]=\"id()\"\n            [ngClass]=\"{\n                'error': error(),\n                'read-only': readOnly(),\n                'disabled': disabled()\n            }\"\n            >\n                {{ label() }}\n            </label>\n            <p class=\"rte-checkbox-description\">{{ description() }}</p>\n            <p *ngIf=\"error() && errorMessage()\" class=\"rte-checkbox-error\">{{ errorMessage() }}</p>\n        </div>\n    </div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.rte-checkbox-container{display:flex;gap:12px}.rte-checkbox-container .rte-checkbox{appearance:none;display:flex;width:16px;height:16px;border-radius:2px;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-default);align-items:center;justify-content:center;margin:4px 0}.rte-checkbox-container .rte-checkbox:before{content:\"\";display:none;position:absolute;border-radius:999px;background:var(--background-hover);width:32px;height:32px;z-index:-1}.rte-checkbox-container .rte-checkbox:active:before{opacity:100%;transform:scale(0);transition:transform 0s,opacity 0s}.rte-checkbox-container .rte-checkbox:focus-visible{outline:1px solid var(--border-brand-focused);outline-offset:4px}.rte-checkbox-container .rte-checkbox:hover{cursor:pointer}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):before{display:inline-block}.rte-checkbox-container .rte-checkbox:hover:not(:disabled):not(:active):before{opacity:50%;transition:transform .15s ease,opacity .3s ease}.rte-checkbox-container .rte-checkbox:disabled{cursor:default;border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox:disabled~.rte-checkbox-text-container .rte-checkbox-description{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:checked:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:checked:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:checked.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:checked:not(:indeterminate)~.rte-checkbox-icon-selected{display:block}.rte-checkbox-container .rte-checkbox:indeterminate{border:1px solid var(--content-brand-default);background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-brand-default)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled{border:1px solid var(--content-disabled);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate:disabled~.rte-checkbox-icons{color:var(--content-disabled)}.rte-checkbox-container .rte-checkbox:indeterminate.error{background:var(--background-danger-default)}.rte-checkbox-container .rte-checkbox:indeterminate~.rte-checkbox-icon-indeterminated{display:block}.rte-checkbox-container .rte-checkbox.read-only{pointer-events:none;cursor:default;border:1px solid var(--content-tertiary);opacity:100%;background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container label,.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-text-container .checkbox-description{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only~.rte-checkbox-icons{color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox.read-only.error{border:1px solid var(--content-danger);background:var(--background-disabled)}.rte-checkbox-container .rte-checkbox.error{border:1px solid var(--content-danger);background:var(--background-default)}.rte-checkbox-container .rte-checkbox.error:hover:not(:disabled):not(:active):before{opacity:20%;background:var(--background-danger-hover)}.rte-checkbox-container .rte-checkbox-text-container label{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0px}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-description{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0;color:var(--content-tertiary)}.rte-checkbox-container .rte-checkbox-text-container .rte-checkbox-error{font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;font-weight:700;margin:0;color:var(--content-danger)}.rte-checkbox-container .rte-checkbox-icons{display:none;z-index:1;pointer-events:none;transform:translateY(4px);position:absolute;color:#fff}\n"] }]
         }] });
 
 class CheckboxGroupComponent {
     constructor() {
         this.groupName = input.required();
         this.items = input.required();
-        this.direction = input('horizontal');
+        this.direction = input("horizontal");
         this.showItemsLabel = input(true);
-        this.groupTitle = input('');
+        this.groupTitle = input("");
         this.showGroupTitle = input(false);
-        this.groupHelpText = input('');
+        this.groupHelpText = input("");
         this.showHelpText = input(false);
-        this.errorMessage = input('');
+        this.errorMessage = input("");
         this.error = input(false);
         this.disabled = input(false);
         this.readOnly = input(false);
@@ -200,16 +570,12 @@ class CheckboxGroupComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rte-checkbox-group', standalone: true, imports: [CommonModule, CheckboxComponent], 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"] }]
+            args: [{ selector: "rte-checkbox-group", imports: [CommonModule, CheckboxComponent], standalone: true, 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"] }]
         }] });
 
-/*
- * Public API Surface of lib
- */
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ColDirective, GridDirective, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent };
+export { ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ColDirective, GridDirective, IconComponent, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent };
 //# sourceMappingURL=design-system-rte-angular.mjs.map