@design-system-rte/angular 0.2.0 → 0.2.1

package/src/lib/components/tooltip/tooltip.directive.stories.ts

@@ -0,0 +1,218 @@
+import { TAB_KEY } from "@design-system-rte/core/constants/keyboard.constants";
+import { Meta, StoryObj } from "@storybook/angular";
+import { within, userEvent, expect, waitFor } from "@storybook/test";
+
+import { TooltipDirective } from "./tooltip.directive";
+
+const meta: Meta<TooltipDirective> = {
+  title: "Tooltip",
+  component: TooltipDirective,
+  tags: ["autodocs"],
+  argTypes: {
+    rteTooltip: {
+      control: "text",
+      defaultValue: "Tooltip Text",
+    },
+    rteTooltipPosition: {
+      control: "select",
+      options: ["auto", "top", "bottom", "left", "right"],
+      defaultValue: "top",
+    },
+    rteTooltipAlignment: {
+      control: "select",
+      options: ["start", "center", "end"],
+      defaultValue: "center",
+    },
+    rteTooltipArrow: {
+      control: "boolean",
+      defaultValue: true,
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+type Story = StoryObj<TooltipDirective>;
+
+const mockHost = (tooltipDirectives: string) => `
+<div style="
+    text-decoration: underline;
+    text-decoration-color: #BF4C00;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 4px;
+    color: #BF4C00;
+    font-weight: bold;
+"
+    ${tooltipDirectives}
+>
+    Hover Me!
+</div>
+`;
+
+export const Default: Story = {
+  args: {
+    rteTooltip: "Tooltip",
+    rteTooltipPosition: "top",
+    rteTooltipAlignment: "center",
+    rteTooltipArrow: true,
+  },
+  render: (args) => ({
+    props: args,
+    declarations: [TooltipDirective],
+    template: mockHost(`
+            [rteTooltip]="rteTooltip"
+            [rteTooltipPosition]="rteTooltipPosition"
+            [rteTooltipAlignment]="rteTooltipAlignment"
+            [rteTooltipArrow]="rteTooltipArrow"
+        `),
+  }),
+};
+
+export const Position: Story = {
+  args: Default.args,
+  render: (args) => ({
+    props: args,
+    declarations: [TooltipDirective],
+    template: `
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 16px;">
+            ${mockHost(`
+                rteTooltipPosition="top"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipAlignment]="rteTooltipAlignment"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+            ${mockHost(`
+                rteTooltipPosition="bottom"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipAlignment]="rteTooltipAlignment"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+            ${mockHost(`
+                rteTooltipPosition="left"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipAlignment]="rteTooltipAlignment"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+            ${mockHost(`
+                rteTooltipPosition="right"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipAlignment]="rteTooltipAlignment"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+        </div>
+        `,
+  }),
+};
+
+export const Alignment: Story = {
+  args: Default.args,
+  render: (args) => ({
+    props: args,
+    declarations: [TooltipDirective],
+    template: `
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 16px;">
+            ${mockHost(`
+                rteTooltipAlignment="start"
+                [rteTooltipPosition]="rteTooltipPosition"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+            ${mockHost(`
+                rteTooltipAlignment="center"
+                [rteTooltipPosition]="rteTooltipPosition"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+            ${mockHost(`
+                rteTooltipAlignment="end"
+                [rteTooltipPosition]="rteTooltipPosition"
+                [rteTooltip]="rteTooltip"
+                [rteTooltipArrow]="rteTooltipArrow"
+            `)}
+        </div>
+        `,
+  }),
+};
+
+export const Arrow: Story = {
+  args: Default.args,
+  render: (args) => ({
+    props: args,
+    declarations: [TooltipDirective],
+    template: `
+        <div style="display: flex; gap: 8;">
+            ${mockHost(`
+                [rteTooltipArrow]="true"
+                [rteTooltipPosition]="rteTooltipPosition"
+                [rteTooltip]="rteTooltip"
+            `)}
+            ${mockHost(`
+                [rteTooltipArrow]="false"
+                [rteTooltipPosition]="rteTooltipPosition"
+                [rteTooltip]="rteTooltip"
+            `)}
+        </div>
+        `,
+  }),
+};
+
+export const AutoPlacement: Story = {
+  args: Default.args,
+  render: (args) => ({
+    props: args,
+    declarations: [TooltipDirective],
+    template: `
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+            <div style="display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; border: 1px solid red; width: 75px; height: 250px;">
+                ${mockHost(`
+                    rteTooltipPosition="auto"
+                    [rteTooltip]="rteTooltip"
+                `)}
+            </div>
+
+            <div style="display: flex; align-items: center; justify-content: flex-start; gap: 8px; border: 1px solid red; width: 250px; height: 50px;">
+                ${mockHost(`
+                    rteTooltipPosition="auto"
+                    [rteTooltip]="rteTooltip"
+                `)}
+            </div>
+
+            <div style="display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; border: 1px solid red; width: 75px; height: 250px;">
+                ${mockHost(`
+                    rteTooltipPosition="auto"
+                    [rteTooltip]="rteTooltip"
+                `)}
+            </div>
+
+            <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px; border: 1px solid red; width: 250px; height: 50px;">
+                ${mockHost(`
+                    rteTooltipPosition="auto"
+                    [rteTooltip]="rteTooltip"
+                `)}
+            </div>
+        </div>
+        `,
+  }),
+};
+
+export const KeyboardInteraction: Story = {
+  args: Default.args,
+  render: (args) => ({
+    props: args,
+    declarations: [TooltipDirective],
+    template: `
+        <div style="display: flex; gap: 8px;">
+            ${mockHost(`[rteTooltip]="rteTooltip"`)}
+        </div>
+        `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltipHost = canvas.getByText("Hover Me!");
+    await userEvent.keyboard(TAB_KEY);
+    const tooltip = await canvas.findByRole("tooltip");
+    expect(tooltipHost).toHaveFocus();
+    await waitFor(() => expect(tooltip).toBeVisible());
+  },
+};

package/src/lib/components/tooltip/tooltip.directive.ts

@@ -0,0 +1,187 @@
+import {
+  ChangeDetectorRef,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  HostListener,
+  inject,
+  input,
+  Renderer2,
+  ViewContainerRef,
+} from "@angular/core";
+import { getAutoPlacement } from "@design-system-rte/core/components/utils/auto-placement";
+
+import { TooltipComponent } from "./tooltip.component";
+
+interface TooltipXBound {
+  position: "left" | "right";
+  offset: number;
+}
+
+interface TooltipYBound {
+  position: "top" | "bottom";
+  offset: number;
+}
+
+interface TooltipBounds {
+  x: TooltipXBound;
+  y: TooltipYBound;
+}
+
+const TOOLTIP_GAP = 8;
+
+@Directive({
+  selector: "[rteTooltip]",
+  standalone: true,
+})
+export class TooltipDirective {
+  readonly rteTooltip = input.required<string>();
+  readonly rteTooltipPosition = input("auto");
+  readonly rteTooltipAlignment = input("center");
+  readonly rteTooltipArrow = input(true);
+
+  private tooltipRef: ComponentRef<TooltipComponent> | null = null;
+  private hostElement: HTMLElement;
+
+  private elementRef = inject(ElementRef);
+  private viewContainerRef = inject(ViewContainerRef);
+  private renderer = inject(Renderer2);
+  private cdr = inject(ChangeDetectorRef);
+
+  @HostListener("mouseenter")
+  onMouseEnter(): void {
+    this.showTooltip();
+  }
+
+  @HostListener("mouseleave")
+  onMouseLeave(): void {
+    this.hideTooltip();
+  }
+
+  @HostListener("focus")
+  onFocus(): void {
+    this.showTooltip();
+  }
+
+  @HostListener("blur")
+  onBlur(): void {
+    this.hideTooltip();
+  }
+
+  constructor() {
+    this.hostElement = this.elementRef.nativeElement;
+    this.hostElement.setAttribute("tabindex", "0");
+  }
+
+  showTooltip(): void {
+    if (this.tooltipRef) {
+      this.tooltipRef.destroy();
+    }
+
+    this.tooltipRef = this.viewContainerRef.createComponent(TooltipComponent);
+    this.assignDirectiveToComponent();
+    this.appendComponentToHost();
+    this.cdr.detectChanges();
+
+    if (this.tooltipRef) {
+      const tooltipElement = this.tooltipRef.location.nativeElement;
+      this.renderer.setStyle(tooltipElement, "opacity", "0");
+      this.positionTooltip();
+
+      this.renderer.setStyle(tooltipElement, "opacity", "1");
+    }
+  }
+
+  private assignDirectiveToComponent(): void {
+    if (this.tooltipRef) {
+      const tooltipElement = this.tooltipRef.location.nativeElement;
+      const position =
+        this.rteTooltipPosition() === "auto"
+          ? getAutoPlacement(this.hostElement, tooltipElement, "top")
+          : this.rteTooltipPosition();
+
+      this.tooltipRef.setInput("label", this.rteTooltip());
+      this.tooltipRef.setInput("position", position);
+      this.tooltipRef.setInput("alignment", this.rteTooltipAlignment());
+      this.tooltipRef.setInput("arrow", this.rteTooltipArrow());
+    }
+  }
+
+  private appendComponentToHost(): void {
+    if (this.tooltipRef) {
+      this.renderer.appendChild(this.elementRef.nativeElement, this.tooltipRef.location.nativeElement);
+    }
+  }
+
+  private positionTooltip(): void {
+    if (this.tooltipRef) {
+      const tooltipElement = this.tooltipRef.location.nativeElement;
+
+      const bounds = this.getTooltipPosition(this.hostElement, this.tooltipRef);
+
+      this.renderer.setStyle(this.hostElement, "position", "relative");
+
+      this.renderer.setStyle(tooltipElement, bounds.x.position, `${bounds.x.offset}px`);
+      this.renderer.setStyle(tooltipElement, bounds.y.position, `${bounds.y.offset}px`);
+    }
+  }
+
+  private getTooltipPosition(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): TooltipBounds {
+    return {
+      x: this.getTooltipXBound(host, tooltip),
+      y: this.getTooltipYBound(host, tooltip),
+    };
+  }
+
+  private getTooltipXBound(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): TooltipXBound {
+    return {
+      position: tooltip.instance.position() === "right" ? "right" : "left",
+      offset: this.getTooltipXOffset(host, tooltip),
+    };
+  }
+
+  private getTooltipXOffset(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): number {
+    const hostRect = host.getBoundingClientRect();
+    if (tooltip.instance.position() === "left") {
+      return -tooltip.location.nativeElement.querySelector(".tooltip").offsetWidth - TOOLTIP_GAP;
+    }
+    if (tooltip.instance.position() === "right") {
+      return -TOOLTIP_GAP;
+    }
+    return hostRect.width / 2;
+  }
+
+  private getTooltipYBound(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): TooltipYBound {
+    return {
+      position: tooltip.instance.position() === "bottom" ? "bottom" : "top",
+      offset: this.getTooltipYOffset(host, tooltip),
+    };
+  }
+
+  private getTooltipYOffset(host: HTMLElement, tooltip: ComponentRef<TooltipComponent>): number {
+    const hostRect = host.getBoundingClientRect();
+
+    if (tooltip.instance.position() === "top") {
+      return -tooltip.location.nativeElement.querySelector(".tooltip").offsetHeight - TOOLTIP_GAP;
+    }
+    if (tooltip.instance.position() === "bottom") {
+      return -TOOLTIP_GAP;
+    }
+    return hostRect.height / 2;
+  }
+
+  private hideTooltip(): void {
+    if (this.tooltipRef) {
+      const tooltipElement = this.tooltipRef.location.nativeElement;
+
+      this.renderer.setStyle(tooltipElement, "opacity", "0");
+
+      setTimeout(() => {
+        if (this.tooltipRef) {
+          this.tooltipRef.destroy();
+          this.tooltipRef = null;
+        }
+      }, 200);
+    }
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,9 @@
+export * from "./lib/components/button/button.component";
+export * from "./lib/components/grid/grid.directive";
+export * from "./lib/components/grid/col/col.directive";
+export * from "./lib/components/link/link.component";
+export * from "./lib/components/radio-button/radio-button.component";
+export * from "./lib/components/radio-button-group/radio-button-group.component";
+export * from "./lib/components/checkbox/checkbox.component";
+export * from "./lib/components/checkbox-group/checkbox-group.component";
+export * from "./lib/components/icon/icon.component";

package/tsconfig.lib.json

@@ -0,0 +1,22 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ],
+  "files": ["typings.d.ts"],
+  "include": [
+    "src/**/*.ts",
+    "src/types.d.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/design-system-rte-angular.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"design-system-rte-angular.d.ts","sourceRoot":"","sources":["../../projects/ds-rte-lib/src/design-system-rte-angular.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,cAAc,cAAc,CAAC"}

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

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduLXN5c3RlbS1ydGUtYW5ndWxhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2Rlc2lnbi1zeXN0ZW0tcnRlLWFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==

package/esm2022/lib/components/button/button.component.mjs

@@ -1,22 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import * as i0 from "@angular/core";
-export class ButtonComponent {
-    constructor() {
-        this.label = input('');
-        this.variant = input('filled');
-        this.size = input('m');
-        this.disabled = input(false);
-        this.click = output();
-    }
-    onClick(event) {
-        event.stopPropagation();
-        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"] }); }
-}
-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"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RzLXJ0ZS1saWIvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVXpELE1BQU0sT0FBTyxlQUFlO0lBUDVCO1FBU0UsVUFBSyxHQUFHLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNsQixZQUFPLEdBQUcsS0FBSyxDQUFnQixRQUFRLENBQUMsQ0FBQztRQUN6QyxTQUFJLEdBQUcsS0FBSyxDQUFhLEdBQUcsQ0FBQyxDQUFDO1FBQzlCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFFeEIsVUFBSyxHQUFHLE1BQU0sRUFBUSxDQUFDO0tBT3hCO0lBTEMsT0FBTyxDQUFDLEtBQWlDO1FBQ3ZDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3BCLENBQUM7K0dBWlUsZUFBZTttR0FBZixlQUFlLDJsQkNWNUIsOE1BTVM7OzRGRElJLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCdXR0b25TaXplLCBCdXR0b25WYXJpYW50IH0gZnJvbSAnQGRlc2lnbi1zeXN0ZW0tcnRlL2NvcmUvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3J0ZS1idXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG5cbiAgbGFiZWwgPSBpbnB1dCgnJyk7XG4gIHZhcmlhbnQgPSBpbnB1dDxCdXR0b25WYXJpYW50PignZmlsbGVkJyk7XG4gIHNpemUgPSBpbnB1dDxCdXR0b25TaXplPignbScpO1xuICBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcblxuICBjbGljayA9IG91dHB1dDx2b2lkPigpO1xuXG4gIG9uQ2xpY2soZXZlbnQ6IE1vdXNlRXZlbnQgfCBLZXlib2FyZEV2ZW50KTogdm9pZCB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5jbGljay5lbWl0KCk7XG4gIH1cblxufVxuIiwiPGJ1dHRvblxuICAgIGNsYXNzPVwicnRlLWJ1dHRvbiB7eyB2YXJpYW50KCkgfX0gc2l6ZS17eyBzaXplKCkgfX1cIlxuICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZCgpXCJcbiAgICAoY2xpY2spPVwib25DbGljaygkZXZlbnQpXCJcbj5cbiAgICA8c3BhbiBjbGFzcz1cInJ0ZS1idXR0b24tbGFiZWxcIj57eyBsYWJlbCgpIH19PC9zcGFuPlxuPC9idXR0b24+Il19

package/esm2022/lib/components/checkbox/checkbox.component.mjs

@@ -1,34 +0,0 @@
-import { Component, input } from "@angular/core";
-import { CommonModule } from "@angular/common";
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-export class CheckboxComponent {
-    constructor() {
-        this.id = input.required();
-        this.label = input.required();
-        this.value = input('');
-        this.indeterminate = input(false);
-        this.description = input('');
-        this.showLabel = input(true);
-        this.disabled = input(false);
-        this.error = input(false);
-        this.errorMessage = input('');
-        this.readOnly = input(false);
-        this.checked = input(false);
-        this.groupName = input('');
-    }
-    onKeydown(event) {
-        if (event.code === "Space") {
-            if (this.readOnly()) {
-                event.preventDefault();
-            }
-        }
-    }
-    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"] }] }); }
-}
-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"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZHMtcnRlLWxpYi9zcmMvbGliL2NvbXBvbmVudHMvY2hlY2tib3gvY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFVL0MsTUFBTSxPQUFPLGlCQUFpQjtJQVI5QjtRQVNFLE9BQUUsR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFVLENBQUM7UUFDOUIsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQVUsQ0FBQztRQUNqQyxVQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2xCLGtCQUFhLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdCLGdCQUFXLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3hCLGNBQVMsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDeEIsYUFBUSxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixVQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLGlCQUFZLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ3pCLGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsWUFBTyxHQUFHLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN2QixjQUFTLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0tBU3ZCO0lBUEMsU0FBUyxDQUFDLEtBQW9CO1FBQzVCLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUMzQixJQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO2dCQUNuQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDekIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDOytHQXBCVSxpQkFBaUI7bUdBQWpCLGlCQUFpQix3bERDWDlCLDZoRkF3Q0EsMitJRGxDWSxZQUFZOzs0RkFLWCxpQkFBaUI7a0JBUjdCLFNBQVM7K0JBQ0UsY0FBYyxjQUNaLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdydGUtY2hlY2tib3gnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2NoZWNrYm94LmNvbXBvbmVudC5zY3NzJyxcbn0pXG5cbmV4cG9ydCBjbGFzcyBDaGVja2JveENvbXBvbmVudCB7XG4gIGlkID0gaW5wdXQucmVxdWlyZWQ8c3RyaW5nPigpO1xuICBsYWJlbCA9IGlucHV0LnJlcXVpcmVkPHN0cmluZz4oKTtcbiAgdmFsdWUgPSBpbnB1dCgnJyk7XG4gIGluZGV0ZXJtaW5hdGUgPSBpbnB1dChmYWxzZSk7XG4gIGRlc2NyaXB0aW9uID0gaW5wdXQoJycpO1xuICBzaG93TGFiZWwgPSBpbnB1dCh0cnVlKTtcbiAgZGlzYWJsZWQgPSBpbnB1dChmYWxzZSk7XG4gIGVycm9yID0gaW5wdXQoZmFsc2UpO1xuICBlcnJvck1lc3NhZ2UgPSBpbnB1dCgnJyk7XG4gIHJlYWRPbmx5ID0gaW5wdXQoZmFsc2UpO1xuICBjaGVja2VkID0gaW5wdXQoZmFsc2UpO1xuICBncm91cE5hbWUgPSBpbnB1dCgnJyk7XG5cbiAgb25LZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LmNvZGUgPT09IFwiU3BhY2VcIikge1xuICAgICAgaWYodGhpcy5yZWFkT25seSgpKSB7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59IiwiICAgIDxkaXYgY2xhc3M9XCJydGUtY2hlY2tib3gtY29udGFpbmVyXCI+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgICAgIFtpZF09XCJpZCgpXCJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJ2YWx1ZSgpXCJcbiAgICAgICAgICAgIGNsYXNzPVwicnRlLWNoZWNrYm94XCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsnZXJyb3InOiBlcnJvcigpLCAncmVhZC1vbmx5JzogcmVhZE9ubHkoKX1cIlxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIlxuICAgICAgICAgICAgW2luZGV0ZXJtaW5hdGVdPVwiaW5kZXRlcm1pbmF0ZSgpXCJcbiAgICAgICAgICAgIFtjaGVja2VkXT1cImNoZWNrZWQoKVwiXG4gICAgICAgICAgICAoa2V5ZG93bik9XCJvbktleWRvd24oJGV2ZW50KVwiXG4gICAgICAgIC8+XG4gICAgICAgIDwhLS0gVE9ETzogUmVwbGFjZSB3aXRoIHRoZSByZWFsIGljb24gZnJvbSBJY29ub2dyYXBoeSB0aWNrZXQgLS0+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJydGUtY2hlY2tib3gtaWNvbnMgcnRlLWNoZWNrYm94LWljb24tc2VsZWN0ZWRcIj5cbiAgICAgICAgICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIHdpZHRoPVwiMTZcIiBoZWlnaHQ9XCIxNlwiIHZpZXdCb3g9XCIwIDAgMTYgMTZcIiBmaWxsPVwibm9uZVwiPlxuICAgICAgICAgICAgICAgIDxwYXRoIGQ9XCJNNi42NjY2NyA5LjA2NjY4TDEwLjYgNS4xMzMzNUMxMC43MjIyIDUuMDExMTIgMTAuODc3OCA0Ljk1MDAxIDExLjA2NjcgNC45NTAwMUMxMS4yNTU2IDQuOTUwMDEgMTEuNDExMSA1LjAxMTEyIDExLjUzMzMgNS4xMzMzNUMxMS42NTU2IDUuMjU1NTcgMTEuNzE2NyA1LjQxMTEyIDExLjcxNjcgNS42MDAwMUMxMS43MTY3IDUuNzg4OSAxMS42NTU2IDUuOTQ0NDYgMTEuNTMzMyA2LjA2NjY4TDcuMTMzMzQgMTAuNDY2N0M3LjAwMDAxIDEwLjYgNi44NDQ0NSAxMC42NjY3IDYuNjY2NjcgMTAuNjY2N0M2LjQ4ODkgMTAuNjY2NyA2LjMzMzM0IDEwLjYgNi4yMDAwMSAxMC40NjY3TDQuNDY2NjcgOC43MzMzNUM0LjM0NDQ1IDguNjExMTIgNC4yODMzNCA4LjQ1NTU3IDQuMjgzMzQgOC4yNjY2OEM0LjI4MzM0IDguMDc3NzkgNC4zNDQ0NSA3LjkyMjIzIDQuNDY2NjcgNy44MDAwMUM0LjU4ODkgNy42Nzc3OSA0Ljc0NDQ1IDcuNjE2NjggNC45MzMzNCA3LjYxNjY4QzUuMTIyMjMgNy42MTY2OCA1LjI3Nzc4IDcuNjc3NzkgNS40MDAwMSA3LjgwMDAxTDYuNjY2NjcgOS4wNjY2OFpcIiAvPlxuICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwicnRlLWNoZWNrYm94LWljb25zIHJ0ZS1jaGVja2JveC1pY29uLWluZGV0ZXJtaW5hdGVkXCI+XG4gICAgICAgICAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiB3aWR0aD1cIjE2XCIgaGVpZ2h0PVwiMTZcIiB2aWV3Qm94PVwiMCAwIDE2IDE2XCIgZmlsbD1cIm5vbmVcIj5cbiAgICAgICAgICAgICAgICA8cGF0aCBkPVwiTTQuNjY2NjcgOC42NjY2NUM0LjQ3Nzc4IDguNjY2NjUgNC4zMTk0NCA4LjYwMjc2IDQuMTkxNjcgOC40NzQ5OEM0LjA2Mzg5IDguMzQ3MiA0IDguMTg4ODcgNCA3Ljk5OTk4QzQgNy44MTEwOSA0LjA2Mzg5IDcuNjUyNzYgNC4xOTE2NyA3LjUyNDk4QzQuMzE5NDQgNy4zOTcyIDQuNDc3NzggNy4zMzMzMSA0LjY2NjY3IDcuMzMzMzFIMTEuMzMzM0MxMS41MjIyIDcuMzMzMzEgMTEuNjgwNiA3LjM5NzIgMTEuODA4MyA3LjUyNDk4QzExLjkzNjEgNy42NTI3NiAxMiA3LjgxMTA5IDEyIDcuOTk5OThDMTIgOC4xODg4NyAxMS45MzYxIDguMzQ3MiAxMS44MDgzIDguNDc0OThDMTEuNjgwNiA4LjYwMjc2IDExLjUyMjIgOC42NjY2NSAxMS4zMzMzIDguNjY2NjVINC42NjY2N1pcIiAvPlxuICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwicnRlLWNoZWNrYm94LXRleHQtY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8bGFiZWwgXG4gICAgICAgICAgICAqbmdJZj1cInNob3dMYWJlbCgpXCIgXG4gICAgICAgICAgICBbZm9yXT1cImlkKClcIiBcbiAgICAgICAgICAgIGNsYXNzPVwicnRlLWNoZWNrYm94LWxhYmVsXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAgICAgICAnZXJyb3InOiBlcnJvcigpLFxuICAgICAgICAgICAgICAgICdyZWFkLW9ubHknOiByZWFkT25seSgpLFxuICAgICAgICAgICAgICAgICdkaXNhYmxlZCc6IGRpc2FibGVkKClcbiAgICAgICAgICAgIH1cIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHt7IGxhYmVsKCkgfX1cbiAgICAgICAgICAgIDwvbGFiZWw+XG4gICAgICAgICAgICA8cCBjbGFzcz1cInJ0ZS1jaGVja2JveC1kZXNjcmlwdGlvblwiPnt7IGRlc2NyaXB0aW9uKCkgfX08L3A+XG4gICAgICAgICAgICA8cCAqbmdJZj1cImVycm9yKCkgJiYgZXJyb3JNZXNzYWdlKClcIiBjbGFzcz1cInJ0ZS1jaGVja2JveC1lcnJvclwiPnt7IGVycm9yTWVzc2FnZSgpIH19PC9wPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiJdfQ==