@raintonic/formaui 0.4.0 → 0.9.0

package/fesm2022/raintonic-formaui-services-breakpoint.mjs

@@ -0,0 +1,93 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, PLATFORM_ID, signal, computed, Injectable } from '@angular/core';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+
+/**
+ * Soglie in px (mobile-first min-width).
+ *
+ * Sync con:
+ *   - tokens/core/layout.json (bp.{xs..2xl})
+ *   - lib/styles/partials/_constants.scss ($fui-bp-{xs..2xl})
+ *
+ * Drift detection: vedi consistency test in breakpoint.service.spec.ts.
+ */
+const FUI_BREAKPOINTS = {
+    xs: 480,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+};
+/**
+ * FuiBreakpointService — accesso signal-based ai breakpoint del PRD.
+ *
+ * - `matches(bp)`: Signal<boolean> true se viewport ≥ soglia del bp (semantica
+ *   `@media (min-width: …)`).
+ * - SSR-safe: prima dell'attach al browser tutti i signal sono `false`.
+ */
+class FuiBreakpointService {
+    _destroyRef = inject(DestroyRef);
+    _document = inject(DOCUMENT);
+    _platformId = inject(PLATFORM_ID);
+    _matches = {
+        xs: signal(false),
+        sm: signal(false),
+        md: signal(false),
+        lg: signal(false),
+        xl: signal(false),
+        '2xl': signal(false),
+    };
+    // Ordine mobile-first dal più grande al più piccolo per il computed `active`.
+    static BP_ORDER_DESC = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'];
+    /**
+     * Bp più grande matched mobile-first. `null` se viewport < `xs` (480px) o in SSR.
+     */
+    active = computed(() => {
+        for (const bp of FuiBreakpointService.BP_ORDER_DESC) {
+            if (this._matches[bp]()) {
+                return bp;
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return;
+        }
+        const win = this._document.defaultView;
+        if (!win) {
+            return;
+        }
+        for (const bp of Object.keys(FUI_BREAKPOINTS)) {
+            const mq = win.matchMedia(`(min-width: ${FUI_BREAKPOINTS[bp].toString()}px)`);
+            this._matches[bp].set(mq.matches);
+            const handler = (e) => {
+                this._matches[bp].set(e.matches);
+            };
+            mq.addEventListener('change', handler);
+            this._destroyRef.onDestroy(() => {
+                mq.removeEventListener('change', handler);
+            });
+        }
+    }
+    /**
+     * Signal true se viewport ≥ soglia del bp. Stesso Signal per chiamate ripetute.
+     */
+    matches(bp) {
+        return this._matches[bp].asReadonly();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreakpointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreakpointService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiBreakpointService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FUI_BREAKPOINTS, FuiBreakpointService };
+//# sourceMappingURL=raintonic-formaui-services-breakpoint.mjs.map

package/fesm2022/raintonic-formaui-services-breakpoint.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-services-breakpoint.mjs","sources":["../../../lib/services/breakpoint/breakpoint.service.ts","../../../lib/services/breakpoint/raintonic-formaui-services-breakpoint.ts"],"sourcesContent":["import { computed, DestroyRef, inject, Injectable, PLATFORM_ID, signal, Signal, WritableSignal } from '@angular/core';\r\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\r\n\r\n/** I 6 breakpoint nominali (mobile-first min-width). */\r\nexport type FuiBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\r\n\r\n/**\r\n * Soglie in px (mobile-first min-width).\r\n *\r\n * Sync con:\r\n *   - tokens/core/layout.json (bp.{xs..2xl})\r\n *   - lib/styles/partials/_constants.scss ($fui-bp-{xs..2xl})\r\n *\r\n * Drift detection: vedi consistency test in breakpoint.service.spec.ts.\r\n */\r\nexport const FUI_BREAKPOINTS: Readonly<Record<FuiBreakpoint, number>> = {\r\n  xs: 480,\r\n  sm: 640,\r\n  md: 768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n  '2xl': 1536,\r\n} as const;\r\n\r\n/**\r\n * FuiBreakpointService — accesso signal-based ai breakpoint del PRD.\r\n *\r\n * - `matches(bp)`: Signal<boolean> true se viewport ≥ soglia del bp (semantica\r\n *   `@media (min-width: …)`).\r\n * - SSR-safe: prima dell'attach al browser tutti i signal sono `false`.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiBreakpointService {\r\n  private readonly _destroyRef = inject(DestroyRef);\r\n  private readonly _document = inject(DOCUMENT);\r\n  private readonly _platformId = inject(PLATFORM_ID);\r\n\r\n  private readonly _matches: Record<FuiBreakpoint, WritableSignal<boolean>> = {\r\n    xs: signal(false),\r\n    sm: signal(false),\r\n    md: signal(false),\r\n    lg: signal(false),\r\n    xl: signal(false),\r\n    '2xl': signal(false),\r\n  };\r\n\r\n  // Ordine mobile-first dal più grande al più piccolo per il computed `active`.\r\n  private static readonly BP_ORDER_DESC: readonly FuiBreakpoint[] = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'];\r\n\r\n  /**\r\n   * Bp più grande matched mobile-first. `null` se viewport < `xs` (480px) o in SSR.\r\n   */\r\n  readonly active: Signal<FuiBreakpoint | null> = computed(() => {\r\n    for (const bp of FuiBreakpointService.BP_ORDER_DESC) {\r\n      if (this._matches[bp]()) {\r\n        return bp;\r\n      }\r\n    }\r\n    return null;\r\n  });\r\n\r\n  constructor() {\r\n    if (!isPlatformBrowser(this._platformId)) {\r\n      return;\r\n    }\r\n    const win = this._document.defaultView;\r\n    if (!win) {\r\n      return;\r\n    }\r\n    for (const bp of Object.keys(FUI_BREAKPOINTS) as FuiBreakpoint[]) {\r\n      const mq = win.matchMedia(`(min-width: ${FUI_BREAKPOINTS[bp].toString()}px)`);\r\n      this._matches[bp].set(mq.matches);\r\n      const handler = (e: MediaQueryListEvent): void => {\r\n        this._matches[bp].set(e.matches);\r\n      };\r\n      mq.addEventListener('change', handler);\r\n      this._destroyRef.onDestroy(() => {\r\n        mq.removeEventListener('change', handler);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Signal true se viewport ≥ soglia del bp. Stesso Signal per chiamate ripetute.\r\n   */\r\n  matches(bp: FuiBreakpoint): Signal<boolean> {\r\n    return this._matches[bp].asReadonly();\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAMA;;;;;;;;AAQG;AACI,MAAM,eAAe,GAA4C;AACtE,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,KAAK,EAAE,IAAI;;AAGb;;;;;;AAMG;MAEU,oBAAoB,CAAA;AACd,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,IAAA,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;AAEjC,IAAA,QAAQ,GAAmD;AAC1E,QAAA,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;AACjB,QAAA,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;AACjB,QAAA,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;AACjB,QAAA,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;AACjB,QAAA,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;AACjB,QAAA,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;KACrB;;AAGO,IAAA,OAAgB,aAAa,GAA6B,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAEvG;;AAEG;AACM,IAAA,MAAM,GAAiC,QAAQ,CAAC,MAAK;AAC5D,QAAA,KAAK,MAAM,EAAE,IAAI,oBAAoB,CAAC,aAAa,EAAE;YACnD,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE;AACvB,gBAAA,OAAO,EAAE;YACX;QACF;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,6EAAC;AAEF,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YACxC;QACF;AACA,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW;QACtC,IAAI,CAAC,GAAG,EAAE;YACR;QACF;QACA,KAAK,MAAM,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,eAAe,CAAoB,EAAE;AAChE,YAAA,MAAM,EAAE,GAAG,GAAG,CAAC,UAAU,CAAC,CAAA,YAAA,EAAe,eAAe,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAA,GAAA,CAAK,CAAC;AAC7E,YAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC;AACjC,YAAA,MAAM,OAAO,GAAG,CAAC,CAAsB,KAAU;AAC/C,gBAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;AAClC,YAAA,CAAC;AACD,YAAA,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;AACtC,YAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAK;AAC9B,gBAAA,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;AAC3C,YAAA,CAAC,CAAC;QACJ;IACF;AAEA;;AAEG;AACH,IAAA,OAAO,CAAC,EAAiB,EAAA;QACvB,OAAO,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE;IACvC;uGAvDW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAApB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cADP,MAAM,EAAA,CAAA;;2FACnB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;AC/BlC;;AAEG;;;;"}

package/fesm2022/raintonic-formaui-services-dialog.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, signal, computed, HostListener, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, EnvironmentInjector, Injector, ApplicationRef, TemplateRef, createComponent, Injectable } from '@angular/core';
+import { InjectionToken, inject, ElementRef, signal, computed, HostListener, ViewChild, ChangeDetectionStrategy, Component, Renderer2, output, ViewEncapsulation, EnvironmentInjector, Injector, ApplicationRef, TemplateRef, createComponent, Injectable } from '@angular/core';
 import { Subject, defer } from 'rxjs';
 import { filter, startWith, map } from 'rxjs/operators';
 import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
@@ -15,6 +15,13 @@ const FUI_DIALOG_DATA = new InjectionToken('FuiDialogData');
  * Injection token for the dialog scroll strategy
  */
 const FUI_DIALOG_DEFAULT_OPTIONS = new InjectionToken('FuiDialogDefaultOptions');
+/** Size presets mapped to CSS values */
+const DRAWER_SIZE_VALUES = {
+    sm: '320px',
+    md: '480px',
+    lg: '640px',
+    full: '100%',
+};
 
 /**
  * # FuiDialogRefImpl
@@ -417,7 +424,7 @@ class FuiDialogContainerComponent {
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;outline:0}.fui-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;outline:0;max-height:inherit;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-md);background:var(--fui-surface-00);box-shadow:var(--fui-dialog-box-shadow, var(--fui-shadow-05))}.fui-dialog-content{display:contents}.fui-dialog-enter{animation:fui-dialog-enter var(--fui-duration-moderate-02) var(--fui-ease-entrance)}.fui-dialog-exit{animation:fui-dialog-exit var(--fui-duration-moderate-01) var(--fui-ease-exit)}@keyframes fui-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fui-dialog-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.fui-dialog-enter,.fui-dialog-exit{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;outline:0}.fui-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;outline:0;max-height:inherit;border:1px solid var(--fui-border-default);border-radius:var(--fui-radius-md);background:var(--fui-bg-default);box-shadow:var(--fui-dialog-box-shadow, var(--fui-shadow-xl))}.fui-dialog-content{display:contents}.fui-dialog-enter{animation:fui-dialog-enter var(--fui-duration-moderate) var(--fui-ease-out)}.fui-dialog-exit{animation:fui-dialog-exit var(--fui-duration-base) var(--fui-ease-in)}@keyframes fui-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fui-dialog-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.fui-dialog-enter,.fui-dialog-exit{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogContainerComponent, decorators: [{
             type: Component,
@@ -440,7 +447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'fui-dialog-container-host',
-                    }, styles: [":host{display:block;outline:0}.fui-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;outline:0;max-height:inherit;border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-md);background:var(--fui-surface-00);box-shadow:var(--fui-dialog-box-shadow, var(--fui-shadow-05))}.fui-dialog-content{display:contents}.fui-dialog-enter{animation:fui-dialog-enter var(--fui-duration-moderate-02) var(--fui-ease-entrance)}.fui-dialog-exit{animation:fui-dialog-exit var(--fui-duration-moderate-01) var(--fui-ease-exit)}@keyframes fui-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fui-dialog-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.fui-dialog-enter,.fui-dialog-exit{animation:none}}\n"] }]
+                    }, styles: [":host{display:block;outline:0}.fui-dialog-container{display:flex;flex-direction:column;box-sizing:border-box;overflow:auto;outline:0;max-height:inherit;border:1px solid var(--fui-border-default);border-radius:var(--fui-radius-md);background:var(--fui-bg-default);box-shadow:var(--fui-dialog-box-shadow, var(--fui-shadow-xl))}.fui-dialog-content{display:contents}.fui-dialog-enter{animation:fui-dialog-enter var(--fui-duration-moderate) var(--fui-ease-out)}.fui-dialog-exit{animation:fui-dialog-exit var(--fui-duration-base) var(--fui-ease-in)}@keyframes fui-dialog-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fui-dialog-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.fui-dialog-enter,.fui-dialog-exit{animation:none}}\n"] }]
         }], propDecorators: { _dialogContainer: [{
                 type: ViewChild,
                 args: ['dialogContainer', { static: true }]
@@ -449,6 +456,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+/**
+ * # FuiDialogDrawerContainerComponent
+ *
+ * Internal container component used by `FuiDialogService.openAsDrawer()`. Renders
+ * the drawer chrome (header, content slot, optional footer) with a position-based
+ * slide animation.
+ *
+ * Unlike the standalone `FuiDrawerComponent` (which manages its own backdrop and
+ * fixed positioning), this component delegates backdrop and positioning to the CDK
+ * overlay. The container's host element carries position classes and toggles the
+ * open class to trigger CSS transitions on the child panel — mirroring the original
+ * drawer's animation model.
+ */
+class FuiDialogDrawerContainerComponent {
+    _document = inject(DOCUMENT);
+    _renderer = inject(Renderer2);
+    _elementRef = inject((ElementRef));
+    _drawerPanel;
+    /** Which edge the drawer slides from */
+    position = 'right';
+    title = null;
+    /** Whether to show the close button in the header */
+    showCloseButton = true;
+    /** ARIA label */
+    ariaLabel = null;
+    /** ARIA labelled-by element ID */
+    ariaLabelledBy = null;
+    /** Emitted when the close button is clicked */
+    closed = output();
+    /** Element that had focus before the drawer opened (for restoration) */
+    _previouslyFocusedElement = null;
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this._renderer.addClass(this._elementRef.nativeElement, 'fui-drawer-service--open');
+        });
+        this._trapFocus();
+    }
+    ngOnDestroy() {
+        this._restoreFocus();
+    }
+    /**
+     * Returns the host element (for internal use by DialogService when projecting content).
+     */
+    _getHostElement() {
+        return this._elementRef.nativeElement;
+    }
+    /**
+     * Appends a DOM element to the drawer's content area (for internal use).
+     */
+    _appendToContent(element) {
+        const contentArea = this._elementRef.nativeElement.querySelector('.fui-drawer-service-content');
+        if (contentArea) {
+            this._renderer.appendChild(contentArea, element);
+        }
+    }
+    /**
+     * Handles keydown events for focus trap cycling within the drawer.
+     * Tab loops from last to first focusable element, Shift+Tab from first to last.
+     */
+    _onKeydown(event) {
+        if (event.key === 'Tab') {
+            const focusableElements = this._getFocusableElements();
+            if (focusableElements.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            const firstFocusable = focusableElements[0];
+            const lastFocusable = focusableElements[focusableElements.length - 1];
+            const activeElement = this._document.activeElement;
+            if (event.shiftKey) {
+                if (activeElement === firstFocusable) {
+                    event.preventDefault();
+                    lastFocusable.focus();
+                }
+            }
+            else {
+                if (activeElement === lastFocusable) {
+                    event.preventDefault();
+                    firstFocusable.focus();
+                }
+            }
+        }
+    }
+    /**
+     * Focuses the first tabbable element in the drawer panel.
+     */
+    _trapFocus() {
+        this._previouslyFocusedElement = this._document.activeElement;
+        const focusable = this._getFocusableElements();
+        if (focusable.length > 0) {
+            focusable[0].focus();
+        }
+        else {
+            this._drawerPanel.nativeElement.focus();
+        }
+    }
+    /**
+     * Restores focus to the element that was focused before the drawer opened.
+     */
+    _restoreFocus() {
+        if (this._previouslyFocusedElement && typeof this._previouslyFocusedElement.focus === 'function') {
+            this._previouslyFocusedElement.focus();
+        }
+        this._previouslyFocusedElement = null;
+    }
+    /**
+     * Returns all focusable elements currently visible inside the drawer.
+     */
+    _getFocusableElements() {
+        const selectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+            '[contenteditable="true"]',
+        ].join(',');
+        return Array.from(this._drawerPanel.nativeElement.querySelectorAll(selectors)).filter((el) => el.getClientRects().length > 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDialogDrawerContainerComponent, isStandalone: true, selector: "fui-dialog-drawer-container", outputs: { closed: "closed" }, host: { listeners: { "keydown": "_onKeydown($event)" }, properties: { "class.fui-drawer-service--left": "position === \"left\"", "class.fui-drawer-service--right": "position === \"right\"", "class.fui-drawer-service--top": "position === \"top\"", "class.fui-drawer-service--bottom": "position === \"bottom\"" }, classAttribute: "fui-drawer-service" }, viewQueries: [{ propertyName: "_drawerPanel", first: true, predicate: ["drawerPanel"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  #drawerPanel\r\n  class=\"fui-drawer-service-panel\"\r\n  [attr.role]=\"'dialog'\"\r\n  [attr.aria-modal]=\"true\"\r\n  [attr.aria-label]=\"ariaLabel || title || null\"\r\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n  tabindex=\"-1\"\r\n>\r\n  @if (title || showCloseButton) {\r\n    <div class=\"fui-drawer-service-header\">\r\n      @if (title) {\r\n        <h2 class=\"fui-drawer-service-title\">{{ title }}</h2>\r\n      }\r\n      @if (showCloseButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fui-drawer-service-close\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.aria-label]=\"'Close drawer'\"\r\n        >\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer-service-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer-service-footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer-service{display:block;width:100%;height:100%;outline:0;overflow:hidden}.fui-drawer-service-panel{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--fui-bg-default);transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer-service--right .fui-drawer-service-panel{border-left:1px solid var(--fui-border-default);box-shadow:-4px 0 24px #0000001a;transform:translate(100%)}.fui-drawer-service--left .fui-drawer-service-panel{border-right:1px solid var(--fui-border-default);box-shadow:4px 0 24px #0000001a;transform:translate(-100%)}.fui-drawer-service--top .fui-drawer-service-panel{border-bottom:1px solid var(--fui-border-default);box-shadow:0 4px 24px #0000001a;transform:translateY(-100%)}.fui-drawer-service--bottom .fui-drawer-service-panel{border-top:1px solid var(--fui-border-default);box-shadow:0 -4px 24px #0000001a;transform:translateY(100%)}.fui-drawer-service--open .fui-drawer-service-panel{transform:translate(0)}.fui-drawer-service-header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-6) var(--fui-spacing-7);border-bottom:1px solid var(--fui-border-default);flex-shrink:0}.fui-drawer-service-title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer-service-close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-drawer-service-close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-drawer-service-close:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-drawer-service-content{flex:1;overflow-y:auto;padding:var(--fui-spacing-7)}.fui-drawer-service-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-spacing-6) var(--fui-spacing-7);border-top:1px solid var(--fui-border-default);flex-shrink:0}.fui-drawer-service-footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer-service-panel{transition:none!important}.fui-drawer-service--right .fui-drawer-service-panel,.fui-drawer-service--left .fui-drawer-service-panel,.fui-drawer-service--top .fui-drawer-service-panel,.fui-drawer-service--bottom .fui-drawer-service-panel{transform:translate(0)}.fui-drawer-service-close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDialogDrawerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dialog-drawer-container', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-drawer-service',
+                        '[class.fui-drawer-service--left]': 'position === "left"',
+                        '[class.fui-drawer-service--right]': 'position === "right"',
+                        '[class.fui-drawer-service--top]': 'position === "top"',
+                        '[class.fui-drawer-service--bottom]': 'position === "bottom"',
+                    }, template: "<div\r\n  #drawerPanel\r\n  class=\"fui-drawer-service-panel\"\r\n  [attr.role]=\"'dialog'\"\r\n  [attr.aria-modal]=\"true\"\r\n  [attr.aria-label]=\"ariaLabel || title || null\"\r\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n  tabindex=\"-1\"\r\n>\r\n  @if (title || showCloseButton) {\r\n    <div class=\"fui-drawer-service-header\">\r\n      @if (title) {\r\n        <h2 class=\"fui-drawer-service-title\">{{ title }}</h2>\r\n      }\r\n      @if (showCloseButton) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fui-drawer-service-close\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.aria-label]=\"'Close drawer'\"\r\n        >\r\n          <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"fui-drawer-service-content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <div class=\"fui-drawer-service-footer\">\r\n    <ng-content select=\"[drawerFooter]\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer-service{display:block;width:100%;height:100%;outline:0;overflow:hidden}.fui-drawer-service-panel{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--fui-bg-default);transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-drawer-service--right .fui-drawer-service-panel{border-left:1px solid var(--fui-border-default);box-shadow:-4px 0 24px #0000001a;transform:translate(100%)}.fui-drawer-service--left .fui-drawer-service-panel{border-right:1px solid var(--fui-border-default);box-shadow:4px 0 24px #0000001a;transform:translate(-100%)}.fui-drawer-service--top .fui-drawer-service-panel{border-bottom:1px solid var(--fui-border-default);box-shadow:0 4px 24px #0000001a;transform:translateY(-100%)}.fui-drawer-service--bottom .fui-drawer-service-panel{border-top:1px solid var(--fui-border-default);box-shadow:0 -4px 24px #0000001a;transform:translateY(100%)}.fui-drawer-service--open .fui-drawer-service-panel{transform:translate(0)}.fui-drawer-service-header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-spacing-6) var(--fui-spacing-7);border-bottom:1px solid var(--fui-border-default);flex-shrink:0}.fui-drawer-service-title{font-size:var(--fui-text-md);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer-service-close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-base) var(--fui-ease-in-out),color var(--fui-duration-base) var(--fui-ease-in-out)}.fui-drawer-service-close:hover{background-color:var(--fui-bg-subtle);color:var(--fui-text-primary)}.fui-drawer-service-close:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-drawer-service-content{flex:1;overflow-y:auto;padding:var(--fui-spacing-7)}.fui-drawer-service-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-4);padding:var(--fui-spacing-6) var(--fui-spacing-7);border-top:1px solid var(--fui-border-default);flex-shrink:0}.fui-drawer-service-footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer-service-panel{transition:none!important}.fui-drawer-service--right .fui-drawer-service-panel,.fui-drawer-service--left .fui-drawer-service-panel,.fui-drawer-service--top .fui-drawer-service-panel,.fui-drawer-service--bottom .fui-drawer-service-panel{transform:translate(0)}.fui-drawer-service-close{transition:none}}\n"] }]
+        }], propDecorators: { _drawerPanel: [{
+                type: ViewChild,
+                args: ['drawerPanel', { static: true }]
+            }], closed: [{ type: i0.Output, args: ["closed"] }], _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 class FuiConfirmDialogComponent {
     data = inject(FUI_DIALOG_DATA);
     dialogRef = inject(FuiDialogRef);
@@ -484,11 +631,11 @@ class FuiConfirmDialogComponent {
         this.dialogRef.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: FuiConfirmDialogComponent, isStandalone: true, selector: "fui-confirm-dialog", host: { classAttribute: "fui-confirm-dialog" }, ngImport: i0, template: "<div class=\"fui-confirm-dialog__header\">\r\n  <fui-icon class=\"fui-confirm-dialog__icon fui-confirm-dialog__icon--{{ variant }}\" [name]=\"icon()\" size=\"lg\" />\r\n  <h2 class=\"fui-confirm-dialog__title\" id=\"confirm-dialog-title\">{{ title }}</h2>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__body\" id=\"confirm-dialog-description\">\r\n  <p class=\"fui-confirm-dialog__message\">{{ message }}</p>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__actions\">\r\n  <button fuiButton variant=\"tertiary\" (click)=\"onCancel()\">{{ cancelText }}</button>\r\n  <button fuiButton [variant]=\"confirmButtonVariant()\" (click)=\"onConfirm()\">{{ confirmText }}</button>\r\n</div>\r\n", styles: [".fui-confirm-dialog{display:flex;flex-direction:column;padding:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__header{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);margin-bottom:var(--fui-gap-16, 1rem)}.fui-confirm-dialog__icon{flex-shrink:0}.fui-confirm-dialog__icon--info{color:var(--fui-info)}.fui-confirm-dialog__icon--warning{color:var(--fui-warning)}.fui-confirm-dialog__icon--danger{color:var(--fui-danger)}.fui-confirm-dialog__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-confirm-dialog__body{margin-bottom:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__message{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);line-height:1.5;margin:0}.fui-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--fui-gap-8, .5rem)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: FuiConfirmDialogComponent, isStandalone: true, selector: "fui-confirm-dialog", host: { classAttribute: "fui-confirm-dialog" }, ngImport: i0, template: "<div class=\"fui-confirm-dialog__header\">\r\n  <fui-icon class=\"fui-confirm-dialog__icon fui-confirm-dialog__icon--{{ variant }}\" [name]=\"icon()\" size=\"lg\" />\r\n  <h2 class=\"fui-confirm-dialog__title\" id=\"confirm-dialog-title\">{{ title }}</h2>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__body\" id=\"confirm-dialog-description\">\r\n  <p class=\"fui-confirm-dialog__message\">{{ message }}</p>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__actions\">\r\n  <button fuiButton variant=\"tertiary\" (click)=\"onCancel()\">{{ cancelText }}</button>\r\n  <button fuiButton [variant]=\"confirmButtonVariant()\" (click)=\"onConfirm()\">{{ confirmText }}</button>\r\n</div>\r\n", styles: [".fui-confirm-dialog{display:flex;flex-direction:column;padding:var(--fui-spacing-9, 1.5rem)}.fui-confirm-dialog__header{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem);margin-bottom:var(--fui-spacing-7, 1rem)}.fui-confirm-dialog__icon{flex-shrink:0}.fui-confirm-dialog__icon--info{color:var(--fui-text-info)}.fui-confirm-dialog__icon--warning{color:var(--fui-text-warning)}.fui-confirm-dialog__icon--danger{color:var(--fui-text-error)}.fui-confirm-dialog__title{font-family:var(--fui-font-sans);font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-confirm-dialog__body{margin-bottom:var(--fui-spacing-9, 1.5rem)}.fui-confirm-dialog__message{font-size:var(--fui-text-base);color:var(--fui-text-secondary);line-height:1.5;margin:0}.fui-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--fui-spacing-4, .5rem)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "directive", type: FuiButtonDirective, selector: "button[fuiButton], a[fuiButton]", inputs: ["variant", "size", "disabled", "fullWidth", "loading", "iconOnly", "aria-label", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiConfirmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-confirm-dialog', standalone: true, imports: [FuiIconComponent, FuiButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'fui-confirm-dialog' }, template: "<div class=\"fui-confirm-dialog__header\">\r\n  <fui-icon class=\"fui-confirm-dialog__icon fui-confirm-dialog__icon--{{ variant }}\" [name]=\"icon()\" size=\"lg\" />\r\n  <h2 class=\"fui-confirm-dialog__title\" id=\"confirm-dialog-title\">{{ title }}</h2>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__body\" id=\"confirm-dialog-description\">\r\n  <p class=\"fui-confirm-dialog__message\">{{ message }}</p>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__actions\">\r\n  <button fuiButton variant=\"tertiary\" (click)=\"onCancel()\">{{ cancelText }}</button>\r\n  <button fuiButton [variant]=\"confirmButtonVariant()\" (click)=\"onConfirm()\">{{ confirmText }}</button>\r\n</div>\r\n", styles: [".fui-confirm-dialog{display:flex;flex-direction:column;padding:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__header{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);margin-bottom:var(--fui-gap-16, 1rem)}.fui-confirm-dialog__icon{flex-shrink:0}.fui-confirm-dialog__icon--info{color:var(--fui-info)}.fui-confirm-dialog__icon--warning{color:var(--fui-warning)}.fui-confirm-dialog__icon--danger{color:var(--fui-danger)}.fui-confirm-dialog__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-confirm-dialog__body{margin-bottom:var(--fui-padding-24, 1.5rem)}.fui-confirm-dialog__message{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);line-height:1.5;margin:0}.fui-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--fui-gap-8, .5rem)}\n"] }]
+            args: [{ selector: 'fui-confirm-dialog', standalone: true, imports: [FuiIconComponent, FuiButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'fui-confirm-dialog' }, template: "<div class=\"fui-confirm-dialog__header\">\r\n  <fui-icon class=\"fui-confirm-dialog__icon fui-confirm-dialog__icon--{{ variant }}\" [name]=\"icon()\" size=\"lg\" />\r\n  <h2 class=\"fui-confirm-dialog__title\" id=\"confirm-dialog-title\">{{ title }}</h2>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__body\" id=\"confirm-dialog-description\">\r\n  <p class=\"fui-confirm-dialog__message\">{{ message }}</p>\r\n</div>\r\n\r\n<div class=\"fui-confirm-dialog__actions\">\r\n  <button fuiButton variant=\"tertiary\" (click)=\"onCancel()\">{{ cancelText }}</button>\r\n  <button fuiButton [variant]=\"confirmButtonVariant()\" (click)=\"onConfirm()\">{{ confirmText }}</button>\r\n</div>\r\n", styles: [".fui-confirm-dialog{display:flex;flex-direction:column;padding:var(--fui-spacing-9, 1.5rem)}.fui-confirm-dialog__header{display:flex;align-items:center;gap:var(--fui-spacing-6, .75rem);margin-bottom:var(--fui-spacing-7, 1rem)}.fui-confirm-dialog__icon{flex-shrink:0}.fui-confirm-dialog__icon--info{color:var(--fui-text-info)}.fui-confirm-dialog__icon--warning{color:var(--fui-text-warning)}.fui-confirm-dialog__icon--danger{color:var(--fui-text-error)}.fui-confirm-dialog__title{font-family:var(--fui-font-sans);font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-confirm-dialog__body{margin-bottom:var(--fui-spacing-9, 1.5rem)}.fui-confirm-dialog__message{font-size:var(--fui-text-base);color:var(--fui-text-secondary);line-height:1.5;margin:0}.fui-confirm-dialog__actions{display:flex;justify-content:flex-end;gap:var(--fui-spacing-4, .5rem)}\n"] }]
         }] });
 
 /**
@@ -692,7 +839,20 @@ class FuiDialogService {
         return new FuiDialogRef(overlayRef, config, dialogId);
     }
     _attachComponentContent(container, component, dialogRef, config) {
-        // Create custom injector with dialog data and ref
+        return this._createAndAttachContentComponent(component, dialogRef, config, (el) => {
+            const hostElement = container._getHostElement();
+            const containerElement = hostElement.querySelector('.fui-dialog-container');
+            if (containerElement) {
+                containerElement.appendChild(el);
+            }
+        });
+    }
+    /**
+     * Shared helper: creates a component with dialog/drawer data and ref providers,
+     * attaches it to ApplicationRef for change detection, runs initial CD, and
+     * delegates DOM insertion to the provided callback.
+     */
+    _createAndAttachContentComponent(component, dialogRef, config, appendTo) {
         const providers = [
             { provide: FUI_DIALOG_DATA, useValue: config.data },
             { provide: FuiDialogRef, useValue: dialogRef },
@@ -701,21 +861,14 @@ class FuiDialogService {
             parent: config.injector ?? this._injector,
             providers,
         });
-        // Create the component
         const componentRef = createComponent(component, {
             environmentInjector: this._environmentInjector,
             elementInjector: injector,
         });
         // Attach to ApplicationRef to connect it to Angular's change detection tree
-        // This is crucial for form controls and event bindings to work properly
         this._appRef.attachView(componentRef.hostView);
-        // Append to container
-        const hostElement = container._getHostElement();
-        const containerElement = hostElement.querySelector('.fui-dialog-container');
-        if (containerElement) {
-            containerElement.appendChild(componentRef.location.nativeElement);
-        }
-        // Trigger change detection
+        // Delegate DOM insertion to caller
+        appendTo(componentRef.location.nativeElement);
         componentRef.changeDetectorRef.detectChanges();
         return componentRef;
     }
@@ -750,6 +903,54 @@ class FuiDialogService {
     _getAfterAllClosed() {
         return this._afterAllClosedSubject.asObservable();
     }
+    /**
+     * Opens a component or template as a drawer that slides in from the specified
+     * viewport edge. Built on the same overlay infrastructure as `open()`, but
+     * anchored to the viewport edge with a slide animation instead of a centered modal.
+     *
+     * @param componentOrTemplateRef Component type or TemplateRef to display
+     * @param config Configuration options for the drawer (position, size, etc.)
+     * @returns Reference to the opened drawer (same lifecycle API as a dialog)
+     *
+     * ## Usage
+     * ```typescript
+     * const drawerRef = this.dialog.openAsDrawer(MyPanelComponent, {
+     *   position: 'right',
+     *   size: 'md',
+     *   title: 'Settings'
+     * });
+     * drawerRef.afterClosed().subscribe(result => console.log(result));
+     * ```
+     */
+    openAsDrawer(componentOrTemplateRef, config) {
+        const mergedConfig = this._applyDrawerConfigDefaults(config);
+        const overlayRef = this._createDrawerOverlay(mergedConfig);
+        const drawerContainer = this._attachDrawerContainer(overlayRef, mergedConfig);
+        const dialogRef = this._createDialogRef(overlayRef, drawerContainer, mergedConfig);
+        if (componentOrTemplateRef instanceof TemplateRef) {
+            this._attachTemplateContent(drawerContainer, componentOrTemplateRef, dialogRef);
+        }
+        else {
+            const componentRef = this._attachDrawerComponentContent(drawerContainer, componentOrTemplateRef, dialogRef, mergedConfig);
+            dialogRef.componentInstance = componentRef.instance;
+        }
+        // Listen for drawer close button click
+        const subscription = drawerContainer.closed.subscribe(() => {
+            dialogRef.close();
+            subscription.unsubscribe();
+        });
+        // Track open dialogs
+        this._openDialogs.push(dialogRef);
+        dialogRef.afterClosed.subscribe(() => {
+            this._removeOpenDialog(dialogRef);
+        });
+        // Notify opened
+        requestAnimationFrame(() => {
+            dialogRef._notifyOpened();
+            this._afterOpenedSubject.next(dialogRef);
+        });
+        return dialogRef;
+    }
     /**
      * Opens a confirmation dialog and returns an Observable<boolean>.
      * Resolves to `true` when confirmed, `false` when cancelled, ESC, or backdrop click.
@@ -766,6 +967,103 @@ class FuiDialogService {
         });
         return dialogRef.afterClosed.pipe(map((result) => result === true));
     }
+    // ── Drawer-specific helpers ──
+    _createDrawerOverlay(config) {
+        const overlayConfig = this._getDrawerOverlayConfig(config);
+        return this._overlayService.create(overlayConfig);
+    }
+    _getDrawerOverlayConfig(config) {
+        const position = config.position ?? 'right';
+        const sizeValue = this._resolveDrawerSize(config.size);
+        const isHorizontal = position === 'left' || position === 'right';
+        const positionStrategy = this._overlayService.position().global();
+        // Anchor to viewport edge
+        switch (position) {
+            case 'left':
+                positionStrategy.left('0').top('0');
+                break;
+            case 'right':
+                positionStrategy.right('0').top('0');
+                break;
+            case 'top':
+                positionStrategy.top('0').left('0');
+                break;
+            case 'bottom':
+                positionStrategy.bottom('0').left('0');
+                break;
+        }
+        // Set the drawer dimension (width for left/right, height for top/bottom)
+        if (isHorizontal) {
+            positionStrategy.width(sizeValue);
+            positionStrategy.height('100%');
+        }
+        else {
+            positionStrategy.height(sizeValue);
+            positionStrategy.width('100%');
+        }
+        return {
+            positionStrategy,
+            scrollStrategy: this._overlayService.scrollStrategies.block(),
+            hasBackdrop: config.hasBackdrop ?? true,
+            backdropClass: this._getDrawerBackdropClass(config),
+            backdropClickBehavior: config.disableClose ? 'ignore' : 'close',
+            panelClass: this._getDrawerPanelClass(config),
+            direction: config.direction,
+        };
+    }
+    _attachDrawerContainer(overlayRef, config) {
+        const containerRef = createComponent(FuiDialogDrawerContainerComponent, {
+            environmentInjector: this._environmentInjector,
+        });
+        const instance = containerRef.instance;
+        instance.position = config.position ?? 'right';
+        instance.title = config.title ?? null;
+        instance.showCloseButton = config.showCloseButton ?? true;
+        instance.ariaLabel = config.ariaLabel ?? null;
+        instance.ariaLabelledBy = config.ariaLabelledBy ?? null;
+        containerRef.changeDetectorRef.detectChanges();
+        overlayRef.attach(containerRef);
+        return instance;
+    }
+    _attachDrawerComponentContent(container, component, dialogRef, config) {
+        return this._createAndAttachContentComponent(component, dialogRef, config, (el) => { container._appendToContent(el); });
+    }
+    _resolveDrawerSize(size) {
+        if (!size) {
+            return DRAWER_SIZE_VALUES.md;
+        }
+        return DRAWER_SIZE_VALUES[size] ?? size;
+    }
+    _getDrawerBackdropClass(config) {
+        const baseClass = 'fui-drawer-service-backdrop';
+        const customClasses = config.backdropClass
+            ? Array.isArray(config.backdropClass)
+                ? config.backdropClass
+                : [config.backdropClass]
+            : [];
+        return [baseClass, ...customClasses];
+    }
+    _getDrawerPanelClass(config) {
+        const baseClass = 'fui-drawer-service-panel-container';
+        const customClasses = config.panelClass
+            ? Array.isArray(config.panelClass)
+                ? config.panelClass
+                : [config.panelClass]
+            : [];
+        return [baseClass, ...customClasses];
+    }
+    _applyDrawerConfigDefaults(config) {
+        return {
+            position: 'right',
+            size: 'md',
+            showCloseButton: true,
+            hasBackdrop: true,
+            disableClose: false,
+            restoreFocus: true,
+            ...config,
+        };
+    }
+    // ── End drawer-specific helpers ──
     _applyConfigDefaults(config) {
         return {
             role: 'dialog',
@@ -794,5 +1092,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FUI_DIALOG_DATA, FUI_DIALOG_DEFAULT_OPTIONS, FuiConfirmDialogComponent, FuiDialogContainerComponent, FuiDialogRef, FuiDialogService };
+export { DRAWER_SIZE_VALUES, FUI_DIALOG_DATA, FUI_DIALOG_DEFAULT_OPTIONS, FuiConfirmDialogComponent, FuiDialogContainerComponent, FuiDialogDrawerContainerComponent, FuiDialogRef, FuiDialogService };
 //# sourceMappingURL=raintonic-formaui-services-dialog.mjs.map