@design-factory/core 21.1.0 → 22.0.0-next.1

package/{accordion-D9ba0XYq.js → accordion-DUFLBQkV.js}

@@ -1,9 +1,10 @@
-import { writablesForProps, idWithDefault, stateStores, true$, mergeConfigStores, normalizeConfigStores } from "./utils/stores.js";
+import { writablesForProps, idWithDefault, stateStores, mergeConfigStores, normalizeConfigStores } from "./utils/stores.js";
 import { createTransition } from "./services/transitions/baseTransitions.js";
+import { createCollapseTransition } from "./services/transitions/collapse.js";
 import { writable, computed, readable, asWritable } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
-import { j as typeString, e as typeFunction, b as typeBoolean, c as createTypeEnum } from "./writables-DYGjj5T3.js";
-import { s as mergeDirectives, g as createAttributesDirective, u as registrationArray, o as directiveSubscribe } from "./directive-CNNSo5Yn.js";
+import { k as typeString, d as typeBoolean, f as typeFunction, c as createTypeEnum } from "./writables-_7BriMb2.js";
+import { s as mergeDirectives, g as createAttributesDirective, u as registrationArray, o as directiveSubscribe } from "./directive-CMT2vEDg.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;
@@ -15,8 +16,8 @@ function adjustItemsCloseOthers(items, openItems, oldOpen) {
   }
   if (keepOpen) {
     items.forEach((item) => {
-      if (item.stores.id$() !== keepOpen && item.stores.visible$()) {
-        item.patch({ visible: false });
+      if (item.stores.id$() !== keepOpen && item.stores.expanded$()) {
+        item.patch({ expanded: false });
       }
     });
   }
@@ -25,31 +26,44 @@ function adjustItemsCloseOthers(items, openItems, oldOpen) {
 function getItem(items, id) {
   return items.find((item) => item.stores.id$() === id);
 }
+const accordionItemCollapseTransition = createCollapseTransition({
+  showClasses: ["df-collapse-show"],
+  hideClasses: ["df-collapse-hide"],
+  animationPendingClasses: ["df-collapse-collapsing"]
+});
 const defaultAccordionConfig = {
   closeOthers: false,
+  selectable: false,
   onItemShown: noop,
   onItemHidden: noop,
   className: "",
   itemDestroyOnHide: true,
-  itemAnimated: true,
+  animated: true,
   itemTransition: noop,
   itemHeadingLevel: 2,
   itemClassName: "",
   itemHeaderClassName: "",
   itemButtonClassName: "",
   itemBodyContainerClassName: "",
-  itemBodyClassName: ""
+  itemBodyClassName: "",
+  size: "md",
+  arrowPosition: "end",
+  addon: "none",
+  subtitleType: "none",
+  separator: false,
+  ariaToggleButtonLabel: "Toggle item",
+  id: ""
 };
 const defaultItemConfig = {
   id: "",
   destroyOnHide: defaultAccordionConfig.itemDestroyOnHide,
   disabled: false,
-  visible: false,
-  animated: defaultAccordionConfig.itemAnimated,
+  expanded: false,
+  animated: defaultAccordionConfig.animated,
   transition: defaultAccordionConfig.itemTransition,
   onShown: noop,
   onHidden: noop,
-  onVisibleChange: noop,
+  onExpandedChange: noop,
   className: defaultAccordionConfig.itemClassName,
   headerClassName: defaultAccordionConfig.itemHeaderClassName,
   buttonClassName: defaultAccordionConfig.itemButtonClassName,
@@ -63,29 +77,37 @@ function getAccordionDefaultConfig() {
 }
 const configAccordionValidator = {
   closeOthers: typeBoolean,
+  selectable: typeBoolean,
   onItemShown: typeFunction,
   onItemHidden: typeFunction,
   className: typeString,
   itemDestroyOnHide: typeBoolean,
-  itemAnimated: typeBoolean,
+  animated: typeBoolean,
   itemTransition: typeFunction,
   itemClassName: typeString,
   itemHeaderClassName: typeString,
   itemButtonClassName: typeString,
   itemBodyContainerClassName: typeString,
   itemBodyClassName: typeString,
-  itemHeadingLevel: createTypeEnum([1, 2, 3, 4, 5, 6])
+  itemHeadingLevel: createTypeEnum([1, 2, 3, 4, 5, 6]),
+  size: createTypeEnum(["sm", "md", "lg"]),
+  arrowPosition: createTypeEnum(["start", "end"]),
+  addon: createTypeEnum(["none", "icon", "number"]),
+  subtitleType: createTypeEnum(["none", "inline", "block"]),
+  separator: typeBoolean,
+  ariaToggleButtonLabel: typeString,
+  id: typeString
 };
 const configItemValidator = {
   id: typeString,
   destroyOnHide: typeBoolean,
   disabled: typeBoolean,
-  visible: typeBoolean,
+  expanded: typeBoolean,
   animated: typeBoolean,
   transition: typeFunction,
   onShown: typeFunction,
   onHidden: typeFunction,
-  onVisibleChange: typeFunction,
+  onExpandedChange: typeFunction,
   className: typeString,
   headerClassName: typeString,
   buttonClassName: typeString,
@@ -105,8 +127,8 @@ function createAccordionItem(config) {
       destroyOnHide$,
       onShown$,
       onHidden$,
-      onVisibleChange$,
-      visible$,
+      onExpandedChange$,
+      expanded$: requestedExpanded$,
       id$: _dirtyId$,
       disabled$,
       ...stateProps
@@ -118,8 +140,8 @@ function createAccordionItem(config) {
   const transition = createTransition({
     props: {
       transition: transition$,
-      visible: visible$,
-      onVisibleChange: onVisibleChange$,
+      visible: requestedExpanded$,
+      onVisibleChange: onExpandedChange$,
       animated: animated$,
       animatedOnInit: false,
       initDone: initDone$,
@@ -131,16 +153,17 @@ function createAccordionItem(config) {
       }
     }
   });
+  const expanded$ = transition.stores.visible$;
   const shouldBeInDOM$ = computed(() => !destroyOnHide$() || !transition.stores.hidden$());
   const toggleDirective = createAttributesDirective(() => ({
     attributes: {
       id: computed(() => `${id$()}-toggle`),
-      "aria-expanded": computed(() => `${visible$()}`),
+      "aria-expanded": computed(() => `${expanded$()}`),
       "aria-disabled": computed(() => `${disabled$()}`),
       "aria-controls": computed(() => `${id$()}-body-container`),
       disabled: disabled$
     },
-    classNames: { collapsed: computed(() => !visible$()) },
+    classNames: { "df-collapsed": computed(() => !expanded$()) },
     events: {
       click: () => {
         if (!disabled$()) {
@@ -160,7 +183,7 @@ function createAccordionItem(config) {
   }));
   return {
     ...stateStores({
-      visible$,
+      expanded$,
       id$,
       shouldBeInDOM$,
       disabled$,
@@ -202,15 +225,35 @@ function createAccordionItem(config) {
 function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItemProps = coreAccordionItemProps, accordionConfig = defaultAccordionConfig, accordionValidator = configAccordionValidator) {
   return createWidgetFactory("accordion", (config) => {
     const [writables, patch] = writablesForProps(accordionConfig, config, accordionValidator);
-    const { closeOthers$, onItemShown$, onItemHidden$, className$ } = writables;
+    const {
+      closeOthers$,
+      selectable$,
+      onItemShown$,
+      onItemHidden$,
+      className$,
+      size$,
+      addon$,
+      subtitleType$,
+      separator$,
+      animated$,
+      id$: _dirtyId$,
+      ...stateStores$
+    } = writables;
+    const id$ = idWithDefault(_dirtyId$);
     const accordionItemConfig = Object.fromEntries(
       Object.entries(writables).filter((entry) => entry[0].startsWith("item")).map((entry) => [entry[0].charAt(4).toLowerCase() + entry[0].slice(5, -1), entry[1]])
     );
+    const accordionClassName$ = computed(() => {
+      const size = size$();
+      const sizeClass = size === "sm" ? "df-accordion-sm " : size === "lg" ? "df-accordion-lg " : "";
+      const separatorClass = separator$() ? "df-accordion-separator " : "";
+      return `${sizeClass}${separatorClass}`.trim();
+    });
     const itemWidgets$ = registrationArray();
     const openItems$ = computed(() => {
       const openItems = [];
       itemWidgets$().forEach((item) => {
-        if (item.stores.visible$()) {
+        if (item.stores.expanded$()) {
           openItems.push(item.stores.id$());
         }
       });
@@ -218,7 +261,7 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
     });
     const oldOpenItem$ = writable(openItems$()[0]);
     const checkCloseOthersAction$ = computed(() => {
-      if (closeOthers$()) {
+      if (selectable$() || closeOthers$()) {
         adjustItemsCloseOthers(itemWidgets$(), openItems$(), oldOpenItem$());
         oldOpenItem$.set(openItems$()[0]);
       }
@@ -227,22 +270,39 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
       checkCloseOthersAction$();
     });
     return {
-      ...stateStores({ itemWidgets$, className$ }),
+      ...stateStores({
+        itemWidgets$,
+        className$,
+        size$,
+        addon$,
+        subtitleType$,
+        separator$,
+        animated$,
+        accordionClassName$,
+        id$,
+        ...stateStores$
+      }),
       patch,
       api: {
         expand: async (id, animated) => {
           await getItem(itemWidgets$(), id)?.api.expand(animated);
         },
         collapse: async (id, animated) => {
+          if (selectable$()) return;
           await getItem(itemWidgets$(), id)?.api.collapse(animated);
         },
         toggle: async (id, animated) => {
-          await getItem(itemWidgets$(), id)?.api.toggle(animated);
+          if (selectable$()) {
+            await getItem(itemWidgets$(), id)?.api.expand(animated);
+          } else {
+            await getItem(itemWidgets$(), id)?.api.toggle(animated);
+          }
         },
         expandAll: async (animated) => {
           await Promise.all(itemWidgets$().map((i) => i.api.expand(animated)));
         },
         collapseAll: async (animated) => {
+          if (selectable$()) return;
           await Promise.all(itemWidgets$().map((i) => i.api.collapse(animated)));
         },
         registerItem: (propsConfig) => {
@@ -257,12 +317,15 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
               onHidden: defaultItemConfig.onHidden,
               onShown: defaultItemConfig.onShown
             },
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             { config: config2, props: propsConfig?.props }
           );
           const item = itemFactory({
             config: config2,
             props: {
+              transition: accordionItemCollapseTransition,
               ...propsConfig?.props,
+              animated: animated$,
               onHidden: asWritable(
                 readable(() => {
                   onItemHidden$()(item.stores.id$());
@@ -298,8 +361,7 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
         accordionDirective: mergeDirectives(
           directiveSubscribe(action$),
           createAttributesDirective(() => ({
-            attributes: { class: className$ },
-            classNames: { "au-accordion": true$ }
+            attributes: { class: className$ }
           }))
         )
       }

package/alert-Db6cG6JE.js

@@ -0,0 +1,125 @@
+import { computed } from "@amadeus-it-group/tansu";
+import { c as createCommonAlert } from "./common-CP4amR0Z.js";
+import { c as createCollapse } from "./collapse-D8Jo56k9.js";
+import { createCollapseTransition } from "./services/transitions/collapse.js";
+import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
+import { extendWidgetProps } from "./services/extendWidget.js";
+import { noop } from "./utils/func.js";
+import { stateStores } from "./utils/stores.js";
+import { f as typeFunction, d as typeBoolean, k as typeString, c as createTypeEnum, t as testToNormalizeValue } from "./writables-_7BriMb2.js";
+import { createWidgetFactory } from "./utils/widget.js";
+const alertRoles = {
+  success: "status",
+  info: "status",
+  tip: "status",
+  warning: "alert",
+  danger: "alert"
+};
+const typeIcons = {
+  normalizeValue: testToNormalizeValue(
+    (value) => !!value && typeof value === "object" && !Array.isArray(value)
+  )
+};
+const alertCollapseTransition = createCollapseTransition({
+  showClasses: ["df-collapse-show"],
+  hideClasses: ["df-collapse-hide"],
+  animationPendingClasses: ["df-collapse-collapsing"]
+});
+const alertFadeTransition = createSimpleClassTransition({
+  animationPendingClasses: ["df-fade"],
+  animationPendingShowClasses: ["df-show"],
+  showClasses: ["df-show", "df-fade"],
+  hideClasses: ["df-hidden", "df-fade"]
+});
+const alertDefaultConfig = {
+  type: "warning",
+  appearance: "default",
+  size: "md",
+  icons: {
+    success: "fa-solid fa-check-circle",
+    warning: "fa-solid fa-exclamation-triangle",
+    danger: "fa-solid fa-octagon-xmark",
+    tip: "fa-solid fa-lightbulb",
+    info: "fa-solid fa-info-circle",
+    default: "fa-solid fa-info-circle"
+  },
+  collapseIcon: "fa-light fa-chevron-up",
+  expandIcon: "fa-light fa-chevron-down",
+  expandLabel: "Show more",
+  collapseLabel: "See less",
+  expandable: false,
+  expanded: false,
+  onCollapsed: noop,
+  onExpanded: noop
+};
+const alertConfigValidator = {
+  type: createTypeEnum(["success", "info", "warning", "danger", "tip"]),
+  appearance: createTypeEnum(["default", "banner"]),
+  size: createTypeEnum(["sm", "md", "lg"]),
+  icons: typeIcons,
+  collapseIcon: typeString,
+  expandIcon: typeString,
+  expandLabel: typeString,
+  collapseLabel: typeString,
+  expandable: typeBoolean,
+  expanded: typeBoolean,
+  onCollapsed: typeFunction,
+  onExpanded: typeFunction
+};
+const createExtendedAlert = extendWidgetProps(
+  createCommonAlert,
+  alertDefaultConfig,
+  alertConfigValidator,
+  {
+    transition: alertFadeTransition
+  }
+);
+const createAlert = createWidgetFactory(
+  "alert",
+  (config) => {
+    const extendedAlert = createExtendedAlert(config);
+    const { onCollapsed$, onExpanded$, ...extendedAlertStores } = extendedAlert.stores;
+    const { icons$, type$, animated$, expandable$, expanded$: requestedExpanded$ } = extendedAlertStores;
+    const collapse = createCollapse({
+      config: {
+        visible: computed(() => expandable$() ? requestedExpanded$() : true),
+        animated: animated$,
+        animatedOnInit: false,
+        transition: alertCollapseTransition,
+        onHidden: () => {
+          if (expandable$()) {
+            onCollapsed$()();
+          }
+        },
+        onShown: () => {
+          if (expandable$()) {
+            onExpanded$()();
+          }
+        }
+      }
+    });
+    const expanded$ = computed(() => expandable$() ? collapse.stores.visible$() : false);
+    const icon$ = computed(() => {
+      const icons = icons$();
+      return icons[type$()] ?? icons.default ?? "";
+    });
+    const role$ = computed(() => alertRoles[type$()]);
+    return {
+      ...extendedAlert,
+      ...stateStores({
+        ...extendedAlertStores,
+        expanded$,
+        icon$,
+        role$
+      }),
+      directives: {
+        ...extendedAlert.directives,
+        collapseDirective: collapse.directives.collapseDirective,
+        collapseTriggerDirective: collapse.directives.triggerDirective
+      }
+    };
+  }
+);
+export {
+  createAlert as c
+};

package/{collapse-Bn8iHKrd.js → collapse-D8Jo56k9.js}

@@ -1,7 +1,7 @@
 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 { g as createAttributesDirective, s as mergeDirectives } from "./directive-CMT2vEDg.js";
+import { f as typeFunction, k as typeString, d as typeBoolean } from "./writables-_7BriMb2.js";
 import { computed } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
 import { createWidgetFactory } from "./utils/widget.js";

package/{common-DFyZvkII.js → common-CP4amR0Z.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 { j as typeString, b as typeBoolean, e as typeFunction } from "./writables-DYGjj5T3.js";
+import { k as typeString, d as typeBoolean, f as typeFunction } from "./writables-_7BriMb2.js";
 const defaultCommonAlertConfig = {
   visible: true,
   dismissible: true,
@@ -57,7 +57,7 @@ function createCommonAlert(config) {
   const visible$ = transition.stores.visible$;
   const hidden$ = transition.stores.hidden$;
   return {
-    ...stateStores({ ...stateProps, visible$, hidden$ }),
+    ...stateStores({ ...stateProps, animated$, visible$, hidden$ }),
     patch,
     api: {
       open: transition.api.show,

package/components/accordion/accordion.d.ts

@@ -1,16 +1,82 @@
 import type { TransitionFn } from '../../services/transitions/baseTransitions';
 import type { ConfigValidator, Directive, PropsConfig, Widget, WidgetFactory } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
+/**
+ * Interface representing the common properties and state for an accordion.
+ */
+interface AccordionCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * Defines how the subtitle is displayed on accordion items.
+     *
+     * @defaultValue `'none'`
+     */
+    subtitleType: 'none' | 'inline' | 'block';
+    /**
+     * The HTML heading level to use for the accordion-item-header.
+     *
+     * @defaultValue `2`
+     */
+    itemHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Accessibility label for the accordion-item toggle button in the interactive variant.
+     *
+     * @defaultValue `'Toggle item'`
+     */
+    ariaToggleButtonLabel: string;
+    /**
+     * The size of the accordion.
+     *
+     * @defaultValue `'md'`
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Position of the expandable icon on the accordion header.
+     *
+     * @defaultValue `'end'`
+     */
+    arrowPosition: 'start' | 'end';
+    /**
+     * Addon type to show on the left side of the accordion header.
+     *
+     * @defaultValue `'none'`
+     */
+    addon: 'none' | 'icon' | 'number';
+    /**
+     * When an item is expanded, a separator line is shown below the item header.
+     *
+     * @defaultValue `false`
+     */
+    separator: boolean;
+    /**
+     * The id of the accordion. It is used in the accordion selectable variant.
+     *
+     * @defaultValue `dfId-[number]`
+     */
+    id: string;
+    /**
+     * If `true`, accordion items will be animated.
+     *
+     * @defaultValue `true`
+     */
+    animated: boolean;
+}
 /**
  * Properties for the Accordion component.
  */
-export interface AccordionProps extends WidgetsCommonPropsAndState {
+export interface AccordionProps extends AccordionCommonPropsAndState {
     /**
      * If `true`, only one accordion-item at the time can stay open.
      *
      * @defaultValue `false`
      */
     closeOthers: boolean;
+    /**
+     * If `true`, the accordion uses a radio-group pattern: `closeOthers` is always enforced
+     * and the last open item cannot be collapsed.
+     *
+     * @defaultValue `false`
+     */
+    selectable: boolean;
     /**
      * An event fired when an item is shown.
      *
@@ -39,12 +105,6 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      * @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.
      *
@@ -85,21 +145,19 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      * @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 {
+export interface AccordionState extends AccordionCommonPropsAndState {
     /**
      * Array containing all the accordion-items contained in the accordion.
      */
     itemWidgets: AccordionItemWidget[];
+    /**
+     * Computed CSS class name for the accordion based on its visual configuration.
+     */
+    accordionClassName: string;
 }
 /**
  * Interface representing the API for an accordion component.
@@ -125,7 +183,7 @@ export interface AccordionApi {
      * @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>;
+    toggle(itemId: string, animated?: boolean): Promise<void>;
     /**
      * It will expand all the items in the accordion.
      *
@@ -224,9 +282,9 @@ export interface AccordionItemDirectives {
  */
 interface AccordionItemCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
-     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+     * If `true`, the accordion-item will be expanded. Otherwise, it will be collapsed.
      */
-    visible: boolean;
+    expanded: 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.
@@ -254,7 +312,7 @@ interface AccordionItemCommonPropsAndState extends WidgetsCommonPropsAndState {
      */
     bodyClassName: string;
     /**
-     * The html heading level to use for the accordion-item-header.
+     * The HTML heading level to use for the accordion-item-header.
      */
     headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
 }
@@ -283,11 +341,11 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
      */
     onHidden: () => void;
     /**
-     * An event fired when the `visible` value changes.
+     * An event fired when the `expanded` value changes.
      *
-     * Event payload is the new value of visible.
+     * Event payload is the new value of expanded.
      */
-    onVisibleChange: (visible: boolean) => void;
+    onExpandedChange: (expanded: boolean) => void;
 }
 /**
  * Represents the state of an accordion item.
@@ -295,7 +353,7 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
 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`.
+     * value of the `expanded` and `destroyOnHide`.
      */
     shouldBeInDOM: boolean;
 }

package/components/accordion/index.js

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