@wirekyt/angular 0.0.11 → 0.0.13

package/dist/fesm2022/wirekyt-angular-combobox.mjs

@@ -3,8 +3,8 @@ import { anatomy } from '@wirekyt/dom/machines/combobox';
 import { injectLocale, injectEnvironment, createId, useMachine, bindProps, createCvaController, buildRootCarrier } from '@wirekyt/angular';
 import { injectFieldContextOptional } from '@wirekyt/angular/field';
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, signal, effect, computed, Directive, InjectionToken, inject, TemplateRef, ViewContainerRef, ElementRef, untracked, DestroyRef, Renderer2, model, EnvironmentInjector, Injector, forwardRef } from '@angular/core';
-import * as presence from '@wirekyt/dom/machines/presence';
+import { InjectionToken, inject, TemplateRef, ViewContainerRef, ElementRef, effect, untracked, DestroyRef, Renderer2, Directive, input, model, booleanAttribute, output, signal, EnvironmentInjector, Injector, forwardRef, computed } from '@angular/core';
+import { injectPresenceContext, PresenceBase, PRESENCE_CONTEXT } from '@wirekyt/angular/presence';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ListCollection } from '@wirekyt/dom/collection';
 
@@ -52,52 +52,6 @@ function useCombobox(options) {
     });
 }
 
-class ComboboxPresence {
-    lazyMount = input(false, { ...(ngDevMode ? { debugName: "lazyMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    unmountOnExit = input(false, { ...(ngDevMode ? { debugName: "unmountOnExit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    skipAnimationOnMount = input(false, { ...(ngDevMode ? { debugName: "skipAnimationOnMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    immediate = input(false, { ...(ngDevMode ? { debugName: "immediate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    present = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
-    exitComplete = output();
-    createPresence(open) {
-        const machine = useMachine({
-            machine: presence.machine,
-            context: () => ({
-                present: this.present() ?? open(),
-                immediate: this.immediate(),
-                onExitComplete: () => this.exitComplete.emit(),
-            }),
-            connect: presence.connect,
-        });
-        const wasPresent = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "wasPresent" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            if (machine.api().present)
-                wasPresent.set(true);
-        });
-        return {
-            api: machine.api,
-            isUnmounted: computed(() => !machine.api().present &&
-                ((!wasPresent() && this.lazyMount()) || (wasPresent() && this.unmountOnExit()))),
-            props: () => ({
-                hidden: !machine.api().present,
-                "data-state": machine.api().skip && this.skipAnimationOnMount()
-                    ? undefined
-                    : (this.present() ?? open())
-                        ? "open"
-                        : "closed",
-            }),
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ComboboxPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ComboboxPresence, isStandalone: true, inputs: { lazyMount: { classPropertyName: "lazyMount", publicName: "lazyMount", isSignal: true, isRequired: false, transformFunction: null }, unmountOnExit: { classPropertyName: "unmountOnExit", publicName: "unmountOnExit", isSignal: true, isRequired: false, transformFunction: null }, skipAnimationOnMount: { classPropertyName: "skipAnimationOnMount", publicName: "skipAnimationOnMount", isSignal: true, isRequired: false, transformFunction: null }, immediate: { classPropertyName: "immediate", publicName: "immediate", isSignal: true, isRequired: false, transformFunction: null }, present: { classPropertyName: "present", publicName: "present", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exitComplete: "exitComplete" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ComboboxPresence, decorators: [{
-            type: Directive
-        }], propDecorators: { lazyMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyMount", required: false }] }], unmountOnExit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmountOnExit", required: false }] }], skipAnimationOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipAnimationOnMount", required: false }] }], immediate: [{ type: i0.Input, args: [{ isSignal: true, alias: "immediate", required: false }] }], present: [{ type: i0.Input, args: [{ isSignal: true, alias: "present", required: false }] }], exitComplete: [{ type: i0.Output, args: ["exitComplete"] }] } });
-const COMBOBOX_PRESENCE = new InjectionToken("WIREKYT.COMBOBOX_PRESENCE");
-
 const COMBOBOX_CONTEXT = new InjectionToken("WIREKYT.COMBOBOX_CONTEXT");
 function injectComboboxContext() {
     return inject(COMBOBOX_CONTEXT);
@@ -110,14 +64,14 @@ function injectComboboxContextCarrier() {
 class ComboboxContent {
     constructor() {
         const context = injectComboboxContext();
-        const { presence } = inject(COMBOBOX_PRESENCE);
+        const presence = injectPresenceContext();
         const template = inject((TemplateRef), { optional: true });
         const container = inject(ViewContainerRef);
         const host = inject(ElementRef);
         const elementRef = template ? { nativeElement: null } : host;
         let view;
         effect(() => {
-            const unmounted = presence.isUnmounted();
+            const unmounted = presence.unmounted();
             if (template) {
                 if (unmounted) {
                     elementRef.nativeElement = null;
@@ -130,15 +84,15 @@ class ComboboxContent {
                         view.rootNodes.find((node) => node.nodeType === 1) ?? null;
                 }
             }
-            untracked(() => presence.api().setNode(elementRef.nativeElement));
+            untracked(() => presence.setNode(elementRef.nativeElement));
         });
         bindProps({
             elementRef,
             renderer: inject(Renderer2),
             destroyRef: inject(DestroyRef),
             props: () => {
-                presence.isUnmounted();
-                return { ...context.api().getContentProps(), ...presence.props() };
+                presence.unmounted();
+                return { ...context.api().getContentProps(), ...presence.getPresenceProps() };
             },
         });
     }
@@ -150,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             args: [{ selector: "[comboboxContent]", standalone: true, exportAs: "comboboxContent" }]
         }], ctorParameters: () => [] });
 
-class ComboboxRoot extends ComboboxPresence {
+class ComboboxRoot extends PresenceBase {
     id = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     elementIds = input(undefined, { ...(ngDevMode ? { debugName: "elementIds" } : /* istanbul ignore next */ {}), alias: "ids" });
@@ -318,8 +272,9 @@ class ComboboxRoot extends ComboboxPresence {
     api = this.machine.api;
     service = this.machine.service;
     send = this.machine.send;
+    presence = this.createPresence(() => this.api().open);
     contextCarrier = buildRootCarrier({
-        providers: [{ provide: COMBOBOX_PRESENCE, useValue: this }],
+        providers: [{ provide: PRESENCE_CONTEXT, useValue: this.presence }],
         root: this,
         rootToken: COMBOBOX_CONTEXT,
         originInjector: inject(Injector),
@@ -328,7 +283,6 @@ class ComboboxRoot extends ComboboxPresence {
     getContextCarrier() {
         return this.contextCarrier;
     }
-    presence = this.createPresence(() => this.api().open);
     constructor() {
         super();
         let firstRunValue = true;
@@ -375,7 +329,11 @@ class ComboboxRoot extends ComboboxPresence {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ComboboxRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ComboboxRoot, isStandalone: true, selector: "[comboboxRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, elementIds: { classPropertyName: "elementIds", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, defaultInputValue: { classPropertyName: "defaultInputValue", publicName: "defaultInputValue", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, highlightedValue: { classPropertyName: "highlightedValue", publicName: "highlightedValue", isSignal: true, isRequired: false, transformFunction: null }, defaultHighlightedValue: { classPropertyName: "defaultHighlightedValue", publicName: "defaultHighlightedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, openOnClick: { classPropertyName: "openOnClick", publicName: "openOnClick", isSignal: true, isRequired: false, transformFunction: null }, openOnKeyPress: { classPropertyName: "openOnKeyPress", publicName: "openOnKeyPress", isSignal: true, isRequired: false, transformFunction: null }, alwaysSubmitOnEnter: { classPropertyName: "alwaysSubmitOnEnter", publicName: "alwaysSubmitOnEnter", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, composite: { classPropertyName: "composite", publicName: "composite", isSignal: true, isRequired: false, transformFunction: null }, disableLayer: { classPropertyName: "disableLayer", publicName: "disableLayer", isSignal: true, isRequired: false, transformFunction: null }, inputBehavior: { classPropertyName: "inputBehavior", publicName: "inputBehavior", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, openOnChange: { classPropertyName: "openOnChange", publicName: "openOnChange", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, positioning: { classPropertyName: "positioning", publicName: "positioning", isSignal: true, isRequired: false, transformFunction: null }, scrollToIndexFn: { classPropertyName: "scrollToIndexFn", publicName: "scrollToIndexFn", isSignal: true, isRequired: false, transformFunction: null }, navigate: { classPropertyName: "navigate", publicName: "navigate", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputValue: "inputValueChange", open: "openChange", highlightedValue: "highlightedValueChange", valueChangeDetails: "valueChangeDetails", inputValueChangeDetails: "inputValueChangeDetails", highlightChange: "highlightChange", openChangeDetails: "openChangeDetails", select: "select", focusOutside: "focusOutside", pointerDownOutside: "pointerDownOutside", interactOutside: "interactOutside" }, providers: [
-            { provide: COMBOBOX_PRESENCE, useExisting: forwardRef(() => ComboboxRoot) },
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (root) => root.presence,
+                deps: [forwardRef(() => ComboboxRoot)],
+            },
             { provide: COMBOBOX_CONTEXT, useExisting: forwardRef(() => ComboboxRoot) },
             {
                 provide: COMBOBOX_CONTEXT_CARRIER,
@@ -392,7 +350,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     standalone: true,
                     exportAs: "comboboxRoot",
                     providers: [
-                        { provide: COMBOBOX_PRESENCE, useExisting: forwardRef(() => ComboboxRoot) },
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (root) => root.presence,
+                            deps: [forwardRef(() => ComboboxRoot)],
+                        },
                         { provide: COMBOBOX_CONTEXT, useExisting: forwardRef(() => ComboboxRoot) },
                         {
                             provide: COMBOBOX_CONTEXT_CARRIER,
@@ -417,7 +379,7 @@ function arraysShallowEqual(a, b) {
     return true;
 }
 
-class ComboboxRootProvider extends ComboboxPresence {
+class ComboboxRootProvider extends PresenceBase {
     value = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     get state() {
@@ -435,8 +397,16 @@ class ComboboxRootProvider extends ComboboxPresence {
     resolveValue() {
         return this.value();
     }
+    presence = this.createPresence(() => {
+        try {
+            return this.api().open;
+        }
+        catch {
+            return false;
+        }
+    });
     contextCarrier = buildRootCarrier({
-        providers: [{ provide: COMBOBOX_PRESENCE, useValue: this }],
+        providers: [{ provide: PRESENCE_CONTEXT, useValue: this.presence }],
         root: this,
         rootToken: COMBOBOX_CONTEXT,
         originInjector: inject(Injector),
@@ -445,14 +415,6 @@ class ComboboxRootProvider extends ComboboxPresence {
     getContextCarrier() {
         return this.contextCarrier;
     }
-    presence = this.createPresence(() => {
-        try {
-            return this.api().open;
-        }
-        catch {
-            return false;
-        }
-    });
     constructor() {
         super();
         bindProps({
@@ -464,7 +426,11 @@ class ComboboxRootProvider extends ComboboxPresence {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ComboboxRootProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: ComboboxRootProvider, isStandalone: true, selector: "[comboboxRootProvider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
-            { provide: COMBOBOX_PRESENCE, useExisting: forwardRef(() => ComboboxRootProvider) },
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (provider) => provider.presence,
+                deps: [forwardRef(() => ComboboxRootProvider)],
+            },
             { provide: COMBOBOX_CONTEXT, useExisting: forwardRef(() => ComboboxRootProvider) },
             {
                 provide: COMBOBOX_CONTEXT_CARRIER,
@@ -480,7 +446,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     standalone: true,
                     exportAs: "comboboxRootProvider",
                     providers: [
-                        { provide: COMBOBOX_PRESENCE, useExisting: forwardRef(() => ComboboxRootProvider) },
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (provider) => provider.presence,
+                            deps: [forwardRef(() => ComboboxRootProvider)],
+                        },
                         { provide: COMBOBOX_CONTEXT, useExisting: forwardRef(() => ComboboxRootProvider) },
                         {
                             provide: COMBOBOX_CONTEXT_CARRIER,
@@ -647,14 +617,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
 class ComboboxPositioner {
     constructor() {
         const context = injectComboboxContext();
-        const { presence } = inject(COMBOBOX_PRESENCE);
+        const presence = injectPresenceContext();
         const template = inject((TemplateRef), { optional: true });
         const container = inject(ViewContainerRef);
         const host = inject(ElementRef);
         const elementRef = template ? { nativeElement: null } : host;
         let view;
         effect(() => {
-            const unmounted = presence.isUnmounted();
+            const unmounted = presence.unmounted();
             if (template) {
                 if (unmounted) {
                     elementRef.nativeElement = null;
@@ -673,8 +643,8 @@ class ComboboxPositioner {
             renderer: inject(Renderer2),
             destroyRef: inject(DestroyRef),
             props: () => {
-                presence.isUnmounted();
-                return { ...context.api().getPositionerProps(), hidden: presence.isUnmounted() };
+                presence.unmounted();
+                return { ...context.api().getPositionerProps(), hidden: presence.unmounted() };
             },
         });
     }