@agnos-ui/core-bootstrap 0.9.2 → 0.10.0-next.0

package/collapse-BxmbNhX5.js

@@ -0,0 +1,48 @@
+import { writablesForProps, true$ } from "@agnos-ui/core/utils/stores";
+import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
+import { typeString, typeBoolean } from "@agnos-ui/core/utils/writables";
+import { a as collapseHorizontalTransition, c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
+import { asWritable, computed, batch } from "@amadeus-it-group/tansu";
+import { createWidgetFactory } from "@agnos-ui/core/utils/widget";
+import { getCollapseDefaultConfig as getCollapseDefaultConfig$1, createCollapse as createCollapse$1 } from "@agnos-ui/core/components/collapse";
+const defaultConfigExtraProps = {
+  className: "",
+  horizontal: false
+};
+const configValidator = {
+  horizontal: typeBoolean,
+  className: typeString
+};
+function getCollapseDefaultConfig() {
+  return { ...getCollapseDefaultConfig$1(), ...defaultConfigExtraProps };
+}
+const createCollapse = createWidgetFactory("collapse", (config) => {
+  const [{ horizontal$, className$ }, patch] = writablesForProps(defaultConfigExtraProps, config, configValidator);
+  const transitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
+  const widget = createCollapse$1({ ...config ?? {}, props: { ...config?.props ?? {}, transition: transitionFn$ } });
+  return {
+    ...widget,
+    patch: (storesValues) => batch(() => {
+      widget.patch(storesValues);
+      patch(storesValues);
+    }),
+    directives: {
+      ...widget.directives,
+      collapseDirective: mergeDirectives(
+        widget.directives.collapseDirective,
+        createAttributesDirective(() => ({
+          attributes: {
+            class: className$
+          },
+          classNames: {
+            "au-collapse": true$
+          }
+        }))
+      )
+    }
+  };
+});
+export {
+  createCollapse as c,
+  getCollapseDefaultConfig as g
+};

package/collapse-Dy-3cJym.cjs

@@ -0,0 +1,47 @@
+"use strict";
+const stores = require("@agnos-ui/core/utils/stores");
+const directive = require("@agnos-ui/core/utils/directive");
+const writables = require("@agnos-ui/core/utils/writables");
+const collapse$1 = require("./collapse-sUYbZqEx.cjs");
+const tansu = require("@amadeus-it-group/tansu");
+const widget = require("@agnos-ui/core/utils/widget");
+const collapse = require("@agnos-ui/core/components/collapse");
+const defaultConfigExtraProps = {
+  className: "",
+  horizontal: false
+};
+const configValidator = {
+  horizontal: writables.typeBoolean,
+  className: writables.typeString
+};
+function getCollapseDefaultConfig() {
+  return { ...collapse.getCollapseDefaultConfig(), ...defaultConfigExtraProps };
+}
+const createCollapse = widget.createWidgetFactory("collapse", (config) => {
+  const [{ horizontal$, className$ }, patch] = stores.writablesForProps(defaultConfigExtraProps, config, configValidator);
+  const transitionFn$ = tansu.asWritable(tansu.computed(() => horizontal$() ? collapse$1.collapseHorizontalTransition : collapse$1.collapseVerticalTransition));
+  const widget2 = collapse.createCollapse({ ...config ?? {}, props: { ...config?.props ?? {}, transition: transitionFn$ } });
+  return {
+    ...widget2,
+    patch: (storesValues) => tansu.batch(() => {
+      widget2.patch(storesValues);
+      patch(storesValues);
+    }),
+    directives: {
+      ...widget2.directives,
+      collapseDirective: directive.mergeDirectives(
+        widget2.directives.collapseDirective,
+        directive.createAttributesDirective(() => ({
+          attributes: {
+            class: className$
+          },
+          classNames: {
+            "au-collapse": stores.true$
+          }
+        }))
+      )
+    }
+  };
+});
+exports.createCollapse = createCollapse;
+exports.getCollapseDefaultConfig = getCollapseDefaultConfig;

package/components/collapse/collapse.d.ts

@@ -1,8 +1,7 @@
-import type { Directive, Widget, WidgetFactory } from '@agnos-ui/core/types';
-/**
- * Interface representing the common properties and state for a collapse component.
- */
-export interface CollapseCommonPropsAndState {
+import type { Widget, WidgetFactory } from '@agnos-ui/core/types';
+import type { CollapseProps as CoreCollapseProps, CollapseApi, CollapseState, CollapseDirectives } from '@agnos-ui/core/components/collapse';
+export * from '@agnos-ui/core/components/collapse';
+interface CollapseExtraProps {
     /**
      * CSS classes to be applied on the widget main container
      *
@@ -15,103 +14,11 @@ export interface CollapseCommonPropsAndState {
      * @defaultValue `false`
      */
     horizontal: boolean;
-    /**
-     * If `true` the collapse is visible to the user
-     *
-     * @defaultValue `true`
-     */
-    visible: boolean;
-}
-/**
- * Represents the state of a collapse component.
- * Extends the properties and state from `CollapseCommonPropsAndState`.
- */
-export interface CollapseState extends CollapseCommonPropsAndState {
-    /**
-     * Is `true` when the collapse is hidden. Compared to `visible`, this is updated after the transition is executed.
-     */
-    hidden: boolean;
 }
 /**
  * Properties for the Collapse component.
  */
-export interface CollapseProps extends CollapseCommonPropsAndState {
-    /**
-     * Callback called when the collapse visibility changed.
-     *
-     * @defaultValue
-     * ```ts
-     * () => {}
-     * ```
-     * @param visible - The new visibility state of the collapse.
-     */
-    onVisibleChange: (visible: boolean) => void;
-    /**
-     * Callback called when the collapse is hidden.
-     *
-     * @defaultValue
-     * ```ts
-     * () => {}
-     * ```
-     */
-    onHidden: () => void;
-    /**
-     * Callback called when the collapse is shown.
-     *
-     * @defaultValue
-     * ```ts
-     * () => {}
-     * ```
-     */
-    onShown: () => void;
-    /**
-     * If `true`, collapse opening will be animated at init time.
-     *
-     * @defaultValue `false`
-     */
-    animatedOnInit: boolean;
-    /**
-     * If `true`, collapse closing and opening will be animated.
-     *
-     * @defaultValue `true`
-     */
-    animated: boolean;
-    /**
-     * id of the collapse
-     *
-     * @defaultValue `''`
-     */
-    id: string;
-}
-/**
- * Interface representing the API for a collapsible component.
- */
-export interface CollapseApi {
-    /**
-     * Triggers collapse closing programmatically.
-     */
-    close(): void;
-    /**
-     * Triggers the collapse content to be displayed for the user.
-     */
-    open(): void;
-    /**
-     * Toggles the collapse content visibility.
-     */
-    toggle(): void;
-}
-/**
- * Interface representing the directives used in a collapse component.
- */
-export interface CollapseDirectives {
-    /**
-     * Directive to apply the collapse.
-     */
-    collapseDirective: Directive;
-    /**
-     * Directive to apply to a trigger;
-     */
-    triggerDirective: Directive;
+export interface CollapseProps extends Omit<CoreCollapseProps, 'transition'>, CollapseExtraProps {
 }
 /**
  * Represents a widget for handling collapse functionality.

package/components/collapse/index.cjs

@@ -1,5 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const collapse = require("../../collapse-BzcOh2fY.cjs");
+const collapse = require("../../collapse-Dy-3cJym.cjs");
+const collapse$1 = require("@agnos-ui/core/components/collapse");
 exports.createCollapse = collapse.createCollapse;
 exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;
+Object.keys(collapse$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => collapse$1[k]
+  });
+});

package/components/collapse/index.js

@@ -1,4 +1,5 @@
-import { c, g } from "../../collapse-UxuEGPrW.js";
+import { c, g } from "../../collapse-BxmbNhX5.js";
+export * from "@agnos-ui/core/components/collapse";
 export {
   c as createCollapse,
   g as getCollapseDefaultConfig

package/components/drawer/drawer.d.ts

@@ -0,0 +1,71 @@
+import type { DrawerProps as CoreProps, DrawerState as CoreState, DrawerApi, DrawerDirectives as DrawerCoreDirectives } from '@agnos-ui/core/components/drawer';
+import type { Directive, SlotContent, Widget, WidgetFactory, WidgetSlotContext } from '@agnos-ui/core/types';
+export * from '@agnos-ui/core/components/drawer';
+/**
+ * Represents the context for a Drawer widget.
+ * This interface is an alias for `WidgetSlotContext<DrawerWidget>`.
+ */
+export type DrawerContext = WidgetSlotContext<DrawerWidget>;
+/**
+ * Represents additional properties for the Drawer widget like slots etc.
+ */
+interface DrawerExtraProps {
+    /**
+     * Global template for the drawer component
+     */
+    structure: SlotContent<DrawerContext>;
+    /**
+     * Template for the drawer header
+     */
+    header: SlotContent<DrawerContext>;
+    /**
+     * Template for the drawer body
+     */
+    children: SlotContent<DrawerContext>;
+}
+/**
+ * Represents the state of a Drawer component.
+ */
+export interface DrawerState extends CoreState, DrawerExtraProps {
+}
+/**
+ * Represents the properties for the Drawer component.
+ */
+export interface DrawerProps extends CoreProps, DrawerExtraProps {
+}
+/**
+ * Represents the directives for the Drawer component.
+ */
+export interface DrawerDirectives extends DrawerCoreDirectives {
+    /**
+     * Directive to put on the drawer DOM element.
+     */
+    drawerDirective: Directive;
+    /**
+     * Directive to put on the backdrop DOM element.
+     */
+    backdropDirective: Directive;
+    /**
+     * Directive to put on the splitter DOM element.
+     */
+    splitterDirective: Directive;
+    /**
+     * Directive to put on the container DOM element in order for the drawer to size correctly.
+     */
+    containerDirective: Directive;
+}
+/**
+ * Represents a Drawer widget component.
+ */
+export type DrawerWidget = Widget<DrawerProps, DrawerState, DrawerApi, DrawerDirectives>;
+/**
+ * Retrieve a shallow copy of the default Drawer config
+ * @returns the default Drawer config
+ */
+export declare function getDrawerDefaultConfig(): DrawerProps;
+/**
+ * Create a Drawer with given config props
+ * @param config - an optional Drawer config
+ * @returns a DrawerWidget
+ */
+export declare const createDrawer: WidgetFactory<DrawerWidget>;

package/components/drawer/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const drawer = require("../../drawer-Dv6lMUKE.cjs");
+const drawer$1 = require("@agnos-ui/core/components/drawer");
+exports.createDrawer = drawer.createDrawer;
+exports.getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;
+Object.keys(drawer$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => drawer$1[k]
+  });
+});

package/components/drawer/index.d.ts

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

package/components/drawer/index.js

@@ -0,0 +1,6 @@
+import { c, g } from "../../drawer-ByOWziyU.js";
+export * from "@agnos-ui/core/components/drawer";
+export {
+  c as createDrawer,
+  g as getDrawerDefaultConfig
+};

package/config.d.ts

@@ -10,6 +10,7 @@ import type { SelectProps } from './components/select';
 import type { SliderProps } from './components/slider';
 import type { ToastProps } from './components/toast';
 import type { TreeProps } from './components/tree';
+import type { DrawerProps } from './components/drawer';
 /**
  * Configuration interface for various Bootstrap widgets.
  */
@@ -62,4 +63,8 @@ export interface BootstrapWidgetsConfig {
      * carousel widget config
      */
     carousel: CarouselProps<any>;
+    /**
+     * drawer widget config
+     */
+    drawer: DrawerProps;
 }

package/css/agnosui.css

@@ -410,4 +410,73 @@
   padding: 1rem;
 }
 
+.au-drawer {
+  --bs-drawer-z-index: 2010;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+  z-index: var(--bs-drawer-z-index);
+}
+.au-drawer.inline-start {
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+.au-drawer.inline-end {
+  inset-block: 0;
+  inset-inline-end: 0;
+}
+.au-drawer.inline-end .au-splitter {
+  inset-inline-end: auto;
+}
+.au-drawer.block-start {
+  inset-inline: 0;
+  inset-block-start: 0;
+}
+.au-drawer.block-start .au-splitter {
+  inset-block-start: auto;
+}
+.au-drawer.block-end {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+.au-drawer .au-drawer-header {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid #e2e2e2;
+}
+.au-drawer .au-drawer-body {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+}
+.au-drawer .au-splitter {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: -4px;
+  width: 8px;
+  cursor: ew-resize;
+  background: transparent;
+}
+.au-drawer.block-start .au-splitter, .au-drawer.block-end .au-splitter {
+  inset-inline: 0;
+  width: auto;
+  height: 8px;
+  cursor: ns-resize;
+}
+
+.au-drawer-backdrop {
+  --bs-drawer-backdrop-z-index: 2000;
+  --bs-drawer-backdrop-color: #1a1a1a;
+  --bs-drawer-backdrop-opacity: 0.75;
+  position: fixed;
+  inset: 0;
+  background: var(--bs-drawer-backdrop-color);
+  z-index: var(--bs-drawer-backdrop-z-index);
+}
+.au-drawer-backdrop.show {
+  opacity: var(--bs-drawer-backdrop-opacity);
+  pointer-events: auto;
+}
+
 /*# sourceMappingURL=agnosui.css.map */

package/css/agnosui.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss"],"names":[],"mappings":"AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAKD;EACC;;;ACzEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACiBD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EApGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA6FA;EA/GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAwGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC7WH;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC","file":"agnosui.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss","../scss/drawer.scss"],"names":[],"mappings":"AAEA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;;AAIF;EACC;;AAEA;EACC;;AAKD;EACC;;;ACzEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACiBD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EApGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA6FA;EA/GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAwGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC7WH;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC;;;ACHD;EAEC;EAGA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAKF;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EAEC;EACA;EACA;EACA;;;AAIF;EAEC;EACA;EACA;EAGA;EACA;EACA;EACA;;AAEA;EACC;EACA","file":"agnosui.css"}

package/css/drawer.css

@@ -0,0 +1,70 @@
+.au-drawer {
+  --bs-drawer-z-index: 2010;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+  z-index: var(--bs-drawer-z-index);
+}
+.au-drawer.inline-start {
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+.au-drawer.inline-end {
+  inset-block: 0;
+  inset-inline-end: 0;
+}
+.au-drawer.inline-end .au-splitter {
+  inset-inline-end: auto;
+}
+.au-drawer.block-start {
+  inset-inline: 0;
+  inset-block-start: 0;
+}
+.au-drawer.block-start .au-splitter {
+  inset-block-start: auto;
+}
+.au-drawer.block-end {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+.au-drawer .au-drawer-header {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid #e2e2e2;
+}
+.au-drawer .au-drawer-body {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+}
+.au-drawer .au-splitter {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: -4px;
+  width: 8px;
+  cursor: ew-resize;
+  background: transparent;
+}
+.au-drawer.block-start .au-splitter, .au-drawer.block-end .au-splitter {
+  inset-inline: 0;
+  width: auto;
+  height: 8px;
+  cursor: ns-resize;
+}
+
+.au-drawer-backdrop {
+  --bs-drawer-backdrop-z-index: 2000;
+  --bs-drawer-backdrop-color: #1a1a1a;
+  --bs-drawer-backdrop-opacity: 0.75;
+  position: fixed;
+  inset: 0;
+  background: var(--bs-drawer-backdrop-color);
+  z-index: var(--bs-drawer-backdrop-z-index);
+}
+.au-drawer-backdrop.show {
+  opacity: var(--bs-drawer-backdrop-opacity);
+  pointer-events: auto;
+}
+
+/*# sourceMappingURL=drawer.css.map */

package/css/drawer.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/drawer.scss"],"names":[],"mappings":"AAEA;EAEC;EAGA;EACA;EACA;EACA;EACA;;AAGA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAKF;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;;AAID;EAEC;EACA;EACA;EACA;;;AAIF;EAEC;EACA;EACA;EAGA;EACA;EACA;EACA;;AAEA;EACC;EACA","file":"drawer.css"}

package/drawer-ByOWziyU.js

@@ -0,0 +1,72 @@
+import { getDrawerDefaultConfig as getDrawerDefaultConfig$1, createDrawer as createDrawer$1 } from "@agnos-ui/core/components/drawer";
+import { extendWidgetProps } from "@agnos-ui/core/services/extendWidget";
+import { c as collapseVerticalTransition, a as collapseHorizontalTransition } from "./collapse-CVjUhnIz.js";
+import { f as fadeTransition } from "./fade-uOobJKgw.js";
+import { createWidgetFactory } from "@agnos-ui/core/utils/widget";
+import { mergeDirectives, createAttributesDirective } from "@agnos-ui/core/utils/directive";
+import { true$ } from "@agnos-ui/core/utils/stores";
+const defaultConfigExtraProps = {
+  structure: void 0,
+  header: void 0,
+  children: void 0
+};
+const configValidator = {
+  structure: void 0,
+  header: void 0,
+  children: void 0
+};
+function getDrawerDefaultConfig() {
+  return { ...getDrawerDefaultConfig$1(), ...defaultConfigExtraProps, ...coreOverride };
+}
+const coreOverride = {
+  backdropTransition: fadeTransition,
+  transition: collapseHorizontalTransition,
+  verticalTransition: collapseVerticalTransition
+};
+const createDrawer = createWidgetFactory("drawer", (config) => {
+  const widget = extendWidgetProps(createDrawer$1, defaultConfigExtraProps, configValidator, coreOverride)(config);
+  return {
+    ...widget,
+    directives: {
+      ...widget.directives,
+      drawerDirective: mergeDirectives(
+        widget.directives.drawerDirective,
+        createAttributesDirective(() => ({
+          classNames: {
+            "au-drawer": true$,
+            show: widget.stores.visible$
+          }
+        }))
+      ),
+      backdropDirective: mergeDirectives(
+        widget.directives.backdropDirective,
+        createAttributesDirective(() => ({
+          classNames: {
+            "au-drawer-backdrop": true$,
+            show: widget.stores.visible$
+          }
+        }))
+      ),
+      splitterDirective: mergeDirectives(
+        widget.directives.splitterDirective,
+        createAttributesDirective(() => ({
+          classNames: {
+            "au-splitter": true$
+          }
+        }))
+      ),
+      containerDirective: mergeDirectives(
+        widget.directives.containerDirective,
+        createAttributesDirective(() => ({
+          classNames: {
+            "au-drawer-container": true$
+          }
+        }))
+      )
+    }
+  };
+});
+export {
+  createDrawer as c,
+  getDrawerDefaultConfig as g
+};

package/drawer-Dv6lMUKE.cjs

@@ -0,0 +1,71 @@
+"use strict";
+const drawer = require("@agnos-ui/core/components/drawer");
+const extendWidget = require("@agnos-ui/core/services/extendWidget");
+const collapse = require("./collapse-sUYbZqEx.cjs");
+const fade = require("./fade-CJ0jXGio.cjs");
+const widget = require("@agnos-ui/core/utils/widget");
+const directive = require("@agnos-ui/core/utils/directive");
+const stores = require("@agnos-ui/core/utils/stores");
+const defaultConfigExtraProps = {
+  structure: void 0,
+  header: void 0,
+  children: void 0
+};
+const configValidator = {
+  structure: void 0,
+  header: void 0,
+  children: void 0
+};
+function getDrawerDefaultConfig() {
+  return { ...drawer.getDrawerDefaultConfig(), ...defaultConfigExtraProps, ...coreOverride };
+}
+const coreOverride = {
+  backdropTransition: fade.fadeTransition,
+  transition: collapse.collapseHorizontalTransition,
+  verticalTransition: collapse.collapseVerticalTransition
+};
+const createDrawer = widget.createWidgetFactory("drawer", (config) => {
+  const widget2 = extendWidget.extendWidgetProps(drawer.createDrawer, defaultConfigExtraProps, configValidator, coreOverride)(config);
+  return {
+    ...widget2,
+    directives: {
+      ...widget2.directives,
+      drawerDirective: directive.mergeDirectives(
+        widget2.directives.drawerDirective,
+        directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-drawer": stores.true$,
+            show: widget2.stores.visible$
+          }
+        }))
+      ),
+      backdropDirective: directive.mergeDirectives(
+        widget2.directives.backdropDirective,
+        directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-drawer-backdrop": stores.true$,
+            show: widget2.stores.visible$
+          }
+        }))
+      ),
+      splitterDirective: directive.mergeDirectives(
+        widget2.directives.splitterDirective,
+        directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-splitter": stores.true$
+          }
+        }))
+      ),
+      containerDirective: directive.mergeDirectives(
+        widget2.directives.containerDirective,
+        directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-drawer-container": stores.true$
+          }
+        }))
+      )
+    }
+  };
+});
+exports.createDrawer = createDrawer;
+exports.getDrawerDefaultConfig = getDrawerDefaultConfig;

package/index.cjs

@@ -9,10 +9,11 @@ const rating = require("./rating-C5NZjIRx.cjs");
 const select = require("./select-AtIM2x7x.cjs");
 const slider = require("./slider-CosrWCnn.cjs");
 const toast = require("./toast-C4gj0rX-.cjs");
-const collapse = require("./collapse-BzcOh2fY.cjs");
+const collapse = require("./collapse-Dy-3cJym.cjs");
 const tree = require("./tree-DuY7bsYo.cjs");
 const carousel = require("./carousel-C-vSnTTq.cjs");
-const collapse$1 = require("./collapse-sUYbZqEx.cjs");
+const drawer = require("./drawer-Dv6lMUKE.cjs");
+const collapse$2 = require("./collapse-sUYbZqEx.cjs");
 const fade = require("./fade-CJ0jXGio.cjs");
 const types = require("./types.cjs");
 const accordion$1 = require("@agnos-ui/core/components/accordion");
@@ -24,8 +25,10 @@ const rating$1 = require("@agnos-ui/core/components/rating");
 const select$1 = require("@agnos-ui/core/components/select");
 const slider$1 = require("@agnos-ui/core/components/slider");
 const toast$1 = require("@agnos-ui/core/components/toast");
+const collapse$1 = require("@agnos-ui/core/components/collapse");
 const tree$1 = require("@agnos-ui/core/components/tree");
 const carousel$1 = require("@agnos-ui/core/components/carousel");
+const drawer$1 = require("@agnos-ui/core/components/drawer");
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
 exports.getAccordionDefaultConfig = accordion.getAccordionDefaultConfig;
@@ -53,8 +56,10 @@ exports.createTree = tree.createTree;
 exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
 exports.createCarousel = carousel.createCarousel;
 exports.getCarouselDefaultConfig = carousel.getCarouselDefaultConfig;
-exports.collapseHorizontalTransition = collapse$1.collapseHorizontalTransition;
-exports.collapseVerticalTransition = collapse$1.collapseVerticalTransition;
+exports.createDrawer = drawer.createDrawer;
+exports.getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;
+exports.collapseHorizontalTransition = collapse$2.collapseHorizontalTransition;
+exports.collapseVerticalTransition = collapse$2.collapseVerticalTransition;
 exports.fadeTransition = fade.fadeTransition;
 exports.BS_CONTEXTUAL_CLASSES = types.BS_CONTEXTUAL_CLASSES;
 Object.keys(accordion$1).forEach((k) => {
@@ -111,6 +116,12 @@ Object.keys(toast$1).forEach((k) => {
     get: () => toast$1[k]
   });
 });
+Object.keys(collapse$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => collapse$1[k]
+  });
+});
 Object.keys(tree$1).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,
@@ -123,3 +134,9 @@ Object.keys(carousel$1).forEach((k) => {
     get: () => carousel$1[k]
   });
 });
+Object.keys(drawer$1).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: () => drawer$1[k]
+  });
+});

package/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/toast';
 export * from './components/collapse';
 export * from './components/tree';
 export * from './components/carousel';
+export * from './components/drawer';
 export * from './services/transitions';
 export * from './config';
 export * from './types';

package/index.js

@@ -7,10 +7,11 @@ import { c as c6, g as g6 } from "./rating-hovacUx0.js";
 import { c as c7, g as g7 } from "./select-CLjBDJ3a.js";
 import { c as c8, g as g8 } from "./slider-Bj081WdM.js";
 import { c as c9, g as g9, t } from "./toast-Dggjpjqk.js";
-import { c as c10, g as g10 } from "./collapse-UxuEGPrW.js";
+import { c as c10, g as g10 } from "./collapse-BxmbNhX5.js";
 import { c as c11, g as g11 } from "./tree-Be8WJS8u.js";
 import { c as c12, g as g12 } from "./carousel-CY0kDaVK.js";
-import { a as a2, c as c13 } from "./collapse-CVjUhnIz.js";
+import { c as c13, g as g13 } from "./drawer-ByOWziyU.js";
+import { a as a2, c as c14 } from "./collapse-CVjUhnIz.js";
 import { f } from "./fade-uOobJKgw.js";
 import { BS_CONTEXTUAL_CLASSES } from "./types.js";
 export * from "@agnos-ui/core/components/accordion";
@@ -22,17 +23,20 @@ export * from "@agnos-ui/core/components/rating";
 export * from "@agnos-ui/core/components/select";
 export * from "@agnos-ui/core/components/slider";
 export * from "@agnos-ui/core/components/toast";
+export * from "@agnos-ui/core/components/collapse";
 export * from "@agnos-ui/core/components/tree";
 export * from "@agnos-ui/core/components/carousel";
+export * from "@agnos-ui/core/components/drawer";
 export {
   BS_CONTEXTUAL_CLASSES,
   a2 as collapseHorizontalTransition,
-  c13 as collapseVerticalTransition,
+  c14 as collapseVerticalTransition,
   a as createAccordion,
   c as createAccordionItem,
   c2 as createAlert,
   c12 as createCarousel,
   c10 as createCollapse,
+  c13 as createDrawer,
   c3 as createModal,
   c4 as createPagination,
   c5 as createProgressbar,
@@ -46,6 +50,7 @@ export {
   g2 as getAlertDefaultConfig,
   g12 as getCarouselDefaultConfig,
   g10 as getCollapseDefaultConfig,
+  g13 as getDrawerDefaultConfig,
   g3 as getModalDefaultConfig,
   g4 as getPaginationDefaultConfig,
   g5 as getProgressbarDefaultConfig,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core-bootstrap",
 	"description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
-	"version": "0.9.2",
+	"version": "0.10.0-next.0",
 	"keywords": [
 		"bootstrap",
 		"css",
@@ -62,7 +62,7 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core": "0.9.2"
+		"@agnos-ui/core": "0.10.0-next.0"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^2.0.0"

package/scss/_variables.scss

@@ -101,3 +101,12 @@ $au-tree-expand-icon-height: 2.25rem;
 $au-tree-expand-icon-color: #0d6efd !default;
 $au-tree-expand-icon-color-hover: #052c65 !default;
 // scss-docs-end tree-vars
+
+// drawer variables
+// scss-docs-start drawer-vars
+$au-drawer-z-index: 2010;
+$au-drawer-backdrop-z-index: 2000;
+$au-drawer-backdrop-color: #1a1a1a;
+$au-drawer-backdrop-opacity: 0.75;
+// scss-docs-end drawer-vars
+// [content-placeholder]

package/scss/agnosui.scss

@@ -5,3 +5,5 @@
 @use 'rating';
 @use 'carousel';
 @use 'toaster';
+@use 'drawer';
+// [content-placeholder]

package/scss/drawer.scss

@@ -0,0 +1,92 @@
+@use 'variables' as *;
+
+.au-drawer {
+	// scss-docs-start drawer-css-vars
+	--#{$prefix}drawer-z-index: #{$au-drawer-z-index};
+	// scss-docs-end drawer-css-vars
+
+	display: flex;
+	flex-direction: column;
+	background: #fff;
+	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+	z-index: var(--#{$prefix}drawer-z-index);
+
+	// Inline (left/right depending on writing direction)
+	&.inline-start {
+		inset-block: 0;
+		inset-inline-start: 0;
+	}
+
+	&.inline-end {
+		inset-block: 0;
+		inset-inline-end: 0;
+
+		.au-splitter {
+			inset-inline-end: auto;
+		}
+	}
+
+	// Block (top/bottom)
+	&.block-start {
+		inset-inline: 0;
+		inset-block-start: 0;
+
+		.au-splitter {
+			inset-block-start: auto;
+		}
+	}
+
+	&.block-end {
+		inset-inline: 0;
+		inset-block-end: 0;
+	}
+
+	.au-drawer-header {
+		padding: 0.75rem 1rem;
+		font-weight: 600;
+		border-bottom: 1px solid #e2e2e2;
+	}
+
+	.au-drawer-body {
+		padding: 1rem;
+		overflow-y: auto;
+		flex: 1;
+	}
+
+	// Vertical splitter (default for inline drawers)
+	.au-splitter {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: -4px; // half outside for visual separation
+		width: 8px; // larger hit area
+		cursor: ew-resize;
+		background: transparent;
+	}
+
+	// Horizontal splitter for block drawers (height resize)
+	&.block-start .au-splitter,
+	&.block-end .au-splitter {
+		inset-inline: 0;
+		width: auto;
+		height: 8px;
+		cursor: ns-resize;
+	}
+}
+
+.au-drawer-backdrop {
+	// scss-docs-start drawer-backdrop-css-vars
+	--#{$prefix}drawer-backdrop-z-index: #{$au-drawer-backdrop-z-index};
+	--#{$prefix}drawer-backdrop-color: #{$au-drawer-backdrop-color};
+	--#{$prefix}drawer-backdrop-opacity: #{$au-drawer-backdrop-opacity};
+	// scss-docs-end drawer-backdrop-css-vars
+
+	position: fixed;
+	inset: 0;
+	background: var(--#{$prefix}drawer-backdrop-color);
+	z-index: var(--#{$prefix}drawer-backdrop-z-index);
+
+	&.show {
+		opacity: var(--#{$prefix}drawer-backdrop-opacity);
+		pointer-events: auto;
+	}
+}

package/collapse-BzcOh2fY.cjs

@@ -1,88 +0,0 @@
-"use strict";
-const baseTransitions = require("@agnos-ui/core/services/transitions/baseTransitions");
-const stores = require("@agnos-ui/core/utils/stores");
-const directive = require("@agnos-ui/core/utils/directive");
-const writables = require("@agnos-ui/core/utils/writables");
-const collapse = require("./collapse-sUYbZqEx.cjs");
-const tansu = require("@amadeus-it-group/tansu");
-const func = require("@agnos-ui/core/utils/func");
-const widget = require("@agnos-ui/core/utils/widget");
-const defaultCollapseConfig = {
-  visible: true,
-  horizontal: false,
-  onVisibleChange: func.noop,
-  onShown: func.noop,
-  onHidden: func.noop,
-  animated: true,
-  animatedOnInit: false,
-  className: "",
-  id: ""
-};
-function getCollapseDefaultConfig() {
-  return { ...defaultCollapseConfig };
-}
-const commonCollapseConfigValidator = {
-  horizontal: writables.typeBoolean,
-  onVisibleChange: writables.typeFunction,
-  onHidden: writables.typeFunction,
-  onShown: writables.typeFunction,
-  animatedOnInit: writables.typeBoolean,
-  animated: writables.typeBoolean,
-  className: writables.typeString,
-  visible: writables.typeBoolean,
-  id: writables.typeString
-};
-const createCollapse = widget.createWidgetFactory("collapse", (config) => {
-  const [
-    { animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
-    patch
-  ] = stores.writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
-  const id$ = stores.idWithDefault(_dirtyId$);
-  const currentTransitionFn$ = tansu.asWritable(tansu.computed(() => horizontal$() ? collapse.collapseHorizontalTransition : collapse.collapseVerticalTransition));
-  const transition = baseTransitions.createTransition({
-    props: {
-      transition: currentTransitionFn$,
-      visible: requestedVisible$,
-      animated: animated$,
-      animatedOnInit: animatedOnInit$,
-      onVisibleChange: onVisibleChange$,
-      onHidden: onHidden$,
-      onShown: onShown$
-    }
-  });
-  const visible$ = transition.stores.visible$;
-  const hidden$ = transition.stores.hidden$;
-  return {
-    ...stores.stateStores({ ...stateProps, visible$, hidden$, horizontal$ }),
-    patch,
-    api: {
-      open: transition.api.show,
-      close: transition.api.hide,
-      toggle: transition.api.toggle
-    },
-    directives: {
-      collapseDirective: directive.mergeDirectives(
-        transition.directives.directive,
-        directive.createAttributesDirective(() => ({
-          attributes: {
-            id: id$
-          },
-          classNames: {
-            "au-collapse": stores.true$
-          }
-        }))
-      ),
-      triggerDirective: directive.createAttributesDirective(() => ({
-        attributes: {
-          "aria-expanded": tansu.computed(() => `${visible$()}`),
-          "aria-controls": id$
-        },
-        events: {
-          click: () => transition.api.toggle()
-        }
-      }))
-    }
-  };
-});
-exports.createCollapse = createCollapse;
-exports.getCollapseDefaultConfig = getCollapseDefaultConfig;

package/collapse-UxuEGPrW.js

@@ -1,89 +0,0 @@
-import { createTransition } from "@agnos-ui/core/services/transitions/baseTransitions";
-import { writablesForProps, idWithDefault, stateStores, true$ } from "@agnos-ui/core/utils/stores";
-import { createAttributesDirective, mergeDirectives } from "@agnos-ui/core/utils/directive";
-import { typeString, typeBoolean, typeFunction } from "@agnos-ui/core/utils/writables";
-import { a as collapseHorizontalTransition, c as collapseVerticalTransition } from "./collapse-CVjUhnIz.js";
-import { asWritable, computed } from "@amadeus-it-group/tansu";
-import { noop } from "@agnos-ui/core/utils/func";
-import { createWidgetFactory } from "@agnos-ui/core/utils/widget";
-const defaultCollapseConfig = {
-  visible: true,
-  horizontal: false,
-  onVisibleChange: noop,
-  onShown: noop,
-  onHidden: noop,
-  animated: true,
-  animatedOnInit: false,
-  className: "",
-  id: ""
-};
-function getCollapseDefaultConfig() {
-  return { ...defaultCollapseConfig };
-}
-const commonCollapseConfigValidator = {
-  horizontal: typeBoolean,
-  onVisibleChange: typeFunction,
-  onHidden: typeFunction,
-  onShown: typeFunction,
-  animatedOnInit: typeBoolean,
-  animated: typeBoolean,
-  className: typeString,
-  visible: typeBoolean,
-  id: typeString
-};
-const createCollapse = createWidgetFactory("collapse", (config) => {
-  const [
-    { animatedOnInit$, animated$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, horizontal$, id$: _dirtyId$, ...stateProps },
-    patch
-  ] = writablesForProps(defaultCollapseConfig, config, commonCollapseConfigValidator);
-  const id$ = idWithDefault(_dirtyId$);
-  const currentTransitionFn$ = asWritable(computed(() => horizontal$() ? collapseHorizontalTransition : collapseVerticalTransition));
-  const transition = createTransition({
-    props: {
-      transition: currentTransitionFn$,
-      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$, horizontal$ }),
-    patch,
-    api: {
-      open: transition.api.show,
-      close: transition.api.hide,
-      toggle: transition.api.toggle
-    },
-    directives: {
-      collapseDirective: mergeDirectives(
-        transition.directives.directive,
-        createAttributesDirective(() => ({
-          attributes: {
-            id: id$
-          },
-          classNames: {
-            "au-collapse": true$
-          }
-        }))
-      ),
-      triggerDirective: createAttributesDirective(() => ({
-        attributes: {
-          "aria-expanded": computed(() => `${visible$()}`),
-          "aria-controls": id$
-        },
-        events: {
-          click: () => transition.api.toggle()
-        }
-      }))
-    }
-  };
-});
-export {
-  createCollapse as c,
-  getCollapseDefaultConfig as g
-};