@agnos-ui/angular-headless 0.8.1 → 0.9.0-next.0

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

@@ -13,18 +13,19 @@ export * from '@agnos-ui/core/services/transitions/cssTransitions';
 export * from '@agnos-ui/core/services/transitions/collapse';
 export * from '@agnos-ui/core/services/transitions/baseTransitions';
 export * from '@agnos-ui/core/utils/writables';
+import { writable, computed } from '@amadeus-it-group/tansu';
 import * as i0 from '@angular/core';
-import { inject, NgZone, Injectable, signal, DestroyRef, Injector, ElementRef, PLATFORM_ID, runInInjectionContext, afterNextRender, input, Directive, computed, InjectionToken, SkipSelf, Optional, booleanAttribute, numberAttribute, viewChild, ChangeDetectionStrategy, Component, createComponent, EnvironmentInjector, TemplateRef, reflectComponentType, ViewContainerRef } from '@angular/core';
+import { inject, NgZone, Injectable, signal, DestroyRef, Injector, runInInjectionContext, Directive, ElementRef, PLATFORM_ID, afterNextRender, input, computed as computed$1, InjectionToken, SkipSelf, Optional, booleanAttribute, numberAttribute, viewChild, ChangeDetectionStrategy, Component, createComponent, EnvironmentInjector, TemplateRef, reflectComponentType, ViewContainerRef } from '@angular/core';
 import { toReadableStore } from '@agnos-ui/core/utils/stores';
 export * from '@agnos-ui/core/utils/stores';
 export * from '@agnos-ui/core/utils/func';
 import { multiDirective } from '@agnos-ui/core/utils/directive';
 export * from '@agnos-ui/core/utils/directive';
 import { isPlatformServer } from '@angular/common';
+import { FACTORY_WIDGET_NAME } from '@agnos-ui/core/types';
 export * from '@agnos-ui/core/types';
 import { createWidgetsConfig } from '@agnos-ui/core/config';
 export * from '@agnos-ui/core/config';
-import { writable, computed as computed$1 } from '@amadeus-it-group/tansu';
 export * from '@agnos-ui/core/components/tree';
 import { Toaster } from '@agnos-ui/core/components/toast';
 export * from '@agnos-ui/core/components/toast';
@@ -165,6 +166,154 @@ const toAngularWritableSignal = (tansuSignal) => {
     return res;
 };
 
+const createPatchSlots = (set) => {
+    let lastValue = {};
+    return (object) => {
+        const newValue = {};
+        let hasChange = false;
+        for (const key of Object.keys(object)) {
+            const objectKey = object[key];
+            if (objectKey != null) {
+                // only use defined slots
+                newValue[key] = objectKey;
+            }
+            if (objectKey != lastValue[key]) {
+                hasChange = true;
+            }
+        }
+        if (hasChange) {
+            lastValue = newValue;
+            set(newValue);
+        }
+    };
+};
+/**
+ * Call a widget factory using provided configs.
+ *
+ * The resulting widget can be easily hooked into the lifecycle of an Angular component through {@link BaseWidgetDirective}.
+ *
+ * @param factory - the widget factory to call
+ * @param options - the options
+ * @param options.defaultConfig - the default config of the widget
+ * @param options.widgetConfig - the config of the widget, overriding the defaultConfig
+ * @param options.events - the events of the widget
+ * @param options.afterInit - a callback to call after successful setup of the widget
+ * @param options.slotTemplates - a function to provide all slot templates using child queries
+ * @param options.slotChildren - a function to provide the default children slot using a view query
+ * @returns the widget
+ */
+const callWidgetFactoryWithConfig = (factory, options) => {
+    let { defaultConfig, widgetConfig, events, afterInit, slotTemplates, slotChildren } = options ?? {};
+    const injector = inject(Injector);
+    const slots$ = writable({});
+    const props = {};
+    let initDone;
+    const patchSlots = createPatchSlots(slots$.set);
+    const res = {
+        initialized: new Promise((resolve) => {
+            initDone = resolve;
+        }),
+        updateSlots: () => {
+            if (slotTemplates) {
+                patchSlots(slotTemplates());
+            }
+        },
+        patch(newProps) {
+            // temporary function replaced in ngInit
+            Object.assign(props, newProps);
+        },
+        ngInit() {
+            runInInjectionContext(injector, () => {
+                const zoneWrapper = inject(ZoneWrapper);
+                factory = zoneWrapper.outsideNgZone(factory);
+                const defaultConfig$ = toReadableStore(defaultConfig);
+                events = zoneWrapper.insideNgZoneWrapFunctionsObject(events);
+                const widget = factory({
+                    config: computed(() => ({
+                        ...defaultConfig$(),
+                        children: slotChildren?.(),
+                        ...widgetConfig?.(),
+                        ...slots$(),
+                        ...events,
+                    })),
+                    props,
+                });
+                Object.assign(res, {
+                    patch: zoneWrapper.outsideNgZone(widget.patch),
+                    directives: zoneWrapper.outsideNgZoneWrapDirectivesObject(widget.directives),
+                    api: zoneWrapper.outsideNgZoneWrapFunctionsObject(widget.api),
+                    state: Object.fromEntries(Object.entries(widget.stores).map(([key, val]) => [key.slice(0, -1), toAngularSignal(val)])),
+                });
+                afterInit?.(res);
+                initDone();
+            });
+        },
+    };
+    return res;
+};
+function patchSimpleChanges(patchFn, changes) {
+    const obj = {};
+    for (const [key, simpleChange] of Object.entries(changes)) {
+        if (simpleChange !== undefined) {
+            obj[key] = simpleChange.currentValue;
+        }
+    }
+    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 {
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(_widget) {
+        this._widget = _widget;
+    }
+    /**
+     * Retrieves the widget api
+     * @returns the widget api
+     */
+    get api() {
+        return this._widget.api;
+    }
+    /**
+     * Retrieves the widget state. Each property of the state is exposed through an Angular {@link https://angular.dev/api/core/Signal | Signal}
+     * @returns the widget state
+     */
+    get state() {
+        return this._widget.state;
+    }
+    /**
+     * Retrieves the widget directives
+     * @returns the widget directives
+     */
+    get directives() {
+        return this._widget.directives;
+    }
+    /**
+     * @inheritdoc
+     * @internal
+     */
+    ngOnChanges(changes) {
+        patchSimpleChanges(this._widget.patch, changes);
+    }
+    /** @internal */
+    ngOnInit() {
+        this._widget.ngInit();
+    }
+    /** @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
+    }], () => [{ type: undefined }], null); })();
+
 /**
  * A utility function to manage the lifecycle of a directive for a host element.
  *
@@ -319,7 +468,7 @@ class SlotComponent {
         /**
          * The slot context, to be used when the slot component uses other slots.
          */
-        this.slotContext = computed(() => ({ state: this.state(), api: this.api(), directives: this.directives() }));
+        this.slotContext = computed$1(() => ({ state: this.state(), api: this.api(), directives: this.directives() }));
     }
     static { this.ɵfac = function SlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SlotComponent)(); }; }
     static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SlotComponent, inputs: { state: [1, "state"], api: [1, "api"], directives: [1, "directives"] } }); }
@@ -328,150 +477,6 @@ class SlotComponent {
         type: Directive
     }], null, null); })();
 
-const createPatchSlots = (set) => {
-    let lastValue = {};
-    return (object) => {
-        const newValue = {};
-        let hasChange = false;
-        for (const key of Object.keys(object)) {
-            const objectKey = object[key];
-            if (objectKey != null) {
-                // only use defined slots
-                newValue[key] = objectKey;
-            }
-            if (objectKey != lastValue[key]) {
-                hasChange = true;
-            }
-        }
-        if (hasChange) {
-            lastValue = newValue;
-            set(newValue);
-        }
-    };
-};
-/**
- * Call a widget factory using provided configs.
- *
- * @param parameter - the parameter
- * @param parameter.factory - the widget factory to call
- * @param parameter.defaultConfig - the default config of the widget
- * @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, 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;
-        }),
-        updateSlots: () => {
-            if (slotTemplates) {
-                patchSlots(slotTemplates());
-            }
-        },
-        patch(newProps) {
-            // temporary function replaced in ngInit
-            Object.assign(props, newProps);
-        },
-        ngInit() {
-            runInInjectionContext(injector, () => {
-                const zoneWrapper = inject(ZoneWrapper);
-                factory = zoneWrapper.outsideNgZone(factory);
-                const defaultConfig$ = toReadableStore(defaultConfig);
-                events = zoneWrapper.insideNgZoneWrapFunctionsObject(events);
-                const widget = factory({
-                    config: computed$1(() => ({
-                        ...defaultConfig$(),
-                        children: slotChildren?.(),
-                        ...widgetConfig?.(),
-                        ...slots$(),
-                        ...events,
-                    })),
-                    props,
-                });
-                Object.assign(res, {
-                    patch: zoneWrapper.outsideNgZone(widget.patch),
-                    directives: zoneWrapper.outsideNgZoneWrapDirectivesObject(widget.directives),
-                    api: zoneWrapper.outsideNgZoneWrapFunctionsObject(widget.api),
-                    state: Object.fromEntries(Object.entries(widget.stores).map(([key, val]) => [key.slice(0, -1), toAngularSignal(val)])),
-                });
-                afterInit?.(res);
-                initDone();
-            });
-        },
-    };
-    return res;
-};
-function patchSimpleChanges(patchFn, changes) {
-    const obj = {};
-    for (const [key, simpleChange] of Object.entries(changes)) {
-        if (simpleChange !== undefined) {
-            obj[key] = simpleChange.currentValue;
-        }
-    }
-    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. Each property of the state is exposed through an Angular {@link https://angular.dev/api/core/Signal | Signal}
-     * @returns the widget state
-     */
-    get state() {
-        return this._widget.state;
-    }
-    /**
-     * Retrieves the widget directives
-     * @returns the widget directives
-     */
-    get directives() {
-        return this._widget.directives;
-    }
-    /**
-     * @inheritdoc
-     * @internal
-     */
-    ngOnChanges(changes) {
-        patchSimpleChanges(this._widget.patch, changes);
-    }
-    /** @internal */
-    ngOnInit() {
-        this._widget.ngInit();
-    }
-    /** @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
-    }], () => [{ type: undefined }], null); })();
-
 /**
  * A factory to create the utilities to allow widgets to be context-aware.
  *
@@ -572,30 +577,30 @@ const widgetsConfigFactory = (widgetsConfigInjectionToken = new InjectionToken('
      */
     const injectWidgetConfig = (widgetName) => {
         const widgetsConfig = inject(widgetsConfigInjectionToken, { optional: true });
-        return computed$1(() => widgetsConfig?.()[widgetName]);
+        return computed(() => widgetsConfig?.()[widgetName]);
     };
     /**
      * Creates and initializes a widget using the provided factory and configuration options.
      *
+     * The resulting widget can be easily hooked into the lifecycle of an Angular component through {@link BaseWidgetDirective}.
+     *
      * @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.
+     * @param factory - The factory function to create the widget.
+     * @param options - The options for creating the widget.
+     * @param options.defaultConfig - The default configuration for the widget.
+     * @param options.events - The event handlers for the widget.
+     * @param options.slotTemplates - A function that returns the slot templates for the widget.
+     * @param options.slotChildren - A function that returns the slot children for the widget.
+     * @param options.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,
+    const callWidgetFactory = (factory, options) => callWidgetFactoryWithConfig(factory, {
+        widgetConfig: factory[FACTORY_WIDGET_NAME] ? injectWidgetConfig(factory[FACTORY_WIDGET_NAME]) : undefined,
+        defaultConfig: options?.defaultConfig,
+        events: options?.events,
+        afterInit: options?.afterInit,
+        slotTemplates: options?.slotTemplates,
+        slotChildren: options?.slotChildren,
     });
     return {
         /**