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

package/{accordion-OTiJtxDi.js → accordion-BLVIYePx.js}

@@ -2,7 +2,7 @@ import { writablesForProps, idWithDefault, stateStores, mergeConfigStores, norma
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { writable, computed, asWritable, readable } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
-import { e as typeString, f as typeFunction, c as typeBoolean } from "./writables-DCiBdIBK.js";
+import { e as typeString, g as typeFunction, c as typeBoolean } from "./writables-CgpOQ4hA.js";
 import { k as mergeDirectives, n as createAttributesDirective, r as registrationArray, d as directiveSubscribe } from "./dom-gfxqXJpK.js";
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;

package/{accordion-DTQj-TQ1.cjs → accordion-vfnqMstG.cjs}

@@ -3,7 +3,7 @@ const utils_stores = require("./utils/stores.cjs");
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const tansu = require("@amadeus-it-group/tansu");
 const utils_func = require("./utils/func.cjs");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const utils_directive = require("./dom-CuBx1JPZ.cjs");
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;

package/{alert-DH-mO6WX.js → alert-BpepSIHu.js}

@@ -1,4 +1,4 @@
-import { c as createCommonAlert, g as getCommonAlertDefaultConfig } from "./common-Bffx1jJO.js";
+import { c as createCommonAlert, g as getCommonAlertDefaultConfig } from "./common-BqUjUBPy.js";
 function getAlertDefaultConfig() {
   return { ...getCommonAlertDefaultConfig() };
 }

package/{alert-BrVkxOnA.cjs → alert-D6W48Ffr.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const common = require("./common-CcQOJ_hf.cjs");
+const common = require("./common-BToNPUDq.cjs");
 function getAlertDefaultConfig() {
   return { ...common.getCommonAlertDefaultConfig() };
 }

package/{common-CcQOJ_hf.cjs → common-BToNPUDq.cjs}

@@ -2,7 +2,7 @@
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-BPAJvaL_.cjs");
+const utils_writables = require("./writables-Bn3uhKEG.cjs");
 const defaultCommonAlertConfig = {
   visible: true,
   dismissible: true,

package/{common-Bffx1jJO.js → common-BqUjUBPy.js}

@@ -1,7 +1,7 @@
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
-import { e as typeString, c as typeBoolean, f as typeFunction } from "./writables-DCiBdIBK.js";
+import { e as typeString, c as typeBoolean, g as typeFunction } from "./writables-CgpOQ4hA.js";
 const defaultCommonAlertConfig = {
   visible: true,
   dismissible: true,

package/components/accordion/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("../../accordion-DTQj-TQ1.cjs");
+const accordion = require("../../accordion-vfnqMstG.cjs");
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
 exports.factoryCreateAccordion = accordion.factoryCreateAccordion;

package/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { a, c, f, g } from "../../accordion-OTiJtxDi.js";
+import { a, c, f, g } from "../../accordion-BLVIYePx.js";
 export {
   a as createAccordion,
   c as createAccordionItem,

package/components/alert/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const alert = require("../../alert-BrVkxOnA.cjs");
+const alert = require("../../alert-D6W48Ffr.cjs");
 exports.createAlert = alert.createAlert;
 exports.getAlertDefaultConfig = alert.getAlertDefaultConfig;

package/components/alert/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../alert-DH-mO6WX.js";
+import { c, g } from "../../alert-BpepSIHu.js";
 export {
   c as createAlert,
   g as getAlertDefaultConfig

package/components/carousel/carousel.d.ts

@@ -0,0 +1,232 @@
+import type { Directive, PropsConfig, Widget } from '../../types';
+import type { EmblaCarouselType, EmblaPluginsType, EmblaPluginType } from 'embla-carousel';
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+/**
+ * Represents the Embla carousel options
+ */
+interface EmblaOptions {
+    /**
+     * Align the slides relative to the carousel viewport
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#align}
+     * @defaultValue `'center'`
+     */
+    align: 'start' | 'center' | 'end';
+    /**
+     * Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#container}
+     */
+    container: string | null;
+    /**
+     * Clear leading and trailing empty space that causes excessive scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#containScroll}
+     * @defaultValue `'trimSnaps'`
+     */
+    containScroll: false | 'trimSnaps' | 'keepSnaps';
+    /**
+     * Choose content direction between `ltr` and `rtl`
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#direction}
+     * @defaultValue `'ltr'`
+     */
+    direction: 'ltr' | 'rtl';
+    /**
+     * Enables momentum scrolling
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragFree}
+     * @defaultValue `false`
+     */
+    dragFree: boolean;
+    /**
+     * Drag threshold in pixels
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#dragThreshold}
+     * @defaultValue `10`
+     */
+    dragThreshold: number;
+    /**
+     * Set scroll duration when triggered by any of the API methods
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#duration}
+     * @defaultValue `25`
+     */
+    duration: number;
+    /**
+     * Enables infinite looping
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#loop}
+     * @defaultValue `false`
+     */
+    loop: boolean;
+    /**
+     * Allow the carousel to skip scroll snaps if it's dragged vigorously
+     *
+     * @see {@link https://www.embla-carousel.com/api/options/#skipsnaps}
+     * @defaultValue `false`
+     */
+    skipSnaps: boolean;
+}
+interface CarouselCommonPropsState extends Pick<EmblaOptions, 'direction'> {
+    /**
+     * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     */
+    showNavigationIndicators: boolean;
+}
+/**
+ * Represents the properties for the carousel component.
+ */
+export interface CarouselProps extends EmblaOptions, CarouselCommonPropsState {
+    /**
+     * Plugins to extend the carousel with additional features
+     * @defaultValue `[]`
+     */
+    plugins: EmblaPluginType[];
+    /**
+     * Aria label for navigation indicators
+     */
+    ariaIndicatorLabel: (index: number) => string;
+    /**
+     * Aria label for previous button
+     */
+    ariaPrevLabel: string;
+    /**
+     * Aria label for next button
+     */
+    ariaNextLabel: string;
+}
+/**
+ * Represents the state of a carousel component.
+ */
+export interface CarouselState extends CarouselCommonPropsState {
+    /**
+     * is the carousel currently scrolling
+     */
+    scrolling: boolean;
+    /**
+     * can carousel scroll to previous slide
+     */
+    canScrollPrev: boolean;
+    /**
+     * can carousel scroll to next slide
+     */
+    canScrollNext: boolean;
+    /**
+     * selected scroll snap
+     */
+    selectedScrollSnap: number;
+    /**
+     * is the carousel initialized
+     */
+    initialized: boolean;
+}
+/**
+ * Represents the API for a carousel component.
+ */
+export interface CarouselApi {
+    /**
+     * Scroll to the previous snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollPrev: (jump?: boolean) => void;
+    /**
+     * Scroll to the next snap point if possible.
+     * @param jump - scroll instantly
+     */
+    scrollNext: (jump?: boolean) => void;
+    /**
+     * Scroll to a snap point by index
+     * @param index - the snap point index
+     * @param jump - scroll instantly
+     */
+    scrollTo: (index: number, jump?: boolean) => void;
+    /**
+     * Retrieve the enabled plugins
+     */
+    plugins: () => EmblaPluginsType | undefined;
+    /**
+     * Retrieve the inner EmblaApi object
+     */
+    emblaApi: () => EmblaCarouselType | undefined;
+}
+/**
+ * Represents the directives for a carousel component.
+ */
+export interface CarouselDirectives {
+    /**
+     * the root directive
+     */
+    root: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the previous slide.
+     */
+    scrollPrev: Directive;
+    /**
+     * A directive to be applied to a navigation button allowing to scroll to the next slide.
+     */
+    scrollNext: Directive;
+    /**
+     * A directive to be applied to each slide in the carousel.
+     */
+    slide: Directive<{
+        id: string;
+        index: number;
+    }>;
+    /**
+     * A directive to be applied to a tab list allowing to navigate to the corresponding slide.
+     * This directive adds the role `tablist` and is recommended to be used together with {@link tabIndicator}.
+     */
+    tabList: Directive;
+    /**
+     * A directive to be applied to a navigation indicator allowing to scroll to the corresponding slide.
+     * As this directive adds the role `tab` to the element, it is recommended to use it on a button or a link and the parent element should have the {@link tabList} directive attached.
+     */
+    tabIndicator: Directive<{
+        index: number;
+        id: string;
+        jump?: boolean;
+    }>;
+}
+/**
+ * Represents a carousel widget with specific properties, state, API, and directives.
+ */
+export type CarouselWidget = Widget<CarouselProps, CarouselState, CarouselApi, CarouselDirectives>;
+/**
+ * Retrieve a shallow copy of the default Carousel config
+ * @returns the default Carousel config
+ */
+export declare function getCarouselDefaultConfig(): CarouselProps;
+/**
+ * An Embla Carousel widget factory.
+ *
+ * @internal
+ * @param options$ - the store of Embla options
+ * @param plugins$ - the store of Embla plugins
+ * @returns the Embla carousel widget
+ */
+export declare function createEmblaCarousel(options$: ReadableSignal<Partial<EmblaOptions>>, plugins$?: ReadableSignal<EmblaPluginType[]>): {
+    directive: Directive;
+    stores: {
+        scrolling$: ReadableSignal<boolean>;
+        canScrollPrev$: ReadableSignal<boolean>;
+        canScrollNext$: ReadableSignal<boolean>;
+        selectedScrollSnap$: ReadableSignal<number>;
+        initialized$: ReadableSignal<boolean>;
+        slideNodes$: ReadableSignal<HTMLElement[]>;
+    };
+    api: EmblaCarouselType | undefined;
+};
+/**
+ * Create an CarouselWidget with given config props
+ *
+ * @template SlideData - The type of data used by each slide in the carousel.
+ * @param config - an optional carousel config
+ * @returns a CarouselWidget
+ */
+export declare function createCarousel(config?: PropsConfig<CarouselProps>): CarouselWidget;
+export {};

package/components/carousel/index.cjs

@@ -0,0 +1,288 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_stores = require("../../utils/stores.cjs");
+const utils_directive = require("../../dom-CuBx1JPZ.cjs");
+const EmblaCarousel = require("embla-carousel");
+const tansu = require("@amadeus-it-group/tansu");
+const utils_writables = require("../../writables-Bn3uhKEG.cjs");
+const services_navManager = require("../../services/navManager.cjs");
+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: utils_writables.typeBoolean,
+  plugins: utils_writables.typeArray,
+  align: utils_writables.createTypeEnum(["start", "center", "end"]),
+  container: utils_writables.typeStringOrNull,
+  containScroll: utils_writables.createTypeEnum([false, "trimSnaps", "keepSnaps"]),
+  direction: utils_writables.createTypeEnum(["ltr", "rtl"]),
+  dragThreshold: utils_writables.typeNumber,
+  duration: utils_writables.typeNumber,
+  loop: utils_writables.typeBoolean,
+  skipSnaps: utils_writables.typeBoolean,
+  showNavigationArrows: utils_writables.typeBoolean,
+  showNavigationIndicators: utils_writables.typeBoolean,
+  ariaPrevLabel: utils_writables.typeString,
+  ariaNextLabel: utils_writables.typeString,
+  ariaIndicatorLabel: utils_writables.typeFunction
+};
+function createEmblaCarousel(options$, plugins$) {
+  let emblaApi;
+  const scrolling$ = tansu.writable(false);
+  const canScrollPrev$ = tansu.writable(false);
+  const canScrollNext$ = tansu.writable(true);
+  const selectedScrollSnap$ = tansu.writable(0);
+  const initialized$ = tansu.writable(false);
+  const slideNodes$ = tansu.writable([]);
+  const directiveArgs$ = tansu.computed(() => ({
+    options: options$(),
+    plugins: plugins$ ? plugins$() : []
+  }));
+  return {
+    directive: utils_directive.bindDirective(
+      utils_directive.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$: tansu.asReadable(scrolling$),
+      canScrollPrev$: tansu.asReadable(canScrollPrev$),
+      canScrollNext$: tansu.asReadable(canScrollNext$),
+      selectedScrollSnap$: tansu.asReadable(selectedScrollSnap$),
+      initialized$: tansu.asReadable(initialized$),
+      slideNodes$: tansu.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
+  ] = utils_stores.writablesForProps(defaultConfig, config, configValidator);
+  const emblaOptions$ = tansu.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 } = services_navManager.createNavManager();
+  const navManagerConfig = {
+    keys: {
+      ArrowLeft: focusPrevious,
+      ArrowRight: focusNext,
+      Home: focusFirst,
+      End: focusLast
+    },
+    selector: (node) => node.querySelectorAll("[role='tab']")
+  };
+  return {
+    ...utils_stores.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: utils_directive.mergeDirectives(
+        emblaCarousel.directive,
+        utils_directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-carousel": utils_stores.true$
+          },
+          attributes: {
+            role: tansu.readable("region"),
+            "aria-roledescription": tansu.readable("carousel"),
+            dir: direction$
+          }
+        }))
+      ),
+      scrollPrev: utils_directive.createAttributesDirective(() => ({
+        attributes: {
+          "aria-label": ariaPrevLabel$,
+          disabled: tansu.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: utils_directive.createAttributesDirective(() => ({
+        attributes: {
+          "aria-label": ariaNextLabel$,
+          disabled: tansu.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: utils_directive.mergeDirectives(
+        utils_directive.bindDirective(navDirective, tansu.readable(navManagerConfig)),
+        utils_directive.browserDirective(() => {
+          const unsubscribe = slideNodes$.subscribe(() => {
+            refreshElements();
+          });
+          return {
+            destroy: unsubscribe
+          };
+        }),
+        utils_directive.createAttributesDirective(() => ({
+          attributes: {
+            role: tansu.readable("tablist")
+          }
+        }))
+      ),
+      tabIndicator: utils_directive.createAttributesDirective((slide$) => ({
+        events: {
+          click: () => {
+            var _a;
+            (_a = emblaCarousel.api) == null ? void 0 : _a.scrollTo(slide$().index, slide$().jump ?? true);
+          }
+        },
+        attributes: {
+          "aria-label": tansu.computed(() => ariaIndicatorLabel$()(slide$().index)),
+          "aria-selected": tansu.computed(() => slide$().index === emblaCarousel.stores.selectedScrollSnap$() ? "true" : void 0),
+          "aria-controls": tansu.computed(() => slide$().id),
+          role: tansu.readable("tab"),
+          tabindex: tansu.computed(() => slide$().index === emblaCarousel.stores.selectedScrollSnap$() ? "0" : "-1")
+        }
+      })),
+      slide: utils_directive.createAttributesDirective((slide$) => {
+        const selected$ = tansu.computed(() => slide$().index === emblaCarousel.stores.selectedScrollSnap$());
+        return {
+          attributes: {
+            id: tansu.computed(() => slide$().id),
+            "aria-hidden": tansu.computed(() => selected$() ? void 0 : "true"),
+            role: tansu.computed(() => showNavigationIndicators$() ? "tabpanel" : "group"),
+            "aria-roledescription": tansu.computed(() => showNavigationIndicators$() ? void 0 : "slide"),
+            tabindex: tansu.computed(() => showNavigationIndicators$() && selected$() ? "0" : void 0)
+          },
+          classNames: {
+            "au-carousel-slide": utils_stores.true$
+          }
+        };
+      })
+    }
+  };
+}
+exports.createCarousel = createCarousel;
+exports.createEmblaCarousel = createEmblaCarousel;
+exports.getCarouselDefaultConfig = getCarouselDefaultConfig;

package/components/carousel/index.d.ts

@@ -0,0 +1 @@
+export * from './carousel';