@design-factory/angular 21.0.3 → 21.1.0-next.0

package/node_modules/@agnos-ui/core/components/carousel/carousel.d.ts

@@ -0,0 +1,247 @@
+import type { Directive, Widget, WidgetFactory } 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}
+     *
+     * @defaultValue `null`
+     */
+    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.
+     *
+     * @defaultValue `true`
+     */
+    showNavigationArrows: boolean;
+    /**
+     * If `true`, navigation indicators at the bottom of the slide will be visible.
+     *
+     * @defaultValue `true`
+     */
+    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
+     *
+     * @defaultValue
+     * ```ts
+     * (index: number) => `Select slide ${index + 1}`
+     * ```
+     */
+    ariaIndicatorLabel: (index: number) => string;
+    /**
+     * Aria label for previous button
+     *
+     * @defaultValue `'Select previous slide'`
+     */
+    ariaPrevLabel: string;
+    /**
+     * Aria label for next button
+     *
+     * @defaultValue `'Select next slide'`
+     */
+    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 const createCarousel: WidgetFactory<CarouselWidget>;
+export {};

package/node_modules/@agnos-ui/core/components/carousel/index.cjs

@@ -0,0 +1,292 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_stores = require("../../utils/stores.cjs");
+const utils_directive = require("../../directive-DCaXmRe_.cjs");
+const EmblaCarousel = require("embla-carousel");
+const tansu = require("@amadeus-it-group/tansu");
+const utils_writables = require("../../writables-Dt68gADJ.cjs");
+const services_navManager = require("../../services/navManager.cjs");
+const utils_widget = require("../../utils/widget.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?.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;
+    }
+  };
+}
+const createCarousel = utils_widget.createWidgetFactory(
+  "carousel",
+  (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,
+      focusLeft,
+      focusRight,
+      focusFirst,
+      focusLast
+    } = services_navManager.createNavManager();
+    const navManagerConfig = {
+      keys: {
+        ArrowLeft: focusLeft,
+        ArrowRight: focusRight,
+        Home: focusFirst,
+        End: focusLast
+      },
+      selector: (node) => node.querySelectorAll("[role='tab']")
+    };
+    return {
+      ...utils_stores.stateStores({
+        ...emblaStores,
+        ...stateProps,
+        direction$,
+        showNavigationIndicators$
+      }),
+      patch,
+      api: {
+        scrollPrev: (jump) => {
+          emblaCarousel.api?.scrollPrev?.(jump);
+        },
+        scrollNext: (jump) => {
+          emblaCarousel.api?.scrollNext?.(jump);
+        },
+        scrollTo: (index, jump) => {
+          emblaCarousel.api?.scrollTo?.(index, jump);
+        },
+        plugins: () => emblaCarousel.api?.plugins?.(),
+        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: () => emblaCarousel.api?.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: () => emblaCarousel.api?.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: () => {
+                emblaCarousel.api?.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/node_modules/@agnos-ui/core/components/carousel/index.d.ts

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