@eduboxpro/studio 0.1.8 → 0.1.10

package/fesm2022/eduboxpro-studio.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, viewChild, model } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, output, ElementRef, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, contentChild, viewChild, model, HostListener, Renderer2, Directive } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i1 from 'lucide-angular';
-import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Laptop, MessageSquare, List, Grid3x3, Strikethrough, Underline, Italic, Bold, AlignJustify, AlignRight, AlignCenter, AlignLeft, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { icons, LucideAngularModule, LucideIconProvider, LUCIDE_ICONS, Circle, Apple, Globe, Laptop, MessageSquare, List, Grid3x3, Strikethrough, Underline, Italic, Bold, AlignJustify, AlignRight, AlignCenter, AlignLeft, Moon, Sun, ShoppingCart, Loader2, Loader, RotateCw, RefreshCw, Printer, Save, Image, Folder, FileText, File, HelpCircle, XCircle, CheckCircle, Info, AlertTriangle, AlertCircle, LogOut, LogIn, Unlock, Lock, EyeOff, Eye, Clock, Calendar, Bell, MoreHorizontal, MoreVertical, Menu, Home, Share2, Copy, Link, ExternalLink, Filter, Search, X, Check, Minus, Plus, Edit, Trash2, User, Settings, Star, Heart, Phone, Mail, Upload, Download, ChevronRight, ChevronLeft, ChevronUp, ChevronDown, ArrowLeft, ArrowRight } from 'lucide-angular';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 
 /**
  * Injection token for Studio configuration
@@ -455,7 +455,10 @@ function provideStudioIcons() {
                 Grid3x3,
                 List,
                 MessageSquare,
-                Laptop
+                Laptop,
+                Globe,
+                Apple,
+                Circle
             })
         }
     ]);
@@ -1177,6 +1180,436 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "<label\n  [for]=\"checkboxId()\"\n  [ngClass]=\"hostClasses()\"\n  (click)=\"handleLabelClick($event)\"\n>\n  <!-- Checkbox input -->\n  <input\n    type=\"checkbox\"\n    [id]=\"checkboxId()\"\n    [name]=\"name()\"\n    [checked]=\"internalChecked()\"\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [tabIndex]=\"tabIndex()\"\n    [attr.aria-checked]=\"ariaChecked()\"\n    [attr.aria-label]=\"label() || undefined\"\n    [attr.aria-describedby]=\"showHint() || showError() ? checkboxId() + '-description' : undefined\"\n    [attr.aria-invalid]=\"error()\"\n    [attr.aria-required]=\"required()\"\n    class=\"studio-checkbox__input\"\n    (change)=\"handleChange($event)\"\n    (focus)=\"handleFocus()\"\n    (blur)=\"handleBlur()\"\n  />\n\n  <!-- Custom checkbox -->\n  <span [ngClass]=\"checkboxClasses()\">\n    <!-- Checkmark icon -->\n    @if (internalChecked() && !indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M13.3333 4L6 11.3333L2.66666 8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n\n    <!-- Indeterminate icon -->\n    @if (indeterminate()) {\n      <svg\n        class=\"studio-checkbox__icon studio-checkbox__icon--indeterminate\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 8H12\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    }\n  </span>\n\n  <!-- Label content -->\n  @if (label() || description()) {\n    <span class=\"studio-checkbox__label-wrapper\">\n      @if (label()) {\n        <span class=\"studio-checkbox__label\">\n          {{ label() }}\n          @if (required()) {\n            <span class=\"studio-checkbox__required\" aria-hidden=\"true\">*</span>\n          }\n        </span>\n      }\n\n      @if (description()) {\n        <span class=\"studio-checkbox__description\">\n          {{ description() }}\n        </span>\n      }\n    </span>\n  }\n</label>\n\n<!-- Helper text / Error message -->\n@if (showHint() || showError()) {\n  <div\n    [id]=\"checkboxId() + '-description'\"\n    class=\"studio-checkbox__info\"\n  >\n    @if (showError()) {\n      <span class=\"studio-checkbox__error\">\n        {{ errorMessage() }}\n      </span>\n    }\n\n    @if (showHint()) {\n      <span class=\"studio-checkbox__hint\">\n        {{ hint() }}\n      </span>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;flex-direction:column;font-family:var(--studio-font-family)!important}.studio-checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:var(--studio-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.studio-checkbox-wrapper--label-left{flex-direction:row-reverse}.studio-checkbox-wrapper--disabled{cursor:not-allowed;opacity:.5}.studio-checkbox-wrapper--sm{font-size:var(--studio-font-size-sm)}.studio-checkbox-wrapper--md{font-size:var(--studio-font-size-base)}.studio-checkbox-wrapper--lg{font-size:var(--studio-font-size-lg)}.studio-checkbox__input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.studio-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--studio-border-primary);background-color:var(--studio-bg-primary);transition:all var(--studio-transition-base)}.studio-checkbox--sm{width:1rem;height:1rem}.studio-checkbox--md{width:1.25rem;height:1.25rem}.studio-checkbox--lg{width:1.5rem;height:1.5rem}.studio-checkbox--radius-none{border-radius:0}.studio-checkbox--radius-sm{border-radius:var(--studio-radius-sm)}.studio-checkbox--radius-md{border-radius:var(--studio-radius-md)}.studio-checkbox--radius-lg{border-radius:var(--studio-radius-lg)}.studio-checkbox--radius-full{border-radius:var(--studio-radius-full)}.studio-checkbox--default.studio-checkbox--checked,.studio-checkbox--default.studio-checkbox--indeterminate{border-color:transparent}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--default.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--default.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--outlined.studio-checkbox--checked,.studio-checkbox--outlined.studio-checkbox--indeterminate{background-color:transparent}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--primary{border-color:var(--studio-primary);color:var(--studio-primary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--secondary{border-color:var(--studio-secondary);color:var(--studio-secondary)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--success{border-color:var(--studio-success);color:var(--studio-success)}.studio-checkbox--outlined.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--outlined.studio-checkbox--indeterminate.studio-checkbox--error{border-color:var(--studio-error);color:var(--studio-error)}.studio-checkbox--filled.studio-checkbox--primary{background-color:var(--studio-primary-bg);border-color:var(--studio-primary-bg)}.studio-checkbox--filled.studio-checkbox--secondary{background-color:var(--studio-secondary-bg);border-color:var(--studio-secondary-bg)}.studio-checkbox--filled.studio-checkbox--success{background-color:var(--studio-success-bg);border-color:var(--studio-success-bg)}.studio-checkbox--filled.studio-checkbox--error{background-color:var(--studio-error-bg);border-color:var(--studio-error-bg)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--primary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--primary{background-color:var(--studio-primary);border-color:var(--studio-primary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--secondary,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--secondary{background-color:var(--studio-secondary);border-color:var(--studio-secondary);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--success,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--success{background-color:var(--studio-success);border-color:var(--studio-success);color:var(--studio-text-inverse)}.studio-checkbox--filled.studio-checkbox--checked.studio-checkbox--error,.studio-checkbox--filled.studio-checkbox--indeterminate.studio-checkbox--error{background-color:var(--studio-error);border-color:var(--studio-error);color:var(--studio-text-inverse)}.studio-checkbox--error:not(.studio-checkbox--checked):not(.studio-checkbox--indeterminate){border-color:var(--studio-error)}.studio-checkbox:hover:not(.studio-checkbox--disabled){border-color:var(--studio-border-secondary)}.studio-checkbox__input:focus-visible+.studio-checkbox{outline:2px solid var(--studio-primary);outline-offset:2px}.studio-checkbox__icon{width:100%;height:100%;opacity:0;transform:scale(.8);transition:all var(--studio-transition-fast)}.studio-checkbox--checked .studio-checkbox__icon,.studio-checkbox--indeterminate .studio-checkbox__icon{opacity:1;transform:scale(1)}.studio-checkbox__label-wrapper{display:flex;flex-direction:column;gap:var(--studio-spacing-xs)}.studio-checkbox__label{font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);line-height:var(--studio-line-height-normal)}.studio-checkbox__description{font-size:var(--studio-font-size-sm);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__required{color:var(--studio-error);margin-left:var(--studio-spacing-xs)}.studio-checkbox__info{display:flex;flex-direction:column;gap:var(--studio-spacing-xs);margin-top:var(--studio-spacing-xs);padding-left:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--label-left+.studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.25rem)}.studio-checkbox-wrapper--sm .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--sm.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1rem)}.studio-checkbox-wrapper--lg .studio-checkbox__info{padding-left:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox-wrapper--lg.studio-checkbox-wrapper--label-left .studio-checkbox__info{padding-left:0;padding-right:calc(var(--studio-spacing-sm) + 1.5rem)}.studio-checkbox__hint{font-size:var(--studio-font-size-xs);color:var(--studio-text-secondary);line-height:var(--studio-line-height-normal)}.studio-checkbox__error{font-size:var(--studio-font-size-xs);color:var(--studio-error);line-height:var(--studio-line-height-normal)}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
+/**
+ * Service for programmatic control of Drawer components
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * private drawerService = inject(DrawerService);
+ *
+ * openSettings() {
+ *   this.drawerService.open('settings-drawer');
+ * }
+ * ```
+ */
+class DrawerService {
+    drawers = new Map();
+    /**
+     * Register a drawer with the service
+     * Called automatically by DrawerComponent
+     */
+    register(id, signal) {
+        this.drawers.set(id, signal);
+    }
+    /**
+     * Unregister a drawer from the service
+     * Called automatically on component destroy
+     */
+    unregister(id) {
+        this.drawers.delete(id);
+    }
+    /**
+     * Open a drawer by ID
+     */
+    open(id) {
+        const drawer = this.drawers.get(id);
+        if (drawer) {
+            drawer.set(true);
+        }
+        else {
+            console.warn(`[DrawerService] Drawer with id="${id}" not found`);
+        }
+    }
+    /**
+     * Close a drawer by ID
+     */
+    close(id) {
+        const drawer = this.drawers.get(id);
+        if (drawer) {
+            drawer.set(false);
+        }
+        else {
+            console.warn(`[DrawerService] Drawer with id="${id}" not found`);
+        }
+    }
+    /**
+     * Toggle a drawer by ID
+     */
+    toggle(id) {
+        const drawer = this.drawers.get(id);
+        if (drawer) {
+            drawer.update(v => !v);
+        }
+        else {
+            console.warn(`[DrawerService] Drawer with id="${id}" not found`);
+        }
+    }
+    /**
+     * Close all registered drawers
+     */
+    closeAll() {
+        this.drawers.forEach(signal => signal.set(false));
+    }
+    /**
+     * Check if a drawer is open
+     */
+    isOpen(id) {
+        const drawer = this.drawers.get(id);
+        return drawer ? drawer() : false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DrawerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DrawerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class DrawerComponent {
+    document = inject(DOCUMENT$1);
+    destroyRef = inject(DestroyRef);
+    configService = inject(StudioConfigService);
+    drawerService = inject(DrawerService);
+    drawerDefaults = computed(() => this.configService.config().components?.drawer, ...(ngDevMode ? [{ debugName: "drawerDefaults" }] : []));
+    // Template references
+    headerTemplate = contentChild('headerTemplate', ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    footerTemplate = contentChild('footerTemplate', ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    panelEl = viewChild('drawerPanel', ...(ngDevMode ? [{ debugName: "panelEl" }] : []));
+    // Core
+    id = input(`studio-drawer-${Math.random().toString(36).substr(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    // Position & Size
+    positionInput = input(undefined, ...(ngDevMode ? [{ debugName: "positionInput", alias: 'position' }] : [{ alias: 'position' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    customWidth = input(undefined, ...(ngDevMode ? [{ debugName: "customWidth" }] : []));
+    customHeight = input(undefined, ...(ngDevMode ? [{ debugName: "customHeight" }] : []));
+    position = withConfigDefault(this.positionInput, computed(() => this.drawerDefaults()?.position), 'right');
+    size = withConfigDefault(this.sizeInput, computed(() => this.drawerDefaults()?.size), 'md');
+    // Behavior
+    modalInput = input(undefined, ...(ngDevMode ? [{ debugName: "modalInput", alias: 'modal' }] : [{ alias: 'modal' }]));
+    closeOnEscapeInput = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnEscapeInput", alias: 'closeOnEscape' }] : [{ alias: 'closeOnEscape' }]));
+    closeOnBackdropClickInput = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnBackdropClickInput", alias: 'closeOnBackdropClick' }] : [{ alias: 'closeOnBackdropClick' }]));
+    blockScrollInput = input(undefined, ...(ngDevMode ? [{ debugName: "blockScrollInput", alias: 'blockScroll' }] : [{ alias: 'blockScroll' }]));
+    modal = withConfigDefault(this.modalInput, computed(() => this.drawerDefaults()?.modal), true);
+    closeOnEscape = withConfigDefault(this.closeOnEscapeInput, computed(() => this.drawerDefaults()?.closeOnEscape), true);
+    closeOnBackdropClick = withConfigDefault(this.closeOnBackdropClickInput, computed(() => this.drawerDefaults()?.closeOnBackdropClick), true);
+    blockScroll = withConfigDefault(this.blockScrollInput, computed(() => this.drawerDefaults()?.blockScroll), true);
+    // UI Elements
+    header = input(undefined, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    showHeaderInput = input(undefined, ...(ngDevMode ? [{ debugName: "showHeaderInput", alias: 'showHeader' }] : [{ alias: 'showHeader' }]));
+    showCloseButtonInput = input(undefined, ...(ngDevMode ? [{ debugName: "showCloseButtonInput", alias: 'showCloseButton' }] : [{ alias: 'showCloseButton' }]));
+    closeButtonPositionInput = input(undefined, ...(ngDevMode ? [{ debugName: "closeButtonPositionInput", alias: 'closeButtonPosition' }] : [{ alias: 'closeButtonPosition' }]));
+    showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : []));
+    showHeader = withConfigDefault(this.showHeaderInput, computed(() => this.drawerDefaults()?.showHeader ?? true), true);
+    showCloseButton = withConfigDefault(this.showCloseButtonInput, computed(() => this.drawerDefaults()?.showCloseButton), true);
+    closeButtonPosition = withConfigDefault(this.closeButtonPositionInput, computed(() => this.drawerDefaults()?.closeButtonPosition), 'right');
+    // Swipe Gestures
+    swipeToCloseInput = input(undefined, ...(ngDevMode ? [{ debugName: "swipeToCloseInput", alias: 'swipeToClose' }] : [{ alias: 'swipeToClose' }]));
+    swipeThresholdInput = input(undefined, ...(ngDevMode ? [{ debugName: "swipeThresholdInput", alias: 'swipeThreshold' }] : [{ alias: 'swipeThreshold' }]));
+    swipeToClose = withConfigDefault(this.swipeToCloseInput, computed(() => this.drawerDefaults()?.swipeToClose), true);
+    swipeThreshold = withConfigDefault(this.swipeThresholdInput, computed(() => this.drawerDefaults()?.swipeThreshold), 50);
+    // Animation
+    animationDurationInput = input(undefined, ...(ngDevMode ? [{ debugName: "animationDurationInput", alias: 'animationDuration' }] : [{ alias: 'animationDuration' }]));
+    animationEasingInput = input(undefined, ...(ngDevMode ? [{ debugName: "animationEasingInput", alias: 'animationEasing' }] : [{ alias: 'animationEasing' }]));
+    disableAnimationInput = input(undefined, ...(ngDevMode ? [{ debugName: "disableAnimationInput", alias: 'disableAnimation' }] : [{ alias: 'disableAnimation' }]));
+    animationDuration = withConfigDefault(this.animationDurationInput, computed(() => this.drawerDefaults()?.animationDuration), 300);
+    animationEasing = withConfigDefault(this.animationEasingInput, computed(() => this.drawerDefaults()?.animationEasing), 'ease-out');
+    disableAnimation = withConfigDefault(this.disableAnimationInput, computed(() => this.drawerDefaults()?.disableAnimation), false);
+    // Styling
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    shadowInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowInput", alias: 'shadow' }] : [{ alias: 'shadow' }]));
+    shadowSizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "shadowSizeInput", alias: 'shadowSize' }] : [{ alias: 'shadowSize' }]));
+    radius = withConfigDefault(this.radiusInput, computed(() => this.drawerDefaults()?.radius), 'none');
+    shadow = withConfigDefault(this.shadowInput, computed(() => this.drawerDefaults()?.shadow), true);
+    shadowSize = withConfigDefault(this.shadowSizeInput, computed(() => this.drawerDefaults()?.shadowSize), 'lg');
+    // Accessibility
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
+    ariaDescribedBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    autoFocusInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoFocusInput", alias: 'autoFocus' }] : [{ alias: 'autoFocus' }]));
+    restoreFocusInput = input(undefined, ...(ngDevMode ? [{ debugName: "restoreFocusInput", alias: 'restoreFocus' }] : [{ alias: 'restoreFocus' }]));
+    roleInput = input(undefined, ...(ngDevMode ? [{ debugName: "roleInput", alias: 'role' }] : [{ alias: 'role' }]));
+    autoFocus = withConfigDefault(this.autoFocusInput, computed(() => this.drawerDefaults()?.autoFocus), true);
+    restoreFocus = withConfigDefault(this.restoreFocusInput, computed(() => this.drawerDefaults()?.restoreFocus), true);
+    role = withConfigDefault(this.roleInput, computed(() => this.drawerDefaults()?.role), 'dialog');
+    // Outputs
+    visibleChange = output();
+    opened = output();
+    closed = output();
+    backdropClick = output();
+    // Internal state
+    previousActiveElement;
+    touchStartX = 0;
+    touchStartY = 0;
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    scrollbarWidth = 0;
+    hostClasses = computed(() => classNames('studio-drawer', `studio-drawer--${this.position()}`, `studio-drawer--${this.size()}`, this.visible() && 'studio-drawer--visible', this.modal() && 'studio-drawer--modal', this.shadow() && `studio-drawer--shadow-${this.shadowSize()}`, this.isDragging() && 'studio-drawer--dragging', (this.position() === 'left' || this.position() === 'right') && `studio-drawer--radius-${this.radius()}`), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        // Register with DrawerService
+        effect(() => {
+            this.drawerService.register(this.id(), this.visible);
+        });
+        // Handle visibility changes
+        effect(() => {
+            if (this.visible()) {
+                this.handleOpen();
+            }
+            else {
+                this.handleClose();
+            }
+        });
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.drawerService.unregister(this.id());
+            this.unlockBodyScroll();
+        });
+    }
+    handleOpen() {
+        if (this.blockScroll() && this.modal()) {
+            this.lockBodyScroll();
+        }
+        if (this.autoFocus()) {
+            this.setupFocusTrap();
+        }
+        this.opened.emit();
+    }
+    handleClose() {
+        if (this.blockScroll() && this.modal()) {
+            this.unlockBodyScroll();
+        }
+        if (this.restoreFocus()) {
+            this.restorePreviousFocus();
+        }
+        this.closed.emit();
+    }
+    open() {
+        this.visible.set(true);
+        this.visibleChange.emit(true);
+    }
+    close() {
+        this.visible.set(false);
+        this.visibleChange.emit(false);
+    }
+    toggle() {
+        this.visible.update(v => !v);
+        this.visibleChange.emit(this.visible());
+    }
+    handleBackdropClick() {
+        this.backdropClick.emit();
+        if (this.closeOnBackdropClick()) {
+            this.close();
+        }
+    }
+    handleEscapeKey(event) {
+        if (this.visible() && this.closeOnEscape()) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    // Touch gesture handling
+    onTouchStart(event) {
+        if (!this.swipeToClose() || !this.visible())
+            return;
+        const target = event.target;
+        const panel = this.panelEl()?.nativeElement;
+        // Only start drag if touching the panel
+        if (!panel?.contains(target))
+            return;
+        this.touchStartX = event.touches[0].clientX;
+        this.touchStartY = event.touches[0].clientY;
+        this.isDragging.set(true);
+    }
+    onTouchMove(event) {
+        if (!this.isDragging())
+            return;
+        const deltaX = event.touches[0].clientX - this.touchStartX;
+        const deltaY = event.touches[0].clientY - this.touchStartY;
+        const pos = this.position();
+        // Apply drag transform based on position
+        let shouldAllowDrag = false;
+        if (pos === 'right' && deltaX > 0) {
+            shouldAllowDrag = true;
+            this.applyDragTransform(deltaX, 0);
+        }
+        else if (pos === 'left' && deltaX < 0) {
+            shouldAllowDrag = true;
+            this.applyDragTransform(deltaX, 0);
+        }
+        else if (pos === 'bottom' && deltaY > 0) {
+            shouldAllowDrag = true;
+            this.applyDragTransform(0, deltaY);
+        }
+        else if (pos === 'top' && deltaY < 0) {
+            shouldAllowDrag = true;
+            this.applyDragTransform(0, deltaY);
+        }
+        // Prevent scroll while dragging
+        if (shouldAllowDrag && (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10)) {
+            event.preventDefault();
+        }
+    }
+    onTouchEnd(event) {
+        if (!this.isDragging())
+            return;
+        const deltaX = event.changedTouches[0].clientX - this.touchStartX;
+        const deltaY = event.changedTouches[0].clientY - this.touchStartY;
+        const threshold = this.swipeThreshold();
+        const pos = this.position();
+        let shouldClose = false;
+        if (pos === 'right' && deltaX > threshold)
+            shouldClose = true;
+        if (pos === 'left' && deltaX < -threshold)
+            shouldClose = true;
+        if (pos === 'bottom' && deltaY > threshold)
+            shouldClose = true;
+        if (pos === 'top' && deltaY < -threshold)
+            shouldClose = true;
+        if (shouldClose) {
+            this.close();
+        }
+        else {
+            this.resetTransform();
+        }
+        this.isDragging.set(false);
+    }
+    applyDragTransform(deltaX, deltaY) {
+        const panel = this.panelEl()?.nativeElement;
+        if (!panel)
+            return;
+        const pos = this.position();
+        if (pos === 'right') {
+            const translateX = Math.max(0, deltaX);
+            panel.style.transform = `translateX(${translateX}px)`;
+            panel.style.transition = 'none';
+        }
+        else if (pos === 'left') {
+            const translateX = Math.min(0, deltaX);
+            panel.style.transform = `translateX(${translateX}px)`;
+            panel.style.transition = 'none';
+        }
+        else if (pos === 'bottom') {
+            const translateY = Math.max(0, deltaY);
+            panel.style.transform = `translateY(${translateY}px)`;
+            panel.style.transition = 'none';
+        }
+        else if (pos === 'top') {
+            const translateY = Math.min(0, deltaY);
+            panel.style.transform = `translateY(${translateY}px)`;
+            panel.style.transition = 'none';
+        }
+    }
+    resetTransform() {
+        const panel = this.panelEl()?.nativeElement;
+        if (!panel)
+            return;
+        panel.style.transition = '';
+        panel.style.transform = '';
+    }
+    // Body scroll lock
+    lockBodyScroll() {
+        this.scrollbarWidth = window.innerWidth - this.document.documentElement.clientWidth;
+        this.document.body.style.overflow = 'hidden';
+        this.document.body.style.paddingRight = `${this.scrollbarWidth}px`;
+    }
+    unlockBodyScroll() {
+        this.document.body.style.overflow = '';
+        this.document.body.style.paddingRight = '';
+    }
+    // Focus management
+    setupFocusTrap() {
+        this.previousActiveElement = this.document.activeElement;
+        // Move focus to drawer after render
+        setTimeout(() => {
+            const panel = this.panelEl()?.nativeElement;
+            if (!panel)
+                return;
+            const firstFocusable = this.getFirstFocusableElement(panel);
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+            else {
+                panel.focus();
+            }
+        }, 0);
+    }
+    restorePreviousFocus() {
+        if (this.previousActiveElement) {
+            this.previousActiveElement.focus();
+            this.previousActiveElement = undefined;
+        }
+    }
+    getFirstFocusableElement(container) {
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+        return container.querySelector(focusableSelectors);
+    }
+    handleKeydown(event) {
+        if (!this.visible())
+            return;
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    trapFocus(event) {
+        const panel = this.panelEl()?.nativeElement;
+        if (!panel)
+            return;
+        const focusableElements = panel.querySelectorAll([
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', '));
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (this.document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement?.focus();
+            }
+        }
+        else {
+            if (this.document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement?.focus();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: DrawerComponent, isStandalone: true, selector: "studio-drawer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, positionInput: { classPropertyName: "positionInput", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, customHeight: { classPropertyName: "customHeight", publicName: "customHeight", isSignal: true, isRequired: false, transformFunction: null }, modalInput: { classPropertyName: "modalInput", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscapeInput: { classPropertyName: "closeOnEscapeInput", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClickInput: { classPropertyName: "closeOnBackdropClickInput", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, blockScrollInput: { classPropertyName: "blockScrollInput", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, showHeaderInput: { classPropertyName: "showHeaderInput", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showCloseButtonInput: { classPropertyName: "showCloseButtonInput", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonPositionInput: { classPropertyName: "closeButtonPositionInput", publicName: "closeButtonPosition", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, swipeToCloseInput: { classPropertyName: "swipeToCloseInput", publicName: "swipeToClose", isSignal: true, isRequired: false, transformFunction: null }, swipeThresholdInput: { classPropertyName: "swipeThresholdInput", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null }, animationDurationInput: { classPropertyName: "animationDurationInput", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, animationEasingInput: { classPropertyName: "animationEasingInput", publicName: "animationEasing", isSignal: true, isRequired: false, transformFunction: null }, disableAnimationInput: { classPropertyName: "disableAnimationInput", publicName: "disableAnimation", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, shadowInput: { classPropertyName: "shadowInput", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, shadowSizeInput: { classPropertyName: "shadowSizeInput", publicName: "shadowSize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, autoFocusInput: { classPropertyName: "autoFocusInput", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, restoreFocusInput: { classPropertyName: "restoreFocusInput", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, roleInput: { classPropertyName: "roleInput", publicName: "role", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", visibleChange: "visibleChange", opened: "opened", closed: "closed", backdropClick: "backdropClick" }, host: { listeners: { "document:keydown.escape": "handleEscapeKey($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "keydown": "handleKeydown($event)" }, properties: { "class": "hostClasses()", "attr.data-visible": "visible()" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  <!-- Backdrop -->\n  @if (modal()) {\n    <div\n      class=\"studio-drawer__backdrop\"\n      (click)=\"handleBackdropClick()\">\n    </div>\n  }\n\n  <!-- Drawer Panel -->\n  <div\n    #drawerPanel\n    class=\"studio-drawer__panel\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"modal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.tabindex]=\"-1\"\n    [style.width]=\"customWidth()\"\n    [style.height]=\"customHeight()\"\n    [style.--drawer-animation-duration]=\"animationDuration() + 'ms'\"\n    [style.--drawer-animation-timing]=\"animationEasing()\">\n\n    <!-- Header -->\n    @if (showHeader() && (headerTemplate() || header() || showCloseButton())) {\n      <div class=\"studio-drawer__header\">\n        @if (headerTemplate(); as tmpl) {\n          <!-- Custom template -->\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n        } @else if (header()) {\n          <!-- Simple string header -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <h2 class=\"studio-drawer__title\">{{ header() }}</h2>\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Named slot fallback -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <ng-content select=\"[drawerHeader]\" />\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"studio-drawer__content\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    @if (showFooter() && footerTemplate()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()!\" />\n      </div>\n    } @else if (showFooter()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-content select=\"[drawerFooter]\" />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;pointer-events:none;font-family:var(--studio-font-family)}:host(.studio-drawer--visible){pointer-events:auto}.studio-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--studio-drawer-backdrop-bg, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));z-index:var(--studio-drawer-z-index, 1000);opacity:0;transition:opacity var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}:host(.studio-drawer--visible) .studio-drawer__backdrop{opacity:1}.studio-drawer__panel{position:fixed;background:var(--studio-drawer-bg, var(--studio-bg-primary));color:var(--studio-drawer-text-color, var(--studio-text-primary));z-index:calc(var(--studio-drawer-z-index, 1000) + 1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;outline:none;transition:transform var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}.studio-drawer__panel::-webkit-scrollbar{width:var(--studio-drawer-scrollbar-width, 8px)}.studio-drawer__panel::-webkit-scrollbar-track{background:var(--studio-drawer-scrollbar-track-bg, transparent)}.studio-drawer__panel::-webkit-scrollbar-thumb{background:var(--studio-drawer-scrollbar-thumb-bg, rgba(0, 0, 0, .2));border-radius:var(--studio-drawer-scrollbar-thumb-radius, 4px)}.studio-drawer__panel::-webkit-scrollbar-thumb:hover{background:var(--studio-drawer-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .3))}:host(.studio-drawer--left) .studio-drawer__panel{top:0;left:0;height:100%;border-right:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(-100%)}:host(.studio-drawer--left.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--right) .studio-drawer__panel{top:0;right:0;height:100%;border-left:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(100%)}:host(.studio-drawer--right.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--top) .studio-drawer__panel{top:0;left:0;width:100%;border-bottom:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(-100%)}:host(.studio-drawer--top.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--bottom) .studio-drawer__panel{bottom:0;left:0;width:100%;border-top:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(100%)}:host(.studio-drawer--bottom.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--left.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--sm) .studio-drawer__panel{width:var(--studio-drawer-width-sm, 20rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel{width:var(--studio-drawer-width-md, 28rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel{width:var(--studio-drawer-width-lg, 36rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:var(--studio-drawer-width-xl, 48rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--full) .studio-drawer__panel{width:100vw;max-width:none}:host(.studio-drawer--top.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--sm) .studio-drawer__panel{height:var(--studio-drawer-height-sm, 12rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--md) .studio-drawer__panel{height:var(--studio-drawer-height-md, 20rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--lg) .studio-drawer__panel{height:var(--studio-drawer-height-lg, 32rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--xl) .studio-drawer__panel{height:var(--studio-drawer-height-xl, 48rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--full) .studio-drawer__panel{height:100vh;max-height:none}:host(.studio-drawer--left.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:0 var(--studio-radius-sm) var(--studio-radius-sm) 0}:host(.studio-drawer--left.studio-drawer--radius-md) .studio-drawer__panel{border-radius:0 var(--studio-radius-md) var(--studio-radius-md) 0}:host(.studio-drawer--left.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:0 var(--studio-radius-lg) var(--studio-radius-lg) 0}:host(.studio-drawer--right.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:var(--studio-radius-sm) 0 0 var(--studio-radius-sm)}:host(.studio-drawer--right.studio-drawer--radius-md) .studio-drawer__panel{border-radius:var(--studio-radius-md) 0 0 var(--studio-radius-md)}:host(.studio-drawer--right.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:var(--studio-radius-lg) 0 0 var(--studio-radius-lg)}:host(.studio-drawer--shadow-sm) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-sm, var(--studio-shadow-sm))}:host(.studio-drawer--shadow-md) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-md, var(--studio-shadow-md))}:host(.studio-drawer--shadow-lg) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-lg, var(--studio-shadow-lg))}:host(.studio-drawer--shadow-xl) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-xl, 0 12px 32px rgba(0, 0, 0, .2))}.studio-drawer__header{flex-shrink:0;padding:var(--studio-drawer-header-padding-y, var(--studio-spacing-md)) var(--studio-drawer-header-padding-x, var(--studio-spacing-lg));border-bottom:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary))}.studio-drawer__header-content{display:flex;align-items:center;gap:var(--studio-drawer-header-gap, var(--studio-spacing-md))}.studio-drawer__title{flex:1;margin:0;font-size:var(--studio-drawer-title-font-size, 1.25rem);font-weight:var(--studio-drawer-title-font-weight, var(--studio-font-weight-semibold, 600));line-height:var(--studio-drawer-title-line-height, 1.5);color:var(--studio-drawer-title-color, var(--studio-text-primary))}.studio-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--studio-drawer-close-button-size, 2.5rem);height:var(--studio-drawer-close-button-size, 2.5rem);padding:0;background:none;border:none;border-radius:var(--studio-drawer-close-button-radius, var(--studio-radius-md));color:var(--studio-drawer-close-button-color, var(--studio-text-secondary));cursor:pointer;transition:all var(--studio-transition-fast);flex-shrink:0}.studio-drawer__close:hover{background:var(--studio-drawer-close-button-hover-bg, var(--studio-bg-secondary));color:var(--studio-drawer-close-button-hover-color, var(--studio-text-primary))}.studio-drawer__close:active{transform:scale(.95)}.studio-drawer__close:focus-visible{outline:2px solid var(--studio-drawer-focus-ring-color, var(--studio-primary));outline-offset:var(--studio-drawer-focus-ring-offset, 2px)}.studio-drawer__content{flex:1;padding:var(--studio-drawer-content-padding-y, var(--studio-spacing-lg)) var(--studio-drawer-content-padding-x, var(--studio-spacing-lg));overflow-y:auto;overflow-x:hidden}.studio-drawer__footer{flex-shrink:0;padding:var(--studio-drawer-footer-padding-y, var(--studio-spacing-md)) var(--studio-drawer-footer-padding-x, var(--studio-spacing-lg));border-top:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary));display:flex;align-items:center;gap:var(--studio-drawer-footer-gap, var(--studio-spacing-sm))}:host(.studio-drawer--dragging) .studio-drawer__panel{transition:none!important}@media (max-width: 640px){:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:100vw;max-width:none}.studio-drawer__header,.studio-drawer__content,.studio-drawer__footer{padding-left:var(--studio-spacing-md);padding-right:var(--studio-spacing-md)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-drawer', standalone: true, imports: [NgTemplateOutlet, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-visible]': 'visible()',
+                    }, template: "@if (visible()) {\n  <!-- Backdrop -->\n  @if (modal()) {\n    <div\n      class=\"studio-drawer__backdrop\"\n      (click)=\"handleBackdropClick()\">\n    </div>\n  }\n\n  <!-- Drawer Panel -->\n  <div\n    #drawerPanel\n    class=\"studio-drawer__panel\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"modal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    [attr.tabindex]=\"-1\"\n    [style.width]=\"customWidth()\"\n    [style.height]=\"customHeight()\"\n    [style.--drawer-animation-duration]=\"animationDuration() + 'ms'\"\n    [style.--drawer-animation-timing]=\"animationEasing()\">\n\n    <!-- Header -->\n    @if (showHeader() && (headerTemplate() || header() || showCloseButton())) {\n      <div class=\"studio-drawer__header\">\n        @if (headerTemplate(); as tmpl) {\n          <!-- Custom template -->\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n        } @else if (header()) {\n          <!-- Simple string header -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <h2 class=\"studio-drawer__title\">{{ header() }}</h2>\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Named slot fallback -->\n          <div class=\"studio-drawer__header-content\">\n            @if (showCloseButton() && closeButtonPosition() === 'left') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n\n            <ng-content select=\"[drawerHeader]\" />\n\n            @if (showCloseButton() && closeButtonPosition() === 'right') {\n              <button\n                type=\"button\"\n                class=\"studio-drawer__close\"\n                (click)=\"close()\"\n                aria-label=\"Close drawer\">\n                <studio-icon name=\"x\" [size]=\"20\" />\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Content -->\n    <div class=\"studio-drawer__content\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    @if (showFooter() && footerTemplate()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate()!\" />\n      </div>\n    } @else if (showFooter()) {\n      <div class=\"studio-drawer__footer\">\n        <ng-content select=\"[drawerFooter]\" />\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;pointer-events:none;font-family:var(--studio-font-family)}:host(.studio-drawer--visible){pointer-events:auto}.studio-drawer__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--studio-drawer-backdrop-bg, rgba(0, 0, 0, .5));-webkit-backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));backdrop-filter:blur(var(--studio-drawer-backdrop-blur, 2px));z-index:var(--studio-drawer-z-index, 1000);opacity:0;transition:opacity var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}:host(.studio-drawer--visible) .studio-drawer__backdrop{opacity:1}.studio-drawer__panel{position:fixed;background:var(--studio-drawer-bg, var(--studio-bg-primary));color:var(--studio-drawer-text-color, var(--studio-text-primary));z-index:calc(var(--studio-drawer-z-index, 1000) + 1);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;outline:none;transition:transform var(--drawer-animation-duration, .3s) var(--drawer-animation-timing, ease-out)}.studio-drawer__panel::-webkit-scrollbar{width:var(--studio-drawer-scrollbar-width, 8px)}.studio-drawer__panel::-webkit-scrollbar-track{background:var(--studio-drawer-scrollbar-track-bg, transparent)}.studio-drawer__panel::-webkit-scrollbar-thumb{background:var(--studio-drawer-scrollbar-thumb-bg, rgba(0, 0, 0, .2));border-radius:var(--studio-drawer-scrollbar-thumb-radius, 4px)}.studio-drawer__panel::-webkit-scrollbar-thumb:hover{background:var(--studio-drawer-scrollbar-thumb-hover-bg, rgba(0, 0, 0, .3))}:host(.studio-drawer--left) .studio-drawer__panel{top:0;left:0;height:100%;border-right:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(-100%)}:host(.studio-drawer--left.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--right) .studio-drawer__panel{top:0;right:0;height:100%;border-left:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translate(100%)}:host(.studio-drawer--right.studio-drawer--visible) .studio-drawer__panel{transform:translate(0)}:host(.studio-drawer--top) .studio-drawer__panel{top:0;left:0;width:100%;border-bottom:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(-100%)}:host(.studio-drawer--top.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--bottom) .studio-drawer__panel{bottom:0;left:0;width:100%;border-top:var(--studio-drawer-border-width, 1px) solid var(--studio-drawer-border-color, var(--studio-border-primary));transform:translateY(100%)}:host(.studio-drawer--bottom.studio-drawer--visible) .studio-drawer__panel{transform:translateY(0)}:host(.studio-drawer--left.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--sm) .studio-drawer__panel{width:var(--studio-drawer-width-sm, 20rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel{width:var(--studio-drawer-width-md, 28rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel{width:var(--studio-drawer-width-lg, 36rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:var(--studio-drawer-width-xl, 48rem);max-width:var(--studio-drawer-max-width, 90vw)}:host(.studio-drawer--left.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--full) .studio-drawer__panel{width:100vw;max-width:none}:host(.studio-drawer--top.studio-drawer--sm) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--sm) .studio-drawer__panel{height:var(--studio-drawer-height-sm, 12rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--md) .studio-drawer__panel{height:var(--studio-drawer-height-md, 20rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--lg) .studio-drawer__panel{height:var(--studio-drawer-height-lg, 32rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--xl) .studio-drawer__panel{height:var(--studio-drawer-height-xl, 48rem);max-height:var(--studio-drawer-max-height, 90vh)}:host(.studio-drawer--top.studio-drawer--full) .studio-drawer__panel,:host(.studio-drawer--bottom.studio-drawer--full) .studio-drawer__panel{height:100vh;max-height:none}:host(.studio-drawer--left.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:0 var(--studio-radius-sm) var(--studio-radius-sm) 0}:host(.studio-drawer--left.studio-drawer--radius-md) .studio-drawer__panel{border-radius:0 var(--studio-radius-md) var(--studio-radius-md) 0}:host(.studio-drawer--left.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:0 var(--studio-radius-lg) var(--studio-radius-lg) 0}:host(.studio-drawer--right.studio-drawer--radius-sm) .studio-drawer__panel{border-radius:var(--studio-radius-sm) 0 0 var(--studio-radius-sm)}:host(.studio-drawer--right.studio-drawer--radius-md) .studio-drawer__panel{border-radius:var(--studio-radius-md) 0 0 var(--studio-radius-md)}:host(.studio-drawer--right.studio-drawer--radius-lg) .studio-drawer__panel{border-radius:var(--studio-radius-lg) 0 0 var(--studio-radius-lg)}:host(.studio-drawer--shadow-sm) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-sm, var(--studio-shadow-sm))}:host(.studio-drawer--shadow-md) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-md, var(--studio-shadow-md))}:host(.studio-drawer--shadow-lg) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-lg, var(--studio-shadow-lg))}:host(.studio-drawer--shadow-xl) .studio-drawer__panel{box-shadow:var(--studio-drawer-shadow-xl, 0 12px 32px rgba(0, 0, 0, .2))}.studio-drawer__header{flex-shrink:0;padding:var(--studio-drawer-header-padding-y, var(--studio-spacing-md)) var(--studio-drawer-header-padding-x, var(--studio-spacing-lg));border-bottom:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary))}.studio-drawer__header-content{display:flex;align-items:center;gap:var(--studio-drawer-header-gap, var(--studio-spacing-md))}.studio-drawer__title{flex:1;margin:0;font-size:var(--studio-drawer-title-font-size, 1.25rem);font-weight:var(--studio-drawer-title-font-weight, var(--studio-font-weight-semibold, 600));line-height:var(--studio-drawer-title-line-height, 1.5);color:var(--studio-drawer-title-color, var(--studio-text-primary))}.studio-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--studio-drawer-close-button-size, 2.5rem);height:var(--studio-drawer-close-button-size, 2.5rem);padding:0;background:none;border:none;border-radius:var(--studio-drawer-close-button-radius, var(--studio-radius-md));color:var(--studio-drawer-close-button-color, var(--studio-text-secondary));cursor:pointer;transition:all var(--studio-transition-fast);flex-shrink:0}.studio-drawer__close:hover{background:var(--studio-drawer-close-button-hover-bg, var(--studio-bg-secondary));color:var(--studio-drawer-close-button-hover-color, var(--studio-text-primary))}.studio-drawer__close:active{transform:scale(.95)}.studio-drawer__close:focus-visible{outline:2px solid var(--studio-drawer-focus-ring-color, var(--studio-primary));outline-offset:var(--studio-drawer-focus-ring-offset, 2px)}.studio-drawer__content{flex:1;padding:var(--studio-drawer-content-padding-y, var(--studio-spacing-lg)) var(--studio-drawer-content-padding-x, var(--studio-spacing-lg));overflow-y:auto;overflow-x:hidden}.studio-drawer__footer{flex-shrink:0;padding:var(--studio-drawer-footer-padding-y, var(--studio-spacing-md)) var(--studio-drawer-footer-padding-x, var(--studio-spacing-lg));border-top:1px solid var(--studio-drawer-divider-color, var(--studio-border-primary));display:flex;align-items:center;gap:var(--studio-drawer-footer-gap, var(--studio-spacing-sm))}:host(.studio-drawer--dragging) .studio-drawer__panel{transition:none!important}@media (max-width: 640px){:host(.studio-drawer--left.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--md) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--lg) .studio-drawer__panel,:host(.studio-drawer--left.studio-drawer--xl) .studio-drawer__panel,:host(.studio-drawer--right.studio-drawer--xl) .studio-drawer__panel{width:100vw;max-width:none}.studio-drawer__header,.studio-drawer__content,.studio-drawer__footer{padding-left:var(--studio-spacing-md);padding-right:var(--studio-spacing-md)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerTemplate: [{ type: i0.ContentChild, args: ['headerTemplate', { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footerTemplate', { isSignal: true }] }], panelEl: [{ type: i0.ViewChild, args: ['drawerPanel', { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], positionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], customHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHeight", required: false }] }], modalInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closeOnEscapeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClickInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], blockScrollInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockScroll", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], showHeaderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showCloseButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeButtonPositionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonPosition", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], swipeToCloseInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeToClose", required: false }] }], swipeThresholdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], animationDurationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], animationEasingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationEasing", required: false }] }], disableAnimationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimation", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], shadowSizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadowSize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], autoFocusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], restoreFocusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], roleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], backdropClick: [{ type: i0.Output, args: ["backdropClick"] }], handleEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], onTouchMove: [{
+                type: HostListener,
+                args: ['touchmove', ['$event']]
+            }], onTouchEnd: [{
+                type: HostListener,
+                args: ['touchend', ['$event']]
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 /**
  * Input component with form control support, variants, and accessibility
  *
@@ -1332,6 +1765,281 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "@if (label() && !floatingLabel()) {\n  <label [for]=\"id() || generatedId\" class=\"studio-input__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-input__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-input__container\">\n    @if (prefixIcon()) {\n      <span class=\"studio-input__prefix\">\n        <studio-icon [name]=\"prefixIcon()!\" [size]=\"16\" />\n      </span>\n    }\n\n    @if (label() && floatingLabel()) {\n      <label [for]=\"id() || generatedId\" class=\"studio-input__label--floating\">\n        {{ label() }}\n        @if (required()) {\n          <span>*</span>\n        }\n      </label>\n    }\n\n    <input\n      #inputElement\n      class=\"studio-input__field\"\n      [type]=\"computedType()\"\n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [placeholder]=\"computedPlaceholder()\"\n      [required]=\"required()\"\n      [attr.maxlength]=\"maxLength()\"\n      [attr.minlength]=\"minLength()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [pattern]=\"pattern()\"\n      [attr.inputmode]=\"inputmode()\"\n      [attr.autocomplete]=\"autocomplete()\"\n      [name]=\"name()\"\n      [id]=\"id() || generatedId\"\n      [attr.aria-label]=\"ariaLabel() || (!label() ? placeholder() : null)\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"ariaDescribedByValue()\"\n      [attr.aria-required]=\"required() ? 'true' : null\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"\n      (keydown.enter)=\"handleEnter($event)\"\n    />\n\n    @if (loading()) {\n      <span class=\"studio-input__loading\">\n        <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n      </span>\n    }\n\n    @if (clearable() && value() && !disabled() && !loading()) {\n      <button\n        type=\"button\"\n        class=\"studio-input__clear\"\n        (click)=\"handleClear()\"\n        [attr.aria-label]=\"'Clear input'\"\n        tabindex=\"-1\"\n      >\n        <studio-icon name=\"x\" [size]=\"14\" />\n      </button>\n    }\n\n    @if (type() === 'password' && showPasswordToggle() && !loading()) {\n      <button\n        type=\"button\"\n        class=\"studio-input__toggle-password\"\n        (click)=\"togglePasswordVisibility()\"\n        [attr.aria-label]=\"isPasswordVisible() ? 'Hide password' : 'Show password'\"\n        tabindex=\"-1\"\n      >\n        <studio-icon [name]=\"isPasswordVisible() ? 'eye-off' : 'eye'\" [size]=\"16\" />\n      </button>\n    }\n\n    @if (suffixIcon() && !loading() && !clearable() && !(type() === 'password' && showPasswordToggle())) {\n      <span class=\"studio-input__suffix\">\n        <studio-icon [name]=\"suffixIcon()!\" [size]=\"16\" />\n      </span>\n    }\n  </div>\n\n@if (hint() && !error()) {\n  <span class=\"studio-input__hint\" [id]=\"hintId\">\n    {{ hint() }}\n  </span>\n}\n\n@if (error() && errorMessage()) {\n  <span class=\"studio-input__error\" [id]=\"errorId\" role=\"alert\">\n    <studio-icon name=\"alert-circle\" [size]=\"14\" />\n    {{ errorMessage() }}\n  </span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family)}:host(.studio-input--full-width){width:100%}.studio-input__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-input__label .studio-input__required{color:var(--studio-error);margin-left:.125rem}.studio-input__container{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-input__field{flex:1;width:100%;font-family:inherit;font-size:1rem;color:var(--studio-text-primary);background:transparent;border:none;outline:none;transition:all var(--studio-transition-fast)}.studio-input__field::placeholder{color:var(--studio-text-tertiary)}.studio-input__field:disabled{cursor:not-allowed;opacity:.6}.studio-input__field:read-only{cursor:default}.studio-input__prefix,.studio-input__suffix{display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary);flex-shrink:0}.studio-input__clear,.studio-input__toggle-password{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:.25rem;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast);flex-shrink:0}.studio-input__clear:hover,.studio-input__toggle-password:hover{color:var(--studio-text-primary);background:var(--studio-bg-secondary)}.studio-input__clear:active,.studio-input__toggle-password:active{transform:scale(.95)}.studio-input__loading{display:flex;align-items:center;color:var(--studio-primary);flex-shrink:0}.studio-input__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-input__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-input__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}:host(.studio-input--outline) .studio-input__container{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-input--outline) .studio-input__container:hover:not(:has(.studio-input__field:disabled)){border-color:var(--studio-primary)}:host(.studio-input--outline.studio-input--focused) .studio-input__container{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-input--outline.studio-input--error) .studio-input__container{border-color:var(--studio-error)}:host(.studio-input--outline.studio-input--error) .studio-input__container:hover{border-color:var(--studio-error)}:host(.studio-input--outline.studio-input--error.studio-input--focused) .studio-input__container{box-shadow:0 0 0 3px #ef44441a}:host(.studio-input--outline.studio-input--disabled) .studio-input__container{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-input--filled) .studio-input__container{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-input--filled) .studio-input__container:hover:not(:has(.studio-input__field:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-input--filled.studio-input--focused) .studio-input__container{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-input--filled.studio-input--error) .studio-input__container{border-bottom-color:var(--studio-error)}:host(.studio-input--filled.studio-input--disabled) .studio-input__container{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-input--underline) .studio-input__container{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-input--underline) .studio-input__container:hover:not(:has(.studio-input__field:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-input--underline.studio-input--focused) .studio-input__container{border-bottom:2px solid var(--studio-primary)}:host(.studio-input--underline.studio-input--error) .studio-input__container{border-bottom-color:var(--studio-error)}:host(.studio-input--underline.studio-input--disabled) .studio-input__container{border-bottom-style:dashed;opacity:.6}:host(.studio-input--sm) .studio-input__field{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-input--sm) .studio-input__prefix{padding-left:.75rem}:host(.studio-input--sm) .studio-input__suffix,:host(.studio-input--sm) .studio-input__clear,:host(.studio-input--sm) .studio-input__toggle-password,:host(.studio-input--sm) .studio-input__loading{padding-right:.5rem}:host(.studio-input--md) .studio-input__field{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-input--md) .studio-input__prefix{padding-left:1rem}:host(.studio-input--md) .studio-input__suffix,:host(.studio-input--md) .studio-input__clear,:host(.studio-input--md) .studio-input__toggle-password,:host(.studio-input--md) .studio-input__loading{padding-right:.75rem}:host(.studio-input--lg) .studio-input__field{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-input--lg) .studio-input__prefix{padding-left:1.25rem}:host(.studio-input--lg) .studio-input__suffix,:host(.studio-input--lg) .studio-input__clear,:host(.studio-input--lg) .studio-input__toggle-password,:host(.studio-input--lg) .studio-input__loading{padding-right:1rem}.studio-input__label--floating{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-size:1rem;color:var(--studio-text-tertiary);pointer-events:none;transition:all var(--studio-transition-fast);background:var(--studio-bg-primary);padding:0 .25rem}:host(.studio-input--filled) .studio-input__label--floating{background:transparent}:host(.studio-input--focused) .studio-input__label--floating,:host(.studio-input--has-value) .studio-input__label--floating{top:0;font-size:.75rem;color:var(--studio-primary)}:host(.studio-input--error) .studio-input__label--floating{color:var(--studio-error)}:host(.studio-input--radius-none) .studio-input__container{border-radius:0}:host(.studio-input--radius-sm) .studio-input__container{border-radius:var(--studio-radius-sm)}:host(.studio-input--radius-md) .studio-input__container{border-radius:var(--studio-radius-md)}:host(.studio-input--radius-lg) .studio-input__container{border-radius:var(--studio-radius-lg)}:host(.studio-input--radius-full) .studio-input__container{border-radius:9999px}:host(.studio-input--filled.studio-input--radius-none) .studio-input__container{border-radius:0}:host(.studio-input--filled.studio-input--radius-sm) .studio-input__container{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-input--filled.studio-input--radius-md) .studio-input__container{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-input--filled.studio-input--radius-lg) .studio-input__container{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-input--filled.studio-input--radius-full) .studio-input__container{border-radius:9999px 9999px 0 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", 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 }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], entered: [{ type: i0.Output, args: ["entered"] }] } });
 
+class SelectComponent {
+    configService = inject(StudioConfigService);
+    selectDefaults = computed(() => this.configService.config().components?.select, ...(ngDevMode ? [{ debugName: "selectDefaults" }] : []));
+    triggerEl = viewChild('triggerButton', ...(ngDevMode ? [{ debugName: "triggerEl" }] : []));
+    dropdownEl = viewChild('dropdownPanel', ...(ngDevMode ? [{ debugName: "dropdownEl" }] : []));
+    variantInput = input(undefined, ...(ngDevMode ? [{ debugName: "variantInput", alias: 'variant' }] : [{ alias: 'variant' }]));
+    sizeInput = input(undefined, ...(ngDevMode ? [{ debugName: "sizeInput", alias: 'size' }] : [{ alias: 'size' }]));
+    radiusInput = input(undefined, ...(ngDevMode ? [{ debugName: "radiusInput", alias: 'radius' }] : [{ alias: 'radius' }]));
+    variant = withConfigDefault(this.variantInput, computed(() => this.selectDefaults()?.variant), 'outline');
+    size = withConfigDefault(this.sizeInput, computed(() => this.selectDefaults()?.size), 'md');
+    radius = withConfigDefault(this.radiusInput, computed(() => this.selectDefaults()?.radius), 'md');
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    placeholder = input('Select option...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    floatingLabel = input(false, ...(ngDevMode ? [{ debugName: "floatingLabel" }] : []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    errorMessage = input(undefined, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    prefixIcon = input(undefined, ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
+    suffixIcon = input('chevron-down', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    maxHeight = input('300px', ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+    position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    searchPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    valueChange = output();
+    searchChange = output();
+    opened = output();
+    closed = output();
+    optionSelected = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    selectedValue = signal(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
+    generatedId = `studio-select-${Math.random().toString(36).substr(2, 9)}`;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            if (this.isOpen()) {
+                this.setupClickOutside();
+            }
+            else {
+                this.cleanupClickOutside();
+            }
+        });
+    }
+    flattenedOptions = computed(() => {
+        const opts = this.options();
+        if (!opts || opts.length === 0)
+            return [];
+        if (this.isOptionGroup(opts[0])) {
+            return opts.flatMap(g => g.options);
+        }
+        return opts;
+    }, ...(ngDevMode ? [{ debugName: "flattenedOptions" }] : []));
+    filteredOptions = computed(() => {
+        const query = this.searchQuery().toLowerCase().trim();
+        const opts = this.flattenedOptions();
+        if (!query)
+            return opts;
+        return opts.filter(opt => opt.label.toLowerCase().includes(query) ||
+            opt.description?.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    selectedOptions = computed(() => {
+        const value = this.selectedValue();
+        const opts = this.flattenedOptions();
+        if (this.multiple()) {
+            const values = value || [];
+            return opts.filter(opt => values.includes(opt.value));
+        }
+        return opts.find(opt => this.compareValues(opt.value, value)) || null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    displayValue = computed(() => {
+        const selected = this.selectedOptions();
+        if (this.multiple() && Array.isArray(selected)) {
+            return selected.map(opt => opt.label).join(', ');
+        }
+        if (selected && !Array.isArray(selected)) {
+            return selected.label;
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    hasValue = computed(() => {
+        const val = this.selectedValue();
+        return this.multiple()
+            ? Array.isArray(val) && val.length > 0
+            : val !== null && val !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    hostClasses = computed(() => classNames('studio-select', `studio-select--${this.variant()}`, `studio-select--${this.size()}`, `studio-select--radius-${this.radius()}`, this.isOpen() && 'studio-select--open', this.disabled() && 'studio-select--disabled', this.loading() && 'studio-select--loading', this.error() && 'studio-select--error', this.isFocused() && 'studio-select--focused', this.hasValue() && 'studio-select--has-value', this.fullWidth() && 'studio-select--full-width'), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    toggle() {
+        if (!this.disabled() && !this.loading()) {
+            this.isOpen.update(v => !v);
+            if (this.isOpen()) {
+                this.opened.emit();
+                setTimeout(() => this.focusSearchInput(), 0);
+            }
+            else {
+                this.closed.emit();
+                this.searchQuery.set('');
+            }
+        }
+    }
+    close() {
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+            this.closed.emit();
+            this.searchQuery.set('');
+            this.isTouched.set(true);
+            this.onTouched();
+        }
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        if (this.multiple()) {
+            const current = (this.selectedValue() || []);
+            const isSelected = current.includes(option.value);
+            if (isSelected) {
+                this.selectedValue.set(current.filter(v => v !== option.value));
+            }
+            else {
+                this.selectedValue.set([...current, option.value]);
+            }
+        }
+        else {
+            this.selectedValue.set(option.value);
+            this.close();
+        }
+        this.onChange(this.selectedValue());
+        this.valueChange.emit(this.selectedValue());
+        this.optionSelected.emit(option);
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.selectedValue.set(this.multiple() ? [] : null);
+        this.onChange(this.selectedValue());
+        this.valueChange.emit(this.selectedValue());
+    }
+    isSelected(option) {
+        if (this.multiple()) {
+            const values = this.selectedValue() || [];
+            return values.includes(option.value);
+        }
+        return this.compareValues(option.value, this.selectedValue());
+    }
+    handleSearch(event) {
+        const query = event.target.value;
+        this.searchQuery.set(query);
+        this.searchChange.emit(query);
+    }
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.toggle();
+                }
+                else {
+                    this.highlightNext();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.highlightPrevious();
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.selectHighlighted();
+                }
+                else {
+                    this.toggle();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    highlightNext() {
+        const opts = this.filteredOptions();
+        const current = this.highlightedIndex();
+        this.highlightedIndex.set(Math.min(current + 1, opts.length - 1));
+    }
+    highlightPrevious() {
+        const current = this.highlightedIndex();
+        this.highlightedIndex.set(Math.max(current - 1, 0));
+    }
+    selectHighlighted() {
+        const opts = this.filteredOptions();
+        const index = this.highlightedIndex();
+        if (opts[index]) {
+            this.selectOption(opts[index]);
+        }
+    }
+    compareValues(a, b) {
+        return a === b;
+    }
+    isOptionGroup(item) {
+        return item && 'options' in item && Array.isArray(item.options);
+    }
+    focusSearchInput() {
+        if (this.searchable()) {
+            const searchInput = this.dropdownEl()?.nativeElement.querySelector('input');
+            searchInput?.focus();
+        }
+    }
+    clickOutsideListener;
+    setupClickOutside() {
+        this.clickOutsideListener = (event) => {
+            const target = event.target;
+            const trigger = this.triggerEl()?.nativeElement;
+            const dropdown = this.dropdownEl()?.nativeElement;
+            if (trigger && !trigger.contains(target) && dropdown && !dropdown.contains(target)) {
+                this.close();
+            }
+        };
+        setTimeout(() => {
+            document.addEventListener('click', this.clickOutsideListener);
+        }, 0);
+    }
+    cleanupClickOutside() {
+        if (this.clickOutsideListener) {
+            document.removeEventListener('click', this.clickOutsideListener);
+            this.clickOutsideListener = undefined;
+        }
+    }
+    writeValue(value) {
+        this.selectedValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: SelectComponent, isStandalone: true, selector: "studio-select", inputs: { variantInput: { classPropertyName: "variantInput", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sizeInput: { classPropertyName: "sizeInput", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radiusInput: { classPropertyName: "radiusInput", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", searchChange: "searchChange", opened: "opened", closed: "closed", optionSelected: "optionSelected" }, host: { properties: { "class": "hostClasses()", "attr.data-open": "isOpen()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }, { propertyName: "dropdownEl", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label() && !floatingLabel()) {\n  <label [for]=\"generatedId\" class=\"studio-select__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-select__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-select__control\">\n  @if (prefixIcon()) {\n    <span class=\"studio-select__prefix\">\n      <studio-icon [name]=\"prefixIcon()!\" [size]=\"16\" />\n    </span>\n  }\n\n  @if (label() && floatingLabel()) {\n    <label [for]=\"generatedId\" class=\"studio-select__label--floating\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <button\n    #triggerButton\n    type=\"button\"\n    [id]=\"generatedId\"\n    class=\"studio-select__trigger\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"isFocused.set(true)\"\n    (blur)=\"isFocused.set(false)\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n  >\n    @if (hasValue()) {\n      <span class=\"studio-select__value\">{{ displayValue() }}</span>\n    } @else {\n      <span class=\"studio-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  @if (clearable() && hasValue() && !disabled() && !loading()) {\n    <button\n      type=\"button\"\n      class=\"studio-select__clear\"\n      (click)=\"clear($event)\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n    >\n      <studio-icon name=\"x\" [size]=\"14\" />\n    </button>\n  }\n\n  @if (loading()) {\n    <span class=\"studio-select__loading\">\n      <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n    </span>\n  } @else {\n    <span class=\"studio-select__suffix\">\n      <studio-icon\n        [name]=\"suffixIcon()\"\n        [size]=\"16\"\n      />\n    </span>\n  }\n</div>\n\n@if (isOpen()) {\n  <div\n    #dropdownPanel\n    class=\"studio-select__dropdown\"\n    [attr.data-position]=\"position()\"\n    [style.max-height]=\"maxHeight()\"\n  >\n    @if (searchable()) {\n      <div class=\"studio-select__search\">\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"handleSearch($event)\"\n        />\n      </div>\n    }\n\n    <div class=\"studio-select__options\" role=\"listbox\">\n      @if (filteredOptions().length === 0) {\n        <div class=\"studio-select__empty\">\n          No options found\n        </div>\n      }\n\n      @for (option of filteredOptions(); track option.value; let idx = $index) {\n        <div\n          class=\"studio-select__option\"\n          [class.studio-select__option--selected]=\"isSelected(option)\"\n          [class.studio-select__option--disabled]=\"option.disabled\"\n          [class.studio-select__option--highlighted]=\"highlightedIndex() === idx\"\n          (click)=\"selectOption(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              class=\"studio-select__checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"option.disabled\"\n              tabindex=\"-1\"\n            />\n          }\n\n          @if (option.icon) {\n            <studio-icon [name]=\"option.icon\" [size]=\"18\" class=\"studio-select__option-icon\" />\n          }\n\n          <div class=\"studio-select__option-content\">\n            <div class=\"studio-select__option-label\">\n              {{ option.label }}\n            </div>\n            @if (option.description) {\n              <div class=\"studio-select__option-description\">\n                {{ option.description }}\n              </div>\n            }\n          </div>\n\n          @if (!multiple() && isSelected(option)) {\n            <studio-icon name=\"check\" [size]=\"16\" class=\"studio-select__check-icon\" />\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (hint() && !error()) {\n  <div class=\"studio-select__hint\">{{ hint() }}</div>\n}\n\n@if (error() && errorMessage()) {\n  <div class=\"studio-select__error\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family);position:relative}:host(.studio-select--full-width){width:100%}.studio-select__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-select__label .studio-select__required{color:var(--studio-error);margin-left:.125rem}.studio-select__control{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-select__prefix,.studio-select__suffix{display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary);flex-shrink:0}.studio-select__suffix{transition:var(--studio-transition-fast)}:host(.studio-select--open) .studio-select__suffix{transform:rotate(180deg)}.studio-select__trigger{flex:1;width:100%;display:flex;align-items:center;background:transparent;border:none;padding:0;font-family:inherit;text-align:left;color:var(--studio-text-primary);cursor:pointer;outline:none;transition:var(--studio-transition-fast)}.studio-select__trigger:disabled{cursor:not-allowed;opacity:.6}.studio-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-text-primary)}.studio-select__placeholder{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-text-tertiary)}.studio-select__clear,.studio-select__loading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.studio-select__clear{background:none;border:none;padding:.25rem;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast)}.studio-select__clear:hover{color:var(--studio-text-primary);background:var(--studio-bg-secondary)}.studio-select__clear:active{transform:scale(.95)}.studio-select__loading{color:var(--studio-primary)}.studio-select__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--studio-z-dropdown, 1000);background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-lg);margin-top:.25rem;overflow:hidden;display:flex;flex-direction:column}.studio-select__search{padding:.5rem;border-bottom:1px solid var(--studio-border-primary);flex-shrink:0}.studio-select__search input{width:100%;padding:.5rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);font-family:inherit;font-size:.875rem;color:var(--studio-text-primary);background:var(--studio-bg-primary);outline:none;transition:var(--studio-transition-fast)}.studio-select__search input:focus{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}.studio-select__search input::placeholder{color:var(--studio-text-tertiary)}.studio-select__options{overflow-y:auto;flex:1}.studio-select__option{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;cursor:pointer;transition:var(--studio-transition-fast);color:var(--studio-text-primary)}.studio-select__option:hover{background:var(--studio-bg-secondary)}.studio-select__option--selected{background:var(--studio-primary-bg);color:var(--studio-primary)}.studio-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.studio-select__option input[type=checkbox]{margin:0;cursor:pointer}.studio-select__option-icon{flex-shrink:0;color:var(--studio-text-secondary)}.studio-select__option-content{flex:1;min-width:0}.studio-select__option-label{font-size:.875rem;color:inherit}.studio-select__option-description{font-size:.75rem;color:var(--studio-text-secondary);margin-top:.125rem}.studio-select__empty{padding:1rem;text-align:center;color:var(--studio-text-tertiary);font-size:.875rem}.studio-select__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-select__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}.studio-select__label--floating{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-size:1rem;color:var(--studio-text-tertiary);pointer-events:none;transition:all var(--studio-transition-fast);background:var(--studio-bg-primary);padding:0 .25rem;z-index:1}:host(.studio-select--focused) .studio-select__label--floating,:host(.studio-select--has-value) .studio-select__label--floating{top:0;font-size:.75rem;color:var(--studio-primary)}:host(.studio-select--error) .studio-select__label--floating{color:var(--studio-error)}:host(.studio-select--outline) .studio-select__control{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-select--outline) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){border-color:var(--studio-primary)}:host(.studio-select--outline.studio-select--focused) .studio-select__control{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-select--outline.studio-select--error) .studio-select__control{border-color:var(--studio-error)}:host(.studio-select--outline.studio-select--error) .studio-select__control:hover{border-color:var(--studio-error)}:host(.studio-select--outline.studio-select--error.studio-select--focused) .studio-select__control{box-shadow:0 0 0 3px #ef44441a}:host(.studio-select--outline.studio-select--disabled) .studio-select__control{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-select--filled) .studio-select__control{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-select--filled) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-select--filled.studio-select--focused) .studio-select__control{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-select--filled.studio-select--error) .studio-select__control{border-bottom-color:var(--studio-error)}:host(.studio-select--filled.studio-select--disabled) .studio-select__control{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-select--underline) .studio-select__control{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-select--underline) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-select--underline.studio-select--focused) .studio-select__control{border-bottom:2px solid var(--studio-primary)}:host(.studio-select--underline.studio-select--error) .studio-select__control{border-bottom-color:var(--studio-error)}:host(.studio-select--underline.studio-select--disabled) .studio-select__control{border-bottom-style:dashed;opacity:.6}:host(.studio-select--sm) .studio-select__trigger{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-select--sm) .studio-select__prefix{padding-left:.75rem}:host(.studio-select--sm) .studio-select__suffix,:host(.studio-select--sm) .studio-select__clear,:host(.studio-select--sm) .studio-select__loading{padding-right:.5rem}:host(.studio-select--md) .studio-select__trigger{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-select--md) .studio-select__prefix{padding-left:1rem}:host(.studio-select--md) .studio-select__suffix,:host(.studio-select--md) .studio-select__clear,:host(.studio-select--md) .studio-select__loading{padding-right:.75rem}:host(.studio-select--lg) .studio-select__trigger{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-select--lg) .studio-select__prefix{padding-left:1.25rem}:host(.studio-select--lg) .studio-select__suffix,:host(.studio-select--lg) .studio-select__clear,:host(.studio-select--lg) .studio-select__loading{padding-right:1rem}:host(.studio-select--radius-none) .studio-select__control{border-radius:0}:host(.studio-select--radius-sm) .studio-select__control{border-radius:var(--studio-radius-sm)}:host(.studio-select--radius-md) .studio-select__control{border-radius:var(--studio-radius-md)}:host(.studio-select--radius-lg) .studio-select__control{border-radius:var(--studio-radius-lg)}:host(.studio-select--radius-full) .studio-select__control{border-radius:9999px}:host(.studio-select--filled.studio-select--radius-none) .studio-select__control{border-radius:0}:host(.studio-select--filled.studio-select--radius-sm) .studio-select__control{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-select--filled.studio-select--radius-md) .studio-select__control{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-select--filled.studio-select--radius-lg) .studio-select__control{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-select--filled.studio-select--radius-full) .studio-select__control{border-radius:9999px 9999px 0 0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-select', standalone: true, imports: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-open]': 'isOpen()',
+                    }, template: "@if (label() && !floatingLabel()) {\n  <label [for]=\"generatedId\" class=\"studio-select__label\">\n    {{ label() }}\n    @if (required()) {\n      <span class=\"studio-select__required\">*</span>\n    }\n  </label>\n}\n\n<div class=\"studio-select__control\">\n  @if (prefixIcon()) {\n    <span class=\"studio-select__prefix\">\n      <studio-icon [name]=\"prefixIcon()!\" [size]=\"16\" />\n    </span>\n  }\n\n  @if (label() && floatingLabel()) {\n    <label [for]=\"generatedId\" class=\"studio-select__label--floating\">\n      {{ label() }}\n      @if (required()) {\n        <span class=\"studio-select__required\">*</span>\n      }\n    </label>\n  }\n\n  <button\n    #triggerButton\n    type=\"button\"\n    [id]=\"generatedId\"\n    class=\"studio-select__trigger\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleKeydown($event)\"\n    (focus)=\"isFocused.set(true)\"\n    (blur)=\"isFocused.set(false)\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n  >\n    @if (hasValue()) {\n      <span class=\"studio-select__value\">{{ displayValue() }}</span>\n    } @else {\n      <span class=\"studio-select__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  @if (clearable() && hasValue() && !disabled() && !loading()) {\n    <button\n      type=\"button\"\n      class=\"studio-select__clear\"\n      (click)=\"clear($event)\"\n      aria-label=\"Clear selection\"\n      tabindex=\"-1\"\n    >\n      <studio-icon name=\"x\" [size]=\"14\" />\n    </button>\n  }\n\n  @if (loading()) {\n    <span class=\"studio-select__loading\">\n      <studio-icon name=\"loader-2\" [size]=\"16\" class=\"studio-icon--spin\" />\n    </span>\n  } @else {\n    <span class=\"studio-select__suffix\">\n      <studio-icon\n        [name]=\"suffixIcon()\"\n        [size]=\"16\"\n      />\n    </span>\n  }\n</div>\n\n@if (isOpen()) {\n  <div\n    #dropdownPanel\n    class=\"studio-select__dropdown\"\n    [attr.data-position]=\"position()\"\n    [style.max-height]=\"maxHeight()\"\n  >\n    @if (searchable()) {\n      <div class=\"studio-select__search\">\n        <input\n          type=\"text\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"searchQuery()\"\n          (input)=\"handleSearch($event)\"\n        />\n      </div>\n    }\n\n    <div class=\"studio-select__options\" role=\"listbox\">\n      @if (filteredOptions().length === 0) {\n        <div class=\"studio-select__empty\">\n          No options found\n        </div>\n      }\n\n      @for (option of filteredOptions(); track option.value; let idx = $index) {\n        <div\n          class=\"studio-select__option\"\n          [class.studio-select__option--selected]=\"isSelected(option)\"\n          [class.studio-select__option--disabled]=\"option.disabled\"\n          [class.studio-select__option--highlighted]=\"highlightedIndex() === idx\"\n          (click)=\"selectOption(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n        >\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              class=\"studio-select__checkbox\"\n              [checked]=\"isSelected(option)\"\n              [disabled]=\"option.disabled\"\n              tabindex=\"-1\"\n            />\n          }\n\n          @if (option.icon) {\n            <studio-icon [name]=\"option.icon\" [size]=\"18\" class=\"studio-select__option-icon\" />\n          }\n\n          <div class=\"studio-select__option-content\">\n            <div class=\"studio-select__option-label\">\n              {{ option.label }}\n            </div>\n            @if (option.description) {\n              <div class=\"studio-select__option-description\">\n                {{ option.description }}\n              </div>\n            }\n          </div>\n\n          @if (!multiple() && isSelected(option)) {\n            <studio-icon name=\"check\" [size]=\"16\" class=\"studio-select__check-icon\" />\n          }\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (hint() && !error()) {\n  <div class=\"studio-select__hint\">{{ hint() }}</div>\n}\n\n@if (error() && errorMessage()) {\n  <div class=\"studio-select__error\">{{ errorMessage() }}</div>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:.375rem;font-family:var(--studio-font-family);position:relative}:host(.studio-select--full-width){width:100%}.studio-select__label{display:block;font-size:.875rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary);margin-bottom:.25rem}.studio-select__label .studio-select__required{color:var(--studio-error);margin-left:.125rem}.studio-select__control{position:relative;display:flex;align-items:center;transition:all var(--studio-transition-fast)}.studio-select__prefix,.studio-select__suffix{display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary);flex-shrink:0}.studio-select__suffix{transition:var(--studio-transition-fast)}:host(.studio-select--open) .studio-select__suffix{transform:rotate(180deg)}.studio-select__trigger{flex:1;width:100%;display:flex;align-items:center;background:transparent;border:none;padding:0;font-family:inherit;text-align:left;color:var(--studio-text-primary);cursor:pointer;outline:none;transition:var(--studio-transition-fast)}.studio-select__trigger:disabled{cursor:not-allowed;opacity:.6}.studio-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-text-primary)}.studio-select__placeholder{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--studio-text-tertiary)}.studio-select__clear,.studio-select__loading{display:flex;align-items:center;justify-content:center;flex-shrink:0}.studio-select__clear{background:none;border:none;padding:.25rem;color:var(--studio-text-secondary);cursor:pointer;border-radius:var(--studio-radius-sm);transition:all var(--studio-transition-fast)}.studio-select__clear:hover{color:var(--studio-text-primary);background:var(--studio-bg-secondary)}.studio-select__clear:active{transform:scale(.95)}.studio-select__loading{color:var(--studio-primary)}.studio-select__loading .studio-icon--spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.studio-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:var(--studio-z-dropdown, 1000);background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);box-shadow:var(--studio-shadow-lg);margin-top:.25rem;overflow:hidden;display:flex;flex-direction:column}.studio-select__search{padding:.5rem;border-bottom:1px solid var(--studio-border-primary);flex-shrink:0}.studio-select__search input{width:100%;padding:.5rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-sm);font-family:inherit;font-size:.875rem;color:var(--studio-text-primary);background:var(--studio-bg-primary);outline:none;transition:var(--studio-transition-fast)}.studio-select__search input:focus{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}.studio-select__search input::placeholder{color:var(--studio-text-tertiary)}.studio-select__options{overflow-y:auto;flex:1}.studio-select__option{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;cursor:pointer;transition:var(--studio-transition-fast);color:var(--studio-text-primary)}.studio-select__option:hover{background:var(--studio-bg-secondary)}.studio-select__option--selected{background:var(--studio-primary-bg);color:var(--studio-primary)}.studio-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.studio-select__option input[type=checkbox]{margin:0;cursor:pointer}.studio-select__option-icon{flex-shrink:0;color:var(--studio-text-secondary)}.studio-select__option-content{flex:1;min-width:0}.studio-select__option-label{font-size:.875rem;color:inherit}.studio-select__option-description{font-size:.75rem;color:var(--studio-text-secondary);margin-top:.125rem}.studio-select__empty{padding:1rem;text-align:center;color:var(--studio-text-tertiary);font-size:.875rem}.studio-select__hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-select__error{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--studio-error);line-height:1.4}.studio-select__label--floating{position:absolute;top:50%;left:1rem;transform:translateY(-50%);font-size:1rem;color:var(--studio-text-tertiary);pointer-events:none;transition:all var(--studio-transition-fast);background:var(--studio-bg-primary);padding:0 .25rem;z-index:1}:host(.studio-select--focused) .studio-select__label--floating,:host(.studio-select--has-value) .studio-select__label--floating{top:0;font-size:.75rem;color:var(--studio-primary)}:host(.studio-select--error) .studio-select__label--floating{color:var(--studio-error)}:host(.studio-select--outline) .studio-select__control{border:1px solid var(--studio-border-primary);background:var(--studio-bg-primary);border-radius:var(--studio-radius-md)}:host(.studio-select--outline) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){border-color:var(--studio-primary)}:host(.studio-select--outline.studio-select--focused) .studio-select__control{border-color:var(--studio-primary);box-shadow:0 0 0 3px var(--studio-primary-bg)}:host(.studio-select--outline.studio-select--error) .studio-select__control{border-color:var(--studio-error)}:host(.studio-select--outline.studio-select--error) .studio-select__control:hover{border-color:var(--studio-error)}:host(.studio-select--outline.studio-select--error.studio-select--focused) .studio-select__control{box-shadow:0 0 0 3px #ef44441a}:host(.studio-select--outline.studio-select--disabled) .studio-select__control{background:var(--studio-bg-secondary);border-color:var(--studio-border-secondary)}:host(.studio-select--filled) .studio-select__control{background:var(--studio-bg-secondary);border:none;border-bottom:2px solid var(--studio-border-primary);border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-select--filled) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){background:var(--studio-bg-tertiary)}:host(.studio-select--filled.studio-select--focused) .studio-select__control{border-bottom-color:var(--studio-primary);background:var(--studio-bg-tertiary)}:host(.studio-select--filled.studio-select--error) .studio-select__control{border-bottom-color:var(--studio-error)}:host(.studio-select--filled.studio-select--disabled) .studio-select__control{background:var(--studio-bg-secondary);opacity:.6}:host(.studio-select--underline) .studio-select__control{background:transparent;border:none;border-bottom:1px solid var(--studio-border-primary);border-radius:0}:host(.studio-select--underline) .studio-select__control:hover:not(:has(.studio-select__trigger:disabled)){border-bottom-color:var(--studio-primary)}:host(.studio-select--underline.studio-select--focused) .studio-select__control{border-bottom:2px solid var(--studio-primary)}:host(.studio-select--underline.studio-select--error) .studio-select__control{border-bottom-color:var(--studio-error)}:host(.studio-select--underline.studio-select--disabled) .studio-select__control{border-bottom-style:dashed;opacity:.6}:host(.studio-select--sm) .studio-select__trigger{height:2rem;font-size:.875rem;padding:0 .75rem}:host(.studio-select--sm) .studio-select__prefix{padding-left:.75rem}:host(.studio-select--sm) .studio-select__suffix,:host(.studio-select--sm) .studio-select__clear,:host(.studio-select--sm) .studio-select__loading{padding-right:.5rem}:host(.studio-select--md) .studio-select__trigger{height:2.5rem;font-size:1rem;padding:0 1rem}:host(.studio-select--md) .studio-select__prefix{padding-left:1rem}:host(.studio-select--md) .studio-select__suffix,:host(.studio-select--md) .studio-select__clear,:host(.studio-select--md) .studio-select__loading{padding-right:.75rem}:host(.studio-select--lg) .studio-select__trigger{height:3rem;font-size:1.125rem;padding:0 1.25rem}:host(.studio-select--lg) .studio-select__prefix{padding-left:1.25rem}:host(.studio-select--lg) .studio-select__suffix,:host(.studio-select--lg) .studio-select__clear,:host(.studio-select--lg) .studio-select__loading{padding-right:1rem}:host(.studio-select--radius-none) .studio-select__control{border-radius:0}:host(.studio-select--radius-sm) .studio-select__control{border-radius:var(--studio-radius-sm)}:host(.studio-select--radius-md) .studio-select__control{border-radius:var(--studio-radius-md)}:host(.studio-select--radius-lg) .studio-select__control{border-radius:var(--studio-radius-lg)}:host(.studio-select--radius-full) .studio-select__control{border-radius:9999px}:host(.studio-select--filled.studio-select--radius-none) .studio-select__control{border-radius:0}:host(.studio-select--filled.studio-select--radius-sm) .studio-select__control{border-radius:var(--studio-radius-sm) var(--studio-radius-sm) 0 0}:host(.studio-select--filled.studio-select--radius-md) .studio-select__control{border-radius:var(--studio-radius-md) var(--studio-radius-md) 0 0}:host(.studio-select--filled.studio-select--radius-lg) .studio-select__control{border-radius:var(--studio-radius-lg) var(--studio-radius-lg) 0 0}:host(.studio-select--filled.studio-select--radius-full) .studio-select__control{border-radius:9999px 9999px 0 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerEl: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }], dropdownEl: [{ type: i0.ViewChild, args: ['dropdownPanel', { isSignal: true }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }] } });
+
 /**
  * Toggle switch component with customizable size and color
  *
@@ -2049,6 +2757,433 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Domain-specific components for educational platforms
  */
 
+class MaskEngine {
+    config;
+    tokens;
+    patterns = {
+        '9': /\d/,
+        'A': /[a-zA-Zа-яА-Я]/,
+        '*': /[a-zA-Z0-9]/,
+        '#': /./,
+        'X': /[a-zA-Z0-9а-яА-Я]/,
+    };
+    constructor(config) {
+        this.config = config;
+        this.tokens = this.parsePattern(config.pattern);
+    }
+    process(value, cursorPos) {
+        if (!value) {
+            return {
+                value: '',
+                raw: '',
+                cursor: 0,
+                isComplete: false
+            };
+        }
+        const cleaned = this.extractRaw(value);
+        const formatted = this.applyMask(cleaned);
+        const newCursor = cursorPos !== undefined
+            ? this.calculateCursor(cursorPos, value, formatted)
+            : formatted.length;
+        const displayValue = this.config.guide && this.config.showOnFocus
+            ? this.applyGuide(formatted)
+            : formatted;
+        return {
+            value: displayValue,
+            raw: cleaned,
+            cursor: newCursor,
+            isComplete: this.checkComplete(cleaned)
+        };
+    }
+    getPlaceholder() {
+        if (!this.tokens || this.tokens.length === 0)
+            return '';
+        return this.tokens
+            .map(token => {
+            if (token.type === 'static' && token.char)
+                return token.char;
+            return this.config.placeholder || '_';
+        })
+            .join('');
+    }
+    parsePattern(pattern) {
+        const tokens = [];
+        let i = 0;
+        while (i < pattern.length) {
+            const char = pattern[i];
+            if (char === '\\' && i + 1 < pattern.length) {
+                tokens.push({
+                    type: 'static',
+                    char: pattern[i + 1]
+                });
+                i += 2;
+                continue;
+            }
+            if (char === '?' && tokens.length > 0) {
+                tokens[tokens.length - 1].optional = true;
+                i++;
+                continue;
+            }
+            if (char in this.patterns) {
+                tokens.push({
+                    type: this.getTokenType(char),
+                    pattern: this.patterns[char]
+                });
+                i++;
+            }
+            else {
+                tokens.push({
+                    type: 'static',
+                    char
+                });
+                i++;
+            }
+        }
+        return tokens;
+    }
+    getTokenType(char) {
+        const typeMap = {
+            '9': 'digit',
+            'A': 'letter',
+            '*': 'alphanumeric',
+            '#': 'any',
+            'X': 'mixed'
+        };
+        return typeMap[char] || 'any';
+    }
+    applyMask(raw) {
+        if (!raw || !this.tokens)
+            return '';
+        let result = '';
+        let rawIndex = 0;
+        for (const token of this.tokens) {
+            if (rawIndex >= raw.length) {
+                break;
+            }
+            if (token.type === 'static' && token.char) {
+                result += token.char;
+                if (raw[rawIndex] === token.char) {
+                    rawIndex++;
+                }
+            }
+            else {
+                const char = raw[rawIndex];
+                if (token.pattern?.test(char)) {
+                    result += char;
+                    rawIndex++;
+                }
+                else if (!token.optional) {
+                    break;
+                }
+            }
+        }
+        return result;
+    }
+    extractRaw(value) {
+        if (!value || !this.tokens)
+            return '';
+        const staticChars = this.tokens
+            .filter(t => t.type === 'static' && t.char)
+            .map(t => t.char)
+            .filter(Boolean);
+        return value
+            .split('')
+            .filter(char => !staticChars.includes(char))
+            .join('');
+    }
+    applyGuide(value) {
+        if (!this.tokens || this.tokens.length === 0)
+            return value;
+        const placeholder = this.config.placeholder || '_';
+        let result = value;
+        const currentLength = value.replace(/[^a-zA-Z0-9а-яА-Я]/g, '').length;
+        let addedCount = 0;
+        for (let i = 0; i < this.tokens.length; i++) {
+            const token = this.tokens[i];
+            if (addedCount >= currentLength) {
+                if (token.type === 'static' && token.char) {
+                    result += token.char;
+                }
+                else {
+                    result += placeholder;
+                    addedCount++;
+                }
+            }
+        }
+        return result;
+    }
+    calculateCursor(oldCursor, oldValue, newValue) {
+        const diff = newValue.length - oldValue.length;
+        let newCursor = oldCursor + diff;
+        while (newCursor < newValue.length) {
+            const charAtCursor = newValue[newCursor];
+            const isStatic = this.tokens.some((t, i) => t.type === 'static' && t.char === charAtCursor && i === newCursor);
+            if (!isStatic)
+                break;
+            newCursor++;
+        }
+        return Math.max(0, Math.min(newValue.length, newCursor));
+    }
+    checkComplete(raw) {
+        const requiredTokens = this.tokens.filter(t => t.type !== 'static' && !t.optional);
+        return raw.length >= requiredTokens.length;
+    }
+}
+
+const MASK_PRESETS = {
+    'phone': {
+        pattern: '+7 (999) 999-99-99',
+        placeholder: '_',
+        guide: true
+    },
+    'phone-ru': {
+        pattern: '+7 (999) 999-99-99',
+        placeholder: '_',
+        guide: true
+    },
+    'phone-kz': {
+        pattern: '+7 (999) 999-99-99',
+        placeholder: '_',
+        guide: true
+    },
+    'date': {
+        pattern: '99.99.9999',
+        placeholder: '_',
+        guide: true
+    },
+    'datetime': {
+        pattern: '99.99.9999 99:99',
+        placeholder: '_',
+        guide: true
+    },
+    'time': {
+        pattern: '99:99',
+        placeholder: '_',
+        guide: true
+    },
+    'card': {
+        pattern: '9999 9999 9999 9999',
+        placeholder: 'X',
+        guide: true
+    },
+    'inn': {
+        pattern: '999999999999',
+        placeholder: '_',
+        guide: false
+    },
+    'snils': {
+        pattern: '999-999-999 99',
+        placeholder: '_',
+        guide: true
+    },
+    'passport-ru': {
+        pattern: '99 99 999999',
+        placeholder: '_',
+        guide: true
+    }
+};
+
+class MaskDirective {
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    mask = input('', ...(ngDevMode ? [{ debugName: "mask", alias: 'studioMask',
+            transform: (value) => {
+                if (!value)
+                    return '';
+                if (value in MASK_PRESETS) {
+                    return MASK_PRESETS[value].pattern;
+                }
+                return value;
+            } }] : [{
+            alias: 'studioMask',
+            transform: (value) => {
+                if (!value)
+                    return '';
+                if (value in MASK_PRESETS) {
+                    return MASK_PRESETS[value].pattern;
+                }
+                return value;
+            }
+        }]));
+    maskPlaceholder = input('_', ...(ngDevMode ? [{ debugName: "maskPlaceholder" }] : []));
+    maskGuide = input(true, ...(ngDevMode ? [{ debugName: "maskGuide" }] : []));
+    maskShowOnHover = input(false, ...(ngDevMode ? [{ debugName: "maskShowOnHover" }] : []));
+    maskShowOnFocus = input(true, ...(ngDevMode ? [{ debugName: "maskShowOnFocus" }] : []));
+    maskClearIncomplete = input(false, ...(ngDevMode ? [{ debugName: "maskClearIncomplete" }] : []));
+    maskAutoUnmask = input(false, ...(ngDevMode ? [{ debugName: "maskAutoUnmask" }] : []));
+    config = computed(() => ({
+        pattern: this.mask(),
+        placeholder: this.maskPlaceholder(),
+        guide: this.maskGuide(),
+        showOnHover: this.maskShowOnHover(),
+        showOnFocus: this.maskShowOnFocus(),
+        clearIncomplete: this.maskClearIncomplete(),
+        autoUnmask: this.maskAutoUnmask()
+    }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    engine = signal(null, ...(ngDevMode ? [{ debugName: "engine" }] : []));
+    isComplete = signal(false, ...(ngDevMode ? [{ debugName: "isComplete" }] : []));
+    isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const maskPattern = this.mask();
+            if (!maskPattern)
+                return;
+            const cfg = this.config();
+            const newEngine = new MaskEngine(cfg);
+            this.engine.set(newEngine);
+            this.updatePlaceholder();
+        });
+    }
+    onInput(event) {
+        const eng = this.engine();
+        if (!eng)
+            return;
+        const element = this.el.nativeElement;
+        const cursorPos = element.selectionStart ?? 0;
+        const result = eng.process(element.value, cursorPos);
+        if (element.value !== result.value) {
+            this.renderer.setProperty(element, 'value', result.value);
+            element.setSelectionRange(result.cursor, result.cursor);
+        }
+        this.isComplete.set(result.isComplete);
+        const outputValue = this.config().autoUnmask ? result.raw : result.value;
+        this.onChange(outputValue);
+    }
+    onFocus() {
+        this.isActive.set(true);
+        if (this.maskShowOnFocus() && this.maskGuide()) {
+            const eng = this.engine();
+            if (!eng)
+                return;
+            const element = this.el.nativeElement;
+            if (!element.value) {
+                const result = eng.process('', 0);
+                this.renderer.setProperty(element, 'value', result.value);
+                element.setSelectionRange(0, 0);
+            }
+        }
+    }
+    onBlur() {
+        this.isActive.set(false);
+        this.onTouched();
+        if (this.maskClearIncomplete() && !this.isComplete()) {
+            this.renderer.setProperty(this.el.nativeElement, 'value', '');
+            this.onChange('');
+        }
+    }
+    onPaste(event) {
+        event.preventDefault();
+        const eng = this.engine();
+        if (!eng)
+            return;
+        const pastedText = event.clipboardData?.getData('text') || '';
+        const element = this.el.nativeElement;
+        const cursorPos = element.selectionStart ?? 0;
+        const currentValue = element.value;
+        const before = currentValue.slice(0, cursorPos);
+        const after = currentValue.slice(element.selectionEnd ?? cursorPos);
+        const newValue = before + pastedText + after;
+        const result = eng.process(newValue, cursorPos + pastedText.length);
+        this.renderer.setProperty(element, 'value', result.value);
+        element.setSelectionRange(result.cursor, result.cursor);
+        const outputValue = this.config().autoUnmask ? result.raw : result.value;
+        this.onChange(outputValue);
+    }
+    writeValue(value) {
+        const eng = this.engine();
+        if (!eng)
+            return;
+        if (value) {
+            const result = eng.process(value);
+            this.renderer.setProperty(this.el.nativeElement, 'value', result.value);
+            this.isComplete.set(result.isComplete);
+        }
+        else {
+            this.renderer.setProperty(this.el.nativeElement, 'value', '');
+            this.isComplete.set(false);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        if (!control.value)
+            return null;
+        const complete = this.isComplete();
+        return complete ? null : { maskIncomplete: { value: control.value } };
+    }
+    updatePlaceholder() {
+        if (!this.maskShowOnFocus())
+            return;
+        const eng = this.engine();
+        if (!eng)
+            return;
+        try {
+            const placeholderText = eng.getPlaceholder();
+            if (placeholderText) {
+                this.renderer.setAttribute(this.el.nativeElement, 'placeholder', placeholderText);
+            }
+        }
+        catch (e) {
+            console.warn('Failed to update placeholder:', e);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: MaskDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: MaskDirective, isStandalone: true, selector: "input[studioMask]", inputs: { mask: { classPropertyName: "mask", publicName: "studioMask", isSignal: true, isRequired: false, transformFunction: null }, maskPlaceholder: { classPropertyName: "maskPlaceholder", publicName: "maskPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, maskGuide: { classPropertyName: "maskGuide", publicName: "maskGuide", isSignal: true, isRequired: false, transformFunction: null }, maskShowOnHover: { classPropertyName: "maskShowOnHover", publicName: "maskShowOnHover", isSignal: true, isRequired: false, transformFunction: null }, maskShowOnFocus: { classPropertyName: "maskShowOnFocus", publicName: "maskShowOnFocus", isSignal: true, isRequired: false, transformFunction: null }, maskClearIncomplete: { classPropertyName: "maskClearIncomplete", publicName: "maskClearIncomplete", isSignal: true, isRequired: false, transformFunction: null }, maskAutoUnmask: { classPropertyName: "maskAutoUnmask", publicName: "maskAutoUnmask", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()", "paste": "onPaste($event)" }, properties: { "attr.data-mask-complete": "isComplete()", "attr.data-mask-active": "isActive()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MaskDirective),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MaskDirective),
+                multi: true
+            }
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: MaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[studioMask]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MaskDirective),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MaskDirective),
+                            multi: true
+                        }
+                    ],
+                    host: {
+                        '[attr.data-mask-complete]': 'isComplete()',
+                        '[attr.data-mask-active]': 'isActive()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "studioMask", required: false }] }], maskPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskPlaceholder", required: false }] }], maskGuide: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskGuide", required: false }] }], maskShowOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskShowOnHover", required: false }] }], maskShowOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskShowOnFocus", required: false }] }], maskClearIncomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskClearIncomplete", required: false }] }], maskAutoUnmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskAutoUnmask", required: false }] }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
 /**
  * Public API Surface of @eduboxpro/studio
  */
@@ -2060,5 +3195,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, IconComponent, InputComponent, STUDIO_CONFIG, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, CheckboxComponent, DrawerComponent, DrawerService, IconComponent, InputComponent, MASK_PRESETS, MaskDirective, MaskEngine, STUDIO_CONFIG, SelectComponent, StudioConfigService, SwitchComponent, TextareaComponent, ThemeSwitchComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map