@design-factory/core 21.1.0-next.1

package/modal-DWv0VqiG.cjs

@@ -0,0 +1,252 @@
+"use strict";
+const tansu = require("@amadeus-it-group/tansu");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
+const promise = require("./promise-CxCD3NYv.cjs");
+const utils_func = require("./utils/func.cjs");
+const scrollbars = require("./scrollbars-CT87iv_6.cjs");
+const utils_directive = require("./directive-DyTodNPd.cjs");
+const services_portal = require("./services/portal.cjs");
+const services_siblingsInert = require("./services/siblingsInert.cjs");
+const utils_widget = require("./utils/widget.cjs");
+const services_focusElement = require("./services/focusElement.cjs");
+const modalOutsideClick = /* @__PURE__ */ Symbol();
+const modalCloseButtonClick = /* @__PURE__ */ Symbol();
+const modalCloseEscape = /* @__PURE__ */ Symbol();
+const defaultConfig = {
+  animated: true,
+  ariaCloseButtonLabel: "Close",
+  backdrop: true,
+  backdropClass: "",
+  backdropTransition: utils_func.noop,
+  closeButton: true,
+  closeOnOutsideClick: true,
+  container: typeof window !== "undefined" ? document.body : null,
+  className: "",
+  modalTransition: utils_func.noop,
+  onBeforeClose: utils_func.noop,
+  onVisibleChange: utils_func.noop,
+  onHidden: utils_func.noop,
+  onShown: utils_func.noop,
+  visible: false
+};
+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$()) {
+    scrollbars.removeScrollbars();
+  } else {
+    scrollbars.revertScrollbars();
+  }
+});
+const modalsAction$ = tansu.computed(() => {
+  scrollbarsAction$();
+});
+const createModal = utils_widget.createWidgetFactory(
+  "modal",
+  (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?.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: tansu.readable("button"),
+        "aria-label": ariaCloseButtonLabel$
+      },
+      events: {
+        click: () => close(modalCloseButtonClick)
+      }
+    }));
+    const backdropAttributeDirective = utils_directive.createAttributesDirective(() => ({
+      attributes: {
+        class: backdropClass$
+      }
+    }));
+    const modalAttributeDirective = utils_directive.createAttributesDirective(() => ({
+      attributes: {
+        class: className$,
+        tabIndex: tansu.readable("-1")
+      },
+      events: {
+        click: (event) => {
+          if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+            close(modalOutsideClick);
+          }
+        },
+        keydown: (event) => {
+          const { key } = event;
+          switch (key) {
+            case "Escape":
+              close(modalCloseEscape);
+              event.stopPropagation();
+              break;
+          }
+        }
+      }
+    }));
+    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(backdropTransition.directives.directive, backdropAttributeDirective),
+        modalDirective: utils_directive.mergeDirectives(
+          modalTransition.directives.directive,
+          utils_directive.bindDirectiveNoArg(services_siblingsInert.siblingsInert),
+          utils_directive.directiveSubscribe(action$),
+          modalAttributeDirective,
+          services_focusElement.focusElement
+        ),
+        closeButtonDirective,
+        dialogDirective: utils_directive.bindDirective(
+          utils_directive.browserDirective((dialog, visible) => {
+            const update = (visible2) => {
+              if (visible2) {
+                dialog.showModal();
+              } else {
+                dialog.close();
+              }
+            };
+            update(visible);
+            return {
+              update
+            };
+          }),
+          visible$
+        )
+      },
+      patch,
+      api: {
+        close,
+        async open() {
+          patch({ visible: true });
+          await promise.promiseFromStore(hidden$).promise;
+          return hideResult;
+        },
+        patch
+      }
+    };
+    return res;
+  }
+);
+exports.createModal = createModal;
+exports.getModalDefaultConfig = getModalDefaultConfig;
+exports.modalCloseButtonClick = modalCloseButtonClick;
+exports.modalCloseEscape = modalCloseEscape;
+exports.modalOutsideClick = modalOutsideClick;

package/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@design-factory/core",
+	"description": "Internal package used by the Design Factory.",
+	"version": "21.1.0-next.1",
+	"type": "module",
+	"main": "./index.cjs",
+	"module": "./index.js",
+	"types": "./index.d.ts",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"require": "./index.cjs",
+			"default": "./index.js"
+		},
+		"./components/*": {
+			"types": "./components/*/index.d.ts",
+			"require": "./components/*/index.cjs",
+			"default": "./components/*/index.js"
+		},
+		"./config": {
+			"types": "./config.d.ts",
+			"require": "./config.cjs",
+			"default": "./config.js"
+		},
+		"./types": {
+			"types": "./types.d.ts",
+			"require": "./types.cjs",
+			"default": "./types.js"
+		},
+		"./services/*": {
+			"types": "./services/*.d.ts",
+			"require": "./services/*.cjs",
+			"default": "./services/*.js"
+		},
+		"./services/transitions/*": {
+			"types": "./services/transitions/*.d.ts",
+			"require": "./services/transitions/*.cjs",
+			"default": "./services/transitions/*.js"
+		},
+		"./utils/*": {
+			"types": "./utils/*.d.ts",
+			"require": "./utils/*.cjs",
+			"default": "./utils/*.js"
+		}
+	},
+	"dependencies": {
+		"clsx": "^2.1.1"
+	},
+	"peerDependencies": {
+		"@amadeus-it-group/tansu": "^2.0.0",
+		"@floating-ui/dom": "^1.6.12",
+		"embla-carousel": "^8.5.2",
+		"esm-env": "^1.2.1"
+	},
+	"sideEffects": false
+}

package/pagination-BLVa1UsZ.cjs

@@ -0,0 +1,254 @@
+"use strict";
+const tansu = require("@amadeus-it-group/tansu");
+const utils_stores = require("./utils/stores.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
+const utils_func = require("./utils/func.cjs");
+const utils_directive = require("./directive-DyTodNPd.cjs");
+const utils_widget = require("./utils/widget.cjs");
+const PAGE_LINK_DEFAULT = "#";
+const defaultConfig = {
+  page: 1,
+  collectionSize: 0,
+  pageSize: 10,
+  disabled: false,
+  directionLinks: true,
+  boundaryLinks: false,
+  onPageChange: utils_func.noop,
+  pagesFactory: (_page, pageCount) => {
+    const pages = [];
+    for (let i = 1; i <= pageCount; i++) {
+      pages.push(i);
+    }
+    return pages;
+  },
+  ariaLabel: "Page navigation",
+  activeLabel: "(current)",
+  ariaPageLabel: (processPage, pageCount) => `Page ${processPage} of ${pageCount}`,
+  ariaFirstLabel: "Action link for first page",
+  ariaPreviousLabel: "Action link for previous page",
+  ariaNextLabel: "Action link for next page",
+  ariaLastLabel: "Action link for last page",
+  ariaEllipsisLabel: "Ellipsis page element",
+  ariaLiveLabel: (currentPage) => `Current page is ${currentPage}`,
+  className: "",
+  pageLink: (_page) => PAGE_LINK_DEFAULT
+};
+function getPaginationDefaultConfig() {
+  return { ...defaultConfig };
+}
+const configValidator = {
+  page: utils_writables.typeNumber,
+  collectionSize: utils_writables.typeNumber,
+  pageSize: utils_writables.typeNumber,
+  disabled: utils_writables.typeBoolean,
+  directionLinks: utils_writables.typeBoolean,
+  boundaryLinks: utils_writables.typeBoolean,
+  onPageChange: utils_writables.typeFunction,
+  pagesFactory: utils_writables.typeFunction,
+  ariaLabel: utils_writables.typeString,
+  activeLabel: utils_writables.typeString,
+  ariaPageLabel: utils_writables.typeFunction,
+  ariaFirstLabel: utils_writables.typeString,
+  ariaPreviousLabel: utils_writables.typeString,
+  ariaNextLabel: utils_writables.typeString,
+  ariaLastLabel: utils_writables.typeString,
+  ariaLiveLabel: utils_writables.typeFunction,
+  className: utils_writables.typeString,
+  pageLink: utils_writables.typeFunction,
+  ariaEllipsisLabel: utils_writables.typeString
+};
+const createPagination = utils_widget.createWidgetFactory(
+  "pagination",
+  (config) => {
+    const [
+      {
+        // dirty inputs that need adjustment:
+        page$: _dirtyPage$,
+        // clean inputs with value validation:
+        collectionSize$,
+        pageSize$,
+        onPageChange$,
+        pagesFactory$,
+        ariaPageLabel$,
+        ariaLiveLabel$,
+        pageLink$,
+        disabled$,
+        ariaFirstLabel$,
+        ariaLastLabel$,
+        ariaNextLabel$,
+        ariaPreviousLabel$,
+        ...stateProps
+      },
+      patch
+    ] = utils_stores.writablesForProps(defaultConfig, config, configValidator);
+    const pageCount$ = tansu.computed(() => {
+      let pageCount = Math.ceil(collectionSize$() / pageSize$());
+      if (!utils_writables.isNumber(pageCount) || pageCount < 1) {
+        pageCount = 1;
+      }
+      return pageCount;
+    });
+    const page$ = utils_stores.bindableProp(_dirtyPage$, onPageChange$, (dirtyPage) => utils_writables.clamp(dirtyPage, pageCount$(), 1));
+    const pages$ = tansu.computed(() => pagesFactory$()(page$(), pageCount$()));
+    const nextDisabled$ = tansu.computed(() => page$() === pageCount$() || disabled$());
+    const previousDisabled$ = tansu.computed(() => page$() === 1 || disabled$());
+    const pagesLabel$ = tansu.computed(() => {
+      const ariaPageLabel = ariaPageLabel$();
+      const pageCount = pageCount$();
+      return pages$().map((page) => ariaPageLabel(page, pageCount));
+    });
+    const pagesHrefs$ = tansu.computed(() => {
+      const pageLinkFactory = pageLink$();
+      const pageCount = pageCount$();
+      return Array.from({ length: pageCount }, (_, index) => pageLinkFactory(index + 1));
+    });
+    const directionsHrefs$ = tansu.computed(() => {
+      const pagesHrefs = pagesHrefs$();
+      const pageIndex = page$() - 1;
+      return {
+        previous: pagesHrefs.at(pageIndex > 0 ? pageIndex - 1 : 0),
+        next: pagesHrefs.at(pageIndex + 1) ?? pagesHrefs.at(-1)
+      };
+    });
+    const ariaLiveLabelText$ = tansu.computed(() => ariaLiveLabel$()(page$(), pageCount$()));
+    function handleNavigation(pageNumber, event) {
+      if (pagesHrefs$()[pageNumber - 1] === PAGE_LINK_DEFAULT) {
+        event?.preventDefault();
+      }
+      if (!event || !(event.ctrlKey || event.metaKey)) {
+        event?.preventDefault();
+        page$.set(pageNumber);
+      }
+    }
+    const widget = {
+      ...utils_stores.stateStores({
+        pageCount$,
+        page$,
+        pages$,
+        nextDisabled$,
+        previousDisabled$,
+        pagesLabel$,
+        pagesHrefs$,
+        directionsHrefs$,
+        disabled$,
+        ariaFirstLabel$,
+        ariaLastLabel$,
+        ariaNextLabel$,
+        ariaPreviousLabel$,
+        ariaLiveLabelText$,
+        ...stateProps
+      }),
+      patch,
+      api: {
+        /**
+         * Set the current page pageNumber (starting from 1)
+         * @param pageNumber - Current page number to set.
+         * Value is normalized between 1 and the number of page
+         */
+        select(pageNumber) {
+          page$.set(pageNumber);
+        },
+        /**
+         * Select the first page
+         */
+        first() {
+          page$.set(1);
+        },
+        /**
+         * Select the previous page
+         */
+        previous() {
+          page$.update((p) => p - 1);
+        },
+        /**
+         * Select the next page
+         */
+        next() {
+          page$.update((p) => p + 1);
+        },
+        /**
+         * Select the last page
+         */
+        last() {
+          page$.set(pageCount$());
+        }
+      },
+      directives: {
+        pageLink: utils_directive.createAttributesDirective((pageLinkContext$) => ({
+          events: {
+            click: (e) => handleNavigation(pageLinkContext$().page, e)
+          },
+          attributes: {
+            "aria-current": tansu.computed(() => page$() === pageLinkContext$().page ? "page" : void 0),
+            "aria-label": tansu.computed(() => pagesLabel$()[pageLinkContext$().page - 1]),
+            href: tansu.computed(() => pagesHrefs$()[pageLinkContext$().page - 1]),
+            tabindex: tansu.computed(() => disabled$() ? "-1" : void 0),
+            "aria-disabled": tansu.computed(() => disabled$() ? "true" : void 0)
+          },
+          classNames: {
+            "au-page": utils_stores.true$
+          }
+        })),
+        pageFirst: utils_directive.createAttributesDirective(() => ({
+          events: {
+            click: (e) => handleNavigation(1, e)
+          },
+          attributes: {
+            "aria-label": ariaFirstLabel$,
+            href: tansu.computed(() => pagesHrefs$()[0]),
+            tabindex: tansu.computed(() => previousDisabled$() ? "-1" : void 0),
+            "aria-disabled": tansu.computed(() => previousDisabled$() ? "true" : void 0)
+          },
+          classNames: {
+            "au-first": utils_stores.true$
+          }
+        })),
+        pagePrev: utils_directive.createAttributesDirective(() => ({
+          events: {
+            click: (e) => handleNavigation(page$() - 1, e)
+          },
+          attributes: {
+            "aria-label": ariaPreviousLabel$,
+            href: tansu.computed(() => directionsHrefs$().previous),
+            tabindex: tansu.computed(() => previousDisabled$() ? "-1" : void 0),
+            "aria-disabled": tansu.computed(() => previousDisabled$() ? "true" : void 0)
+          },
+          classNames: {
+            "au-previous": utils_stores.true$
+          }
+        })),
+        pageNext: utils_directive.createAttributesDirective(() => ({
+          events: {
+            click: (e) => handleNavigation(page$() + 1, e)
+          },
+          attributes: {
+            "aria-label": ariaNextLabel$,
+            href: tansu.computed(() => directionsHrefs$().next),
+            tabindex: tansu.computed(() => nextDisabled$() ? "-1" : void 0),
+            "aria-disabled": tansu.computed(() => nextDisabled$() ? "true" : void 0)
+          },
+          classNames: {
+            "au-next": utils_stores.true$
+          }
+        })),
+        pageLast: utils_directive.createAttributesDirective(() => ({
+          events: {
+            click: (e) => handleNavigation(pageCount$(), e)
+          },
+          attributes: {
+            "aria-label": ariaLastLabel$,
+            href: tansu.computed(() => pagesHrefs$().at(-1)),
+            tabindex: tansu.computed(() => nextDisabled$() ? "-1" : void 0),
+            "aria-disabled": tansu.computed(() => nextDisabled$() ? "true" : void 0)
+          },
+          classNames: {
+            "au-last": utils_stores.true$
+          }
+        }))
+      }
+    };
+    return widget;
+  }
+);
+exports.createPagination = createPagination;
+exports.getPaginationDefaultConfig = getPaginationDefaultConfig;