@agnos-ui/core 0.8.0-next.1 → 0.8.0

package/components/carousel/index.js

@@ -0,0 +1,288 @@
+import { writablesForProps, stateStores, true$ } from "../../utils/stores.js";
+import { a as bindDirective, b as browserDirective, n as createAttributesDirective, k as mergeDirectives } from "../../dom-gfxqXJpK.js";
+import EmblaCarousel from "embla-carousel";
+import { writable, computed, asReadable, readable } from "@amadeus-it-group/tansu";
+import { g as typeFunction, e as typeString, c as typeBoolean, a as typeNumber, j as createTypeEnum, f as typeStringOrNull, i as typeArray } from "../../writables-CgpOQ4hA.js";
+import { createNavManager } from "../../services/navManager.js";
+const defaultConfig = {
+  align: "center",
+  container: null,
+  containScroll: "trimSnaps",
+  direction: "ltr",
+  dragFree: false,
+  dragThreshold: 10,
+  duration: 25,
+  loop: false,
+  skipSnaps: false,
+  plugins: [],
+  showNavigationArrows: true,
+  showNavigationIndicators: true,
+  ariaPrevLabel: "Select previous slide",
+  ariaNextLabel: "Select next slide",
+  ariaIndicatorLabel: (index) => `Select slide ${index + 1}`
+};
+function getCarouselDefaultConfig() {
+  return { ...defaultConfig };
+}
+const configValidator = {
+  dragFree: typeBoolean,
+  plugins: typeArray,
+  align: createTypeEnum(["start", "center", "end"]),
+  container: typeStringOrNull,
+  containScroll: createTypeEnum([false, "trimSnaps", "keepSnaps"]),
+  direction: createTypeEnum(["ltr", "rtl"]),
+  dragThreshold: typeNumber,
+  duration: typeNumber,
+  loop: typeBoolean,
+  skipSnaps: typeBoolean,
+  showNavigationArrows: typeBoolean,
+  showNavigationIndicators: typeBoolean,
+  ariaPrevLabel: typeString,
+  ariaNextLabel: typeString,
+  ariaIndicatorLabel: typeFunction
+};
+function createEmblaCarousel(options$, plugins$) {
+  let emblaApi;
+  const scrolling$ = writable(false);
+  const canScrollPrev$ = writable(false);
+  const canScrollNext$ = writable(true);
+  const selectedScrollSnap$ = writable(0);
+  const initialized$ = writable(false);
+  const slideNodes$ = writable([]);
+  const directiveArgs$ = computed(() => ({
+    options: options$(),
+    plugins: plugins$ ? plugins$() : []
+  }));
+  return {
+    directive: bindDirective(
+      browserDirective((element, { options, plugins }) => {
+        if (emblaApi) {
+          throw new Error("Only one Embla directive can be attached per carousel widget !");
+        }
+        emblaApi = EmblaCarousel(element, options, plugins);
+        emblaApi.on("scroll", () => {
+          scrolling$.set(true);
+        });
+        emblaApi.on("settle", () => {
+          scrolling$.set(false);
+        });
+        emblaApi.on("select", (api) => {
+          canScrollNext$.set(api.canScrollNext());
+          canScrollPrev$.set(api.canScrollPrev());
+          selectedScrollSnap$.set(api.selectedScrollSnap());
+        });
+        emblaApi.on("init", () => {
+          initialized$.set(true);
+        });
+        emblaApi.on("reInit", (api) => {
+          canScrollNext$.set(api.canScrollNext());
+          canScrollPrev$.set(api.canScrollPrev());
+          scrolling$.set(false);
+          selectedScrollSnap$.set(api.selectedScrollSnap());
+        });
+        emblaApi.on("slidesChanged", (api) => {
+          slideNodes$.set(api.slideNodes());
+        });
+        canScrollNext$.set(emblaApi.canScrollNext());
+        canScrollPrev$.set(emblaApi.canScrollPrev());
+        slideNodes$.set(emblaApi.slideNodes());
+        return {
+          update: ({ options: options2, plugins: plugins2 }) => {
+            emblaApi.reInit(options2, plugins2);
+          },
+          destroy: () => {
+            emblaApi == null ? void 0 : emblaApi.destroy();
+            emblaApi = void 0;
+            initialized$.set(false);
+            scrolling$.set(false);
+            canScrollPrev$.set(false);
+            canScrollNext$.set(true);
+            selectedScrollSnap$.set(0);
+            slideNodes$.set([]);
+          }
+        };
+      }),
+      directiveArgs$
+    ),
+    stores: {
+      scrolling$: asReadable(scrolling$),
+      canScrollPrev$: asReadable(canScrollPrev$),
+      canScrollNext$: asReadable(canScrollNext$),
+      selectedScrollSnap$: asReadable(selectedScrollSnap$),
+      initialized$: asReadable(initialized$),
+      slideNodes$: asReadable(slideNodes$)
+    },
+    get api() {
+      return emblaApi;
+    }
+  };
+}
+function createCarousel(config) {
+  const [
+    {
+      align$,
+      container$,
+      containScroll$,
+      direction$,
+      dragFree$,
+      dragThreshold$,
+      duration$,
+      loop$,
+      skipSnaps$,
+      plugins$,
+      ariaPrevLabel$,
+      ariaNextLabel$,
+      ariaIndicatorLabel$,
+      showNavigationIndicators$,
+      ...stateProps
+    },
+    patch
+  ] = writablesForProps(defaultConfig, config, configValidator);
+  const emblaOptions$ = computed(() => ({
+    align: align$(),
+    container: container$(),
+    containScroll: containScroll$(),
+    direction: direction$(),
+    dragFree: dragFree$(),
+    dragThreshold: dragThreshold$(),
+    duration: duration$(),
+    loop: loop$(),
+    skipSnaps: skipSnaps$()
+  }));
+  const emblaCarousel = createEmblaCarousel(emblaOptions$, plugins$);
+  const {
+    stores: { slideNodes$, ...emblaStores }
+  } = emblaCarousel;
+  const { directive: navDirective, refreshElements, focusPrevious, focusNext, focusFirst, focusLast } = createNavManager();
+  const navManagerConfig = {
+    keys: {
+      ArrowLeft: focusPrevious,
+      ArrowRight: focusNext,
+      Home: focusFirst,
+      End: focusLast
+    },
+    selector: (node) => node.querySelectorAll("[role='tab']")
+  };
+  return {
+    ...stateStores({
+      ...emblaStores,
+      ...stateProps,
+      direction$,
+      showNavigationIndicators$
+    }),
+    patch,
+    api: {
+      scrollPrev: (jump) => {
+        var _a, _b;
+        (_b = (_a = emblaCarousel.api) == null ? void 0 : _a.scrollPrev) == null ? void 0 : _b.call(_a, jump);
+      },
+      scrollNext: (jump) => {
+        var _a, _b;
+        (_b = (_a = emblaCarousel.api) == null ? void 0 : _a.scrollNext) == null ? void 0 : _b.call(_a, jump);
+      },
+      scrollTo: (index, jump) => {
+        var _a, _b;
+        (_b = (_a = emblaCarousel.api) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, index, jump);
+      },
+      plugins: () => {
+        var _a, _b;
+        return (_b = (_a = emblaCarousel.api) == null ? void 0 : _a.plugins) == null ? void 0 : _b.call(_a);
+      },
+      emblaApi: () => emblaCarousel.api
+    },
+    directives: {
+      root: mergeDirectives(
+        emblaCarousel.directive,
+        createAttributesDirective(() => ({
+          classNames: {
+            "au-carousel": true$
+          },
+          attributes: {
+            role: readable("region"),
+            "aria-roledescription": readable("carousel"),
+            dir: direction$
+          }
+        }))
+      ),
+      scrollPrev: createAttributesDirective(() => ({
+        attributes: {
+          "aria-label": ariaPrevLabel$,
+          disabled: computed(() => !emblaCarousel.stores.canScrollPrev$() || void 0)
+        },
+        events: {
+          click: () => {
+            var _a;
+            return (_a = emblaCarousel.api) == null ? void 0 : _a.scrollPrev();
+          },
+          pointerdown: (event) => event.preventDefault(),
+          touchstart: (event) => event.stopPropagation()
+        }
+      })),
+      scrollNext: createAttributesDirective(() => ({
+        attributes: {
+          "aria-label": ariaNextLabel$,
+          disabled: computed(() => !emblaCarousel.stores.canScrollNext$() || void 0)
+        },
+        events: {
+          click: () => {
+            var _a;
+            return (_a = emblaCarousel.api) == null ? void 0 : _a.scrollNext();
+          },
+          pointerdown: (event) => event.preventDefault(),
+          touchstart: (event) => event.stopPropagation()
+        }
+      })),
+      tabList: mergeDirectives(
+        bindDirective(navDirective, readable(navManagerConfig)),
+        browserDirective(() => {
+          const unsubscribe = slideNodes$.subscribe(() => {
+            refreshElements();
+          });
+          return {
+            destroy: unsubscribe
+          };
+        }),
+        createAttributesDirective(() => ({
+          attributes: {
+            role: readable("tablist")
+          }
+        }))
+      ),
+      tabIndicator: createAttributesDirective((slide$) => ({
+        events: {
+          click: () => {
+            var _a;
+            (_a = emblaCarousel.api) == null ? void 0 : _a.scrollTo(slide$().index, slide$().jump ?? true);
+          }
+        },
+        attributes: {
+          "aria-label": computed(() => ariaIndicatorLabel$()(slide$().index)),
+          "aria-selected": computed(() => slide$().index === emblaCarousel.stores.selectedScrollSnap$() ? "true" : void 0),
+          "aria-controls": computed(() => slide$().id),
+          role: readable("tab"),
+          tabindex: computed(() => slide$().index === emblaCarousel.stores.selectedScrollSnap$() ? "0" : "-1")
+        }
+      })),
+      slide: createAttributesDirective((slide$) => {
+        const selected$ = computed(() => slide$().index === emblaCarousel.stores.selectedScrollSnap$());
+        return {
+          attributes: {
+            id: computed(() => slide$().id),
+            "aria-hidden": computed(() => selected$() ? void 0 : "true"),
+            role: computed(() => showNavigationIndicators$() ? "tabpanel" : "group"),
+            "aria-roledescription": computed(() => showNavigationIndicators$() ? void 0 : "slide"),
+            tabindex: computed(() => showNavigationIndicators$() && selected$() ? "0" : void 0)
+          },
+          classNames: {
+            "au-carousel-slide": true$
+          }
+        };
+      })
+    }
+  };
+}
+export {
+  createCarousel,
+  createEmblaCarousel,
+  getCarouselDefaultConfig
+};

package/components/modal/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../../modal-B7bYoubx.cjs");
+const modal = require("../../modal-Dw1MuWPV.cjs");
 exports.createModal = modal.createModal;
 exports.getModalDefaultConfig = modal.getModalDefaultConfig;
 exports.modalCloseButtonClick = modal.modalCloseButtonClick;

package/components/modal/index.js

@@ -1,4 +1,4 @@
-import { c, g, a, m } from "../../modal-85Sw8xuV.js";
+import { c, g, a, m } from "../../modal-CGK3h9pR.js";
 export {
   c as createModal,
   g as getModalDefaultConfig,

package/components/pagination/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const pagination = require("../../pagination-5YARuB3V.cjs");
+const pagination = require("../../pagination-BzyKulaI.cjs");
 exports.createPagination = pagination.createPagination;
 exports.getPaginationDefaultConfig = pagination.getPaginationDefaultConfig;

package/components/pagination/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../pagination-4g3N8ktf.js";
+import { c, g } from "../../pagination-CRAKaOuh.js";
 export {
   c as createPagination,
   g as getPaginationDefaultConfig

package/components/progressbar/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const progressbar = require("../../progressbar-BpSrg4HG.cjs");
+const progressbar = require("../../progressbar-D9rvrxXi.cjs");
 exports.createProgressbar = progressbar.createProgressbar;
 exports.getProgressbarDefaultConfig = progressbar.getProgressbarDefaultConfig;

package/components/progressbar/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../progressbar-BoJsBPH1.js";
+import { c, g } from "../../progressbar-Csnqx_Pk.js";
 export {
   c as createProgressbar,
   g as getProgressbarDefaultConfig

package/components/rating/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rating = require("../../rating-C8tn9xTO.cjs");
+const rating = require("../../rating-C4c8Paz-.cjs");
 exports.createRating = rating.createRating;
 exports.getRatingDefaultConfig = rating.getRatingDefaultConfig;

package/components/rating/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../rating-B3xktzOf.js";
+import { c, g } from "../../rating-CvTnNxgN.js";
 export {
   c as createRating,
   g as getRatingDefaultConfig

package/components/slider/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-B2JFXDLt.cjs");
+const slider = require("../../slider-B0ZfAY0K.cjs");
 exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-Cs69pziL.js";
+import { c, g } from "../../slider-BF6a0eh_.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/components/toast/index.cjs

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const toast = require("../../toast-CaIcB2sD.cjs");
-exports.createToast = toast.createToast;
-exports.getToastDefaultConfig = toast.getToastDefaultConfig;
+const toaster = require("../../toaster-B2ibv38T.cjs");
+exports.Toaster = toaster.Toaster;
+exports.createToast = toaster.createToast;
+exports.defaultToasterProps = toaster.defaultToasterProps;
+exports.getToastDefaultConfig = toaster.getToastDefaultConfig;

package/components/toast/index.d.ts

@@ -1 +1,2 @@
 export * from './toast';
+export * from './toaster';

package/components/toast/index.js

@@ -1,5 +1,7 @@
-import { c, g } from "../../toast-4HGIz3Bu.js";
+import { T, c, d, g } from "../../toaster-PwfLC7FH.js";
 export {
+  T as Toaster,
   c as createToast,
+  d as defaultToasterProps,
   g as getToastDefaultConfig
 };

package/components/toast/toaster.d.ts

@@ -0,0 +1,128 @@
+import { type ToastProps } from './toast';
+import type { Directive } from '../../types';
+import type { ReadableSignal, WritableSignal } from '@amadeus-it-group/tansu';
+/**
+ * Represents the possible positions for displaying a toast notification.
+ *
+ * The positions are defined based on a grid layout with three horizontal
+ * alignments (left, center, right) and three vertical alignments (top, middle, bottom).
+ *
+ * Available positions:
+ * - `topLeft`: Top-left corner of the screen.
+ * - `topCenter`: Top-center of the screen.
+ * - `topRight`: Top-right corner of the screen.
+ * - `middleLeft`: Middle-left side of the screen.
+ * - `middleCenter`: Center of the screen.
+ * - `middleRight`: Middle-right side of the screen.
+ * - `bottomLeft`: Bottom-left corner of the screen.
+ * - `bottomCenter`: Bottom-center of the screen.
+ * - `bottomRight`: Bottom-right corner of the screen.
+ */
+export type ToastPositions = 'topLeft' | 'topCenter' | 'topRight' | 'middleLeft' | 'middleCenter' | 'middleRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+/**
+ * Props of the toaster
+ */
+export interface ToasterProps {
+    /** How much time (ms) a toast is displayed; 0 means it won't be removed until a manual action */
+    duration: number;
+    /** Where to position the toasts */
+    position: ToastPositions;
+    /** Maximum number of toasts displayed */
+    limit?: number;
+    /**  Pause toast when hover */
+    pauseOnHover?: boolean;
+    /** Display a dismiss button on each toast. When duration = 0, this is enforced to true */
+    dismissible: boolean;
+    /** Add a button to close all the toasts at once */
+    closeAll?: boolean;
+    /** Close all label */
+    closeAllLabel?: string;
+}
+/**
+ * Toast object
+ * @template Props Type of the toast properties.
+ */
+export interface ToasterToast<Props> {
+    /** Identifier of the toasts in the toaster */
+    id: number;
+    /** Properties of the toast */
+    props: Props;
+}
+/**
+ * Represents a timer used by the toaster service.
+ */
+export interface ToasterTimer {
+    /**
+     * The timeout identifier returned by `setTimeout`.
+     */
+    timeout: ReturnType<typeof setTimeout> | null;
+    /**
+     * The timestamp when the timer was started.
+     */
+    started: number;
+    /**
+     * The timestamp when the timer was paused (optional).
+     */
+    paused?: number;
+    /**
+     * The duration for which the timer is set (optional). Used internally to compute the remaining time.
+     */
+    duration: number;
+}
+export declare const defaultToasterProps: ToasterProps;
+/**
+ * Create a toaster provider with helpers and state.
+ * @param props Options for the toaster.
+ * @template Props Type of the toast properties.
+ */
+export declare class Toaster<Props extends Partial<ToastProps> = ToastProps> {
+    #private;
+    /**
+     * Get the toasts value from the store
+     * @returns The array of toasts.
+     */
+    readonly toasts: ReadableSignal<ToasterToast<Props>[]>;
+    readonly options: WritableSignal<ToasterProps>;
+    /**
+     * Get the timers value from the store
+     * @returns The map of timers.
+     */
+    get timers(): ReadonlyMap<number, ToasterTimer>;
+    constructor(props?: Partial<ToasterProps>);
+    /**
+     * Add timer for a toast
+     * @param id Id of the toast
+     * @param duration Duration of the timer, by default taken from options
+     */
+    readonly addTimer: (id: number, duration?: number) => void;
+    /**
+     * Pause a timer for a toast
+     * @param id Id of the toast
+     */
+    readonly pauseTimer: (id: number) => void;
+    /**
+     * Resume a timer for a toast
+     * @param id Id of the toast
+     */
+    readonly resumeTimer: (id: number) => void;
+    /**
+     * Events directive is used to set events on the Toast component, to keep track for example of pointer enter/leave,
+     * used to pause / resume the timer in case of duration and pauseOnHover are specified.
+     */
+    readonly eventsDirective: Directive<number>;
+    /**
+     * Helper to add a toast to the viewport.
+     * @param props Options for the toast.
+     * @returns The ID of the added toast.
+     */
+    readonly addToast: (props: Props) => number;
+    /**
+     * Helper to remove a toast to the viewport.
+     * @param id Id of the toast to remove.
+     */
+    readonly removeToast: (id: number) => void;
+    /** Helper to update toasts when options change */
+    readonly updateToasts: () => void;
+    /** Helper to close all toasts at once */
+    readonly closeAll: () => void;
+}

package/components/tree/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tree = require("../../tree-D4t2SOql.cjs");
+const tree = require("../../tree-Dwv2U0ea.cjs");
 exports.createTree = tree.createTree;
 exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;

package/components/tree/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../tree-C_goOyCv.js";
+import { c, g } from "../../tree-DUU_TWqy.js";
 export {
   c as createTree,
   g as getTreeDefaultConfig

package/config.d.ts

@@ -9,6 +9,7 @@ import type { ProgressbarProps } from './components/progressbar/progressbar';
 import type { SliderProps } from './components/slider/slider';
 import type { ToastProps } from './components/toast/toast';
 import type { TreeProps } from './components/tree/tree';
+import type { CarouselProps } from './components/carousel';
 /**
  * A utility type that makes all properties of an object type `T` optional,
  * and also makes all properties of the nested objects within `T` optional.
@@ -104,4 +105,8 @@ export type WidgetsConfig = {
      * tree widget config
      */
     tree: TreeProps;
+    /**
+     * carousel widget config
+     */
+    carousel: CarouselProps;
 };

package/index.cjs

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const types = require("./types.cjs");
-const accordion = require("./accordion-DTQj-TQ1.cjs");
-const alert = require("./alert-BrVkxOnA.cjs");
-const modal = require("./modal-B7bYoubx.cjs");
-const pagination = require("./pagination-5YARuB3V.cjs");
-const progressbar = require("./progressbar-BpSrg4HG.cjs");
-const rating = require("./rating-C8tn9xTO.cjs");
+const accordion = require("./accordion-vfnqMstG.cjs");
+const alert = require("./alert-D6W48Ffr.cjs");
+const modal = require("./modal-Dw1MuWPV.cjs");
+const pagination = require("./pagination-BzyKulaI.cjs");
+const progressbar = require("./progressbar-D9rvrxXi.cjs");
+const rating = require("./rating-C4c8Paz-.cjs");
 const select = require("./select-D1pBz4CM.cjs");
-const slider = require("./slider-B2JFXDLt.cjs");
-const toast = require("./toast-CaIcB2sD.cjs");
-const tree = require("./tree-D4t2SOql.cjs");
+const slider = require("./slider-B0ZfAY0K.cjs");
+const toaster = require("./toaster-B2ibv38T.cjs");
+const tree = require("./tree-Dwv2U0ea.cjs");
 const config = require("./config.cjs");
 const services_extendWidget = require("./services/extendWidget.cjs");
 const services_floatingUI = require("./services/floatingUI.cjs");
@@ -27,7 +27,7 @@ const services_transitions_cssTransitions = require("./services/transitions/cssT
 const services_transitions_simpleClassTransition = require("./services/transitions/simpleClassTransition.cjs");
 const utils_directive = require("./dom-CuBx1JPZ.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 exports.INVALID_VALUE = types.INVALID_VALUE;
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
@@ -49,8 +49,10 @@ exports.createSelect = select.createSelect;
 exports.getSelectDefaultConfig = select.getSelectDefaultConfig;
 exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;
-exports.createToast = toast.createToast;
-exports.getToastDefaultConfig = toast.getToastDefaultConfig;
+exports.Toaster = toaster.Toaster;
+exports.createToast = toaster.createToast;
+exports.defaultToasterProps = toaster.defaultToasterProps;
+exports.getToastDefaultConfig = toaster.getToastDefaultConfig;
 exports.createTree = tree.createTree;
 exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
 exports.createWidgetsConfig = config.createWidgetsConfig;
@@ -119,3 +121,4 @@ exports.typeHTMLElementOrNull = utils_writables.typeHTMLElementOrNull;
 exports.typeNumber = utils_writables.typeNumber;
 exports.typeNumberInRangeFactory = utils_writables.typeNumberInRangeFactory;
 exports.typeString = utils_writables.typeString;
+exports.typeStringOrNull = utils_writables.typeStringOrNull;