@wdcoders/ui-ng 1.0.0 → 1.0.1

package/fesm2022/wdcoders-ui-ng.mjs

@@ -1,7 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, output, TemplateRef, ChangeDetectionStrategy, signal, Input, model, contentChildren, effect, Injectable, inject } from '@angular/core';
+import { input, computed, Component, output, TemplateRef, ChangeDetectionStrategy, signal, Input, model, effect, contentChildren, Injectable, inject, forwardRef, viewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class SpinnerComponent {
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
@@ -153,43 +155,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
 
 class IconsComponent {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : []));
     size = input('16', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     get sizeClass() {
-        switch (this.size()) {
-            case '10':
-                return 'icon-10';
-            case '12':
-                return 'icon-12';
-            case '14':
-                return 'icon-14';
-            case '16':
-                return 'icon-16';
-            case '18':
-                return 'icon-18';
-            case '20':
-                return 'icon-20';
-            case '22':
-                return 'icon-22';
-            case '24':
-                return 'icon-24';
-            case '40':
-                return 'icon-40';
-            case '48':
-                return 'icon-48';
-            case '56':
-                return 'icon-56';
-            default:
-                return 'w-8 h-8';
-        }
+        return `icon-${this.size()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: IconsComponent, isStandalone: true, selector: "wdc-icons", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"flex\">\r\n  <span [class]=\"`material-symbols-outlined ${class} ${sizeClass}`\">{{ name() }}</span>\r\n</span>\r\n", styles: ["span.icon-10{font-size:10px;font-variation-settings:\"OPSZ\" 10}span.icon-12{font-size:12px;font-variation-settings:\"OPSZ\" 12}span.icon-14{font-size:14px;font-variation-settings:\"OPSZ\" 14}span.icon-16{font-size:16px;font-variation-settings:\"OPSZ\" 16}span.icon-18{font-size:18px;font-variation-settings:\"OPSZ\" 18}span.icon-20{font-size:20px;font-variation-settings:\"OPSZ\" 20}span.icon-22{font-size:22px;font-variation-settings:\"OPSZ\" 22}span.icon-24{font-size:24px;font-variation-settings:\"OPSZ\" 24}span.icon-40{font-size:40px;font-variation-settings:\"OPSZ\" 40}span.icon-48{font-size:48px;font-variation-settings:\"OPSZ\" 48}span.icon-56{font-size:56px;font-variation-settings:\"OPSZ\" 56}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.5", type: IconsComponent, isStandalone: true, selector: "wdc-icons", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"flex\">\r\n  <span [class]=\"`material-symbols-outlined ${customClass} ${sizeClass}`\" aria-hidden=\"true\">{{\r\n    name()\r\n  }}</span>\r\n</span>\r\n", styles: [".icon-10{font-size:10px;font-variation-settings:\"OPSZ\" 10}.icon-12{font-size:12px;font-variation-settings:\"OPSZ\" 12}.icon-14{font-size:14px;font-variation-settings:\"OPSZ\" 14}.icon-16{font-size:16px;font-variation-settings:\"OPSZ\" 16}.icon-18{font-size:18px;font-variation-settings:\"OPSZ\" 18}.icon-20{font-size:20px;font-variation-settings:\"OPSZ\" 20}.icon-22{font-size:22px;font-variation-settings:\"OPSZ\" 22}.icon-24{font-size:24px;font-variation-settings:\"OPSZ\" 24}.icon-40{font-size:40px;font-variation-settings:\"OPSZ\" 40}.icon-48{font-size:48px;font-variation-settings:\"OPSZ\" 48}.icon-56{font-size:56px;font-variation-settings:\"OPSZ\" 56}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: IconsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wdc-icons', imports: [], template: "<span class=\"flex\">\r\n  <span [class]=\"`material-symbols-outlined ${class} ${sizeClass}`\">{{ name() }}</span>\r\n</span>\r\n", styles: ["span.icon-10{font-size:10px;font-variation-settings:\"OPSZ\" 10}span.icon-12{font-size:12px;font-variation-settings:\"OPSZ\" 12}span.icon-14{font-size:14px;font-variation-settings:\"OPSZ\" 14}span.icon-16{font-size:16px;font-variation-settings:\"OPSZ\" 16}span.icon-18{font-size:18px;font-variation-settings:\"OPSZ\" 18}span.icon-20{font-size:20px;font-variation-settings:\"OPSZ\" 20}span.icon-22{font-size:22px;font-variation-settings:\"OPSZ\" 22}span.icon-24{font-size:24px;font-variation-settings:\"OPSZ\" 24}span.icon-40{font-size:40px;font-variation-settings:\"OPSZ\" 40}span.icon-48{font-size:48px;font-variation-settings:\"OPSZ\" 48}span.icon-56{font-size:56px;font-variation-settings:\"OPSZ\" 56}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+            args: [{ selector: 'wdc-icons', imports: [], template: "<span class=\"flex\">\r\n  <span [class]=\"`material-symbols-outlined ${customClass} ${sizeClass}`\" aria-hidden=\"true\">{{\r\n    name()\r\n  }}</span>\r\n</span>\r\n", styles: [".icon-10{font-size:10px;font-variation-settings:\"OPSZ\" 10}.icon-12{font-size:12px;font-variation-settings:\"OPSZ\" 12}.icon-14{font-size:14px;font-variation-settings:\"OPSZ\" 14}.icon-16{font-size:16px;font-variation-settings:\"OPSZ\" 16}.icon-18{font-size:18px;font-variation-settings:\"OPSZ\" 18}.icon-20{font-size:20px;font-variation-settings:\"OPSZ\" 20}.icon-22{font-size:22px;font-variation-settings:\"OPSZ\" 22}.icon-24{font-size:24px;font-variation-settings:\"OPSZ\" 24}.icon-40{font-size:40px;font-variation-settings:\"OPSZ\" 40}.icon-48{font-size:48px;font-variation-settings:\"OPSZ\" 48}.icon-56{font-size:56px;font-variation-settings:\"OPSZ\" 56}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class CardComponent {
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -213,7 +191,7 @@ class StatCardComponent {
     trendLabel = input('', ...(ngDevMode ? [{ debugName: "trendLabel" }] : []));
     iconName = input('chart_data', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: StatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: StatCardComponent, isStandalone: true, selector: "wdc-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, ngImport: i0, template: "<div\n  class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-start justify-between h-full\"\n>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"flex items-start justify-between\">\n      <div>\n        <p class=\"text-sm font-medium text-gray-500 mb-1\">{{ label() }}</p>\n        <h4 class=\"text-2xl font-bold text-gray-900\">{{ value() }}</h4>\n      </div>\n      <div class=\"p-3 bg-indigo-50 rounded-lg text-indigo-600\">\n        <wdc-icons [name]=\"iconName()\" size=\"22\"></wdc-icons>\n      </div>\n    </div>\n\n    @if (trend() !== 0) {\n      <div class=\"flex items-center mt-2 text-sm\">\n        @if (trend() > 0) {\n          <span\n            class=\"text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n          >\n            <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n              ></path>\n            </svg>\n            {{ trend() }}%\n          </span>\n        } @else {\n          <span\n            class=\"text-rose-600 bg-rose-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n          >\n            <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n              ></path>\n            </svg>\n            {{ trend() }}%\n          </span>\n        }\n        <span class=\"text-gray-400 ml-2\">{{ trendLabel() }}</span>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: IconsComponent, selector: "wdc-icons", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: StatCardComponent, isStandalone: true, selector: "wdc-stat-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, trendLabel: { classPropertyName: "trendLabel", publicName: "trendLabel", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, ngImport: i0, template: "<div\n  class=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-start justify-between h-full\"\n>\n  <div class=\"flex flex-col w-full\">\n    <div class=\"flex items-start justify-between\">\n      <div>\n        <p class=\"text-sm font-medium text-gray-500 mb-1\">{{ label() }}</p>\n        <h4 class=\"text-2xl font-bold text-gray-900\">{{ value() }}</h4>\n      </div>\n      <div class=\"p-3 bg-indigo-50 rounded-lg text-indigo-600\">\n        <wdc-icons [name]=\"iconName()\" size=\"22\"></wdc-icons>\n      </div>\n    </div>\n\n    @if (trend() !== 0) {\n      <div class=\"flex items-center mt-2 text-sm\">\n        @if (trend() > 0) {\n          <span\n            class=\"text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n          >\n            <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6\"\n              ></path>\n            </svg>\n            {{ trend() }}%\n          </span>\n        } @else {\n          <span\n            class=\"text-rose-600 bg-rose-50 px-1.5 py-0.5 rounded flex items-center gap-1 font-medium\"\n          >\n            <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M13 17h8m0 0V9m0 8l-8-8-4 4-6-6\"\n              ></path>\n            </svg>\n            {{ trend() }}%\n          </span>\n        }\n        <span class=\"text-gray-400 ml-2\">{{ trendLabel() }}</span>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: IconsComponent, selector: "wdc-icons", inputs: ["name", "customClass", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: StatCardComponent, decorators: [{
             type: Component,
@@ -326,13 +304,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
             args: [{ selector: 'wdc-badge', imports: [CommonModule], template: "<span [class]=\"classes()\">\r\n  <ng-content></ng-content>\r\n  @if (value()) {\r\n    <span>{{ value() }}</span>\r\n  }\r\n</span>\r\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
 
-// import { trigger, transition, style, animate } from '@angular/animations';
 class ModalComponent {
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
     onClose = output();
+    isRendered = signal(false, ...(ngDevMode ? [{ debugName: "isRendered" }] : []));
+    isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : []));
+    constructor() {
+        // 3. Effect to watch Input changes
+        effect(() => {
+            if (this.isOpen()) {
+                // OPENING LOGIC
+                this.isClosing.set(false);
+                this.isRendered.set(true); // Turant DOM mein lao
+            }
+            else {
+                // CLOSING LOGIC
+                // Pehle 'closing' flag set karo taaki exit animation play ho
+                this.isClosing.set(true);
+                // 200ms wait karo (CSS animation duration match honi chahiye)
+                setTimeout(() => {
+                    this.isRendered.set(false); // Ab DOM se hatao
+                }, 200);
+            }
+        });
+    }
     closeModal() {
         this.isOpen.set(false);
         this.onClose.emit();
@@ -359,12 +357,12 @@ class ModalComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModalComponent, isStandalone: true, selector: "wdc-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onClose: "onClose" }, ngImport: i0, template: "@if (isOpen()) {\r\n  <div class=\"relative z-50\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n    <!-- Backdrop -->\r\n    <div\r\n      [@fadeAnimation]\r\n      class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n      (click)=\"onBackdropClick()\"\r\n    ></div>\r\n\r\n    <!-- Panel -->\r\n    <div class=\"fixed inset-0 z-10 overflow-y-auto w-screen overflow-x-hidden\">\r\n      <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n        <div\r\n          [@modalAnimation]\r\n          class=\"relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 w-full sm:p-6\"\r\n          [class]=\"sizeClasses()\"\r\n        >\r\n          <!-- Header -->\r\n          @if (title()) {\r\n            <div class=\"mb-4 sm:flex sm:items-start justify-between\">\r\n              <h3\r\n                class=\"text-lg font-semibold leading-6 text-slate-900 dark:text-white\"\r\n                id=\"modal-title\"\r\n              >\r\n                {{ title() }}\r\n              </h3>\r\n              <button\r\n                type=\"button\"\r\n                class=\"rounded-md bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900\"\r\n                (click)=\"closeModal()\"\r\n              >\r\n                <span class=\"sr-only\">Close</span>\r\n                <svg\r\n                  class=\"h-6 w-6\"\r\n                  fill=\"none\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke=\"currentColor\"\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          <!-- Body -->\r\n          <div class=\"mt-2\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ModalComponent, isStandalone: true, selector: "wdc-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", onClose: "onClose" }, ngImport: i0, template: "@if (isRendered()) {\r\n  <div class=\"relative z-50\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n    <!-- Backdrop -->\r\n    <div\r\n      class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n      [class]=\"isClosing() ? 'wdc-animate-exit' : 'wdc-animate-enter'\"\r\n      (click)=\"onBackdropClick()\"\r\n    ></div>\r\n\r\n    <!-- Panel -->\r\n    <div class=\"fixed inset-0 z-10 overflow-y-auto w-screen overflow-x-hidden\">\r\n      <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n        <div\r\n          class=\"relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 w-full sm:p-6\"\r\n          [class]=\"(isClosing() ? 'wdc-zoom-exit' : 'wdc-zoom-enter') + ' ' + sizeClasses()\"\r\n        >\r\n          <!-- Header -->\r\n          @if (title()) {\r\n            <div class=\"mb-4 sm:flex sm:items-start justify-between\">\r\n              <h3\r\n                class=\"text-lg font-semibold leading-6 text-slate-900 dark:text-white\"\r\n                id=\"modal-title\"\r\n              >\r\n                {{ title() }}\r\n              </h3>\r\n              <button\r\n                type=\"button\"\r\n                class=\"rounded-md cursor-pointer bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-500 focus:outline-none\"\r\n                (click)=\"closeModal()\"\r\n              >\r\n                <wdc-icons name=\"close\" size=\"20\"></wdc-icons>\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          <!-- Body -->\r\n          <div class=\"mt-2\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@tailwind utilities;@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.wdc-animate-enter{animation:fadeIn .2s ease-out forwards}.wdc-animate-exit{animation:fadeOut .2s ease-in forwards}.wdc-zoom-enter{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.wdc-zoom-exit{animation:scaleOut .2s ease-in forwards}.wdc-slide-in-left{animation:slideInLeft .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-left{animation:slideOutLeft .3s ease-in forwards!important;will-change:transform}.wdc-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-right{animation:slideOutRight .3s ease-in forwards!important;will-change:transform}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconsComponent, selector: "wdc-icons", inputs: ["name", "customClass", "size", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wdc-modal', imports: [], template: "@if (isOpen()) {\r\n  <div class=\"relative z-50\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n    <!-- Backdrop -->\r\n    <div\r\n      [@fadeAnimation]\r\n      class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n      (click)=\"onBackdropClick()\"\r\n    ></div>\r\n\r\n    <!-- Panel -->\r\n    <div class=\"fixed inset-0 z-10 overflow-y-auto w-screen overflow-x-hidden\">\r\n      <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n        <div\r\n          [@modalAnimation]\r\n          class=\"relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 w-full sm:p-6\"\r\n          [class]=\"sizeClasses()\"\r\n        >\r\n          <!-- Header -->\r\n          @if (title()) {\r\n            <div class=\"mb-4 sm:flex sm:items-start justify-between\">\r\n              <h3\r\n                class=\"text-lg font-semibold leading-6 text-slate-900 dark:text-white\"\r\n                id=\"modal-title\"\r\n              >\r\n                {{ title() }}\r\n              </h3>\r\n              <button\r\n                type=\"button\"\r\n                class=\"rounded-md bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900\"\r\n                (click)=\"closeModal()\"\r\n              >\r\n                <span class=\"sr-only\">Close</span>\r\n                <svg\r\n                  class=\"h-6 w-6\"\r\n                  fill=\"none\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke=\"currentColor\"\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          <!-- Body -->\r\n          <div class=\"mt-2\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n" }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
+            args: [{ selector: 'wdc-modal', standalone: true, imports: [CommonModule, IconsComponent], template: "@if (isRendered()) {\r\n  <div class=\"relative z-50\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\r\n    <!-- Backdrop -->\r\n    <div\r\n      class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n      [class]=\"isClosing() ? 'wdc-animate-exit' : 'wdc-animate-enter'\"\r\n      (click)=\"onBackdropClick()\"\r\n    ></div>\r\n\r\n    <!-- Panel -->\r\n    <div class=\"fixed inset-0 z-10 overflow-y-auto w-screen overflow-x-hidden\">\r\n      <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0\">\r\n        <div\r\n          class=\"relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-900 px-4 pb-4 pt-5 text-left shadow-xl sm:my-8 w-full sm:p-6\"\r\n          [class]=\"(isClosing() ? 'wdc-zoom-exit' : 'wdc-zoom-enter') + ' ' + sizeClasses()\"\r\n        >\r\n          <!-- Header -->\r\n          @if (title()) {\r\n            <div class=\"mb-4 sm:flex sm:items-start justify-between\">\r\n              <h3\r\n                class=\"text-lg font-semibold leading-6 text-slate-900 dark:text-white\"\r\n                id=\"modal-title\"\r\n              >\r\n                {{ title() }}\r\n              </h3>\r\n              <button\r\n                type=\"button\"\r\n                class=\"rounded-md cursor-pointer bg-white dark:bg-slate-900 text-slate-400 hover:text-slate-500 focus:outline-none\"\r\n                (click)=\"closeModal()\"\r\n              >\r\n                <wdc-icons name=\"close\" size=\"20\"></wdc-icons>\r\n              </button>\r\n            </div>\r\n          }\r\n\r\n          <!-- Body -->\r\n          <div class=\"mt-2\">\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@tailwind utilities;@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.wdc-animate-enter{animation:fadeIn .2s ease-out forwards}.wdc-animate-exit{animation:fadeOut .2s ease-in forwards}.wdc-zoom-enter{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.wdc-zoom-exit{animation:scaleOut .2s ease-in forwards}.wdc-slide-in-left{animation:slideInLeft .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-left{animation:slideOutLeft .3s ease-in forwards!important;will-change:transform}.wdc-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-right{animation:slideOutRight .3s ease-in forwards!important;will-change:transform}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 
 class NavbarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -442,40 +440,60 @@ class TabsComponent {
             this.activeTab.set(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: TabsComponent, isStandalone: true, selector: "wdc-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<!-- <div [class]=\"containerClasses\">\r\n  <div role=\"tablist\" [class]=\"listClasses\">\r\n    @for (tab of tabs(); track tab.label()) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [attr.aria-selected]=\"tab.active()\"\r\n        (click)=\"selectTab(tab)\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [class]=\"getTabStyle(tab)\"\r\n        [class.border-indigo-500]=\"activeTab() === tab.label()\"\r\n        [class.text-indigo-600]=\"activeTab() === tab.label()\"\r\n        [class.border-transparent]=\"activeTab() !== tab.label()\"\r\n        [class.text-gray-500]=\"activeTab() !== tab.label()\"\r\n        class=\"group flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 p-1\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div> -->\r\n\r\n<div\r\n  [class]=\"\r\n    `w-full flex bg-white p-4 rounded-lg border border-gray-100 ${orientation() === 'vertical' ? 'flex-row gap-6' : 'flex-col'}`\r\n  \"\r\n>\r\n  <div\r\n    [class]=\"\r\n      `flex flex-shrink-0 border-gray-200 ${orientation() === 'vertical' ? 'border-r w-42 flex-col' : 'border-b'}`\r\n    \"\r\n  >\r\n    <nav\r\n      [class]=\"\r\n        `flex  ${orientation() === 'vertical' ? 'flex-col -mr-px flex-shrink-0' : '-mb-px space-x-8'}`\r\n      \"\r\n    >\r\n      @for (item of tabs(); track $index; let i = $index) {\r\n        <button\r\n          (click)=\"selectTab(item)\"\r\n          [class.border-indigo-500]=\"activeTab() === item\"\r\n          [class.text-indigo-600]=\"activeTab() === item\"\r\n          [class.border-transparent]=\"activeTab() !== item\"\r\n          [class.text-gray-500]=\"activeTab() !== item\"\r\n          [class.hover:text-gray-700]=\"activeTab() !== item\"\r\n          [class.hover:border-gray-300]=\"activeTab() !== item\"\r\n          [class]=\"\r\n            `whitespace-nowrap flex cursor-pointer py-4 px-1 font-medium text-sm transition-all focus:outline-none ${\r\n              orientation() === 'vertical' ? 'border-r-2' : 'border-b-2'\r\n            }`\r\n          \"\r\n        >\r\n          @if (item.headerTemplate()) {\r\n            <ng-container *ngTemplateOutlet=\"item.headerTemplate()\"></ng-container>\r\n          } @else {\r\n            {{ item.label() }}\r\n          }\r\n        </button>\r\n      }\r\n    </nav>\r\n  </div>\r\n\r\n  @if (activeTab(); as active) {\r\n    <div [class]=\"`${orientation() === 'vertical' ? 'flex-1 h-full overflow-y-auto' : 'mt-4'}`\">\r\n      <ng-container *ngTemplateOutlet=\"active.contentTemplate()\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: TabsComponent, isStandalone: true, selector: "wdc-tabs", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<div\r\n  [class]=\"\r\n    `w-full flex bg-white p-4 rounded-lg border border-gray-100 ${orientation() === 'vertical' ? 'flex-row gap-6' : 'flex-col'}`\r\n  \"\r\n>\r\n  <div\r\n    [class]=\"\r\n      `flex flex-shrink-0 border-gray-200 ${orientation() === 'vertical' ? 'border-r w-42 flex-col' : 'border-b'}`\r\n    \"\r\n  >\r\n    <nav\r\n      [class]=\"\r\n        `flex  ${orientation() === 'vertical' ? 'flex-col -mr-px flex-shrink-0' : '-mb-px space-x-8'}`\r\n      \"\r\n    >\r\n      @for (item of tabs(); track $index; let i = $index) {\r\n        <button\r\n          (click)=\"selectTab(item)\"\r\n          [class.border-indigo-500]=\"activeTab() === item\"\r\n          [class.text-indigo-600]=\"activeTab() === item\"\r\n          [class.border-transparent]=\"activeTab() !== item\"\r\n          [class.text-gray-500]=\"activeTab() !== item\"\r\n          [class.hover:text-gray-700]=\"activeTab() !== item\"\r\n          [class.hover:border-gray-300]=\"activeTab() !== item\"\r\n          [class]=\"\r\n            `whitespace-nowrap flex cursor-pointer py-4 px-1 font-medium text-sm transition-all focus:outline-none ${\r\n              orientation() === 'vertical' ? 'border-r-2' : 'border-b-2'\r\n            }`\r\n          \"\r\n        >\r\n          @if (item.headerTemplate()) {\r\n            <ng-container *ngTemplateOutlet=\"item.headerTemplate()\"></ng-container>\r\n          } @else {\r\n            {{ item.label() }}\r\n          }\r\n        </button>\r\n      }\r\n    </nav>\r\n  </div>\r\n\r\n  @if (activeTab(); as active) {\r\n    <div [class]=\"`${orientation() === 'vertical' ? 'flex-1 h-full overflow-y-auto' : 'mt-4'}`\">\r\n      <ng-container *ngTemplateOutlet=\"active.contentTemplate()\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wdc-tabs', imports: [CommonModule], template: "<!-- <div [class]=\"containerClasses\">\r\n  <div role=\"tablist\" [class]=\"listClasses\">\r\n    @for (tab of tabs(); track tab.label()) {\r\n      <button\r\n        type=\"button\"\r\n        role=\"tab\"\r\n        [attr.aria-selected]=\"tab.active()\"\r\n        (click)=\"selectTab(tab)\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [class]=\"getTabStyle(tab)\"\r\n        [class.border-indigo-500]=\"activeTab() === tab.label()\"\r\n        [class.text-indigo-600]=\"activeTab() === tab.label()\"\r\n        [class.border-transparent]=\"activeTab() !== tab.label()\"\r\n        [class.text-gray-500]=\"activeTab() !== tab.label()\"\r\n        class=\"group flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex-1 p-1\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div> -->\r\n\r\n<div\r\n  [class]=\"\r\n    `w-full flex bg-white p-4 rounded-lg border border-gray-100 ${orientation() === 'vertical' ? 'flex-row gap-6' : 'flex-col'}`\r\n  \"\r\n>\r\n  <div\r\n    [class]=\"\r\n      `flex flex-shrink-0 border-gray-200 ${orientation() === 'vertical' ? 'border-r w-42 flex-col' : 'border-b'}`\r\n    \"\r\n  >\r\n    <nav\r\n      [class]=\"\r\n        `flex  ${orientation() === 'vertical' ? 'flex-col -mr-px flex-shrink-0' : '-mb-px space-x-8'}`\r\n      \"\r\n    >\r\n      @for (item of tabs(); track $index; let i = $index) {\r\n        <button\r\n          (click)=\"selectTab(item)\"\r\n          [class.border-indigo-500]=\"activeTab() === item\"\r\n          [class.text-indigo-600]=\"activeTab() === item\"\r\n          [class.border-transparent]=\"activeTab() !== item\"\r\n          [class.text-gray-500]=\"activeTab() !== item\"\r\n          [class.hover:text-gray-700]=\"activeTab() !== item\"\r\n          [class.hover:border-gray-300]=\"activeTab() !== item\"\r\n          [class]=\"\r\n            `whitespace-nowrap flex cursor-pointer py-4 px-1 font-medium text-sm transition-all focus:outline-none ${\r\n              orientation() === 'vertical' ? 'border-r-2' : 'border-b-2'\r\n            }`\r\n          \"\r\n        >\r\n          @if (item.headerTemplate()) {\r\n            <ng-container *ngTemplateOutlet=\"item.headerTemplate()\"></ng-container>\r\n          } @else {\r\n            {{ item.label() }}\r\n          }\r\n        </button>\r\n      }\r\n    </nav>\r\n  </div>\r\n\r\n  @if (activeTab(); as active) {\r\n    <div [class]=\"`${orientation() === 'vertical' ? 'flex-1 h-full overflow-y-auto' : 'mt-4'}`\">\r\n      <ng-container *ngTemplateOutlet=\"active.contentTemplate()\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'wdc-tabs', imports: [CommonModule], template: "<div\r\n  [class]=\"\r\n    `w-full flex bg-white p-4 rounded-lg border border-gray-100 ${orientation() === 'vertical' ? 'flex-row gap-6' : 'flex-col'}`\r\n  \"\r\n>\r\n  <div\r\n    [class]=\"\r\n      `flex flex-shrink-0 border-gray-200 ${orientation() === 'vertical' ? 'border-r w-42 flex-col' : 'border-b'}`\r\n    \"\r\n  >\r\n    <nav\r\n      [class]=\"\r\n        `flex  ${orientation() === 'vertical' ? 'flex-col -mr-px flex-shrink-0' : '-mb-px space-x-8'}`\r\n      \"\r\n    >\r\n      @for (item of tabs(); track $index; let i = $index) {\r\n        <button\r\n          (click)=\"selectTab(item)\"\r\n          [class.border-indigo-500]=\"activeTab() === item\"\r\n          [class.text-indigo-600]=\"activeTab() === item\"\r\n          [class.border-transparent]=\"activeTab() !== item\"\r\n          [class.text-gray-500]=\"activeTab() !== item\"\r\n          [class.hover:text-gray-700]=\"activeTab() !== item\"\r\n          [class.hover:border-gray-300]=\"activeTab() !== item\"\r\n          [class]=\"\r\n            `whitespace-nowrap flex cursor-pointer py-4 px-1 font-medium text-sm transition-all focus:outline-none ${\r\n              orientation() === 'vertical' ? 'border-r-2' : 'border-b-2'\r\n            }`\r\n          \"\r\n        >\r\n          @if (item.headerTemplate()) {\r\n            <ng-container *ngTemplateOutlet=\"item.headerTemplate()\"></ng-container>\r\n          } @else {\r\n            {{ item.label() }}\r\n          }\r\n        </button>\r\n      }\r\n    </nav>\r\n  </div>\r\n\r\n  @if (activeTab(); as active) {\r\n    <div [class]=\"`${orientation() === 'vertical' ? 'flex-1 h-full overflow-y-auto' : 'mt-4'}`\">\r\n      <ng-container *ngTemplateOutlet=\"active.contentTemplate()\"></ng-container>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
 
 class ToastService {
     toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
     nextId = 0;
-    show(message, type = 'info', duration = 3000) {
+    defaultPosition = 'top-center';
+    toastTimeouts = new Map();
+    MAX_TOASTS = 5;
+    show(message, type = 'info', duration = 3000, position) {
         const id = this.nextId++;
-        const toast = { id, message, type, duration };
-        this.toasts.update((current) => [...current, toast]);
+        const finalPosition = position || this.defaultPosition;
+        const toast = { id, message, type, duration, position: finalPosition };
+        this.toasts.update((current) => {
+            // Optional: Limit max toasts to prevent UI clutter
+            if (current.length >= this.MAX_TOASTS) {
+                this.remove(current[0].id);
+            }
+            return [...current, toast];
+        });
         if (duration > 0) {
-            setTimeout(() => {
-                this.remove(id);
-            }, duration);
+            const timer = setTimeout(() => this.remove(id), duration);
+            this.toastTimeouts.set(id, timer);
         }
     }
+    // Confirm your remove method looks like this:
     remove(id) {
-        this.toasts.update((current) => current.filter((t) => t.id !== id));
+        const currentToasts = this.toasts();
+        const toastExists = currentToasts.find((t) => t.id === id);
+        if (!toastExists || toastExists.closing)
+            return;
+        // 1. Set Closing Flag (Triggers .animate-out CSS)
+        this.toasts.update((current) => current.map((t) => (t.id === id ? { ...t, closing: true } : t)));
+        // 2. Wait 300ms (Matches CSS duration) then delete
+        setTimeout(() => {
+            this.toasts.update((current) => current.filter((t) => t.id !== id));
+        }, 300);
     }
-    success(message, duration) {
-        this.show(message, 'success', duration);
+    // --- Helper Methods ---
+    success(message, duration, position) {
+        this.show(message, 'success', duration, position);
     }
-    error(message, duration) {
-        this.show(message, 'error', duration);
+    error(message, duration, position) {
+        this.show(message, 'error', duration, position);
     }
-    warning(message, duration) {
-        this.show(message, 'warning', duration);
+    warning(message, duration, position) {
+        this.show(message, 'warning', duration, position);
     }
-    info(message, duration) {
-        this.show(message, 'info', duration);
+    info(message, duration, position) {
+        this.show(message, 'info', duration, position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastService, providedIn: 'root' });
@@ -488,9 +506,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
         }] });
 
 class ToastComponent {
-    toastService;
-    constructor(toastService) {
-        this.toastService = toastService;
+    toastService = inject(ToastService);
+    // 1. Identify which positions currently have active toasts
+    activePositions = computed(() => {
+        const toasts = this.toastService.toasts();
+        // Returns unique positions (e.g., ['top-right', 'bottom-center'])
+        return [...new Set(toasts.map((t) => t.position))];
+    }, ...(ngDevMode ? [{ debugName: "activePositions" }] : []));
+    // 2. Helper to get toasts for a specific position loop
+    getToastsByPosition(pos) {
+        return this.toastService.toasts().filter((t) => t.position === pos);
+    }
+    // 3. Get CSS for the Container (The fixed wrapper)
+    getPositionClasses(pos) {
+        const base = 'fixed z-[100] flex flex-col gap-2 pointer-events-none p-4 max-w-full';
+        const positions = {
+            'top-left': 'top-0 left-0 items-start',
+            'top-center': 'top-0 left-1/2 -translate-x-1/2 items-center',
+            'top-right': 'top-0 right-0 items-end',
+            'bottom-left': 'bottom-0 left-0 items-start',
+            'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center',
+            'bottom-right': 'bottom-0 right-0 items-end',
+        };
+        return `${base} ${positions[pos]}`;
+    }
+    // 4. Get Animation based on position
+    getAnimationClass(pos, isClosing) {
+        const duration = 'duration-300'; // Common duration
+        // 1. EXIT ANIMATIONS (Jab closing: true ho)
+        if (isClosing) {
+            if (pos.includes('left'))
+                return `animate-out fade-out slide-out-to-left ${duration}`;
+            if (pos.includes('right'))
+                return `animate-out fade-out slide-out-to-right ${duration}`;
+            if (pos.includes('top'))
+                return `animate-out fade-out slide-out-to-top ${duration}`;
+            return `animate-out fade-out slide-out-to-bottom ${duration}`;
+        }
+        // 2. ENTER ANIMATIONS (Jab naya aaye)
+        if (pos.includes('left'))
+            return `animate-in slide-in-from-left ${duration}`;
+        if (pos.includes('right'))
+            return `animate-in slide-in-from-right ${duration}`;
+        if (pos.includes('top'))
+            return `animate-in slide-in-from-top ${duration}`;
+        return `animate-in slide-in-from-bottom ${duration}`;
     }
     getIcon(type) {
         switch (type) {
@@ -504,25 +564,51 @@ class ToastComponent {
                 return 'info';
         }
     }
+    // Helper for container colors
     getClasses(type) {
+        const base = 'pointer-events-auto flex items-center gap-2 w-full max-w-xs px-4 py-3 rounded-lg shadow-lg border duration-300';
+        let colorClass = '';
         switch (type) {
             case 'success':
-                return 'bg-green-50 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800';
+                colorClass =
+                    'bg-green-50 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800';
+                break;
             case 'error':
-                return 'bg-red-50 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800';
+                colorClass =
+                    'bg-red-50 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800';
+                break;
             case 'warning':
-                return 'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800';
+                colorClass =
+                    'bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800';
+                break;
             case 'info':
-                return 'bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800';
+                colorClass =
+                    'bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800';
+                break;
         }
+        return `${base} ${colorClass}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: ToastComponent, isStandalone: true, selector: "wdc-toast", ngImport: i0, template: "<div class=\"fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none\">\r\n  <div\r\n    *ngFor=\"let toast of toastService.toasts()\"\r\n    class=\"pointer-events-auto flex items-center w-full max-w-xs p-4 rounded-lg shadow-lg border animate-in slide-in-from-right fade-in duration-300\"\r\n    [class]=\"getClasses(toast.type)\"\r\n    role=\"alert\"\r\n  >\r\n    <div class=\"inline-flex items-center justify-center flex-shrink-0 w-8 h-8\">\r\n      <span class=\"material-icons-outlined text-xl\">{{ getIcon(toast.type) }}</span>\r\n    </div>\r\n    <div class=\"ml-3 text-sm font-normal\">{{ toast.message }}</div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 hover:bg-black/5 dark:hover:bg-white/10 inline-flex items-center justify-center h-8 w-8 transition-colors\"\r\n      aria-label=\"Close\"\r\n      (click)=\"toastService.remove(toast.id)\"\r\n      [class]=\"\r\n        'text-' +\r\n        (toast.type === 'info'\r\n          ? 'blue'\r\n          : toast.type === 'error'\r\n            ? 'red'\r\n            : toast.type === 'success'\r\n              ? 'green'\r\n              : 'yellow') +\r\n        '-500'\r\n      \"\r\n    >\r\n      <span class=\"sr-only\">Close</span>\r\n      <svg\r\n        class=\"w-3 h-3\"\r\n        aria-hidden=\"true\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 14 14\"\r\n      >\r\n        <path\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"\r\n        />\r\n      </svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    // Helper for Close button colors (Tailwind safe)
+    getCloseButtonClass(type) {
+        const base = 'ml-auto -mx-1.5 -my-1.5 rounded-lg cursor-pointer focus:outline-none p-1.5 hover:bg-black/5 dark:hover:bg-white/10 inline-flex items-center justify-center h-8 w-8 transition-colors';
+        switch (type) {
+            case 'success':
+                return `${base} text-green-500`;
+            case 'error':
+                return `${base} text-red-500`;
+            case 'warning':
+                return `${base} text-yellow-500`;
+            case 'info':
+                return `${base} text-blue-500`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ToastComponent, isStandalone: true, selector: "wdc-toast", ngImport: i0, template: "@for (pos of activePositions(); track pos) {\r\n  <div [class]=\"getPositionClasses(pos)\">\r\n    @for (toast of getToastsByPosition(pos); track toast.id) {\r\n      <div\r\n        [class]=\"getClasses(toast.type) + ' ' + getAnimationClass(pos, toast.closing)\"\r\n        role=\"alert\"\r\n      >\r\n        <div class=\"inline-flex items-center justify-center flex-shrink-0 w-8 h-8\">\r\n          <wdc-icons [name]=\"getIcon(toast.type)\" size=\"24\"></wdc-icons>\r\n        </div>\r\n\r\n        <div class=\"text-sm font-normal\">{{ toast.message }}</div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"toastService.remove(toast.id)\"\r\n          [class]=\"getCloseButtonClass(toast.type)\"\r\n          aria-label=\"Close\"\r\n        >\r\n          <wdc-icons name=\"close\"></wdc-icons>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".animate-in,.animate-out{animation-duration:.3s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards;will-change:transform,opacity}.slide-in-from-top{animation-name:slideInTop}@keyframes slideInTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.slide-in-from-bottom{animation-name:slideInBottom}@keyframes slideInBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.slide-in-from-left{animation-name:slideInLeft}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-from-right{animation-name:slideInRight}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.fade-out{opacity:0}.slide-out-to-top{animation-name:slideOutTop}@keyframes slideOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}.slide-out-to-bottom{animation-name:slideOutBottom}@keyframes slideOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.slide-out-to-left{animation-name:slideOutLeft}@keyframes slideOutLeft{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}.slide-out-to-right{animation-name:slideOutRight}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconsComponent, selector: "wdc-icons", inputs: ["name", "customClass", "size", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wdc-toast', standalone: true, imports: [CommonModule], template: "<div class=\"fixed top-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none\">\r\n  <div\r\n    *ngFor=\"let toast of toastService.toasts()\"\r\n    class=\"pointer-events-auto flex items-center w-full max-w-xs p-4 rounded-lg shadow-lg border animate-in slide-in-from-right fade-in duration-300\"\r\n    [class]=\"getClasses(toast.type)\"\r\n    role=\"alert\"\r\n  >\r\n    <div class=\"inline-flex items-center justify-center flex-shrink-0 w-8 h-8\">\r\n      <span class=\"material-icons-outlined text-xl\">{{ getIcon(toast.type) }}</span>\r\n    </div>\r\n    <div class=\"ml-3 text-sm font-normal\">{{ toast.message }}</div>\r\n    <button\r\n      type=\"button\"\r\n      class=\"ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 hover:bg-black/5 dark:hover:bg-white/10 inline-flex items-center justify-center h-8 w-8 transition-colors\"\r\n      aria-label=\"Close\"\r\n      (click)=\"toastService.remove(toast.id)\"\r\n      [class]=\"\r\n        'text-' +\r\n        (toast.type === 'info'\r\n          ? 'blue'\r\n          : toast.type === 'error'\r\n            ? 'red'\r\n            : toast.type === 'success'\r\n              ? 'green'\r\n              : 'yellow') +\r\n        '-500'\r\n      \"\r\n    >\r\n      <span class=\"sr-only\">Close</span>\r\n      <svg\r\n        class=\"w-3 h-3\"\r\n        aria-hidden=\"true\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        fill=\"none\"\r\n        viewBox=\"0 0 14 14\"\r\n      >\r\n        <path\r\n          stroke=\"currentColor\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"2\"\r\n          d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"\r\n        />\r\n      </svg>\r\n    </button>\r\n  </div>\r\n</div>\r\n" }]
-        }], ctorParameters: () => [{ type: ToastService }] });
+            args: [{ selector: 'wdc-toast', standalone: true, imports: [CommonModule, IconsComponent], template: "@for (pos of activePositions(); track pos) {\r\n  <div [class]=\"getPositionClasses(pos)\">\r\n    @for (toast of getToastsByPosition(pos); track toast.id) {\r\n      <div\r\n        [class]=\"getClasses(toast.type) + ' ' + getAnimationClass(pos, toast.closing)\"\r\n        role=\"alert\"\r\n      >\r\n        <div class=\"inline-flex items-center justify-center flex-shrink-0 w-8 h-8\">\r\n          <wdc-icons [name]=\"getIcon(toast.type)\" size=\"24\"></wdc-icons>\r\n        </div>\r\n\r\n        <div class=\"text-sm font-normal\">{{ toast.message }}</div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          (click)=\"toastService.remove(toast.id)\"\r\n          [class]=\"getCloseButtonClass(toast.type)\"\r\n          aria-label=\"Close\"\r\n        >\r\n          <wdc-icons name=\"close\"></wdc-icons>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".animate-in,.animate-out{animation-duration:.3s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards;will-change:transform,opacity}.slide-in-from-top{animation-name:slideInTop}@keyframes slideInTop{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.slide-in-from-bottom{animation-name:slideInBottom}@keyframes slideInBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.slide-in-from-left{animation-name:slideInLeft}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in-from-right{animation-name:slideInRight}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.fade-out{opacity:0}.slide-out-to-top{animation-name:slideOutTop}@keyframes slideOutTop{0%{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}.slide-out-to-bottom{animation-name:slideOutBottom}@keyframes slideOutBottom{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.slide-out-to-left{animation-name:slideOutLeft}@keyframes slideOutLeft{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}.slide-out-to-right{animation-name:slideOutRight}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"] }]
+        }] });
 
 class TableComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -628,26 +714,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
         }] });
 
 class DrawerComponent {
-    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : []));
-    close() {
-        this.isOpen.set(false);
+    isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    footer = input(false, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    close = output();
+    width = input('w-80 max-w-[80vw]', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    isRendered = signal(false, ...(ngDevMode ? [{ debugName: "isRendered" }] : []));
+    isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.isOpen()) {
+                this.isClosing.set(false);
+                this.isRendered.set(true);
+            }
+            else {
+                this.isClosing.set(true);
+                setTimeout(() => this.isRendered.set(false), 300);
+            }
+        });
     }
-    get transformParams() {
-        return {
-            value: this.isOpen(),
-            params: {
-                transform: this.position() === 'right' ? 'translateX(100%)' : 'translateX(-100%)',
-            },
-        };
+    // 1. Parent Container ka Alignment (Left vs Right)
+    getFlexDirection() {
+        return this.position() === 'right' ? 'justify-end' : 'justify-start';
+    }
+    // 2. Sidebar ki Width
+    getWidthClass() {
+        return 'w-80 max-w-[80vw]'; // Mobile responsive width
+    }
+    // 3. Animation Class (Sirf Transform wali classes)
+    getAnimationClass() {
+        const pos = this.position();
+        const closing = this.isClosing();
+        if (pos === 'left') {
+            return closing ? 'wdc-slide-out-left' : 'wdc-slide-in-left';
+        }
+        if (pos === 'right') {
+            return closing ? 'wdc-slide-out-right' : 'wdc-slide-in-right';
+        }
+        return '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DrawerComponent, isStandalone: true, selector: "wdc-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, ngImport: i0, template: "@if (isOpen()) {\r\n  <div class=\"relative z-50\" aria-labelledby=\"slide-over-title\" role=\"dialog\" aria-modal=\"true\">\r\n    <!-- Backdrop -->\r\n    <div\r\n      [@fadeAnimation]\r\n      class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n      (click)=\"close()\"\r\n    ></div>\r\n\r\n    <!-- Panel -->\r\n    <div class=\"fixed inset-0 overflow-hidden pointer-events-none\">\r\n      <div class=\"absolute inset-0 overflow-hidden\">\r\n        <div\r\n          class=\"pointer-events-auto fixed inset-y-0 flex max-w-full\"\r\n          [class.right-0]=\"position() === 'right'\"\r\n          [class.left-0]=\"position() === 'left'\"\r\n          [class.pl-10]=\"position() === 'right'\"\r\n          [class.sm:pl-16]=\"position() === 'right'\"\r\n          [class.pr-10]=\"position() === 'left'\"\r\n          [class.sm:pr-16]=\"position() === 'left'\"\r\n        >\r\n          <div\r\n            [@drawerAnimation]=\"transformParams\"\r\n            class=\"flex w-screen max-w-md flex-col overflow-y-scroll bg-white dark:bg-slate-900 py-6 shadow-2xl\"\r\n          >\r\n            <div class=\"px-4 sm:px-6 flex items-center justify-between\">\r\n              <h2\r\n                class=\"text-base font-semibold leading-6 text-slate-900 dark:text-white\"\r\n                id=\"slide-over-title\"\r\n              >\r\n                <ng-content select=\"[header]\"></ng-content>\r\n              </h2>\r\n              <button\r\n                type=\"button\"\r\n                class=\"rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\r\n                (click)=\"close()\"\r\n              >\r\n                <span class=\"sr-only\">Close panel</span>\r\n                <svg\r\n                  class=\"h-6 w-6\"\r\n                  fill=\"none\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke=\"currentColor\"\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"relative mt-6 flex-1 px-4 sm:px-6 text-slate-600 dark:text-slate-400\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DrawerComponent, isStandalone: true, selector: "wdc-drawer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@if (isRendered()) {\r\n  <div class=\"fixed inset-0 z-50 flex pointer-events-none\" [ngClass]=\"getFlexDirection()\">\r\n    <div\r\n      class=\"fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity pointer-events-auto\"\r\n      [class]=\"isClosing() ? 'wdc-animate-exit' : 'wdc-animate-enter'\"\r\n      (click)=\"close.emit()\"\r\n    ></div>\r\n\r\n    <div\r\n      class=\"relative pointer-events-auto bg-white dark:bg-slate-900 shadow-2xl flex flex-col h-full\"\r\n      [class]=\"getAnimationClass() + ' ' + width()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div>\r\n        <ng-content select=\"[drawer-header]\"></ng-content>\r\n      </div>\r\n      <div>\r\n        <ng-content select=\"[drawer-body]\"></ng-content>\r\n      </div>\r\n      @if (footer()) {\r\n        <div>\r\n          <ng-content select=\"[drawer-footer]\"></ng-content>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@tailwind utilities;@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.wdc-animate-enter{animation:fadeIn .2s ease-out forwards}.wdc-animate-exit{animation:fadeOut .2s ease-in forwards}.wdc-zoom-enter{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.wdc-zoom-exit{animation:scaleOut .2s ease-in forwards}.wdc-slide-in-left{animation:slideInLeft .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-left{animation:slideOutLeft .3s ease-in forwards!important;will-change:transform}.wdc-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-right{animation:slideOutRight .3s ease-in forwards!important;will-change:transform}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wdc-drawer', imports: [CommonModule], template: "@if (isOpen()) {\r\n  <div class=\"relative z-50\" aria-labelledby=\"slide-over-title\" role=\"dialog\" aria-modal=\"true\">\r\n    <!-- Backdrop -->\r\n    <div\r\n      [@fadeAnimation]\r\n      class=\"fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity\"\r\n      (click)=\"close()\"\r\n    ></div>\r\n\r\n    <!-- Panel -->\r\n    <div class=\"fixed inset-0 overflow-hidden pointer-events-none\">\r\n      <div class=\"absolute inset-0 overflow-hidden\">\r\n        <div\r\n          class=\"pointer-events-auto fixed inset-y-0 flex max-w-full\"\r\n          [class.right-0]=\"position() === 'right'\"\r\n          [class.left-0]=\"position() === 'left'\"\r\n          [class.pl-10]=\"position() === 'right'\"\r\n          [class.sm:pl-16]=\"position() === 'right'\"\r\n          [class.pr-10]=\"position() === 'left'\"\r\n          [class.sm:pr-16]=\"position() === 'left'\"\r\n        >\r\n          <div\r\n            [@drawerAnimation]=\"transformParams\"\r\n            class=\"flex w-screen max-w-md flex-col overflow-y-scroll bg-white dark:bg-slate-900 py-6 shadow-2xl\"\r\n          >\r\n            <div class=\"px-4 sm:px-6 flex items-center justify-between\">\r\n              <h2\r\n                class=\"text-base font-semibold leading-6 text-slate-900 dark:text-white\"\r\n                id=\"slide-over-title\"\r\n              >\r\n                <ng-content select=\"[header]\"></ng-content>\r\n              </h2>\r\n              <button\r\n                type=\"button\"\r\n                class=\"rounded-md text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500\"\r\n                (click)=\"close()\"\r\n              >\r\n                <span class=\"sr-only\">Close panel</span>\r\n                <svg\r\n                  class=\"h-6 w-6\"\r\n                  fill=\"none\"\r\n                  viewBox=\"0 0 24 24\"\r\n                  stroke-width=\"1.5\"\r\n                  stroke=\"currentColor\"\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n            <div class=\"relative mt-6 flex-1 px-4 sm:px-6 text-slate-600 dark:text-slate-400\">\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n" }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+            args: [{ selector: 'wdc-drawer', imports: [CommonModule], standalone: true, template: "@if (isRendered()) {\r\n  <div class=\"fixed inset-0 z-50 flex pointer-events-none\" [ngClass]=\"getFlexDirection()\">\r\n    <div\r\n      class=\"fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity pointer-events-auto\"\r\n      [class]=\"isClosing() ? 'wdc-animate-exit' : 'wdc-animate-enter'\"\r\n      (click)=\"close.emit()\"\r\n    ></div>\r\n\r\n    <div\r\n      class=\"relative pointer-events-auto bg-white dark:bg-slate-900 shadow-2xl flex flex-col h-full\"\r\n      [class]=\"getAnimationClass() + ' ' + width()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div>\r\n        <ng-content select=\"[drawer-header]\"></ng-content>\r\n      </div>\r\n      <div>\r\n        <ng-content select=\"[drawer-body]\"></ng-content>\r\n      </div>\r\n      @if (footer()) {\r\n        <div>\r\n          <ng-content select=\"[drawer-footer]\"></ng-content>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@tailwind utilities;@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.wdc-animate-enter{animation:fadeIn .2s ease-out forwards}.wdc-animate-exit{animation:fadeOut .2s ease-in forwards}.wdc-zoom-enter{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.wdc-zoom-exit{animation:scaleOut .2s ease-in forwards}.wdc-slide-in-left{animation:slideInLeft .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-left{animation:slideOutLeft .3s ease-in forwards!important;will-change:transform}.wdc-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-right{animation:slideOutRight .3s ease-in forwards!important;will-change:transform}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 class CarouselComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -710,9 +823,830 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
             args: [{ selector: 'wdc-page-loader', imports: [CommonModule, SpinnerComponent], template: "<div\r\n  class=\"fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/80 dark:bg-slate-900/80 backdrop-blur-md transition-all duration-300\"\r\n  [class.absolute]=\"!fullScreen()\"\r\n  [class.fixed]=\"fullScreen()\"\r\n>\r\n  <wdc-spinner size=\"lg\" color=\"primary\"></wdc-spinner>\r\n  @if (message()) {\r\n    <p class=\"mt-4 text-sm font-medium text-slate-600 dark:text-slate-400 animate-pulse\">\r\n      {{ message() }}\r\n    </p>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }] } });
 
+class AccordionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: AccordionComponent, isStandalone: true, selector: "wdc-accordion", ngImport: i0, template: "<div class=\"flex flex-col space-y-4\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-accordion', imports: [], template: "<div class=\"flex flex-col space-y-4\">\r\n  <ng-content></ng-content>\r\n</div>\r\n" }]
+        }] });
+
+class AccordionItemComponent {
+    open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    noPaddingBody = input(false, ...(ngDevMode ? [{ debugName: "noPaddingBody" }] : []));
+    customActions = input(false, ...(ngDevMode ? [{ debugName: "customActions" }] : []));
+    ngOnInit() {
+        this.active.set(this.open());
+    }
+    toggleAccordion() {
+        this.active.set(!this.active());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: AccordionItemComponent, isStandalone: true, selector: "wdc-accordion-item", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, noPaddingBody: { classPropertyName: "noPaddingBody", publicName: "noPaddingBody", isSignal: true, isRequired: false, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-xl shadow-sm overflow-hidden\">\r\n  <button\r\n    class=\"flex cursor-pointer items-center justify-between w-full px-4 py-4 border-b border-gray-100 font-medium hover:bg-gray-100\"\r\n    (click)=\"toggleAccordion()\"\r\n  >\r\n    <div>\r\n      <ng-content select=\"[accordion-header]\"></ng-content>\r\n    </div>\r\n    @if (customActions()) {\r\n      <ng-content select=\"[accordion-actions]\"></ng-content>\r\n    } @else {\r\n      <div class=\"transition-transform duration-200\" [class]=\"{ 'rotate-180': active() }\">\r\n        <wdc-icons name=\"keyboard_arrow_down\" size=\"24\"></wdc-icons>\r\n      </div>\r\n    }\r\n  </button>\r\n  @if (active()) {\r\n    <div [class]=\"noPaddingBody() ? '' : 'p-4'\">\r\n      <ng-content select=\"[accordion-body]\"></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: IconsComponent, selector: "wdc-icons", inputs: ["name", "customClass", "size", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-accordion-item', standalone: true, imports: [IconsComponent], template: "<div class=\"flex flex-col bg-white rounded-xl shadow-sm overflow-hidden\">\r\n  <button\r\n    class=\"flex cursor-pointer items-center justify-between w-full px-4 py-4 border-b border-gray-100 font-medium hover:bg-gray-100\"\r\n    (click)=\"toggleAccordion()\"\r\n  >\r\n    <div>\r\n      <ng-content select=\"[accordion-header]\"></ng-content>\r\n    </div>\r\n    @if (customActions()) {\r\n      <ng-content select=\"[accordion-actions]\"></ng-content>\r\n    } @else {\r\n      <div class=\"transition-transform duration-200\" [class]=\"{ 'rotate-180': active() }\">\r\n        <wdc-icons name=\"keyboard_arrow_down\" size=\"24\"></wdc-icons>\r\n      </div>\r\n    }\r\n  </button>\r\n  @if (active()) {\r\n    <div [class]=\"noPaddingBody() ? '' : 'p-4'\">\r\n      <ng-content select=\"[accordion-body]\"></ng-content>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], noPaddingBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "noPaddingBody", required: false }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }] } });
+
+class SidebarComponent {
+    isOpen = input.required(...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    footer = input(false, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : []));
+    close = output();
+    isRendered = signal(false, ...(ngDevMode ? [{ debugName: "isRendered" }] : []));
+    isClosing = signal(false, ...(ngDevMode ? [{ debugName: "isClosing" }] : []));
+    constructor() {
+        effect(() => {
+            if (this.isOpen()) {
+                this.isClosing.set(false);
+                this.isRendered.set(true);
+            }
+            else {
+                this.isClosing.set(true);
+                setTimeout(() => this.isRendered.set(false), 300);
+            }
+        });
+    }
+    // 1. Parent Container ka Alignment (Left vs Right)
+    getFlexDirection() {
+        return this.position() === 'right' ? 'justify-end' : 'justify-start';
+    }
+    // 2. Sidebar ki Width
+    getWidthClass() {
+        return 'w-80 max-w-[80vw]'; // Mobile responsive width
+    }
+    // 3. Animation Class (Sirf Transform wali classes)
+    getAnimationClass() {
+        const pos = this.position();
+        const closing = this.isClosing();
+        if (pos === 'left') {
+            return closing ? 'wdc-slide-out-left' : 'wdc-slide-in-left';
+        }
+        if (pos === 'right') {
+            return closing ? 'wdc-slide-out-right' : 'wdc-slide-in-right';
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: SidebarComponent, isStandalone: true, selector: "wdc-sidebar", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "@if (isRendered()) {\r\n  <div class=\"fixed inset-0 z-50 flex pointer-events-none\" [ngClass]=\"getFlexDirection()\">\r\n    <div\r\n      class=\"fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity pointer-events-auto\"\r\n      [class]=\"isClosing() ? 'wdc-animate-exit' : 'wdc-animate-enter'\"\r\n      (click)=\"close.emit()\"\r\n    ></div>\r\n\r\n    <div\r\n      class=\"relative pointer-events-auto bg-white dark:bg-slate-900 shadow-2xl flex flex-col h-full\"\r\n      [class]=\"getAnimationClass() + ' ' + getWidthClass()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div>\r\n        <ng-content select=\"[sidebar-header]\"></ng-content>\r\n      </div>\r\n      <div>\r\n        <ng-content select=\"[sidebar-body]\"></ng-content>\r\n      </div>\r\n      @if (footer()) {\r\n        <div>\r\n          <ng-content select=\"[sidebar-footer]\"></ng-content>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@tailwind utilities;@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.wdc-animate-enter{animation:fadeIn .2s ease-out forwards}.wdc-animate-exit{animation:fadeOut .2s ease-in forwards}.wdc-zoom-enter{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.wdc-zoom-exit{animation:scaleOut .2s ease-in forwards}.wdc-slide-in-left{animation:slideInLeft .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-left{animation:slideOutLeft .3s ease-in forwards!important;will-change:transform}.wdc-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-right{animation:slideOutRight .3s ease-in forwards!important;will-change:transform}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-sidebar', standalone: true, imports: [CommonModule], template: "@if (isRendered()) {\r\n  <div class=\"fixed inset-0 z-50 flex pointer-events-none\" [ngClass]=\"getFlexDirection()\">\r\n    <div\r\n      class=\"fixed inset-0 bg-black/30 backdrop-blur-sm transition-opacity pointer-events-auto\"\r\n      [class]=\"isClosing() ? 'wdc-animate-exit' : 'wdc-animate-enter'\"\r\n      (click)=\"close.emit()\"\r\n    ></div>\r\n\r\n    <div\r\n      class=\"relative pointer-events-auto bg-white dark:bg-slate-900 shadow-2xl flex flex-col h-full\"\r\n      [class]=\"getAnimationClass() + ' ' + getWidthClass()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      <div>\r\n        <ng-content select=\"[sidebar-header]\"></ng-content>\r\n      </div>\r\n      <div>\r\n        <ng-content select=\"[sidebar-body]\"></ng-content>\r\n      </div>\r\n      @if (footer()) {\r\n        <div>\r\n          <ng-content select=\"[sidebar-footer]\"></ng-content>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@tailwind utilities;@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial); --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial); --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.wdc-animate-enter{animation:fadeIn .2s ease-out forwards}.wdc-animate-exit{animation:fadeOut .2s ease-in forwards}.wdc-zoom-enter{animation:scaleIn .3s cubic-bezier(.16,1,.3,1) forwards}.wdc-zoom-exit{animation:scaleOut .2s ease-in forwards}.wdc-slide-in-left{animation:slideInLeft .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-left{animation:slideOutLeft .3s ease-in forwards!important;will-change:transform}.wdc-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1) forwards!important;will-change:transform}.wdc-slide-out-right{animation:slideOutRight .3s ease-in forwards!important;will-change:transform}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideOutLeft{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideOutRight{0%{transform:translate(0)}to{transform:translate(100%)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
+class TextInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    set disabled(val) {
+        this.isDisabled.set(val);
+    }
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: TextInputComponent, isStandalone: true, selector: "wdc-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n  <input\r\n    [type]=\"type()\"\r\n    [value]=\"value()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"isDisabled()\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    [class.border-rose-300]=\"error()\"\r\n    [class.focus:ring-rose-500]=\"error()\"\r\n    [class.focus:border-rose-500]=\"error()\"\r\n    [class.border-gray-200]=\"!error()\"\r\n    [class.focus:ring-indigo-500]=\"!error()\"\r\n    [class.focus:border-indigo-500]=\"!error()\"\r\n    class=\"w-full px-3 py-2 bg-white border-2 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\r\n  />\r\n  @if (error()) {\r\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-text-input', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n  <input\r\n    [type]=\"type()\"\r\n    [value]=\"value()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"isDisabled()\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n    [class.border-rose-300]=\"error()\"\r\n    [class.focus:ring-rose-500]=\"error()\"\r\n    [class.focus:border-rose-500]=\"error()\"\r\n    [class.border-gray-200]=\"!error()\"\r\n    [class.focus:ring-indigo-500]=\"!error()\"\r\n    [class.focus:border-indigo-500]=\"!error()\"\r\n    class=\"w-full px-3 py-2 bg-white border-2 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\r\n  />\r\n  @if (error()) {\r\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{
+                type: Input
+            }] } });
+
+class SelectInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    // State
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : [])); // Single value or Array
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Computed
+    filteredOptions = computed(() => {
+        const term = this.searchTerm().toLowerCase();
+        const opts = this.options();
+        if (!term)
+            return opts;
+        return opts.filter((o) => o.label.toLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    displayValue = computed(() => {
+        const val = this.value();
+        const opts = this.options();
+        if (this.multiple()) {
+            if (!Array.isArray(val) || val.length === 0)
+                return '';
+            return val.map((v) => opts.find((o) => o.value == v)?.label || v).join(', ');
+        }
+        else {
+            return opts.find((o) => o.value == val)?.label || '';
+        }
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    selectedLabels = computed(() => {
+        if (!this.multiple() || !Array.isArray(this.value()))
+            return [];
+        const opts = this.options();
+        return this.value().map((v) => ({
+            value: v,
+            label: opts.find((o) => o.value == v)?.label || v,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "selectedLabels" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    toggleDropdown() {
+        if (this.disabled())
+            return;
+        this.isOpen.update((v) => !v);
+        if (this.isOpen()) {
+            this.searchTerm.set(''); // Reset search on open
+        }
+        else {
+            this.onTouched();
+        }
+    }
+    closeDropdown() {
+        this.isOpen.set(false);
+        this.onTouched();
+    }
+    selectOption(optValue) {
+        if (this.multiple()) {
+            const current = Array.isArray(this.value()) ? [...this.value()] : [];
+            const index = current.indexOf(optValue);
+            if (index > -1) {
+                current.splice(index, 1);
+            }
+            else {
+                current.push(optValue);
+            }
+            this.value.set(current);
+            this.onChange(current);
+        }
+        else {
+            this.value.set(optValue);
+            this.onChange(optValue);
+            this.closeDropdown();
+        }
+    }
+    isSelected(optValue) {
+        if (this.multiple()) {
+            return Array.isArray(this.value()) && this.value().includes(optValue);
+        }
+        return this.value() == optValue; // Loose equality for number/string mix
+    }
+    removeValue(optValue, event) {
+        event.stopPropagation();
+        if (this.disabled())
+            return;
+        const current = [...this.value()];
+        const index = current.indexOf(optValue);
+        if (index > -1) {
+            current.splice(index, 1);
+            this.value.set(current);
+            this.onChange(current);
+        }
+    }
+    // CVA Implementation
+    writeValue(value) {
+        if (this.multiple() && !Array.isArray(value)) {
+            this.value.set(value ? [value] : []);
+        }
+        else {
+            this.value.set(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: SelectInputComponent, isStandalone: true, selector: "wdc-select-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full relative\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n\r\n  <!-- Trigger -->\r\n  <div\r\n    (click)=\"toggleDropdown()\"\r\n    [class.border-rose-300]=\"error()\"\r\n    [class.focus-within:border-rose-500]=\"error()\"\r\n    [class.border-gray-200]=\"!error()\"\r\n    [class.focus-within:border-indigo-500]=\"!error()\"\r\n    class=\"relative w-full min-h-[42px] px-3 py-2 border-2 rounded-lg bg-white cursor-pointer transition-all flex items-center justify-between gap-2 focus-within:ring-0\"\r\n    [class.opacity-60]=\"disabled()\"\r\n    [class.cursor-not-allowed]=\"disabled()\"\r\n    [class.border-indigo-500]=\"isOpen() && !error()\"\r\n  >\r\n    <div class=\"flex-1 flex flex-wrap gap-1.5 items-center overflow-hidden\">\r\n      @if (multiple() && selectedLabels().length > 0) {\r\n        @for (item of selectedLabels(); track item.value) {\r\n          <span\r\n            class=\"inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-100\"\r\n          >\r\n            {{ item.label }}\r\n            <button\r\n              (click)=\"removeValue(item.value, $event)\"\r\n              type=\"button\"\r\n              class=\"ml-1 text-indigo-400 hover:text-indigo-900 focus:outline-none\"\r\n            >\r\n              <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M6 18L18 6M6 6l12 12\"\r\n                ></path>\r\n              </svg>\r\n            </button>\r\n          </span>\r\n        }\r\n      } @else if (!multiple() && displayValue()) {\r\n        <span class=\"text-gray-900 text-sm truncate\">{{ displayValue() }}</span>\r\n      } @else {\r\n        <span class=\"text-gray-400 text-sm\">{{ placeholder() }}</span>\r\n      }\r\n    </div>\r\n\r\n    <!-- Arrow -->\r\n    <svg\r\n      [class.rotate-180]=\"isOpen()\"\r\n      class=\"w-4 h-4 text-gray-500 transition-transform duration-200 shrink-0\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"2\"\r\n        d=\"M19 9l-7 7-7-7\"\r\n      ></path>\r\n    </svg>\r\n  </div>\r\n\r\n  <!-- Error Message -->\r\n  @if (error()) {\r\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\r\n  }\r\n\r\n  <!-- Dropdown -->\r\n  @if (isOpen()) {\r\n    <!-- Backdrop for click outside -->\r\n    <div\r\n      (click)=\"closeDropdown()\"\r\n      class=\"fixed inset-0 z-10 cursor-default\"\r\n      style=\"background: transparent\"\r\n    ></div>\r\n\r\n    <div\r\n      class=\"absolute z-20 mt-1 w-full bg-white rounded-xl border-2 border-gray-100 shadow-xl py-1 overflow-hidden animate-in fade-in zoom-in-95 duration-100 origin-top\"\r\n    >\r\n      <!-- Search Input -->\r\n      @if (searchable() || options().length > 10) {\r\n        <div class=\"px-2 pb-2 pt-2 border-b border-gray-100\">\r\n          <input\r\n            type=\"text\"\r\n            [ngModel]=\"searchTerm()\"\r\n            (ngModelChange)=\"searchTerm.set($event)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            placeholder=\"Search options...\"\r\n            class=\"w-full px-3 py-1.5 text-sm border-2 border-gray-200 rounded-md focus:outline-none focus:border-indigo-500 transition-colors\"\r\n            autoFocus\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <!-- Options List -->\r\n      <div class=\"max-h-60 overflow-y-auto\">\r\n        @for (opt of filteredOptions(); track opt.value) {\r\n          <div\r\n            (click)=\"selectOption(opt.value)\"\r\n            class=\"px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 cursor-pointer flex items-center justify-between group transition-colors\"\r\n            [class.bg-indigo-50]=\"isSelected(opt.value)\"\r\n            [class.text-indigo-700]=\"isSelected(opt.value)\"\r\n          >\r\n            <span>{{ opt.label }}</span>\r\n\r\n            @if (isSelected(opt.value)) {\r\n              <svg\r\n                class=\"w-4 h-4 text-indigo-600\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M5 13l4 4L19 7\"\r\n                ></path>\r\n              </svg>\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <div class=\"px-4 py-3 text-sm text-gray-400 text-center\">No options found.</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SelectInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-select-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full relative\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n\r\n  <!-- Trigger -->\r\n  <div\r\n    (click)=\"toggleDropdown()\"\r\n    [class.border-rose-300]=\"error()\"\r\n    [class.focus-within:border-rose-500]=\"error()\"\r\n    [class.border-gray-200]=\"!error()\"\r\n    [class.focus-within:border-indigo-500]=\"!error()\"\r\n    class=\"relative w-full min-h-[42px] px-3 py-2 border-2 rounded-lg bg-white cursor-pointer transition-all flex items-center justify-between gap-2 focus-within:ring-0\"\r\n    [class.opacity-60]=\"disabled()\"\r\n    [class.cursor-not-allowed]=\"disabled()\"\r\n    [class.border-indigo-500]=\"isOpen() && !error()\"\r\n  >\r\n    <div class=\"flex-1 flex flex-wrap gap-1.5 items-center overflow-hidden\">\r\n      @if (multiple() && selectedLabels().length > 0) {\r\n        @for (item of selectedLabels(); track item.value) {\r\n          <span\r\n            class=\"inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-50 text-indigo-700 border border-indigo-100\"\r\n          >\r\n            {{ item.label }}\r\n            <button\r\n              (click)=\"removeValue(item.value, $event)\"\r\n              type=\"button\"\r\n              class=\"ml-1 text-indigo-400 hover:text-indigo-900 focus:outline-none\"\r\n            >\r\n              <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M6 18L18 6M6 6l12 12\"\r\n                ></path>\r\n              </svg>\r\n            </button>\r\n          </span>\r\n        }\r\n      } @else if (!multiple() && displayValue()) {\r\n        <span class=\"text-gray-900 text-sm truncate\">{{ displayValue() }}</span>\r\n      } @else {\r\n        <span class=\"text-gray-400 text-sm\">{{ placeholder() }}</span>\r\n      }\r\n    </div>\r\n\r\n    <!-- Arrow -->\r\n    <svg\r\n      [class.rotate-180]=\"isOpen()\"\r\n      class=\"w-4 h-4 text-gray-500 transition-transform duration-200 shrink-0\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      viewBox=\"0 0 24 24\"\r\n    >\r\n      <path\r\n        stroke-linecap=\"round\"\r\n        stroke-linejoin=\"round\"\r\n        stroke-width=\"2\"\r\n        d=\"M19 9l-7 7-7-7\"\r\n      ></path>\r\n    </svg>\r\n  </div>\r\n\r\n  <!-- Error Message -->\r\n  @if (error()) {\r\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\r\n  }\r\n\r\n  <!-- Dropdown -->\r\n  @if (isOpen()) {\r\n    <!-- Backdrop for click outside -->\r\n    <div\r\n      (click)=\"closeDropdown()\"\r\n      class=\"fixed inset-0 z-10 cursor-default\"\r\n      style=\"background: transparent\"\r\n    ></div>\r\n\r\n    <div\r\n      class=\"absolute z-20 mt-1 w-full bg-white rounded-xl border-2 border-gray-100 shadow-xl py-1 overflow-hidden animate-in fade-in zoom-in-95 duration-100 origin-top\"\r\n    >\r\n      <!-- Search Input -->\r\n      @if (searchable() || options().length > 10) {\r\n        <div class=\"px-2 pb-2 pt-2 border-b border-gray-100\">\r\n          <input\r\n            type=\"text\"\r\n            [ngModel]=\"searchTerm()\"\r\n            (ngModelChange)=\"searchTerm.set($event)\"\r\n            (click)=\"$event.stopPropagation()\"\r\n            placeholder=\"Search options...\"\r\n            class=\"w-full px-3 py-1.5 text-sm border-2 border-gray-200 rounded-md focus:outline-none focus:border-indigo-500 transition-colors\"\r\n            autoFocus\r\n          />\r\n        </div>\r\n      }\r\n\r\n      <!-- Options List -->\r\n      <div class=\"max-h-60 overflow-y-auto\">\r\n        @for (opt of filteredOptions(); track opt.value) {\r\n          <div\r\n            (click)=\"selectOption(opt.value)\"\r\n            class=\"px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 cursor-pointer flex items-center justify-between group transition-colors\"\r\n            [class.bg-indigo-50]=\"isSelected(opt.value)\"\r\n            [class.text-indigo-700]=\"isSelected(opt.value)\"\r\n          >\r\n            <span>{{ opt.label }}</span>\r\n\r\n            @if (isSelected(opt.value)) {\r\n              <svg\r\n                class=\"w-4 h-4 text-indigo-600\"\r\n                fill=\"none\"\r\n                stroke=\"currentColor\"\r\n                viewBox=\"0 0 24 24\"\r\n              >\r\n                <path\r\n                  stroke-linecap=\"round\"\r\n                  stroke-linejoin=\"round\"\r\n                  stroke-width=\"2\"\r\n                  d=\"M5 13l4 4L19 7\"\r\n                ></path>\r\n              </svg>\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <div class=\"px-4 py-3 text-sm text-gray-400 text-center\">No options found.</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+class CheckboxInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = event.target.checked;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        const newVal = !this.value();
+        this.value.set(newVal);
+        this.onChange(newVal);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CheckboxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: CheckboxInputComponent, isStandalone: true, selector: "wdc-checkbox-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"flex items-center group\">\r\n  <!-- Hidden native input for form accessibility -->\r\n  <input\r\n    type=\"checkbox\"\r\n    [checked]=\"value()\"\r\n    [disabled]=\"disabled()\"\r\n    (change)=\"onInput($event)\"\r\n    (blur)=\"onTouched()\"\r\n    class=\"sr-only\"\r\n  />\r\n\r\n  <!-- Custom Checkbox UI -->\r\n  <div\r\n    (click)=\"toggle()\"\r\n    [class.cursor-not-allowed]=\"disabled()\"\r\n    [class.cursor-pointer]=\"!disabled()\"\r\n    class=\"w-5 h-5 rounded border flex items-center justify-center transition-all duration-200\"\r\n    [class.bg-indigo-600]=\"(value() || indeterminate()) && !disabled()\"\r\n    [class.border-indigo-600]=\"(value() || indeterminate()) && !disabled()\"\r\n    [class.bg-gray-100]=\"disabled()\"\r\n    [class.border-gray-200]=\"disabled()\"\r\n    [class.bg-white]=\"!value() && !indeterminate() && !disabled()\"\r\n    [class.border-gray-300]=\"!value() && !indeterminate() && !disabled()\"\r\n    [class.group-hover:border-indigo-400]=\"!value() && !indeterminate() && !disabled()\"\r\n  >\r\n    @if (indeterminate()) {\r\n      <!-- Indeterminate Dash -->\r\n      <svg class=\"w-3.5 h-3.5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M20 12H4\"></path>\r\n      </svg>\r\n    } @else if (value()) {\r\n      <!-- Checkmark -->\r\n      <svg class=\"w-3.5 h-3.5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"3\"\r\n          d=\"M5 13l4 4L19 7\"\r\n        ></path>\r\n      </svg>\r\n    }\r\n  </div>\r\n\r\n  @if (label()) {\r\n    <label\r\n      (click)=\"toggle()\"\r\n      class=\"ml-3 block text-sm text-gray-700 select-none transition-colors\"\r\n      [class.cursor-not-allowed]=\"disabled()\"\r\n      [class.cursor-pointer]=\"!disabled()\"\r\n      [class.opacity-50]=\"disabled()\"\r\n      [class.text-gray-900]=\"value()\"\r\n    >\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: CheckboxInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-checkbox-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"flex items-center group\">\r\n  <!-- Hidden native input for form accessibility -->\r\n  <input\r\n    type=\"checkbox\"\r\n    [checked]=\"value()\"\r\n    [disabled]=\"disabled()\"\r\n    (change)=\"onInput($event)\"\r\n    (blur)=\"onTouched()\"\r\n    class=\"sr-only\"\r\n  />\r\n\r\n  <!-- Custom Checkbox UI -->\r\n  <div\r\n    (click)=\"toggle()\"\r\n    [class.cursor-not-allowed]=\"disabled()\"\r\n    [class.cursor-pointer]=\"!disabled()\"\r\n    class=\"w-5 h-5 rounded border flex items-center justify-center transition-all duration-200\"\r\n    [class.bg-indigo-600]=\"(value() || indeterminate()) && !disabled()\"\r\n    [class.border-indigo-600]=\"(value() || indeterminate()) && !disabled()\"\r\n    [class.bg-gray-100]=\"disabled()\"\r\n    [class.border-gray-200]=\"disabled()\"\r\n    [class.bg-white]=\"!value() && !indeterminate() && !disabled()\"\r\n    [class.border-gray-300]=\"!value() && !indeterminate() && !disabled()\"\r\n    [class.group-hover:border-indigo-400]=\"!value() && !indeterminate() && !disabled()\"\r\n  >\r\n    @if (indeterminate()) {\r\n      <!-- Indeterminate Dash -->\r\n      <svg class=\"w-3.5 h-3.5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M20 12H4\"></path>\r\n      </svg>\r\n    } @else if (value()) {\r\n      <!-- Checkmark -->\r\n      <svg class=\"w-3.5 h-3.5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          stroke-width=\"3\"\r\n          d=\"M5 13l4 4L19 7\"\r\n        ></path>\r\n      </svg>\r\n    }\r\n  </div>\r\n\r\n  @if (label()) {\r\n    <label\r\n      (click)=\"toggle()\"\r\n      class=\"ml-3 block text-sm text-gray-700 select-none transition-colors\"\r\n      [class.cursor-not-allowed]=\"disabled()\"\r\n      [class.cursor-pointer]=\"!disabled()\"\r\n      [class.opacity-50]=\"disabled()\"\r\n      [class.text-gray-900]=\"value()\"\r\n    >\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
+
+class RadioInputComponent {
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    name = input('radio-group-' + Math.random(), ...(ngDevMode ? [{ debugName: "name" }] : []));
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    select(val) {
+        if (this.disabled())
+            return;
+        this.value.set(val);
+        this.onChange(val);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RadioInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: RadioInputComponent, isStandalone: true, selector: "wdc-radio-input", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\r\n  @for (option of options(); track option.value) {\r\n    <div class=\"flex items-center group\">\r\n      <!-- Hidden native input -->\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name()\"\r\n        [checked]=\"value() === option.value\"\r\n        [disabled]=\"disabled()\"\r\n        (change)=\"select(option.value)\"\r\n        class=\"sr-only\"\r\n      />\r\n\r\n      <!-- Custom Radio UI -->\r\n      <div\r\n        (click)=\"!disabled() && select(option.value)\"\r\n        [class.cursor-not-allowed]=\"disabled()\"\r\n        [class.cursor-pointer]=\"!disabled()\"\r\n        class=\"w-5 h-5 rounded-full border flex items-center justify-center transition-all duration-200 relative\"\r\n        [class.border-indigo-600]=\"value() === option.value && !disabled()\"\r\n        [class.border-gray-300]=\"value() !== option.value && !disabled()\"\r\n        [class.border-gray-200]=\"disabled()\"\r\n        [class.bg-white]=\"!disabled()\"\r\n        [class.bg-gray-100]=\"disabled()\"\r\n        [class.group-hover:border-indigo-400]=\"value() !== option.value && !disabled()\"\r\n      >\r\n        <!-- Inner Dot -->\r\n        <div\r\n          class=\"w-2.5 h-2.5 rounded-full bg-indigo-600 transition-transform duration-200 transform scale-0\"\r\n          [class.scale-100]=\"value() === option.value\"\r\n          [class.bg-gray-400]=\"disabled()\"\r\n        ></div>\r\n      </div>\r\n\r\n      <label\r\n        (click)=\"!disabled() && select(option.value)\"\r\n        class=\"ml-3 block text-sm text-gray-700 cursor-pointer select-none transition-colors\"\r\n        [class.opacity-50]=\"disabled()\"\r\n        [class.text-indigo-900]=\"value() === option.value && !disabled()\"\r\n        [class.font-medium]=\"value() === option.value\"\r\n      >\r\n        {{ option.label }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RadioInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-radio-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"flex flex-col gap-3\">\r\n  @for (option of options(); track option.value) {\r\n    <div class=\"flex items-center group\">\r\n      <!-- Hidden native input -->\r\n      <input\r\n        type=\"radio\"\r\n        [name]=\"name()\"\r\n        [checked]=\"value() === option.value\"\r\n        [disabled]=\"disabled()\"\r\n        (change)=\"select(option.value)\"\r\n        class=\"sr-only\"\r\n      />\r\n\r\n      <!-- Custom Radio UI -->\r\n      <div\r\n        (click)=\"!disabled() && select(option.value)\"\r\n        [class.cursor-not-allowed]=\"disabled()\"\r\n        [class.cursor-pointer]=\"!disabled()\"\r\n        class=\"w-5 h-5 rounded-full border flex items-center justify-center transition-all duration-200 relative\"\r\n        [class.border-indigo-600]=\"value() === option.value && !disabled()\"\r\n        [class.border-gray-300]=\"value() !== option.value && !disabled()\"\r\n        [class.border-gray-200]=\"disabled()\"\r\n        [class.bg-white]=\"!disabled()\"\r\n        [class.bg-gray-100]=\"disabled()\"\r\n        [class.group-hover:border-indigo-400]=\"value() !== option.value && !disabled()\"\r\n      >\r\n        <!-- Inner Dot -->\r\n        <div\r\n          class=\"w-2.5 h-2.5 rounded-full bg-indigo-600 transition-transform duration-200 transform scale-0\"\r\n          [class.scale-100]=\"value() === option.value\"\r\n          [class.bg-gray-400]=\"disabled()\"\r\n        ></div>\r\n      </div>\r\n\r\n      <label\r\n        (click)=\"!disabled() && select(option.value)\"\r\n        class=\"ml-3 block text-sm text-gray-700 cursor-pointer select-none transition-colors\"\r\n        [class.opacity-50]=\"disabled()\"\r\n        [class.text-indigo-900]=\"value() === option.value && !disabled()\"\r\n        [class.font-medium]=\"value() === option.value\"\r\n      >\r\n        {{ option.label }}\r\n      </label>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+
+class SwitchInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    value = signal(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    toggle() {
+        if (this.disabled())
+            return;
+        const newVal = !this.value();
+        this.value.set(newVal);
+        this.onChange(newVal);
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: SwitchInputComponent, isStandalone: true, selector: "wdc-switch-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SwitchInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"flex items-center justify-between\">\r\n  <div>\r\n    @if (label()) {\r\n      <h4 class=\"text-sm font-medium text-gray-900\">{{ label() }}</h4>\r\n    }\r\n    @if (description()) {\r\n      <p class=\"text-sm text-gray-500\">{{ description() }}</p>\r\n    }\r\n  </div>\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    [disabled]=\"disabled()\"\r\n    [class.bg-indigo-600]=\"value()\"\r\n    [class.bg-gray-200]=\"!value()\"\r\n    [class.opacity-50]=\"disabled()\"\r\n    class=\"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none\"\r\n  >\r\n    <span\r\n      [class.translate-x-5]=\"value()\"\r\n      [class.translate-x-0]=\"!value()\"\r\n      class=\"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out\"\r\n    >\r\n    </span>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: SwitchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-switch-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwitchInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"flex items-center justify-between\">\r\n  <div>\r\n    @if (label()) {\r\n      <h4 class=\"text-sm font-medium text-gray-900\">{{ label() }}</h4>\r\n    }\r\n    @if (description()) {\r\n      <p class=\"text-sm text-gray-500\">{{ description() }}</p>\r\n    }\r\n  </div>\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    [disabled]=\"disabled()\"\r\n    [class.bg-indigo-600]=\"value()\"\r\n    [class.bg-gray-200]=\"!value()\"\r\n    [class.opacity-50]=\"disabled()\"\r\n    class=\"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none\"\r\n  >\r\n    <span\r\n      [class.translate-x-5]=\"value()\"\r\n      [class.translate-x-0]=\"!value()\"\r\n      class=\"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out\"\r\n    >\r\n    </span>\r\n  </button>\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
+class TextareaInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TextareaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: TextareaInputComponent, isStandalone: true, selector: "wdc-textarea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n  <textarea\n    [rows]=\"rows()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [class.border-rose-300]=\"error()\"\n    [class.focus:ring-rose-500]=\"error()\"\n    [class.focus:border-rose-500]=\"error()\"\n    [class.border-gray-200]=\"!error()\"\n    [class.focus:ring-indigo-500]=\"!error()\"\n    [class.focus:border-indigo-500]=\"!error()\"\n    class=\"w-full px-3 py-2 bg-white border-2 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\n  ></textarea>\n  @if (error()) {\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\n  }\n  @if (hint() && !error()) {\n    <p class=\"mt-1 text-xs text-gray-500\">{{ hint() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TextareaInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-textarea-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n  <textarea\n    [rows]=\"rows()\"\n    [value]=\"value()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    [class.border-rose-300]=\"error()\"\n    [class.focus:ring-rose-500]=\"error()\"\n    [class.focus:border-rose-500]=\"error()\"\n    [class.border-gray-200]=\"!error()\"\n    [class.focus:ring-indigo-500]=\"!error()\"\n    [class.focus:border-indigo-500]=\"!error()\"\n    class=\"w-full px-3 py-2 bg-white border-2 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\n  ></textarea>\n  @if (error()) {\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\n  }\n  @if (hint() && !error()) {\n    <p class=\"mt-1 text-xs text-gray-500\">{{ hint() }}</p>\n  }\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+
+class FileInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    accept = input('*/*', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    fileName = signal(null, ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            const file = input.files[0];
+            this.handleFile(file);
+        }
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.isDragging.set(true);
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+        if (this.disabled())
+            return;
+        if (event.dataTransfer && event.dataTransfer.files.length > 0) {
+            this.handleFile(event.dataTransfer.files[0]);
+        }
+    }
+    handleFile(file) {
+        this.fileName.set(file.name);
+        this.onChange(file);
+        this.onTouched();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.fileName.set(null);
+        this.onChange(null);
+    }
+    writeValue(value) {
+        // If we were handling real files, we might set a preview URL here.
+        // For now, we assume null or File object.
+        if (!value)
+            this.fileName.set(null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: FileInputComponent, isStandalone: true, selector: "wdc-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FileInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center w-full border-2 border-dashed rounded-lg p-6 transition-colors\"\r\n    [class.border-indigo-400]=\"isDragging()\"\r\n    [class.bg-indigo-50]=\"isDragging()\"\r\n    [class.border-gray-300]=\"!isDragging() && !disabled()\"\r\n    [class.bg-white]=\"!isDragging() && !disabled()\"\r\n    [class.bg-gray-100]=\"disabled()\"\r\n    [class.cursor-pointer]=\"!disabled()\"\r\n    [class.cursor-not-allowed]=\"disabled()\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <input\r\n      type=\"file\"\r\n      [accept]=\"accept()\"\r\n      [disabled]=\"disabled()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed\"\r\n    />\r\n\r\n    <div class=\"text-center pointer-events-none\">\r\n      @if (fileName()) {\r\n        <div class=\"flex items-center gap-2 text-indigo-600\">\r\n          <svg class=\"w-8 h-8 mx-auto mb-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              stroke-width=\"2\"\r\n              d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\r\n            ></path>\r\n          </svg>\r\n          <span class=\"font-medium text-sm truncate max-w-[200px]\">{{ fileName() }}</span>\r\n        </div>\r\n        <p class=\"text-xs text-gray-500 mt-1\">Click to replace or drag new file</p>\r\n      } @else {\r\n        <svg\r\n          class=\"w-10 h-10 mx-auto text-gray-400 mb-2\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          viewBox=\"0 0 24 24\"\r\n        >\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"2\"\r\n            d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"\r\n          ></path>\r\n        </svg>\r\n        <p class=\"text-sm text-gray-600\">\r\n          <span class=\"font-semibold text-indigo-600\">Click to upload</span> or drag and drop\r\n        </p>\r\n        <p class=\"text-xs text-gray-500 mt-1\">SVG, PNG, JPG or GIF</p>\r\n      }\r\n    </div>\r\n\r\n    @if (fileName() && !disabled()) {\r\n      <button\r\n        type=\"button\"\r\n        (click)=\"clear($event)\"\r\n        class=\"absolute top-2 right-2 p-1 bg-white rounded-full shadow hover:bg-rose-50 text-gray-400 hover:text-rose-600 transition-colors z-10\"\r\n      >\r\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"2\"\r\n            d=\"M6 18L18 6M6 6l12 12\"\r\n          ></path>\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: FileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-file-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center w-full border-2 border-dashed rounded-lg p-6 transition-colors\"\r\n    [class.border-indigo-400]=\"isDragging()\"\r\n    [class.bg-indigo-50]=\"isDragging()\"\r\n    [class.border-gray-300]=\"!isDragging() && !disabled()\"\r\n    [class.bg-white]=\"!isDragging() && !disabled()\"\r\n    [class.bg-gray-100]=\"disabled()\"\r\n    [class.cursor-pointer]=\"!disabled()\"\r\n    [class.cursor-not-allowed]=\"disabled()\"\r\n    (dragover)=\"onDragOver($event)\"\r\n    (dragleave)=\"onDragLeave($event)\"\r\n    (drop)=\"onDrop($event)\"\r\n  >\r\n    <input\r\n      type=\"file\"\r\n      [accept]=\"accept()\"\r\n      [disabled]=\"disabled()\"\r\n      (change)=\"onFileSelected($event)\"\r\n      class=\"absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed\"\r\n    />\r\n\r\n    <div class=\"text-center pointer-events-none\">\r\n      @if (fileName()) {\r\n        <div class=\"flex items-center gap-2 text-indigo-600\">\r\n          <svg class=\"w-8 h-8 mx-auto mb-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              stroke-width=\"2\"\r\n              d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\r\n            ></path>\r\n          </svg>\r\n          <span class=\"font-medium text-sm truncate max-w-[200px]\">{{ fileName() }}</span>\r\n        </div>\r\n        <p class=\"text-xs text-gray-500 mt-1\">Click to replace or drag new file</p>\r\n      } @else {\r\n        <svg\r\n          class=\"w-10 h-10 mx-auto text-gray-400 mb-2\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          viewBox=\"0 0 24 24\"\r\n        >\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"2\"\r\n            d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\"\r\n          ></path>\r\n        </svg>\r\n        <p class=\"text-sm text-gray-600\">\r\n          <span class=\"font-semibold text-indigo-600\">Click to upload</span> or drag and drop\r\n        </p>\r\n        <p class=\"text-xs text-gray-500 mt-1\">SVG, PNG, JPG or GIF</p>\r\n      }\r\n    </div>\r\n\r\n    @if (fileName() && !disabled()) {\r\n      <button\r\n        type=\"button\"\r\n        (click)=\"clear($event)\"\r\n        class=\"absolute top-2 right-2 p-1 bg-white rounded-full shadow hover:bg-rose-50 text-gray-400 hover:text-rose-600 transition-colors z-10\"\r\n      >\r\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-width=\"2\"\r\n            d=\"M6 18L18 6M6 6l12 12\"\r\n          ></path>\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }] } });
+
+class DateInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    min = input('', ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input('', ...(ngDevMode ? [{ debugName: "max" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: DateInputComponent, isStandalone: true, selector: "wdc-date-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      type=\"date\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [class.border-rose-300]=\"error()\"\n      [class.focus:ring-rose-500]=\"error()\"\n      [class.focus:border-rose-500]=\"error()\"\n      [class.border-gray-300]=\"!error()\"\n      [class.focus:ring-indigo-500]=\"!error()\"\n      [class.focus:border-indigo-500]=\"!error()\"\n      class=\"w-full px-3 py-2 bg-white border-2 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\n    />\n    <!-- Calendar Icon overlay for nicer look (pointer-events-none lets click pass to input) -->\n    <div class=\"absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400\">\n      <!-- <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        ></path>\n      </svg> -->\n    </div>\n  </div>\n  @if (error()) {\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: DateInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-date-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      type=\"date\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      [class.border-rose-300]=\"error()\"\n      [class.focus:ring-rose-500]=\"error()\"\n      [class.focus:border-rose-500]=\"error()\"\n      [class.border-gray-300]=\"!error()\"\n      [class.focus:ring-indigo-500]=\"!error()\"\n      [class.focus:border-indigo-500]=\"!error()\"\n      class=\"w-full px-3 py-2 bg-white border-2 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\n    />\n    <!-- Calendar Icon overlay for nicer look (pointer-events-none lets click pass to input) -->\n    <div class=\"absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400\">\n      <!-- <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          stroke-width=\"2\"\n          d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        ></path>\n      </svg> -->\n    </div>\n  </div>\n  @if (error()) {\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\n  }\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+
+class RangeInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
+    unit = input('', ...(ngDevMode ? [{ debugName: "unit" }] : []));
+    value = signal(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = Number(event.target.value);
+        this.value.set(val);
+        this.onChange(val);
+    }
+    writeValue(value) {
+        this.value.set(value || 0);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    get percentage() {
+        return ((this.value() - this.min()) / (this.max() - this.min())) * 100;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: RangeInputComponent, isStandalone: true, selector: "wdc-range-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RangeInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "\n<div class=\"w-full\">\n  <div class=\"flex justify-between items-center mb-1\">\n    @if (label()) {\n      <label class=\"block text-sm font-medium text-gray-700\">{{ label() }}</label>\n    }\n    <span class=\"text-sm font-medium text-indigo-600\">{{ value() }}{{ unit() }}</span>\n  </div>\n  \n  <div class=\"relative w-full h-6 flex items-center\">\n    <!-- Track background -->\n    <div class=\"absolute w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n        <!-- Progress fill -->\n        <div class=\"h-full bg-indigo-600\" [style.width.%]=\"percentage\"></div>\n    </div>\n    \n    <!-- Native Range Input -->\n    <input \n      type=\"range\" \n      [min]=\"min()\" \n      [max]=\"max()\" \n      [step]=\"step()\" \n      [value]=\"value()\" \n      [disabled]=\"disabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      class=\"absolute w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed z-10\"\n    >\n    \n    <!-- Custom Thumb (Visual only, position calculated) -->\n    <div \n        class=\"absolute w-4 h-4 bg-white border-2 border-indigo-600 rounded-full shadow pointer-events-none transition-transform active:scale-110\"\n        [style.left.%]=\"percentage\"\n        [style.transform]=\"'translateX(-50%)'\"\n    ></div>\n  </div>\n  \n  <div class=\"flex justify-between text-xs text-gray-400 mt-1\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RangeInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-range-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RangeInputComponent),
+                            multi: true,
+                        },
+                    ], template: "\n<div class=\"w-full\">\n  <div class=\"flex justify-between items-center mb-1\">\n    @if (label()) {\n      <label class=\"block text-sm font-medium text-gray-700\">{{ label() }}</label>\n    }\n    <span class=\"text-sm font-medium text-indigo-600\">{{ value() }}{{ unit() }}</span>\n  </div>\n  \n  <div class=\"relative w-full h-6 flex items-center\">\n    <!-- Track background -->\n    <div class=\"absolute w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n        <!-- Progress fill -->\n        <div class=\"h-full bg-indigo-600\" [style.width.%]=\"percentage\"></div>\n    </div>\n    \n    <!-- Native Range Input -->\n    <input \n      type=\"range\" \n      [min]=\"min()\" \n      [max]=\"max()\" \n      [step]=\"step()\" \n      [value]=\"value()\" \n      [disabled]=\"disabled()\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onTouched()\"\n      class=\"absolute w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed z-10\"\n    >\n    \n    <!-- Custom Thumb (Visual only, position calculated) -->\n    <div \n        class=\"absolute w-4 h-4 bg-white border-2 border-indigo-600 rounded-full shadow pointer-events-none transition-transform active:scale-110\"\n        [style.left.%]=\"percentage\"\n        [style.transform]=\"'translateX(-50%)'\"\n    ></div>\n  </div>\n  \n  <div class=\"flex justify-between text-xs text-gray-400 mt-1\">\n    <span>{{ min() }}</span>\n    <span>{{ max() }}</span>\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }] } });
+
+class ColorInputComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    value = signal('#4f46e5', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    // Handle text input changes (e.g. typing hex)
+    onTextInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    writeValue(value) {
+        this.value.set(value || '#000000');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ColorInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: ColorInputComponent, isStandalone: true, selector: "wdc-color-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n\n  <div class=\"flex items-center gap-2\">\n    <!-- Color Swatch / Native Picker Trigger -->\n    <div class=\"relative w-11 h-11 rounded-lg overflow-hidden border-2 border-gray-300 shrink-0\">\n      <input\n        type=\"color\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onTouched()\"\n        class=\"absolute -top-2 -left-2 w-16 h-16 p-0 border-0 cursor-pointer\"\n      />\n    </div>\n\n    <!-- Hex Input -->\n    <input\n      type=\"text\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onTextInput($event)\"\n      (blur)=\"onTouched()\"\n      [class.border-rose-300]=\"error()\"\n      [class.focus:ring-rose-500]=\"error()\"\n      [class.focus:border-rose-500]=\"error()\"\n      [class.border-gray-200]=\"!error()\"\n      [class.focus:ring-indigo-500]=\"!error()\"\n      [class.focus:border-indigo-500]=\"!error()\"\n      placeholder=\"#000000\"\n      class=\"w-full px-3 py-2 bg-white flex-1 border-2 border-gray-300 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\n    />\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: ColorInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-color-input', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n\n  <div class=\"flex items-center gap-2\">\n    <!-- Color Swatch / Native Picker Trigger -->\n    <div class=\"relative w-11 h-11 rounded-lg overflow-hidden border-2 border-gray-300 shrink-0\">\n      <input\n        type=\"color\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        (input)=\"onInput($event)\"\n        (blur)=\"onTouched()\"\n        class=\"absolute -top-2 -left-2 w-16 h-16 p-0 border-0 cursor-pointer\"\n      />\n    </div>\n\n    <!-- Hex Input -->\n    <input\n      type=\"text\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      (input)=\"onTextInput($event)\"\n      (blur)=\"onTouched()\"\n      [class.border-rose-300]=\"error()\"\n      [class.focus:ring-rose-500]=\"error()\"\n      [class.focus:border-rose-500]=\"error()\"\n      [class.border-gray-200]=\"!error()\"\n      [class.focus:ring-indigo-500]=\"!error()\"\n      [class.focus:border-indigo-500]=\"!error()\"\n      placeholder=\"#000000\"\n      class=\"w-full px-3 py-2 bg-white flex-1 border-2 border-gray-300 rounded-lg focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500\"\n    />\n  </div>\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
+class RichTextEditorComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    editorContainer = viewChild('editorContainer', ...(ngDevMode ? [{ debugName: "editorContainer" }] : []));
+    quill;
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    ngAfterViewInit() {
+        if (typeof Quill === 'undefined') {
+            console.error('Quill library not loaded');
+            return;
+        }
+        this.quill = new Quill(this.editorContainer()?.nativeElement, {
+            theme: 'snow',
+            placeholder: 'Write something amazing...',
+            modules: {
+                toolbar: [
+                    [{ header: [1, 2, 3, false] }],
+                    ['bold', 'italic', 'underline', 'strike'],
+                    [{ list: 'ordered' }, { list: 'bullet' }],
+                    ['link', 'image', 'clean'],
+                ],
+            },
+        });
+        this.quill.on('text-change', () => {
+            const html = this.editorContainer()?.nativeElement.querySelector('.ql-editor').innerHTML;
+            this.value.set(html);
+            this.onChange(html);
+        });
+        // Set initial value if available
+        if (this.value()) {
+            this.quill.clipboard.dangerouslyPasteHTML(this.value());
+        }
+        // Set disabled state
+        if (this.disabled()) {
+            this.quill.enable(false);
+        }
+    }
+    ngOnDestroy() {
+        // Quill cleanup usually not strictly necessary for simple use cases,
+        // but good practice if bindings exist.
+    }
+    writeValue(value) {
+        this.value.set(value || '');
+        if (this.quill) {
+            // Prevent infinite loop if update comes from inside
+            if (value !== this.editorContainer()?.nativeElement.querySelector('.ql-editor').innerHTML) {
+                this.quill.clipboard.dangerouslyPasteHTML(value || '');
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        if (this.quill) {
+            this.quill.enable(!isDisabled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: RichTextEditorComponent, isStandalone: true, selector: "wdc-rich-text-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RichTextEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "\n<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n  \n  <div \n    [class.border-rose-300]=\"error()\"\n    [class.ring-rose-500]=\"error()\"\n    class=\"bg-white rounded-lg overflow-hidden border-2 border-gray-200 focus-within:border-indigo-500 transition-all\">\n    <div #editorContainer class=\"h-64 font-sans text-base\"></div>\n  </div>\n\n  @if (error()) {\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-rich-text-editor', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RichTextEditorComponent),
+                            multi: true,
+                        },
+                    ], template: "\n<div class=\"w-full\">\n  @if (label()) {\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\n  }\n  \n  <div \n    [class.border-rose-300]=\"error()\"\n    [class.ring-rose-500]=\"error()\"\n    class=\"bg-white rounded-lg overflow-hidden border-2 border-gray-200 focus-within:border-indigo-500 transition-all\">\n    <div #editorContainer class=\"h-64 font-sans text-base\"></div>\n  </div>\n\n  @if (error()) {\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\n  }\n</div>\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], editorContainer: [{ type: i0.ViewChild, args: ['editorContainer', { isSignal: true }] }] } });
+
+class MarkdownEditorComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    // Preview
+    previewHtml = computed(() => {
+        if (typeof marked === 'undefined')
+            return this.value();
+        return marked.parse(this.value());
+    }, ...(ngDevMode ? [{ debugName: "previewHtml" }] : []));
+    onChange = (value) => { };
+    onTouched = () => { };
+    onInput(event) {
+        const val = event.target.value;
+        this.value.set(val);
+        this.onChange(val);
+    }
+    writeValue(value) {
+        this.value.set(value || '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MarkdownEditorComponent, isStandalone: true, selector: "wdc-markdown-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MarkdownEditorComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"w-full\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 h-[500px]\">\r\n    <!-- Editor -->\r\n    <div class=\"flex flex-col h-full\">\r\n      <div\r\n        class=\"bg-gray-100 px-3 py-2 border-t-2 border-l-2 border-r-2 border-gray-200 rounded-t-lg text-xs font-semibold text-gray-600 uppercase tracking-wide\"\r\n      >\r\n        Markdown Input\r\n      </div>\r\n      <textarea\r\n        [value]=\"value()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [class.border-rose-300]=\"error()\"\r\n        [class.focus:border-rose-500]=\"error()\"\r\n        [class.border-gray-200]=\"!error()\"\r\n        [class.focus:border-indigo-500]=\"!error()\"\r\n        class=\"w-full flex-1 p-4 border-2 rounded-b-lg md:rounded-bl-lg md:rounded-br-none focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500 font-mono text-sm resize-none\"\r\n        placeholder=\"# Hello World...\"\r\n      ></textarea>\r\n    </div>\r\n\r\n    <!-- Preview -->\r\n    <div class=\"flex flex-col h-full\">\r\n      <div\r\n        class=\"bg-gray-100 px-3 py-2 border-t-2 border-l-2 border-r-2 border-gray-200 rounded-t-lg text-xs font-semibold text-gray-600 uppercase tracking-wide\"\r\n      >\r\n        Live Preview\r\n      </div>\r\n      <div\r\n        class=\"flex-1 p-4 border-2 border-gray-200 rounded-b-lg md:rounded-br-lg md:rounded-bl-none bg-white overflow-y-auto prose prose-sm max-w-none prose-indigo\"\r\n        [innerHTML]=\"previewHtml()\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wdc-markdown-editor', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MarkdownEditorComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"w-full\">\r\n  @if (label()) {\r\n    <label class=\"block text-sm font-medium text-gray-700 mb-1\">{{ label() }}</label>\r\n  }\r\n\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 h-[500px]\">\r\n    <!-- Editor -->\r\n    <div class=\"flex flex-col h-full\">\r\n      <div\r\n        class=\"bg-gray-100 px-3 py-2 border-t-2 border-l-2 border-r-2 border-gray-200 rounded-t-lg text-xs font-semibold text-gray-600 uppercase tracking-wide\"\r\n      >\r\n        Markdown Input\r\n      </div>\r\n      <textarea\r\n        [value]=\"value()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput($event)\"\r\n        (blur)=\"onTouched()\"\r\n        [class.border-rose-300]=\"error()\"\r\n        [class.focus:border-rose-500]=\"error()\"\r\n        [class.border-gray-200]=\"!error()\"\r\n        [class.focus:border-indigo-500]=\"!error()\"\r\n        class=\"w-full flex-1 p-4 border-2 rounded-b-lg md:rounded-bl-lg md:rounded-br-none focus:ring-0 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500 font-mono text-sm resize-none\"\r\n        placeholder=\"# Hello World...\"\r\n      ></textarea>\r\n    </div>\r\n\r\n    <!-- Preview -->\r\n    <div class=\"flex flex-col h-full\">\r\n      <div\r\n        class=\"bg-gray-100 px-3 py-2 border-t-2 border-l-2 border-r-2 border-gray-200 rounded-t-lg text-xs font-semibold text-gray-600 uppercase tracking-wide\"\r\n      >\r\n        Live Preview\r\n      </div>\r\n      <div\r\n        class=\"flex-1 p-4 border-2 border-gray-200 rounded-b-lg md:rounded-br-lg md:rounded-bl-none bg-white overflow-y-auto prose prose-sm max-w-none prose-indigo\"\r\n        [innerHTML]=\"previewHtml()\"\r\n      ></div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (error()) {\r\n    <p class=\"mt-1 text-sm text-rose-600\">{{ error() }}</p>\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, CarouselComponent, ChartComponent, ConfirmDialogComponent, ConfirmService, DrawerComponent, IconsComponent, ModalComponent, NavbarComponent, PageLoaderComponent, ProgressBarComponent, SpinnerComponent, StatCardComponent, TabComponent, TableComponent, TabsComponent, ToastComponent, ToastService, UploadComponent, WizardComponent };
+export { AccordionComponent, AccordionItemComponent, AvatarComponent, BadgeComponent, ButtonComponent, CardComponent, CarouselComponent, ChartComponent, CheckboxInputComponent, ColorInputComponent, ConfirmDialogComponent, ConfirmService, DateInputComponent, DrawerComponent, FileInputComponent, IconsComponent, MarkdownEditorComponent, ModalComponent, NavbarComponent, PageLoaderComponent, ProgressBarComponent, RadioInputComponent, RangeInputComponent, RichTextEditorComponent, SelectInputComponent, SidebarComponent, SpinnerComponent, StatCardComponent, SwitchInputComponent, TabComponent, TableComponent, TabsComponent, TextInputComponent, TextareaInputComponent, ToastComponent, ToastService, UploadComponent, WizardComponent };
 //# sourceMappingURL=wdcoders-ui-ng.mjs.map