@design-factory/core 21.1.0-next.1

package/collapse-Bn8iHKrd.js

@@ -0,0 +1,95 @@
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { writablesForProps, idWithDefault, stateStores } from "./utils/stores.js";
+import { g as createAttributesDirective, s as mergeDirectives } from "./directive-CNNSo5Yn.js";
+import { e as typeFunction, j as typeString, b as typeBoolean } from "./writables-DYGjj5T3.js";
+import { computed } from "@amadeus-it-group/tansu";
+import { noop } from "./utils/func.js";
+import { createWidgetFactory } from "./utils/widget.js";
+const defaultCollapseConfig = {
+  visible: false,
+  onVisibleChange: noop,
+  onShown: noop,
+  onHidden: noop,
+  animated: true,
+  animatedOnInit: false,
+  id: "",
+  transition: noop
+};
+function getCollapseDefaultConfig() {
+  return { ...defaultCollapseConfig };
+}
+const commonCollapseConfigValidator = {
+  onVisibleChange: typeFunction,
+  onHidden: typeFunction,
+  onShown: typeFunction,
+  animatedOnInit: typeBoolean,
+  animated: typeBoolean,
+  visible: typeBoolean,
+  id: typeString,
+  transition: typeFunction
+};
+const createCollapse = createWidgetFactory(
+  "collapse",
+  (config) => {
+    const [
+      {
+        transition$,
+        animatedOnInit$,
+        animated$,
+        visible$: requestedVisible$,
+        onVisibleChange$,
+        onHidden$,
+        onShown$,
+        id$: _dirtyId$,
+        ...stateProps
+      },
+      patch
+    ] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
+    const id$ = idWithDefault(_dirtyId$);
+    const transition = createTransition({
+      props: {
+        transition: transition$,
+        visible: requestedVisible$,
+        animated: animated$,
+        animatedOnInit: animatedOnInit$,
+        onVisibleChange: onVisibleChange$,
+        onHidden: onHidden$,
+        onShown: onShown$
+      }
+    });
+    const visible$ = transition.stores.visible$;
+    const hidden$ = transition.stores.hidden$;
+    return {
+      ...stateStores({ ...stateProps, visible$, hidden$ }),
+      patch,
+      api: {
+        open: transition.api.show,
+        close: transition.api.hide,
+        toggle: (animated) => transition.api.toggle(void 0, animated)
+      },
+      directives: {
+        collapseDirective: mergeDirectives(
+          transition.directives.directive,
+          createAttributesDirective(() => ({
+            attributes: {
+              id: id$
+            }
+          }))
+        ),
+        triggerDirective: createAttributesDirective(() => ({
+          attributes: {
+            "aria-expanded": computed(() => `${visible$()}`),
+            "aria-controls": id$
+          },
+          events: {
+            click: () => void transition.api.toggle()
+          }
+        }))
+      }
+    };
+  }
+);
+export {
+  createCollapse as c,
+  getCollapseDefaultConfig as g
+};

package/collapse-BnWw4Hnc.cjs

@@ -0,0 +1,94 @@
+"use strict";
+const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const utils_directive = require("./directive-DyTodNPd.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
+const tansu = require("@amadeus-it-group/tansu");
+const utils_func = require("./utils/func.cjs");
+const utils_widget = require("./utils/widget.cjs");
+const defaultCollapseConfig = {
+  visible: false,
+  onVisibleChange: utils_func.noop,
+  onShown: utils_func.noop,
+  onHidden: utils_func.noop,
+  animated: true,
+  animatedOnInit: false,
+  id: "",
+  transition: utils_func.noop
+};
+function getCollapseDefaultConfig() {
+  return { ...defaultCollapseConfig };
+}
+const commonCollapseConfigValidator = {
+  onVisibleChange: utils_writables.typeFunction,
+  onHidden: utils_writables.typeFunction,
+  onShown: utils_writables.typeFunction,
+  animatedOnInit: utils_writables.typeBoolean,
+  animated: utils_writables.typeBoolean,
+  visible: utils_writables.typeBoolean,
+  id: utils_writables.typeString,
+  transition: utils_writables.typeFunction
+};
+const createCollapse = utils_widget.createWidgetFactory(
+  "collapse",
+  (config) => {
+    const [
+      {
+        transition$,
+        animatedOnInit$,
+        animated$,
+        visible$: requestedVisible$,
+        onVisibleChange$,
+        onHidden$,
+        onShown$,
+        id$: _dirtyId$,
+        ...stateProps
+      },
+      patch
+    ] = utils_stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
+    const id$ = utils_stores.idWithDefault(_dirtyId$);
+    const transition = services_transitions_baseTransitions.createTransition({
+      props: {
+        transition: transition$,
+        visible: requestedVisible$,
+        animated: animated$,
+        animatedOnInit: animatedOnInit$,
+        onVisibleChange: onVisibleChange$,
+        onHidden: onHidden$,
+        onShown: onShown$
+      }
+    });
+    const visible$ = transition.stores.visible$;
+    const hidden$ = transition.stores.hidden$;
+    return {
+      ...utils_stores.stateStores({ ...stateProps, visible$, hidden$ }),
+      patch,
+      api: {
+        open: transition.api.show,
+        close: transition.api.hide,
+        toggle: (animated) => transition.api.toggle(void 0, animated)
+      },
+      directives: {
+        collapseDirective: utils_directive.mergeDirectives(
+          transition.directives.directive,
+          utils_directive.createAttributesDirective(() => ({
+            attributes: {
+              id: id$
+            }
+          }))
+        ),
+        triggerDirective: utils_directive.createAttributesDirective(() => ({
+          attributes: {
+            "aria-expanded": tansu.computed(() => `${visible$()}`),
+            "aria-controls": id$
+          },
+          events: {
+            click: () => void transition.api.toggle()
+          }
+        }))
+      }
+    };
+  }
+);
+exports.createCollapse = createCollapse;
+exports.getCollapseDefaultConfig = getCollapseDefaultConfig;

package/common-B5jS-Ih_.cjs

@@ -0,0 +1,73 @@
+"use strict";
+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-Dt68gADJ.cjs");
+const defaultCommonAlertConfig = {
+  visible: true,
+  dismissible: true,
+  ariaCloseButtonLabel: "Close",
+  onVisibleChange: utils_func.noop,
+  onShown: utils_func.noop,
+  onHidden: utils_func.noop,
+  animated: true,
+  animatedOnInit: false,
+  transition: utils_func.noop,
+  className: ""
+};
+function getCommonAlertDefaultConfig() {
+  return { ...defaultCommonAlertConfig };
+}
+const commonAlertConfigValidator = {
+  dismissible: utils_writables.typeBoolean,
+  onVisibleChange: utils_writables.typeFunction,
+  onHidden: utils_writables.typeFunction,
+  onShown: utils_writables.typeFunction,
+  transition: utils_writables.typeFunction,
+  animatedOnInit: utils_writables.typeBoolean,
+  animated: utils_writables.typeBoolean,
+  visible: utils_writables.typeBoolean,
+  ariaCloseButtonLabel: utils_writables.typeString,
+  className: utils_writables.typeString
+};
+function createCommonAlert(config) {
+  const [
+    {
+      transition$,
+      animatedOnInit$,
+      animated$,
+      visible$: requestedVisible$,
+      onVisibleChange$,
+      onHidden$,
+      onShown$,
+      ...stateProps
+    },
+    patch
+  ] = utils_stores.writablesForProps(defaultCommonAlertConfig, config, commonAlertConfigValidator);
+  const transition = services_transitions_baseTransitions.createTransition({
+    props: {
+      transition: transition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animatedOnInit$,
+      onVisibleChange: onVisibleChange$,
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const visible$ = transition.stores.visible$;
+  const hidden$ = transition.stores.hidden$;
+  return {
+    ...utils_stores.stateStores({ ...stateProps, visible$, hidden$ }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide
+    },
+    directives: {
+      transitionDirective: transition.directives.directive
+    }
+  };
+}
+exports.createCommonAlert = createCommonAlert;
+exports.getCommonAlertDefaultConfig = getCommonAlertDefaultConfig;

package/common-DFyZvkII.js

@@ -0,0 +1,74 @@
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { noop } from "./utils/func.js";
+import { writablesForProps, stateStores } from "./utils/stores.js";
+import { j as typeString, b as typeBoolean, e as typeFunction } from "./writables-DYGjj5T3.js";
+const defaultCommonAlertConfig = {
+  visible: true,
+  dismissible: true,
+  ariaCloseButtonLabel: "Close",
+  onVisibleChange: noop,
+  onShown: noop,
+  onHidden: noop,
+  animated: true,
+  animatedOnInit: false,
+  transition: noop,
+  className: ""
+};
+function getCommonAlertDefaultConfig() {
+  return { ...defaultCommonAlertConfig };
+}
+const commonAlertConfigValidator = {
+  dismissible: typeBoolean,
+  onVisibleChange: typeFunction,
+  onHidden: typeFunction,
+  onShown: typeFunction,
+  transition: typeFunction,
+  animatedOnInit: typeBoolean,
+  animated: typeBoolean,
+  visible: typeBoolean,
+  ariaCloseButtonLabel: typeString,
+  className: typeString
+};
+function createCommonAlert(config) {
+  const [
+    {
+      transition$,
+      animatedOnInit$,
+      animated$,
+      visible$: requestedVisible$,
+      onVisibleChange$,
+      onHidden$,
+      onShown$,
+      ...stateProps
+    },
+    patch
+  ] = writablesForProps(defaultCommonAlertConfig, config, commonAlertConfigValidator);
+  const transition = createTransition({
+    props: {
+      transition: transition$,
+      visible: requestedVisible$,
+      animated: animated$,
+      animatedOnInit: animatedOnInit$,
+      onVisibleChange: onVisibleChange$,
+      onHidden: onHidden$,
+      onShown: onShown$
+    }
+  });
+  const visible$ = transition.stores.visible$;
+  const hidden$ = transition.stores.hidden$;
+  return {
+    ...stateStores({ ...stateProps, visible$, hidden$ }),
+    patch,
+    api: {
+      open: transition.api.show,
+      close: transition.api.hide
+    },
+    directives: {
+      transitionDirective: transition.directives.directive
+    }
+  };
+}
+export {
+  createCommonAlert as c,
+  getCommonAlertDefaultConfig as g
+};

package/components/accordion/accordion.d.ts

@@ -0,0 +1,333 @@
+import type { TransitionFn } from '../../services/transitions/baseTransitions';
+import type { ConfigValidator, Directive, PropsConfig, Widget, WidgetFactory } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+/**
+ * Properties for the Accordion component.
+ */
+export interface AccordionProps extends WidgetsCommonPropsAndState {
+    /**
+     * If `true`, only one accordion-item at the time can stay open.
+     *
+     * @defaultValue `false`
+     */
+    closeOthers: boolean;
+    /**
+     * An event fired when an item is shown.
+     *
+     * Event payload is the id of the item.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onItemShown: (itemId: string) => void;
+    /**
+     * An event fired when an item is hidden.
+     *
+     * Event payload is the id of the item.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onItemHidden: (itemId: string) => void;
+    /**
+     * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+     *
+     * @defaultValue `true`
+     */
+    itemDestroyOnHide: boolean;
+    /**
+     * If `true`, accordion-item will be animated.
+     *
+     * @defaultValue `true`
+     */
+    itemAnimated: boolean;
+    /**
+     * The transition to use for the accordion-item body-container when the accordion-item is toggled.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    itemTransition: TransitionFn;
+    /**
+     * CSS classes to add on the accordion-item DOM element.
+     *
+     * @defaultValue `''`
+     */
+    itemClassName: string;
+    /**
+     * CSS classes to add on the accordion-item header DOM element.
+     *
+     * @defaultValue `''`
+     */
+    itemHeaderClassName: string;
+    /**
+     * CSS classes to add on the accordion-item toggle button DOM element.
+     *
+     * @defaultValue `''`
+     */
+    itemButtonClassName: string;
+    /**
+     * CSS classes to add on the accordion-item body container DOM element.
+     * The accordion-item body container is the DOM element on what the itemTransition is applied.
+     *
+     * @defaultValue `''`
+     */
+    itemBodyContainerClassName: string;
+    /**
+     * CSS classes to add on the accordion-item body DOM element.
+     *
+     * @defaultValue `''`
+     */
+    itemBodyClassName: string;
+    /**
+     * The html heading level to use for the accordion-item-header.
+     *
+     * @defaultValue `2`
+     */
+    itemHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * Represents the state of an Accordion component.
+ */
+export interface AccordionState extends WidgetsCommonPropsAndState {
+    /**
+     * Array containing all the accordion-items contained in the accordion.
+     */
+    itemWidgets: AccordionItemWidget[];
+}
+/**
+ * Interface representing the API for an accordion component.
+ */
+export interface AccordionApi {
+    /**
+     * Given the itemId, will expand the corresponding accordion-item.
+     *
+     * If the itemId is not valid, nothing will happen.
+     * @returns A promise that resolves when the expand operation is completed.
+     */
+    expand(itemId: string, animated?: boolean): Promise<void>;
+    /**
+     * Given the itemId, will collapse the corresponding accordion-item.
+     *
+     * If the itemId is not valid, nothing will happen.
+     * @returns A promise that resolves when the collapse operation is completed.
+     */
+    collapse(itemId: string, animated?: boolean): Promise<void>;
+    /**
+     * Given the itemId, will toggle the corresponding accordion-item.
+     *
+     * @returns A promise that resolves when the toggle operation is completed.
+     * If the itemId is not valid, nothing will happen.
+     */
+    toggle(itemId: string): Promise<void>;
+    /**
+     * It will expand all the items in the accordion.
+     *
+     * If `closeOthers` is `true` it will expand only the last accordion-item.
+     *
+     * @returns A promise that resolves when all the expand operations are completed.
+     */
+    expandAll(animated?: boolean): Promise<void>;
+    /**
+     * It will collapse all the accordion-items in the accordion.
+     *
+     * @returns A promise that resolves when all the collapse operations are completed.
+     */
+    collapseAll(animated?: boolean): Promise<void>;
+    /**
+     * Creates a new accordionItem.
+     */
+    registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
+}
+/**
+ * Interface representing the directives used in the Accordion component.
+ */
+export interface AccordionDirectives {
+    /**
+     * Directive to put on the accordion DOM element
+     */
+    accordionDirective: Directive;
+}
+/**
+ * Represents an Accordion widget with specific properties, state, API, and directives.
+ */
+export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, AccordionDirectives>;
+/**
+ * Interface representing the API for an accordion item.
+ */
+export interface AccordionItemApi {
+    /**
+     * It will collapse the accordion-item.
+     * @returns A promise that resolves when the collapse operation is completed.
+     */
+    collapse(animated?: boolean): Promise<void>;
+    /**
+     * It will expand the accordion-item.
+     * @returns A promise that resolves when the expand operation is completed.
+     */
+    expand(animated?: boolean): Promise<void>;
+    /**
+     * It will toggle the accordion-item.
+     * @returns A promise that resolves when the toggle operation is completed.
+     */
+    toggle(animated?: boolean): Promise<void>;
+    /**
+     * Method to be called after the initialization to allow animations.
+     */
+    initDone(): void;
+}
+/**
+ * Interface representing the directives used in an accordion item.
+ */
+export interface AccordionItemDirectives {
+    /**
+     * Directive to use in special cases, if the accordion header does not use a button element to control the collapsing.
+     */
+    toggleDirective: Directive;
+    /**
+     * Directive to put on the button element that will control the collapsing of the accordion-item.
+     */
+    buttonDirective: Directive;
+    /**
+     * Directive to put on the accordion-item header that will contain the button element.
+     */
+    headerDirective: Directive;
+    /**
+     * Directive to put on the accordion-item body.
+     */
+    bodyDirective: Directive;
+    /**
+     * Directive to apply the itemTransition
+     */
+    transitionDirective: Directive;
+    /**
+     * Directive to apply aria attributes to the expanded body panel
+     */
+    bodyContainerAttrsDirective: Directive;
+    /**
+     * Directive to be put on the accordion-item body container. It will handle the animation.
+     */
+    bodyContainerDirective: Directive;
+    /**
+     * Directive to be put on the accordion-item. It will handle adding the accordion-item to the accordion.
+     */
+    itemDirective: Directive;
+}
+/**
+ * Interface representing the common properties and state for an accordion item.
+ */
+interface AccordionItemCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+     */
+    visible: boolean;
+    /**
+     * If `true`, the accordion-item will be disabled.
+     * It will not react to user's clicks, but still will be possible to toggle programmatically.
+     */
+    disabled: boolean;
+    /**
+     * The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
+     */
+    id: string;
+    /**
+     * CSS classes to add on the accordion-item header DOM element.
+     */
+    headerClassName: string;
+    /**
+     * CSS classes to add on the accordion-item collapse DOM element.
+     */
+    buttonClassName: string;
+    /**
+     * CSS classes to add on the accordion-item body container DOM element.
+     * The accordion-item body container is the DOM element on what the itemTransition is applied.
+     */
+    bodyContainerClassName: string;
+    /**
+     * CSS classes to add on the accordion-item body DOM element.
+     */
+    bodyClassName: string;
+    /**
+     * The html heading level to use for the accordion-item-header.
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * Properties for an AccordionItem component.
+ */
+export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
+    /**
+     * If `true`, accordion-item will be animated.
+     */
+    animated: boolean;
+    /**
+     * The transition to use for the accordion-item body-container when the accordion-item is toggled.
+     */
+    transition: TransitionFn;
+    /**
+     * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+     */
+    destroyOnHide: boolean;
+    /**
+     * An event fired when an item is shown.
+     */
+    onShown: () => void;
+    /**
+     * An event fired when an item is hidden.
+     */
+    onHidden: () => void;
+    /**
+     * An event fired when the `visible` value changes.
+     *
+     * Event payload is the new value of visible.
+     */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Represents the state of an accordion item.
+ */
+export interface AccordionItemState extends AccordionItemCommonPropsAndState {
+    /**
+     * If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
+     * value of the `visible` and `destroyOnHide`.
+     */
+    shouldBeInDOM: boolean;
+}
+/**
+ * Represents a widget for an accordion item.
+ */
+export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState, AccordionItemApi, AccordionItemDirectives>;
+/**
+ * Retrieve a shallow copy of the default accordion config
+ * @returns the default accordion config
+ */
+export declare function getAccordionDefaultConfig(): AccordionProps;
+/**
+ * Creates a new AccordionItem widget instance.
+ * @param config - config of the accordion item, either as a store or as an object containing values or stores.
+ * @returns a new accordion item widget instance
+ */
+export declare function createAccordionItem(config?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
+/**
+ * Create an accordion WidgetFactory based on an item factory and the list of item props that should inherit from the parent accordion
+ *
+ * @param itemFactory - the item factory
+ * @param accordionItemProps - the list of item props
+ * @param accordionConfig - the default accordion config
+ * @param accordionValidator - the validator of props
+ * @returns the accordion widget factory
+ */
+export declare function factoryCreateAccordion(itemFactory?: WidgetFactory<AccordionItemWidget>, accordionItemProps?: string[], accordionConfig?: AccordionProps, accordionValidator?: ConfigValidator<AccordionProps>): WidgetFactory<AccordionWidget>;
+/**
+ * Creates a new Accordion widget instance.
+ * @param config - config of the accordion, either as a store or as an object containing values or stores.
+ * @returns a new accordion widget instance
+ */
+export declare const createAccordion: WidgetFactory<AccordionWidget>;
+export {};

package/components/accordion/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const accordion = require("../../accordion-B0vs8JWM.cjs");
+exports.createAccordion = accordion.createAccordion;
+exports.createAccordionItem = accordion.createAccordionItem;
+exports.factoryCreateAccordion = accordion.factoryCreateAccordion;
+exports.getAccordionDefaultConfig = accordion.getAccordionDefaultConfig;

package/components/accordion/index.d.ts

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

package/components/accordion/index.js

@@ -0,0 +1,7 @@
+import { c, a, f, g } from "../../accordion-D9ba0XYq.js";
+export {
+  c as createAccordion,
+  a as createAccordionItem,
+  f as factoryCreateAccordion,
+  g as getAccordionDefaultConfig
+};