@agnos-ui/svelte-bootstrap 0.3.0

package/README.md

@@ -0,0 +1,15 @@
+# @agnos-ui/svelte-bootstrap
+
+[![npm](https://img.shields.io/npm/v/@agnos-ui/svelte-bootstrap)](https://www.npmjs.com/package/@agnos-ui/svelte-bootstrap)
+
+[Bootstrap](https://getbootstrap.com/)-based widget library for [Svelte](https://svelte.dev/).
+
+## Installation
+
+```sh
+npm install @agnos-ui/svelte-bootstrap
+```
+
+## Usage
+
+Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.

package/components/accordion/Accordion.svelte

@@ -0,0 +1,29 @@
+<script>
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+import { callWidgetFactory } from "../../config";
+import { createAccordion, setAccordionApi } from "./accordion";
+export let itemVisible = void 0;
+const widget = callWidgetFactory({
+  factory: createAccordion,
+  widgetName: "accordion",
+  $$slots,
+  $$props,
+  events: {
+    onItemVisibleChange: (event) => {
+      itemVisible = event;
+    }
+  }
+});
+export const api = widget.api;
+const {
+  directives: { accordionDirective }
+} = widget;
+setAccordionApi(widget.api);
+$:
+  widget.patchChangedProps($$props);
+</script>
+
+<div use:__AgnosUISveltePreprocess__classDirective={"accordion"} use:accordionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(accordionDirective, [__AgnosUISveltePreprocess__classDirective, "accordion"])}>
+	<slot />
+</div>

package/components/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AccordionApi, AccordionProps, AccordionSlots } from './accordion';
+declare const __propDef: {
+    props: {
+        api?: AccordionApi | undefined;
+    } & Partial<AccordionProps>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: Record<string, never>;
+    } & AccordionSlots;
+};
+type AccordionProps_ = typeof __propDef.props;
+export { AccordionProps_ as AccordionProps };
+export type AccordionEvents = typeof __propDef.events;
+type AccordionSlots_ = typeof __propDef.slots;
+export { AccordionSlots_ as AccordionSlots };
+export default class Accordion extends SvelteComponentTyped<AccordionProps_, AccordionEvents, AccordionSlots_> {
+    get api(): AccordionApi;
+}

package/components/accordion/Item.svelte

@@ -0,0 +1,53 @@
+<script context="module">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+import { toSlotContextWidget } from "@agnos-ui/svelte-headless/types";
+import { Slot } from "@agnos-ui/svelte-headless/slot";
+import { callWidgetFactory } from "../../config";
+import { onMount } from "svelte";
+import ItemDefaultStructure from "./ItemDefaultStructure.svelte";
+import { getAccordionApi } from "./accordion";
+const defaultConfig = {
+  slotItemStructure: ItemDefaultStructure
+};
+</script>
+
+<script>const accordionApi = getAccordionApi();
+const { registerItem } = accordionApi;
+export let itemVisible = void 0;
+const widget = callWidgetFactory({
+  factory: registerItem,
+  $$slots,
+  $$props,
+  defaultConfig,
+  events: {
+    onItemVisibleChange: (event) => {
+      itemVisible = event;
+    }
+  }
+});
+const {
+  stores: { slotItemStructure$ },
+  directives: { accordionItemDirective },
+  state$
+} = widget;
+export const api = widget.api;
+$:
+  widget.patchChangedProps($$props);
+$:
+  slotContext = { widget: toSlotContextWidget(widget), state: $state$ };
+onMount(() => {
+  widget.api.initDone();
+});
+</script>
+
+<div use:__AgnosUISveltePreprocess__classDirective={"accordion-item"} use:accordionItemDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(accordionItemDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-item"])}>
+	<Slot slotContent={$slotItemStructure$} props={slotContext} let:component let:props>
+		<svelte:fragment slot="slot" let:props><slot name="itemStructure" {...props} /></svelte:fragment>
+		<svelte:component this={component} {...props}>
+			<svelte:fragment slot="itemBody" let:state let:widget><slot name="itemBody" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="itemHeader" let:state let:widget><slot name="itemHeader" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="itemStructure" let:state let:widget><slot name="itemStructure" {state} {widget} /></svelte:fragment>
+		</svelte:component>
+	</Slot>
+</div>

package/components/accordion/Item.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AccordionItemApi, AccordionItemProps, AccordionSlots } from './accordion';
+declare const __propDef: {
+    props: {
+        api?: AccordionItemApi | undefined;
+    } & Partial<AccordionItemProps>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: AccordionSlots;
+};
+export type ItemProps = typeof __propDef.props;
+export type ItemEvents = typeof __propDef.events;
+export type ItemSlots = typeof __propDef.slots;
+export default class Item extends SvelteComponentTyped<ItemProps, ItemEvents, ItemSlots> {
+    get api(): AccordionItemApi;
+}
+export {};

package/components/accordion/ItemDefaultStructure.svelte

@@ -0,0 +1,39 @@
+<script>
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+import { Slot } from "@agnos-ui/svelte-headless/slot";
+export let state;
+export let widget;
+const re = new RegExp("^h[1-6]$");
+$:
+  slotContext = { widget, state };
+$:
+  headingTag = re.test(state.itemHeadingTag) ? state.itemHeadingTag : "h2";
+</script>
+
+<svelte:element this={headingTag} use:__AgnosUISveltePreprocess__classDirective={"accordion-header"} use:slotContext.widget.directives.headerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(slotContext.widget.directives.headerDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-header"])}>
+	<button use:slotContext.widget.directives.buttonDirective use:__AgnosUISveltePreprocess__classDirective={"accordion-button"} {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(slotContext.widget.directives.buttonDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-button"])}>
+		<Slot slotContent={state.slotItemHeader} props={slotContext} let:component let:props>
+			<svelte:fragment slot="slot" let:props><slot name="itemHeader" {...props} /></svelte:fragment>
+			<svelte:component this={component} {...props}>
+				<svelte:fragment slot="itemBody" let:state let:widget><slot name="itemBody" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="itemHeader" let:state let:widget><slot name="itemHeader" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="itemStructure" let:state let:widget><slot name="itemStructure" {state} {widget} /></svelte:fragment>
+			</svelte:component>
+		</Slot>
+	</button>
+</svelte:element>
+{#if state.shouldBeInDOM}
+	<div use:__AgnosUISveltePreprocess__classDirective={"accordion-collapse"} use:widget.directives.bodyContainerDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.bodyContainerDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-collapse"])}>
+		<div use:__AgnosUISveltePreprocess__classDirective={"accordion-body"} use:widget.directives.bodyDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.bodyDirective, [__AgnosUISveltePreprocess__classDirective, "accordion-body"])}>
+			<Slot slotContent={state.slotItemBody} props={slotContext} let:component let:props>
+				<svelte:fragment slot="slot" let:props><slot name="itemBody" {...props} /></svelte:fragment>
+				<svelte:component this={component} {...props}>
+					<svelte:fragment slot="itemBody" let:state let:widget><slot name="itemBody" {state} {widget} /></svelte:fragment>
+					<svelte:fragment slot="itemHeader" let:state let:widget><slot name="itemHeader" {state} {widget} /></svelte:fragment>
+					<svelte:fragment slot="itemStructure" let:state let:widget><slot name="itemStructure" {state} {widget} /></svelte:fragment>
+				</svelte:component>
+			</Slot>
+		</div>
+	</div>
+{/if}

package/components/accordion/ItemDefaultStructure.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AccordionItemContext, AccordionSlots } from './accordion';
+declare const __propDef: {
+    props: AccordionItemContext;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: AccordionSlots;
+};
+export type ItemDefaultStructureProps = typeof __propDef.props;
+export type ItemDefaultStructureEvents = typeof __propDef.events;
+export type ItemDefaultStructureSlots = typeof __propDef.slots;
+export default class ItemDefaultStructure extends SvelteComponentTyped<ItemDefaultStructureProps, ItemDefaultStructureEvents, ItemDefaultStructureSlots> {
+}
+export {};

package/components/accordion/accordion.d.ts

@@ -0,0 +1,26 @@
+export * from '@agnos-ui/core-bootstrap/components/accordion';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetFactory, WidgetProps, WidgetState, WidgetPropsSlots, PropType } from '@agnos-ui/svelte-headless/types';
+import type { AccordionWidget as CoreWidget, AccordionItemWidget as CoreItemWidget, AccordionItemContext as CoreItemContext } from '@agnos-ui/core-bootstrap/components/accordion';
+export interface AccordionWidget extends AdaptWidgetSlots<CoreWidget> {
+}
+export interface AccordionProps extends WidgetProps<AccordionWidget> {
+}
+export interface AccordionState extends WidgetState<AccordionWidget> {
+}
+export interface AccordionApi extends PropType<AccordionWidget, 'api'> {
+}
+export interface AccordionItemWidget extends AdaptWidgetSlots<CoreItemWidget> {
+}
+export interface AccordionItemProps extends WidgetProps<AccordionItemWidget> {
+}
+export interface AccordionItemState extends WidgetState<AccordionItemWidget> {
+}
+export interface AccordionItemApi extends PropType<AccordionItemWidget, 'api'> {
+}
+export interface AccordionSlots extends WidgetPropsSlots<AccordionProps> {
+}
+export interface AccordionItemContext extends AdaptSlotContentProps<CoreItemContext> {
+}
+export declare const createAccordion: WidgetFactory<AccordionWidget>;
+export declare function setAccordionApi(accordionApi: AccordionApi): void;
+export declare function getAccordionApi(): AccordionApi;

package/components/accordion/accordion.js

@@ -0,0 +1,13 @@
+export * from '@agnos-ui/core-bootstrap/components/accordion';
+import { createAccordion as coreCreateAccordion } from '@agnos-ui/core-bootstrap/components/accordion';
+// factory
+export const createAccordion = coreCreateAccordion;
+// context
+import { getContext, setContext } from 'svelte';
+const contextInjectionKey = Symbol('accordion-api');
+export function setAccordionApi(accordionApi) {
+    setContext(contextInjectionKey, accordionApi);
+}
+export function getAccordionApi() {
+    return getContext(contextInjectionKey);
+}

package/components/accordion/index.d.ts

@@ -0,0 +1,4 @@
+import Accordion from './Accordion.svelte';
+import AccordionItem from './Item.svelte';
+export { Accordion, AccordionItem };
+export * from './accordion';

package/components/accordion/index.js

@@ -0,0 +1,4 @@
+import Accordion from './Accordion.svelte';
+import AccordionItem from './Item.svelte';
+export { Accordion, AccordionItem };
+export * from './accordion';

package/components/alert/Alert.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+import { Slot } from "@agnos-ui/svelte-headless/slot";
+import { createAlert } from "./alert";
+import { callWidgetFactory } from "../../config";
+import AlertDefaultStructure from "./AlertDefaultStructure.svelte";
+const defaultConfig = {
+  slotStructure: AlertDefaultStructure
+};
+</script>
+
+<script>const widget = callWidgetFactory({
+  factory: createAlert,
+  widgetName: "alert",
+  $$slots,
+  $$props,
+  defaultConfig,
+  events: {
+    onVisibleChange: (event) => {
+      visible = event;
+    }
+  }
+});
+export let visible = void 0;
+export const api = widget.api;
+const {
+  stores: { slotStructure$, hidden$ },
+  directives: { transitionDirective },
+  state$
+} = widget;
+$:
+  widget.patchChangedProps($$props);
+$:
+  slotContext = { widget, state: $state$ };
+</script>
+
+{#if !$hidden$}
+	<div
+		role="alert"
+		use:__AgnosUISveltePreprocess__classDirective={"au-alert alert alert-"+($state$.type)+" "+($state$.className)+" "+($state$.dismissible ? 'alert-dismissible' : '')}
+		use:transitionDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(transitionDirective, [__AgnosUISveltePreprocess__classDirective, "au-alert alert alert-"+($state$.type)+" "+($state$.className)+" "+($state$.dismissible ? 'alert-dismissible' : '')])}
+	>
+		<Slot slotContent={$slotStructure$} props={slotContext} let:component let:props>
+			<svelte:fragment slot="slot" let:props><slot name="structure" {...props} /></svelte:fragment>
+			<svelte:component this={component} {...props}>
+				<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+			</svelte:component>
+		</Slot>
+	</div>
+{/if}

package/components/alert/Alert.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AlertApi, type AlertProps, type AlertSlots } from './alert';
+declare const __propDef: {
+    props: {
+        api?: AlertApi | undefined;
+    } & Partial<AlertProps>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: AlertSlots;
+};
+type AlertProps_ = typeof __propDef.props;
+export { AlertProps_ as AlertProps };
+export type AlertEvents = typeof __propDef.events;
+type AlertSlots_ = typeof __propDef.slots;
+export { AlertSlots_ as AlertSlots };
+export default class Alert extends SvelteComponentTyped<AlertProps_, AlertEvents, AlertSlots_> {
+    get api(): AlertApi;
+}

package/components/alert/AlertDefaultStructure.svelte

@@ -0,0 +1,19 @@
+<script>import { Slot } from "@agnos-ui/svelte-headless/slot";
+export let state;
+export let widget;
+$:
+  slotContext = { widget, state };
+</script>
+
+<div class="alert-body">
+	<Slot slotContent={state.slotDefault} props={slotContext} let:component let:props>
+		<svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
+		<svelte:component this={component} {...props}>
+			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+		</svelte:component>
+	</Slot>
+</div>
+{#if state.dismissible}
+	<button type="button" class="btn-close" on:click={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel} />
+{/if}

package/components/alert/AlertDefaultStructure.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AlertContext, AlertSlots } from './alert';
+declare const __propDef: {
+    props: AlertContext;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: AlertSlots;
+};
+export type AlertDefaultStructureProps = typeof __propDef.props;
+export type AlertDefaultStructureEvents = typeof __propDef.events;
+export type AlertDefaultStructureSlots = typeof __propDef.slots;
+export default class AlertDefaultStructure extends SvelteComponentTyped<AlertDefaultStructureProps, AlertDefaultStructureEvents, AlertDefaultStructureSlots> {
+}
+export {};

package/components/alert/alert.d.ts

@@ -0,0 +1,16 @@
+export * from '@agnos-ui/core-bootstrap/components/alert';
+import type { AdaptWidgetSlots, WidgetPropsSlots, WidgetFactory, WidgetProps, WidgetState, PropType, AdaptSlotContentProps } from '@agnos-ui/svelte-headless/types';
+import type { AlertWidget as CoreWidget, AlertContext as CoreContext } from '@agnos-ui/core-bootstrap/components/alert';
+export interface AlertWidget extends AdaptWidgetSlots<CoreWidget> {
+}
+export interface AlertProps extends WidgetProps<AlertWidget> {
+}
+export interface AlertState extends WidgetState<AlertWidget> {
+}
+export interface AlertApi extends PropType<AlertWidget, 'api'> {
+}
+export interface AlertSlots extends WidgetPropsSlots<AlertProps> {
+}
+export interface AlertContext extends AdaptSlotContentProps<CoreContext> {
+}
+export declare const createAlert: WidgetFactory<AlertWidget>;

package/components/alert/alert.js

@@ -0,0 +1,4 @@
+export * from '@agnos-ui/core-bootstrap/components/alert';
+import { createAlert as coreCreateAlert } from '@agnos-ui/core-bootstrap/components/alert';
+// factory
+export const createAlert = coreCreateAlert;

package/components/alert/index.d.ts

@@ -0,0 +1,3 @@
+import Alert from './Alert.svelte';
+export * from './alert';
+export { Alert };

package/components/alert/index.js

@@ -0,0 +1,3 @@
+import Alert from './Alert.svelte';
+export * from './alert';
+export { Alert };

package/components/modal/Modal.svelte

@@ -0,0 +1,62 @@
+<script context="module">
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+import { toSlotContextWidget } from "@agnos-ui/svelte-headless/types";
+import { createModal } from "./modal";
+import { Slot } from "@agnos-ui/svelte-headless/slot";
+import { callWidgetFactory } from "../../config";
+import ModalDefaultHeader from "./ModalDefaultHeader.svelte";
+import ModalDefaultStructure from "./ModalDefaultStructure.svelte";
+const defaultConfig = {
+  slotStructure: ModalDefaultStructure,
+  slotHeader: ModalDefaultHeader
+};
+</script>
+
+<script>export let visible = void 0;
+const widget = callWidgetFactory({
+  factory: createModal,
+  widgetName: "modal",
+  $$slots,
+  $$props,
+  defaultConfig,
+  events: {
+    onVisibleChange: (event) => {
+      visible = event;
+    }
+  }
+});
+export const api = widget.api;
+const {
+  stores: { backdropHidden$, hidden$, slotStructure$ },
+  directives: { backdropDirective, backdropPortalDirective, modalDirective, modalPortalDirective },
+  state$
+} = widget;
+$:
+  widget.patchChangedProps($$props);
+$:
+  slotContext = { widget: toSlotContextWidget(widget), state: $state$ };
+</script>
+
+{#if !$backdropHidden$}
+	<div use:__AgnosUISveltePreprocess__classDirective={"modal-backdrop"} use:backdropPortalDirective use:backdropDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(backdropPortalDirective, backdropDirective, [__AgnosUISveltePreprocess__classDirective, "modal-backdrop"])} />
+{/if}
+
+{#if !$hidden$}
+	<div use:__AgnosUISveltePreprocess__classDirective={"modal d-block"} use:modalPortalDirective use:modalDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(modalPortalDirective, modalDirective, [__AgnosUISveltePreprocess__classDirective, "modal d-block"])}>
+		<div class="modal-dialog {$state$.fullscreen ? 'modal-fullscreen' : ''}">
+			<div class="modal-content">
+				<Slot slotContent={$slotStructure$} props={slotContext} let:component let:props>
+					<svelte:fragment slot="slot" let:props><slot name="structure" {...props} /></svelte:fragment>
+					<svelte:component this={component} {...props}>
+						<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+						<svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
+						<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
+						<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+						<svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
+					</svelte:component>
+				</Slot>
+			</div>
+		</div>
+	</div>
+{/if}

package/components/modal/Modal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ModalProps, ModalSlots, ModalApi } from './modal';
+declare class __sveltets_Render<Data> {
+    props(): {
+        api?: ModalApi<Data> | undefined;
+    } & Partial<ModalProps<Data>>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): ModalSlots<Data>;
+}
+export type ModalProps_<Data> = ReturnType<__sveltets_Render<Data>['props']>;
+export type ModalEvents<Data> = ReturnType<__sveltets_Render<Data>['events']>;
+export type ModalSlots_<Data> = ReturnType<__sveltets_Render<Data>['slots']>;
+export default class Modal<Data> extends SvelteComponentTyped<ModalProps_<Data>, ModalEvents<Data>, ModalSlots_<Data>> {
+    get api(): ModalApi<Data>;
+}
+export {};

package/components/modal/ModalDefaultHeader.svelte

@@ -0,0 +1,25 @@
+<script>
+import {ssrAttributes as __AgnosUISveltePreprocess__ssrAttributes, classDirective as __AgnosUISveltePreprocess__classDirective} from '@agnos-ui/svelte-headless/utils/directive';
+import {BROWSER as __AgnosUISveltePreprocess__BROWSER} from 'esm-env';
+import { Slot } from "@agnos-ui/svelte-headless/slot";
+export let state;
+export let widget;
+$:
+  slotContext = { widget, state };
+</script>
+
+<h5 class="modal-title">
+	<Slot slotContent={state.slotTitle} props={slotContext} let:component let:props>
+		<svelte:fragment slot="slot" let:props><slot name="title" {...props} /></svelte:fragment>
+		<svelte:component this={component} {...props}>
+			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
+		</svelte:component>
+	</Slot>
+</h5>
+{#if state.closeButton}
+	<button use:__AgnosUISveltePreprocess__classDirective={"btn-close"} use:widget.directives.closeButtonDirective {...__AgnosUISveltePreprocess__BROWSER ? {} : __AgnosUISveltePreprocess__ssrAttributes(widget.directives.closeButtonDirective, [__AgnosUISveltePreprocess__classDirective, "btn-close"])} />
+{/if}

package/components/modal/ModalDefaultHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ModalContext, ModalSlots } from './modal';
+declare class __sveltets_Render<Data> {
+    props(): ModalContext<Data>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): ModalSlots<Data>;
+}
+export type ModalDefaultHeaderProps<Data> = ReturnType<__sveltets_Render<Data>['props']>;
+export type ModalDefaultHeaderEvents<Data> = ReturnType<__sveltets_Render<Data>['events']>;
+export type ModalDefaultHeaderSlots<Data> = ReturnType<__sveltets_Render<Data>['slots']>;
+export default class ModalDefaultHeader<Data> extends SvelteComponentTyped<ModalDefaultHeaderProps<Data>, ModalDefaultHeaderEvents<Data>, ModalDefaultHeaderSlots<Data>> {
+}
+export {};

package/components/modal/ModalDefaultStructure.svelte

@@ -0,0 +1,48 @@
+<script>import { Slot } from "@agnos-ui/svelte-headless/slot";
+export let state;
+export let widget;
+$:
+  slotContext = { widget, state };
+</script>
+
+{#if state.slotTitle}
+	<div class="modal-header">
+		<Slot slotContent={state.slotHeader} props={slotContext} let:component let:props>
+			<svelte:fragment slot="slot" let:props><slot name="header" {...props} /></svelte:fragment>
+			<svelte:component this={component} {...props}>
+				<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
+			</svelte:component>
+		</Slot>
+	</div>
+{/if}
+
+<div class="modal-body">
+	<Slot slotContent={state.slotDefault} props={slotContext} let:component let:props>
+		<svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
+		<svelte:component this={component} {...props}>
+			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+			<svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
+		</svelte:component>
+	</Slot>
+</div>
+{#if state.slotFooter}
+	<div class="modal-footer">
+		<Slot slotContent={state.slotFooter} props={slotContext} let:component let:props>
+			<svelte:fragment slot="slot" let:props><slot name="footer" {...props} /></svelte:fragment>
+			<svelte:component this={component} {...props}>
+				<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="footer" let:state let:widget><slot name="footer" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="header" let:state let:widget><slot name="header" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
+				<svelte:fragment slot="title" let:state let:widget><slot name="title" {state} {widget} /></svelte:fragment>
+			</svelte:component>
+		</Slot>
+	</div>
+{/if}

package/components/modal/ModalDefaultStructure.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ModalContext, ModalSlots } from './modal';
+declare class __sveltets_Render<Data> {
+    props(): ModalContext<Data>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): ModalSlots<Data>;
+}
+export type ModalDefaultStructureProps<Data> = ReturnType<__sveltets_Render<Data>['props']>;
+export type ModalDefaultStructureEvents<Data> = ReturnType<__sveltets_Render<Data>['events']>;
+export type ModalDefaultStructureSlots<Data> = ReturnType<__sveltets_Render<Data>['slots']>;
+export default class ModalDefaultStructure<Data> extends SvelteComponentTyped<ModalDefaultStructureProps<Data>, ModalDefaultStructureEvents<Data>, ModalDefaultStructureSlots<Data>> {
+}
+export {};

package/components/modal/index.d.ts

@@ -0,0 +1,4 @@
+import Modal from './Modal.svelte';
+export * from './modal';
+export * from './modalService';
+export { Modal };

package/components/modal/index.js

@@ -0,0 +1,4 @@
+import Modal from './Modal.svelte';
+export * from './modal';
+export * from './modalService';
+export { Modal };

package/components/modal/modal.d.ts

@@ -0,0 +1,16 @@
+export * from '@agnos-ui/core-bootstrap/components/modal';
+import type { AdaptSlotContentProps, AdaptWidgetSlots, WidgetPropsSlots, PropsConfig, WidgetProps, WidgetState, PropType } from '@agnos-ui/svelte-headless/types';
+import type { ModalWidget as CoreWidget, ModalContext as CoreContext } from '@agnos-ui/core-bootstrap/components/modal';
+export interface ModalWidget<Data> extends AdaptWidgetSlots<CoreWidget<Data>> {
+}
+export interface ModalProps<Data> extends WidgetProps<ModalWidget<Data>> {
+}
+export interface ModalState<Data> extends WidgetState<ModalWidget<Data>> {
+}
+export interface ModalApi<Data> extends PropType<ModalWidget<Data>, 'api'> {
+}
+export interface ModalSlots<Data> extends WidgetPropsSlots<ModalProps<Data>> {
+}
+export interface ModalContext<Data> extends AdaptSlotContentProps<CoreContext<Data>> {
+}
+export declare const createModal: <Data>(propsConfig?: PropsConfig<ModalProps<Data>>) => ModalWidget<Data>;

package/components/modal/modal.js

@@ -0,0 +1,4 @@
+export * from '@agnos-ui/core-bootstrap/components/modal';
+import { createModal as coreCreateModal } from '@agnos-ui/core-bootstrap/components/modal';
+// factory
+export const createModal = coreCreateModal;

package/components/modal/modalService.d.ts

@@ -0,0 +1,4 @@
+import type { ModalProps } from './modal';
+export declare function openModal<Data>(options: Partial<ModalProps<Data>>, { context }?: {
+    context?: Map<any, any>;
+}): Promise<any>;