@agnos-ui/core 0.2.0 → 0.3.0

package/index.js

@@ -1,33 +1,119 @@
-// types
-export * from './components/commonProps';
-export * from './types';
-// components
-export * from './components/accordion';
-export * from './components/alert';
-export * from './components/modal';
-export * from './components/pagination';
-export * from './components/progressbar';
-export * from './components/rating';
-export * from './components/select';
-export * from './components/slider';
-export * from './components/toast';
-// config
-export * from './config';
-// services
-export * from './services/extendWidget';
-export * from './services/floatingUI';
-export * from './services/focustrack';
-export * from './services/intersection';
-export * from './services/navManager';
-export * from './services/portal';
-export * from './services/resizeObserver';
-export * from './services/siblingsInert';
-// services transitions
-export * from './services/transitions/baseTransitions';
-export * from './services/transitions/cssTransitions';
-export * from './services/transitions/simpleClassTransition';
-export * from './services/transitions/bootstrap';
-// public utils
-export * from './utils/directive';
-export * from './utils/stores';
-export * from './utils/writables';
+import { INVALID_VALUE, toSlotContextWidget } from "./types.js";
+import { a, c, f, g } from "./accordion-BaWN0_n-.js";
+import { c as c2, a as a2, d, g as g2 } from "./common-DRdsw5m8.js";
+import { c as c3, g as g3 } from "./alert-Dlf-BV98.js";
+import { c as c4, g as g4, a as a3, m } from "./modal-BI2qUu1M.js";
+import { c as c5, g as g5 } from "./pagination--GkwduJn.js";
+import { c as c6, g as g6 } from "./progressbar-DuRX7_my.js";
+import { c as c7, g as g7 } from "./rating-BR5wD7y2.js";
+import { c as c8, d as d2, g as g8 } from "./select-BCs6HQWn.js";
+import { c as c9, g as g9 } from "./slider-CA_fszn7.js";
+import { c as c10, g as g10 } from "./toast-8tWp6x89.js";
+import { createWidgetsConfig, mergeInto } from "./config.js";
+import { extendWidgetProps } from "./services/extendWidget.js";
+import { createFloatingUI } from "./services/floatingUI.js";
+import { activeElement$, createHasFocus } from "./services/focustrack.js";
+import { createIntersection } from "./services/intersection.js";
+import { createMatchMedia } from "./services/matchMedia.js";
+import { createNavManager, getKeyName, isInternalInputNavigation } from "./services/navManager.js";
+import { portal } from "./services/portal.js";
+import { createResizeObserver } from "./services/resizeObserver.js";
+import { sliblingsInert } from "./services/siblingsInert.js";
+import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
+import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
+import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
+import { o, a as a4, c as c11, b, p, n, g as g11, j, f as f2, h, q, d as d3, e, i, m as m2, k, l, r, s } from "./directive-DCYlDznf.js";
+import { bindableDerived, bindableProp, createPatch, findChangedProperties, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
+import { t, h as h2, c as c12, d as d4, f as f3, g as g12, a as a5, b as b2, e as e2 } from "./writables-DoU_XYTX.js";
+export {
+  INVALID_VALUE,
+  activeElement$,
+  o as attributesData,
+  a4 as bindDirective,
+  c11 as bindDirectiveNoArg,
+  bindableDerived,
+  bindableProp,
+  b as browserDirective,
+  p as classDirective,
+  c2 as commonAlertConfigValidator,
+  a as createAccordion,
+  c as createAccordionItem,
+  c3 as createAlert,
+  n as createAttributesDirective,
+  g11 as createBrowserStoreArrayDirective,
+  j as createBrowserStoreDirective,
+  createCSSTransition,
+  a2 as createCommonAlert,
+  createFloatingUI,
+  createHasFocus,
+  createIntersection,
+  createMatchMedia,
+  c4 as createModal,
+  createNavManager,
+  c5 as createPagination,
+  createPatch,
+  c6 as createProgressbar,
+  c7 as createRating,
+  createResizeObserver,
+  c8 as createSelect,
+  createSimpleClassTransition,
+  c9 as createSlider,
+  f2 as createStoreArrayDirective,
+  h as createStoreDirective,
+  c10 as createToast,
+  createTransition,
+  createWidgetsConfig,
+  d as defaultCommonAlertConfig,
+  d2 as defaultConfig,
+  q as directiveAttributes,
+  d3 as directiveSubscribe,
+  e as directiveUpdate,
+  extendWidgetProps,
+  f as factoryCreateAccordion,
+  findChangedProperties,
+  g as getAccordionDefaultConfig,
+  g3 as getAlertDefaultConfig,
+  g2 as getCommonAlertDefaultConfig,
+  getKeyName,
+  g4 as getModalDefaultConfig,
+  g5 as getPaginationDefaultConfig,
+  g6 as getProgressbarDefaultConfig,
+  g7 as getRatingDefaultConfig,
+  g8 as getSelectDefaultConfig,
+  g9 as getSliderDefaultConfig,
+  g10 as getToastDefaultConfig,
+  getTransitionDurationMs,
+  hasTransition,
+  i as isBrowserHTMLElement,
+  isInternalInputNavigation,
+  isStore,
+  m2 as mapDirectiveArg,
+  mergeConfigStores,
+  k as mergeDirectives,
+  mergeInto,
+  a3 as modalCloseButtonClick,
+  m as modalOutsideClick,
+  l as multiDirective,
+  noAnimation,
+  normalizeConfigStores,
+  portal,
+  r as registrationArray,
+  sliblingsInert,
+  s as ssrAttributes,
+  stateStores,
+  t as testToNormalizeValue,
+  toReadableStore,
+  toSlotContextWidget,
+  toWritableStore,
+  h2 as typeArray,
+  c12 as typeBoolean,
+  d4 as typeBooleanOrNull,
+  f3 as typeFunction,
+  g12 as typeHTMLElementOrNull,
+  a5 as typeNumber,
+  b2 as typeNumberInRangeFactory,
+  e2 as typeString,
+  writableWithDefault,
+  writablesForProps,
+  writablesWithDefault
+};

package/modal-BI2qUu1M.js

@@ -0,0 +1,251 @@
+import { computed, readable } from "@amadeus-it-group/tansu";
+import { c as typeBoolean, e as typeString, f as typeFunction, g as typeHTMLElementOrNull } from "./writables-DoU_XYTX.js";
+import { writablesForProps, stateStores } from "./utils/stores.js";
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { d as promiseFromStore } from "./promise-CY2U8bTP.js";
+import { n as noop } from "./func-DR0n-ShK.js";
+import { r as registrationArray, a as bindDirective, k as mergeDirectives, c as bindDirectiveNoArg, d as directiveSubscribe, n as createAttributesDirective } from "./directive-DCYlDznf.js";
+import { portal } from "./services/portal.js";
+import { sliblingsInert } from "./services/siblingsInert.js";
+const internalRemoveScrollbars = () => {
+  const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
+  const body = document.body;
+  const bodyStyle = body.style;
+  const { overflow, paddingRight } = bodyStyle;
+  if (scrollbarWidth > 0) {
+    const actualPadding = parseFloat(window.getComputedStyle(body).paddingRight);
+    bodyStyle.paddingRight = `${actualPadding + scrollbarWidth}px`;
+  }
+  bodyStyle.overflow = "hidden";
+  return () => {
+    if (scrollbarWidth > 0) {
+      bodyStyle.paddingRight = paddingRight;
+    }
+    bodyStyle.overflow = overflow;
+  };
+};
+let internalRevert = noop;
+const removeScrollbars = () => {
+  internalRevert();
+  internalRevert = internalRemoveScrollbars();
+};
+const revertScrollbars = () => {
+  internalRevert();
+  internalRevert = noop;
+};
+const modalOutsideClick = Symbol();
+const modalCloseButtonClick = Symbol();
+const defaultConfig = {
+  animated: true,
+  ariaCloseButtonLabel: "Close",
+  backdrop: true,
+  backdropClass: "",
+  backdropTransition: async () => {
+  },
+  closeButton: true,
+  closeOnOutsideClick: true,
+  container: typeof window !== "undefined" ? document.body : null,
+  className: "",
+  modalTransition: async () => {
+  },
+  onBeforeClose: noop,
+  onVisibleChange: noop,
+  onHidden: noop,
+  onShown: noop,
+  visible: false,
+  contentData: void 0
+};
+const configValidator = {
+  animated: typeBoolean,
+  ariaCloseButtonLabel: typeString,
+  backdrop: typeBoolean,
+  backdropClass: typeString,
+  backdropTransition: typeFunction,
+  closeButton: typeBoolean,
+  closeOnOutsideClick: typeBoolean,
+  container: typeHTMLElementOrNull,
+  className: typeString,
+  modalTransition: typeFunction,
+  onBeforeClose: typeFunction,
+  onVisibleChange: typeFunction,
+  onHidden: typeFunction,
+  onShown: typeFunction,
+  visible: typeBoolean
+};
+function getModalDefaultConfig() {
+  return { ...defaultConfig };
+}
+const modals$ = registrationArray();
+const hasModals$ = computed(() => modals$().length > 0);
+const scrollbarsAction$ = computed(() => {
+  if (hasModals$()) {
+    removeScrollbars();
+  } else {
+    revertScrollbars();
+  }
+});
+const modalsAction$ = computed(() => {
+  scrollbarsAction$();
+});
+function createModal(config$) {
+  const [
+    {
+      animated$,
+      backdrop$,
+      backdropTransition$,
+      closeOnOutsideClick$,
+      container$,
+      modalTransition$,
+      onBeforeClose$,
+      onVisibleChange$,
+      onHidden$,
+      onShown$,
+      ariaCloseButtonLabel$,
+      className$,
+      backdropClass$,
+      visible$: requestedVisible$,
+      ...stateProps
+    },
+    patch
+  ] = writablesForProps(defaultConfig, config$, configValidator);
+  const modalTransition = createTransition({
+    props: {
+      transition: modalTransition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animated$,
+      onVisibleChange: onVisibleChange$,
+      // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
+      // (especially in case one of the two transitions takes more time than the other)
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const visible$ = modalTransition.stores.visible$;
+  const backdropTransition = createTransition({
+    props: {
+      transition: backdropTransition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animated$
+    }
+  });
+  const transitioning$ = computed(() => modalTransition.stores.transitioning$() || backdrop$() && backdropTransition.stores.transitioning$());
+  const hidden$ = computed(() => !transitioning$() && !visible$());
+  const backdropHidden$ = computed(() => !backdrop$() || hidden$());
+  let hideResult;
+  const close = (result) => {
+    hideResult = result;
+    const beforeCloseEvent = {
+      get result() {
+        return hideResult;
+      },
+      set result(value) {
+        hideResult = value;
+      },
+      cancel: false
+    };
+    onBeforeClose$()(beforeCloseEvent);
+    if (beforeCloseEvent.cancel) {
+      return;
+    }
+    patch({ visible: false });
+  };
+  const modalPortalDirective = bindDirective(
+    portal,
+    computed(() => ({ container: container$() }))
+  );
+  const backdropPortalDirective = bindDirective(
+    portal,
+    computed(() => {
+      const container = container$();
+      const element = container ? modalTransition.stores.element$() : void 0;
+      return {
+        container,
+        insertBefore: (element == null ? void 0 : element.parentElement) === container ? element : void 0
+      };
+    })
+  );
+  const registerModalAction$ = readable(void 0, () => modals$.register(res));
+  const action$ = computed(() => {
+    if (modalTransition.stores.elementPresent$() && !hidden$()) {
+      registerModalAction$();
+    }
+    modalsAction$();
+  });
+  const closeButtonDirective = createAttributesDirective(() => ({
+    attributes: {
+      type: "button",
+      "aria-label": ariaCloseButtonLabel$
+    },
+    events: {
+      click: res.actions.closeButtonClick
+    }
+  }));
+  const backdropAttributeDirective = createAttributesDirective(() => ({
+    attributes: {
+      class: backdropClass$
+    }
+  }));
+  const modalAttributeDirective = createAttributesDirective(() => ({
+    attributes: {
+      class: className$
+    },
+    events: {
+      click: res.actions.modalClick
+    }
+  }));
+  const res = {
+    ...stateStores({
+      backdropHidden$,
+      container$,
+      hidden$,
+      transitioning$,
+      visible$,
+      modalElement$: modalTransition.stores.element$,
+      ariaCloseButtonLabel$,
+      className$,
+      backdropClass$,
+      ...stateProps
+    }),
+    directives: {
+      modalPortalDirective,
+      backdropPortalDirective,
+      backdropDirective: mergeDirectives(bindDirectiveNoArg(backdropTransition.directives.directive), backdropAttributeDirective),
+      modalDirective: mergeDirectives(
+        bindDirectiveNoArg(modalTransition.directives.directive),
+        sliblingsInert,
+        directiveSubscribe(action$),
+        modalAttributeDirective
+      ),
+      closeButtonDirective
+    },
+    patch,
+    api: {
+      close,
+      async open() {
+        patch({ visible: true });
+        await promiseFromStore(hidden$).promise;
+        return hideResult;
+      },
+      patch
+    },
+    actions: {
+      modalClick(event) {
+        if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+          close(modalOutsideClick);
+        }
+      },
+      closeButtonClick(event) {
+        close(modalCloseButtonClick);
+      }
+    }
+  };
+  return res;
+}
+export {
+  modalCloseButtonClick as a,
+  createModal as c,
+  getModalDefaultConfig as g,
+  modalOutsideClick as m
+};

package/modal-rzMpATf5.cjs

@@ -0,0 +1,250 @@
+"use strict";
+const tansu = require("@amadeus-it-group/tansu");
+const utils_writables = require("./writables-D46sFgGK.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
+const promise = require("./promise-BMJ8qhA8.cjs");
+const func = require("./func-Qd3cD9a3.cjs");
+const utils_directive = require("./directive-BTSEYLF3.cjs");
+const services_portal = require("./services/portal.cjs");
+const services_siblingsInert = require("./services/siblingsInert.cjs");
+const internalRemoveScrollbars = () => {
+  const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
+  const body = document.body;
+  const bodyStyle = body.style;
+  const { overflow, paddingRight } = bodyStyle;
+  if (scrollbarWidth > 0) {
+    const actualPadding = parseFloat(window.getComputedStyle(body).paddingRight);
+    bodyStyle.paddingRight = `${actualPadding + scrollbarWidth}px`;
+  }
+  bodyStyle.overflow = "hidden";
+  return () => {
+    if (scrollbarWidth > 0) {
+      bodyStyle.paddingRight = paddingRight;
+    }
+    bodyStyle.overflow = overflow;
+  };
+};
+let internalRevert = func.noop;
+const removeScrollbars = () => {
+  internalRevert();
+  internalRevert = internalRemoveScrollbars();
+};
+const revertScrollbars = () => {
+  internalRevert();
+  internalRevert = func.noop;
+};
+const modalOutsideClick = Symbol();
+const modalCloseButtonClick = Symbol();
+const defaultConfig = {
+  animated: true,
+  ariaCloseButtonLabel: "Close",
+  backdrop: true,
+  backdropClass: "",
+  backdropTransition: async () => {
+  },
+  closeButton: true,
+  closeOnOutsideClick: true,
+  container: typeof window !== "undefined" ? document.body : null,
+  className: "",
+  modalTransition: async () => {
+  },
+  onBeforeClose: func.noop,
+  onVisibleChange: func.noop,
+  onHidden: func.noop,
+  onShown: func.noop,
+  visible: false,
+  contentData: void 0
+};
+const configValidator = {
+  animated: utils_writables.typeBoolean,
+  ariaCloseButtonLabel: utils_writables.typeString,
+  backdrop: utils_writables.typeBoolean,
+  backdropClass: utils_writables.typeString,
+  backdropTransition: utils_writables.typeFunction,
+  closeButton: utils_writables.typeBoolean,
+  closeOnOutsideClick: utils_writables.typeBoolean,
+  container: utils_writables.typeHTMLElementOrNull,
+  className: utils_writables.typeString,
+  modalTransition: utils_writables.typeFunction,
+  onBeforeClose: utils_writables.typeFunction,
+  onVisibleChange: utils_writables.typeFunction,
+  onHidden: utils_writables.typeFunction,
+  onShown: utils_writables.typeFunction,
+  visible: utils_writables.typeBoolean
+};
+function getModalDefaultConfig() {
+  return { ...defaultConfig };
+}
+const modals$ = utils_directive.registrationArray();
+const hasModals$ = tansu.computed(() => modals$().length > 0);
+const scrollbarsAction$ = tansu.computed(() => {
+  if (hasModals$()) {
+    removeScrollbars();
+  } else {
+    revertScrollbars();
+  }
+});
+const modalsAction$ = tansu.computed(() => {
+  scrollbarsAction$();
+});
+function createModal(config$) {
+  const [
+    {
+      animated$,
+      backdrop$,
+      backdropTransition$,
+      closeOnOutsideClick$,
+      container$,
+      modalTransition$,
+      onBeforeClose$,
+      onVisibleChange$,
+      onHidden$,
+      onShown$,
+      ariaCloseButtonLabel$,
+      className$,
+      backdropClass$,
+      visible$: requestedVisible$,
+      ...stateProps
+    },
+    patch
+  ] = utils_stores.writablesForProps(defaultConfig, config$, configValidator);
+  const modalTransition = services_transitions_baseTransitions.createTransition({
+    props: {
+      transition: modalTransition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animated$,
+      onVisibleChange: onVisibleChange$,
+      // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
+      // (especially in case one of the two transitions takes more time than the other)
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const visible$ = modalTransition.stores.visible$;
+  const backdropTransition = services_transitions_baseTransitions.createTransition({
+    props: {
+      transition: backdropTransition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animated$
+    }
+  });
+  const transitioning$ = tansu.computed(() => modalTransition.stores.transitioning$() || backdrop$() && backdropTransition.stores.transitioning$());
+  const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
+  const backdropHidden$ = tansu.computed(() => !backdrop$() || hidden$());
+  let hideResult;
+  const close = (result) => {
+    hideResult = result;
+    const beforeCloseEvent = {
+      get result() {
+        return hideResult;
+      },
+      set result(value) {
+        hideResult = value;
+      },
+      cancel: false
+    };
+    onBeforeClose$()(beforeCloseEvent);
+    if (beforeCloseEvent.cancel) {
+      return;
+    }
+    patch({ visible: false });
+  };
+  const modalPortalDirective = utils_directive.bindDirective(
+    services_portal.portal,
+    tansu.computed(() => ({ container: container$() }))
+  );
+  const backdropPortalDirective = utils_directive.bindDirective(
+    services_portal.portal,
+    tansu.computed(() => {
+      const container = container$();
+      const element = container ? modalTransition.stores.element$() : void 0;
+      return {
+        container,
+        insertBefore: (element == null ? void 0 : element.parentElement) === container ? element : void 0
+      };
+    })
+  );
+  const registerModalAction$ = tansu.readable(void 0, () => modals$.register(res));
+  const action$ = tansu.computed(() => {
+    if (modalTransition.stores.elementPresent$() && !hidden$()) {
+      registerModalAction$();
+    }
+    modalsAction$();
+  });
+  const closeButtonDirective = utils_directive.createAttributesDirective(() => ({
+    attributes: {
+      type: "button",
+      "aria-label": ariaCloseButtonLabel$
+    },
+    events: {
+      click: res.actions.closeButtonClick
+    }
+  }));
+  const backdropAttributeDirective = utils_directive.createAttributesDirective(() => ({
+    attributes: {
+      class: backdropClass$
+    }
+  }));
+  const modalAttributeDirective = utils_directive.createAttributesDirective(() => ({
+    attributes: {
+      class: className$
+    },
+    events: {
+      click: res.actions.modalClick
+    }
+  }));
+  const res = {
+    ...utils_stores.stateStores({
+      backdropHidden$,
+      container$,
+      hidden$,
+      transitioning$,
+      visible$,
+      modalElement$: modalTransition.stores.element$,
+      ariaCloseButtonLabel$,
+      className$,
+      backdropClass$,
+      ...stateProps
+    }),
+    directives: {
+      modalPortalDirective,
+      backdropPortalDirective,
+      backdropDirective: utils_directive.mergeDirectives(utils_directive.bindDirectiveNoArg(backdropTransition.directives.directive), backdropAttributeDirective),
+      modalDirective: utils_directive.mergeDirectives(
+        utils_directive.bindDirectiveNoArg(modalTransition.directives.directive),
+        services_siblingsInert.sliblingsInert,
+        utils_directive.directiveSubscribe(action$),
+        modalAttributeDirective
+      ),
+      closeButtonDirective
+    },
+    patch,
+    api: {
+      close,
+      async open() {
+        patch({ visible: true });
+        await promise.promiseFromStore(hidden$).promise;
+        return hideResult;
+      },
+      patch
+    },
+    actions: {
+      modalClick(event) {
+        if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+          close(modalOutsideClick);
+        }
+      },
+      closeButtonClick(event) {
+        close(modalCloseButtonClick);
+      }
+    }
+  };
+  return res;
+}
+exports.createModal = createModal;
+exports.getModalDefaultConfig = getModalDefaultConfig;
+exports.modalCloseButtonClick = modalCloseButtonClick;
+exports.modalOutsideClick = modalOutsideClick;