@design-factory/angular 21.1.0-next.1 → 22.0.0-next.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-button.mjs","sources":["../../button/button-host.ts","../../button/button-visual.ts","../../button/button.ts","../../button/design-factory-angular-button.ts"],"sourcesContent":["import { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input } from '@angular/core';\n\n/**\n * Internal host behavior for DF button-like directives.\n *\n * @since 22.0\n * @internal\n */\n@Directive({\n  host: {\n    '[attr.type]': 'isButton ? type() : null',\n    '[attr.disabled]': 'isButton && disabled() ? \"\" : null',\n    '[attr.aria-disabled]': 'isAnchor && disabled() ? \"true\" : null',\n    '[attr.tabindex]': 'isAnchor && disabled() ? \"-1\" : tabindex()',\n    '(keydown)': 'onKeydown($event)'\n  }\n})\nexport class ɵDfButtonHost {\n  /**\n   * Native button type attribute.\n   * @defaultValue `'button'`\n   */\n  readonly type = input<HTMLButtonElement['type']>('button');\n  /**\n   * Disabled state for buttons and anchor buttons.\n   * @defaultValue `false`\n   */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /**\n   * Host tabindex override.\n   * @defaultValue `undefined`\n   */\n  readonly tabindex = input<string | number | null | undefined>(undefined);\n  readonly #hostEl = inject<ElementRef<HTMLButtonElement | HTMLAnchorElement>>(ElementRef).nativeElement;\n  protected readonly isButton = this.#hostEl.tagName.toLowerCase() === 'button';\n  protected readonly isAnchor = this.#hostEl.tagName.toLowerCase() === 'a';\n\n  constructor() {\n    // Angular host listener metadata does not expose capture-phase options. Use a native listener so\n    // disabled anchor buttons can block clicks before RouterLink or other bubble-phase handlers navigate.\n    if (this.isAnchor) {\n      const destroyRef = inject(DestroyRef);\n\n      const onClickCapture = (event: Event) => {\n        if (this.disabled()) {\n          event.preventDefault();\n          event.stopImmediatePropagation();\n        }\n      };\n\n      this.#hostEl.addEventListener('click', onClickCapture, { capture: true });\n      destroyRef.onDestroy(() => this.#hostEl.removeEventListener('click', onClickCapture, { capture: true }));\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent) {\n    if (this.isAnchor && this.disabled() && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  InjectionToken,\n  input,\n  PLATFORM_ID\n} from '@angular/core';\nimport type { DfButtonAppearance, DfButtonSize, DfButtonVariant } from './button.types';\n\n/**\n * Interface for the `dfButtonGroup` directive, which is provided to all `dfButton` elements in a group.\n *\n * @since 22.0\n * @internal\n */\nexport interface ɵDfButtonGroupInterface {\n  readonly size: () => DfButtonSize;\n  readonly appearance: () => 'solid' | 'outline';\n  readonly mirror: () => boolean;\n  readonly orientation: () => 'horizontal' | 'vertical';\n}\n\n/**\n * Injection token for the `dfButtonGroup` directive, which is provided to all `dfButton` elements in a group.\n *\n * @since 22.0\n * @internal\n */\nexport const ɵDfButtonGroupInjectionToken = new InjectionToken<ɵDfButtonGroupInterface>('DfButtonGroup');\n\n/**\n * Shared visual directive for DF button-like elements.\n *\n * @since 22.0\n * @internal\n */\n@Directive({\n  host: {\n    class: 'df-btn df-btn-no-transition',\n    '[class.df-btn-solid]': `resolvedAppearance() === 'solid'`,\n    '[class.df-btn-outline]': `resolvedAppearance() === 'outline'`,\n    '[class.df-btn-text]': `resolvedAppearance() === 'text'`,\n    '[class.df-btn-transparent]': `resolvedTransparent() && resolvedAppearance() !== 'solid'`,\n    '[class.df-btn-primary]': `resolvedVariant() === 'primary'`,\n    '[class.df-btn-neutral]': `resolvedVariant() === 'neutral'`,\n    '[class.df-btn-danger]': `resolvedVariant() === 'danger'`,\n    '[class.df-btn-mirror]': 'resolvedMirror()',\n    '[class.df-btn-sm]': `resolvedSize() === 'sm'`,\n    '[class.df-btn-lg]': `resolvedSize() === 'lg'`\n  }\n})\nexport class ɵDfButtonVisual {\n  /**\n   * The button group that contains this button, if any.\n   */\n  private readonly buttonGroup = inject(ɵDfButtonGroupInjectionToken, { optional: true });\n  /**\n   * Semantic variant of the button. Forced to `'primary'` if the button is in a `df-button-group`.\n   * @defaultValue `'primary'`\n   */\n  readonly variant = input<DfButtonVariant>('primary');\n  /**\n   * Effective variant applied to the host. Resolves to `'primary'` when the button is in a `df-button-group`,\n   * otherwise falls back to the `variant` input.\n   */\n  protected readonly resolvedVariant = this.buttonGroup ? () => 'primary' as const : this.variant;\n  /**\n   * Visual appearance of the button. In a `df-button-group`, the group appearance is used unless the button\n   * sets an explicit `'solid'` or `'outline'` appearance.\n   * @defaultValue `'solid'`\n   */\n  readonly appearance = input<DfButtonAppearance>();\n  /**\n   * Effective appearance applied to the host. In a `df-button-group`, resolves to the group appearance unless the\n   * button sets an explicit `'solid'` or `'outline'` appearance; otherwise falls back to the `appearance` input or\n   * `'solid'`.\n   */\n  protected readonly resolvedAppearance = computed(() => {\n    const appearance = this.appearance();\n    if (this.buttonGroup && (!appearance || appearance === 'text')) {\n      return this.buttonGroup.appearance();\n    }\n    return appearance ?? 'solid';\n  });\n  /**\n   * Size of the button. Ignored if the button is in a `df-button-group` (the group size is used instead).\n   * @defaultValue `'md'`\n   */\n  readonly size = input<DfButtonSize>('md');\n  /**\n   * Effective size applied to the host. Resolves to the group size when the button is in a `df-button-group`,\n   * otherwise falls back to the `size` input.\n   */\n  protected readonly resolvedSize = this.buttonGroup ? this.buttonGroup.size : this.size;\n  /**\n   * Makes outline and text buttons transparent. Solid buttons are unaffected.\n   * Ignored if the button is in a `df-button-group` (transparent buttons are currently not supported in groups).\n   * @defaultValue `false`\n   */\n  readonly transparent = input(false, { transform: booleanAttribute });\n  /**\n   * Effective transparent flag applied to the host. Always false in a `df-button-group`, otherwise falls back\n   * to the `transparent` input.\n   */\n  protected readonly resolvedTransparent = this.buttonGroup ? () => false : this.transparent;\n  /**\n   * Enables mirrored styling for inverse surfaces.\n   * Ignored if the button is in a `df-button-group` (the group value is used instead).\n   * @defaultValue `false`\n   */\n  readonly mirror = input(false, { transform: booleanAttribute });\n  /**\n   * Effective mirror flag applied to the host. Resolves to the group value when the button is in a\n   * `df-button-group`, otherwise falls back to the `mirror` input.\n   */\n  protected readonly resolvedMirror = this.buttonGroup ? this.buttonGroup.mirror : this.mirror;\n\n  constructor() {\n    // Angular may attach the host class bindings one tick after the host element is inserted when routed views render.\n    // See https://github.com/angular/angular/issues/57528 and https://github.com/angular/angular/issues/66923.\n    // That briefly animates the initial color, background, and border changes, causing a visible flicker on first render.\n    // Keep transitions disabled for the first client frame so those initial class changes do not animate.\n    if (isPlatformBrowser(inject(PLATFORM_ID))) {\n      const hostEl = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n      afterNextRender(() => requestAnimationFrame(() => hostEl.classList.remove('df-btn-no-transition')));\n    }\n  }\n}\n","/* eslint-disable @angular-eslint/component-selector */\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport { ɵDfButtonHost } from './button-host';\nimport { ɵDfButtonVisual } from './button-visual';\nexport type { DfButtonAppearance, DfButtonSize, DfButtonVariant } from './button.types';\n\n/**\n * Design Factory button directive for native `<button>` and `<a>` elements.\n *\n * @since 22.0\n */\n@Component({\n  selector: 'button[dfButton], a[dfButton]',\n  hostDirectives: [\n    {\n      directive: ɵDfButtonVisual,\n      inputs: ['variant', 'appearance', 'size', 'transparent', 'mirror']\n    },\n    {\n      directive: ɵDfButtonHost,\n      inputs: ['type', 'disabled', 'tabindex']\n    }\n  ],\n  template: `<ng-content />`,\n  styleUrls: ['./button.scss'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class DfButton {}\n\n/**\n * Design Factory icon-only button directive for native `<button>` and `<a>` elements.\n *\n * Provide an accessible name with `aria-label` or `aria-labelledby`.\n * Provide the icon with classes on the host element.\n *\n * @since 22.0\n */\n@Component({\n  selector: 'button[dfIconButton], a[dfIconButton]',\n  host: {\n    class: 'df-btn-icononly'\n  },\n  hostDirectives: [\n    {\n      directive: ɵDfButtonVisual,\n      inputs: ['variant', 'appearance', 'size', 'transparent', 'mirror']\n    },\n    {\n      directive: ɵDfButtonHost,\n      inputs: ['type', 'disabled', 'tabindex']\n    }\n  ],\n  template: ``,\n  styleUrls: ['./button.scss'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class DfIconButton {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, ViewEncapsulation, Component } from '@angular/core';
+import { ɵDfButtonGroupInjectionToken as _DfButtonGroupInjectionToken } from '@design-factory/angular/button';
+
+/**
+ * Groups a set of related `dfButton` actions, rendering them as a single visually joined control.
+ *
+ * Project `dfButton` elements as content:
+ *
+ * ```html
+ * <df-button-group [size]="'md'" [appearance]="'outline'">
+ *   <button dfButton [appearance]="'solid'">Main action</button>
+ *   <button dfButton>Left</button>
+ *   <button dfButton>Middle</button>
+ *   <button dfButton>Right</button>
+ * </df-button-group>
+ * ```
+ *
+ * @since 22.0
+ */
+class DfButtonGroup {
+    constructor() {
+        /**
+         * The size of the buttons in the group.
+         * @defaultValue `'md'`
+         */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * The appearance of the buttons in the group.
+         * @defaultValue `'outline'`
+         */
+        this.appearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * Enables mirrored styling for inverse surfaces.
+         * @defaultValue `false`
+         */
+        this.mirror = input(false, { ...(ngDevMode ? { debugName: "mirror" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The orientation of the button group.
+         * @defaultValue `'horizontal'`
+         */
+        this.orientation = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: DfButtonGroup, isStandalone: true, selector: "df-button-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, mirror: { classPropertyName: "mirror", publicName: "mirror", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class.df-btn-group-horizontal": "orientation() === 'horizontal'", "class.df-btn-group-vertical": "orientation() === 'vertical'" }, classAttribute: "df-btn-group" }, providers: [
+            {
+                provide: _DfButtonGroupInjectionToken,
+                useExisting: DfButtonGroup
+            }
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".df-btn-group{display:inline-flex;position:relative;isolation:isolate}.df-btn-group>.df-btn{position:relative;flex:1 1 auto}.df-btn-group>.df-btn:hover,.df-btn-group>.df-btn:focus,.df-btn-group>.df-btn:active{z-index:1}.df-btn-group>.df-btn:focus-visible{z-index:2;outline:0;box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-pageBackground),0 0 0 4px var(--df-button-focus-ring-color)}.df-btn-group>.df-btn:is(:disabled,[aria-disabled=true]){z-index:-1}.df-btn-group-horizontal{flex-direction:row;align-items:center;vertical-align:middle}.df-btn-group-horizontal>.df-btn:not(:first-child){margin-inline-start:-1px;border-start-start-radius:0;border-end-start-radius:0}.df-btn-group-horizontal>.df-btn:not(:last-child,.df-dropdown-toggle){border-start-end-radius:0;border-end-end-radius:0}.df-btn-group-horizontal>.df-btn.df-btn-solid.df-dropdown-toggle{margin-inline-start:0;border-inline-start-color:transparent;background-clip:padding-box}.df-btn-group-vertical{flex-direction:column;align-items:stretch}.df-btn-group-vertical>.df-btn:not(:first-child){margin-block-start:-1px;border-start-start-radius:0;border-start-end-radius:0}.df-btn-group-vertical>.df-btn:not(:last-child,.df-dropdown-toggle){border-end-start-radius:0;border-end-end-radius:0}.df-btn-group-vertical>.df-btn.df-btn-solid.df-dropdown-toggle{margin-block-start:0;border-block-start-color:transparent;background-clip:padding-box}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfButtonGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'df-button-group', host: {
+                        role: 'group',
+                        class: 'df-btn-group',
+                        '[class.df-btn-group-horizontal]': `orientation() === 'horizontal'`,
+                        '[class.df-btn-group-vertical]': `orientation() === 'vertical'`
+                    }, providers: [
+                        {
+                            provide: _DfButtonGroupInjectionToken,
+                            useExisting: DfButtonGroup
+                        }
+                    ], template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".df-btn-group{display:inline-flex;position:relative;isolation:isolate}.df-btn-group>.df-btn{position:relative;flex:1 1 auto}.df-btn-group>.df-btn:hover,.df-btn-group>.df-btn:focus,.df-btn-group>.df-btn:active{z-index:1}.df-btn-group>.df-btn:focus-visible{z-index:2;outline:0;box-shadow:0 0 0 2px var(--df-color-inert-neutral-main-pageBackground),0 0 0 4px var(--df-button-focus-ring-color)}.df-btn-group>.df-btn:is(:disabled,[aria-disabled=true]){z-index:-1}.df-btn-group-horizontal{flex-direction:row;align-items:center;vertical-align:middle}.df-btn-group-horizontal>.df-btn:not(:first-child){margin-inline-start:-1px;border-start-start-radius:0;border-end-start-radius:0}.df-btn-group-horizontal>.df-btn:not(:last-child,.df-dropdown-toggle){border-start-end-radius:0;border-end-end-radius:0}.df-btn-group-horizontal>.df-btn.df-btn-solid.df-dropdown-toggle{margin-inline-start:0;border-inline-start-color:transparent;background-clip:padding-box}.df-btn-group-vertical{flex-direction:column;align-items:stretch}.df-btn-group-vertical>.df-btn:not(:first-child){margin-block-start:-1px;border-start-start-radius:0;border-start-end-radius:0}.df-btn-group-vertical>.df-btn:not(:last-child,.df-dropdown-toggle){border-end-start-radius:0;border-end-end-radius:0}.df-btn-group-vertical>.df-btn.df-btn-solid.df-dropdown-toggle{margin-block-start:0;border-block-start-color:transparent;background-clip:padding-box}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], mirror: [{ type: i0.Input, args: [{ isSignal: true, alias: "mirror", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfButtonGroup };
+//# sourceMappingURL=design-factory-angular-buttongroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-buttongroup.mjs","sources":["../../buttongroup/buttongroup.ts","../../buttongroup/design-factory-angular-buttongroup.ts"],"sourcesContent":["import { booleanAttribute, Component, input, ViewEncapsulation } from '@angular/core';\nimport { DfButtonSize, ɵDfButtonGroupInjectionToken, ɵDfButtonGroupInterface } from '@design-factory/angular/button';\n\n/**\n * Groups a set of related `dfButton` actions, rendering them as a single visually joined control.\n *\n * Project `dfButton` elements as content:\n *\n * ```html\n * <df-button-group [size]=\"'md'\" [appearance]=\"'outline'\">\n *   <button dfButton [appearance]=\"'solid'\">Main action</button>\n *   <button dfButton>Left</button>\n *   <button dfButton>Middle</button>\n *   <button dfButton>Right</button>\n * </df-button-group>\n * ```\n *\n * @since 22.0\n */\n@Component({\n  selector: 'df-button-group',\n  host: {\n    role: 'group',\n    class: 'df-btn-group',\n    '[class.df-btn-group-horizontal]': `orientation() === 'horizontal'`,\n    '[class.df-btn-group-vertical]': `orientation() === 'vertical'`\n  },\n  providers: [\n    {\n      provide: ɵDfButtonGroupInjectionToken,\n      useExisting: DfButtonGroup\n    }\n  ],\n  template: `<ng-content />`,\n  styleUrls: ['./buttongroup.scss'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class DfButtonGroup implements ɵDfButtonGroupInterface {\n  /**\n   * The size of the buttons in the group.\n   * @defaultValue `'md'`\n   */\n  readonly size = input<DfButtonSize>('md');\n  /**\n   * The appearance of the buttons in the group.\n   * @defaultValue `'outline'`\n   */\n  readonly appearance = input<'solid' | 'outline'>('outline');\n  /**\n   * Enables mirrored styling for inverse surfaces.\n   * @defaultValue `false`\n   */\n  readonly mirror = input(false, { transform: booleanAttribute });\n  /**\n   * The orientation of the button group.\n   * @defaultValue `'horizontal'`\n   */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵDfButtonGroupInjectionToken"],"mappings":";;;;AAGA;;;;;;;;;;;;;;;AAeG;MAmBU,aAAa,CAAA;AAlB1B,IAAA,WAAA,GAAA;AAmBE;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAe,IAAI;iFAAC;AACzC;;;AAGG;QACM,IAAA,CAAA,UAAU,GAAG,KAAK,CAAsB,SAAS;uFAAC;AAC3D;;;AAGG;QACM,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAC/D;;;AAGG;QACM,IAAA,CAAA,WAAW,GAAG,KAAK,CAA4B,YAAY;wFAAC;AACtE,IAAA;8GArBY,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,+BAAA,EAAA,gCAAA,EAAA,6BAAA,EAAA,8BAAA,EAAA,EAAA,cAAA,EAAA,cAAA,EAAA,EAAA,SAAA,EAVb;AACT,YAAA;AACE,gBAAA,OAAO,EAAEA,4BAA4B;AACrC,gBAAA,WAAW,EAAE;AACd;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EACS,CAAA,cAAA,CAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,i4CAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAIf,aAAa,EAAA,UAAA,EAAA,CAAA;kBAlBzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,IAAA,EACrB;AACJ,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,KAAK,EAAE,cAAc;AACrB,wBAAA,iCAAiC,EAAE,CAAA,8BAAA,CAAgC;AACnE,wBAAA,+BAA+B,EAAE,CAAA,4BAAA;qBAClC,EAAA,SAAA,EACU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAEA,4BAA4B;AACrC,4BAAA,WAAW,EAAA;AACZ;AACF,qBAAA,EAAA,QAAA,EACS,CAAA,cAAA,CAAgB,EAAA,aAAA,EAEX,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAAA,CAAA,i4CAAA,CAAA,EAAA;;;ACnCvC;;AAEG;;;;"}

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

@@ -4,8 +4,9 @@ import { createCollapseTransition } from '@design-factory/core/services/transiti
 import { createSimpleClassTransition } from '@design-factory/core/services/transitions/simpleClassTransition';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, contentChild, computed, input, booleanAttribute, model, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Directive, contentChild, TemplateRef, computed, input, booleanAttribute, model, output, ViewEncapsulation, Component } from '@angular/core';
 import { AgnosWidgetDirective, callWidgetFactory, UseDirective, UseMultiDirective } from '@design-factory/angular/internals';
+import { DfIconButton } from '@design-factory/angular/button';
 
 const fadeTransition = createSimpleClassTransition({
     animationPendingClasses: ['df-fade'],
@@ -26,48 +27,39 @@ const horizontalConfig = {
     animationPendingClasses: ['df-collapse-collapsing', 'df-collapse-horizontal']
 };
 /**
- * Marks an `<ng-template>` as drawer header content.
+ * A directive to define a template containing the header content of the drawer.
  */
 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawerHeaderTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawerHeaderTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[dfDrawerHeader]'
                 }]
         }] });
 /**
- * Marks an `<ng-template>` as drawer body content.
+ * A directive to define a template containing the body content of the drawer.
  */
 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawerBodyTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawerBodyTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[dfDrawerBody]'
                 }]
         }] });
 /**
- * Marks an `<ng-template>` as drawer footer content.
+ * A directive to define a template containing the footer content of the drawer.
  */
 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawerFooterTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawerFooterTemplate, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[dfDrawerFooter]'
@@ -75,7 +67,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }] });
 /**
  * Enables users to show contextual content via a sliding panel from any screen edge.
- * @experimental
+ *
+ * See {@link https://design-factory.amadeus.net/components/drawer|Design Factory documentation} for details and examples.
+ * @since 21.1
  */
 class DfDrawer extends AgnosWidgetDirective {
     constructor() {
@@ -90,7 +84,6 @@ class DfDrawer extends AgnosWidgetDirective {
             events: {
                 onSizeChange: (size) => {
                     this.size.set(size);
-                    this.sizeChange.emit(size);
                 },
                 onVisibleChange: (visible) => {
                     this.visibleChange.emit(visible);
@@ -107,64 +100,73 @@ class DfDrawer 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" }] : []));
+        this.headerTemplate = contentChild(DfDrawerHeaderTemplate, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.bodyTemplate = contentChild(DfDrawerBodyTemplate, { ...(ngDevMode ? { debugName: "bodyTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.footerTemplate = contentChild(DfDrawerFooterTemplate, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.hasSectionTemplates = computed(() => !!this.headerTemplate() || !!this.bodyTemplate() || !!this.footerTemplate(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSectionTemplates" }] : /* istanbul ignore next */ []));
         /**
          * CSS classes to be applied on the widget main container
          *
          * @defaultValue ``
          */
-        this.className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+        this.className = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
         /**
          * If `true` allows body scrolling when the drawer is open.
          *
          * @defaultValue `false`
          */
-        this.bodyScroll = input(false, { ...(ngDevMode ? { debugName: "bodyScroll" } : {}), transform: booleanAttribute });
+        this.bodyScroll = input(false, { ...(ngDevMode ? { debugName: "bodyScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable
          *
          * @defaultValue `true`
          */
-        this.backdrop = input(true, { ...(ngDevMode ? { debugName: "backdrop" } : {}), transform: booleanAttribute });
+        this.backdrop = input(true, { ...(ngDevMode ? { debugName: "backdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * If `true` the drawer will be closed when clicking on the backdrop, otherwise the backdrop is static and non iteractive.
+         *
+         * @defaultValue `true`
+         */
+        this.closeOnBackdropClick = input(true, { ...(ngDevMode ? { debugName: "closeOnBackdropClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Which element should contain the drawer and backdrop DOM elements.
          * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
          * Otherwise, they stay where the widget is located.
          *
-         * @defaultValue
-         * ```ts
-         * typeof window !== 'undefined' ? document.body : null
-         * ```
+         * Defaults to `document.body` in the browser and `null` on the server.
+         *
+         * @defaultValue `document.body`
          */
-        this.container = input(null, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        this.container = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
         /**
          * The size of the drawer in pixels.
          *
          * @defaultValue `300`
          */
-        this.size = model(300, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.size = model(300, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         /**
          * If `true`, the drawer can be resized by the user.
          *
          * @defaultValue `false`
          */
-        this.resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
+        this.resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * If `true`, the drawer is shown; otherwise, it is hidden.
          *
          * @defaultValue `false`
          */
-        this.visible = input(false, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
+        this.visible = input(false, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * 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 `false`
          */
-        this.keepInDom = input(false, { ...(ngDevMode ? { debugName: "keepInDom" } : {}), transform: booleanAttribute });
+        this.keepInDom = input(false, { ...(ngDevMode ? { debugName: "keepInDom" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * The display configuration of the drawer.
          * - `'overlay'` (default): the drawer overlays the page content with a backdrop.
@@ -172,24 +174,15 @@ class DfDrawer extends AgnosWidgetDirective {
          *
          * @defaultValue `'overlay'`
          */
-        this.configuration = input('overlay', ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+        this.configuration = input('overlay', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
         /**
          * The position of the drawer on the screen.
          *
          * @defaultValue `'inline-start'`
          */
-        this.position = input('inline-start', ...(ngDevMode ? [{ debugName: "position" }] : []));
-        /**
-         * An event emitted when the width is changed.
-         *
-         * Event payload is equal to the newly selected width.
-         *
-         * @defaultValue
-         * ```ts
-         * () => {}
-         * ```
-         */
-        this.sizeChange = output();
+        this.position = input('inline-start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
         /**
          * Event to be triggered when the visible property changes.
          *
@@ -233,7 +226,7 @@ class DfDrawer extends AgnosWidgetDirective {
          *
          * @defaultValue `true`
          */
-        this.focusOnInit = input(true, { ...(ngDevMode ? { debugName: "focusOnInit" } : {}), transform: booleanAttribute });
+        this.focusOnInit = input(true, { ...(ngDevMode ? { debugName: "focusOnInit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.navManager = createNavManager();
         this.navManagerConfig = {
             keys: {
@@ -274,8 +267,8 @@ class DfDrawer extends AgnosWidgetDirective {
     close(animated) {
         return this.api.close(animated);
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", 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", visibleChange: "visibleChange", minimizedChange: "minimizedChange", maximizedChange: "maximizedChange", resizingChange: "resizingChange", minSize: "minSize", maxSize: "maxSize" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: DfDrawerHeaderTemplate, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: DfDrawerBodyTemplate, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: DfDrawerFooterTemplate, descendants: true, read: TemplateRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @let isHidden = state.hidden();
     @let backdropHidden = state.backdropHidden();
     @if (!isHidden || keepInDom()) {
@@ -293,19 +286,19 @@ class DfDrawer extends AgnosWidgetDirective {
         @if (hasSectionTemplates()) {
           @if (headerTemplate(); as header) {
             <div class="df-drawer-header">
-              <ng-template [ngTemplateOutlet]="header.templateRef" />
+              <ng-template [ngTemplateOutlet]="header" />
             </div>
           }
           <div class="df-drawer-body">
             @if (bodyTemplate(); as body) {
-              <ng-template [ngTemplateOutlet]="body.templateRef" />
+              <ng-template [ngTemplateOutlet]="body" />
             } @else {
               <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
             }
           </div>
           @if (footerTemplate(); as footer) {
             <div class="df-drawer-footer">
-              <ng-template [ngTemplateOutlet]="footer.templateRef" />
+              <ng-template [ngTemplateOutlet]="footer" />
             </div>
           }
         } @else {
@@ -321,14 +314,15 @@ class DfDrawer extends AgnosWidgetDirective {
           >
             <ng-content select="df-drawer-splitter-content">
               <button
+                dfIconButton
                 #splitterHandle
-                class="btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle"
-                [class]="{
-                  'fa-grip-lines-vertical': !isVertical,
-                  'fa-grip-lines': isVertical,
-                  'df-btn-outline-neutral-mirror': !backdropHidden,
-                  'btn-outline-primary': backdropHidden
-                }"
+                class="df-drawer-splitter-handle"
+                [class.fa-grip-lines]="isVertical"
+                [class.fa-grip-lines-vertical]="!isVertical"
+                appearance="text"
+                [variant]="backdropHidden ? 'primary' : 'neutral'"
+                [mirror]="!backdropHidden"
+                transparent
                 i18n-aria-label="@@df.drawer.resize.ariaLabel"
                 aria-label="Resize drawer"
                 [dfUse]="[navManager.directive, navManagerConfig]"
@@ -344,11 +338,11 @@ class DfDrawer extends AgnosWidgetDirective {
         [dfUseMulti]="[directives.backdropPortalDirective, directives.backdropDirective]"
       ></div>
     }
-  `, 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 }); }
+  `, 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!important}.df-drawer{--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:2010;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:-32px auto}.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:-32px auto;cursor:ns-resize}.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;touch-action:none}.df-drawer .df-drawer-splitter .df-drawer-splitter-handle{flex-shrink:0;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(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{position:fixed;inset:0;background-color:var(--df-color-backdrop-background);z-index:2000}.df-drawer-backdrop.df-show{opacity:.9;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"] }, { kind: "component", type: DfIconButton, selector: "button[dfIconButton], a[dfIconButton]" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'df-drawer', imports: [NgTemplateOutlet, UseDirective, UseMultiDirective], template: `
+            args: [{ selector: 'df-drawer', imports: [NgTemplateOutlet, UseDirective, UseMultiDirective, DfIconButton], template: `
     @let isHidden = state.hidden();
     @let backdropHidden = state.backdropHidden();
     @if (!isHidden || keepInDom()) {
@@ -366,19 +360,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         @if (hasSectionTemplates()) {
           @if (headerTemplate(); as header) {
             <div class="df-drawer-header">
-              <ng-template [ngTemplateOutlet]="header.templateRef" />
+              <ng-template [ngTemplateOutlet]="header" />
             </div>
           }
           <div class="df-drawer-body">
             @if (bodyTemplate(); as body) {
-              <ng-template [ngTemplateOutlet]="body.templateRef" />
+              <ng-template [ngTemplateOutlet]="body" />
             } @else {
               <ng-template [ngTemplateOutlet]="defaultBodyTemplate" />
             }
           </div>
           @if (footerTemplate(); as footer) {
             <div class="df-drawer-footer">
-              <ng-template [ngTemplateOutlet]="footer.templateRef" />
+              <ng-template [ngTemplateOutlet]="footer" />
             </div>
           }
         } @else {
@@ -394,14 +388,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           >
             <ng-content select="df-drawer-splitter-content">
               <button
+                dfIconButton
                 #splitterHandle
-                class="btn df-btn-icononly df-btn-tertiary df-drawer-splitter-handle"
-                [class]="{
-                  'fa-grip-lines-vertical': !isVertical,
-                  'fa-grip-lines': isVertical,
-                  'df-btn-outline-neutral-mirror': !backdropHidden,
-                  'btn-outline-primary': backdropHidden
-                }"
+                class="df-drawer-splitter-handle"
+                [class.fa-grip-lines]="isVertical"
+                [class.fa-grip-lines-vertical]="!isVertical"
+                appearance="text"
+                [variant]="backdropHidden ? 'primary' : 'neutral'"
+                [mirror]="!backdropHidden"
+                transparent
                 i18n-aria-label="@@df.drawer.resize.ariaLabel"
                 aria-label="Resize drawer"
                 [dfUse]="[navManager.directive, navManagerConfig]"
@@ -417,8 +412,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [dfUseMulti]="[directives.backdropPortalDirective, directives.backdropDirective]"
       ></div>
     }
-  `, 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"] }] } });
+  `, 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!important}.df-drawer{--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:2010;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:-32px auto}.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:-32px auto;cursor:ns-resize}.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;touch-action:none}.df-drawer .df-drawer-splitter .df-drawer-splitter-handle{flex-shrink:0;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(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{position:fixed;inset:0;background-color:var(--df-color-backdrop-background);z-index:2000}.df-drawer-backdrop.df-show{opacity:.9;pointer-events:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerHeaderTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerBodyTemplate), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfDrawerFooterTemplate), { ...{ read: TemplateRef }, 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 }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", 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 }] }], 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.