@wirekyt/angular 0.0.33 → 0.0.34

package/dist/fesm2022/wirekyt-angular-navigation-menu.mjs

@@ -0,0 +1,777 @@
+import * as navigationMenu from '@wirekyt/dom/machines/navigation-menu';
+export { anatomy as navigationMenuAnatomy } from '@wirekyt/dom/machines/navigation-menu';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, model, booleanAttribute, output, EnvironmentInjector, Injector, DestroyRef, Renderer2, ElementRef, forwardRef, Directive, computed, TemplateRef, ViewContainerRef, effect, untracked } from '@angular/core';
+import { injectLocale, injectEnvironment, createId, useMachine, buildRootCarrier, bindProps } from '@wirekyt/angular';
+import { usePresence, PRESENCE_CONTEXT } from '@wirekyt/angular/presence';
+
+const NAVIGATION_MENU_CONTEXT = new InjectionToken("WIREKYT.NAVIGATION_MENU_CONTEXT");
+function injectNavigationMenuContext() {
+    return inject(NAVIGATION_MENU_CONTEXT);
+}
+const NAVIGATION_MENU_CONTEXT_CARRIER = new InjectionToken("WIREKYT.NAVIGATION_MENU_CONTEXT_CARRIER");
+function injectNavigationMenuContextCarrier() {
+    return inject(NAVIGATION_MENU_CONTEXT_CARRIER);
+}
+const NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT = new InjectionToken("WIREKYT.NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT");
+function injectNavigationMenuRenderStrategyContext() {
+    return inject(NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT);
+}
+
+function useNavigationMenu(options) {
+    const locale = injectLocale();
+    const environment = injectEnvironment();
+    const fallbackId = createId();
+    return useMachine({
+        machine: navigationMenu.machine,
+        context: () => {
+            const props = options.context();
+            return {
+                ...props,
+                dir: locale.dir,
+                getRootNode: environment.getRootNode,
+                id: props.id ?? fallbackId,
+            };
+        },
+        connect: (service, normalize) => navigationMenu.connect(service, normalize),
+    });
+}
+
+class NavigationMenuRoot {
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ids = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    defaultValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    orientation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    openDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
+    closeDelay = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
+    disableClickTrigger = input(false, { ...(ngDevMode ? { debugName: "disableClickTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disableHoverTrigger = input(false, { ...(ngDevMode ? { debugName: "disableHoverTrigger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disablePointerLeaveClose = input(false, { ...(ngDevMode ? { debugName: "disablePointerLeaveClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    translations = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translations" }] : /* istanbul ignore next */ []));
+    lazyMount = input(false, { ...(ngDevMode ? { debugName: "lazyMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    unmountOnExit = input(false, { ...(ngDevMode ? { debugName: "unmountOnExit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    valueDetailsChange = output();
+    machine = useNavigationMenu({
+        context: () => ({
+            id: this.id(),
+            ids: this.ids(),
+            value: this.value(),
+            defaultValue: this.defaultValue(),
+            orientation: this.orientation(),
+            openDelay: this.openDelay(),
+            closeDelay: this.closeDelay(),
+            disableClickTrigger: this.disableClickTrigger(),
+            disableHoverTrigger: this.disableHoverTrigger(),
+            disablePointerLeaveClose: this.disablePointerLeaveClose(),
+            translations: this.translations(),
+            onValueChange: (details) => {
+                if (this.value() !== details.value)
+                    this.value.set(details.value);
+                this.valueDetailsChange.emit(details);
+            },
+        }),
+    });
+    state = this.machine.state;
+    api = this.machine.api;
+    service = this.machine.service;
+    send = this.machine.send;
+    contextCarrier = buildRootCarrier({
+        providers: [{ provide: NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT, useValue: this }],
+        root: this,
+        rootToken: NAVIGATION_MENU_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    getContextCarrier() {
+        return this.contextCarrier;
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.api().getRootProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuRoot, isStandalone: true, selector: "[navigation-menu-root]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disableClickTrigger: { classPropertyName: "disableClickTrigger", publicName: "disableClickTrigger", isSignal: true, isRequired: false, transformFunction: null }, disableHoverTrigger: { classPropertyName: "disableHoverTrigger", publicName: "disableHoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, disablePointerLeaveClose: { classPropertyName: "disablePointerLeaveClose", publicName: "disablePointerLeaveClose", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, lazyMount: { classPropertyName: "lazyMount", publicName: "lazyMount", isSignal: true, isRequired: false, transformFunction: null }, unmountOnExit: { classPropertyName: "unmountOnExit", publicName: "unmountOnExit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueDetailsChange: "valueDetailsChange" }, providers: [
+            { provide: NAVIGATION_MENU_CONTEXT, useExisting: forwardRef(() => NavigationMenuRoot) },
+            {
+                provide: NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT,
+                useExisting: forwardRef(() => NavigationMenuRoot),
+            },
+            {
+                provide: NAVIGATION_MENU_CONTEXT_CARRIER,
+                useFactory: (root) => root.getContextCarrier(),
+                deps: [forwardRef(() => NavigationMenuRoot)],
+            },
+        ], exportAs: ["navigationMenuRoot"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-root]",
+                    standalone: true,
+                    exportAs: "navigationMenuRoot",
+                    providers: [
+                        { provide: NAVIGATION_MENU_CONTEXT, useExisting: forwardRef(() => NavigationMenuRoot) },
+                        {
+                            provide: NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT,
+                            useExisting: forwardRef(() => NavigationMenuRoot),
+                        },
+                        {
+                            provide: NAVIGATION_MENU_CONTEXT_CARRIER,
+                            useFactory: (root) => root.getContextCarrier(),
+                            deps: [forwardRef(() => NavigationMenuRoot)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ids: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDelay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disableClickTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClickTrigger", required: false }] }], disableHoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableHoverTrigger", required: false }] }], disablePointerLeaveClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePointerLeaveClose", required: false }] }], translations: [{ type: i0.Input, args: [{ isSignal: true, alias: "translations", required: false }] }], lazyMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyMount", required: false }] }], unmountOnExit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmountOnExit", required: false }] }], valueDetailsChange: [{ type: i0.Output, args: ["valueDetailsChange"] }] } });
+
+class NavigationMenuRootProvider {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    lazyMount = input(false, { ...(ngDevMode ? { debugName: "lazyMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    unmountOnExit = input(false, { ...(ngDevMode ? { debugName: "unmountOnExit" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    state = computed(() => this.value().state(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    api = computed(() => this.value().api(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "api" }] : /* istanbul ignore next */ []));
+    send = (event) => this.value().send(event);
+    get service() {
+        return this.value().service;
+    }
+    contextCarrier = buildRootCarrier({
+        providers: [{ provide: NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT, useValue: this }],
+        root: this,
+        rootToken: NAVIGATION_MENU_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    getContextCarrier() {
+        return this.contextCarrier;
+    }
+    constructor() {
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => this.api().getRootProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuRootProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuRootProvider, isStandalone: true, selector: "[navigation-menu-root-provider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, lazyMount: { classPropertyName: "lazyMount", publicName: "lazyMount", isSignal: true, isRequired: false, transformFunction: null }, unmountOnExit: { classPropertyName: "unmountOnExit", publicName: "unmountOnExit", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NAVIGATION_MENU_CONTEXT,
+                useExisting: forwardRef(() => NavigationMenuRootProvider),
+            },
+            {
+                provide: NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT,
+                useExisting: forwardRef(() => NavigationMenuRootProvider),
+            },
+            {
+                provide: NAVIGATION_MENU_CONTEXT_CARRIER,
+                useFactory: (provider) => provider.getContextCarrier(),
+                deps: [forwardRef(() => NavigationMenuRootProvider)],
+            },
+        ], exportAs: ["navigationMenuRootProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuRootProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-root-provider]",
+                    standalone: true,
+                    exportAs: "navigationMenuRootProvider",
+                    providers: [
+                        {
+                            provide: NAVIGATION_MENU_CONTEXT,
+                            useExisting: forwardRef(() => NavigationMenuRootProvider),
+                        },
+                        {
+                            provide: NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT,
+                            useExisting: forwardRef(() => NavigationMenuRootProvider),
+                        },
+                        {
+                            provide: NAVIGATION_MENU_CONTEXT_CARRIER,
+                            useFactory: (provider) => provider.getContextCarrier(),
+                            deps: [forwardRef(() => NavigationMenuRootProvider)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], lazyMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyMount", required: false }] }], unmountOnExit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmountOnExit", required: false }] }] } });
+
+class NavigationMenuList {
+    constructor() {
+        const context = injectNavigationMenuContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getListProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: NavigationMenuList, isStandalone: true, selector: "[navigation-menu-list]", exportAs: ["navigationMenuList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-list]",
+                    standalone: true,
+                    exportAs: "navigationMenuList",
+                }]
+        }], ctorParameters: () => [] });
+
+const NAVIGATION_MENU_ITEM_CONTEXT = new InjectionToken("WIREKYT.NAVIGATION_MENU_ITEM_CONTEXT");
+function injectNavigationMenuItemContext() {
+    return inject(NAVIGATION_MENU_ITEM_CONTEXT);
+}
+
+class NavigationMenuItem {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    itemContext = {
+        value: computed(() => this.value()),
+        disabled: computed(() => this.disabled()),
+    };
+    constructor() {
+        const context = injectNavigationMenuContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getItemProps({
+                value: this.value(),
+                disabled: this.disabled(),
+            }),
+        });
+    }
+    getItemContext() {
+        return this.itemContext;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuItem, isStandalone: true, selector: "[navigation-menu-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NAVIGATION_MENU_ITEM_CONTEXT,
+                useFactory: (item) => item.getItemContext(),
+                deps: [forwardRef(() => NavigationMenuItem)],
+            },
+        ], exportAs: ["navigationMenuItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-item]",
+                    standalone: true,
+                    exportAs: "navigationMenuItem",
+                    providers: [
+                        {
+                            provide: NAVIGATION_MENU_ITEM_CONTEXT,
+                            useFactory: (item) => item.getItemContext(),
+                            deps: [forwardRef(() => NavigationMenuItem)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+const optionalBooleanAttribute = (value) => value === undefined || value === null ? undefined : booleanAttribute(value);
+class NavigationMenuTrigger {
+    disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: optionalBooleanAttribute });
+    constructor() {
+        const context = injectNavigationMenuContext();
+        const item = injectNavigationMenuItemContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getTriggerProps({
+                value: item.value(),
+                disabled: this.disabled() ?? item.disabled(),
+            }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuTrigger, isStandalone: true, selector: "[navigation-menu-trigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["navigationMenuTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-trigger]",
+                    standalone: true,
+                    exportAs: "navigationMenuTrigger",
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class NavigationMenuContent {
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    context = injectNavigationMenuContext();
+    item = inject(NAVIGATION_MENU_ITEM_CONTEXT, { optional: true });
+    renderStrategy = injectNavigationMenuRenderStrategyContext();
+    get resolvedValue() {
+        const value = this.value() ?? this.item?.value();
+        if (value === undefined) {
+            throw new Error("[navigation-menu-content] requires either a [value] input or an ancestor [navigation-menu-item].");
+        }
+        return value;
+    }
+    presence = usePresence({
+        context: () => ({
+            present: this.context.api().value === this.resolvedValue,
+            lazyMount: this.renderStrategy.lazyMount(),
+            unmountOnExit: this.renderStrategy.unmountOnExit(),
+        }),
+    });
+    constructor() {
+        const renderer = inject(Renderer2);
+        const destroyRef = inject(DestroyRef);
+        const template = inject((TemplateRef), { optional: true });
+        const container = inject(ViewContainerRef);
+        const host = inject(ElementRef);
+        const hostNode = host.nativeElement;
+        const originalParent = renderer.parentNode(hostNode);
+        const anchor = template ? hostNode : renderer.createComment("navigation-menu-content");
+        const elementRef = template ? { nativeElement: null } : host;
+        const viewportProxyRef = { nativeElement: renderer.createElement("div") };
+        const triggerProxyRef = { nativeElement: renderer.createElement("div") };
+        let view;
+        if (!template && originalParent) {
+            renderer.insertBefore(originalParent, anchor, renderer.nextSibling(hostNode));
+        }
+        const detach = (node) => {
+            const parent = renderer.parentNode(node);
+            if (parent)
+                renderer.removeChild(parent, node);
+        };
+        effect(() => {
+            const unmounted = this.presence.unmounted();
+            const api = this.context.api();
+            if (template) {
+                if (unmounted) {
+                    elementRef.nativeElement = null;
+                    container.clear();
+                    view = undefined;
+                }
+                else if (!view) {
+                    view = container.createEmbeddedView(template);
+                    elementRef.nativeElement =
+                        view.rootNodes.find((node) => node.nodeType === 1) ?? null;
+                }
+            }
+            const element = elementRef.nativeElement;
+            untracked(() => this.presence.setNode(element));
+            const viewportNode = api.getViewportNode();
+            const shouldPortal = !unmounted && api.isViewportRendered && viewportNode !== null;
+            if (shouldPortal && element && originalParent) {
+                if (renderer.parentNode(viewportProxyRef.nativeElement) !== originalParent) {
+                    renderer.insertBefore(originalParent, viewportProxyRef.nativeElement, anchor);
+                    renderer.insertBefore(originalParent, triggerProxyRef.nativeElement, anchor);
+                }
+                if (renderer.parentNode(element) !== viewportNode) {
+                    renderer.appendChild(viewportNode, element);
+                }
+            }
+            else {
+                detach(viewportProxyRef.nativeElement);
+                detach(triggerProxyRef.nativeElement);
+                if (element && originalParent && renderer.parentNode(element) !== originalParent) {
+                    renderer.insertBefore(originalParent, element, anchor);
+                }
+            }
+        });
+        bindProps({
+            elementRef,
+            renderer,
+            destroyRef,
+            props: () => {
+                this.presence.unmounted();
+                return {
+                    ...this.context.api().getContentProps({ value: this.resolvedValue }),
+                    ...this.presence.getPresenceProps(),
+                };
+            },
+        });
+        bindProps({
+            elementRef: viewportProxyRef,
+            renderer,
+            destroyRef,
+            props: () => this.context.api().getViewportProxyProps({ value: this.resolvedValue }),
+        });
+        bindProps({
+            elementRef: triggerProxyRef,
+            renderer,
+            destroyRef,
+            props: () => this.context.api().getTriggerProxyProps({ value: this.resolvedValue }),
+        });
+        destroyRef.onDestroy(() => {
+            const element = elementRef.nativeElement;
+            if (element && originalParent && renderer.parentNode(element) !== originalParent) {
+                renderer.insertBefore(originalParent, element, anchor);
+            }
+            detach(viewportProxyRef.nativeElement);
+            detach(triggerProxyRef.nativeElement);
+            if (!template && originalParent && renderer.parentNode(anchor) === originalParent) {
+                renderer.removeChild(originalParent, anchor);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuContent, isStandalone: true, selector: "[navigation-menu-content]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (content) => content.presence,
+                deps: [forwardRef(() => NavigationMenuContent)],
+            },
+        ], exportAs: ["navigationMenuContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-content]",
+                    standalone: true,
+                    exportAs: "navigationMenuContent",
+                    providers: [
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (content) => content.presence,
+                            deps: [forwardRef(() => NavigationMenuContent)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+class NavigationMenuLink {
+    value = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    closeOnClick = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnClick" }] : /* istanbul ignore next */ []));
+    select = output();
+    itemContext = inject(NAVIGATION_MENU_ITEM_CONTEXT, { optional: true });
+    constructor() {
+        const context = injectNavigationMenuContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                const value = this.value() ?? this.itemContext?.value();
+                if (value === undefined) {
+                    throw new Error("[navigation-menu-link] requires either a [value] input or an ancestor [navigation-menu-item].");
+                }
+                return context.api().getLinkProps({
+                    value,
+                    current: this.current(),
+                    closeOnClick: this.closeOnClick(),
+                    onSelect: (event) => {
+                        this.select.emit(event);
+                    },
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuLink, isStandalone: true, selector: "[navigation-menu-link]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, exportAs: ["navigationMenuLink"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-link]",
+                    standalone: true,
+                    exportAs: "navigationMenuLink",
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+
+class NavigationMenuIndicator {
+    context = injectNavigationMenuContext();
+    renderStrategy = injectNavigationMenuRenderStrategyContext();
+    presence = usePresence({
+        context: () => ({
+            present: this.context.api().open,
+            lazyMount: this.renderStrategy.lazyMount(),
+            unmountOnExit: this.renderStrategy.unmountOnExit(),
+        }),
+    });
+    constructor() {
+        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 = this.presence.unmounted();
+            if (template) {
+                if (unmounted) {
+                    elementRef.nativeElement = null;
+                    container.clear();
+                    view = undefined;
+                }
+                else if (!view) {
+                    view = container.createEmbeddedView(template);
+                    elementRef.nativeElement =
+                        view.rootNodes.find((node) => node.nodeType === 1) ?? null;
+                }
+            }
+            untracked(() => this.presence.setNode(elementRef.nativeElement));
+        });
+        bindProps({
+            elementRef,
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                this.presence.unmounted();
+                return {
+                    ...this.context.api().getIndicatorProps(),
+                    ...this.presence.getPresenceProps(),
+                };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: NavigationMenuIndicator, isStandalone: true, selector: "[navigation-menu-indicator]", providers: [
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (indicator) => indicator.presence,
+                deps: [forwardRef(() => NavigationMenuIndicator)],
+            },
+        ], exportAs: ["navigationMenuIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-indicator]",
+                    standalone: true,
+                    exportAs: "navigationMenuIndicator",
+                    providers: [
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (indicator) => indicator.presence,
+                            deps: [forwardRef(() => NavigationMenuIndicator)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
+class NavigationMenuItemIndicator {
+    constructor() {
+        const context = injectNavigationMenuContext();
+        const item = injectNavigationMenuItemContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getItemIndicatorProps({
+                value: item.value(),
+                disabled: item.disabled(),
+            }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: NavigationMenuItemIndicator, isStandalone: true, selector: "[navigation-menu-item-indicator]", exportAs: ["navigationMenuItemIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-item-indicator]",
+                    standalone: true,
+                    exportAs: "navigationMenuItemIndicator",
+                }]
+        }], ctorParameters: () => [] });
+
+const NAVIGATION_MENU_VIEWPORT_CONTEXT = new InjectionToken("WIREKYT.NAVIGATION_MENU_VIEWPORT_CONTEXT");
+function injectNavigationMenuViewportContext() {
+    return inject(NAVIGATION_MENU_VIEWPORT_CONTEXT);
+}
+
+class NavigationMenuViewport {
+    context = injectNavigationMenuContext();
+    viewport = injectNavigationMenuViewportContext();
+    renderStrategy = injectNavigationMenuRenderStrategyContext();
+    presence = usePresence({
+        context: () => ({
+            present: this.context.api().open,
+            lazyMount: this.renderStrategy.lazyMount(),
+            unmountOnExit: this.renderStrategy.unmountOnExit(),
+        }),
+    });
+    constructor() {
+        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 = this.presence.unmounted();
+            if (template) {
+                if (unmounted) {
+                    elementRef.nativeElement = null;
+                    container.clear();
+                    view = undefined;
+                }
+                else if (!view) {
+                    view = container.createEmbeddedView(template);
+                    elementRef.nativeElement =
+                        view.rootNodes.find((node) => node.nodeType === 1) ?? null;
+                }
+            }
+            untracked(() => this.presence.setNode(elementRef.nativeElement));
+        });
+        bindProps({
+            elementRef,
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                this.presence.unmounted();
+                return {
+                    ...this.context.api().getViewportProps({ align: this.viewport.align() }),
+                    ...this.presence.getPresenceProps(),
+                };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: NavigationMenuViewport, isStandalone: true, selector: "[navigation-menu-viewport]", providers: [
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (viewport) => viewport.presence,
+                deps: [forwardRef(() => NavigationMenuViewport)],
+            },
+        ], exportAs: ["navigationMenuViewport"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-viewport]",
+                    standalone: true,
+                    exportAs: "navigationMenuViewport",
+                    providers: [
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (viewport) => viewport.presence,
+                            deps: [forwardRef(() => NavigationMenuViewport)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+
+class NavigationMenuViewportPositioner {
+    align = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    viewportContext = {
+        align: computed(() => this.align()),
+    };
+    constructor() {
+        const context = injectNavigationMenuContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getViewportPositionerProps({
+                align: this.align(),
+            }),
+        });
+    }
+    getViewportContext() {
+        return this.viewportContext;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuViewportPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: NavigationMenuViewportPositioner, isStandalone: true, selector: "[navigation-menu-viewport-positioner]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NAVIGATION_MENU_VIEWPORT_CONTEXT,
+                useFactory: (positioner) => positioner.getViewportContext(),
+                deps: [forwardRef(() => NavigationMenuViewportPositioner)],
+            },
+        ], exportAs: ["navigationMenuViewportPositioner"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuViewportPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-viewport-positioner]",
+                    standalone: true,
+                    exportAs: "navigationMenuViewportPositioner",
+                    providers: [
+                        {
+                            provide: NAVIGATION_MENU_VIEWPORT_CONTEXT,
+                            useFactory: (positioner) => positioner.getViewportContext(),
+                            deps: [forwardRef(() => NavigationMenuViewportPositioner)],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+class NavigationMenuArrow {
+    itemContext = inject(NAVIGATION_MENU_ITEM_CONTEXT, { optional: true });
+    constructor() {
+        const context = injectNavigationMenuContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                const value = this.itemContext?.value();
+                if (value != null) {
+                    return context.api().getArrowProps({ value });
+                }
+                return context.api().getArrowProps();
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: NavigationMenuArrow, isStandalone: true, selector: "[navigation-menu-arrow]", exportAs: ["navigationMenuArrow"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-arrow]",
+                    standalone: true,
+                    exportAs: "navigationMenuArrow",
+                }]
+        }], ctorParameters: () => [] });
+
+class NavigationMenuContext {
+    static ngTemplateContextGuard(_directive, context) {
+        void context;
+        return true;
+    }
+    navigationMenu = injectNavigationMenuContext();
+    templateRef = inject(TemplateRef);
+    viewContainer = inject(ViewContainerRef);
+    constructor() {
+        const view = this.viewContainer.createEmbeddedView(this.templateRef, {
+            $implicit: this.navigationMenu.api,
+            api: this.navigationMenu.api,
+        });
+        effect(() => {
+            this.navigationMenu.api();
+            view.detectChanges();
+        });
+        inject(DestroyRef).onDestroy(() => view.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuContext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: NavigationMenuContext, isStandalone: true, selector: "[navigation-menu-context]", exportAs: ["navigationMenuContext"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: NavigationMenuContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[navigation-menu-context]",
+                    standalone: true,
+                    exportAs: "navigationMenuContext",
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NAVIGATION_MENU_CONTEXT, NAVIGATION_MENU_CONTEXT_CARRIER, NAVIGATION_MENU_RENDER_STRATEGY_CONTEXT, NavigationMenuArrow, NavigationMenuContent, NavigationMenuContext, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemIndicator, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuRootProvider, NavigationMenuTrigger, NavigationMenuViewport, NavigationMenuViewportPositioner, injectNavigationMenuContext, injectNavigationMenuContextCarrier, injectNavigationMenuRenderStrategyContext, useNavigationMenu };
+//# sourceMappingURL=wirekyt-angular-navigation-menu.mjs.map