@agnos-ui/core 0.2.0 → 0.3.0

package/common-DRdsw5m8.js

@@ -0,0 +1,76 @@
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { n as noop } from "./func-DR0n-ShK.js";
+import { writablesForProps, stateStores } from "./utils/stores.js";
+import { c as bindDirectiveNoArg } from "./directive-DCYlDznf.js";
+import { c as typeBoolean } from "./writables-DoU_XYTX.js";
+const defaultCommonAlertConfig = {
+  visible: true,
+  dismissible: true,
+  ariaCloseButtonLabel: "Close",
+  onVisibleChange: noop,
+  onShown: noop,
+  onHidden: noop,
+  animated: true,
+  animatedOnInit: false,
+  transition: async () => {
+  },
+  className: ""
+};
+function getCommonAlertDefaultConfig() {
+  return { ...defaultCommonAlertConfig };
+}
+const commonAlertConfigValidator = {
+  dismissible: typeBoolean
+};
+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 close = () => {
+    patch({ visible: false });
+  };
+  const open = () => {
+    patch({ visible: true });
+  };
+  const visible$ = transition.stores.visible$;
+  const hidden$ = transition.stores.hidden$;
+  return {
+    ...stateStores({ ...stateProps, visible$, hidden$ }),
+    patch,
+    api: {
+      open,
+      close
+    },
+    directives: {
+      transitionDirective: bindDirectiveNoArg(transition.directives.directive)
+    },
+    actions: {}
+  };
+}
+export {
+  createCommonAlert as a,
+  commonAlertConfigValidator as c,
+  defaultCommonAlertConfig as d,
+  getCommonAlertDefaultConfig as g
+};

package/common-nJRMXbwj.cjs

@@ -0,0 +1,75 @@
+"use strict";
+const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
+const func = require("./func-Qd3cD9a3.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const utils_directive = require("./directive-BTSEYLF3.cjs");
+const utils_writables = require("./writables-D46sFgGK.cjs");
+const defaultCommonAlertConfig = {
+  visible: true,
+  dismissible: true,
+  ariaCloseButtonLabel: "Close",
+  onVisibleChange: func.noop,
+  onShown: func.noop,
+  onHidden: func.noop,
+  animated: true,
+  animatedOnInit: false,
+  transition: async () => {
+  },
+  className: ""
+};
+function getCommonAlertDefaultConfig() {
+  return { ...defaultCommonAlertConfig };
+}
+const commonAlertConfigValidator = {
+  dismissible: utils_writables.typeBoolean
+};
+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 close = () => {
+    patch({ visible: false });
+  };
+  const open = () => {
+    patch({ visible: true });
+  };
+  const visible$ = transition.stores.visible$;
+  const hidden$ = transition.stores.hidden$;
+  return {
+    ...utils_stores.stateStores({ ...stateProps, visible$, hidden$ }),
+    patch,
+    api: {
+      open,
+      close
+    },
+    directives: {
+      transitionDirective: utils_directive.bindDirectiveNoArg(transition.directives.directive)
+    },
+    actions: {}
+  };
+}
+exports.commonAlertConfigValidator = commonAlertConfigValidator;
+exports.createCommonAlert = createCommonAlert;
+exports.defaultCommonAlertConfig = defaultCommonAlertConfig;
+exports.getCommonAlertDefaultConfig = getCommonAlertDefaultConfig;

package/components/accordion/accordion.d.ts

@@ -1,5 +1,5 @@
 import type { TransitionFn } from '../../services/transitions/baseTransitions';
-import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { ConfigValidator, Directive, PropsConfig, Widget, WidgetFactory } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
 export interface AccordionProps extends WidgetsCommonPropsAndState {
     /**
@@ -48,7 +48,7 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      *
      * It is a prop of the accordion-item.
      */
-    itemAnimation: boolean;
+    itemAnimated: boolean;
     /**
      * The transition to use for the accordion-item body-container when the accordion-item is toggled.
      *
@@ -75,27 +75,6 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      * It is a prop of the accordion-item.
      */
     onItemVisibleChange: (visible: boolean) => void;
-    /**
-     * Structure of the accordion-item. The default item structure is: accordion-item
-     * contains accordion header and accordion-item body container; the accordion header contains the accordion button
-     * (that contains `slotItemHeader`), while the accordion-item body container contains the accordion body (that contains `slotItemBody`).
-     * The itemTransition it applied on this element.
-     *
-     * It is a prop of the accordion-item.
-     */
-    slotItemStructure: SlotContent<AccordionItemContext>;
-    /**
-     * Content present in the accordion body.
-     *
-     * It is a prop of the accordion-item.
-     */
-    slotItemBody: SlotContent<AccordionItemContext>;
-    /**
-     * Content present in the accordion button inside the accordion header.
-     *
-     * It is a prop of the accordion-item.
-     */
-    slotItemHeader: SlotContent<AccordionItemContext>;
     /**
      * CSS classes to add on the accordion-item DOM element.
      *
@@ -141,12 +120,6 @@ export interface AccordionState extends WidgetsCommonPropsAndState {
     itemsWidget: AccordionItemWidget[];
 }
 export interface AccordionApi {
-    /**
-     * 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`.
-     */
-    isExpanded(itemId: string): boolean;
     /**
      * Given the itemId, will expand the corresponding accordion-item.
      *
@@ -187,7 +160,6 @@ export interface AccordionDirectives {
     accordionDirective: Directive;
 }
 export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionApi, object, AccordionDirectives>;
-export type AccordionItemContext = WidgetSlotContext<AccordionItemWidget>;
 export interface AccordionItemActions {
     /**
      * Action to be called when the user clicks on the accordion-item button. If the accordion-item is disabled nothing will happen.
@@ -214,9 +186,25 @@ export interface AccordionItemApi {
 }
 export interface AccordionItemDirectives {
     /**
-     * Directive to be put on the accordion-item collapse. It will handle the animation.
+     * 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.
      */
-    collapseDirective: Directive;
+    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 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.
      */
@@ -236,21 +224,6 @@ export interface AccordionItemCommonPropsAndState {
      * The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
      */
     itemId: string;
-    /**
-     * Content present in the accordion button inside the accordion header.
-     */
-    slotItemHeader: SlotContent<AccordionItemContext>;
-    /**
-     * Content present in the accordion body.
-     */
-    slotItemBody: SlotContent<AccordionItemContext>;
-    /**
-     * Structure of the accordion-item. The default item structure is: accordion-item
-     * contains accordion header and accordion-item body container; the accordion header contains the accordion button
-     * (that contains `slotItemHeader`), while the accordion-item body container contains the accordion body (that contains `slotItemBody`).
-     * The itemTransition it applied on this element.
-     */
-    slotItemStructure: SlotContent<AccordionItemContext>;
     /**
      * CSS classes to add on the accordion-item DOM element.
      */
@@ -281,7 +254,7 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
     /**
      * If `true`, accordion-item will be animated.
      */
-    itemAnimation: boolean;
+    itemAnimated: boolean;
     /**
      * The transition to use for the accordion-item body-container when the accordion-item is toggled.
      */
@@ -318,9 +291,25 @@ export type AccordionItemWidget = Widget<AccordionItemProps, AccordionItemState,
  * @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 a 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 function createAccordion(config?: PropsConfig<AccordionProps>): AccordionWidget;
+export declare const createAccordion: WidgetFactory<AccordionWidget>;

package/components/accordion/index.cjs

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

package/components/accordion/index.js

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

package/components/alert/alert.d.ts

@@ -1,17 +1,8 @@
 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;
+import type { Widget, WidgetFactory } from '../../types';
+export interface AlertState extends CommonAlertState {
 }
-export interface AlertState extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertState, AlertExtraProps, object> {
-}
-export interface AlertProps extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertProps, AlertExtraProps, object> {
+export interface AlertProps extends CommonAlertProps {
 }
 export interface AlertApi extends CommonAlertApi {
 }

package/components/alert/common.d.ts

@@ -1,21 +1,12 @@
 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>;
+import type { ConfigValidator, Directive, PropsConfig, Widget } from '../../types';
 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;
-    /**
-     * Template for the alert content
-     */
-    slotDefault: SlotContent<CommonAlertContext>;
-    /**
-     * Global template for the alert component
-     */
-    slotStructure: SlotContent<CommonAlertContext>;
     /**
      * If `true` the alert is visible to the user
      */
@@ -47,7 +38,7 @@ export interface CommonAlertProps extends CommonAlertCommonPropsAndState {
     /**
      * The transition function will be executed when the alert is displayed or hidden.
      *
-     * Depending on the value of {@link CommonAlertProps.animationOnInit}, the animation can be optionally skipped during the showing process.
+     * Depending on the value of {@link CommonAlertProps.animatedOnInit}, the animation can be optionally skipped during the showing process.
      */
     transition: TransitionFn;
     /**
@@ -56,14 +47,14 @@ export interface CommonAlertProps extends CommonAlertCommonPropsAndState {
      * Animation is triggered  when the `.open()` function is called
      * or the visible prop is changed
      */
-    animationOnInit: boolean;
+    animatedOnInit: boolean;
     /**
      * If `true`, alert closing will be animated.
      *
      * Animation is triggered  when clicked on the close button (×),
      * via the `.close()` function or the visible prop is changed
      */
-    animation: boolean;
+    animated: boolean;
 }
 export interface CommonAlertApi {
     /**

package/components/alert/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common = require("../../common-nJRMXbwj.cjs");
+const alert = require("../../alert-C4jCg9Pl.cjs");
+exports.commonAlertConfigValidator = common.commonAlertConfigValidator;
+exports.createCommonAlert = common.createCommonAlert;
+exports.defaultCommonAlertConfig = common.defaultCommonAlertConfig;
+exports.getCommonAlertDefaultConfig = common.getCommonAlertDefaultConfig;
+exports.createAlert = alert.createAlert;
+exports.getAlertDefaultConfig = alert.getAlertDefaultConfig;

package/components/alert/index.js

@@ -1,2 +1,10 @@
-export * from './common';
-export * from './alert';
+import { c, a, d, g } from "../../common-DRdsw5m8.js";
+import { c as c2, g as g2 } from "../../alert-Dlf-BV98.js";
+export {
+  c as commonAlertConfigValidator,
+  c2 as createAlert,
+  a as createCommonAlert,
+  d as defaultCommonAlertConfig,
+  g2 as getAlertDefaultConfig,
+  g as getCommonAlertDefaultConfig
+};

package/components/modal/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const modal = require("../../modal-rzMpATf5.cjs");
+exports.createModal = modal.createModal;
+exports.getModalDefaultConfig = modal.getModalDefaultConfig;
+exports.modalCloseButtonClick = modal.modalCloseButtonClick;
+exports.modalOutsideClick = modal.modalOutsideClick;

package/components/modal/index.js

@@ -1 +1,7 @@
-export * from './modal';
+import { c, g, a, m } from "../../modal-BI2qUu1M.js";
+export {
+  c as createModal,
+  g as getModalDefaultConfig,
+  a as modalCloseButtonClick,
+  m as modalOutsideClick
+};

package/components/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import type { WidgetsCommonPropsAndState } from '../commonProps';
 import type { TransitionFn } from '../../services/transitions/baseTransitions';
-import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 /**
  * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
  * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click inside the viewport but outside the modal.
@@ -11,10 +11,6 @@ export declare const modalOutsideClick: unique symbol;
  * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click on the close button.
  */
 export declare const modalCloseButtonClick: unique symbol;
-/**
- * Context of the modal slots.
- */
-export type ModalContext<Data> = WidgetSlotContext<ModalWidget<Data>>;
 /**
  * Properties of the modal widget that are also in the state of the modal.
  */
@@ -37,27 +33,6 @@ export interface ModalCommonPropsAndState<Data> extends WidgetsCommonPropsAndSta
      * Otherwise, they stay where the widget is located.
      */
     container: HTMLElement | null;
-    /**
-     * Body of the modal.
-     */
-    slotDefault: SlotContent<ModalContext<Data>>;
-    /**
-     * Footer of the modal.
-     */
-    slotFooter: SlotContent<ModalContext<Data>>;
-    /**
-     * Header of the modal. The default header includes {@link ModalCommonPropsAndState.slotTitle|slotTitle}.
-     */
-    slotHeader: SlotContent<ModalContext<Data>>;
-    /**
-     * Structure of the modal.
-     * The default structure uses {@link ModalCommonPropsAndState.slotHeader|slotHeader}, {@link ModalCommonPropsAndState.slotDefault|slotDefault} and {@link ModalCommonPropsAndState.slotFooter|slotFooter}.
-     */
-    slotStructure: SlotContent<ModalContext<Data>>;
-    /**
-     * Title of the modal.
-     */
-    slotTitle: SlotContent<ModalContext<Data>>;
     /**
      * Whether the modal should be visible when the transition is completed.
      */
@@ -90,7 +65,7 @@ export interface ModalProps<Data> extends ModalCommonPropsAndState<Data> {
     /**
      * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
      */
-    animation: boolean;
+    animated: boolean;
     /**
      * Whether a backdrop should be created behind the modal.
      */
@@ -211,6 +186,10 @@ export interface ModalDirectives {
      * Portal directive to put on the backdrop DOM element.
      */
     backdropPortalDirective: Directive;
+    /**
+     * Directive that adds all the necessary attributes to the close button
+     */
+    closeButtonDirective: Directive;
 }
 /**
  * Modal widget.
@@ -224,7 +203,7 @@ export declare function getModalDefaultConfig(): {
     /**
      * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
      */
-    animation: boolean;
+    animated: boolean;
     /**
      * Whether a backdrop should be created behind the modal.
      */
@@ -280,27 +259,6 @@ export declare function getModalDefaultConfig(): {
      * Otherwise, they stay where the widget is located.
      */
     container: HTMLElement | null;
-    /**
-     * Body of the modal.
-     */
-    slotDefault: SlotContent<ModalContext<any>>;
-    /**
-     * Footer of the modal.
-     */
-    slotFooter: SlotContent<ModalContext<any>>;
-    /**
-     * Header of the modal. The default header includes {@link ModalCommonPropsAndState.slotTitle|slotTitle}.
-     */
-    slotHeader: SlotContent<ModalContext<any>>;
-    /**
-     * Structure of the modal.
-     * The default structure uses {@link ModalCommonPropsAndState.slotHeader|slotHeader}, {@link ModalCommonPropsAndState.slotDefault|slotDefault} and {@link ModalCommonPropsAndState.slotFooter|slotFooter}.
-     */
-    slotStructure: SlotContent<ModalContext<any>>;
-    /**
-     * Title of the modal.
-     */
-    slotTitle: SlotContent<ModalContext<any>>;
     /**
      * Whether the modal should be visible when the transition is completed.
      */

package/components/pagination/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pagination = require("../../pagination-EWSWQT1I.cjs");
+exports.createPagination = pagination.createPagination;
+exports.getPaginationDefaultConfig = pagination.getPaginationDefaultConfig;

package/components/pagination/index.d.ts

@@ -1,2 +1 @@
-export * from './bootstrap';
 export * from './pagination';

package/components/pagination/index.js

@@ -1,2 +1,5 @@
-export * from './bootstrap';
-export * from './pagination';
+import { c, g } from "../../pagination--GkwduJn.js";
+export {
+  c as createPagination,
+  g as getPaginationDefaultConfig
+};