@design-factory/angular 21.0.0-next.0 → 21.0.0

package/README.md

@@ -1,3 +1,63 @@
 <h1 align="center">Amadeus Design Factory Angular implementation</h1>
 
-TODO
+## Description
+
+Design Factory Angular is the package containing the Angular components implementing the Amadeus Design System, Design Factory.
+
+Design Factory is an InnerSource design system made of:
+
+- A UI library for Amadeus external and internal interfaces and applications, based on our four pillars
+- A set of design and coding best practices
+- A cross-functional community from all Amadeus business units
+
+If you want to get more information about Design Factory, please contact [Design Factory team](mailto:DesignFactory@amadeus.com).
+
+## Getting started
+
+You can easily add Design Factory library in your project thanks our schematics.
+Just run the following:
+
+```bash
+ng add @design-factory/angular
+```
+
+It will install Design Factory for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option
+
+```bash
+ng add @design-factory/angular --project myProject
+```
+
+## Architecture
+
+The Design Factory is composed of multiple projects and you can install the package that fits your requirements.
+
+- `@design-factory/tokens` includes the Design Tokens that empower the Design System
+- `@design-factory/styles` includes the styles, composed of utilities and component styles
+- `@design-factory/design-factory` contains Angular components and utilities. They will be migrated to the following package
+- `@design-factory/angular` contains the new SideNav and will grow to include all Design Factory Angular components
+
+### CSS namespace feature
+
+For some specific cases, you may have to use the CSS namespace feature which allows you to apply DF styles only under a selector defined by $df-css-namespace-selector variable (by default ==.design-factory-v2==).
+In order to use this feature, just import the following:
+
+```scss
+@import '@design-factory/styles/scss/namespace';
+```
+
+in your styles.scss and add the defined selector in your HTML element where you want to apply DF style.
+
+## Dependencies
+
+The dependencies are [Angular](https://angular.io), [Bootstrap 5](https://getbootstrap.com), [Ng-bootstrap](https://ng-bootstrap.github.io), [AgnosUI](https://www.agnosui.dev), [Ng-select](https://ng-select.github.io/ng-select#/data-sources), [Ag-grid](https://www.ag-grid.com/) and [ngx-slider](https://angular-slider.github.io/ngx-slider/).
+The supported versions are:
+
+| Design Factory | Angular | Bootstrap CSS | Ng-Bootstrap | Ng-select | Ag-grid | AgnosUI |
+| -------------- | ------- | ------------- | ------------ | --------- | ------- | ------- |
+| 21.0.x         | 21.x    | 5.3.8         | 20.0.x       | 21.x      | 35.x    | 0.10.x  |
+
+## How to work with the icons
+
+Icons are a mix of [Font Awesome](https://fontawesome.com/) (FW) and in-house produced pictograms.
+
+Since DF 18.0.0 release in-house icons and FW icons are split into different fonts.

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

@@ -1,31 +1,26 @@
 import { createDrawer, createSimpleClassTransition, createNavManager, UseDirective, UseMultiDirective } from '@agnos-ui/angular-headless';
 import { fadeTransition } from '@agnos-ui/core-bootstrap';
-import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, inject, PLATFORM_ID, booleanAttribute, linkedSignal, ChangeDetectionStrategy, Component } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { input, booleanAttribute, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { AgnosWidgetDirective, callWidgetFactory } from '@design-factory/angular/internals';
-import { DfMedia } from '@design-factory/design-factory';
 
 /**
- * Utility method to check if the user agent is a mobile device
- *
- * @param userAgent - The user agent string to check
- * @returns `true` if the user agent corresponds to a mobile device, `false` otherwise
+ * Enables users to show contextual content via a sliding panel from any screen edge.
+ * @experimental
  */
-function isMobileUserAgent(userAgent) {
-    return /mobile|android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
-}
 class DfDrawerComponent extends AgnosWidgetDirective {
     constructor() {
         const widget = callWidgetFactory(createDrawer, {
             defaultConfig: {
-                className: '',
-                bodyScroll: true,
-                backdrop: false,
+                className: 'inline-start',
+                bodyScroll: false,
+                backdrop: true,
                 transition: createSimpleClassTransition({
                     showClasses: ['show']
                 }),
+                verticalTransition: createSimpleClassTransition({
+                    showClasses: ['show']
+                }),
                 backdropTransition: fadeTransition
             },
             events: {
@@ -59,13 +54,13 @@ class DfDrawerComponent extends AgnosWidgetDirective {
          *
          * @defaultValue `false`
          */
-        this.bodyScroll = input(false, ...(ngDevMode ? [{ debugName: "bodyScroll" }] : []));
+        this.bodyScroll = input(false, { ...(ngDevMode ? { debugName: "bodyScroll" } : {}), 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" }] : []));
+        this.backdrop = input(true, { ...(ngDevMode ? { debugName: "backdrop" } : {}), 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.
@@ -88,13 +83,20 @@ class DfDrawerComponent extends AgnosWidgetDirective {
          *
          * @defaultValue `false`
          */
-        this.resizable = input(false, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+        this.resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
         /**
          * If `true`, the drawer is shown; otherwise, it is hidden.
          *
          * @defaultValue `false`
          */
-        this.visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+        this.visible = input(false, { ...(ngDevMode ? { debugName: "visible" } : {}), 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 `true`
+         */
+        this.keepInDom = input(true, { ...(ngDevMode ? { debugName: "keepInDom" } : {}), transform: booleanAttribute });
         /**
          * An event emitted when the width is changed.
          *
@@ -144,6 +146,12 @@ class DfDrawerComponent extends AgnosWidgetDirective {
          * ```
          */
         this.resizingChange = output();
+        /**
+         * If `true` focuses the drawer when it is opened.
+         *
+         * @defaultValue `true`
+         */
+        this.focusOnInit = input(true, { ...(ngDevMode ? { debugName: "focusOnInit" } : {}), transform: booleanAttribute });
         this.navManager = createNavManager();
         this.navManagerConfig = {
             keys: {
@@ -163,78 +171,57 @@ class DfDrawerComponent extends AgnosWidgetDirective {
          * @defaultValue `null`
          */
         this.maxSize = output();
-        this.isSmallScreen = toSignal(inject(DfMedia).getObservable(['sm', 'xs']), { initialValue: false });
-        this.isMediumScreen = toSignal(inject(DfMedia).getObservable(['md']), { initialValue: false });
-        this.isLargeUpScreen = toSignal(inject(DfMedia).getObservable(['lg', 'xl', 'xxl', 'xxxl']), {
-            initialValue: false
-        });
-        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-        /**
-         * Flag to enable mobile device detection for responsive behavior
-         * @default true
-         */
-        this.enableMobile = input(true, { ...(ngDevMode ? { debugName: "enableMobile" } : {}), transform: booleanAttribute });
-        /**
-         * Flag to indicate if the drawer is minimized
-         */
-        this.isMinimized = linkedSignal(() => {
-            // in mobile devices, the default value is true (hiding the drawer) and does not track changes to the screen size
-            if (this.isMobileDevice) {
-                return true;
-            }
-            // in desktop, we track the large screen signal in order to reset the minimized state
-            // it allows resizing the window and have a more user-friendly behavior
-            return !this.isLargeUpScreen();
-        }, ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
-        this.isMobileDevice = (() => {
-            if (this.isBrowser) {
-                return this.enableMobile() && isMobileUserAgent(navigator.userAgent);
-            }
-            else {
-                // SSR: try to get request if available
-                try {
-                    const request = inject(Request, { optional: true });
-                    if (request && 'headers' in request) {
-                        const userAgent = request.headers.get('user-agent') || '';
-                        return this.enableMobile() && isMobileUserAgent(userAgent);
-                    }
-                }
-                catch {
-                    // Request token not available or not in SSR context
-                }
-                return false;
-            }
-        })();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", 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: `
-    <div
-      class="df-drawer d-flex"
-      [class]="_agnosWidget.state.className()"
-      [class.show]="_agnosWidget.state.visible()"
-      [auUseMulti]="[_agnosWidget.directives.drawerPortalDirective, _agnosWidget.directives.drawerDirective]"
-      [style.--df-drawer-size]="size() !== null ? size() + 'px' : ''"
-    >
-      <ng-content />
-      @if (_agnosWidget.state.resizable()) {
-        <div class="df-drawer-splitter" tabindex="-1" [auUse]="_agnosWidget.directives.splitterDirective">
-          <button
-            #splitterHandle
-            class="btn btn-outline-primary df-btn-icononly df-drawer-splitter-handle"
-            [class.df-btn-outline-neutral-mirror]="isMediumScreen() && !isMinimized()"
-            i18n-aria-label="@@df.drawer.resize.ariaLabel"
-            aria-label="Resize drawer"
-            [auUse]="[navManager.directive, navManagerConfig]"
+    /**
+     * Trigger the opening of the drawer.
+     */
+    open() {
+        this._agnosWidget.api.open();
+    }
+    /**
+     * Trigger the closing of the drawer.
+     */
+    close() {
+        this._agnosWidget.api.close();
+    }
+    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()) {
+      <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' : ''"
+      >
+        <ng-content />
+        @if (_agnosWidget.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"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 192 512" fill="currentColor">
-              <path
-                d="M16 32C7.2 32 0 39.2 0 48L0 464c0 8.8 7.2 16 16 16s16-7.2 16-16L32 48c0-8.8-7.2-16-16-16zm160 0c-8.8 0-16 7.2-16 16l0 416c0 8.8 7.2 16 16 16s16-7.2 16-16l0-416c0-8.8-7.2-16-16-16z"
-              />
-            </svg>
-          </button>
-        </div>
-      }
-    </div>
+            <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()
+                }"
+                i18n-aria-label="@@df.drawer.resize.ariaLabel"
+                aria-label="Resize drawer"
+                [auUse]="[navManager.directive, navManagerConfig]"
+              ></button>
+            </ng-content>
+          </div>
+        }
+      </div>
+    }
     @if (!_agnosWidget.state.backdropHidden()) {
       <div
         class="df-drawer-backdrop"
@@ -244,39 +231,48 @@ class DfDrawerComponent extends AgnosWidgetDirective {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: UseDirective, selector: "[auUse]", inputs: ["auUse"] }, { kind: "directive", type: UseMultiDirective, selector: "[auUseMulti]", inputs: ["auUseMulti"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfDrawerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-drawer',
                     imports: [UseDirective, UseMultiDirective],
                     template: `
-    <div
-      class="df-drawer d-flex"
-      [class]="_agnosWidget.state.className()"
-      [class.show]="_agnosWidget.state.visible()"
-      [auUseMulti]="[_agnosWidget.directives.drawerPortalDirective, _agnosWidget.directives.drawerDirective]"
-      [style.--df-drawer-size]="size() !== null ? size() + 'px' : ''"
-    >
-      <ng-content />
-      @if (_agnosWidget.state.resizable()) {
-        <div class="df-drawer-splitter" tabindex="-1" [auUse]="_agnosWidget.directives.splitterDirective">
-          <button
-            #splitterHandle
-            class="btn btn-outline-primary df-btn-icononly df-drawer-splitter-handle"
-            [class.df-btn-outline-neutral-mirror]="isMediumScreen() && !isMinimized()"
-            i18n-aria-label="@@df.drawer.resize.ariaLabel"
-            aria-label="Resize drawer"
-            [auUse]="[navManager.directive, navManagerConfig]"
+    @if (!_agnosWidget.state.hidden() || keepInDom()) {
+      <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' : ''"
+      >
+        <ng-content />
+        @if (_agnosWidget.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"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 192 512" fill="currentColor">
-              <path
-                d="M16 32C7.2 32 0 39.2 0 48L0 464c0 8.8 7.2 16 16 16s16-7.2 16-16L32 48c0-8.8-7.2-16-16-16zm160 0c-8.8 0-16 7.2-16 16l0 416c0 8.8 7.2 16 16 16s16-7.2 16-16l0-416c0-8.8-7.2-16-16-16z"
-              />
-            </svg>
-          </button>
-        </div>
-      }
-    </div>
+            <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()
+                }"
+                i18n-aria-label="@@df.drawer.resize.ariaLabel"
+                aria-label="Resize drawer"
+                [auUse]="[navManager.directive, navManagerConfig]"
+              ></button>
+            </ng-content>
+          </div>
+        }
+      </div>
+    }
     @if (!_agnosWidget.state.backdropHidden()) {
       <div
         class="df-drawer-backdrop"
@@ -287,7 +283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
   `,
                     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 }] }], 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"] }], minSize: [{ type: i0.Output, args: ["minSize"] }], maxSize: [{ type: i0.Output, args: ["maxSize"] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }] } });
+        }], 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"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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 { isPlatformBrowser } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  linkedSignal,\n  model,\n  output,\n  PLATFORM_ID\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { AgnosWidgetDirective, callWidgetFactory } from '@design-factory/angular/internals';\nimport { DfMedia } from '@design-factory/design-factory';\n\n/**\n * Utility method to check if the user agent is a mobile device\n *\n * @param userAgent - The user agent string to check\n * @returns `true` if the user agent corresponds to a mobile device, `false` otherwise\n */\nfunction isMobileUserAgent(userAgent: string): boolean {\n  return /mobile|android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);\n}\n\n@Component({\n  selector: 'df-drawer',\n  imports: [UseDirective, UseMultiDirective],\n  template: `\n    <div\n      class=\"df-drawer d-flex\"\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 class=\"df-drawer-splitter\" tabindex=\"-1\" [auUse]=\"_agnosWidget.directives.splitterDirective\">\n          <button\n            #splitterHandle\n            class=\"btn btn-outline-primary df-btn-icononly df-drawer-splitter-handle\"\n            [class.df-btn-outline-neutral-mirror]=\"isMediumScreen() && !isMinimized()\"\n            i18n-aria-label=\"@@df.drawer.resize.ariaLabel\"\n            aria-label=\"Resize drawer\"\n            [auUse]=\"[navManager.directive, navManagerConfig]\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 192 512\" fill=\"currentColor\">\n              <path\n                d=\"M16 32C7.2 32 0 39.2 0 48L0 464c0 8.8 7.2 16 16 16s16-7.2 16-16L32 48c0-8.8-7.2-16-16-16zm160 0c-8.8 0-16 7.2-16 16l0 416c0 8.8 7.2 16 16 16s16-7.2 16-16l0-416c0-8.8-7.2-16-16-16z\"\n              />\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\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<boolean>(false);\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<boolean>(true);\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<boolean>(false);\n  /**\n   * If `true`, the drawer is shown; otherwise, it is hidden.\n   *\n   * @defaultValue `false`\n   */\n  readonly visible = input<boolean>(false);\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  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  protected readonly isSmallScreen = toSignal(inject(DfMedia).getObservable(['sm', 'xs']), { initialValue: false });\n  protected readonly isMediumScreen = toSignal(inject(DfMedia).getObservable(['md']), { initialValue: false });\n  protected readonly isLargeUpScreen = toSignal(inject(DfMedia).getObservable(['lg', 'xl', 'xxl', 'xxxl']), {\n    initialValue: false\n  });\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n  /**\n   * Flag to enable mobile device detection for responsive behavior\n   * @default true\n   */\n  readonly enableMobile = input(true, { transform: booleanAttribute });\n\n  /**\n   * Flag to indicate if the drawer is minimized\n   */\n  readonly isMinimized = linkedSignal(() => {\n    // in mobile devices, the default value is true (hiding the drawer) and does not track changes to the screen size\n    if (this.isMobileDevice) {\n      return true;\n    }\n    // in desktop, we track the large screen signal in order to reset the minimized state\n    // it allows resizing the window and have a more user-friendly behavior\n    return !this.isLargeUpScreen();\n  });\n\n  protected readonly isMobileDevice = (() => {\n    if (this.isBrowser) {\n      return this.enableMobile() && isMobileUserAgent(navigator.userAgent);\n    } else {\n      // SSR: try to get request if available\n      try {\n        const request = inject(Request, { optional: true });\n        if (request && 'headers' in request) {\n          const userAgent = request.headers.get('user-agent') || '';\n          return this.enableMobile() && isMobileUserAgent(userAgent);\n        }\n      } catch {\n        // Request token not available or not in SSR context\n      }\n      return false;\n    }\n  })();\n\n  constructor() {\n    const widget = callWidgetFactory(createDrawer, {\n      defaultConfig: {\n        className: '',\n        bodyScroll: true,\n        backdrop: false,\n        transition: 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 * 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 { 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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"}

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

@@ -96,10 +96,10 @@ class AgnosWidgetDirective {
     ngAfterContentChecked() {
         this._agnosWidget.updateSlots();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AgnosWidgetDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AgnosWidgetDirective, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AgnosWidgetDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: AgnosWidgetDirective, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AgnosWidgetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AgnosWidgetDirective, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }] });