@agnos-ui/core 0.0.1-alpha.0 → 0.0.1-alpha.10

package/README.md

@@ -2,11 +2,11 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/core)](https://www.npmjs.com/package/@agnos-ui/core)
 
-[AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) is a framework-agnostic widget library with adapters for multiple frameworks:
+[AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) is a framework-agnostic widget library with adapters for multiple frameworks, either [Bootstrap](https://getbootstrap.com/)-based or headless:
 
-- [Angular](https://www.npmjs.com/package/@agnos-ui/angular)
-- [React](https://www.npmjs.com/package/@agnos-ui/react)
-- [Svelte](https://www.npmjs.com/package/@agnos-ui/svelte)
+- [Angular](https://www.npmjs.com/package/@agnos-ui/angular), [Angular headless](https://www.npmjs.com/package/@agnos-ui/angular-headless)
+- [React](https://www.npmjs.com/package/@agnos-ui/react), [React headless](https://www.npmjs.com/package/@agnos-ui/react-headless)
+- [Svelte](https://www.npmjs.com/package/@agnos-ui/svelte), [Svelte headless](https://www.npmjs.com/package/@agnos-ui/svelte-headless)
 
 This `@agnos-ui/core` package contains the framework-agnostic common code used by the above framework adapters.
 

package/{dist/lib → components/accordion}/accordion.d.ts

@@ -1,13 +1,7 @@
-import type { PropsConfig } from './services';
-import type { TransitionFn } from './transitions';
-import type { Directive, SlotContent, Widget, WidgetSlotContext } from './types';
-export interface AccordionCommonPropsAndState {
-    /**
-     * Classes to add on the accordion DOM element.
-     */
-    accordionClass: string;
-}
-export interface AccordionProps extends AccordionCommonPropsAndState {
+import type { TransitionFn } from '../../services/transitions/baseTransitions';
+import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+export interface AccordionProps extends WidgetsCommonPropsAndState {
     /**
      * If `true`, only one item at the time can stay open.
      */
@@ -44,11 +38,11 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
      */
     itemDisabled: boolean;
     /**
-     * If `true`, the accordion-item will be collapsed. Otherwise, it will be expanded.
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
      *
      * It is a prop of the accordion-item.
      */
-    itemCollapsed: boolean;
+    itemVisible: boolean;
     /**
      * If `true`, accordion-item will be animated.
      *
@@ -74,13 +68,13 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
      */
     onItemHidden: () => void;
     /**
-     * An event fired when the `collapsed` value changes.
+     * An event fired when the `visible` value changes.
      *
-     * Event payload is the new value of collapsed.
+     * Event payload is the new value of visible.
      *
      * It is a prop of the accordion-item.
      */
-    onItemCollapsedChange: (collapsed: boolean) => void;
+    onItemVisibleChange: (visible: boolean) => void;
     /**
      * Structure of the accordion-item. The default item structure is: accordion-item
      * contains accordion header and accordion collapse; the accordion header contains the accordion button
@@ -131,8 +125,14 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
      * It is a prop of the accordion-item.
      */
     itemBodyClass: string;
+    /**
+     * The html tag to use for the accordion-item-header.
+     *
+     * It is a prop of the accordion-item.
+     */
+    itemHeadingTag: string;
 }
-export interface AccordionState extends AccordionCommonPropsAndState {
+export interface AccordionState extends WidgetsCommonPropsAndState {
     /**
      * Array containing all the accordion-items contained in the accordion.
      */
@@ -140,7 +140,7 @@ export interface AccordionState extends AccordionCommonPropsAndState {
 }
 export interface AccordionApi {
     /**
-     * Given the itemId, it will return if such item is expanded or not.
+     * Given the itemId, it will return if such item is visible (expanded) or not.
      *
      * If the itemId is not a valid id it will return `false`.
      */
@@ -174,7 +174,7 @@ export interface AccordionApi {
      */
     collapseAll(): void;
     /**
-     * Creates a new in accordionItem.
+     * Creates a new accordionItem.
      */
     registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
 }
@@ -222,9 +222,9 @@ export interface AccordionItemDirectives {
 }
 export interface AccordionItemCommonPropsAndState {
     /**
-     * If `true`, the accordion-item will be collapsed. Otherwise, it will be expanded.
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
      */
-    itemCollapsed: boolean;
+    itemVisible: 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.
@@ -268,6 +268,10 @@ export interface AccordionItemCommonPropsAndState {
      * Classes to add on the accordion-item body DOM element.
      */
     itemBodyClass: string;
+    /**
+     * The html tag to use for the accordion-item-header.
+     */
+    itemHeadingTag: string;
 }
 export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
     /**
@@ -291,16 +295,16 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
      */
     onItemHidden: () => void;
     /**
-     * An event fired when the `collapsed` value changes.
+     * An event fired when the `visible` value changes.
      *
-     * Event payload is the new value of collapsed.
+     * Event payload is the new value of visible.
      */
-    onItemCollapsedChange: (collapsed: boolean) => void;
+    onItemVisibleChange: (visible: boolean) => void;
 }
 export interface AccordionItemState extends AccordionItemCommonPropsAndState {
     /**
-     * If `true` the collapse inside the accordion-item should be in DOM. Its value depends on the
-     * value of the `itemCollapse` and `itemDestroyOnHide`.
+     * If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
+     * value of the `itemVisible` and `itemDestroyOnHide`.
      */
     shouldBeInDOM: boolean;
 }

package/{dist/lib → components/accordion}/accordion.js

@@ -1,28 +1,28 @@
-import { bindDirectiveNoArg, bindableDerived, directiveSubscribe, registrationArray, stateStores, typeBoolean, typeFunction, typeString, writablesForProps, } from './services';
-import { createTransition } from './transitions';
-import { collapseVerticalTransition } from './transitions/bootstrap';
-import { computed, readable, writable } from '@amadeus-it-group/tansu';
-import { noop } from './utils';
+import { stateStores, writablesForProps, normalizeConfigStores, mergeConfigStores } from '../../utils/stores';
+import { createTransition } from '../../services/transitions/baseTransitions';
+import { collapseVerticalTransition } from '../../services/transitions/bootstrap/collapse';
+import { computed, writable } from '@amadeus-it-group/tansu';
+import { noop } from '../../utils/internal/func';
+import { typeBoolean, typeFunction, typeString } from '../../utils/writables';
+import { bindDirectiveNoArg, directiveSubscribe, registrationArray } from '../../utils/directive';
 let itemId = 0;
 function getItemId() {
     return `accordion-item-${itemId++}`;
 }
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
+    let keepOpen;
     if (openItems.length == 2) {
         oldOpen = oldOpen ?? openItems[0];
-        const keepOpen = openItems.find((id) => id !== oldOpen);
-        items.forEach((item) => {
-            if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
-                item.patch({ itemCollapsed: true });
-            }
-        });
+        keepOpen = openItems.find((id) => id !== oldOpen);
     }
     else if (openItems.length > 2) {
         //this case can happen when you have multiple items open and you toggle the close others
-        const keepOpen = openItems[0];
+        keepOpen = openItems[0];
+    }
+    if (keepOpen) {
         items.forEach((item) => {
-            if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
-                item.patch({ itemCollapsed: true });
+            if (item.state$().itemId !== keepOpen && item.state$().itemVisible) {
+                item.patch({ itemVisible: false });
             }
         });
     }
@@ -35,16 +35,17 @@ const defaultAccordionConfig = {
     closeOthers: false,
     onShown: noop,
     onHidden: noop,
-    accordionClass: '',
+    className: '',
     itemId: '',
-    itemDestroyOnHide: false,
+    itemDestroyOnHide: true,
     itemDisabled: false,
-    itemCollapsed: true,
+    itemVisible: false,
     itemAnimation: true,
     itemTransition: collapseVerticalTransition,
+    itemHeadingTag: '',
     onItemShown: noop,
     onItemHidden: noop,
-    onItemCollapsedChange: noop,
+    onItemVisibleChange: noop,
     slotItemStructure: undefined,
     slotItemBody: undefined,
     slotItemHeader: undefined,
@@ -58,12 +59,12 @@ const defaultItemConfig = {
     itemId: defaultAccordionConfig.itemId,
     itemDestroyOnHide: defaultAccordionConfig.itemDestroyOnHide,
     itemDisabled: defaultAccordionConfig.itemDisabled,
-    itemCollapsed: defaultAccordionConfig.itemCollapsed,
+    itemVisible: defaultAccordionConfig.itemVisible,
     itemAnimation: defaultAccordionConfig.itemAnimation,
     itemTransition: defaultAccordionConfig.itemTransition,
     onItemShown: defaultAccordionConfig.onItemShown,
     onItemHidden: defaultAccordionConfig.onItemHidden,
-    onItemCollapsedChange: defaultAccordionConfig.onItemCollapsedChange,
+    onItemVisibleChange: defaultAccordionConfig.onItemVisibleChange,
     slotItemStructure: defaultAccordionConfig.slotItemStructure,
     slotItemBody: defaultAccordionConfig.slotItemBody,
     slotItemHeader: defaultAccordionConfig.slotItemHeader,
@@ -72,7 +73,9 @@ const defaultItemConfig = {
     itemButtonClass: defaultAccordionConfig.itemButtonClass,
     itemCollapseClass: defaultAccordionConfig.itemCollapseClass,
     itemBodyClass: defaultAccordionConfig.itemBodyClass,
+    itemHeadingTag: defaultAccordionConfig.itemHeadingTag,
 };
+const accordionItemProps = Object.keys(defaultItemConfig);
 /**
  * Retrieve a shallow copy of the default accordion config
  * @returns the default accordion config
@@ -87,63 +90,63 @@ const configAccordionValidator = {
     itemId: typeString,
     itemDestroyOnHide: typeBoolean,
     itemDisabled: typeBoolean,
-    itemCollapsed: typeBoolean,
+    itemVisible: typeBoolean,
     itemAnimation: typeBoolean,
     itemTransition: typeFunction,
     onItemShown: typeFunction,
     onItemHidden: typeFunction,
-    onItemCollapsedChange: typeFunction,
+    onItemVisibleChange: typeFunction,
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
     itemCollapseClass: typeString,
     itemBodyClass: typeString,
+    itemHeadingTag: typeString,
 };
 const configItemValidator = {
     itemId: typeString,
     itemDestroyOnHide: typeBoolean,
     itemDisabled: typeBoolean,
-    itemCollapsed: typeBoolean,
+    itemVisible: typeBoolean,
     itemAnimation: typeBoolean,
     itemTransition: typeFunction,
     onItemShown: typeFunction,
     onItemHidden: typeFunction,
-    onItemCollapsedChange: typeFunction,
+    onItemVisibleChange: typeFunction,
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
     itemCollapseClass: typeString,
     itemBodyClass: typeString,
+    itemHeadingTag: typeString,
 };
 function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
-    const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemCollapsedChange$, itemCollapsed$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
+    const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemVisibleChange$, itemVisible$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
     const initDone$ = writable(false);
-    const itemId$ = bindableDerived(readable(noop), [_dirtyItemId$], ([dirtyItemId]) => (dirtyItemId ? dirtyItemId : getItemId()));
-    const shouldBeInDOM$ = computed(() => {
-        return itemDestroyOnHide$() === false || !itemTransition.state$().hidden;
-    });
+    const _autoItemId$ = computed(() => getItemId());
+    const itemId$ = computed(() => _dirtyItemId$() || _autoItemId$());
+    const shouldBeInDOM$ = computed(() => itemDestroyOnHide$() === false || !itemTransition.state$().hidden);
     const itemTransition = createTransition({
-        transition: itemTransition$,
-        visible: computed(() => {
-            const collapsed = itemCollapsed$();
-            onItemCollapsedChange$()(collapsed);
-            return !collapsed;
-        }),
-        animation: itemAnimation$,
-        animationOnInit: false,
-        initDone: initDone$,
-        onHidden: () => {
-            accordionOnHidden()(itemId$());
-            onItemHidden$()();
-        },
-        onShown: () => {
-            accordionOnShown()(itemId$());
-            onItemShown$()();
+        props: {
+            transition: itemTransition$,
+            visible: itemVisible$,
+            onVisibleChange: onItemVisibleChange$,
+            animation: itemAnimation$,
+            animationOnInit: false,
+            initDone: initDone$,
+            onHidden: () => {
+                accordionOnHidden()(itemId$());
+                onItemHidden$()();
+            },
+            onShown: () => {
+                accordionOnShown()(itemId$());
+                onItemShown$()();
+            },
         },
     });
     return {
         ...stateStores({
-            itemCollapsed$,
+            itemVisible$,
             itemId$,
             shouldBeInDOM$,
             itemDisabled$,
@@ -153,7 +156,7 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
         actions: {
             click: () => {
                 if (!itemDisabled$()) {
-                    itemCollapsed$.update((c) => !c);
+                    itemVisible$.update((c) => !c);
                 }
             },
         },
@@ -162,13 +165,13 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
                 initDone$.set(true);
             },
             collapse: () => {
-                itemCollapsed$.set(true);
+                itemVisible$.set(false);
             },
             expand: () => {
-                itemCollapsed$.set(false);
+                itemVisible$.set(true);
             },
             toggle: () => {
-                itemCollapsed$.update((c) => !c);
+                itemVisible$.update((c) => !c);
             },
         },
         directives: { collapseDirective: bindDirectiveNoArg(itemTransition.directives.directive), accordionItemDirective: noop },
@@ -180,12 +183,32 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
  * @returns a new accordion widget instance
  */
 export function createAccordion(config) {
-    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemCollapsed$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, onItemCollapsedChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, itemHeadingTag$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const accordionItemConfig = {
+        itemId: itemId$,
+        itemClass: itemClass$,
+        itemAnimation: itemAnimation$,
+        itemDisabled: itemDisabled$,
+        itemVisible: itemVisible$,
+        itemTransition: itemTransition$,
+        itemDestroyOnHide: itemDestroyOnHide$,
+        itemBodyClass: itemBodyClass$,
+        itemButtonClass: itemButtonClass$,
+        itemCollapseClass: itemCollapseClass$,
+        itemHeaderClass: itemHeaderClass$,
+        itemHeadingTag: itemHeadingTag$,
+        onItemVisibleChange: onItemVisibleChange$,
+        onItemHidden: onItemHidden$,
+        onItemShown: onItemShown$,
+        slotItemStructure: slotItemStructure$,
+        slotItemBody: slotItemBody$,
+        slotItemHeader: slotItemHeader$,
+    };
     const itemsWidget$ = registrationArray();
     const openItems$ = computed(() => {
         const openItems = [];
         itemsWidget$().forEach((item) => {
-            if (!item.state$().itemCollapsed) {
+            if (item.state$().itemVisible) {
                 openItems.push(item.state$().itemId);
             }
         });
@@ -197,9 +220,6 @@ export function createAccordion(config) {
             adjustItemsCloseOthers(itemsWidget$(), openItems$(), oldOpenItem$());
             oldOpenItem$.set(openItems$()[0]);
         }
-        else {
-            itemsWidget$();
-        }
     });
     const action$ = computed(() => {
         checkCloseOthersAction$();
@@ -212,7 +232,7 @@ export function createAccordion(config) {
             isExpanded: (id) => {
                 const item = getItem(itemsWidget$(), id);
                 if (item) {
-                    return !item.state$().itemCollapsed;
+                    return item.state$().itemVisible;
                 }
                 else {
                     return false;
@@ -233,27 +253,11 @@ export function createAccordion(config) {
             collapseAll: () => {
                 itemsWidget$().forEach((i) => i.api.collapse());
             },
-            registerItem: (itemConfig) => {
-                const item = createAccordionItem(onShown$, onHidden$, computed(() => ({
-                    itemId: itemId$(),
-                    itemClass: itemClass$(),
-                    itemAnimation: itemAnimation$(),
-                    itemDisabled: itemDisabled$(),
-                    itemCollapsed: itemCollapsed$(),
-                    itemTransition: itemTransition$(),
-                    itemDestroyOnHide: itemDestroyOnHide$(),
-                    itemBodyClass: itemBodyClass$(),
-                    itemButtonClass: itemButtonClass$(),
-                    itemCollapseClass: itemCollapseClass$(),
-                    itemHeaderClass: itemHeaderClass$(),
-                    onItemCollapsedChange: onItemCollapsedChange$(),
-                    onItemHidden: onItemHidden$(),
-                    onItemShown: onItemShown$(),
-                    slotItemStructure: slotItemStructure$(),
-                    slotItemBody: slotItemBody$(),
-                    slotItemHeader: slotItemHeader$(),
-                    ...itemConfig?.(),
-                })));
+            registerItem: (propsConfig) => {
+                const item = createAccordionItem(onShown$, onHidden$, {
+                    config: mergeConfigStores(accordionItemProps, normalizeConfigStores(accordionItemProps, propsConfig?.config), accordionItemConfig),
+                    props: propsConfig?.props,
+                });
                 item.directives.accordionItemDirective = () => ({ destroy: itemsWidget$.register(item) });
                 return item;
             },

package/components/accordion/index.d.ts

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

package/components/accordion/index.js

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

package/components/alert/alert.d.ts

@@ -0,0 +1,31 @@
+import type { CommonAlertApi, CommonAlertDirectives, CommonAlertProps, CommonAlertState } from './common';
+import type { ExtendWidgetAdaptSlotWidgetProps } from '../../services/extendWidget';
+import type { Widget, WidgetFactory, WidgetSlotContext } from '../../types';
+export type AlertContext = WidgetSlotContext<AlertWidget>;
+export interface AlertExtraProps {
+    /**
+     * Type of the alert.
+     * There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
+     */
+    type: string;
+}
+export interface AlertState extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertState, AlertExtraProps> {
+}
+export interface AlertProps extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertProps, AlertExtraProps> {
+}
+export interface AlertApi extends CommonAlertApi {
+}
+export interface AlertDirectives extends CommonAlertDirectives {
+}
+export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, AlertDirectives>;
+/**
+ * Retrieve a shallow copy of the default alert config
+ * @returns the default alert config
+ */
+export declare function getAlertDefaultConfig(): AlertProps;
+/**
+ * Create an AlertWidget with given config props
+ * @param config - an optional alert config
+ * @returns an AlertWidget
+ */
+export declare const createAlert: WidgetFactory<AlertWidget>;

package/components/alert/alert.js

@@ -0,0 +1,22 @@
+import { createCommonAlert, getCommonAlertDefaultConfig } from './common';
+import { extendWidgetProps } from '../../services/extendWidget';
+import { typeString } from '../../utils/writables';
+const alertDefaultConfig = {
+    type: 'primary',
+};
+const alertConfigValidator = {
+    type: typeString,
+};
+/**
+ * Retrieve a shallow copy of the default alert config
+ * @returns the default alert config
+ */
+export function getAlertDefaultConfig() {
+    return { ...getCommonAlertDefaultConfig(), ...alertDefaultConfig };
+}
+/**
+ * Create an AlertWidget with given config props
+ * @param config - an optional alert config
+ * @returns an AlertWidget
+ */
+export const createAlert = extendWidgetProps(createCommonAlert, alertDefaultConfig, alertConfigValidator);

package/{dist/lib/alert.d.ts → components/alert/common.d.ts}

@@ -1,26 +1,21 @@
-import type { PropsConfig } from './services';
-import type { TransitionFn } from './transitions';
-import type { Directive, SlotContent, Widget, WidgetSlotContext } from './types';
-export type AlertContext = WidgetSlotContext<AlertWidget>;
-export interface AlertCommonPropsAndState {
+import type { TransitionFn } from '../../services/transitions/baseTransitions';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+import type { ConfigValidator, Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+export type CommonAlertContext = WidgetSlotContext<CommonAlertWidget>;
+export interface CommonAlertCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * If `true`, alert can be dismissed by the user.
      * The close button (×) will be displayed and you can be notified of the event with the (close) output.
      */
     dismissible: boolean;
-    /**
-     * Type of the alert.
-     * There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
-     */
-    type: string;
     /**
      * Template for the alert content
      */
-    slotDefault: SlotContent<AlertContext>;
+    slotDefault: SlotContent<CommonAlertContext>;
     /**
      * Global template for the alert component
      */
-    slotStructure: SlotContent<AlertContext>;
+    slotStructure: SlotContent<CommonAlertContext>;
     /**
      * If `true` the alert is visible to the user
      */
@@ -30,13 +25,13 @@ export interface AlertCommonPropsAndState {
      */
     ariaCloseButtonLabel: string;
 }
-export interface AlertState extends AlertCommonPropsAndState {
+export interface CommonAlertState extends CommonAlertCommonPropsAndState {
     /**
      * Is `true` when the alert is hidden. Compared to `visible`, this is updated after the transition is executed.
      */
     hidden: boolean;
 }
-export interface AlertProps extends AlertCommonPropsAndState {
+export interface CommonAlertProps extends CommonAlertCommonPropsAndState {
     /**
      * Callback called when the alert visibility changed.
      */
@@ -52,7 +47,7 @@ export interface AlertProps extends AlertCommonPropsAndState {
     /**
      * The transition function will be executed when the alert is displayed or hidden.
      *
-     * Depending on the value of {@link AlertProps.animationOnInit}, the animation can be optionally skipped during the showing process.
+     * Depending on the value of {@link CommonAlertProps.animationOnInit}, the animation can be optionally skipped during the showing process.
      */
     transition: TransitionFn;
     /**
@@ -70,7 +65,7 @@ export interface AlertProps extends AlertCommonPropsAndState {
      */
     animation: boolean;
 }
-export interface AlertApi {
+export interface CommonAlertApi {
     /**
      * Triggers alert closing programmatically (same as clicking on the close button (×)).
      */
@@ -80,21 +75,23 @@ export interface AlertApi {
      */
     open(): void;
 }
-export interface AlertDirectives {
+export interface CommonAlertDirectives {
     /**
      * the transition directive, piloting what is the visual effect of going from hidden to visible
      */
     transitionDirective: Directive;
 }
-export type AlertWidget = Widget<AlertProps, AlertState, AlertApi, object, AlertDirectives>;
+export type CommonAlertWidget = Widget<CommonAlertProps, CommonAlertState, CommonAlertApi, object, CommonAlertDirectives>;
+export declare const defaultCommonAlertConfig: CommonAlertProps;
 /**
  * Retrieve a shallow copy of the default alert config
  * @returns the default alert config
  */
-export declare function getAlertDefaultConfig(): AlertProps;
+export declare function getCommonAlertDefaultConfig(): CommonAlertProps;
+export declare const commonAlertConfigValidator: ConfigValidator<CommonAlertProps>;
 /**
  * Create an AlertWidget with given config props
  * @param config - an optional alert config
  * @returns an AlertWidget
  */
-export declare function createAlert(config?: PropsConfig<AlertProps>): AlertWidget;
+export declare function createCommonAlert(config?: PropsConfig<CommonAlertProps>): CommonAlertWidget;

package/{dist/lib/alert.js → components/alert/common.js}

@@ -1,11 +1,12 @@
-import { bindDirectiveNoArg, stateStores, typeBoolean, typeString, writablesForProps } from './services';
-import { createTransition } from './transitions';
-import { fadeTransition } from './transitions/bootstrap';
-import { noop } from './utils';
-const defaultConfig = {
+import { createTransition } from '../../services/transitions/baseTransitions';
+import { noop } from '../../utils/internal/func';
+import { fadeTransition } from '../../services/transitions/bootstrap/fade';
+import { stateStores, writablesForProps } from '../../utils/stores';
+import { bindDirectiveNoArg } from '../../utils/directive';
+import { typeBoolean } from '../../utils/writables';
+export const defaultCommonAlertConfig = {
     visible: true,
     dismissible: true,
-    type: 'primary',
     ariaCloseButtonLabel: 'Close',
     onVisibleChange: noop,
     onShown: noop,
@@ -15,33 +16,35 @@ const defaultConfig = {
     animation: true,
     animationOnInit: false,
     transition: fadeTransition,
+    className: '',
 };
 /**
  * Retrieve a shallow copy of the default alert config
  * @returns the default alert config
  */
-export function getAlertDefaultConfig() {
-    return { ...defaultConfig };
+export function getCommonAlertDefaultConfig() {
+    return { ...defaultCommonAlertConfig };
 }
-const configValidator = {
+export const commonAlertConfigValidator = {
     dismissible: typeBoolean,
-    type: typeString,
 };
 /**
  * Create an AlertWidget with given config props
  * @param config - an optional alert config
  * @returns an AlertWidget
  */
-export function createAlert(config) {
-    const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
+export function createCommonAlert(config) {
+    const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(defaultCommonAlertConfig, config, commonAlertConfigValidator);
     const transition = createTransition({
-        transition: transition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animationOnInit$,
-        onVisibleChange: onVisibleChange$,
-        onHidden: onHidden$,
-        onShown: onShown$,
+        props: {
+            transition: transition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animationOnInit$,
+            onVisibleChange: onVisibleChange$,
+            onHidden: onHidden$,
+            onShown: onShown$,
+        },
     });
     const close = () => {
         patch({ visible: false });

package/components/alert/index.d.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './alert';