@agnos-ui/svelte-bootstrap 0.10.0-next.2 → 0.10.0-next.3

package/components/drawer/Drawer.svelte

@@ -8,27 +8,21 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	import {createDrawer} from './drawer.gen';
 	import DrawerDefaultStructure from './DrawerDefaultStructure.svelte';
 
-	let {width = $bindable(), height = $bindable(), visible = $bindable(), ...props}: Partial<DrawerProps> = $props();
+	let {visible = $bindable(), ...props}: Partial<DrawerProps> = $props();
 
 	const widget = callWidgetFactory(createDrawer, {
 		get props() {
-			return {...props, width, height, visible};
+			return {...props, visible};
 		},
 		defaultConfig: {structure},
 		events: {
-			onWidthChange: (value: number) => {
-				width = value;
-			},
-			onHeightChange: (value: number) => {
-				height = value;
-			},
 			onVisibleChange: (event) => {
 				visible = event;
 			},
 		},
 	});
 	const {
-		directives: {backdropDirective, backdropPortalDirective, drawerDirective, drawerPortalDirective, containerDirective},
+		directives: {backdropDirective, backdropPortalDirective, drawerDirective, drawerPortalDirective, containerDirective, splitterDirective},
 		state,
 	} = widget;
 
@@ -44,6 +38,10 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 		<div use:containerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(containerDirective)}>
 			<Slot content={state.structure} props={widget} />
 		</div>
+		{#if state.resizable}
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<div use:splitterDirective tabindex="0" {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(splitterDirective)}></div>
+		{/if}
 	</div>
 {/if}
 {#if !state.backdropHidden}

package/components/drawer/Drawer.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { DrawerApi, DrawerProps } from './drawer.gen';
 declare const Drawer: import("svelte").Component<Partial<DrawerProps>, {
     api: DrawerApi;
-}, "visible" | "width" | "height">;
+}, "visible">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/components/drawer/DrawerDefaultStructure.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
-import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes} from '@agnos-ui/svelte-headless/utils/directive';
-import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
-
 	import {Slot} from '@agnos-ui/svelte-headless/slot';
 	import type {DrawerContext} from './drawer.gen';
 
 	let widget: DrawerContext = $props();
-	let {state, directives} = widget;
+	let {state} = widget;
 </script>
 
-<div class="au-drawer-header">
-	<Slot content={state.header} props={widget} />
-</div>
-<div class="au-drawer-body">
-	<Slot content={state.children} props={widget} />
+<div class="au-drawer-content">
+	<div class="au-drawer-header">
+		<Slot content={state.header} props={widget} />
+	</div>
+	<div class="au-drawer-body">
+		<Slot content={state.children} props={widget} />
+	</div>
 </div>
-{#if state.resizable}
-	<div use:directives.splitterDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(directives.splitterDirective)}></div>
-{/if}

package/components/drawer/drawer.gen.d.ts

@@ -59,6 +59,13 @@ export interface DrawerState {
      * @defaultValue `false`
      */
     resizable: boolean;
+    /**
+     * Size of the drawer in pixel once the user start interacting.
+     * It corresponds to the height or the width depending on the drawer orientation
+     *
+     * @defaultValue `null`
+     */
+    size: number | null;
     /**
      * Global template for the drawer component
      */
@@ -118,18 +125,6 @@ export interface DrawerProps {
      * @defaultValue `''`
      */
     ariaDescribedBy: string;
-    /**
-     * The width of the drawer in pixels.
-     *
-     * @defaultValue `200`
-     */
-    width: number;
-    /**
-     * The height of the drawer in pixels.
-     *
-     * @defaultValue `200`
-     */
-    height: number;
     /**
      * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable
      *
@@ -161,38 +156,54 @@ export interface DrawerProps {
      */
     onShown: () => void;
     /**
-     * An event emitted when the width is changed.
+     * An event emitted when the drawer size changes (width or height depending on the orientation).
      *
-     * Event payload is equal to the newly selected width.
+     * Event payload is equal to the newly selected width or height.
      *
      * @defaultValue
      * ```ts
      * () => {}
      * ```
      */
-    onWidthChange: (width: number) => void;
+    onSizeChange: (size: number | null) => void;
     /**
-     * An event emitted when the height is changed.
+     * Event to be triggered when the visible property changes.
      *
-     * Event payload is equal to the newly selected height.
+     * @param visible - new value of the visible propery
      *
      * @defaultValue
      * ```ts
      * () => {}
      * ```
      */
-    onHeightChange: (width: number) => void;
+    onVisibleChange: (visible: boolean) => void;
     /**
-     * Event to be triggered when the visible property changes.
+     * Event to be triggered when the minimized state changes.
      *
-     * @param visible - new value of the visible propery
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onMinimizedChange: (isMinimized: boolean) => void;
+    /**
+     * Event to be triggered when the maximized state changes.
      *
      * @defaultValue
      * ```ts
      * () => {}
      * ```
      */
-    onVisibleChange: (visible: boolean) => void;
+    onMaximizedChange: (isMaximized: boolean) => void;
+    /**
+     * Event to be triggered when the user starts or stops resizing the drawer.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onResizingChange: (isResizing: boolean) => void;
     /**
      * CSS classes to be applied on the widget main container
      *
@@ -228,6 +239,13 @@ export interface DrawerProps {
      * @defaultValue `false`
      */
     resizable: boolean;
+    /**
+     * Size of the drawer in pixel once the user start interacting.
+     * It corresponds to the height or the width depending on the drawer orientation
+     *
+     * @defaultValue `null`
+     */
+    size: number | null;
     /**
      * Global template for the drawer component
      */

package/components/slider/SliderDefaultHandle.svelte

@@ -7,7 +7,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 	let {item, directives}: SliderSlotHandleContext = $props();
 
 	let refocusElement: HTMLElement | undefined = $state(undefined);
-	let updateTimeout: NodeJS.Timeout;
+	let updateTimeout: ReturnType<typeof setTimeout>;
 
 	// Manually keep focus as scheduling goal elements are re-ordered.
 	// Svelte currently does not retain focus as elements are moved, even when keyed.

package/components/slider/SliderDefaultStructure.svelte

@@ -37,7 +37,7 @@ import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
 {/each}
 {#each state.sortedHandles as item, i (item.id)}
 	<Slot content={state.handle} props={{item, ...widget}} />
-	{#if state.showValueLabels && !state.combinedLabelDisplay}
+	{#if state.showValueLabels}
 		<div use:directives.handleLabelDisplayDirective={{index: i}} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes([directives.handleLabelDisplayDirective, {index: i}])}>
 			<Slot content={state.label} props={{value: state.values[i], ...widget}} />
 		</div>

package/generated/index.d.ts

@@ -11,6 +11,7 @@ export * from './utils/directive';
 export * from './services/siblingsInert';
 export * from './services/resizeObserver';
 export * from './services/portal';
+export * from './services/pointerdownPosition';
 export * from './services/navManager';
 export * from './services/matchMedia';
 export * from './services/intersection';

package/generated/index.js

@@ -11,6 +11,7 @@ export * from './utils/directive';
 export * from './services/siblingsInert';
 export * from './services/resizeObserver';
 export * from './services/portal';
+export * from './services/pointerdownPosition';
 export * from './services/navManager';
 export * from './services/matchMedia';
 export * from './services/intersection';

package/generated/services/pointerdownPosition.d.ts

@@ -0,0 +1 @@
+export * from '@agnos-ui/svelte-headless/services/pointerdownPosition';

package/generated/services/pointerdownPosition.js

@@ -0,0 +1 @@
+export * from '@agnos-ui/svelte-headless/services/pointerdownPosition';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/svelte-bootstrap",
 	"description": "Bootstrap-based component library for Svelte.",
-	"version": "0.10.0-next.2",
+	"version": "0.10.0-next.3",
 	"type": "module",
 	"main": "./index.js",
 	"module": "./index.js",
@@ -49,8 +49,8 @@
 		}
 	},
 	"dependencies": {
-		"@agnos-ui/core-bootstrap": "0.10.0-next.2",
-		"@agnos-ui/svelte-headless": "0.10.0-next.2"
+		"@agnos-ui/core-bootstrap": "0.10.0-next.3",
+		"@agnos-ui/svelte-headless": "0.10.0-next.3"
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^2.0.0",