@design-factory/core 21.1.0-next.1

package/drawer-BIIfJa0F.js

@@ -0,0 +1,329 @@
+import { computed, asWritable, readable, writable, untrack } from "@amadeus-it-group/tansu";
+import { focusElement } from "./services/focusElement.js";
+import { createPointerdownPositionDirective } from "./services/pointerdownPosition.js";
+import { portal } from "./services/portal.js";
+import { siblingsInert } from "./services/siblingsInert.js";
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { b as bindDirective, i as createBrowserStoreDirective, s as mergeDirectives, g as createAttributesDirective, q as isBrowserHTMLElement, f as conditionalDirective, o as directiveSubscribe } from "./directive-CNNSo5Yn.js";
+import { noop } from "./utils/func.js";
+import { a as revertScrollbars, r as removeScrollbars } from "./scrollbars-CcxSrnCx.js";
+import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
+import { createWidgetFactory } from "./utils/widget.js";
+import { b as typeBoolean, i as typeNumberOrNull, e as typeFunction, f as typeHTMLElementOrNull, j as typeString, c as createTypeEnum } from "./writables-DYGjj5T3.js";
+import { g as getTextDirection } from "./textDirection-cNgt24LJ.js";
+function getDrawerDefaultConfig() {
+  return {
+    ...defaultDrawerConfig
+  };
+}
+const defaultDrawerConfig = {
+  animated: true,
+  ariaDescribedBy: "",
+  ariaLabelledBy: "",
+  backdropClass: "",
+  backdropTransition: noop,
+  className: "",
+  visible: false,
+  container: typeof window !== "undefined" ? document.body : null,
+  transition: noop,
+  verticalTransition: noop,
+  onHidden: noop,
+  onShown: noop,
+  onSizeChange: noop,
+  onVisibleChange: noop,
+  onMinimizedChange: noop,
+  onMaximizedChange: noop,
+  onResizingChange: noop,
+  resizable: false,
+  backdrop: true,
+  bodyScroll: false,
+  size: null,
+  focusOnInit: true,
+  configuration: "overlay",
+  position: "inline-start"
+};
+const configValidator = {
+  animated: typeBoolean,
+  ariaDescribedBy: typeString,
+  ariaLabelledBy: typeString,
+  backdropClass: typeString,
+  backdropTransition: typeFunction,
+  className: typeString,
+  visible: typeBoolean,
+  transition: typeFunction,
+  verticalTransition: typeFunction,
+  container: typeHTMLElementOrNull,
+  onHidden: typeFunction,
+  onShown: typeFunction,
+  onSizeChange: typeFunction,
+  onVisibleChange: typeFunction,
+  onMinimizedChange: typeFunction,
+  onMaximizedChange: typeFunction,
+  onResizingChange: typeFunction,
+  resizable: typeBoolean,
+  backdrop: typeBoolean,
+  bodyScroll: typeBoolean,
+  size: typeNumberOrNull,
+  focusOnInit: typeBoolean,
+  configuration: createTypeEnum(["inline", "overlay"]),
+  position: createTypeEnum(["inline-start", "inline-end", "block-start", "block-end"])
+};
+const createDrawer = createWidgetFactory(
+  "drawer",
+  (config) => {
+    const [
+      {
+        backdrop$: _backdrop$,
+        backdropTransition$,
+        backdropClass$,
+        bodyScroll$: _bodyScroll$,
+        transition$,
+        verticalTransition$,
+        visible$: requestedVisible$,
+        container$: _container$,
+        className$,
+        size$: _dirtySize$,
+        animated$,
+        ariaDescribedBy$,
+        ariaLabelledBy$,
+        onHidden$,
+        onShown$,
+        onSizeChange$,
+        onVisibleChange$,
+        onMinimizedChange$,
+        onMaximizedChange$,
+        onResizingChange$,
+        focusOnInit$,
+        configuration$,
+        position$,
+        ...stateProps
+      },
+      patch
+    ] = writablesForProps(defaultDrawerConfig, config, configValidator);
+    const inline$ = computed(() => configuration$() === "inline");
+    const backdrop$ = computed(() => inline$() ? false : _backdrop$());
+    const bodyScroll$ = computed(() => inline$() ? true : _bodyScroll$());
+    const container$ = computed(() => inline$() ? null : _container$());
+    const size$ = bindableProp(_dirtySize$, onSizeChange$, (value) => value ? Math.round(value) : value);
+    const isVertical$ = computed(() => {
+      const position = position$();
+      return position === "block-start" || position === "block-end";
+    });
+    const combinedClass$ = computed(() => `df-${position$()} ${className$()}`);
+    const transition = createTransition({
+      props: {
+        animated: animated$,
+        animatedOnInit: animated$,
+        transition: asWritable(computed(() => isVertical$() ? verticalTransition$() : transition$())),
+        visible: requestedVisible$,
+        onVisibleChange: onVisibleChange$,
+        onHidden: onHidden$,
+        onShown: onShown$
+      }
+    });
+    const drawerPortalDirective = bindDirective(
+      portal,
+      computed(() => ({ container: container$() }))
+    );
+    const { directive: drawerElementDirective, element$: drawerElement$ } = createBrowserStoreDirective();
+    const drawerAttributeDirective = mergeDirectives(
+      drawerElementDirective,
+      createAttributesDirective(() => ({
+        attributes: {
+          class: combinedClass$,
+          role: computed(() => inline$() ? "complementary" : "dialog"),
+          "aria-describedby": computed(() => ariaDescribedBy$() || void 0),
+          "aria-labelledby": computed(() => ariaLabelledBy$() || void 0),
+          "aria-modal": computed(() => inline$() ? void 0 : "true"),
+          tabIndex: readable("-1")
+        },
+        styles: {
+          position: computed(() => {
+            if (inline$()) {
+              return "relative";
+            }
+            const container = container$();
+            return container && isBrowserHTMLElement(container) && container !== document.body ? "relative" : "fixed";
+          }),
+          outline: readable("none")
+        },
+        events: {
+          keydown: (e) => {
+            if (e.key === "Escape") {
+              void transition.api.hide();
+            }
+          }
+        }
+      }))
+    );
+    const backdropTransition = createTransition({
+      props: {
+        animated: animated$,
+        transition: backdropTransition$
+      }
+    });
+    const backdropPortalDirective = bindDirective(
+      portal,
+      computed(() => {
+        const container = container$();
+        const element = container ? transition.stores.element$() : void 0;
+        return {
+          container,
+          insertBefore: element?.parentElement === container ? element : void 0
+        };
+      })
+    );
+    const backdropHidden$ = computed(() => {
+      if (!bodyScroll$()) {
+        if (hidden$()) {
+          revertScrollbars();
+        } else {
+          removeScrollbars();
+        }
+      }
+      return !backdrop$() || hidden$();
+    });
+    const backdropAttributeDirective = createAttributesDirective(() => ({
+      attributes: {
+        class: backdropClass$,
+        "data-agnos-ignore-inert": true$
+      },
+      events: {
+        click: () => void transition.api.hide()
+      }
+    }));
+    const direction$ = computed(() => {
+      const position = position$();
+      return position === "inline-start" || position === "block-start" ? 1 : -1;
+    });
+    const isMinimized$ = writable(void 0);
+    const isMaximized$ = writable(void 0);
+    function setSize(size) {
+      const drawerElement = drawerElement$();
+      const isVertical = isVertical$();
+      size = Math.round(Math.max(0, size));
+      drawerElement.style[isVertical ? "height" : "width"] = `${size}px`;
+      const elementSize = Math.round(drawerElement[isVertical ? "offsetHeight" : "offsetWidth"]);
+      size$.set(elementSize);
+      isMinimized$.set(size != null && (size < elementSize || size === 0));
+      isMaximized$.set(!!size && size > elementSize);
+      return elementSize;
+    }
+    const splitterDirective = mergeDirectives(
+      createPointerdownPositionDirective((event) => {
+        const drawerElement = drawerElement$();
+        const isVertical = isVertical$();
+        const documentDirection = getTextDirection(drawerElement) === "ltr" ? 1 : -1;
+        const directionFactor = isVertical ? 1 : documentDirection;
+        const startSize = drawerElement[isVertical ? "offsetHeight" : "offsetWidth"];
+        const clientXorY = isVertical ? "clientY" : "clientX";
+        const startPos = event[clientXorY];
+        const direction = direction$();
+        let isResizing = false;
+        return {
+          onMove(event2) {
+            setSize(startSize + directionFactor * direction * (event2[clientXorY] - startPos));
+            if (!isResizing) {
+              isResizing = true;
+              onResizingChange$()(true);
+            }
+          },
+          onEnd() {
+            drawerElement.style[isVertical ? "height" : "width"] = "";
+            if (isResizing) {
+              onResizingChange$()(false);
+              isResizing = false;
+            }
+          }
+        };
+      }),
+      createAttributesDirective(() => ({
+        events: {
+          keydown: (e) => {
+            const { key } = e;
+            const size = size$() || drawerElement$()?.[isVertical$() ? "offsetHeight" : "offsetWidth"];
+            if (size != null) {
+              switch (key) {
+                case "ArrowLeft":
+                case "ArrowDown":
+                  onResizingChange$()(true);
+                  setSize(size - 10);
+                  onResizingChange$()(false);
+                  break;
+                case "ArrowRight":
+                case "ArrowUp":
+                  onResizingChange$()(true);
+                  setSize(size + 10);
+                  onResizingChange$()(false);
+                  break;
+              }
+            }
+          }
+        }
+      }))
+    );
+    const visible$ = transition.stores.visible$;
+    const transitioning$ = computed(
+      () => transition.stores.transitioning$() || backdropTransition.stores.transitioning$()
+    );
+    const hidden$ = computed(() => !transitioning$() && !visible$());
+    const minSizeAction$ = computed(() => {
+      const isMinimized = isMinimized$();
+      if (isMinimized != null) {
+        untrack(() => onMinimizedChange$()(isMinimized));
+      }
+    });
+    const maxSizeAction$ = computed(() => {
+      const isMaximized = isMaximized$();
+      if (isMaximized != null) {
+        untrack(() => onMaximizedChange$()(isMaximized));
+      }
+    });
+    const action$ = computed(() => {
+      minSizeAction$();
+      maxSizeAction$();
+    });
+    const widget = {
+      ...stateStores({
+        ...stateProps,
+        backdropClass$,
+        className$,
+        position$,
+        container$,
+        size$,
+        visible$,
+        backdropHidden$,
+        hidden$,
+        isVertical$,
+        configuration$
+      }),
+      patch,
+      api: {
+        open: transition.api.show,
+        close: transition.api.hide
+      },
+      directives: {
+        drawerPortalDirective,
+        drawerDirective: mergeDirectives(
+          directiveSubscribe(action$),
+          drawerAttributeDirective,
+          bindDirective(
+            siblingsInert,
+            computed(() => !bodyScroll$())
+          ),
+          // This directive must come after the attribute directive, to ensure that all the classes and attributes are applied for the transition
+          transition.directives.directive,
+          conditionalDirective(focusElement, focusOnInit$)
+        ),
+        backdropPortalDirective,
+        backdropDirective: mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+        splitterDirective
+      }
+    };
+    return widget;
+  }
+);
+export {
+  createDrawer as c,
+  getDrawerDefaultConfig as g
+};

package/drawer-C8ojtwIn.cjs

@@ -0,0 +1,328 @@
+"use strict";
+const tansu = require("@amadeus-it-group/tansu");
+const services_focusElement = require("./services/focusElement.cjs");
+const services_pointerdownPosition = require("./services/pointerdownPosition.cjs");
+const services_portal = require("./services/portal.cjs");
+const services_siblingsInert = require("./services/siblingsInert.cjs");
+const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
+const utils_directive = require("./directive-DyTodNPd.cjs");
+const utils_func = require("./utils/func.cjs");
+const scrollbars = require("./scrollbars-CT87iv_6.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const utils_widget = require("./utils/widget.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
+const textDirection = require("./textDirection-zqcZ5-eK.cjs");
+function getDrawerDefaultConfig() {
+  return {
+    ...defaultDrawerConfig
+  };
+}
+const defaultDrawerConfig = {
+  animated: true,
+  ariaDescribedBy: "",
+  ariaLabelledBy: "",
+  backdropClass: "",
+  backdropTransition: utils_func.noop,
+  className: "",
+  visible: false,
+  container: typeof window !== "undefined" ? document.body : null,
+  transition: utils_func.noop,
+  verticalTransition: utils_func.noop,
+  onHidden: utils_func.noop,
+  onShown: utils_func.noop,
+  onSizeChange: utils_func.noop,
+  onVisibleChange: utils_func.noop,
+  onMinimizedChange: utils_func.noop,
+  onMaximizedChange: utils_func.noop,
+  onResizingChange: utils_func.noop,
+  resizable: false,
+  backdrop: true,
+  bodyScroll: false,
+  size: null,
+  focusOnInit: true,
+  configuration: "overlay",
+  position: "inline-start"
+};
+const configValidator = {
+  animated: utils_writables.typeBoolean,
+  ariaDescribedBy: utils_writables.typeString,
+  ariaLabelledBy: utils_writables.typeString,
+  backdropClass: utils_writables.typeString,
+  backdropTransition: utils_writables.typeFunction,
+  className: utils_writables.typeString,
+  visible: utils_writables.typeBoolean,
+  transition: utils_writables.typeFunction,
+  verticalTransition: utils_writables.typeFunction,
+  container: utils_writables.typeHTMLElementOrNull,
+  onHidden: utils_writables.typeFunction,
+  onShown: utils_writables.typeFunction,
+  onSizeChange: utils_writables.typeFunction,
+  onVisibleChange: utils_writables.typeFunction,
+  onMinimizedChange: utils_writables.typeFunction,
+  onMaximizedChange: utils_writables.typeFunction,
+  onResizingChange: utils_writables.typeFunction,
+  resizable: utils_writables.typeBoolean,
+  backdrop: utils_writables.typeBoolean,
+  bodyScroll: utils_writables.typeBoolean,
+  size: utils_writables.typeNumberOrNull,
+  focusOnInit: utils_writables.typeBoolean,
+  configuration: utils_writables.createTypeEnum(["inline", "overlay"]),
+  position: utils_writables.createTypeEnum(["inline-start", "inline-end", "block-start", "block-end"])
+};
+const createDrawer = utils_widget.createWidgetFactory(
+  "drawer",
+  (config) => {
+    const [
+      {
+        backdrop$: _backdrop$,
+        backdropTransition$,
+        backdropClass$,
+        bodyScroll$: _bodyScroll$,
+        transition$,
+        verticalTransition$,
+        visible$: requestedVisible$,
+        container$: _container$,
+        className$,
+        size$: _dirtySize$,
+        animated$,
+        ariaDescribedBy$,
+        ariaLabelledBy$,
+        onHidden$,
+        onShown$,
+        onSizeChange$,
+        onVisibleChange$,
+        onMinimizedChange$,
+        onMaximizedChange$,
+        onResizingChange$,
+        focusOnInit$,
+        configuration$,
+        position$,
+        ...stateProps
+      },
+      patch
+    ] = utils_stores.writablesForProps(defaultDrawerConfig, config, configValidator);
+    const inline$ = tansu.computed(() => configuration$() === "inline");
+    const backdrop$ = tansu.computed(() => inline$() ? false : _backdrop$());
+    const bodyScroll$ = tansu.computed(() => inline$() ? true : _bodyScroll$());
+    const container$ = tansu.computed(() => inline$() ? null : _container$());
+    const size$ = utils_stores.bindableProp(_dirtySize$, onSizeChange$, (value) => value ? Math.round(value) : value);
+    const isVertical$ = tansu.computed(() => {
+      const position = position$();
+      return position === "block-start" || position === "block-end";
+    });
+    const combinedClass$ = tansu.computed(() => `df-${position$()} ${className$()}`);
+    const transition = services_transitions_baseTransitions.createTransition({
+      props: {
+        animated: animated$,
+        animatedOnInit: animated$,
+        transition: tansu.asWritable(tansu.computed(() => isVertical$() ? verticalTransition$() : transition$())),
+        visible: requestedVisible$,
+        onVisibleChange: onVisibleChange$,
+        onHidden: onHidden$,
+        onShown: onShown$
+      }
+    });
+    const drawerPortalDirective = utils_directive.bindDirective(
+      services_portal.portal,
+      tansu.computed(() => ({ container: container$() }))
+    );
+    const { directive: drawerElementDirective, element$: drawerElement$ } = utils_directive.createBrowserStoreDirective();
+    const drawerAttributeDirective = utils_directive.mergeDirectives(
+      drawerElementDirective,
+      utils_directive.createAttributesDirective(() => ({
+        attributes: {
+          class: combinedClass$,
+          role: tansu.computed(() => inline$() ? "complementary" : "dialog"),
+          "aria-describedby": tansu.computed(() => ariaDescribedBy$() || void 0),
+          "aria-labelledby": tansu.computed(() => ariaLabelledBy$() || void 0),
+          "aria-modal": tansu.computed(() => inline$() ? void 0 : "true"),
+          tabIndex: tansu.readable("-1")
+        },
+        styles: {
+          position: tansu.computed(() => {
+            if (inline$()) {
+              return "relative";
+            }
+            const container = container$();
+            return container && utils_directive.isBrowserHTMLElement(container) && container !== document.body ? "relative" : "fixed";
+          }),
+          outline: tansu.readable("none")
+        },
+        events: {
+          keydown: (e) => {
+            if (e.key === "Escape") {
+              void transition.api.hide();
+            }
+          }
+        }
+      }))
+    );
+    const backdropTransition = services_transitions_baseTransitions.createTransition({
+      props: {
+        animated: animated$,
+        transition: backdropTransition$
+      }
+    });
+    const backdropPortalDirective = utils_directive.bindDirective(
+      services_portal.portal,
+      tansu.computed(() => {
+        const container = container$();
+        const element = container ? transition.stores.element$() : void 0;
+        return {
+          container,
+          insertBefore: element?.parentElement === container ? element : void 0
+        };
+      })
+    );
+    const backdropHidden$ = tansu.computed(() => {
+      if (!bodyScroll$()) {
+        if (hidden$()) {
+          scrollbars.revertScrollbars();
+        } else {
+          scrollbars.removeScrollbars();
+        }
+      }
+      return !backdrop$() || hidden$();
+    });
+    const backdropAttributeDirective = utils_directive.createAttributesDirective(() => ({
+      attributes: {
+        class: backdropClass$,
+        "data-agnos-ignore-inert": utils_stores.true$
+      },
+      events: {
+        click: () => void transition.api.hide()
+      }
+    }));
+    const direction$ = tansu.computed(() => {
+      const position = position$();
+      return position === "inline-start" || position === "block-start" ? 1 : -1;
+    });
+    const isMinimized$ = tansu.writable(void 0);
+    const isMaximized$ = tansu.writable(void 0);
+    function setSize(size) {
+      const drawerElement = drawerElement$();
+      const isVertical = isVertical$();
+      size = Math.round(Math.max(0, size));
+      drawerElement.style[isVertical ? "height" : "width"] = `${size}px`;
+      const elementSize = Math.round(drawerElement[isVertical ? "offsetHeight" : "offsetWidth"]);
+      size$.set(elementSize);
+      isMinimized$.set(size != null && (size < elementSize || size === 0));
+      isMaximized$.set(!!size && size > elementSize);
+      return elementSize;
+    }
+    const splitterDirective = utils_directive.mergeDirectives(
+      services_pointerdownPosition.createPointerdownPositionDirective((event) => {
+        const drawerElement = drawerElement$();
+        const isVertical = isVertical$();
+        const documentDirection = textDirection.getTextDirection(drawerElement) === "ltr" ? 1 : -1;
+        const directionFactor = isVertical ? 1 : documentDirection;
+        const startSize = drawerElement[isVertical ? "offsetHeight" : "offsetWidth"];
+        const clientXorY = isVertical ? "clientY" : "clientX";
+        const startPos = event[clientXorY];
+        const direction = direction$();
+        let isResizing = false;
+        return {
+          onMove(event2) {
+            setSize(startSize + directionFactor * direction * (event2[clientXorY] - startPos));
+            if (!isResizing) {
+              isResizing = true;
+              onResizingChange$()(true);
+            }
+          },
+          onEnd() {
+            drawerElement.style[isVertical ? "height" : "width"] = "";
+            if (isResizing) {
+              onResizingChange$()(false);
+              isResizing = false;
+            }
+          }
+        };
+      }),
+      utils_directive.createAttributesDirective(() => ({
+        events: {
+          keydown: (e) => {
+            const { key } = e;
+            const size = size$() || drawerElement$()?.[isVertical$() ? "offsetHeight" : "offsetWidth"];
+            if (size != null) {
+              switch (key) {
+                case "ArrowLeft":
+                case "ArrowDown":
+                  onResizingChange$()(true);
+                  setSize(size - 10);
+                  onResizingChange$()(false);
+                  break;
+                case "ArrowRight":
+                case "ArrowUp":
+                  onResizingChange$()(true);
+                  setSize(size + 10);
+                  onResizingChange$()(false);
+                  break;
+              }
+            }
+          }
+        }
+      }))
+    );
+    const visible$ = transition.stores.visible$;
+    const transitioning$ = tansu.computed(
+      () => transition.stores.transitioning$() || backdropTransition.stores.transitioning$()
+    );
+    const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
+    const minSizeAction$ = tansu.computed(() => {
+      const isMinimized = isMinimized$();
+      if (isMinimized != null) {
+        tansu.untrack(() => onMinimizedChange$()(isMinimized));
+      }
+    });
+    const maxSizeAction$ = tansu.computed(() => {
+      const isMaximized = isMaximized$();
+      if (isMaximized != null) {
+        tansu.untrack(() => onMaximizedChange$()(isMaximized));
+      }
+    });
+    const action$ = tansu.computed(() => {
+      minSizeAction$();
+      maxSizeAction$();
+    });
+    const widget = {
+      ...utils_stores.stateStores({
+        ...stateProps,
+        backdropClass$,
+        className$,
+        position$,
+        container$,
+        size$,
+        visible$,
+        backdropHidden$,
+        hidden$,
+        isVertical$,
+        configuration$
+      }),
+      patch,
+      api: {
+        open: transition.api.show,
+        close: transition.api.hide
+      },
+      directives: {
+        drawerPortalDirective,
+        drawerDirective: utils_directive.mergeDirectives(
+          utils_directive.directiveSubscribe(action$),
+          drawerAttributeDirective,
+          utils_directive.bindDirective(
+            services_siblingsInert.siblingsInert,
+            tansu.computed(() => !bodyScroll$())
+          ),
+          // This directive must come after the attribute directive, to ensure that all the classes and attributes are applied for the transition
+          transition.directives.directive,
+          utils_directive.conditionalDirective(services_focusElement.focusElement, focusOnInit$)
+        ),
+        backdropPortalDirective,
+        backdropDirective: utils_directive.mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+        splitterDirective
+      }
+    };
+    return widget;
+  }
+);
+exports.createDrawer = createDrawer;
+exports.getDrawerDefaultConfig = getDrawerDefaultConfig;