npm - @basis-ng/primitives - Versions diffs - 0.0.1-alpha.0 - Mend

@basis-ng/primitives 0.0.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/fesm2022/basis-ng-primitives.mjs ADDED Viewed

@@ -0,0 +1,2415 @@
+import * as i0 from '@angular/core';
+import { signal, inject, RendererFactory2, Injectable, input, Component, TemplateRef, Directive, computed, model, output, contentChildren, viewChild, Renderer2, effect, HostListener, ElementRef, afterNextRender, afterRenderEffect, linkedSignal, contentChild } from '@angular/core';
+import { NgStyle, NgClass, CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import { icons, createElement } from 'lucide';
+import { NgModel, ControlContainer } from '@angular/forms';
+import * as i1 from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragHandle, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
+import * as i1$1 from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuTrigger } from '@angular/cdk/menu';
+class ThemeService {
+    /**
+     * Signal representing the current theme.
+     *
+     * Possible values:
+     * - `'light'`: Light theme.
+     * - `'dark'`: Dark theme.
+     * - `'auto'`: Automatically determine the theme.
+     */
+    theme = signal('auto');
+    /**
+     * Renderer2 instance for manipulating the DOM.
+     * Used to set the `data-theme` attribute on the document root (`<html>`).
+     */
+    renderer;
+    /**
+     * RendererFactory2 instance for creating Renderer2 instances.
+     * Injected to create the renderer.
+     */
+    rendererFactory = inject(RendererFactory2);
+    constructor() {
+        this.renderer = this.rendererFactory.createRenderer(null, null);
+    }
+    /**
+     * Applies the specified theme to the document root (`<html>`).
+     *
+     * @param theme - The theme to apply. Possible values:
+     *   - `'light'`: Apply the light theme.
+     *   - `'dark'`: Apply the dark theme.
+     *   - `'auto'`: Remove the theme attribute and let the system decide.
+     */
+    applyTheme(theme) {
+        this.theme.set(theme);
+        if (theme === 'auto') {
+            this.removeTheme();
+            return;
+        }
+        this.renderer.setAttribute(document.documentElement, 'data-theme', theme);
+    }
+    /**
+     * Toggles the theme between `'light'` and `'dark'`.
+     * If the current theme is `'light'`, it switches to `'dark'`, and vice versa.
+     */
+    toggleTheme() {
+        this.applyTheme(this.theme() === 'light' ? 'dark' : 'light');
+    }
+    /**
+     * Removes the `data-theme` attribute from the document body.
+     * This is used when the theme is set to `'auto'`.
+     */
+    removeTheme() {
+        this.renderer.removeAttribute(document.documentElement, 'data-theme');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+class Spinner {
+    active = input(true);
+    color = input('var(--foreground)');
+    backgroundColor = input('transparent');
+    size = input(20);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Spinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: Spinner, isStandalone: true, selector: "r-spinner", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\r\n  <section [ngStyle]=\"{ background: backgroundColor() }\" class=\"background\">\r\n    <svg\r\n      [attr.height]=\"size()\"\r\n      [attr.width]=\"size()\"\r\n      preserveAspectRatio=\"xMidYMid\"\r\n      style=\"\r\n        shape-rendering: auto;\r\n        display: block;\r\n        background: rgba(122, 122, 122, 0);\r\n      \"\r\n      viewBox=\"0 0 100 100\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <g>\r\n        <g transform=\"rotate(0 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.9166666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(30 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.8333333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(60 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.75s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(90 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.6666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(120 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5833333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(150 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(180 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.4166666666666667s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(210 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.3333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(240 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.25s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(270 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.16666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(300 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.08333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(330 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"0s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g />\r\n      </g>\r\n    </svg>\r\n  </section>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Spinner, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-spinner', imports: [NgStyle], template: "@if (active()) {\r\n  <section [ngStyle]=\"{ background: backgroundColor() }\" class=\"background\">\r\n    <svg\r\n      [attr.height]=\"size()\"\r\n      [attr.width]=\"size()\"\r\n      preserveAspectRatio=\"xMidYMid\"\r\n      style=\"\r\n        shape-rendering: auto;\r\n        display: block;\r\n        background: rgba(122, 122, 122, 0);\r\n      \"\r\n      viewBox=\"0 0 100 100\"\r\n      xmlns=\"http://www.w3.org/2000/svg\">\r\n      <g>\r\n        <g transform=\"rotate(0 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.9166666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(30 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.8333333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(60 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.75s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(90 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.6666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(120 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5833333333333334s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(150 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.5s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(180 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.4166666666666667s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(210 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.3333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(240 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.25s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(270 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.16666666666666666s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(300 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"-0.08333333333333333s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g transform=\"rotate(330 50 50)\">\r\n          <rect\r\n            [attr.fill]=\"color()\"\r\n            height=\"20\"\r\n            rx=\"3\"\r\n            ry=\"3.2800000000000002\"\r\n            width=\"6\"\r\n            x=\"47\"\r\n            y=\"10\">\r\n            <animate\r\n              attributeName=\"opacity\"\r\n              begin=\"0s\"\r\n              dur=\"1s\"\r\n              keyTimes=\"0;1\"\r\n              repeatCount=\"indefinite\"\r\n              values=\"1;0\" />\r\n          </rect>\r\n        </g>\r\n        <g />\r\n      </g>\r\n    </svg>\r\n  </section>\r\n}\r\n" }]
+        }] });
+class Button {
+    /** The variant of the button. */
+    variant = input('primary');
+    /** The size of the button. */
+    size = input('default');
+    /** Whether is loading. */
+    loading = input(false);
+    /** Whether the padding should be equal vertically and horizontally. */
+    equalPadding = input(false);
+    /** Whether the button is toggleable. */
+    toggle = input(false);
+    /** The value of the button when it is toggled. */
+    isToggled = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: Button, isStandalone: true, selector: "button[r-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, equalPadding: { classPropertyName: "equalPadding", publicName: "equalPadding", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null }, isToggled: { classPropertyName: "isToggled", publicName: "isToggled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" size-\" + size()", "class.equal-padding": "equalPadding()", "class.loading": "loading()", "class.toggled": "isToggled()" } }, ngImport: i0, template: "@if (loading()) {\r\n  <r-spinner\r\n    [active]=\"loading()\"\r\n    [size]=\"18\"\r\n    [color]=\"\r\n      variant() === 'primary'\r\n        ? 'var(--primary-foreground)'\r\n        : 'var(--secondary-foreground)'\r\n    \" />\r\n}\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: Spinner, selector: "r-spinner", inputs: ["active", "color", "backgroundColor", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Button, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[r-button]', imports: [Spinner], host: {
+                        '[class]': 'variant() + " size-" + size()',
+                        '[class.equal-padding]': 'equalPadding()',
+                        '[class.loading]': 'loading()',
+                        '[class.toggled]': 'isToggled()',
+                    }, template: "@if (loading()) {\r\n  <r-spinner\r\n    [active]=\"loading()\"\r\n    [size]=\"18\"\r\n    [color]=\"\r\n      variant() === 'primary'\r\n        ? 'var(--primary-foreground)'\r\n        : 'var(--secondary-foreground)'\r\n    \" />\r\n}\r\n<ng-content />\r\n" }]
+        }] });
+class ButtonGroup {
+    /**
+     * Whether the buttons should be spaced.
+     */
+    spaced = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ButtonGroup, isStandalone: true, selector: "r-button-group", inputs: { spaced: { classPropertyName: "spaced", publicName: "spaced", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.spaced": "spaced()" }, classAttribute: "button-group" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-button-group',
+                    template: `<ng-content />`,
+                    host: {
+                        class: 'button-group',
+                        '[class.spaced]': 'spaced()',
+                    },
+                }]
+        }] });
+class LazyContentDirective {
+    tpl = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LazyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: LazyContentDirective, isStandalone: true, selector: "[r-lazy]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LazyContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[r-lazy]',
+                    standalone: true,
+                }]
+        }] });
+class Icon {
+    /**
+     * The sanitizer service.
+     */
+    sanitizer = inject(DomSanitizer);
+    /**
+     * The icon of the text field.
+     */
+    icon = input.required();
+    /**
+     * The size of the icon.
+     */
+    size = input(24);
+    /**
+     * The stroke of the icon.
+     */
+    strokeWidth = input(1.8);
+    /**
+     * The color of the icon.
+     */
+    color = input('var(--foreground, #798194)');
+    /**
+     * The svg of the icon.
+     */
+    iconSvg = computed(() => {
+        if (!icons[this.icon()]) {
+            console.error(`Icon '${this.icon()}' not found in Lucide icons.`);
+            return this.sanitizer.bypassSecurityTrustHtml('');
+        }
+        const iconSvg = createElement(icons[this.icon()], {
+            width: this.size(),
+            height: this.size(),
+            stroke: this.color(),
+            'stroke-width': this.strokeWidth(),
+        });
+        return this.sanitizer.bypassSecurityTrustHtml(iconSvg.outerHTML);
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Icon, isStandalone: true, selector: "i[r-icon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSvg()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Icon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'i[r-icon]',
+                    imports: [],
+                    template: ``,
+                    host: {
+                        '[innerHTML]': 'iconSvg()',
+                    },
+                }]
+        }] });
+class UtilsService {
+    debounceTimer;
+    /**
+     * Debounce with optional delay
+     * @param {any} func - The function to debounce
+     * @param {any} delay - The delay in milliseconds
+     */
+    debounce(func, delay) {
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(func, delay);
+    }
+    /**
+     * Stop debounce
+     */
+    stopDebounce() {
+        clearTimeout(this.debounceTimer);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UtilsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+class Search {
+    /**
+     * The label associated with the search component.
+     */
+    label = input();
+    /**
+     * The maximum width of the search component.
+     */
+    maxWidth = input('');
+    /**
+     * The placeholder of the text field.
+     */
+    placeholder = input('');
+    /**
+     * Indicates whether the search component is searching.
+     */
+    searching = model(false);
+    /**
+     * Indicates whether the search component is in an invalid state.
+     */
+    invalid = model(false);
+    /**
+     * Indicates whether the search component is disabled.
+     */
+    disabled = model(false);
+    /**
+     * The value of the selected option.
+     */
+    selectedValue = model(null);
+    /**
+     * The search value.
+     */
+    searchValue = model('');
+    /**
+     * Emits the value of the search component when the value changes.
+     */
+    searchChange = output();
+    /**
+     * Emits when the search component is focused.
+     */
+    focused = signal(false);
+    /**
+     * Indicates whether the options dropdown is open.
+     */
+    isOpen = signal(false);
+    /**
+     * The options available for selection.
+     */
+    options = contentChildren(Option);
+    /**
+     * Indicates whether the search component has no options.
+     */
+    noOptions = computed(() => !this.options() || this.options().length === 0);
+    /**
+     * Reference to the select element within the component
+     * @private
+     */
+    select = viewChild('select');
+    /**
+     * Reference to the renderer
+     * @private
+     */
+    renderer = inject(Renderer2);
+    /**
+     * The icon name to display.
+     */
+    selectIconName = computed(() => {
+        return this.searching()
+            ? 'LoaderCircle'
+            : this.selectedValue()
+                ? 'X'
+                : 'ChevronDown';
+    });
+    /**
+     * The icon size to display.
+     */
+    selectIconSize = computed(() => {
+        return this.searching() ? 17 : this.selectedValue() ? 18 : 20;
+    });
+    /**
+     * The debounce time for the search input.
+     */
+    debounceTime = input(300);
+    /**
+     * Reference to the UtilsService
+     * @private
+     */
+    utilsService = inject(UtilsService);
+    /**
+     * Initializes the search component.
+     */
+    constructor() {
+        effect(() => this.renderOptions());
+    }
+    /**
+     * Renders the options within the select element.
+     * @private
+     */
+    renderOptions() {
+        const select = this.select()?.nativeElement;
+        const options = this.options();
+        if (!select || !options || options.length === 0) {
+            return;
+        }
+        // Clear the existing options
+        select.innerHTML = '';
+        // Append the options to the select
+        options.forEach(option => {
+            this.renderer.appendChild(select, option.el.nativeElement);
+        });
+    }
+    /**
+     * Handles the change event of the input text.
+     */
+    onInputValueChange(event) {
+        this.searching.set(true);
+        const value = event.target.value;
+        this.searchValue.set(value);
+        // Use the debounce method from UtilsService
+        this.utilsService.debounce(() => {
+            this.searchChange.emit(value);
+        }, this.debounceTime());
+    }
+    /**
+     * Resets the search component.
+     */
+    reset() {
+        this.selectedValue.set(null);
+        this.searchValue.set('');
+    }
+    /**
+     * Handles the selection change event from the native select element.
+     * @param event The selection change event.
+     */
+    onSelectValueChange(event) {
+        const select = event.target;
+        const value = select.value === 'null' ? null : select.value;
+        this.selectedValue.set(value);
+        this.isOpen.set(false);
+    }
+    /**
+     * Handles click events outside the select component to close the options dropdown.
+     * @param event The mouse click event.
+     */
+    onOutsideClick(event) {
+        if (!this.select().nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    /**
+     * Handles keyboard events to open or close the options dropdown.
+     * @param event The keyboard event.
+     */
+    onKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.isOpen.set(false);
+        }
+    }
+    /**
+     * Handles the icon click event.
+     */
+    handleIconClick() {
+        if (this.selectedValue()) {
+            this.reset();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Search, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: Search, isStandalone: true, selector: "r-search", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searching: "searchingChange", invalid: "invalidChange", disabled: "disabledChange", selectedValue: "selectedValueChange", searchValue: "searchValueChange", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onOutsideClick($event)" }, properties: { "style.max-width": "maxWidth()", "class.invalid": "invalid()", "class.disabled": "disabled()", "class.label-up": "(searchValue() || selectedValue() || placeholder() || focused()) && label()" } }, queries: [{ propertyName: "options", predicate: Option, isSignal: true }], viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Label -->\r\n@if (label()) {\r\n  <label>\r\n    {{ label() }}\r\n  </label>\r\n}\r\n\r\n@if (!selectedValue()) {\r\n  <section [class.large]=\"noOptions() && !searching()\">\r\n    <!-- Input -->\r\n    <input\r\n      #input\r\n      [value]=\"searchValue()\"\r\n      [placeholder]=\"placeholder() || ''\"\r\n      [disabled]=\"disabled()\"\r\n      (focus)=\"focused.set(true)\"\r\n      (blur)=\"focused.set(false)\"\r\n      (input)=\"onInputValueChange($event)\" />\r\n\r\n    <!-- Clear Button -->\r\n    @if (searchValue() || selectedValue()) {\r\n      <i\r\n        r-icon\r\n        icon=\"X\"\r\n        [size]=\"18\"\r\n        tabindex=\"0\"\r\n        (click)=\"searchValue.set('')\"\r\n        (keydown.enter)=\"searchValue.set('')\"\r\n        (keydown.space)=\"searchValue.set('')\"\r\n        [color]=\"\r\n          invalid()\r\n            ? 'var(--error-foreground, #c40000ab)'\r\n            : ' var(--input-foreground, #798194)'\r\n        \"></i>\r\n    }\r\n  </section>\r\n}\r\n\r\n<!-- Select -->\r\n<select\r\n  #select\r\n  [value]=\"selectedValue()\"\r\n  (change)=\"onSelectValueChange($event)\"\r\n  [class.no-options]=\"noOptions()\"\r\n  (mousedown)=\"isOpen.set(true)\"\r\n  [disabled]=\"disabled()\"></select>\r\n\r\nnooptions: {{ noOptions() }} searching: {{ searching() }}\r\n\r\n@if (!noOptions() || searching()) {\r\n  <!-- Icon -->\r\n  <div class=\"icon-wrapper\">\r\n    <i\r\n      r-icon\r\n      [icon]=\"selectIconName()\"\r\n      [class.open]=\"isOpen()\"\r\n      [class.select-has-value]=\"selectedValue()\"\r\n      (click)=\"handleIconClick()\"\r\n      (keydown.enter)=\"handleIconClick()\"\r\n      (keydown.space)=\"handleIconClick()\"\r\n      tabindex=\"0\"\r\n      [class.searching]=\"searching()\"\r\n      [size]=\"selectIconSize()\"\r\n      [color]=\"\r\n        invalid()\r\n          ? 'var(--error-foreground, #c40000ab)'\r\n          : ' var(--input-foreground, #798194)'\r\n      \"></i>\r\n  </div>\r\n}\r\n\r\n<!-- Projected Options -->\r\n<ng-content />\r\n", dependencies: [{ kind: "component", type: Icon, selector: "i[r-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Search, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-search', imports: [Icon], host: {
+                        '[style.max-width]': 'maxWidth()',
+                        '[class.invalid]': 'invalid()',
+                        '[class.disabled]': 'disabled()',
+                        '[class.label-up]': '(searchValue() || selectedValue() || placeholder() || focused()) && label()',
+                        '(keydown)': 'onKeyDown($event)',
+                    }, template: "<!-- Label -->\r\n@if (label()) {\r\n  <label>\r\n    {{ label() }}\r\n  </label>\r\n}\r\n\r\n@if (!selectedValue()) {\r\n  <section [class.large]=\"noOptions() && !searching()\">\r\n    <!-- Input -->\r\n    <input\r\n      #input\r\n      [value]=\"searchValue()\"\r\n      [placeholder]=\"placeholder() || ''\"\r\n      [disabled]=\"disabled()\"\r\n      (focus)=\"focused.set(true)\"\r\n      (blur)=\"focused.set(false)\"\r\n      (input)=\"onInputValueChange($event)\" />\r\n\r\n    <!-- Clear Button -->\r\n    @if (searchValue() || selectedValue()) {\r\n      <i\r\n        r-icon\r\n        icon=\"X\"\r\n        [size]=\"18\"\r\n        tabindex=\"0\"\r\n        (click)=\"searchValue.set('')\"\r\n        (keydown.enter)=\"searchValue.set('')\"\r\n        (keydown.space)=\"searchValue.set('')\"\r\n        [color]=\"\r\n          invalid()\r\n            ? 'var(--error-foreground, #c40000ab)'\r\n            : ' var(--input-foreground, #798194)'\r\n        \"></i>\r\n    }\r\n  </section>\r\n}\r\n\r\n<!-- Select -->\r\n<select\r\n  #select\r\n  [value]=\"selectedValue()\"\r\n  (change)=\"onSelectValueChange($event)\"\r\n  [class.no-options]=\"noOptions()\"\r\n  (mousedown)=\"isOpen.set(true)\"\r\n  [disabled]=\"disabled()\"></select>\r\n\r\nnooptions: {{ noOptions() }} searching: {{ searching() }}\r\n\r\n@if (!noOptions() || searching()) {\r\n  <!-- Icon -->\r\n  <div class=\"icon-wrapper\">\r\n    <i\r\n      r-icon\r\n      [icon]=\"selectIconName()\"\r\n      [class.open]=\"isOpen()\"\r\n      [class.select-has-value]=\"selectedValue()\"\r\n      (click)=\"handleIconClick()\"\r\n      (keydown.enter)=\"handleIconClick()\"\r\n      (keydown.space)=\"handleIconClick()\"\r\n      tabindex=\"0\"\r\n      [class.searching]=\"searching()\"\r\n      [size]=\"selectIconSize()\"\r\n      [color]=\"\r\n        invalid()\r\n          ? 'var(--error-foreground, #c40000ab)'\r\n          : ' var(--input-foreground, #798194)'\r\n      \"></i>\r\n  </div>\r\n}\r\n\r\n<!-- Projected Options -->\r\n<ng-content />\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { onOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+class Input {
+    /**
+     * The type of the input.
+     */
+    type = input('text');
+    /**
+     * The placeholder text for the input.
+     */
+    placeholder = input('');
+    /**
+     * The value of the input.
+     */
+    value = signal(null);
+    /**
+     * Whether the input is invalid.
+     */
+    invalid = model(false);
+    /**
+     * Whether the input is disabled.
+     */
+    disabled = model(false);
+    /**
+     * The maximum width of the input.
+     */
+    maxWidth = input('');
+    /**
+     * The number of decimal places for number input.
+     */
+    decimals = input(2);
+    /**
+     * The type of number input (integer or decimal).
+     */
+    numberType = input('integer');
+    /**
+     * Whether the input type is number.
+     */
+    isNumberType = computed(() => this.type() === 'number');
+    /**
+     * Whether the input is focused.
+     */
+    focused = signal(false);
+    /**
+     * Event emitted when the value changes.
+     */
+    valueChange = output();
+    /**
+     * Reference to the input element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Reference to the ngModel directive.
+     */
+    ngModel = inject(NgModel, { optional: true });
+    /**
+     * After the view has been initialized, set the value of the select.
+     */
+    ngAfterViewInit() {
+        const value = this.el.nativeElement.value || this.ngModel?.model;
+        this.value.set(this.isNumberType() ? this.formatNumber(value) : value);
+    }
+    /**
+     * Handles the input event.
+     * @param event The input event.
+     */
+    onInput(event) {
+        const target = event.target;
+        // If the input is not of number type, update the value and emit the value change event.
+        if (!this.isNumberType()) {
+            this.value.set(target.value);
+            this.valueChange.emit(target.value);
+        }
+    }
+    /**
+     * The blur event handler.
+     * @param event - The blur event.
+     */
+    onBlur(event) {
+        this.focused.set(false);
+        // If the input is of number type, format the value and emit the value change event.
+        if (this.isNumberType()) {
+            const formattedValue = this.formatNumber(event.target.value);
+            this.el.nativeElement.value = formattedValue || '';
+            this.value.set(formattedValue);
+            this.valueChange.emit(formattedValue);
+        }
+    }
+    /**
+     * Formats the number value.
+     * @param value - The value to format.
+     * @returns The formatted value.
+     */
+    formatNumber(value) {
+        if (value) {
+            const numericValue = Number(value);
+            return this.numberType() === 'integer'
+                ? Math.round(numericValue).toString()
+                : numericValue.toFixed(this.decimals());
+        }
+        else {
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Input, isStandalone: true, selector: "input[r-input]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, numberType: { classPropertyName: "numberType", publicName: "numberType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "input": "onInput($event)", "focus": "focused.set(true)", "blur": "onBlur($event)" }, properties: { "type": "type()", "placeholder": "placeholder() || \"\"", "class.ng-invalid": "invalid()", "class.disabled": "disabled()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Input, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[r-input]',
+                    template: ``,
+                    host: {
+                        '[type]': 'type()',
+                        '[placeholder]': 'placeholder() || ""',
+                        '[class.ng-invalid]': 'invalid()',
+                        '[class.disabled]': 'disabled()',
+                        '[style.max-width]': 'maxWidth()',
+                        '(input)': 'onInput($event)',
+                        '(focus)': 'focused.set(true)',
+                        '(blur)': 'onBlur($event)',
+                    },
+                }]
+        }] });
+class Select {
+    /**
+     * The value of the input.
+     */
+    value = signal(null);
+    /**
+     * Whether the input is invalid.
+     */
+    invalid = model(false);
+    /**
+     * Whether the input is disabled.
+     */
+    disabled = model(false);
+    /**
+     * The maximum width of the input.
+     */
+    maxWidth = input('');
+    /**
+     * Event emitted when the value changes.
+     */
+    valueChange = output();
+    /**
+     * Reference to the input element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Indicates whether the options dropdown is open.
+     */
+    isOpen = signal(false);
+    /**
+     * Reference to the renderer
+     * @private
+     */
+    renderer = inject(Renderer2);
+    /**
+     * After the view has been initialized, set the value of the select.
+     */
+    ngAfterViewInit() {
+        this.value.set(this.el.nativeElement.value);
+    }
+    /**
+     * Handles the select change event.
+     * @param value - The value of the select.
+     */
+    change(value) {
+        this.valueChange.emit(value);
+        this.value.set(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Select, isStandalone: true, selector: "select[r-select]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "change": "change($event.target.value)" }, properties: { "class.ng-invalid": "invalid()", "class.disabled": "disabled()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ` <ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Select, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'select[r-select]',
+                    template: ` <ng-content />`,
+                    host: {
+                        '[class.ng-invalid]': 'invalid()',
+                        '[class.disabled]': 'disabled()',
+                        '[style.max-width]': 'maxWidth()',
+                        '(change)': 'change($event.target.value)',
+                    },
+                }]
+        }] });
+class Option {
+    /**
+     * Reference to the host element.
+     */
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Option, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: Option, isStandalone: true, selector: "option[r-option]", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Option, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'option[r-option]',
+                    template: `<ng-content />`,
+                }]
+        }] });
+class Switch {
+    /**
+     * Value of the switch.
+     */
+    value = model(false);
+    /**
+     * The size of the switch.
+     */
+    size = input('default');
+    /**
+     * Reference to the switch element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Event emitted when the value changes.
+     */
+    valueChange = output();
+    /**
+     * Initializes the switch value after the view is initialized.
+     */
+    ngAfterViewInit() {
+        this.value.set(this.el.nativeElement.checked);
+    }
+    /**
+     * Toggles the value of the switch.
+     */
+    toggleValue() {
+        const newValue = !this.value();
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
+    }
+    /**
+     * Sets the value of the switch.
+     * @param newValue - The new value to set.
+     */
+    setValue(newValue) {
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Switch, isStandalone: true, selector: "input[r-switch]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.arrowleft": "setValue(false)", "keydown.arrowright": "setValue(true)" }, properties: { "attr.role": "switch", "attr.checked": "value()", "attr.aria-checked": "value()", "class": "size()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Switch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[r-switch]',
+                    template: ``,
+                    host: {
+                        '[attr.role]': 'switch',
+                        '[attr.checked]': 'value()',
+                        '[attr.aria-checked]': 'value()',
+                        '(click)': 'toggleValue()',
+                        '[class]': 'size()',
+                        '(keydown.enter)': 'toggleValue()',
+                        '(keydown.arrowleft)': 'setValue(false)',
+                        '(keydown.arrowright)': 'setValue(true)',
+                    },
+                }]
+        }] });
+class Table {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: Table, isStandalone: true, selector: "r-table", ngImport: i0, template: "<ng-content select=\"[r-row-header]\" />\r\n<ng-content select=\"[r-row-subheader]\" />\r\n<div class=\"scroll-section\">\r\n  <ng-content />\r\n</div>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Table, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-table', template: "<ng-content select=\"[r-row-header]\" />\r\n<ng-content select=\"[r-row-subheader]\" />\r\n<div class=\"scroll-section\">\r\n  <ng-content />\r\n</div>\r\n" }]
+        }] });
+class Row {
+    header = input(false);
+    subheader = input(false);
+    clickable = input(false);
+    highlighted = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Row, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Row, isStandalone: true, selector: "r-row", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, highlighted: { classPropertyName: "highlighted", publicName: "highlighted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"row-container\"\r\n  [ngClass]=\"{\r\n    clickable: clickable(),\r\n    header: header(),\r\n    subheader: subheader(),\r\n    highlighted: highlighted(),\r\n  }\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Row, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-row', imports: [NgClass], template: "<div\r\n  class=\"row-container\"\r\n  [ngClass]=\"{\r\n    clickable: clickable(),\r\n    header: header(),\r\n    subheader: subheader(),\r\n    highlighted: highlighted(),\r\n  }\">\r\n  <ng-content />\r\n</div>\r\n" }]
+        }] });
+class RowItem {
+    widthPx = input();
+    alignedLeft = input(false);
+    isHeader = input(false);
+    style = computed(() => {
+        return {
+            width: `${this.widthPx()}px`,
+            justifyContent: this.alignedLeft() ? 'flex-start' : 'center',
+        };
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RowItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: RowItem, isStandalone: true, selector: "r-row-item", inputs: { widthPx: { classPropertyName: "widthPx", publicName: "widthPx", isSignal: true, isRequired: false, transformFunction: null }, alignedLeft: { classPropertyName: "alignedLeft", publicName: "alignedLeft", isSignal: true, isRequired: false, transformFunction: null }, isHeader: { classPropertyName: "isHeader", publicName: "isHeader", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\r\n  <ng-content />\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RowItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-row-item', imports: [NgStyle], template: "<div [ngStyle]=\"style()\" class=\"row-item-container\">\r\n  <ng-content />\r\n</div>\r\n" }]
+        }] });
+class Tab {
+    el;
+    value = input.required();
+    disabled = input(false);
+    selected = signal(false);
+    highlighted = signal(false);
+    selectEmitter = output();
+    constructor(el) {
+        this.el = el;
+    }
+    /**
+     * Emit the select event when the tab is selected.
+     */
+    onSelect() {
+        this.selectEmitter.emit(this);
+    }
+    /**
+     * Highlight the tab on mouse enter if it is not disabled and not in keyboard-active mode.
+     */
+    onMouseEnter() {
+        if (!this.disabled() &&
+            !this.el.nativeElement.parentElement.parentElement.classList.contains('keyboard-active')) {
+            this.highlighted.set(true);
+        }
+    }
+    /**
+     * Remove the highlight from the tab on mouse leave if it is not disabled and not in keyboard-active mode.
+     */
+    onMouseLeave() {
+        if (!this.disabled() &&
+            !this.el.nativeElement.parentElement.parentElement.classList.contains('keyboard-active')) {
+            this.highlighted.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tab, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Tab, isStandalone: true, selector: "r-tab", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEmitter: "selectEmitter" }, ngImport: i0, template: "<span\r\n  tabindex=\"0\"\r\n  (click)=\"onSelect()\"\r\n  (keydown.enter)=\"onSelect()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n  [ngClass]=\"{ selected: selected(), highlighted: highlighted() }\">\r\n  <ng-content\r\n/></span>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tab, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-tab', imports: [NgClass], template: "<span\r\n  tabindex=\"0\"\r\n  (click)=\"onSelect()\"\r\n  (keydown.enter)=\"onSelect()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n  [ngClass]=\"{ selected: selected(), highlighted: highlighted() }\">\r\n  <ng-content\r\n/></span>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+class Tabs {
+    tabs = contentChildren(Tab);
+    selectedIndex = signal(-1);
+    selectedValue = model(null);
+    highlightedIndex = signal(-1);
+    changesEmitter = output();
+    lastSelectedValue = null;
+    constructor() {
+        effect(() => {
+            this.handleTabSelection();
+            this.handleExternalSelectedValue();
+            this.handleScrollToSelectedTab();
+        });
+    }
+    /**
+     * Handle the selection of a tab.
+     */
+    handleTabSelection() {
+        this.tabs().forEach((tab, index) => {
+            tab.selectEmitter.subscribe(tabEmitted => {
+                this.selectTab(tabEmitted, index);
+                this.highlightTab(index);
+                this.handleTabStates();
+                this.changesEmitter.emit(tab.value());
+            });
+        });
+    }
+    /**
+     * Select a tab.
+     * @param {Tab} tab - The tab to select.
+     * @param {number} index - The index of the tab.
+     */
+    selectTab(tab, index) {
+        this.selectedValue.set(tab.value());
+        this.lastSelectedValue = tab.value();
+        this.selectedIndex.set(index);
+    }
+    /**
+     * Highlight a tab.
+     * @param {number} index - The index of the tab to highlight.
+     */
+    highlightTab(index) {
+        this.highlightedIndex.set(index);
+    }
+    /**
+     * Handle the states of the tabs.
+     */
+    handleTabStates() {
+        this.tabs().forEach((tab, index) => {
+            tab.selected.set(index === this.selectedIndex());
+            tab.highlighted.set(index === this.highlightedIndex());
+        });
+    }
+    /**
+     * Handle the external selected value.
+     */
+    handleExternalSelectedValue() {
+        if (this.lastSelectedValue !== this.selectedValue()) {
+            const selectedOptionIndex = this.tabs().findIndex(tab => tab.value() === this.selectedValue());
+            if (selectedOptionIndex !== -1) {
+                this.selectTab(this.tabs()[selectedOptionIndex], selectedOptionIndex);
+                this.highlightTab(selectedOptionIndex);
+                this.handleTabStates();
+            }
+        }
+    }
+    /**
+     * Scroll to the selected tab.
+     */
+    handleScrollToSelectedTab() {
+        if (this.selectedIndex() !== -1) {
+            this.scrollToTab(this.selectedIndex(), 'smooth');
+        }
+    }
+    /**
+     * Handle keyboard events for navigation and selection.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    handleKeyboard(event) {
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusOption('next');
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusOption('previous');
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.selectFocusedTab();
+                break;
+        }
+    }
+    /**
+     * Focus on the next or previous tab.
+     * @param {'next' | 'previous'} direction - The direction to move the focus.
+     */
+    focusOption(direction) {
+        let index = this.highlightedIndex();
+        const increment = direction === 'next' ? 1 : -1;
+        index += increment;
+        while (index >= 0 &&
+            index < this.tabs().length &&
+            this.tabs()[index].disabled()) {
+            index += increment;
+        }
+        if (index >= 0 && index < this.tabs().length) {
+            this.highlightTab(index);
+            this.handleTabStates();
+            this.scrollToTab(this.highlightedIndex(), 'smooth');
+        }
+    }
+    /**
+     * Select the currently focused tab.
+     */
+    selectFocusedTab() {
+        this.selectTab(this.tabs()[this.highlightedIndex()], this.highlightedIndex());
+        this.handleTabStates();
+    }
+    /**
+     * Scroll to a specific tab.
+     * @param {number} index - The index of the tab to scroll to.
+     * @param {string} behavior - The scroll behavior ('instant' or 'smooth').
+     */
+    scrollToTab(index, behavior) {
+        const tabsElements = this.tabs();
+        if (tabsElements[index].el.nativeElement) {
+            tabsElements[index].el.nativeElement.scrollIntoView({
+                block: 'nearest',
+                behavior: behavior,
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Tabs, isStandalone: true, selector: "r-tabs", inputs: { selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", changesEmitter: "changesEmitter" }, host: { listeners: { "keydown": "handleKeyboard($event)" } }, queries: [{ propertyName: "tabs", predicate: Tab, isSignal: true }], ngImport: i0, template: "<div class=\"tabs\" [tabIndex]=\"0\">\r\n  <ng-content />\r\n</div>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-tabs', template: "<div class=\"tabs\" [tabIndex]=\"0\">\r\n  <ng-content />\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { handleKeyboard: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+class InViewportService {
+    elements = signal({});
+    observer;
+    /**
+     * Register an element to be tracked by the service.
+     * @param {string} id - The id of the element to register.
+     */
+    registerElement(id, nativeElement, initialVisibility) {
+        if (!(id in this.elements())) {
+            this.elements.set({ ...this.elements(), [id]: initialVisibility });
+            // Create an IntersectionObserver to track the element's visibility.
+            this.observer = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    const isVisible = entry.isIntersecting;
+                    this.updateElementVisibility(id, isVisible);
+                });
+            });
+            // Start observing the element.
+            this.observer.observe(nativeElement);
+        }
+    }
+    /**
+     * Unregister an element from being tracked by the service.
+     * @param {string} id - The id of the element to unregister.
+     */
+    unregisterElement(id) {
+        if (id in this.elements()) {
+            delete this.elements()[id];
+            this.observer.disconnect();
+        }
+    }
+    /**
+     * Update the visibility of an element.
+     * @param {string} id - The id of the element to update.
+     * @param {boolean} isVisible - The new visibility state of the element.
+     */
+    updateElementVisibility(id, isVisible) {
+        this.elements.set({ ...this.elements(), [id]: isVisible });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+class InViewportDirective {
+    inViewportId = input.required();
+    inViewportInitialVisibility = input(false);
+    el = inject(ElementRef);
+    inViewportService = inject(InViewportService);
+    constructor() {
+        afterNextRender({
+            write: () => {
+                this.inViewportService.registerElement(this.inViewportId(), this.el.nativeElement, this.inViewportInitialVisibility());
+            },
+        });
+    }
+    ngOnDestroy() {
+        this.inViewportService.unregisterElement(this.inViewportId());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: InViewportDirective, isStandalone: true, selector: "[r-in-viewport]", inputs: { inViewportId: { classPropertyName: "inViewportId", publicName: "inViewportId", isSignal: true, isRequired: true, transformFunction: null }, inViewportInitialVisibility: { classPropertyName: "inViewportInitialVisibility", publicName: "inViewportInitialVisibility", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InViewportDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[r-in-viewport]',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * A sliding sheet component that can be positioned on either side of the screen.
+ * The sheet slides in from the left or right edge and includes an overlay backdrop.
+ *
+ * @selector r-side-sheet
+ */
+class SideSheet {
+    /**
+     * Indicates whether the side sheet is open.
+     */
+    isOpen = model(false);
+    /**
+     * Specifies the side of the screen where the sheet is positioned.
+     * Can be either 'left' or 'right'.
+     */
+    side = input('right');
+    /**
+     * Specifies the width of the side sheet.
+     */
+    width = input('300px');
+    /**
+     * Computes whether the side sheet is positioned on the left side.
+     */
+    isLeft = computed(() => this.side() === 'left');
+    /**
+     * Computes whether the side sheet is positioned on the right side.
+     */
+    isRight = computed(() => this.side() === 'right');
+    /**
+     * Event emitted when the side sheet is closed.
+     */
+    closeSheet = output();
+    /**
+     * Reference to the host element of the side sheet.
+     */
+    el = inject(ElementRef);
+    /**
+     * Closes the side sheet when clicking outside of it.
+     *
+     * @param event - The click event.
+     */
+    closeOnOutsideClick(event) {
+        if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SideSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SideSheet, isStandalone: true, selector: "r-side-sheet", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "class.left": "isLeft()", "class.right": "!isLeft()", "class.open": "isOpen()", "style.width": "width()" } }, ngImport: i0, template: "<button class=\"close-button\" (click)=\"isOpen.set(false)\">\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"19\"\r\n    height=\"19\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"0.094rem\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    class=\"lucide lucide-x\">\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n</button>\r\n<ng-content />\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SideSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-side-sheet', standalone: true, imports: [CommonModule], host: {
+                        '[class.left]': 'isLeft()',
+                        '[class.right]': '!isLeft()',
+                        '[class.open]': 'isOpen()',
+                        '[style.width]': 'width()',
+                    }, template: "<button class=\"close-button\" (click)=\"isOpen.set(false)\">\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    width=\"19\"\r\n    height=\"19\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"0.094rem\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    class=\"lucide lucide-x\">\r\n    <path d=\"M18 6 6 18\" />\r\n    <path d=\"m6 6 12 12\" />\r\n  </svg>\r\n</button>\r\n<ng-content />\r\n" }]
+        }], propDecorators: { closeOnOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+class BottomSheet {
+    /**
+     * Indicates whether the bottom sheet is open.
+     */
+    isOpen = model(false);
+    /**
+     * The height of the bottom sheet.
+     */
+    height = input('30dvh');
+    /**
+     * Event emitted when the bottom sheet is closed.
+     */
+    closeSheet = output();
+    /**
+     * Indicates whether a drag event is in progress.
+     */
+    isDragging = signal(false);
+    /**
+     * The starting Y position of the drag event.
+     */
+    startY = signal(0);
+    /**
+     * The current Y translation of the bottom sheet in percentage.
+     */
+    translateY = signal(100);
+    /**
+     * The threshold for closing the bottom sheet, in percentage.
+     */
+    closeThreshold = input(30);
+    /**
+     * The computed transform property for the bottom sheet.
+     */
+    transform = computed(() => this.isDragging()
+        ? `translateY(${this.translateY()}%)`
+        : this.isOpen()
+            ? 'translateY(0%)'
+            : 'translateY(100%)');
+    /**
+     * The reference to the Bottom Sheet DOM element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Closes the bottom sheet when clicking outside of it.
+     * @param event The click event.
+     */
+    closeOnOutsideClick(event) {
+        if (this.isOpen() && !this.el.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+            this.closeSheet.emit();
+        }
+    }
+    /**
+     * Starts the drag event for the bottom sheet.
+     * @param event The pointer event that starts the drag.
+     */
+    startDrag(event) {
+        this.isDragging.set(true);
+        this.startY.set(event.clientY);
+        // Initialize translateY based on the current state:
+        this.translateY.set(this.isOpen() ? 0 : 100);
+        // Disable text selection for better UX
+        document.body.style.userSelect = 'none';
+        const move = (e) => this.updateDrag(e.clientY);
+        const end = () => {
+            this.isDragging.set(false);
+            this.snapToOpenOrClose();
+            // Restore text selection
+            document.body.style.userSelect = '';
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', end);
+        };
+        window.addEventListener('pointermove', move, { passive: false });
+        window.addEventListener('pointerup', end);
+    }
+    /**
+     * Updates the drag position of the bottom sheet.
+     * @param clientY The current Y position of the pointer.
+     */
+    updateDrag(clientY) {
+        const deltaPx = clientY - this.startY();
+        const sheetHeight = this.el.nativeElement.offsetHeight;
+        // Convert the pixel delta to a percentage relative to the sheet height
+        const deltaPercent = (deltaPx / sheetHeight) * 100;
+        // If open, the initial position is 0%; if closed, it is 100%
+        const newPos = Math.min(100, Math.max(0, this.isOpen() ? 0 + deltaPercent : 100 + deltaPercent));
+        this.translateY.set(newPos);
+    }
+    /**
+     * Snaps the bottom sheet to either open or closed state based on the drag position.
+     */
+    snapToOpenOrClose() {
+        if (this.translateY() > this.closeThreshold()) {
+            this.isOpen.set(false);
+        }
+        else {
+            this.isOpen.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: BottomSheet, isStandalone: true, selector: "r-bottom-sheet", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, closeThreshold: { classPropertyName: "closeThreshold", publicName: "closeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closeSheet: "closeSheet" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)" }, properties: { "style.height": "height()", "class.dragging": "isDragging()", "style.transform": "transform()", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"drag-section\" (pointerdown)=\"startDrag($event)\">\r\n  <div class=\"drag-indicator\"></div>\r\n</div>\r\n<ng-content />\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BottomSheet, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-bottom-sheet', standalone: true, imports: [CommonModule], host: {
+                        '[style.height]': 'height()',
+                        '[class.dragging]': 'isDragging()',
+                        '[style.transform]': 'transform()',
+                        '[class.open]': 'isOpen()',
+                    }, template: "<div class=\"drag-section\" (pointerdown)=\"startDrag($event)\">\r\n  <div class=\"drag-indicator\"></div>\r\n</div>\r\n<ng-content />\r\n" }]
+        }], propDecorators: { closeOnOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+/**
+ * Service that handles responsive design functionality
+ * Detects current device type based on window width and configurable breakpoints
+ */
+class ResponsiveService {
+    /** Signal that holds the breakpoint configuration */
+    breakpoints = signal({
+        mobile: 576,
+        tablet: 992,
+        desktop: 1200,
+    });
+    /** Signal that holds the current window width */
+    windowWidth = signal(0);
+    /**
+     * Computed signal that returns the current device type based on window width
+     * @returns The current device type ('mobile', 'tablet', or 'desktop')
+     */
+    currentDevice = computed(() => {
+        const width = this.windowWidth();
+        const breaks = this.breakpoints();
+        if (width < breaks.mobile) {
+            return 'mobile';
+        }
+        if (width < breaks.tablet) {
+            return 'tablet';
+        }
+        return 'desktop';
+    });
+    constructor() {
+        afterRenderEffect(() => {
+            this.initializeWindowWidth();
+            this.setupResizeListener();
+        });
+    }
+    /**
+     * Initializes the window width signal with the current window inner width
+     * Only called in browser environment
+     */
+    initializeWindowWidth() {
+        this.windowWidth.set(window.innerWidth);
+    }
+    /**
+     * Sets up the resize event listener to update window width
+     * Only called in browser environment
+     */
+    setupResizeListener() {
+        window.addEventListener('resize', () => {
+            this.windowWidth.set(window.innerWidth);
+        });
+    }
+    /**
+     * Updates the breakpoint configuration
+     * @param newBreakpoints - Partial breakpoint configuration to update
+     */
+    updateBreakpoints(newBreakpoints) {
+        this.breakpoints.update(current => ({
+            ...current,
+            ...newBreakpoints,
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResponsiveService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+class AttachedBox {
+    /**
+     * Input signal to define the interaction type: 'click' or 'hover'.
+     * Default is 'click'.
+     */
+    type = input('click');
+    /**
+     * The trigger element that will be used to open the content.
+     */
+    trigger = inject(ElementRef);
+    /**
+     * The content that will be displayed when the trigger is activated.
+     */
+    content = viewChild('content');
+    /**
+     * The position of the content relative to the trigger.
+     * Example values: 'top-left', 'bottom-center', etc.
+     */
+    position = model('right-top');
+    /**
+     * Signal indicating whether the content is visible or not.
+     */
+    isContentVisible = signal(false);
+    /**
+     * The gap (spacing) between the trigger and the content.
+     */
+    gap = model(10);
+    /**
+     * Signal that dynamically calculates and provides the adjusted position of the content.
+     * This position is adjusted to prevent overflow and ensure optimal visibility.
+     */
+    adjustedPosition = linkedSignal(() => this.calculateAdjustedPosition());
+    /**
+     * Signal that provides the animation parameters based on the adjusted
+     * position of the content. These parameters are used to animate the content.
+     */
+    animationParams = computed(() => {
+        const position = this.adjustedPosition();
+        const direction = position.split('-')[0];
+        const isCenter = position.includes('center');
+        const defaultParams = {
+            duration: '0.15s',
+            enterDelay: '0s',
+            leaveDelay: '0.1s',
+            scaleFrom: 0.99,
+            scaleTo: 1,
+            translateFrom: '',
+            translateTo: '',
+        };
+        switch (direction) {
+            case 'top':
+                return {
+                    ...defaultParams,
+                    translateFrom: isCenter
+                        ? 'translate(-50%, 10px)'
+                        : 'translateY(10px)',
+                    translateTo: isCenter ? 'translate(-50%, 0)' : 'translateY(0)',
+                };
+            case 'bottom':
+                return {
+                    ...defaultParams,
+                    translateFrom: isCenter
+                        ? 'translate(-50%, -10px)'
+                        : 'translateY(-10px)',
+                    translateTo: isCenter ? 'translate(-50%, 0)' : 'translateY(0)',
+                };
+            case 'left':
+                return {
+                    ...defaultParams,
+                    translateFrom: isCenter
+                        ? 'translate(10px, -50%)'
+                        : 'translateX(10px)',
+                    translateTo: isCenter ? 'translate(0, -50%)' : 'translateX(0)',
+                };
+            case 'right':
+                return {
+                    ...defaultParams,
+                    translateFrom: isCenter
+                        ? 'translate(-10px, -50%)'
+                        : 'translateX(-10px)',
+                    translateTo: isCenter ? 'translate(0, -50%)' : 'translateX(0)',
+                };
+            default:
+                return defaultParams;
+        }
+    });
+    /**
+     * Recalculates and updates the content's adjusted position when the window is scrolled.
+     * This ensures the content remains correctly positioned relative to the trigger even when scrolling.
+     */
+    onWindowEvent() {
+        this.adjustedPosition.set(this.calculateAdjustedPosition());
+    }
+    /**
+     * Closes the content when a click event occurs outside both the trigger and content elements.
+     * @param event The mouse event representing the click.
+     */
+    onClickOutside(event) {
+        if (this.isContentVisible() &&
+            this.isClickedOutsideContent(event) &&
+            this.isClickedOutsideTrigger(event)) {
+            this.isContentVisible.set(false);
+        }
+    }
+    /**
+     * Determines if a click event occurred outside the trigger and content elements.
+     * @param event The mouse event representing the click.
+     * @returns True if the click was outside both the trigger and content elements, false otherwise.
+     */
+    isClickedOutsideContent(event) {
+        const contentElement = this.content()?.nativeElement;
+        if (!contentElement) {
+            return false;
+        }
+        return !contentElement.contains(event.target);
+    }
+    /**
+     * Determines if a click event occurred outside the trigger element.
+     * @param event The mouse event representing the click.
+     * @returns True if the click was outside the trigger element, false otherwise.
+     */
+    isClickedOutsideTrigger(event) {
+        const triggerElement = this.trigger?.nativeElement;
+        if (!triggerElement) {
+            return false;
+        }
+        return !triggerElement.contains(event.target);
+    }
+    /**
+     * Handles keyboard events for the component.
+     * @param event The keyboard event to handle.
+     */
+    handleKeyboardEvent(event) {
+        if (event.key === 'Escape' || event.key === 'Enter') {
+            this.toggleContentVisibility();
+        }
+    }
+    /**
+     * Handles mouse events for the component.
+     * @param event The mouse event to handle.
+     */
+    handleMouseEvent(event) {
+        if (this.isClickedOutsideContent(event) &&
+            !this.isClickedOutsideTrigger(event)) {
+            this.toggleContentVisibility();
+        }
+    }
+    /**
+     * Toggles the visibility of the content, switching between visible and hidden states.
+     * This method is typically called in response to user interaction with the trigger element.
+     */
+    toggleContentVisibility() {
+        this.isContentVisible.set(!this.isContentVisible());
+    }
+    /**
+     * Shows the content (used for hover interaction).
+     */
+    showContent() {
+        this.isContentVisible.set(true);
+    }
+    /**
+     * Hides the content (used for hover interaction).
+     */
+    hideContent() {
+        this.isContentVisible.set(false);
+    }
+    /**
+     * Calculates the optimal adjusted position for the content relative to the trigger.
+     * This method considers available space in the viewport to prevent content overflow
+     * and ensures the content is fully visible to the user.
+     * @returns The adjusted position as a Position type string (e.g., 'bottom-left').
+     */
+    calculateAdjustedPosition() {
+        if (!this.trigger?.nativeElement || !this.content()?.nativeElement) {
+            return this.position();
+        }
+        const triggerElement = this.trigger.nativeElement;
+        const contentElement = this.content().nativeElement;
+        const triggerRect = triggerElement.getBoundingClientRect();
+        const contentRect = contentElement.getBoundingClientRect();
+        const extraMargin = this.gap();
+        const [primary, secondary] = this.position().split('-');
+        const adjustedPrimary = this.adjustPrimaryDirection(primary, triggerRect, contentRect, extraMargin);
+        const adjustedSecondary = this.adjustSecondaryAlignment(secondary, adjustedPrimary, triggerRect, contentRect);
+        return `${adjustedPrimary}-${adjustedSecondary}`;
+    }
+    /**
+     * Adjusts the primary direction (top, bottom, left, right) of the content's position
+     * based on available viewport space. This ensures the content does not overflow the screen
+     * in the primary direction.
+     * @param primary The initially desired primary direction.
+     * @param triggerRect The bounding rectangle of the trigger element.
+     * @param contentRect The bounding rectangle of the content element.
+     * @param margin Extra margin to consider for spacing around the content.
+     * @returns The adjusted primary direction.
+     */
+    adjustPrimaryDirection(primary, triggerRect, contentRect, margin) {
+        if (['top', 'bottom'].includes(primary)) {
+            const neededSpace = contentRect.height + margin;
+            const spaceBelow = window.innerHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            if (primary === 'bottom' &&
+                spaceBelow < neededSpace &&
+                spaceAbove > spaceBelow) {
+                return 'top';
+            }
+            if (primary === 'top' &&
+                spaceAbove < neededSpace &&
+                spaceBelow > spaceAbove) {
+                return 'bottom';
+            }
+        }
+        else {
+            const neededSpace = contentRect.width + margin;
+            const spaceRight = window.innerWidth - triggerRect.right;
+            const spaceLeft = triggerRect.left;
+            if (primary === 'right' &&
+                spaceRight < neededSpace &&
+                spaceLeft > spaceRight) {
+                return 'left';
+            }
+            if (primary === 'left' &&
+                spaceLeft < neededSpace &&
+                spaceRight > spaceLeft) {
+                return 'right';
+            }
+        }
+        return primary;
+    }
+    /**
+     * Adjusts the secondary alignment (left, right, center for top/bottom primary, top, bottom, center for left/right primary)
+     * of the content's position to prevent horizontal or vertical overflow. This method ensures that
+     * the content is fully visible within the viewport in the secondary dimension.
+     * @param secondary The initially desired secondary alignment.
+     * @param primary The already adjusted primary direction.
+     * @param triggerRect The bounding rectangle of the trigger element.
+     * @param contentRect The bounding rectangle of the content element.
+     * @returns The adjusted secondary alignment.
+     */
+    adjustSecondaryAlignment(secondary, primary, triggerRect, contentRect) {
+        if (['top', 'bottom'].includes(primary)) {
+            if (secondary === 'left') {
+                const contentRightPos = triggerRect.left + contentRect.width;
+                if (contentRightPos > window.innerWidth) {
+                    return 'right';
+                }
+            }
+            else if (secondary === 'right') {
+                const contentLeftPos = triggerRect.right - contentRect.width;
+                if (contentLeftPos < 0) {
+                    return 'left';
+                }
+            }
+            else if (secondary === 'center') {
+                const triggerCenter = triggerRect.left + triggerRect.width / 2;
+                const contentLeftPos = triggerCenter - contentRect.width / 2;
+                const contentRightPos = contentLeftPos + contentRect.width;
+                if (contentLeftPos < 0) {
+                    return 'left';
+                }
+                else if (contentRightPos > window.innerWidth) {
+                    return 'right';
+                }
+            }
+        }
+        else if (['left', 'right'].includes(primary)) {
+            if (secondary === 'top') {
+                const contentBottomPos = triggerRect.top + contentRect.height;
+                if (contentBottomPos > window.innerHeight) {
+                    return 'bottom';
+                }
+            }
+            else if (secondary === 'bottom') {
+                const contentTopPos = triggerRect.bottom - contentRect.height;
+                if (contentTopPos < 0) {
+                    return 'top';
+                }
+            }
+            else if (secondary === 'center') {
+                const triggerCenter = triggerRect.top + triggerRect.height / 2;
+                const contentTopPos = triggerCenter - contentRect.height / 2;
+                const contentBottomPos = contentTopPos + contentRect.height;
+                if (contentTopPos < 0) {
+                    return 'top';
+                }
+                else if (contentBottomPos > window.innerHeight) {
+                    return 'bottom';
+                }
+            }
+        }
+        return secondary;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AttachedBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: AttachedBox, isStandalone: true, selector: "r-attached-box", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { position: "positionChange", gap: "gapChange" }, host: { listeners: { "click": "type() === \"click\" ? handleMouseEvent($event) : null", "keydown": "handleKeyboardEvent($event)", "mouseenter": "type() === \"hover\" ? showContent() : null", "mouseleave": "type() === \"hover\" ? hideContent() : null", "window:scroll": "onWindowEvent()", "window:resize": "onWindowEvent()", "document:click": "onClickOutside($event)" }, properties: { "attr.tabindex": "0" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[r-attached-box-trigger]\" />\r\n<div\r\n  #content\r\n  class=\"r-attached-box-content\"\r\n  [class]=\"adjustedPosition()\"\r\n  [class.visible]=\"isContentVisible()\"\r\n  [style.--gap.px]=\"gap()\"\r\n  [style.--duration]=\"animationParams().duration\"\r\n  [style.--enter-delay]=\"animationParams().enterDelay\"\r\n  [style.--leave-delay]=\"animationParams().leaveDelay\"\r\n  [style.--scale-from]=\"animationParams().scaleFrom\"\r\n  [style.--scale-to]=\"animationParams().scaleTo\"\r\n  [style.--translate-from]=\"animationParams().translateFrom\"\r\n  [style.--translate-to]=\"animationParams().translateTo\">\r\n  <ng-content select=\"[r-attached-box-content]\" />\r\n</div>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AttachedBox, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-attached-box', host: {
+                        '[attr.tabindex]': '0',
+                        '(click)': 'type() === "click" ? handleMouseEvent($event) : null',
+                        '(keydown)': 'handleKeyboardEvent($event)',
+                        '(mouseenter)': 'type() === "hover" ? showContent() : null',
+                        '(mouseleave)': 'type() === "hover" ? hideContent() : null',
+                    }, template: "<ng-content select=\"[r-attached-box-trigger]\" />\r\n<div\r\n  #content\r\n  class=\"r-attached-box-content\"\r\n  [class]=\"adjustedPosition()\"\r\n  [class.visible]=\"isContentVisible()\"\r\n  [style.--gap.px]=\"gap()\"\r\n  [style.--duration]=\"animationParams().duration\"\r\n  [style.--enter-delay]=\"animationParams().enterDelay\"\r\n  [style.--leave-delay]=\"animationParams().leaveDelay\"\r\n  [style.--scale-from]=\"animationParams().scaleFrom\"\r\n  [style.--scale-to]=\"animationParams().scaleTo\"\r\n  [style.--translate-from]=\"animationParams().translateFrom\"\r\n  [style.--translate-to]=\"animationParams().translateTo\">\r\n  <ng-content select=\"[r-attached-box-content]\" />\r\n</div>\r\n" }]
+        }], propDecorators: { onWindowEvent: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+class Label {
+    /**
+     * The input element.
+     */
+    input = contentChild(Input);
+    /**
+     * The select element.
+     */
+    select = contentChild(Select);
+    /**
+     * The switch element.
+     */
+    switch = contentChild(Switch);
+    /**
+     * The checkbox element.
+     */
+    checkbox = contentChild(Checkbox);
+    /**
+     * The textarea element.
+     */
+    textarea = contentChild(Textarea);
+    /**
+     * Whether the label should be up.
+     */
+    labelUp = computed(() => {
+        const input = this.input();
+        const select = this.select();
+        const textarea = this.textarea();
+        return (input?.focused() ||
+            input?.value() ||
+            input?.placeholder() ||
+            select?.value() ||
+            textarea?.focused() ||
+            textarea?.value() ||
+            textarea?.placeholder());
+    });
+    /**
+     * The label width.
+     */
+    maxWidth = computed(() => {
+        const input = this.input();
+        const textarea = this.textarea();
+        return input?.maxWidth() || this.select()?.maxWidth() || textarea?.cols();
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Label, isStandalone: true, selector: "r-label", host: { properties: { "class.up": "labelUp()", "style.max-width": "maxWidth()", "class.is-switch": "switch()", "class.is-checkbox": "checkbox()", "class.is-textarea": "textarea()" } }, queries: [{ propertyName: "input", first: true, predicate: Input, descendants: true, isSignal: true }, { propertyName: "select", first: true, predicate: Select, descendants: true, isSignal: true }, { propertyName: "switch", first: true, predicate: Switch, descendants: true, isSignal: true }, { propertyName: "checkbox", first: true, predicate: Checkbox, descendants: true, isSignal: true }, { propertyName: "textarea", first: true, predicate: Textarea, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Label, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-label',
+                    imports: [],
+                    template: `<ng-content />`,
+                    host: {
+                        '[class.up]': 'labelUp()',
+                        '[style.max-width]': 'maxWidth()',
+                        '[class.is-switch]': 'switch()',
+                        '[class.is-checkbox]': 'checkbox()',
+                        '[class.is-textarea]': 'textarea()',
+                    },
+                }]
+        }] });
+class Badge {
+    /** The variant of the badge. */
+    variant = input('primary');
+    /** The size of the badge. */
+    size = input('default');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Badge, isStandalone: true, selector: "span[r-badge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "variant() + \" size-\" + size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Badge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[r-badge]',
+                    template: `<ng-content />`,
+                    host: {
+                        '[class]': 'variant() + " size-" + size()',
+                    },
+                }]
+        }] });
+class Checkbox {
+    /**
+     * Value of the checkbox.
+     */
+    value = model(false);
+    /**
+     * Reference to the checkbox element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Event emitted when the value changes.
+     */
+    valueChange = output();
+    /**
+     * Initializes the checkbox value after the view is initialized.
+     */
+    ngAfterViewInit() {
+        this.value.set(this.el.nativeElement.checked);
+    }
+    /**
+     * Toggles the value of the checkbox.
+     */
+    toggleValue() {
+        const newValue = !this.value();
+        this.value.set(newValue);
+        this.valueChange.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Checkbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Checkbox, isStandalone: true, selector: "input[r-checkbox]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggleValue()", "keydown.enter": "toggleValue()", "keydown.space": "toggleValue()" }, properties: { "attr.role": "checkbox", "attr.checked": "value()", "attr.aria-checked": "value()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Checkbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[r-checkbox]',
+                    template: ``,
+                    host: {
+                        '[attr.role]': 'checkbox',
+                        '[attr.checked]': 'value()',
+                        '[attr.aria-checked]': 'value()',
+                        '(click)': 'toggleValue()',
+                        '(keydown.enter)': 'toggleValue()',
+                        '(keydown.space)': 'toggleValue()',
+                    },
+                }]
+        }] });
+class Textarea {
+    /**
+     * The placeholder text for the textarea.
+     */
+    placeholder = input('');
+    /**
+     * The value of the textarea.
+     */
+    value = signal(null);
+    /**
+     * The number of rows for the textarea.
+     */
+    rows = input(3);
+    /**
+     * The number of columns for the textarea.
+     */
+    cols = input(30);
+    /**
+     * Whether the textarea is invalid.
+     */
+    invalid = model(false);
+    /**
+     * Whether the textarea is disabled.
+     */
+    disabled = model(false);
+    /**
+     * Whether the textarea is focused.
+     * This will be used by the Label component.
+     */
+    focused = signal(false);
+    /**
+     * Event emitted when the value changes.
+     */
+    valueChange = output();
+    /**
+     * Reference to the textarea element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Handles the input event.
+     * @param event The input event.
+     */
+    onInput(event) {
+        const target = event.target;
+        this.value.set(target.value);
+        this.valueChange.emit(target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Textarea, isStandalone: true, selector: "textarea[r-textarea]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { invalid: "invalidChange", disabled: "disabledChange", valueChange: "valueChange" }, host: { listeners: { "input": "onInput($event)", "focus": "focused.set(true)", "blur": "focused.set(false)" }, properties: { "placeholder": "placeholder() || \"\"", "rows": "rows()", "cols": "cols()", "class.ng-invalid": "invalid()", "class.disabled": "disabled()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Textarea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'textarea[r-textarea]',
+                    template: ``,
+                    host: {
+                        '[placeholder]': 'placeholder() || ""',
+                        '[rows]': 'rows()',
+                        '[cols]': 'cols()',
+                        '[class.ng-invalid]': 'invalid()',
+                        '[class.disabled]': 'disabled()',
+                        '(input)': 'onInput($event)',
+                        '(focus)': 'focused.set(true)',
+                        '(blur)': 'focused.set(false)',
+                    },
+                }]
+        }] });
+class InputGroup {
+    /**
+     * Whether the input group elements are separated by a border.
+     */
+    bordered = input(true);
+    /**
+     * The maximum width of the input.
+     */
+    maxWidth = input('');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: InputGroup, isStandalone: true, selector: "r-input-group", inputs: { bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.bordered": "bordered()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-input-group',
+                    template: `<ng-content />`,
+                    host: {
+                        '[class.bordered]': 'bordered()',
+                        '[style.max-width]': 'maxWidth()',
+                    },
+                }]
+        }] });
+class Range {
+    /**
+     * Current value of the range.
+     */
+    value = model('0');
+    /**
+     * Maximum width of the range slider.
+     */
+    maxWidth = input('100%');
+    /**
+     * Reference to the range element.
+     */
+    el = inject(ElementRef);
+    /**
+     * Initializes the range value after the view is initialized.
+     */
+    ngAfterViewInit() {
+        this.value.set(this.el.nativeElement.value);
+    }
+    /**
+     * Handles the input event to update the value.
+     */
+    onInput(event) {
+        this.value.set(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Range, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Range, isStandalone: true, selector: "input[r-range]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "onInput($event)" }, properties: { "attr.value": "value()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Range, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[r-range]',
+                    template: ``,
+                    host: {
+                        '[attr.value]': 'value()',
+                        '[style.max-width]': 'maxWidth()',
+                        '(input)': 'onInput($event)',
+                    },
+                }]
+        }] });
+/**
+ * TooltipComponent is a reusable UI component that displays a tooltip
+ * with customizable position, gap, variant, and size.
+ */
+class TooltipComponent {
+    /**
+     * The position of the tooltip relative to its trigger element.
+     * Defaults to 'top-center'.
+     */
+    position = input('top-center');
+    /**
+     * The gap (in pixels) between the tooltip and its trigger element.
+     * Defaults to 8.
+     */
+    gap = input(8);
+    /**
+     * The visual variant of the tooltip. Options include:
+     * - 'primary'
+     * - 'secondary'
+     * - 'ghost'
+     * - 'outlined'
+     * Defaults to 'primary'.
+     */
+    variant = input('primary');
+    /**
+     * The size of the tooltip. Options include:
+     * - 'small'
+     * - 'default'
+     * Defaults to 'default'.
+     */
+    size = input('default');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "r-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", 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 } }, ngImport: i0, template: `
+    <r-attached-box [type]="'hover'" [position]="position()" [gap]="gap()">
+      <ng-content r-attached-box-trigger />
+      <div
+        r-attached-box-content
+        class="r-tooltip-content"
+        [class]="variant() + ' size-' + size()">
+        <ng-content select="[r-tooltip-content]" />
+      </div>
+    </r-attached-box>
+  `, isInline: true, dependencies: [{ kind: "component", type: AttachedBox, selector: "r-attached-box", inputs: ["type", "position", "gap"], outputs: ["positionChange", "gapChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-tooltip',
+                    template: `
+    <r-attached-box [type]="'hover'" [position]="position()" [gap]="gap()">
+      <ng-content r-attached-box-trigger />
+      <div
+        r-attached-box-content
+        class="r-tooltip-content"
+        [class]="variant() + ' size-' + size()">
+        <ng-content select="[r-tooltip-content]" />
+      </div>
+    </r-attached-box>
+  `,
+                    standalone: true,
+                    imports: [AttachedBox],
+                }]
+        }] });
+class ColorPicker {
+    /**
+     * Specifies the maximum width of the input.
+     */
+    maxWidth = input('');
+    /**
+     * Represents the value of the input.
+     */
+    value = signal('#ffffff');
+    /**
+     * Computed signal for the text color with single quotes.
+     */
+    valueWithSingleQuotes = computed(() => {
+        return `'${this.value()}'`;
+    });
+    /**
+     * A computed signal that dynamically calculates the text color based on the resolved value.
+     */
+    textColor = computed(() => {
+        const backgroundColor = this.resolveColor(this.value());
+        const hex = backgroundColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        return luminance > 128 ? '#000000' : '#FFFFFF';
+    });
+    /**
+     * Indicates whether the input is focused.
+     */
+    focused = signal(false);
+    /**
+     * A reference to the `NgModel` directive.
+     */
+    ngModel = contentChild(NgModel);
+    /**
+     * Indicates whether to show the color value.
+     */
+    showColor = input(true);
+    /**
+     * A reference to the native element.
+     */
+    el = inject(ElementRef);
+    /**
+     * A reference to the control container.
+     */
+    controlContainer = inject(ControlContainer, { optional: true });
+    /**
+     * Lifecycle hook that is called after the view has been initialized.
+     * Sets the initial value of the picker and attaches event listeners.
+     */
+    ngAfterViewInit() {
+        const formControl = this.controlContainer?.control?.get(this.el.nativeElement.getAttribute('formControlName'));
+        // Inicializa el valor del signal
+        this.value.set(this.el?.nativeElement.value || this.ngModel()?.value || '#000000');
+        // Suscríbete a los cambios del FormControl
+        formControl?.valueChanges.subscribe((newValue) => {
+            this.value.set(newValue || '#000000');
+        });
+    }
+    /**
+     * Resolves a color value, handling cases like `transparent` or `color-mix`.
+     * @param value The input color value.
+     * @returns A valid hexadecimal color.
+     */
+    resolveColor(value) {
+        // Handle `color-mix` values
+        const colorMixMatch = value.match(/color-mix\(in srgb, (#[0-9a-fA-F]{6}), (#[0-9a-fA-F]{6}) (\d+)%\)/);
+        if (colorMixMatch) {
+            const [, color1, color2, percentage] = colorMixMatch;
+            return this.calculateColorMix(color1, color2, parseInt(percentage, 10) / 100);
+        }
+        // Handle `transparent` values
+        if (value === 'transparent') {
+            return '#ffffff'; // Default to white for transparency
+        }
+        return value; // Return the original value if no special cases
+    }
+    /**
+     * Calculates the result of a `color-mix` operation.
+     * @param color1 The first color in hexadecimal format.
+     * @param color2 The second color in hexadecimal format.
+     * @param percentage The mix percentage for the second color.
+     * @returns The resulting mixed color in hexadecimal format.
+     */
+    calculateColorMix(color1, color2, percentage) {
+        const hexToRgb = (hex) => {
+            const bigint = parseInt(hex.replace('#', ''), 16);
+            return {
+                r: (bigint >> 16) & 255,
+                g: (bigint >> 8) & 255,
+                b: bigint & 255,
+            };
+        };
+        const rgbToHex = (r, g, b) => `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+        const rgb1 = hexToRgb(color1);
+        const rgb2 = hexToRgb(color2);
+        const r = Math.round(rgb1.r * (1 - percentage) + rgb2.r * percentage);
+        const g = Math.round(rgb1.g * (1 - percentage) + rgb2.g * percentage);
+        const b = Math.round(rgb1.b * (1 - percentage) + rgb2.b * percentage);
+        return rgbToHex(r, g, b);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: ColorPicker, isStandalone: true, selector: "input[r-color-picker]", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, showColor: { classPropertyName: "showColor", publicName: "showColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "focused.set(true)", "blur": "focused.set(false)", "input": "value.set($event.target.value)" }, properties: { "class.focused": "focused()", "style.max-width": "maxWidth()", "style.--value": "valueWithSingleQuotes()", "style.--text-color": "textColor()", "class.show-color": "showColor()" } }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true, isSignal: true }], ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'input[r-color-picker]',
+                    imports: [],
+                    template: ``,
+                    host: {
+                        '[class.focused]': 'focused()',
+                        '[style.max-width]': 'maxWidth()',
+                        '[style.--value]': 'valueWithSingleQuotes()',
+                        '[style.--text-color]': 'textColor()',
+                        '[class.show-color]': 'showColor()',
+                        '(focus)': 'focused.set(true)',
+                        '(blur)': 'focused.set(false)',
+                        '(input)': 'value.set($event.target.value)',
+                    },
+                }]
+        }] });
+/**
+ * Represents a tree node component that can be extended, collapsed,
+ * and optionally supports drag-and-drop functionality.
+ */
+class TreeNode {
+    /**
+     * Indicates whether the node is extended (expanded).
+     */
+    extended = model(false);
+    /**
+     * Reference to the `CdkDrag` directive for drag-and-drop functionality.
+     */
+    node = inject(CdkDrag);
+    /**
+     * Reference to a nested `Tree` component, if present.
+     */
+    nestedTree = contentChild(Tree);
+    /**
+     * Emits an event when the node is closed.
+     */
+    closeEmitter = output();
+    /**
+     * Lifecycle hook that is called after the component is initialized.
+     */
+    ngOnInit() {
+        this.node.lockAxis = 'y';
+    }
+    /**
+     * Updates the disabled state of the node.
+     * @param disabled - Whether the node should be disabled.
+     */
+    handleNodeDisability(disabled) {
+        this.node.disabled = disabled;
+    }
+    /**
+     * Toggles the extended (expanded) state of the node.
+     * Emits a close event if the node is collapsed and contains a nested tree.
+     */
+    handleExtension() {
+        const isExtended = this.extended();
+        this.extended.set(!isExtended);
+        if (isExtended && this.nestedTree()) {
+            this.closeEmitter.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TreeNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TreeNode, isStandalone: true, selector: "r-tree-node", inputs: { extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { extended: "extendedChange", closeEmitter: "closeEmitter" }, queries: [{ propertyName: "nestedTree", first: true, predicate: Tree, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.CdkDrag, inputs: ["cdkDragDisabled", "disabled"] }], ngImport: i0, template: "<section>\r\n  @if (!node.disabled) {\r\n    <i r-icon icon=\"GripVertical\" [size]=\"15\" cdkDragHandle></i>\r\n  }\r\n  <div\r\n    class=\"projected-content\"\r\n    (click)=\"nestedTree() && handleExtension()\"\r\n    (keydown.enter)=\"nestedTree() && handleExtension()\"\r\n    (keydown.space)=\"nestedTree() && handleExtension()\"\r\n    role=\"button\"\r\n    tabindex=\"0\">\r\n    <ng-content />\r\n  </div>\r\n  @if (nestedTree()) {\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\">\r\n      <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n  }\r\n</section>\r\n@if (nestedTree() && extended()) {\r\n  <div class=\"nested\">\r\n    <ng-content select=\"r-tree\" />\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "component", type: Icon, selector: "i[r-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TreeNode, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-tree-node', imports: [Icon, CdkDragHandle], hostDirectives: [
+                        {
+                            directive: CdkDrag,
+                            inputs: ['cdkDragDisabled: disabled'],
+                        },
+                    ], template: "<section>\r\n  @if (!node.disabled) {\r\n    <i r-icon icon=\"GripVertical\" [size]=\"15\" cdkDragHandle></i>\r\n  }\r\n  <div\r\n    class=\"projected-content\"\r\n    (click)=\"nestedTree() && handleExtension()\"\r\n    (keydown.enter)=\"nestedTree() && handleExtension()\"\r\n    (keydown.space)=\"nestedTree() && handleExtension()\"\r\n    role=\"button\"\r\n    tabindex=\"0\">\r\n    <ng-content />\r\n  </div>\r\n  @if (nestedTree()) {\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\">\r\n      <path d=\"m6 9 6 6 6-6\" />\r\n    </svg>\r\n  }\r\n</section>\r\n@if (nestedTree() && extended()) {\r\n  <div class=\"nested\">\r\n    <ng-content select=\"r-tree\" />\r\n  </div>\r\n}\r\n" }]
+        }] });
+/**
+ * Represents a tree component that supports drag-and-drop functionality
+ * and manages nested tree nodes.
+ */
+class Tree {
+    /**
+     * The ID of the tree component.
+     */
+    maxWidth = input('100%');
+    /**
+     * Determines whether the tree is draggable.
+     */
+    draggable = input(false);
+    /**
+     * Reference to the `CdkDropList` directive used for drag-and-drop.
+     */
+    tree = inject(CdkDropList);
+    /**
+     * Collection of nested `TreeNode` components.
+     */
+    nestedNodes = contentChildren(TreeNode);
+    /**
+     * Determines whether to close nodes recursively.
+     */
+    closeRecursively = input(false);
+    /**
+     * Emits an event when a drop occurs in the tree.
+     */
+    dropEmitter = output();
+    /**
+     * Initializes the `Tree` component and sets up reactive effects.
+     */
+    constructor() {
+        effect(() => {
+            this.handleTreeDisability();
+        });
+    }
+    /**
+     * Lifecycle hook that is called after the component is initialized.
+     */
+    ngOnInit() {
+        if (this.closeRecursively())
+            this.handleCloseRecursively();
+    }
+    /**
+     * Updates the disabled state of the tree and its nested nodes.
+     */
+    handleTreeDisability() {
+        const isDisabled = !this.draggable();
+        this.tree.disabled = isDisabled;
+        this.nestedNodes().forEach(node => {
+            node.handleNodeDisability(isDisabled);
+        });
+    }
+    /**
+     * Sets up recursive closing behavior for nested nodes.
+     */
+    handleCloseRecursively() {
+        this.nestedNodes().forEach(node => {
+            node.closeEmitter.subscribe(() => {
+                this.closeNestedNodes();
+            });
+        });
+    }
+    /**
+     * Closes all nested nodes recursively.
+     */
+    closeNestedNodes() {
+        this.nestedNodes().forEach(node => {
+            node.extended.set(false);
+            node.nestedTree()?.closeNestedNodes();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.7", type: Tree, isStandalone: true, selector: "r-tree", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, closeRecursively: { classPropertyName: "closeRecursively", publicName: "closeRecursively", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropEmitter: "dropEmitter" }, host: { listeners: { "cdkDropListDropped": "dropEmitter.emit($event)" }, properties: { "style.max-width": "maxWidth()" } }, queries: [{ propertyName: "nestedNodes", predicate: TreeNode, isSignal: true }], hostDirectives: [{ directive: i1.CdkDropList, inputs: ["id", "id", "cdkDropListConnectedTo", "connectedTo"], outputs: ["cdkDropListDropped", "cdkDropListDropped"] }, { directive: i1.CdkDropListGroup }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Tree, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-tree',
+                    template: `<ng-content />`,
+                    host: {
+                        '(cdkDropListDropped)': 'dropEmitter.emit($event)',
+                        '[style.max-width]': 'maxWidth()',
+                    },
+                    hostDirectives: [
+                        {
+                            directive: CdkDropList,
+                            inputs: ['id', 'cdkDropListConnectedTo: connectedTo'],
+                            outputs: ['cdkDropListDropped'],
+                        },
+                        CdkDropListGroup,
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Represents a menu component that can optionally float.
+ */
+class Menu {
+    /**
+     * Determines whether the menu is floating.
+     * @default false
+     */
+    floating = input(false);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Menu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: Menu, isStandalone: true, selector: "r-menu", inputs: { floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.floating": "floating()" } }, hostDirectives: [{ directive: i1$1.CdkMenu }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Menu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-menu',
+                    imports: [],
+                    template: `<ng-content />`,
+                    host: {
+                        '[class.floating]': 'floating()',
+                    },
+                    hostDirectives: [CdkMenu],
+                }]
+        }] });
+/**
+ * Represents a label for a menu.
+ */
+class MenuLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuLabel, isStandalone: true, selector: "r-menu-label", ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-menu-label',
+                    imports: [],
+                    template: `<ng-content />`,
+                }]
+        }] });
+/**
+ * Represents a menu item with support for typeahead and disabled states.
+ */
+class MenuItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "r-menu-item", hostDirectives: [{ directive: i1$1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-menu-item',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItem,
+                            inputs: [
+                                'cdkMenuItemDisabled: disabled',
+                                'cdkMenuitemTypeaheadLabel: typeaheadLabel',
+                            ],
+                            outputs: ['cdkMenuItemTriggered: triggered'],
+                        },
+                    ],
+                }]
+        }] });
+/**
+ * Represents a checkbox menu item.
+ */
+class MenuItemCheckboxComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuItemCheckboxComponent, isStandalone: true, selector: "r-menu-item-checkbox", hostDirectives: [{ directive: i1$1.CdkMenuItemCheckbox, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-menu-item-checkbox',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItemCheckbox,
+                            inputs: [
+                                'cdkMenuItemDisabled: disabled',
+                                'cdkMenuitemTypeaheadLabel: typeaheadLabel',
+                                'cdkMenuItemChecked: active',
+                            ],
+                            outputs: ['cdkMenuItemTriggered: triggered'],
+                        },
+                    ],
+                }]
+        }] });
+/**
+ * Represents a radio menu item.
+ */
+class MenuItemRadioComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: MenuItemRadioComponent, isStandalone: true, selector: "r-menu-item-radio", hostDirectives: [{ directive: i1$1.CdkMenuItemRadio, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel", "cdkMenuItemChecked", "active"], outputs: ["cdkMenuItemTriggered", "triggered"] }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemRadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'r-menu-item-radio',
+                    imports: [],
+                    template: `<ng-content />`,
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuItemRadio,
+                            inputs: [
+                                'cdkMenuItemDisabled: disabled',
+                                'cdkMenuitemTypeaheadLabel: typeaheadLabel',
+                                'cdkMenuItemChecked: active',
+                            ],
+                            outputs: ['cdkMenuItemTriggered: triggered'],
+                        },
+                    ],
+                }]
+        }] });
+class MenuTrigger {
+    trigger = inject(CdkMenuTrigger);
+    menuTriggerPosition = input('right-top');
+    submenu = input(false);
+    ngOnInit() {
+        this.setPosition();
+    }
+    setPosition() {
+        const positionMap = {
+            'top-left': {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: !this.submenu() ? -5 : undefined,
+            },
+            'top-center': {
+                originX: 'center',
+                originY: 'top',
+                overlayX: 'center',
+                overlayY: 'bottom',
+                offsetY: !this.submenu() ? -5 : undefined,
+            },
+            'top-right': {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetY: !this.submenu() ? -5 : undefined,
+            },
+            'bottom-left': {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: !this.submenu() ? 5 : undefined,
+            },
+            'bottom-center': {
+                originX: 'center',
+                originY: 'bottom',
+                overlayX: 'center',
+                overlayY: 'top',
+                offsetY: !this.submenu() ? 5 : undefined,
+            },
+            'bottom-right': {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetY: !this.submenu() ? 5 : undefined,
+            },
+            'left-top': {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'top',
+                offsetX: !this.submenu() ? -5 : undefined,
+            },
+            'left-center': {
+                originX: 'start',
+                originY: 'center',
+                overlayX: 'end',
+                overlayY: 'center',
+                offsetX: !this.submenu() ? -5 : undefined,
+            },
+            'left-bottom': {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'bottom',
+                offsetX: !this.submenu() ? -5 : undefined,
+            },
+            'right-top': {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetX: !this.submenu() ? 5 : undefined,
+            },
+            'right-center': {
+                originX: 'end',
+                originY: 'center',
+                overlayX: 'start',
+                overlayY: 'center',
+                offsetX: !this.submenu() ? 5 : undefined,
+            },
+            'right-bottom': {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetX: !this.submenu() ? 5 : undefined,
+            },
+        };
+        const connectedPosition = positionMap[this.menuTriggerPosition()];
+        this.trigger.menuPosition = [connectedPosition];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: MenuTrigger, isStandalone: true, selector: "[menuTriggerFor]", inputs: { menuTriggerPosition: { classPropertyName: "menuTriggerPosition", publicName: "menuTriggerPosition", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "menuTriggerFor"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[menuTriggerFor]',
+                    hostDirectives: [
+                        {
+                            directive: CdkMenuTrigger,
+                            inputs: ['cdkMenuTriggerFor: menuTriggerFor'],
+                        },
+                    ],
+                }]
+        }] });
+class Alert {
+    /** The type of the alert. */
+    type = input('info');
+    /** The title of the alert. */
+    title = input(null);
+    /** The icon of the alert. */
+    icon = input(null);
+    /** Whether the alert is dismissible. */
+    dismissible = input(false);
+    /** Event emitted when the alert is dismissed. */
+    dismissed = output();
+    /** The maximum width of the alert. */
+    maxWidth = input(null);
+    /** The color foreground of the alert. */
+    colorForeground = computed(() => {
+        return this.type() === 'info'
+            ? 'var(--secondary-foreground)'
+            : `var(--${this.type()}-foreground)`;
+    });
+    dismiss() {
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: Alert, isStandalone: true, selector: "r-alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "type()", "style.max-width": "maxWidth()" } }, ngImport: i0, template: "@if (icon()) {\r\n  <div class=\"icon\">\r\n    <i r-icon [icon]=\"icon()!\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </div>\r\n}\r\n<div class=\"content\">\r\n  @if (title()) {\r\n    <div class=\"title\">\r\n      {{ title() }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"body\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n@if (dismissible()) {\r\n  <button class=\"close-btn\" (click)=\"dismiss()\">\r\n    <i r-icon icon=\"X\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </button>\r\n}\r\n", dependencies: [{ kind: "component", type: Icon, selector: "i[r-icon]", inputs: ["icon", "size", "strokeWidth", "color"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: Alert, decorators: [{
+            type: Component,
+            args: [{ selector: 'r-alert', imports: [Icon], host: {
+                        '[class]': 'type()',
+                        '[style.max-width]': 'maxWidth()',
+                    }, template: "@if (icon()) {\r\n  <div class=\"icon\">\r\n    <i r-icon [icon]=\"icon()!\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </div>\r\n}\r\n<div class=\"content\">\r\n  @if (title()) {\r\n    <div class=\"title\">\r\n      {{ title() }}\r\n    </div>\r\n  }\r\n\r\n  <div class=\"body\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n@if (dismissible()) {\r\n  <button class=\"close-btn\" (click)=\"dismiss()\">\r\n    <i r-icon icon=\"X\" [size]=\"20\" [color]=\"colorForeground()\"></i>\r\n  </button>\r\n}\r\n" }]
+        }] });
+/*
+ * Public API Surface of basis-ng
+ */
+/* Theme Service */
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { Alert, AttachedBox, Badge, BottomSheet, Button, ButtonGroup, Checkbox, ColorPicker, Icon, InViewportDirective, InViewportService, Input, InputGroup, Label, LazyContentDirective, Menu, MenuItemCheckboxComponent, MenuItemComponent, MenuItemRadioComponent, MenuLabel, MenuTrigger, Option, Range, ResponsiveService, Row, RowItem, Search, Select, SideSheet, Spinner, Switch, Tab, Table, Tabs, Textarea, ThemeService, TooltipComponent, Tree, TreeNode };
+//# sourceMappingURL=basis-ng-primitives.mjs.map