@agnos-ui/angular-headless 0.4.3 → 0.5.0-next.0

package/fesm2022/agnos-ui-angular-headless.mjs

@@ -20,7 +20,6 @@ export * from '@agnos-ui/core/utils/stores';
 import { multiDirective } from '@agnos-ui/core/utils/directive';
 export * from '@agnos-ui/core/utils/directive';
 import { isPlatformServer } from '@angular/common';
-import { toSlotContextWidget } from '@agnos-ui/core/types';
 export * from '@agnos-ui/core/types';
 import { createWidgetsConfig } from '@agnos-ui/core/config';
 export * from '@agnos-ui/core/config';
@@ -48,6 +47,10 @@ const createObjectWrapper = (wrap) => (object) => {
     return res;
 };
 const createReturnValueWrapper = (wrapReturnValue, wrapResult) => (fn) => wrapResult(typeof fn === 'function' ? ((...args) => wrapReturnValue(fn(...args))) : fn);
+/**
+ * A utility class that provides methods to run functions inside or outside of Angular's NgZone.
+ * This can be useful for optimizing performance by avoiding unnecessary change detection cycles.
+ */
 class ZoneWrapper {
     constructor() {
         this.#zone = inject(NgZone);
@@ -61,7 +64,7 @@ class ZoneWrapper {
                     if (!this.#runPlanned) {
                         this.#runPlanned = true;
                         void (async () => {
-                            await 0;
+                            await Promise.resolve();
                             this.#runPlanned = false;
                             if (this.#runNeeded) {
                                 this.ngZoneRun(noop);
@@ -96,7 +99,7 @@ class ZoneWrapper {
         this.#runNeeded = false;
         return this.#zone.run(fn);
     }
-    static { this.ɵfac = function ZoneWrapper_Factory(t) { return new (t || ZoneWrapper)(); }; }
+    static { this.ɵfac = function ZoneWrapper_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ZoneWrapper)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ZoneWrapper, factory: ZoneWrapper.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ZoneWrapper, [{
@@ -107,13 +110,17 @@ class ZoneWrapper {
     }], null, null); })();
 
 /**
- * Convert a tansu readable signal into an Angular signal.
+ * Converts a Tansu `ReadableSignal` to an Angular `Signal`.
  *
- * @param tansuSignal - a tansu readable signal
- * @returns an angular signal
+ * This function wraps the provided Tansu signal in an Angular signal, ensuring that updates
+ * are properly handled within Angular's zone. It subscribes to the Tansu signal and updates
+ * the Angular signal with the received values. The equality function for the Angular signal
+ * is set to always return false, ensuring that every new value from the Tansu signal triggers
+ * an update.
  *
- * @remarks
- * Note that as it uses Angular's `inject`, this can only be called at component construction time.
+ * @template T - The type of the value emitted by the signals.
+ * @param tansuSignal - The Tansu signal to convert.
+ * @returns - The resulting Angular signal.
  */
 const toAngularSignal = (tansuSignal) => {
     const zoneWrapper = inject(ZoneWrapper);
@@ -129,11 +136,19 @@ const toAngularSignal = (tansuSignal) => {
 };
 
 /**
- * Set up an agnos-ui directive as an angular host directive.
+ * A utility function to manage the lifecycle of a directive for a host element.
+ *
+ * This function handles the creation, updating, and destruction of a directive instance
+ * associated with a host element. It ensures that the directive is called appropriately
+ * based on the platform (server or client) and manages the directive's lifecycle within
+ * the Angular injection context.
  *
- * @param directive - the directive
- * @param params - the params to pass to the directive
- * @returns the update function to change the directive or params
+ * @template T - The type of parameters that the directive accepts.
+ *
+ * @param [directive] - The directive to be applied to the host element.
+ * @param [params] - The parameters to be passed to the directive.
+ *
+ * @returns An object containing an `update` function to update the directive and its parameters.
  */
 const useDirectiveForHost = (directive, params) => {
     const injector = inject(Injector);
@@ -179,15 +194,23 @@ const useDirectiveForHost = (directive, params) => {
     callDirective();
     return { update };
 };
+/**
+ * A directive that allows the use of another directive with optional parameters.
+ *
+ * @template T - The type of the parameter that can be passed to the directive.
+ *
+ * @remarks
+ * This directive uses a private instance of {@link useDirectiveForHost} to manage the directive and its parameter.
+ */
 class UseDirective {
     #useDirective = useDirectiveForHost();
-    /** @inheritdoc */
+    /** @internal */
     ngOnChanges() {
         const use = this.use;
         const [directive, param] = Array.isArray(use) ? use : [use];
         this.#useDirective.update(directive, param);
     }
-    static { this.ɵfac = function UseDirective_Factory(t) { return new (t || UseDirective)(); }; }
+    static { this.ɵfac = function UseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UseDirective)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: UseDirective, selectors: [["", "auUse", ""]], inputs: { use: [0, "auUse", "use"] }, standalone: true, features: [i0.ɵɵNgOnChangesFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UseDirective, [{
@@ -200,13 +223,18 @@ class UseDirective {
             type: Input,
             args: ['auUse']
         }] }); })();
+/**
+ * A directive that allows the use of multiple directives on a host element.
+ *
+ * @template T - A tuple type representing the directives and their optional parameters.
+ */
 class UseMultiDirective {
     #useDirective = useDirectiveForHost();
-    /** @inheritdoc */
+    /** @internal */
     ngOnChanges() {
         this.#useDirective.update(multiDirective, this.useMulti);
     }
-    static { this.ɵfac = function UseMultiDirective_Factory(t) { return new (t || UseMultiDirective)(); }; }
+    static { this.ɵfac = function UseMultiDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UseMultiDirective)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: UseMultiDirective, selectors: [["", "auUseMulti", ""]], inputs: { useMulti: [0, "auUseMulti", "useMulti"] }, standalone: true, features: [i0.ɵɵNgOnChangesFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UseMultiDirective, [{
@@ -220,21 +248,38 @@ class UseMultiDirective {
             args: [{ alias: 'auUseMulti', required: true }]
         }] }); })();
 
+/**
+ * Represents a template for a component with specified properties.
+ *
+ * @template Props - The type of properties that the template accepts.
+ * @template K - The key in the template object that maps to the template reference.
+ * @template T - An object type where each key of type K maps to a TemplateRef of Props.
+ *
+ * @param component - The component type that contains the template.
+ * @param templateProp - The key in the component that maps to the template reference.
+ */
 class ComponentTemplate {
     constructor(component, templateProp) {
         this.component = component;
         this.templateProp = templateProp;
     }
 }
+/**
+ * A directive representing a slot component that can be used to manage the state and context of a widget.
+ *
+ * @template W - The type of the widget that this slot component manages.
+ */
 class SlotComponent {
-    static { this.ɵfac = function SlotComponent_Factory(t) { return new (t || SlotComponent)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SlotComponent, inputs: { state: "state", widget: "widget" } }); }
+    static { this.ɵfac = function SlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SlotComponent)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SlotComponent, inputs: { state: "state", api: "api", directives: "directives" } }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SlotComponent, [{
         type: Directive
     }], null, { state: [{
             type: Input
-        }], widget: [{
+        }], api: [{
+            type: Input
+        }], directives: [{
             type: Input
         }] }); })();
 
@@ -268,18 +313,25 @@ const createPatchSlots = (set) => {
  * @param parameter.widgetConfig - the config of the widget, overriding the defaultConfig
  * @param parameter.events - the events of the widget
  * @param parameter.afterInit - a callback to call after successful setup of the widget
+ * @param parameter.slotTemplates - a function to provide all slot templates using child queries
+ * @param parameter.slotChildren - a function to provide the default children slot using a view query
  * @returns the widget
  */
-const callWidgetFactoryWithConfig = ({ factory, defaultConfig, widgetConfig, events, afterInit, }) => {
+const callWidgetFactoryWithConfig = ({ factory, defaultConfig, widgetConfig, events, afterInit, slotTemplates, slotChildren, }) => {
     const injector = inject(Injector);
     const slots$ = writable({});
     const props = {};
     let initDone;
+    const patchSlots = createPatchSlots(slots$.set);
     const res = {
         initialized: new Promise((resolve) => {
             initDone = resolve;
         }),
-        patchSlots: createPatchSlots(slots$.set),
+        updateSlots: () => {
+            if (slotTemplates) {
+                patchSlots(slotTemplates());
+            }
+        },
         patch(newProps) {
             // temporary function replaced in ngInit
             Object.assign(props, newProps);
@@ -291,21 +343,22 @@ const callWidgetFactoryWithConfig = ({ factory, defaultConfig, widgetConfig, eve
                 const defaultConfig$ = toReadableStore(defaultConfig);
                 events = zoneWrapper.insideNgZoneWrapFunctionsObject(events);
                 const widget = factory({
-                    config: computed(() => ({ ...defaultConfig$(), ...widgetConfig?.(), ...slots$(), ...events })),
+                    config: computed(() => ({
+                        ...defaultConfig$(),
+                        children: slotChildren?.(),
+                        ...widgetConfig?.(),
+                        ...slots$(),
+                        ...events,
+                    })),
                     props,
                 });
-                const wrappedWidget = {
-                    ...widget,
+                Object.assign(res, {
                     patch: zoneWrapper.outsideNgZone(widget.patch),
                     directives: zoneWrapper.outsideNgZoneWrapDirectivesObject(widget.directives),
-                    actions: zoneWrapper.outsideNgZoneWrapFunctionsObject(widget.actions),
                     api: zoneWrapper.outsideNgZoneWrapFunctionsObject(widget.api),
-                };
-                Object.assign(res, wrappedWidget, {
-                    widget: toSlotContextWidget(wrappedWidget),
-                    ngState: toAngularSignal(wrappedWidget.state$),
+                    state: Object.fromEntries(Object.entries(widget.stores).map(([key, val]) => [key.slice(0, -1), toAngularSignal(val)])),
                 });
-                afterInit?.();
+                afterInit?.(res);
                 initDone();
             });
         },
@@ -321,36 +374,65 @@ function patchSimpleChanges(patchFn, changes) {
     }
     patchFn(obj);
 }
+/**
+ * An abstract base class for widget directives, providing common functionality
+ * for Angular components that interact with widgets.
+ *
+ * @template W - The type of the widget.
+ */
 class BaseWidgetDirective {
+    constructor(_widget) {
+        this._widget = _widget;
+    }
+    /**
+     * Retrieves the widget api
+     * @returns the widget api
+     */
     get api() {
         return this._widget.api;
     }
+    /**
+     * Retrieves the widget state as an Angular {@link https://angular.dev/api/core/Signal | Signal}
+     * @returns the widget state
+     */
     get state() {
-        return this._widget.ngState;
+        return this._widget.state;
     }
-    get widget() {
-        return this._widget.widget;
+    /**
+     * Retrieves the widget directives
+     * @returns the widget directives
+     */
+    get directives() {
+        return this._widget.directives;
     }
-    /** @inheritdoc */
+    /**
+     * @inheritdoc
+     * @internal
+     */
     ngOnChanges(changes) {
         patchSimpleChanges(this._widget.patch, changes);
     }
-    /** @inheritdoc */
+    /** @internal */
     ngOnInit() {
         this._widget.ngInit();
     }
-    static { this.ɵfac = function BaseWidgetDirective_Factory(t) { return new (t || BaseWidgetDirective)(); }; }
+    /** @internal */
+    ngAfterContentChecked() {
+        this._widget.updateSlots();
+    }
+    static { this.ɵfac = function BaseWidgetDirective_Factory(__ngFactoryType__) { i0.ɵɵinvalidFactory(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseWidgetDirective, features: [i0.ɵɵNgOnChangesFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseWidgetDirective, [{
         type: Directive
-    }], null, null); })();
+    }], () => [{ type: undefined }], null); })();
 
 /**
  * A factory to create the utilities to allow widgets to be context-aware.
  *
  * It can be used when extending the core and creating new widgets.
  *
+ * @template Config - The type of the widgets configuration object.
  * @param widgetsConfigInjectionToken - the widgets config injection token
  * @returns the utilities to create / manage widgets and contexts
  */
@@ -436,16 +518,39 @@ const widgetsConfigFactory = (widgetsConfigInjectionToken = new InjectionToken('
         }
         return widgetsConfig;
     };
+    /**
+     * Injects the configuration for a specific widget.
+     *
+     * @template N - The key of the widget configuration in the `Config` type.
+     * @param widgetName - The name of the widget whose configuration is to be injected.
+     * @returns A `ReadableSignal` that provides a partial configuration of the specified widget or `undefined` if the configuration is not available.
+     */
     const injectWidgetConfig = (widgetName) => {
         const widgetsConfig = inject(widgetsConfigInjectionToken, { optional: true });
         return computed(() => widgetsConfig?.()[widgetName]);
     };
-    const callWidgetFactory = ({ factory, widgetName = null, defaultConfig = {}, events, afterInit, }) => callWidgetFactoryWithConfig({
+    /**
+     * Creates and initializes a widget using the provided factory and configuration options.
+     *
+     * @template W - The type of the widget.
+     * @param params - The parameters for creating the widget.
+     * @param params.factory - The factory function to create the widget.
+     * @param params.widgetName - The name of the widget configuration to inject, if any.
+     * @param params.defaultConfig - The default configuration for the widget.
+     * @param params.events - The event handlers for the widget.
+     * @param params.slotTemplates - A function that returns the slot templates for the widget.
+     * @param params.slotChildren - A function that returns the slot children for the widget.
+     * @param params.afterInit - A callback function to be called after the widget is initialized.
+     * @returns The initialized widget.
+     */
+    const callWidgetFactory = ({ factory, widgetName = null, defaultConfig = {}, events, afterInit, slotTemplates, slotChildren, }) => callWidgetFactoryWithConfig({
         factory,
         widgetConfig: widgetName ? injectWidgetConfig(widgetName) : null,
         defaultConfig,
         events,
         afterInit,
+        slotTemplates: slotTemplates,
+        slotChildren,
     });
     return {
         /**
@@ -502,12 +607,12 @@ class SlotHandler {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    slotChange(slot, props) { }
-    propsChange(slot, props) { }
+    slotChange(_slot, _props) { }
+    propsChange(_slot, _props) { }
     destroy() { }
 }
 class StringSlotComponent {
-    static { this.ɵfac = function StringSlotComponent_Factory(t) { return new (t || StringSlotComponent)(); }; }
+    static { this.ɵfac = function StringSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StringSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StringSlotComponent, selectors: [["ng-component"]], viewQuery: function StringSlotComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7);
         } if (rf & 2) {
@@ -526,7 +631,7 @@ class StringSlotComponent {
             type: ViewChild,
             args: ['text', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StringSlotComponent, { className: "StringSlotComponent", filePath: "slot.directive.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StringSlotComponent, { className: "StringSlotComponent", filePath: "slot.directive.ts", lineNumber: 27 }); })();
 const stringSlotComponentTemplate = new ComponentTemplate(StringSlotComponent, 'text');
 class StringSlotHandler extends SlotHandler {
     #templateRefSlotHandler = new ComponentTemplateSlotHandler(this.viewContainerRef);
@@ -575,7 +680,7 @@ class ComponentSlotHandler extends SlotHandler {
             oldProperties?.delete(property);
         }
     }
-    propsChange(slot, props) {
+    propsChange(_slot, props) {
         const oldProperties = new Set(this.#properties);
         this.#applyProperties(props, oldProperties);
         const componentRef = this.#componentRef;
@@ -599,7 +704,7 @@ class TemplateRefSlotHandler extends SlotHandler {
         this.#props = props;
         this.#viewRef = this.viewContainerRef.createEmbeddedView(slot, props);
     }
-    propsChange(slot, props) {
+    propsChange(_slot, props) {
         if (this.#viewRef) {
             const templateProps = this.#props;
             const oldProperties = new Set(Object.keys(templateProps));
@@ -632,7 +737,7 @@ class ComponentTemplateSlotHandler extends SlotHandler {
         this.#templateRef = this.#componentRef.instance[slot.templateProp];
         this.#templateSlotHandler.slotChange(this.#templateRef, props);
     }
-    propsChange(slot, props) {
+    propsChange(_slot, props) {
         this.#templateSlotHandler.propsChange(this.#templateRef, props);
     }
     destroy() {
@@ -664,11 +769,23 @@ const getSlotType = (value) => {
     }
     return undefined;
 };
+/**
+ * A directive that manages slot content and its properties.
+ *
+ * @template Props - A record type representing the properties for the slot.
+ *
+ * @remarks
+ * This directive handles changes to the slot content and its properties,
+ * and manages the lifecycle of the slot handler.
+ */
 class SlotDirective {
     constructor() {
         this._viewContainerRef = inject(ViewContainerRef);
     }
-    /** @inheritdoc */
+    /**
+     * @param changes SimpleChanges from Angular
+     * @internal
+     */
     ngOnChanges(changes) {
         const slotChange = changes['slot'];
         const propsChange = changes['props'];
@@ -686,12 +803,12 @@ class SlotDirective {
             this._slotHandler?.propsChange(slot, this.props);
         }
     }
-    /** @inheritdoc */
+    /** @internal */
     ngOnDestroy() {
         this._slotHandler?.destroy();
         this._slotHandler = undefined;
     }
-    static { this.ɵfac = function SlotDirective_Factory(t) { return new (t || SlotDirective)(); }; }
+    static { this.ɵfac = function SlotDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SlotDirective)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SlotDirective, selectors: [["", "auSlot", ""]], inputs: { slot: [0, "auSlot", "slot"], props: [0, "auSlotProps", "props"] }, standalone: true, features: [i0.ɵɵNgOnChangesFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SlotDirective, [{
@@ -707,28 +824,6 @@ class SlotDirective {
             type: Input,
             args: [{ alias: 'auSlotProps', required: true }]
         }] }); })();
-/**
- * Directive that allows to pass the templateRef associated to a ng-content to a store.
- * The input of the directive is a {@link WritableSignal}<{children: {@link SlotContent}<T>}>.
- */
-class ContentAsSlotDirective {
-    constructor() {
-        this.templateRef = inject((TemplateRef));
-    }
-    /** @inheritdoc */
-    ngOnInit() {
-        this.auContentAsSlot.update((value) => ({ ...value, children: this.templateRef }));
-    }
-    static { this.ɵfac = function ContentAsSlotDirective_Factory(t) { return new (t || ContentAsSlotDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ContentAsSlotDirective, selectors: [["", "auContentAsSlot", ""]], inputs: { auContentAsSlot: "auContentAsSlot" }, standalone: true }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentAsSlotDirective, [{
-        type: Directive,
-        args: [{ selector: '[auContentAsSlot]', standalone: true }]
-    }], null, { auContentAsSlot: [{
-            type: Input,
-            args: [{ alias: 'auContentAsSlot', required: true }]
-        }] }); })();
 
 /*
  * Public API Surface of @agnos-ui/angular-headless
@@ -738,5 +833,5 @@ class ContentAsSlotDirective {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseWidgetDirective, ComponentTemplate, ContentAsSlotDirective, SlotComponent, SlotDirective, UseDirective, UseMultiDirective, ZoneWrapper, auBooleanAttribute, auNumberAttribute, callWidgetFactory, callWidgetFactoryWithConfig, injectWidgetConfig, injectWidgetsConfig, provideWidgetsConfig, toAngularSignal, useDirectiveForHost, widgetsConfigFactory, widgetsConfigInjectionToken };
+export { BaseWidgetDirective, ComponentTemplate, SlotComponent, SlotDirective, UseDirective, UseMultiDirective, ZoneWrapper, auBooleanAttribute, auNumberAttribute, callWidgetFactory, callWidgetFactoryWithConfig, injectWidgetConfig, injectWidgetsConfig, provideWidgetsConfig, toAngularSignal, useDirectiveForHost, widgetsConfigFactory, widgetsConfigInjectionToken };
 //# sourceMappingURL=agnos-ui-angular-headless.mjs.map