@design-factory/angular 21.0.4 → 21.1.0-next.0

package/drawer/README.md

@@ -0,0 +1,54 @@
+# Drawer
+
+## API
+
+```html
+<df-drawer
+  [className]="''"
+  [bodyScroll]="false"
+  [backdrop]="true"
+  [container]="null"
+  [(size)]="300"
+  [resizable]="false"
+  [visible]="false"
+  [keepInDom]="false"
+  [configuration]="'overlay'"
+  [position]="'inline-start'"
+  [focusOnInit]="true"
+  (sizeChange)="onSizeChange($event)"
+  (visibleChange)="onVisibleChange($event)"
+  (minimizedChange)="onMinimizedChange($event)"
+  (maximizedChange)="onMaximizedChange($event)"
+  (resizingChange)="onResizingChange($event)"
+  (minSize)="onMinSize()"
+  (maxSize)="onMaxSize()"
+>
+  Drawer content
+
+  <ng-template dfDrawerHeader>Header content</ng-template>
+  <ng-template dfDrawerBody>Body content</ng-template>
+  <ng-template dfDrawerFooter>Footer content</ng-template>
+</df-drawer>
+```
+
+```ts
+// types
+type DfDrawerPosition = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+type DfDrawerConfiguration = 'overlay' | 'inline';
+
+// programmatic API
+await this.drawer.open(); // Promise<void>
+await this.drawer.close(); // Promise<void>
+```
+
+## ADR
+
+-
+
+## Notes
+
+- Header, body, and footer sections are opt-in via `ng-template[dfDrawerHeader]`, `ng-template[dfDrawerBody]`, and `ng-template[dfDrawerFooter]`. When none are provided, `<ng-content>` is used directly.
+- By default the drawer and backdrop are portalled to `document.body`. Override this with the `container` input.
+- `configuration="inline"` keeps the drawer in the document flow; the surrounding content is pushed rather than overlaid.
+- `keepInDom` preserves the drawer's DOM subtree (and component state) while it is hidden, at the cost of keeping it rendered.
+- `size` is a two-way binding; it updates when the user drags the splitter handle (requires `resizable="true"`).

package/fesm2022/design-factory-angular-drawer.mjs

@@ -1,26 +1,90 @@
-import { createDrawer, createSimpleClassTransition, createNavManager, UseDirective, UseMultiDirective } from '@agnos-ui/angular-headless';
-import { fadeTransition } from '@agnos-ui/core-bootstrap';
+import { createDrawer } from '@agnos-ui/core/components/drawer';
+import { createNavManager } from '@agnos-ui/core/services/navManager';
+import { createCollapseTransition } from '@agnos-ui/core/services/transitions/collapse';
+import { createSimpleClassTransition } from '@agnos-ui/core/services/transitions/simpleClassTransition';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
-import { AgnosWidgetDirective, callWidgetFactory } from '@design-factory/angular/internals';
+import { inject, TemplateRef, Directive, contentChild, computed, input, booleanAttribute, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { AgnosWidgetDirective, callWidgetFactory, UseDirective, UseMultiDirective } from '@design-factory/angular/internals';
 
+const fadeTransition = createSimpleClassTransition({
+    animationPendingClasses: ['df-fade'],
+    animationPendingShowClasses: ['df-show'],
+    showClasses: ['df-show', 'df-fade'],
+    hideClasses: ['df-hidden', 'df-fade']
+});
+const verticalConfig = {
+    dimension: 'height',
+    hideClasses: ['df-collapse-hide'],
+    showClasses: ['df-collapse-show'],
+    animationPendingClasses: ['df-collapse-collapsing']
+};
+const horizontalConfig = {
+    dimension: 'width',
+    hideClasses: ['df-collapse-hide'],
+    showClasses: ['df-collapse-show'],
+    animationPendingClasses: ['df-collapse-collapsing', 'df-collapse-horizontal']
+};
+/**
+ * Marks an `<ng-template>` as drawer header content.
+ */
+class DfDrawerHeaderTemplate {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfDrawerHeaderTemplate, isStandalone: true, selector: "ng-template[dfDrawerHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerHeaderTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfDrawerHeader]'
+                }]
+        }] });
+/**
+ * Marks an `<ng-template>` as drawer body content.
+ */
+class DfDrawerBodyTemplate {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerBodyTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfDrawerBodyTemplate, isStandalone: true, selector: "ng-template[dfDrawerBody]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerBodyTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfDrawerBody]'
+                }]
+        }] });
+/**
+ * Marks an `<ng-template>` as drawer footer content.
+ */
+class DfDrawerFooterTemplate {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfDrawerFooterTemplate, isStandalone: true, selector: "ng-template[dfDrawerFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawerFooterTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[dfDrawerFooter]'
+                }]
+        }] });
 /**
  * Enables users to show contextual content via a sliding panel from any screen edge.
  * @experimental
  */
-class DfDrawerComponent extends AgnosWidgetDirective {
+class DfDrawer extends AgnosWidgetDirective {
     constructor() {
         const widget = callWidgetFactory(createDrawer, {
             defaultConfig: {
-                className: 'inline-start',
                 bodyScroll: false,
                 backdrop: true,
-                transition: createSimpleClassTransition({
-                    showClasses: ['show']
-                }),
-                verticalTransition: createSimpleClassTransition({
-                    showClasses: ['show']
-                }),
+                transition: createCollapseTransition(horizontalConfig),
+                verticalTransition: createCollapseTransition(verticalConfig),
                 backdropTransition: fadeTransition
             },
             events: {
@@ -43,6 +107,10 @@ class DfDrawerComponent extends AgnosWidgetDirective {
             }
         });
         super(widget);
+        this.headerTemplate = contentChild(DfDrawerHeaderTemplate, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+        this.bodyTemplate = contentChild(DfDrawerBodyTemplate, ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
+        this.footerTemplate = contentChild(DfDrawerFooterTemplate, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+        this.hasSectionTemplates = computed(() => !!this.headerTemplate() || !!this.bodyTemplate() || !!this.footerTemplate(), ...(ngDevMode ? [{ debugName: "hasSectionTemplates" }] : []));
         /**
          * CSS classes to be applied on the widget main container
          *
@@ -94,9 +162,23 @@ class DfDrawerComponent extends AgnosWidgetDirective {
          * If `true`, the drawer element is kept in the DOM when it is not visible.
          * This can be useful to preserve the state of the drawer content when it is hidden.
          *
-         * @defaultValue `true`
+         * @defaultValue `false`
+         */
+        this.keepInDom = input(false, { ...(ngDevMode ? { debugName: "keepInDom" } : {}), transform: booleanAttribute });
+        /**
+         * The display configuration of the drawer.
+         * - `'overlay'` (default): the drawer overlays the page content with a backdrop.
+         * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.
+         *
+         * @defaultValue `'overlay'`
+         */
+        this.configuration = input('overlay', ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        /**
+         * The position of the drawer on the screen.
+         *
+         * @defaultValue `'inline-start'`
          */
-        this.keepInDom = input(true, { ...(ngDevMode ? { debugName: "keepInDom" } : {}), transform: booleanAttribute });
+        this.position = input('inline-start', ...(ngDevMode ? [{ debugName: "position" }] : []));
         /**
          * An event emitted when the width is changed.
          *
@@ -174,120 +256,173 @@ class DfDrawerComponent extends AgnosWidgetDirective {
     }
     /**
      * Trigger the opening of the drawer.
+     *
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.
+     *
+     * @returns A promise that resolves once the opening transition has finished.
      */
-    open() {
-        this._agnosWidget.api.open();
+    open(animated) {
+        return this.api.open(animated);
     }
     /**
      * Trigger the closing of the drawer.
+     *
+     * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.
+     *
+     * @returns A promise that resolves once the closing transition has finished.
      */
-    close() {
-        this._agnosWidget.api.close();
+    close(animated) {
+        return this.api.close(animated);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfDrawerComponent, isStandalone: true, selector: "df-drawer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, bodyScroll: { classPropertyName: "bodyScroll", publicName: "bodyScroll", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, keepInDom: { classPropertyName: "keepInDom", publicName: "keepInDom", isSignal: true, isRequired: false, transformFunction: null }, focusOnInit: { classPropertyName: "focusOnInit", publicName: "focusOnInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", sizeChange: "sizeChange", visibleChange: "visibleChange", minimizedChange: "minimizedChange", maximizedChange: "maximizedChange", resizingChange: "resizingChange", minSize: "minSize", maxSize: "maxSize" }, usesInheritance: true, ngImport: i0, template: `
-    @if (!_agnosWidget.state.hidden() || keepInDom()) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfDrawer, isStandalone: true, selector: "df-drawer", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, bodyScroll: { classPropertyName: "bodyScroll", publicName: "bodyScroll", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, keepInDom: { classPropertyName: "keepInDom", publicName: "keepInDom", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, focusOnInit: { classPropertyName: "focusOnInit", publicName: "focusOnInit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { size: "sizeChange", sizeChange: "sizeChange", visibleChange: "visibleChange", minimizedChange: "minimizedChange", maximizedChange: "maximizedChange", resizingChange: "resizingChange", minSize: "minSize", maxSize: "maxSize" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: DfDrawerHeaderTemplate, descendants: true, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: DfDrawerBodyTemplate, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: DfDrawerFooterTemplate, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @let isHidden = state.hidden();
+    @let backdropHidden = state.backdropHidden();
+    @if (!isHidden || keepInDom()) {
+      @let isVertical = state.isVertical();
+      @let drawerSize = size();
       <div
         class="df-drawer"
-        [class]="_agnosWidget.state.className()"
-        [class.show]="_agnosWidget.state.visible()"
-        [auUseMulti]="[_agnosWidget.directives.drawerPortalDirective, _agnosWidget.directives.drawerDirective]"
-        [style.--df-drawer-size]="size() !== null ? size() + 'px' : ''"
+        [class]="state.className()"
+        [dfUseMulti]="[directives.drawerPortalDirective, directives.drawerDirective]"
+        [style.--df-drawer-size]="drawerSize !== null ? drawerSize + 'px' : ''"
       >
-        <ng-content />
-        @if (_agnosWidget.state.resizable()) {
+        <ng-template #defaultBodyTemplate>
+          <ng-content />
+        </ng-template>
+        @if (hasSectionTemplates()) {
+          @if (headerTemplate(); as header) {
+            <div class="df-drawer-header">
+              <ng-template [ngTemplateOutlet]="header.templateRef" />
+            </div>
+          }
+          <div class="df-drawer-body">
+            @if (bodyTemplate(); as body) {
+              <ng-template [ngTemplateOutlet]="body.templateRef" />
+            } @else {
+              <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
+            }
+          </div>
+          @if (footerTemplate(); as footer) {
+            <div class="df-drawer-footer">
+              <ng-template [ngTemplateOutlet]="footer.templateRef" />
+            </div>
+          }
+        } @else {
+          <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
+        }
+        @if (state.resizable()) {
           <div
             class="df-drawer-splitter"
             tabindex="-1"
-            [auUse]="_agnosWidget.directives.splitterDirective"
-            [style.align-items]="!_agnosWidget.state.isVertical() ? 'center' : undefined"
-            [style.justify-content]="_agnosWidget.state.isVertical() ? 'center' : undefined"
+            [dfUse]="directives.splitterDirective"
+            [style.align-items]="!isVertical ? 'center' : undefined"
+            [style.justify-content]="isVertical ? 'center' : undefined"
           >
             <ng-content select="df-drawer-splitter-content">
               <button
                 #splitterHandle
                 class="btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle"
                 [class]="{
-                  'fa-grip-lines-vertical': !_agnosWidget.state.isVertical(),
-                  'fa-grip-lines': _agnosWidget.state.isVertical(),
-                  'df-btn-outline-neutral-mirror': !_agnosWidget.state.backdropHidden(),
-                  'btn-outline-primary': _agnosWidget.state.backdropHidden()
+                  'fa-grip-lines-vertical': !isVertical,
+                  'fa-grip-lines': isVertical,
+                  'df-btn-outline-neutral-mirror': !backdropHidden,
+                  'btn-outline-primary': backdropHidden
                 }"
                 i18n-aria-label="@@df.drawer.resize.ariaLabel"
                 aria-label="Resize drawer"
-                [auUse]="[navManager.directive, navManagerConfig]"
+                [dfUse]="[navManager.directive, navManagerConfig]"
               ></button>
             </ng-content>
           </div>
         }
       </div>
     }
-    @if (!_agnosWidget.state.backdropHidden()) {
+    @if (!backdropHidden) {
       <div
         class="df-drawer-backdrop"
-        [class.show]="_agnosWidget.state.visible()"
-        [auUseMulti]="[_agnosWidget.directives.backdropPortalDirective, _agnosWidget.directives.backdropDirective]"
+        [dfUseMulti]="[directives.backdropPortalDirective, directives.backdropDirective]"
       ></div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: UseDirective, selector: "[auUse]", inputs: ["auUse"] }, { kind: "directive", type: UseMultiDirective, selector: "[auUseMulti]", inputs: ["auUseMulti"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".df-fade{transition:opacity .15s linear}@media(prefers-reduced-motion:reduce){.df-fade{transition:none}}.df-fade:not(.df-show){opacity:0}.df-hidden{display:none}.df-drawer{--df-drawer-z-index: 2010;--df-drawer-size: max-content;--df-drawer-min-size: 0;--df-drawer-max-size: 100vw;display:flex;flex-direction:column;width:100%;min-width:0;max-width:none;height:var(--df-drawer-size);min-height:var(--df-drawer-min-size);max-height:var(--df-drawer-max-size)}.df-drawer .df-drawer-header{display:flex;padding:var(--df-spacing-6) var(--df-spacing-4) var(--df-spacing-5) var(--df-spacing-6);border-block-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer .df-drawer-body{padding:var(--df-spacing-6) var(--df-spacing-6) 0}.df-drawer .df-drawer-footer{display:flex;justify-content:end;padding:var(--df-spacing-6);margin-top:auto;flex-wrap:wrap}.df-drawer.df-inline-start,.df-drawer.df-inline-end{width:var(--df-drawer-size);min-width:var(--df-drawer-min-size);max-width:var(--df-drawer-max-size);height:100%;min-height:0;max-height:none}.df-drawer{background-color:var(--df-color-inert-neutral-main-background);z-index:var(--df-drawer-z-index);position:fixed}.df-drawer.df-inline-start{inset-block:0;inset-inline-start:0;border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-inline-end{inset-block:0;inset-inline-end:0;border-inline-start:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-inline-end .df-drawer-splitter{inset-inline-end:auto;inset-inline-start:-32px}.df-drawer.df-block-start{inset-inline:0;inset-block-start:0;border-block-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-block-start .df-drawer-splitter{inset-block-start:auto;cursor:ns-resize}.df-drawer.df-block-start .df-drawer-splitter .df-drawer-splitter-handle{cursor:ns-resize}.df-drawer.df-block-end{inset-inline:0;inset-block-end:0;border-block-start:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-block-end .df-drawer-splitter{inset-block-end:auto;cursor:ns-resize;inset-block-start:-32px}.df-drawer.df-block-end .df-drawer-splitter .df-drawer-splitter-handle{cursor:ns-resize}.df-drawer .df-drawer-splitter{display:flex;position:absolute;inset-block:0;inset-inline-end:-4px;width:8px;cursor:ew-resize;background:transparent}.df-drawer .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;border:none;cursor:ew-resize}.df-drawer.df-block-start .df-drawer-splitter,.df-drawer.df-block-end .df-drawer-splitter{inset-inline:0;width:auto;height:8px;cursor:ns-resize}.df-drawer.df-collapse-hide{display:none}.df-drawer.df-collapse-collapsing{min-width:0;min-height:0;height:0;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-drawer.df-collapse-collapsing{transition:none}}.df-drawer.df-collapse-collapsing.df-collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media(prefers-reduced-motion:reduce){.df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}}@media(max-width:576px){.df-drawer.df-inline-start,.df-drawer.df-inline-end{width:100dvw;min-width:100dvw;max-width:100dvw}.df-drawer.df-block-start,.df-drawer.df-block-end{height:100dvh;min-height:100dvh;max-height:100dvh}}.df-drawer-backdrop{--df-drawer-backdrop-z-index: 2000;--df-drawer-backdrop-opacity: .9;position:fixed;inset:0;background-color:var(--df-color-backdrop-background);z-index:var(--df-drawer-backdrop-z-index)}.df-drawer-backdrop.df-show{opacity:var(--df-drawer-backdrop-opacity);pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: UseDirective, selector: "[dfUse]", inputs: ["dfUse"] }, { kind: "directive", type: UseMultiDirective, selector: "[dfUseMulti]", inputs: ["dfUseMulti"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawer, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'df-drawer',
-                    imports: [UseDirective, UseMultiDirective],
-                    template: `
-    @if (!_agnosWidget.state.hidden() || keepInDom()) {
+            args: [{ selector: 'df-drawer', imports: [NgTemplateOutlet, UseDirective, UseMultiDirective], template: `
+    @let isHidden = state.hidden();
+    @let backdropHidden = state.backdropHidden();
+    @if (!isHidden || keepInDom()) {
+      @let isVertical = state.isVertical();
+      @let drawerSize = size();
       <div
         class="df-drawer"
-        [class]="_agnosWidget.state.className()"
-        [class.show]="_agnosWidget.state.visible()"
-        [auUseMulti]="[_agnosWidget.directives.drawerPortalDirective, _agnosWidget.directives.drawerDirective]"
-        [style.--df-drawer-size]="size() !== null ? size() + 'px' : ''"
+        [class]="state.className()"
+        [dfUseMulti]="[directives.drawerPortalDirective, directives.drawerDirective]"
+        [style.--df-drawer-size]="drawerSize !== null ? drawerSize + 'px' : ''"
       >
-        <ng-content />
-        @if (_agnosWidget.state.resizable()) {
+        <ng-template #defaultBodyTemplate>
+          <ng-content />
+        </ng-template>
+        @if (hasSectionTemplates()) {
+          @if (headerTemplate(); as header) {
+            <div class="df-drawer-header">
+              <ng-template [ngTemplateOutlet]="header.templateRef" />
+            </div>
+          }
+          <div class="df-drawer-body">
+            @if (bodyTemplate(); as body) {
+              <ng-template [ngTemplateOutlet]="body.templateRef" />
+            } @else {
+              <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
+            }
+          </div>
+          @if (footerTemplate(); as footer) {
+            <div class="df-drawer-footer">
+              <ng-template [ngTemplateOutlet]="footer.templateRef" />
+            </div>
+          }
+        } @else {
+          <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
+        }
+        @if (state.resizable()) {
           <div
             class="df-drawer-splitter"
             tabindex="-1"
-            [auUse]="_agnosWidget.directives.splitterDirective"
-            [style.align-items]="!_agnosWidget.state.isVertical() ? 'center' : undefined"
-            [style.justify-content]="_agnosWidget.state.isVertical() ? 'center' : undefined"
+            [dfUse]="directives.splitterDirective"
+            [style.align-items]="!isVertical ? 'center' : undefined"
+            [style.justify-content]="isVertical ? 'center' : undefined"
           >
             <ng-content select="df-drawer-splitter-content">
               <button
                 #splitterHandle
                 class="btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle"
                 [class]="{
-                  'fa-grip-lines-vertical': !_agnosWidget.state.isVertical(),
-                  'fa-grip-lines': _agnosWidget.state.isVertical(),
-                  'df-btn-outline-neutral-mirror': !_agnosWidget.state.backdropHidden(),
-                  'btn-outline-primary': _agnosWidget.state.backdropHidden()
+                  'fa-grip-lines-vertical': !isVertical,
+                  'fa-grip-lines': isVertical,
+                  'df-btn-outline-neutral-mirror': !backdropHidden,
+                  'btn-outline-primary': backdropHidden
                 }"
                 i18n-aria-label="@@df.drawer.resize.ariaLabel"
                 aria-label="Resize drawer"
-                [auUse]="[navManager.directive, navManagerConfig]"
+                [dfUse]="[navManager.directive, navManagerConfig]"
               ></button>
             </ng-content>
           </div>
         }
       </div>
     }
-    @if (!_agnosWidget.state.backdropHidden()) {
+    @if (!backdropHidden) {
       <div
         class="df-drawer-backdrop"
-        [class.show]="_agnosWidget.state.visible()"
-        [auUseMulti]="[_agnosWidget.directives.backdropPortalDirective, _agnosWidget.directives.backdropDirective]"
+        [dfUseMulti]="[directives.backdropPortalDirective, directives.backdropDirective]"
       ></div>
     }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], keepInDom: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInDom", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], minimizedChange: [{ type: i0.Output, args: ["minimizedChange"] }], maximizedChange: [{ type: i0.Output, args: ["maximizedChange"] }], resizingChange: [{ type: i0.Output, args: ["resizingChange"] }], focusOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnInit", required: false }] }], minSize: [{ type: i0.Output, args: ["minSize"] }], maxSize: [{ type: i0.Output, args: ["maxSize"] }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".df-fade{transition:opacity .15s linear}@media(prefers-reduced-motion:reduce){.df-fade{transition:none}}.df-fade:not(.df-show){opacity:0}.df-hidden{display:none}.df-drawer{--df-drawer-z-index: 2010;--df-drawer-size: max-content;--df-drawer-min-size: 0;--df-drawer-max-size: 100vw;display:flex;flex-direction:column;width:100%;min-width:0;max-width:none;height:var(--df-drawer-size);min-height:var(--df-drawer-min-size);max-height:var(--df-drawer-max-size)}.df-drawer .df-drawer-header{display:flex;padding:var(--df-spacing-6) var(--df-spacing-4) var(--df-spacing-5) var(--df-spacing-6);border-block-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer .df-drawer-body{padding:var(--df-spacing-6) var(--df-spacing-6) 0}.df-drawer .df-drawer-footer{display:flex;justify-content:end;padding:var(--df-spacing-6);margin-top:auto;flex-wrap:wrap}.df-drawer.df-inline-start,.df-drawer.df-inline-end{width:var(--df-drawer-size);min-width:var(--df-drawer-min-size);max-width:var(--df-drawer-max-size);height:100%;min-height:0;max-height:none}.df-drawer{background-color:var(--df-color-inert-neutral-main-background);z-index:var(--df-drawer-z-index);position:fixed}.df-drawer.df-inline-start{inset-block:0;inset-inline-start:0;border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-inline-end{inset-block:0;inset-inline-end:0;border-inline-start:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-inline-end .df-drawer-splitter{inset-inline-end:auto;inset-inline-start:-32px}.df-drawer.df-block-start{inset-inline:0;inset-block-start:0;border-block-end:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-block-start .df-drawer-splitter{inset-block-start:auto;cursor:ns-resize}.df-drawer.df-block-start .df-drawer-splitter .df-drawer-splitter-handle{cursor:ns-resize}.df-drawer.df-block-end{inset-inline:0;inset-block-end:0;border-block-start:1px solid var(--df-color-inert-neutral-main-border)}.df-drawer.df-block-end .df-drawer-splitter{inset-block-end:auto;cursor:ns-resize;inset-block-start:-32px}.df-drawer.df-block-end .df-drawer-splitter .df-drawer-splitter-handle{cursor:ns-resize}.df-drawer .df-drawer-splitter{display:flex;position:absolute;inset-block:0;inset-inline-end:-4px;width:8px;cursor:ew-resize;background:transparent}.df-drawer .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;border:none;cursor:ew-resize}.df-drawer.df-block-start .df-drawer-splitter,.df-drawer.df-block-end .df-drawer-splitter{inset-inline:0;width:auto;height:8px;cursor:ns-resize}.df-drawer.df-collapse-hide{display:none}.df-drawer.df-collapse-collapsing{min-width:0;min-height:0;height:0;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion:reduce){.df-drawer.df-collapse-collapsing{transition:none}}.df-drawer.df-collapse-collapsing.df-collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media(prefers-reduced-motion:reduce){.df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}}@media(max-width:576px){.df-drawer.df-inline-start,.df-drawer.df-inline-end{width:100dvw;min-width:100dvw;max-width:100dvw}.df-drawer.df-block-start,.df-drawer.df-block-end{height:100dvh;min-height:100dvh;max-height:100dvh}}.df-drawer-backdrop{--df-drawer-backdrop-z-index: 2000;--df-drawer-backdrop-opacity: .9;position:fixed;inset:0;background-color:var(--df-color-backdrop-background);z-index:var(--df-drawer-backdrop-z-index)}.df-drawer-backdrop.df-show{opacity:var(--df-drawer-backdrop-opacity);pointer-events:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerHeaderTemplate), { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerBodyTemplate), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerFooterTemplate), { isSignal: true }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], keepInDom: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepInDom", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], minimizedChange: [{ type: i0.Output, args: ["minimizedChange"] }], maximizedChange: [{ type: i0.Output, args: ["maximizedChange"] }], resizingChange: [{ type: i0.Output, args: ["resizingChange"] }], focusOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnInit", required: false }] }], minSize: [{ type: i0.Output, args: ["minSize"] }], maxSize: [{ type: i0.Output, args: ["maxSize"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DfDrawerComponent };
+export { DfDrawer, DfDrawerBodyTemplate, DfDrawerFooterTemplate, DfDrawerHeaderTemplate };
 //# sourceMappingURL=design-factory-angular-drawer.mjs.map

package/fesm2022/design-factory-angular-drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-factory-angular-drawer.mjs","sources":["../../drawer/drawer.ts","../../drawer/design-factory-angular-drawer.ts"],"sourcesContent":["import type { DrawerWidget, NavManagerItemConfig } from '@agnos-ui/angular-headless';\nimport {\n  createDrawer,\n  createNavManager,\n  createSimpleClassTransition,\n  UseDirective,\n  UseMultiDirective\n} from '@agnos-ui/angular-headless';\nimport { fadeTransition } from '@agnos-ui/core-bootstrap';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { AgnosWidgetDirective, callWidgetFactory } from '@design-factory/angular/internals';\n\n/**\n * Possible values for the drawer positions.\n */\nexport type DrawerPositions = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';\n\n/**\n * Enables users to show contextual content via a sliding panel from any screen edge.\n * @experimental\n */\n@Component({\n  selector: 'df-drawer',\n  imports: [UseDirective, UseMultiDirective],\n  template: `\n    @if (!_agnosWidget.state.hidden() || keepInDom()) {\n      <div\n        class=\"df-drawer\"\n        [class]=\"_agnosWidget.state.className()\"\n        [class.show]=\"_agnosWidget.state.visible()\"\n        [auUseMulti]=\"[_agnosWidget.directives.drawerPortalDirective, _agnosWidget.directives.drawerDirective]\"\n        [style.--df-drawer-size]=\"size() !== null ? size() + 'px' : ''\"\n      >\n        <ng-content />\n        @if (_agnosWidget.state.resizable()) {\n          <div\n            class=\"df-drawer-splitter\"\n            tabindex=\"-1\"\n            [auUse]=\"_agnosWidget.directives.splitterDirective\"\n            [style.align-items]=\"!_agnosWidget.state.isVertical() ? 'center' : undefined\"\n            [style.justify-content]=\"_agnosWidget.state.isVertical() ? 'center' : undefined\"\n          >\n            <ng-content select=\"df-drawer-splitter-content\">\n              <button\n                #splitterHandle\n                class=\"btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle\"\n                [class]=\"{\n                  'fa-grip-lines-vertical': !_agnosWidget.state.isVertical(),\n                  'fa-grip-lines': _agnosWidget.state.isVertical(),\n                  'df-btn-outline-neutral-mirror': !_agnosWidget.state.backdropHidden(),\n                  'btn-outline-primary': _agnosWidget.state.backdropHidden()\n                }\"\n                i18n-aria-label=\"@@df.drawer.resize.ariaLabel\"\n                aria-label=\"Resize drawer\"\n                [auUse]=\"[navManager.directive, navManagerConfig]\"\n              ></button>\n            </ng-content>\n          </div>\n        }\n      </div>\n    }\n    @if (!_agnosWidget.state.backdropHidden()) {\n      <div\n        class=\"df-drawer-backdrop\"\n        [class.show]=\"_agnosWidget.state.visible()\"\n        [auUseMulti]=\"[_agnosWidget.directives.backdropPortalDirective, _agnosWidget.directives.backdropDirective]\"\n      ></div>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DfDrawerComponent extends AgnosWidgetDirective<DrawerWidget> {\n  /**\n   * CSS classes to be applied on the widget main container\n   *\n   * @defaultValue ``\n   */\n  readonly className = input<string>('');\n  /**\n   * If `true` allows body scrolling when the drawer is open.\n   *\n   * @defaultValue `false`\n   */\n  readonly bodyScroll = input(false, { transform: booleanAttribute });\n  /**\n   * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable\n   *\n   * @defaultValue `true`\n   */\n  readonly backdrop = input(true, { transform: booleanAttribute });\n  /**\n   * Which element should contain the drawer and backdrop DOM elements.\n   * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.\n   * Otherwise, they stay where the widget is located.\n   *\n   * @defaultValue\n   * ```ts\n   * typeof window !== 'undefined' ? document.body : null\n   * ```\n   */\n  readonly container = input<HTMLElement | null>(null);\n  /**\n   * The size of the drawer in pixels.\n   *\n   * @defaultValue `300`\n   */\n  readonly size = model<number | null>(300);\n  /**\n   * If `true`, the drawer can be resized by the user.\n   *\n   * @defaultValue `false`\n   */\n  readonly resizable = input(false, { transform: booleanAttribute });\n  /**\n   * If `true`, the drawer is shown; otherwise, it is hidden.\n   *\n   * @defaultValue `false`\n   */\n  readonly visible = input(false, { transform: booleanAttribute });\n\n  /**\n   * If `true`, the drawer element is kept in the DOM when it is not visible.\n   * This can be useful to preserve the state of the drawer content when it is hidden.\n   *\n   * @defaultValue `true`\n   */\n  readonly keepInDom = input(true, { transform: booleanAttribute });\n\n  /**\n   * An event emitted when the width is changed.\n   *\n   * Event payload is equal to the newly selected width.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly sizeChange = output<number | null>();\n  /**\n   * Event to be triggered when the visible property changes.\n   *\n   * @param visible - new value of the visible propery\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly visibleChange = output<boolean>();\n\n  /**\n   * Event to be triggered when the minimized state changes.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly minimizedChange = output<boolean>();\n\n  /**\n   *  Event to be triggered when the maximized state changes.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly maximizedChange = output<boolean>();\n\n  /**\n   * Event to be triggered when the user start or stop moving the drawer.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly resizingChange = output<boolean>();\n\n  /**\n   * If `true` focuses the drawer when it is opened.\n   *\n   * @defaultValue `true`\n   */\n  readonly focusOnInit = input(true, { transform: booleanAttribute });\n\n  protected readonly navManager = createNavManager();\n\n  protected readonly navManagerConfig: NavManagerItemConfig = {\n    keys: {\n      Home: this.navManager.focusFirst,\n      End: this.navManager.focusLast\n    }\n  };\n\n  /**\n   * Event to be triggered when the minimum size is reached.\n   *\n   * @defaultValue `null`\n   */\n  readonly minSize = output<void>();\n\n  /**\n   * Event to be triggered when the maximum size is reached.\n   *\n   * @defaultValue `null`\n   */\n  readonly maxSize = output<void>();\n\n  constructor() {\n    const widget = callWidgetFactory(createDrawer, {\n      defaultConfig: {\n        className: 'inline-start',\n        bodyScroll: false,\n        backdrop: true,\n        transition: createSimpleClassTransition({\n          showClasses: ['show']\n        }),\n        verticalTransition: createSimpleClassTransition({\n          showClasses: ['show']\n        }),\n        backdropTransition: fadeTransition\n      },\n      events: {\n        onSizeChange: (size) => {\n          this.size.set(size);\n          this.sizeChange.emit(size);\n        },\n        onVisibleChange: (visible) => {\n          this.visibleChange.emit(visible);\n        },\n        onMinimizedChange: (isMinimized) => {\n          this.minimizedChange.emit(isMinimized);\n        },\n        onMaximizedChange: (isMaximized) => {\n          this.maximizedChange.emit(isMaximized);\n        },\n        onResizingChange: (isResizing) => {\n          this.resizingChange.emit(isResizing);\n        }\n      }\n    });\n    super(widget);\n  }\n\n  /**\n   * Trigger the opening of the drawer.\n   */\n  public open(): void {\n    this._agnosWidget.api.open();\n  }\n\n  /**\n   * Trigger the closing of the drawer.\n   */\n  public close(): void {\n    this._agnosWidget.api.close();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"design-factory-angular-drawer.mjs","sources":["../../drawer/drawer.ts","../../drawer/design-factory-angular-drawer.ts"],"sourcesContent":["import type { DrawerConfiguration, DrawerPosition, DrawerWidget } from '@agnos-ui/core/components/drawer';\nimport { createDrawer } from '@agnos-ui/core/components/drawer';\nimport type { NavManagerItemConfig } from '@agnos-ui/core/services/navManager';\nimport { createNavManager } from '@agnos-ui/core/services/navManager';\nimport { CollapseConfig, createCollapseTransition } from '@agnos-ui/core/services/transitions/collapse';\nimport { createSimpleClassTransition } from '@agnos-ui/core/services/transitions/simpleClassTransition';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  Directive,\n  inject,\n  input,\n  model,\n  output,\n  TemplateRef,\n  ViewEncapsulation\n} from '@angular/core';\nimport {\n  AgnosWidgetDirective,\n  callWidgetFactory,\n  UseDirective,\n  UseMultiDirective\n} from '@design-factory/angular/internals';\n\nconst fadeTransition = createSimpleClassTransition({\n  animationPendingClasses: ['df-fade'],\n  animationPendingShowClasses: ['df-show'],\n  showClasses: ['df-show', 'df-fade'],\n  hideClasses: ['df-hidden', 'df-fade']\n});\n\nconst verticalConfig: CollapseConfig = {\n  dimension: 'height',\n  hideClasses: ['df-collapse-hide'],\n  showClasses: ['df-collapse-show'],\n  animationPendingClasses: ['df-collapse-collapsing']\n};\n\nconst horizontalConfig: CollapseConfig = {\n  dimension: 'width',\n  hideClasses: ['df-collapse-hide'],\n  showClasses: ['df-collapse-show'],\n  animationPendingClasses: ['df-collapse-collapsing', 'df-collapse-horizontal']\n};\n\n/**\n * Available drawer positions.\n */\nexport type DfDrawerPosition = DrawerPosition;\n\n/**\n * Available drawer display configurations.\n * - `'overlay'`: the drawer overlays the page content with a backdrop.\n * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.\n */\nexport type DfDrawerConfiguration = DrawerConfiguration;\n\n/**\n * Marks an `<ng-template>` as drawer header content.\n */\n@Directive({\n  selector: 'ng-template[dfDrawerHeader]'\n})\nexport class DfDrawerHeaderTemplate {\n  readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Marks an `<ng-template>` as drawer body content.\n */\n@Directive({\n  selector: 'ng-template[dfDrawerBody]'\n})\nexport class DfDrawerBodyTemplate {\n  readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Marks an `<ng-template>` as drawer footer content.\n */\n@Directive({\n  selector: 'ng-template[dfDrawerFooter]'\n})\nexport class DfDrawerFooterTemplate {\n  readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Enables users to show contextual content via a sliding panel from any screen edge.\n * @experimental\n */\n@Component({\n  selector: 'df-drawer',\n  imports: [NgTemplateOutlet, UseDirective, UseMultiDirective],\n  template: `\n    @let isHidden = state.hidden();\n    @let backdropHidden = state.backdropHidden();\n    @if (!isHidden || keepInDom()) {\n      @let isVertical = state.isVertical();\n      @let drawerSize = size();\n      <div\n        class=\"df-drawer\"\n        [class]=\"state.className()\"\n        [dfUseMulti]=\"[directives.drawerPortalDirective, directives.drawerDirective]\"\n        [style.--df-drawer-size]=\"drawerSize !== null ? drawerSize + 'px' : ''\"\n      >\n        <ng-template #defaultBodyTemplate>\n          <ng-content />\n        </ng-template>\n        @if (hasSectionTemplates()) {\n          @if (headerTemplate(); as header) {\n            <div class=\"df-drawer-header\">\n              <ng-template [ngTemplateOutlet]=\"header.templateRef\" />\n            </div>\n          }\n          <div class=\"df-drawer-body\">\n            @if (bodyTemplate(); as body) {\n              <ng-template [ngTemplateOutlet]=\"body.templateRef\" />\n            } @else {\n              <ng-template [ngTemplateOutlet]=\"defaultBodyTemplate\" />\n            }\n          </div>\n          @if (footerTemplate(); as footer) {\n            <div class=\"df-drawer-footer\">\n              <ng-template [ngTemplateOutlet]=\"footer.templateRef\" />\n            </div>\n          }\n        } @else {\n          <ng-template [ngTemplateOutlet]=\"defaultBodyTemplate\" />\n        }\n        @if (state.resizable()) {\n          <div\n            class=\"df-drawer-splitter\"\n            tabindex=\"-1\"\n            [dfUse]=\"directives.splitterDirective\"\n            [style.align-items]=\"!isVertical ? 'center' : undefined\"\n            [style.justify-content]=\"isVertical ? 'center' : undefined\"\n          >\n            <ng-content select=\"df-drawer-splitter-content\">\n              <button\n                #splitterHandle\n                class=\"btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle\"\n                [class]=\"{\n                  'fa-grip-lines-vertical': !isVertical,\n                  'fa-grip-lines': isVertical,\n                  'df-btn-outline-neutral-mirror': !backdropHidden,\n                  'btn-outline-primary': backdropHidden\n                }\"\n                i18n-aria-label=\"@@df.drawer.resize.ariaLabel\"\n                aria-label=\"Resize drawer\"\n                [dfUse]=\"[navManager.directive, navManagerConfig]\"\n              ></button>\n            </ng-content>\n          </div>\n        }\n      </div>\n    }\n    @if (!backdropHidden) {\n      <div\n        class=\"df-drawer-backdrop\"\n        [dfUseMulti]=\"[directives.backdropPortalDirective, directives.backdropDirective]\"\n      ></div>\n    }\n  `,\n  styles: \"@use '@design-factory/components-styles/drawer';\",\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None\n})\nexport class DfDrawer extends AgnosWidgetDirective<DrawerWidget> {\n  protected readonly headerTemplate = contentChild(DfDrawerHeaderTemplate);\n  protected readonly bodyTemplate = contentChild(DfDrawerBodyTemplate);\n  protected readonly footerTemplate = contentChild(DfDrawerFooterTemplate);\n  protected readonly hasSectionTemplates = computed(\n    () => !!this.headerTemplate() || !!this.bodyTemplate() || !!this.footerTemplate()\n  );\n\n  /**\n   * CSS classes to be applied on the widget main container\n   *\n   * @defaultValue ``\n   */\n  readonly className = input<string>('');\n  /**\n   * If `true` allows body scrolling when the drawer is open.\n   *\n   * @defaultValue `false`\n   */\n  readonly bodyScroll = input(false, { transform: booleanAttribute });\n  /**\n   * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable\n   *\n   * @defaultValue `true`\n   */\n  readonly backdrop = input(true, { transform: booleanAttribute });\n  /**\n   * Which element should contain the drawer and backdrop DOM elements.\n   * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.\n   * Otherwise, they stay where the widget is located.\n   *\n   * @defaultValue\n   * ```ts\n   * typeof window !== 'undefined' ? document.body : null\n   * ```\n   */\n  readonly container = input<HTMLElement | null>(null);\n  /**\n   * The size of the drawer in pixels.\n   *\n   * @defaultValue `300`\n   */\n  readonly size = model<number | null>(300);\n  /**\n   * If `true`, the drawer can be resized by the user.\n   *\n   * @defaultValue `false`\n   */\n  readonly resizable = input(false, { transform: booleanAttribute });\n  /**\n   * If `true`, the drawer is shown; otherwise, it is hidden.\n   *\n   * @defaultValue `false`\n   */\n  readonly visible = input(false, { transform: booleanAttribute });\n\n  /**\n   * If `true`, the drawer element is kept in the DOM when it is not visible.\n   * This can be useful to preserve the state of the drawer content when it is hidden.\n   *\n   * @defaultValue `false`\n   */\n  readonly keepInDom = input(false, { transform: booleanAttribute });\n\n  /**\n   * The display configuration of the drawer.\n   * - `'overlay'` (default): the drawer overlays the page content with a backdrop.\n   * - `'inline'`: the drawer stays in the document flow and moves content as it expands/resizes.\n   *\n   * @defaultValue `'overlay'`\n   */\n  readonly configuration = input<DrawerConfiguration>('overlay');\n\n  /**\n   * The position of the drawer on the screen.\n   *\n   * @defaultValue `'inline-start'`\n   */\n  readonly position = input<DfDrawerPosition>('inline-start');\n\n  /**\n   * An event emitted when the width is changed.\n   *\n   * Event payload is equal to the newly selected width.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly sizeChange = output<number | null>();\n  /**\n   * Event to be triggered when the visible property changes.\n   *\n   * @param visible - new value of the visible propery\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly visibleChange = output<boolean>();\n\n  /**\n   * Event to be triggered when the minimized state changes.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly minimizedChange = output<boolean>();\n\n  /**\n   *  Event to be triggered when the maximized state changes.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly maximizedChange = output<boolean>();\n\n  /**\n   * Event to be triggered when the user start or stop moving the drawer.\n   *\n   * @defaultValue\n   * ```ts\n   * () => {}\n   * ```\n   */\n  readonly resizingChange = output<boolean>();\n\n  /**\n   * If `true` focuses the drawer when it is opened.\n   *\n   * @defaultValue `true`\n   */\n  readonly focusOnInit = input(true, { transform: booleanAttribute });\n\n  protected readonly navManager = createNavManager();\n\n  protected readonly navManagerConfig: NavManagerItemConfig = {\n    keys: {\n      Home: this.navManager.focusFirst,\n      End: this.navManager.focusLast\n    }\n  };\n\n  /**\n   * Event to be triggered when the minimum size is reached.\n   *\n   * @defaultValue `null`\n   */\n  readonly minSize = output<void>();\n\n  /**\n   * Event to be triggered when the maximum size is reached.\n   *\n   * @defaultValue `null`\n   */\n  readonly maxSize = output<void>();\n\n  constructor() {\n    const widget = callWidgetFactory(createDrawer, {\n      defaultConfig: {\n        bodyScroll: false,\n        backdrop: true,\n        transition: createCollapseTransition(horizontalConfig),\n        verticalTransition: createCollapseTransition(verticalConfig),\n        backdropTransition: fadeTransition\n      },\n      events: {\n        onSizeChange: (size) => {\n          this.size.set(size);\n          this.sizeChange.emit(size);\n        },\n        onVisibleChange: (visible) => {\n          this.visibleChange.emit(visible);\n        },\n        onMinimizedChange: (isMinimized) => {\n          this.minimizedChange.emit(isMinimized);\n        },\n        onMaximizedChange: (isMaximized) => {\n          this.maximizedChange.emit(isMaximized);\n        },\n        onResizingChange: (isResizing) => {\n          this.resizingChange.emit(isResizing);\n        }\n      }\n    });\n    super(widget);\n  }\n\n  /**\n   * Trigger the opening of the drawer.\n   *\n   * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.\n   *\n   * @returns A promise that resolves once the opening transition has finished.\n   */\n  public open(animated?: boolean): Promise<void> {\n    return this.api.open(animated);\n  }\n\n  /**\n   * Trigger the closing of the drawer.\n   *\n   * @param animated - whether the transition should be animated. If the parameter is not defined, the `animated` is defined by the component input or the default config.\n   *\n   * @returns A promise that resolves once the closing transition has finished.\n   */\n  public close(animated?: boolean): Promise<void> {\n    return this.api.close(animated);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}