@design-factory/angular 21.0.0-next.0

package/LICENSE

@@ -0,0 +1,26 @@
+Copyright Amadeus SAS
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation and/or
+other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+may be used to endorse or promote products derived from this software without
+specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,3 @@
+<h1 align="center">Amadeus Design Factory Angular implementation</h1>
+
+TODO

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

@@ -0,0 +1,55 @@
+import { provideDfComponentConfig, injectDfComponentConfig } from '@design-factory/angular/internals';
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+// the key of the accordion config in the global DF config
+const ACCORDION_CONFIG_KEY = 'accordion';
+/**
+ * Provides the configuration for the accordion component.
+ *
+ * @example
+ * ```ts
+ * \@Component({
+ *   providers: [provideDfAccordionConfig({ closeOthers: true })]
+ * })
+ * export class MyHomeComponent {}
+ * ```
+ *
+ * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.
+ */
+const provideDfAccordionConfig = provideDfComponentConfig(ACCORDION_CONFIG_KEY);
+/**
+ * Injects the configuration for the accordion component.
+ *
+ * @example
+ * ```ts
+ * \@Component({
+ *   providers: [provideDfAccordionConfig()]
+ * })
+ * export class MyAccordionComponent {
+ *   readonly accordionConfig = injectDfAccordionConfig();
+ * }
+ * ```
+ *
+ * @returns A writable signal containing the accordion configuration.
+ */
+const injectDfAccordionConfig = injectDfComponentConfig(ACCORDION_CONFIG_KEY);
+
+class DfAccordionComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DfAccordionComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DfAccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ACCORDION_CONFIG_KEY, DfAccordionComponent, injectDfAccordionConfig, provideDfAccordionConfig };
+//# sourceMappingURL=design-factory-angular-accordion.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-accordion.mjs","sources":["../../accordion/accordion.config.ts","../../accordion/accordion.ts","../../accordion/design-factory-angular-accordion.ts"],"sourcesContent":["import { injectDfComponentConfig, provideDfComponentConfig } from '@design-factory/angular/internals';\n\n// TODO to fill\nexport type DfAccordionConfig = {\n  /**\n   * example prop\n   */\n  closeOthers: boolean;\n};\n\n// the key of the accordion config in the global DF config\nexport const ACCORDION_CONFIG_KEY = 'accordion' as const;\n\n/**\n * Provides the configuration for the accordion component.\n *\n * @example\n * ```ts\n * \\@Component({\n *   providers: [provideDfAccordionConfig({ closeOthers: true })]\n * })\n * export class MyHomeComponent {}\n * ```\n *\n * @param config - Partial configuration or a function that receives the parent configuration and returns a partial configuration.\n */\nexport const provideDfAccordionConfig = provideDfComponentConfig<DfAccordionConfig>(ACCORDION_CONFIG_KEY);\n\n/**\n * Injects the configuration for the accordion component.\n *\n * @example\n * ```ts\n * \\@Component({\n *   providers: [provideDfAccordionConfig()]\n * })\n * export class MyAccordionComponent {\n *   readonly accordionConfig = injectDfAccordionConfig();\n * }\n * ```\n *\n * @returns A writable signal containing the accordion configuration.\n */\nexport const injectDfAccordionConfig = injectDfComponentConfig<DfAccordionConfig>(ACCORDION_CONFIG_KEY);\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  template: ``,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DfAccordionComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAUA;AACO,MAAM,oBAAoB,GAAG;AAEpC;;;;;;;;;;;;AAYG;MACU,wBAAwB,GAAG,wBAAwB,CAAoB,oBAAoB;AAExG;;;;;;;;;;;;;;AAcG;MACU,uBAAuB,GAAG,uBAAuB,CAAoB,oBAAoB;;MCrCzF,oBAAoB,CAAA;8GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,wEAHrB,CAAA,CAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGD,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,CAAA,CAAE;oBACZ,eAAe,EAAE,uBAAuB,CAAC;AAC1C,iBAAA;;;ACLD;;AAEG;;;;"}

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

@@ -0,0 +1,22 @@
+import { toAngularWritableSignal } from '@agnos-ui/angular-headless';
+import '@design-factory/angular/accordion';
+import { provideWidgetsConfig, injectWidgetsConfig } from '@design-factory/angular/internals';
+
+/**
+ * TODO write clear and simple doc
+ */
+const provideDfConfig = (config) => provideWidgetsConfig(typeof config === 'function' ? config : (parentConfig) => ({ ...parentConfig, ...(config ?? {}) }));
+/**
+ * TODO write clear and simple doc
+ */
+const injectDFConfig = () => {
+    const widgetsConfigStore = injectWidgetsConfig();
+    return toAngularWritableSignal(widgetsConfigStore.own$);
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { injectDFConfig, provideDfConfig };
+//# sourceMappingURL=design-factory-angular-config.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-config.mjs","sources":["../../config/config.ts","../../config/design-factory-angular-config.ts"],"sourcesContent":["import { toAngularWritableSignal, type WidgetsConfigStore, type Partial2Levels } from '@agnos-ui/angular-headless';\nimport type { FactoryProvider } from '@angular/core';\nimport { ACCORDION_CONFIG_KEY, DfAccordionConfig } from '@design-factory/angular/accordion';\nimport { provideWidgetsConfig, injectWidgetsConfig } from '@design-factory/angular/internals';\n\n/**\n * The configuration type for config-customizable DF components.\n */\nexport type DfConfig = {\n  [ACCORDION_CONFIG_KEY]: DfAccordionConfig;\n};\n\n/**\n * TODO write clear and simple doc\n */\nexport const provideDfConfig = (\n  config?: Partial2Levels<DfConfig> | ((parentConfig: Partial2Levels<DfConfig>) => Partial2Levels<DfConfig>)\n): FactoryProvider =>\n  provideWidgetsConfig(\n    typeof config === 'function' ? config : (parentConfig) => ({ ...parentConfig, ...(config ?? {}) })\n  );\n\n/**\n * TODO write clear and simple doc\n */\nexport const injectDFConfig = () => {\n  const widgetsConfigStore = injectWidgetsConfig() as WidgetsConfigStore<DfConfig>;\n  return toAngularWritableSignal(widgetsConfigStore.own$);\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAYA;;AAEG;AACI,MAAM,eAAe,GAAG,CAC7B,MAA0G,KAE1G,oBAAoB,CAClB,OAAO,MAAM,KAAK,UAAU,GAAG,MAAM,GAAG,CAAC,YAAY,MAAM,EAAE,GAAG,YAAY,EAAE,IAAI,MAAM,IAAI,EAAE,CAAC,EAAE,CAAC;AAGtG;;AAEG;AACI,MAAM,cAAc,GAAG,MAAK;AACjC,IAAA,MAAM,kBAAkB,GAAG,mBAAmB,EAAkC;AAChF,IAAA,OAAO,uBAAuB,CAAC,kBAAkB,CAAC,IAAI,CAAC;AACzD;;AC5BA;;AAEG;;;;"}

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

@@ -0,0 +1,297 @@
+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 { 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
+ */
+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,
+                transition: createSimpleClassTransition({
+                    showClasses: ['show']
+                }),
+                backdropTransition: fadeTransition
+            },
+            events: {
+                onSizeChange: (size) => {
+                    this.size.set(size);
+                    this.sizeChange.emit(size);
+                },
+                onVisibleChange: (visible) => {
+                    this.visibleChange.emit(visible);
+                },
+                onMinimizedChange: (isMinimized) => {
+                    this.minimizedChange.emit(isMinimized);
+                },
+                onMaximizedChange: (isMaximized) => {
+                    this.maximizedChange.emit(isMaximized);
+                },
+                onResizingChange: (isResizing) => {
+                    this.resizingChange.emit(isResizing);
+                }
+            }
+        });
+        super(widget);
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue ``
+         */
+        this.className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+        /**
+         * If `true` allows body scrolling when the drawer is open.
+         *
+         * @defaultValue `false`
+         */
+        this.bodyScroll = input(false, ...(ngDevMode ? [{ debugName: "bodyScroll" }] : []));
+        /**
+         * 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" }] : []));
+        /**
+         * 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
+         * ```
+         */
+        this.container = input(null, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        /**
+         * The size of the drawer in pixels.
+         *
+         * @defaultValue `300`
+         */
+        this.size = model(300, ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /**
+         * If `true`, the drawer can be resized by the user.
+         *
+         * @defaultValue `false`
+         */
+        this.resizable = input(false, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
+        /**
+         * If `true`, the drawer is shown; otherwise, it is hidden.
+         *
+         * @defaultValue `false`
+         */
+        this.visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+        /**
+         * An event emitted when the width is changed.
+         *
+         * Event payload is equal to the newly selected width.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.sizeChange = output();
+        /**
+         * Event to be triggered when the visible property changes.
+         *
+         * @param visible - new value of the visible propery
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.visibleChange = output();
+        /**
+         * Event to be triggered when the minimized state changes.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.minimizedChange = output();
+        /**
+         *  Event to be triggered when the maximized state changes.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.maximizedChange = output();
+        /**
+         * Event to be triggered when the user start or stop moving the drawer.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.resizingChange = output();
+        this.navManager = createNavManager();
+        this.navManagerConfig = {
+            keys: {
+                Home: this.navManager.focusFirst,
+                End: this.navManager.focusLast
+            }
+        };
+        /**
+         * Event to be triggered when the minimum size is reached.
+         *
+         * @defaultValue `null`
+         */
+        this.minSize = output();
+        /**
+         * Event to be triggered when the maximum size is reached.
+         *
+         * @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]"
+          >
+            <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>
+    @if (!_agnosWidget.state.backdropHidden()) {
+      <div
+        class="df-drawer-backdrop"
+        [class.show]="_agnosWidget.state.visible()"
+        [auUseMulti]="[_agnosWidget.directives.backdropPortalDirective, _agnosWidget.directives.backdropDirective]"
+      ></div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: UseDirective, selector: "[auUse]", inputs: ["auUse"] }, { kind: "directive", type: UseMultiDirective, selector: "[auUseMulti]", inputs: ["auUseMulti"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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]"
+          >
+            <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>
+    @if (!_agnosWidget.state.backdropHidden()) {
+      <div
+        class="df-drawer-backdrop"
+        [class.show]="_agnosWidget.state.visible()"
+        [auUseMulti]="[_agnosWidget.directives.backdropPortalDirective, _agnosWidget.directives.backdropDirective]"
+      ></div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], bodyScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyScroll", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DfDrawerComponent };
+//# sourceMappingURL=design-factory-angular-drawer.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,111 @@
+import { widgetsConfigFactory, createWidgetsConfig, toAngularWritableSignal } from '@agnos-ui/angular-headless';
+import { asWritable, computed } from '@amadeus-it-group/tansu';
+import * as i0 from '@angular/core';
+import { InjectionToken, Directive } from '@angular/core';
+
+const widgetFactories = widgetsConfigFactory(new InjectionToken('dfConfig', {
+    providedIn: 'root',
+    factory: () => createWidgetsConfig()
+}));
+const provideWidgetsConfig = widgetFactories.provideWidgetsConfig;
+const injectWidgetsConfig = widgetFactories.injectWidgetsConfig;
+/**
+ * Creates and initializes a widget using the provided factory and configuration options.
+ *
+ * The resulting widget can be easily hooked into the lifecycle of an Angular component through {@link BaseWidgetDirective}.
+ *
+ * @template W - The type of the widget.
+ * @param factory - The factory function to create the widget.
+ * @param options - The options for creating the widget.
+ * @param options.defaultConfig - The default configuration for the widget.
+ * @param options.events - The event handlers for the widget.
+ * @param options.slotTemplates - A function that returns the slot templates for the widget.
+ * @param options.slotChildren - A function that returns the slot children for the widget.
+ * @param options.afterInit - A callback function to be called after the widget is initialized.
+ * @returns The initialized widget.
+ */
+const callWidgetFactory = widgetFactories.callWidgetFactory;
+/**
+ * Utility to provide configuration for a specific DF component.
+ *
+ * @example
+ * ```typescript
+ * export const provideDfCollapseConfig = provideDfComponentConfig<DfCollapseConfig>(COLLAPSE_CONFIG_KEY);
+ * ```
+ *
+ * @param componentKey the key of the component in the global configuration
+ * @returns the component config provider
+ */
+const provideDfComponentConfig = (componentKey) => {
+    return (config) => {
+        const typedProvideWidgetsConfig = provideWidgetsConfig;
+        return typedProvideWidgetsConfig((prevConfig) => ({
+            ...prevConfig,
+            [componentKey]: {
+                ...(prevConfig?.[componentKey] ?? {}),
+                ...(typeof config === 'function' ? config(prevConfig?.[componentKey] ?? {}) : (config ?? {}))
+            }
+        }));
+    };
+};
+/**
+ * Utility to inject writable configuration for a specific DF component.
+ *
+ * @example
+ * ```typescript
+ * export const injectDfCollapseConfig = injectDfComponentConfig<DfCollapseConfig>(COLLAPSE_CONFIG_KEY);
+ * ```
+ *
+ * @param componentKey the key of the component in the global configuration
+ * @returns the inject function that returns the writable component configuration
+ */
+const injectDfComponentConfig = (componentKey) => () => {
+    const widgetsConfigStore = injectWidgetsConfig();
+    const componentConfigStore = asWritable(computed(() => widgetsConfigStore.own$()[componentKey] ?? {}), (newConfig) => {
+        widgetsConfigStore.own$.update((currentConfig) => ({ ...currentConfig, [componentKey]: newConfig }));
+    });
+    return toAngularWritableSignal(componentConfigStore);
+};
+
+/**
+ * An abstract base class for widget directives, providing common functionality
+ * for Angular components that interact with widgets.
+ *
+ * @template W - The type of the widget.
+ */
+class AgnosWidgetDirective {
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(_agnosWidget) {
+        this._agnosWidget = _agnosWidget;
+    }
+    /** @internal */
+    ngOnChanges(changes) {
+        const patchData = {};
+        for (const [key, simpleChange] of Object.entries(changes)) {
+            if (simpleChange !== undefined) {
+                patchData[key] = simpleChange.currentValue;
+            }
+        }
+        this._agnosWidget.patch(patchData);
+    }
+    /** @internal */
+    ngOnInit() {
+        this._agnosWidget.ngInit();
+    }
+    /** @internal */
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AgnosWidgetDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AgnosWidgetDirective, callWidgetFactory, injectDfComponentConfig, injectWidgetsConfig, provideDfComponentConfig, provideWidgetsConfig };
+//# sourceMappingURL=design-factory-angular-internals.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"design-factory-angular-internals.mjs","sources":["../../internals/config.ts","../../internals/widget.directive.ts","../../internals/design-factory-angular-internals.ts"],"sourcesContent":["import type { WidgetsConfigStore } from '@agnos-ui/angular-headless';\nimport { createWidgetsConfig, toAngularWritableSignal, widgetsConfigFactory } from '@agnos-ui/angular-headless';\nimport { asWritable, computed, type ReadableSignal } from '@amadeus-it-group/tansu';\nimport type { FactoryProvider } from '@angular/core';\nimport { InjectionToken } from '@angular/core';\n\nconst widgetFactories = widgetsConfigFactory(\n  new InjectionToken<WidgetsConfigStore<unknown>>('dfConfig', {\n    providedIn: 'root',\n    factory: () => createWidgetsConfig()\n  })\n);\n\nexport const provideWidgetsConfig = widgetFactories.provideWidgetsConfig;\n\nexport const injectWidgetsConfig = widgetFactories.injectWidgetsConfig;\n\n/**\n * Creates and initializes a widget using the provided factory and configuration options.\n *\n * The resulting widget can be easily hooked into the lifecycle of an Angular component through {@link BaseWidgetDirective}.\n *\n * @template W - The type of the widget.\n * @param factory - The factory function to create the widget.\n * @param options - The options for creating the widget.\n * @param options.defaultConfig - The default configuration for the widget.\n * @param options.events - The event handlers for the widget.\n * @param options.slotTemplates - A function that returns the slot templates for the widget.\n * @param options.slotChildren - A function that returns the slot children for the widget.\n * @param options.afterInit - A callback function to be called after the widget is initialized.\n * @returns The initialized widget.\n */\nexport const callWidgetFactory = widgetFactories.callWidgetFactory;\n\n/**\n * Utility to provide configuration for a specific DF component.\n *\n * @example\n * ```typescript\n * export const provideDfCollapseConfig = provideDfComponentConfig<DfCollapseConfig>(COLLAPSE_CONFIG_KEY);\n * ```\n *\n * @param componentKey the key of the component in the global configuration\n * @returns the component config provider\n */\nexport const provideDfComponentConfig = <T>(componentKey: string) => {\n  return (config?: Partial<T> | ((prevConfig: Partial<T>) => Partial<T>)) => {\n    const typedProvideWidgetsConfig = provideWidgetsConfig as (\n      adaptParentConfig?: (parentConfig: { [componentKey]?: Partial<T> }) => { [componentKey]?: Partial<T> }\n    ) => FactoryProvider;\n    return typedProvideWidgetsConfig((prevConfig) => ({\n      ...prevConfig,\n      [componentKey]: {\n        ...(prevConfig?.[componentKey] ?? {}),\n        ...(typeof config === 'function' ? config(prevConfig?.[componentKey] ?? {}) : (config ?? {}))\n      }\n    }));\n  };\n};\n\n/**\n * Utility to inject writable configuration for a specific DF component.\n *\n * @example\n * ```typescript\n * export const injectDfCollapseConfig = injectDfComponentConfig<DfCollapseConfig>(COLLAPSE_CONFIG_KEY);\n * ```\n *\n * @param componentKey the key of the component in the global configuration\n * @returns the inject function that returns the writable component configuration\n */\nexport const injectDfComponentConfig =\n  <T>(componentKey: string) =>\n  () => {\n    const widgetsConfigStore = injectWidgetsConfig() as WidgetsConfigStore<{ [componentKey]?: Partial<T> }>;\n    const componentConfigStore = asWritable(\n      computed(() => widgetsConfigStore.own$()[componentKey] ?? {}) as ReadableSignal<Partial<T>>,\n      (newConfig: Partial<T>) => {\n        widgetsConfigStore.own$.update((currentConfig) => ({ ...currentConfig, [componentKey]: newConfig }));\n      }\n    );\n    return toAngularWritableSignal(componentConfigStore);\n  };\n","import { AngularWidget, Widget } from '@agnos-ui/angular-headless';\nimport { AfterContentChecked, Directive, OnChanges, OnInit, SimpleChanges } from '@angular/core';\n\n/**\n * An abstract base class for widget directives, providing common functionality\n * for Angular components that interact with widgets.\n *\n * @template W - The type of the widget.\n */\n@Directive()\nexport abstract class AgnosWidgetDirective<W extends Widget> implements OnChanges, OnInit, AfterContentChecked {\n  // eslint-disable-next-line @angular-eslint/prefer-inject\n  constructor(protected readonly _agnosWidget: AngularWidget<W>) {}\n\n  /** @internal */\n  ngOnChanges(changes: SimpleChanges): void {\n    const patchData: any = {};\n    for (const [key, simpleChange] of Object.entries(changes)) {\n      if (simpleChange !== undefined) {\n        patchData[key] = simpleChange.currentValue;\n      }\n    }\n    this._agnosWidget.patch(patchData);\n  }\n\n  /** @internal */\n  ngOnInit(): void {\n    this._agnosWidget.ngInit();\n  }\n\n  /** @internal */\n  ngAfterContentChecked(): void {\n    this._agnosWidget.updateSlots();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAMA,MAAM,eAAe,GAAG,oBAAoB,CAC1C,IAAI,cAAc,CAA8B,UAAU,EAAE;AAC1D,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,mBAAmB;AACnC,CAAA,CAAC,CACH;AAEM,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAE7C,MAAM,mBAAmB,GAAG,eAAe,CAAC;AAEnD;;;;;;;;;;;;;;AAcG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAEjD;;;;;;;;;;AAUG;AACI,MAAM,wBAAwB,GAAG,CAAI,YAAoB,KAAI;IAClE,OAAO,CAAC,MAA8D,KAAI;QACxE,MAAM,yBAAyB,GAAG,oBAEd;AACpB,QAAA,OAAO,yBAAyB,CAAC,CAAC,UAAU,MAAM;AAChD,YAAA,GAAG,UAAU;YACb,CAAC,YAAY,GAAG;gBACd,IAAI,UAAU,GAAG,YAAY,CAAC,IAAI,EAAE,CAAC;gBACrC,IAAI,OAAO,MAAM,KAAK,UAAU,GAAG,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,IAAI,EAAE,CAAC,IAAI,MAAM,IAAI,EAAE,CAAC;AAC7F;AACF,SAAA,CAAC,CAAC;AACL,IAAA,CAAC;AACH;AAEA;;;;;;;;;;AAUG;AACI,MAAM,uBAAuB,GAClC,CAAI,YAAoB,KACxB,MAAK;AACH,IAAA,MAAM,kBAAkB,GAAG,mBAAmB,EAAyD;IACvG,MAAM,oBAAoB,GAAG,UAAU,CACrC,QAAQ,CAAC,MAAM,kBAAkB,CAAC,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,CAA+B,EAC3F,CAAC,SAAqB,KAAI;QACxB,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,aAAa,MAAM,EAAE,GAAG,aAAa,EAAE,CAAC,YAAY,GAAG,SAAS,EAAE,CAAC,CAAC;AACtG,IAAA,CAAC,CACF;AACD,IAAA,OAAO,uBAAuB,CAAC,oBAAoB,CAAC;AACtD;;AC/EF;;;;;AAKG;MAEmB,oBAAoB,CAAA;;AAExC,IAAA,WAAA,CAA+B,YAA8B,EAAA;QAA9B,IAAA,CAAA,YAAY,GAAZ,YAAY;IAAqB;;AAGhE,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,MAAM,SAAS,GAAQ,EAAE;AACzB,QAAA,KAAK,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;AACzD,YAAA,IAAI,YAAY,KAAK,SAAS,EAAE;AAC9B,gBAAA,SAAS,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,YAAY;YAC5C;QACF;AACA,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC;IACpC;;IAGA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;IAC5B;;IAGA,qBAAqB,GAAA;AACnB,QAAA,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE;IACjC;8GAvBoB,oBAAoB,EAAA,IAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADzC;;;ACTD;;AAEG;;;;"}