@agnos-ui/core 0.9.2 → 0.10.0-next.0

package/{dom-CuBx1JPZ.cjs → dom-C2gi9OCP.cjs}

@@ -58,13 +58,12 @@ function clsx() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-const isBrowserHTMLElement = esmEnv.BROWSER ? (element) => {
-  var _a;
-  const contentWindow = ((_a = element == null ? void 0 : element.ownerDocument) == null ? void 0 : _a.defaultView) ?? window;
+const isBrowserHTMLElement = esmEnv.BROWSER ? ((element) => {
+  const contentWindow = element?.ownerDocument?.defaultView ?? window;
   return element instanceof contentWindow.HTMLElement;
-} : (
+}) : (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (element) => false
+  ((element) => false)
 );
 const browserDirective = esmEnv.BROWSER ? (directive) => (node, args) => {
   if (isBrowserHTMLElement(node)) {
@@ -72,24 +71,22 @@ const browserDirective = esmEnv.BROWSER ? (directive) => (node, args) => {
   }
 } : (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (directive) => utils_func.noop
+  ((directive) => utils_func.noop)
 );
 const bindDirective = (directive, directiveArg$) => (element) => {
   let firstTime = true;
   let instance;
   const unsubscribe = directiveArg$.subscribe((value) => {
-    var _a;
     if (firstTime) {
       firstTime = false;
       instance = directive(element, value);
     } else {
-      (_a = instance == null ? void 0 : instance.update) == null ? void 0 : _a.call(instance, value);
+      instance?.update?.(value);
     }
   });
   return {
     destroy() {
-      var _a;
-      (_a = instance == null ? void 0 : instance.destroy) == null ? void 0 : _a.call(instance);
+      instance?.destroy?.();
       unsubscribe();
     }
   };
@@ -100,13 +97,9 @@ const mapDirectiveArg = (directive, fn) => (node, arg) => {
   const instance = directive(node, fn(arg));
   return {
     update: (arg2) => {
-      var _a;
-      (_a = instance == null ? void 0 : instance.update) == null ? void 0 : _a.call(instance, fn(arg2));
+      instance?.update?.(fn(arg2));
     },
-    destroy: () => {
-      var _a;
-      return (_a = instance == null ? void 0 : instance.destroy) == null ? void 0 : _a.call(instance);
-    }
+    destroy: () => instance?.destroy?.()
   };
 };
 const directiveSubscribe = (store, asyncUnsubscribe = true) => () => {
@@ -155,17 +148,45 @@ const registrationArray = () => {
     }
   });
 };
-const createStoreArrayDirective = () => {
+const createConditionalStoreArrayDirective = () => {
   const elements$ = registrationArray();
   return {
     elements$: tansu.asReadable(elements$),
-    directive: (element) => ({ destroy: elements$.register(element) })
+    directive: (element, enabled = true) => {
+      let destroyElements;
+      const update = (newEnabled = true) => {
+        if (!!newEnabled != !!destroyElements) {
+          if (newEnabled) {
+            destroyElements = elements$.register(element);
+          } else {
+            destroyElements?.();
+            destroyElements = void 0;
+          }
+        }
+      };
+      update(enabled);
+      return {
+        destroy: () => update(false),
+        update
+      };
+    }
+  };
+};
+const createStoreArrayDirective = () => {
+  const { directive, elements$ } = createConditionalStoreArrayDirective();
+  return {
+    directive: bindDirectiveNoArg(directive),
+    elements$
   };
 };
 const createBrowserStoreArrayDirective = () => {
   const { directive, elements$ } = createStoreArrayDirective();
   return { directive: browserDirective(directive), elements$ };
 };
+const createConditionalBrowserStoreArrayDirective = () => {
+  const { directive, elements$ } = createConditionalStoreArrayDirective();
+  return { directive: browserDirective(directive), elements$ };
+};
 const createStoreDirective = () => {
   const element$ = tansu.writable(null, equalOption);
   return {
@@ -196,16 +217,10 @@ const mergeDirectives = (...args) => (element, arg) => {
   const instances = tansu.batch(() => args.map((directive) => directive(element, arg)));
   return {
     update(arg2) {
-      tansu.batch(() => instances.forEach((instance) => {
-        var _a;
-        return (_a = instance == null ? void 0 : instance.update) == null ? void 0 : _a.call(instance, arg2);
-      }));
+      tansu.batch(() => instances.forEach((instance) => instance?.update?.(arg2)));
     },
     destroy() {
-      tansu.batch(() => instances.reverse().forEach((instance) => {
-        var _a;
-        return (_a = instance == null ? void 0 : instance.destroy) == null ? void 0 : _a.call(instance);
-      }));
+      tansu.batch(() => instances.reverse().forEach((instance) => instance?.destroy?.()));
     }
   };
 };
@@ -213,27 +228,23 @@ const multiDirective = (element, directives) => {
   const instances = [];
   const update = (directives2) => tansu.batch(() => {
     directives2.forEach((directiveWithArg, index) => {
-      var _a, _b, _c, _d;
       const [directive, arg] = Array.isArray(directiveWithArg) ? directiveWithArg : [directiveWithArg, void 0];
       const oldInstance = instances[index];
       if (oldInstance) {
         if (oldInstance.directive === directive) {
           if (oldInstance.arg !== arg) {
-            (_b = (_a = oldInstance.instance) == null ? void 0 : _a.update) == null ? void 0 : _b.call(_a, arg);
+            oldInstance.instance?.update?.(arg);
             oldInstance.arg = arg;
           }
           return;
         }
-        (_d = (_c = oldInstance.instance) == null ? void 0 : _c.destroy) == null ? void 0 : _d.call(_c);
+        oldInstance.instance?.destroy?.();
       }
       const instance = directive(element, arg);
       instances[index] = { directive, instance, arg };
     });
     const extraInstances = instances.splice(directives2.length);
-    extraInstances.reverse().forEach(({ instance }) => {
-      var _a;
-      return (_a = instance == null ? void 0 : instance.destroy) == null ? void 0 : _a.call(instance);
-    });
+    extraInstances.reverse().forEach(({ instance }) => instance?.destroy?.());
   });
   update(directives);
   return {
@@ -281,10 +292,7 @@ const attributesData = (...directives) => {
     }
     return element[ssrHTMLElementAttributesAndStyle]();
   } finally {
-    instances.forEach((instance) => {
-      var _a;
-      return (_a = instance == null ? void 0 : instance.destroy) == null ? void 0 : _a.call(instance);
-    });
+    instances.forEach((instance) => instance?.destroy?.());
   }
 };
 const classDirective = createAttributesDirective((className$) => ({
@@ -406,6 +414,8 @@ exports.computeCommonAncestor = computeCommonAncestor;
 exports.createAttributesDirective = createAttributesDirective;
 exports.createBrowserStoreArrayDirective = createBrowserStoreArrayDirective;
 exports.createBrowserStoreDirective = createBrowserStoreDirective;
+exports.createConditionalBrowserStoreArrayDirective = createConditionalBrowserStoreArrayDirective;
+exports.createConditionalStoreArrayDirective = createConditionalStoreArrayDirective;
 exports.createStoreArrayDirective = createStoreArrayDirective;
 exports.createStoreDirective = createStoreDirective;
 exports.directiveAttributes = directiveAttributes;

package/drawer-D5SO73ew.js

@@ -0,0 +1,251 @@
+import { computed, asWritable, writable, readable } from "@amadeus-it-group/tansu";
+import { portal } from "./services/portal.js";
+import { siblingsInert } from "./services/siblingsInert.js";
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { a as bindDirective, n as mergeDirectives, p as createAttributesDirective } from "./dom-Bcg9ORcA.js";
+import { noop } from "./utils/func.js";
+import { r as removeScrollbars, a as revertScrollbars } from "./scrollbars-CcxSrnCx.js";
+import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
+import { createWidgetFactory } from "./utils/widget.js";
+import { c as typeBoolean, g as typeFunction, b as typeNumberInRangeFactory, h as typeHTMLElementOrNull, e as typeString } from "./writables-e0tyaQpe.js";
+import { focusElement } from "./services/focusElement.js";
+function getDrawerDefaultConfig() {
+  return {
+    ...defaultDrawerConfig
+  };
+}
+const defaultDrawerConfig = {
+  animated: true,
+  ariaDescribedBy: "",
+  ariaLabelledBy: "",
+  backdropClass: "",
+  backdropTransition: noop,
+  className: "w-full",
+  visible: false,
+  container: typeof window !== "undefined" ? document.body : null,
+  transition: noop,
+  verticalTransition: noop,
+  onHidden: noop,
+  onShown: noop,
+  width: 200,
+  height: 200,
+  onWidthChange: noop,
+  onHeightChange: noop,
+  onVisibleChange: noop,
+  resizable: false,
+  backdrop: true,
+  bodyScroll: false
+};
+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,
+  width: typeNumberInRangeFactory(0, Infinity),
+  height: typeNumberInRangeFactory(0, Infinity),
+  onWidthChange: typeFunction,
+  onHeightChange: typeFunction,
+  onVisibleChange: typeFunction,
+  resizable: typeBoolean,
+  backdrop: typeBoolean,
+  bodyScroll: typeBoolean
+};
+const createDrawer = createWidgetFactory("drawer", (config) => {
+  const [
+    {
+      backdrop$,
+      backdropTransition$,
+      backdropClass$,
+      bodyScroll$,
+      transition$,
+      verticalTransition$,
+      visible$: requestedVisible$,
+      container$,
+      className$,
+      animated$,
+      ariaDescribedBy$,
+      ariaLabelledBy$,
+      onHidden$,
+      onShown$,
+      width$: _dirtyWidth$,
+      height$: _dirtyHeight$,
+      onWidthChange$,
+      onHeightChange$,
+      onVisibleChange$,
+      ...stateProps
+    },
+    patch
+  ] = writablesForProps(defaultDrawerConfig, config, configValidator);
+  const isVertical = computed(() => {
+    const isVertical2 = ["block-start", "block-end"].some((placement) => className$().includes(placement));
+    return isVertical2;
+  });
+  const transition = createTransition({
+    props: {
+      animated: animated$,
+      animatedOnInit: animated$,
+      transition: asWritable(computed(() => isVertical() ? verticalTransition$() : transition$())),
+      visible: requestedVisible$,
+      onVisibleChange: onVisibleChange$,
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const width$ = bindableProp(_dirtyWidth$, onWidthChange$);
+  const height$ = bindableProp(_dirtyHeight$, onHeightChange$);
+  const drawerPortalDirective = bindDirective(
+    portal,
+    computed(() => ({ container: container$() }))
+  );
+  const drawerAttributeDirective = createAttributesDirective(() => ({
+    attributes: {
+      class: className$,
+      role: readable("dialog"),
+      "aria-describedby": ariaDescribedBy$,
+      "aria-labelledby": ariaLabelledBy$,
+      "aria-modal": readable("true"),
+      tabIndex: readable("-1")
+    },
+    styles: {
+      width: computed(() => isVertical() ? "100%" : `${width$()}px`),
+      height: computed(() => isVertical() ? `${height$()}px` : "100%"),
+      position: computed(() => container$() !== document.body && container$() !== null ? "relative" : "fixed"),
+      outline: readable("none")
+    },
+    events: {
+      keydown: async (e) => {
+        const { key } = e;
+        if (key === "Escape") {
+          await transition.api.hide();
+        }
+      }
+    }
+  }));
+  const containerDirective = createAttributesDirective(() => ({
+    styles: {
+      width: computed(() => isVertical() ? "100%" : `${width$()}px`),
+      height: computed(() => isVertical() ? `${height$()}px` : "100%")
+    }
+  }));
+  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: async () => {
+        await transition.api.hide();
+      }
+    }
+  }));
+  const direction = computed(() => ["inline-start", "block-start"].some((placement) => className$().includes(placement)) ? 1 : -1);
+  const startDimension = writable(0);
+  const startPos = writable(0);
+  const dimension = writable(0);
+  const splitterDirective = createAttributesDirective(() => ({
+    attributes: {
+      draggable: readable("true")
+    },
+    events: {
+      dragstart: (e) => {
+        startPos.set(isVertical() ? e.clientY : e.clientX);
+        startDimension.set(isVertical() ? height$() : width$());
+        e.dataTransfer?.setDragImage(new Image(), 0, 0);
+      },
+      dragend: (e) => {
+        document.body.style.cursor = "";
+        updateDimension(e);
+      },
+      dragover: (event) => {
+        event.preventDefault();
+      },
+      drag: (e) => {
+        updateDimension(e);
+      }
+    }
+  }));
+  const updateDimension = (e) => {
+    if (!isVertical() && e.clientX > 0) {
+      dimension.set(startDimension() + direction() * (e.clientX - startPos()));
+      width$.set(dimension());
+    } else if (isVertical() && e.clientY > 0) {
+      dimension.set(startDimension() + direction() * (e.clientY - startPos()));
+      height$.set(dimension());
+    }
+  };
+  const visible$ = transition.stores.visible$;
+  const transitioning$ = computed(() => transition.stores.transitioning$() || backdropTransition.stores.transitioning$());
+  const hidden$ = computed(() => !transitioning$() && !visible$());
+  const widget = {
+    ...stateStores({
+      ...stateProps,
+      backdropClass$,
+      className$,
+      container$,
+      visible$,
+      backdropHidden$,
+      hidden$
+    }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide
+    },
+    directives: {
+      containerDirective,
+      drawerPortalDirective,
+      drawerDirective: mergeDirectives(
+        transition.directives.directive,
+        bindDirective(
+          siblingsInert,
+          computed(() => !bodyScroll$())
+        ),
+        drawerAttributeDirective,
+        focusElement
+      ),
+      backdropPortalDirective,
+      backdropDirective: mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+      splitterDirective
+    }
+  };
+  return widget;
+});
+export {
+  createDrawer as c,
+  getDrawerDefaultConfig as g
+};

package/drawer-DP7UPojk.cjs

@@ -0,0 +1,250 @@
+"use strict";
+const tansu = require("@amadeus-it-group/tansu");
+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("./dom-C2gi9OCP.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-DcGT98a7.cjs");
+const services_focusElement = require("./services/focusElement.cjs");
+function getDrawerDefaultConfig() {
+  return {
+    ...defaultDrawerConfig
+  };
+}
+const defaultDrawerConfig = {
+  animated: true,
+  ariaDescribedBy: "",
+  ariaLabelledBy: "",
+  backdropClass: "",
+  backdropTransition: utils_func.noop,
+  className: "w-full",
+  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,
+  width: 200,
+  height: 200,
+  onWidthChange: utils_func.noop,
+  onHeightChange: utils_func.noop,
+  onVisibleChange: utils_func.noop,
+  resizable: false,
+  backdrop: true,
+  bodyScroll: false
+};
+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,
+  width: utils_writables.typeNumberInRangeFactory(0, Infinity),
+  height: utils_writables.typeNumberInRangeFactory(0, Infinity),
+  onWidthChange: utils_writables.typeFunction,
+  onHeightChange: utils_writables.typeFunction,
+  onVisibleChange: utils_writables.typeFunction,
+  resizable: utils_writables.typeBoolean,
+  backdrop: utils_writables.typeBoolean,
+  bodyScroll: utils_writables.typeBoolean
+};
+const createDrawer = utils_widget.createWidgetFactory("drawer", (config) => {
+  const [
+    {
+      backdrop$,
+      backdropTransition$,
+      backdropClass$,
+      bodyScroll$,
+      transition$,
+      verticalTransition$,
+      visible$: requestedVisible$,
+      container$,
+      className$,
+      animated$,
+      ariaDescribedBy$,
+      ariaLabelledBy$,
+      onHidden$,
+      onShown$,
+      width$: _dirtyWidth$,
+      height$: _dirtyHeight$,
+      onWidthChange$,
+      onHeightChange$,
+      onVisibleChange$,
+      ...stateProps
+    },
+    patch
+  ] = utils_stores.writablesForProps(defaultDrawerConfig, config, configValidator);
+  const isVertical = tansu.computed(() => {
+    const isVertical2 = ["block-start", "block-end"].some((placement) => className$().includes(placement));
+    return isVertical2;
+  });
+  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 width$ = utils_stores.bindableProp(_dirtyWidth$, onWidthChange$);
+  const height$ = utils_stores.bindableProp(_dirtyHeight$, onHeightChange$);
+  const drawerPortalDirective = utils_directive.bindDirective(
+    services_portal.portal,
+    tansu.computed(() => ({ container: container$() }))
+  );
+  const drawerAttributeDirective = utils_directive.createAttributesDirective(() => ({
+    attributes: {
+      class: className$,
+      role: tansu.readable("dialog"),
+      "aria-describedby": ariaDescribedBy$,
+      "aria-labelledby": ariaLabelledBy$,
+      "aria-modal": tansu.readable("true"),
+      tabIndex: tansu.readable("-1")
+    },
+    styles: {
+      width: tansu.computed(() => isVertical() ? "100%" : `${width$()}px`),
+      height: tansu.computed(() => isVertical() ? `${height$()}px` : "100%"),
+      position: tansu.computed(() => container$() !== document.body && container$() !== null ? "relative" : "fixed"),
+      outline: tansu.readable("none")
+    },
+    events: {
+      keydown: async (e) => {
+        const { key } = e;
+        if (key === "Escape") {
+          await transition.api.hide();
+        }
+      }
+    }
+  }));
+  const containerDirective = utils_directive.createAttributesDirective(() => ({
+    styles: {
+      width: tansu.computed(() => isVertical() ? "100%" : `${width$()}px`),
+      height: tansu.computed(() => isVertical() ? `${height$()}px` : "100%")
+    }
+  }));
+  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: async () => {
+        await transition.api.hide();
+      }
+    }
+  }));
+  const direction = tansu.computed(() => ["inline-start", "block-start"].some((placement) => className$().includes(placement)) ? 1 : -1);
+  const startDimension = tansu.writable(0);
+  const startPos = tansu.writable(0);
+  const dimension = tansu.writable(0);
+  const splitterDirective = utils_directive.createAttributesDirective(() => ({
+    attributes: {
+      draggable: tansu.readable("true")
+    },
+    events: {
+      dragstart: (e) => {
+        startPos.set(isVertical() ? e.clientY : e.clientX);
+        startDimension.set(isVertical() ? height$() : width$());
+        e.dataTransfer?.setDragImage(new Image(), 0, 0);
+      },
+      dragend: (e) => {
+        document.body.style.cursor = "";
+        updateDimension(e);
+      },
+      dragover: (event) => {
+        event.preventDefault();
+      },
+      drag: (e) => {
+        updateDimension(e);
+      }
+    }
+  }));
+  const updateDimension = (e) => {
+    if (!isVertical() && e.clientX > 0) {
+      dimension.set(startDimension() + direction() * (e.clientX - startPos()));
+      width$.set(dimension());
+    } else if (isVertical() && e.clientY > 0) {
+      dimension.set(startDimension() + direction() * (e.clientY - startPos()));
+      height$.set(dimension());
+    }
+  };
+  const visible$ = transition.stores.visible$;
+  const transitioning$ = tansu.computed(() => transition.stores.transitioning$() || backdropTransition.stores.transitioning$());
+  const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
+  const widget = {
+    ...utils_stores.stateStores({
+      ...stateProps,
+      backdropClass$,
+      className$,
+      container$,
+      visible$,
+      backdropHidden$,
+      hidden$
+    }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide
+    },
+    directives: {
+      containerDirective,
+      drawerPortalDirective,
+      drawerDirective: utils_directive.mergeDirectives(
+        transition.directives.directive,
+        utils_directive.bindDirective(
+          services_siblingsInert.siblingsInert,
+          tansu.computed(() => !bodyScroll$())
+        ),
+        drawerAttributeDirective,
+        services_focusElement.focusElement
+      ),
+      backdropPortalDirective,
+      backdropDirective: utils_directive.mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+      splitterDirective
+    }
+  };
+  return widget;
+});
+exports.createDrawer = createDrawer;
+exports.getDrawerDefaultConfig = getDrawerDefaultConfig;