@wirekyt/angular 0.0.2 → 0.0.4

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

@@ -0,0 +1,247 @@
+import * as collapsible from '@wirekyt/dom/machines/collapsible';
+export { anatomy as collapsibleAnatomy } from '@wirekyt/dom/machines/collapsible';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, effect, computed, input, output, booleanAttribute, EnvironmentInjector, Injector, DestroyRef, Renderer2, ElementRef, forwardRef, Directive, TemplateRef, ViewContainerRef } from '@angular/core';
+import { injectLocale, injectEnvironment, createId, useMachine, buildRootCarrier, bindProps } from '@wirekyt/angular';
+
+const COLLAPSIBLE_CONTEXT = new InjectionToken("WIREKIT.COLLAPSIBLE_CONTEXT");
+function injectCollapsibleContext() {
+    return inject(COLLAPSIBLE_CONTEXT);
+}
+
+function useCollapsible(options) {
+    const locale = injectLocale();
+    const environment = injectEnvironment();
+    const fallbackId = createId();
+    const wasVisible = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wasVisible" }] : /* istanbul ignore next */ []));
+    const machine = useMachine({
+        machine: collapsible.machine,
+        context: () => {
+            const props = options.context();
+            const { lazyMount: _lazyMount, unmountOnExit: _unmountOnExit, ...collapsibleProps } = props;
+            return {
+                ...collapsibleProps,
+                dir: locale.dir,
+                getRootNode: environment.getRootNode,
+                id: collapsibleProps.id ?? fallbackId,
+            };
+        },
+        connect: (service, normalize) => collapsible.connect(service, normalize),
+    });
+    effect(() => {
+        if (machine.api().visible) {
+            wasVisible.set(true);
+        }
+    });
+    const isUnmounted = computed(() => {
+        const { lazyMount, unmountOnExit } = options.context();
+        const visible = machine.api().visible;
+        return Boolean((!visible && !wasVisible() && lazyMount) || (unmountOnExit && !visible && wasVisible()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUnmounted" }] : /* istanbul ignore next */ []));
+    return {
+        ...machine,
+        isUnmounted,
+    };
+}
+
+class CollapsibleRoot {
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ids = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    open = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    openChange = output();
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    collapsedHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedHeight" }] : /* istanbul ignore next */ []));
+    collapsedWidth = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : /* 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 });
+    exitComplete = output();
+    machine = useCollapsible({
+        context: () => ({
+            id: this.id(),
+            ids: this.ids(),
+            open: this.open(),
+            defaultOpen: this.defaultOpen(),
+            disabled: this.disabled(),
+            collapsedHeight: this.collapsedHeight(),
+            collapsedWidth: this.collapsedWidth(),
+            lazyMount: this.lazyMount(),
+            unmountOnExit: this.unmountOnExit(),
+            onOpenChange: (details) => {
+                this.openChange.emit(details);
+            },
+            onExitComplete: () => {
+                this.exitComplete.emit();
+            },
+        }),
+    });
+    state = this.machine.state;
+    api = this.machine.api;
+    isUnmounted = computed(() => this.machine.isUnmounted(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUnmounted" }] : /* istanbul ignore next */ []));
+    service = this.machine.service;
+    send = this.machine.send;
+    arkContextCarrier = buildRootCarrier({
+        root: this,
+        rootToken: COLLAPSIBLE_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    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.0", ngImport: i0, type: CollapsibleRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CollapsibleRoot, isStandalone: true, selector: "[collapsibleRoot]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, collapsedHeight: { classPropertyName: "collapsedHeight", publicName: "collapsedHeight", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", 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: { openChange: "openChange", exitComplete: "exitComplete" }, providers: [{ provide: COLLAPSIBLE_CONTEXT, useExisting: forwardRef(() => CollapsibleRoot) }], exportAs: ["collapsibleRoot"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[collapsibleRoot]",
+                    standalone: true,
+                    exportAs: "collapsibleRoot",
+                    providers: [{ provide: COLLAPSIBLE_CONTEXT, useExisting: forwardRef(() => CollapsibleRoot) }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ids: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], collapsedHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedHeight", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }], lazyMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyMount", required: false }] }], unmountOnExit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmountOnExit", required: false }] }], exitComplete: [{ type: i0.Output, args: ["exitComplete"] }] } });
+
+class CollapsibleRootProvider {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    isUnmounted = computed(() => this.value().isUnmounted(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUnmounted" }] : /* istanbul ignore next */ []));
+    send = (event) => this.value().send(event);
+    get service() {
+        return this.value().service;
+    }
+    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.0", ngImport: i0, type: CollapsibleRootProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: CollapsibleRootProvider, isStandalone: true, selector: "[collapsibleRootProvider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            { provide: COLLAPSIBLE_CONTEXT, useExisting: forwardRef(() => CollapsibleRootProvider) },
+        ], exportAs: ["collapsibleRootProvider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleRootProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[collapsibleRootProvider]",
+                    standalone: true,
+                    exportAs: "collapsibleRootProvider",
+                    providers: [
+                        { provide: COLLAPSIBLE_CONTEXT, useExisting: forwardRef(() => CollapsibleRootProvider) },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class CollapsibleTrigger {
+    constructor() {
+        const context = injectCollapsibleContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getTriggerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CollapsibleTrigger, isStandalone: true, selector: "[collapsibleTrigger]", exportAs: ["collapsibleTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[collapsibleTrigger]",
+                    standalone: true,
+                    exportAs: "collapsibleTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class CollapsibleContent {
+    context = injectCollapsibleContext();
+    template = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    elementRef = { nativeElement: null };
+    view;
+    constructor() {
+        effect(() => {
+            if (this.context.isUnmounted()) {
+                this.elementRef.nativeElement = null;
+                this.viewContainer.clear();
+                this.view = undefined;
+                return;
+            }
+            if (!this.view) {
+                this.view = this.viewContainer.createEmbeddedView(this.template);
+                this.elementRef.nativeElement =
+                    this.view.rootNodes.find((node) => node.nodeType === 1) ?? null;
+            }
+        });
+        bindProps({
+            elementRef: this.elementRef,
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                this.context.isUnmounted();
+                return this.context.api().getContentProps();
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CollapsibleContent, isStandalone: true, selector: "[collapsibleContent]", exportAs: ["collapsibleContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[collapsibleContent]",
+                    standalone: true,
+                    exportAs: "collapsibleContent",
+                }]
+        }], ctorParameters: () => [] });
+
+class CollapsibleIndicator {
+    constructor() {
+        const context = injectCollapsibleContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getIndicatorProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: CollapsibleIndicator, isStandalone: true, selector: "[collapsibleIndicator]", exportAs: ["collapsibleIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CollapsibleIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[collapsibleIndicator]",
+                    standalone: true,
+                    exportAs: "collapsibleIndicator",
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLLAPSIBLE_CONTEXT, CollapsibleContent, CollapsibleIndicator, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, injectCollapsibleContext, useCollapsible };
+//# sourceMappingURL=wirekyt-angular-collapsible.mjs.map

package/dist/fesm2022/wirekyt-angular-collapsible.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wirekyt-angular-collapsible.mjs","sources":["../../src/components/collapsible/use-context.ts","../../src/components/collapsible/use.ts","../../src/components/collapsible/root.ts","../../src/components/collapsible/root-provider.ts","../../src/components/collapsible/trigger.ts","../../src/components/collapsible/content.ts","../../src/components/collapsible/indicator.ts","../../src/components/collapsible/wirekyt-angular-collapsible.ts"],"sourcesContent":["import { InjectionToken, inject } from \"@angular/core\";\n\nimport type { UseCollapsibleReturn } from \"./use\";\n\nexport const COLLAPSIBLE_CONTEXT = new InjectionToken<UseCollapsibleReturn>(\n  \"WIREKIT.COLLAPSIBLE_CONTEXT\",\n);\n\nexport function injectCollapsibleContext(): UseCollapsibleReturn {\n  return inject(COLLAPSIBLE_CONTEXT);\n}\n","import { computed, effect, signal, type Signal } from \"@angular/core\";\nimport { useMachine, UseMachineReturn } from \"@wirekyt/angular\";\nimport { createId, injectEnvironment, injectLocale } from \"@wirekyt/angular\";\nimport { Machine } from \"@wirekyt/dom\";\nimport * as collapsible from \"@wirekyt/dom/machines/collapsible\";\n\ntype OptionalId<T extends { id: string }> = Omit<T, \"id\"> & { id?: string };\n\nexport interface UseCollapsibleProps extends OptionalId<\n  Omit<collapsible.Props, \"dir\" | \"getRootNode\">\n> {\n  lazyMount?: boolean;\n  unmountOnExit?: boolean;\n}\n\nexport interface UseCollapsibleReturn extends UseMachineReturn<\n  collapsible.Service[\"state\"],\n  collapsible.Api,\n  collapsible.Service\n> {\n  readonly isUnmounted: Signal<boolean>;\n}\n\nexport interface UseCollapsibleOptions {\n  context: () => UseCollapsibleProps;\n}\n\ntype CollapsibleContext = Record<string, unknown>;\ntype CollapsibleSchema = collapsible.Machine extends Machine<infer TSchema> ? TSchema : never;\n\nexport function useCollapsible(options: UseCollapsibleOptions): UseCollapsibleReturn {\n  const locale = injectLocale();\n  const environment = injectEnvironment();\n  const fallbackId = createId();\n  const wasVisible = signal(false);\n\n  const machine = useMachine<CollapsibleSchema, collapsible.Api>({\n    machine: collapsible.machine,\n    context: () => {\n      const props = options.context();\n      const { lazyMount: _lazyMount, unmountOnExit: _unmountOnExit, ...collapsibleProps } = props;\n      return {\n        ...collapsibleProps,\n        dir: locale.dir,\n        getRootNode: environment.getRootNode,\n        id: collapsibleProps.id ?? fallbackId,\n      } as CollapsibleContext;\n    },\n    connect: (service, normalize) => collapsible.connect(service, normalize),\n  });\n\n  effect(() => {\n    if (machine.api().visible) {\n      wasVisible.set(true);\n    }\n  });\n\n  const isUnmounted = computed(() => {\n    const { lazyMount, unmountOnExit } = options.context();\n    const visible = machine.api().visible;\n    return Boolean(\n      (!visible && !wasVisible() && lazyMount) || (unmountOnExit && !visible && wasVisible()),\n    );\n  });\n\n  return {\n    ...machine,\n    isUnmounted,\n  };\n}\n","import type * as collapsible from \"@wirekyt/dom/machines/collapsible\";\n\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  EnvironmentInjector,\n  Injector,\n  type ProviderToken,\n  Renderer2,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  type InputSignal,\n  type InputSignalWithTransform,\n  type OutputEmitterRef,\n  type Signal,\n} from \"@angular/core\";\nimport { bindProps, buildRootCarrier, ContextCarrier } from \"@wirekyt/angular\";\n\nimport { CollapsibleElementIds } from \"./types\";\nimport { useCollapsible, UseCollapsibleReturn } from \"./use\";\nimport { COLLAPSIBLE_CONTEXT } from \"./use-context\";\n\n@Directive({\n  selector: \"[collapsibleRoot]\",\n  standalone: true,\n  exportAs: \"collapsibleRoot\",\n  providers: [{ provide: COLLAPSIBLE_CONTEXT, useExisting: forwardRef(() => CollapsibleRoot) }],\n})\nexport class CollapsibleRoot implements UseCollapsibleReturn {\n  readonly id: InputSignal<string | undefined> = input<string | undefined>(undefined);\n  readonly ids: InputSignal<Partial<CollapsibleElementIds> | undefined> = input<\n    Partial<CollapsibleElementIds> | undefined\n  >(undefined);\n  readonly open: InputSignal<boolean | undefined> = input<boolean | undefined>(undefined);\n  readonly openChange: OutputEmitterRef<collapsible.OpenChangeDetails> =\n    output<collapsible.OpenChangeDetails>();\n  readonly defaultOpen: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n  readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n  readonly collapsedHeight: InputSignal<number | string | undefined> = input<\n    number | string | undefined\n  >(undefined);\n  readonly collapsedWidth: InputSignal<number | string | undefined> = input<\n    number | string | undefined\n  >(undefined);\n  readonly lazyMount: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n  readonly unmountOnExit: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n  readonly exitComplete: OutputEmitterRef<void> = output<void>();\n\n  private readonly machine = useCollapsible({\n    context: () => ({\n      id: this.id(),\n      ids: this.ids(),\n      open: this.open(),\n      defaultOpen: this.defaultOpen(),\n      disabled: this.disabled(),\n      collapsedHeight: this.collapsedHeight(),\n      collapsedWidth: this.collapsedWidth(),\n      lazyMount: this.lazyMount(),\n      unmountOnExit: this.unmountOnExit(),\n      onOpenChange: (details) => {\n        this.openChange.emit(details);\n      },\n      onExitComplete: () => {\n        this.exitComplete.emit();\n      },\n    }),\n  });\n\n  readonly state: Signal<collapsible.Service[\"state\"]> = this.machine.state;\n  readonly api: Signal<collapsible.Api> = this.machine.api;\n  readonly isUnmounted: Signal<boolean> = computed(() => this.machine.isUnmounted());\n  readonly service: collapsible.Service = this.machine.service;\n  readonly send: collapsible.Service[\"send\"] = this.machine.send;\n\n  protected readonly arkContextCarrier: ContextCarrier<CollapsibleRoot> =\n    buildRootCarrier<CollapsibleRoot>({\n      root: this,\n      rootToken: COLLAPSIBLE_CONTEXT as ProviderToken<CollapsibleRoot>,\n      originInjector: inject(Injector),\n      environmentInjector: inject(EnvironmentInjector),\n    });\n\n  constructor() {\n    bindProps({\n      elementRef: inject(ElementRef),\n      renderer: inject(Renderer2),\n      destroyRef: inject(DestroyRef),\n      props: () => this.api().getRootProps(),\n    });\n  }\n}\n","import type * as collapsible from \"@wirekyt/dom/machines/collapsible\";\n\nimport {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  Renderer2,\n  type InputSignal,\n  type Signal,\n  computed,\n  forwardRef,\n  inject,\n  input,\n} from \"@angular/core\";\nimport { bindProps } from \"@wirekyt/angular\";\n\nimport { UseCollapsibleReturn } from \"./use\";\nimport { COLLAPSIBLE_CONTEXT } from \"./use-context\";\n\n@Directive({\n  selector: \"[collapsibleRootProvider]\",\n  standalone: true,\n  exportAs: \"collapsibleRootProvider\",\n  providers: [\n    { provide: COLLAPSIBLE_CONTEXT, useExisting: forwardRef(() => CollapsibleRootProvider) },\n  ],\n})\nexport class CollapsibleRootProvider implements UseCollapsibleReturn {\n  readonly value: InputSignal<UseCollapsibleReturn> = input.required<UseCollapsibleReturn>();\n  readonly state: Signal<collapsible.Service[\"state\"]> = computed(() => this.value().state());\n  readonly api: Signal<collapsible.Api> = computed(() => this.value().api());\n  readonly isUnmounted: Signal<boolean> = computed(() => this.value().isUnmounted());\n  readonly send: collapsible.Service[\"send\"] = (event) => this.value().send(event);\n\n  get service(): collapsible.Service {\n    return this.value().service;\n  }\n\n  constructor() {\n    bindProps({\n      elementRef: inject(ElementRef),\n      renderer: inject(Renderer2),\n      destroyRef: inject(DestroyRef),\n      props: () => this.api().getRootProps(),\n    });\n  }\n}\n","import { DestroyRef, Directive, ElementRef, Renderer2, inject } from \"@angular/core\";\nimport { bindProps } from \"@wirekyt/angular\";\n\nimport { injectCollapsibleContext } from \"./use-context\";\n\n@Directive({\n  selector: \"[collapsibleTrigger]\",\n  standalone: true,\n  exportAs: \"collapsibleTrigger\",\n})\nexport class CollapsibleTrigger {\n  constructor() {\n    const context = injectCollapsibleContext();\n    bindProps({\n      elementRef: inject(ElementRef),\n      renderer: inject(Renderer2),\n      destroyRef: inject(DestroyRef),\n      props: () => context.api().getTriggerProps(),\n    });\n  }\n}\n","import {\n  DestroyRef,\n  Directive,\n  ElementRef,\n  EmbeddedViewRef,\n  Renderer2,\n  TemplateRef,\n  ViewContainerRef,\n  effect,\n  inject,\n} from \"@angular/core\";\nimport { bindProps } from \"@wirekyt/angular\";\n\nimport { injectCollapsibleContext } from \"./use-context\";\n\n@Directive({\n  selector: \"[collapsibleContent]\",\n  standalone: true,\n  exportAs: \"collapsibleContent\",\n})\nexport class CollapsibleContent {\n  private readonly context = injectCollapsibleContext();\n  private readonly template = inject(TemplateRef<unknown>);\n  private readonly viewContainer = inject(ViewContainerRef);\n  private readonly elementRef = { nativeElement: null as HTMLElement | null };\n  private view: EmbeddedViewRef<unknown> | undefined;\n\n  constructor() {\n    effect(() => {\n      if (this.context.isUnmounted()) {\n        this.elementRef.nativeElement = null;\n        this.viewContainer.clear();\n        this.view = undefined;\n        return;\n      }\n\n      if (!this.view) {\n        this.view = this.viewContainer.createEmbeddedView(this.template);\n        this.elementRef.nativeElement =\n          this.view.rootNodes.find((node: Node) => node.nodeType === 1) ?? null;\n      }\n    });\n\n    bindProps({\n      elementRef: this.elementRef as ElementRef<HTMLElement>,\n      renderer: inject(Renderer2),\n      destroyRef: inject(DestroyRef),\n      props: () => {\n        this.context.isUnmounted();\n        return this.context.api().getContentProps();\n      },\n    });\n  }\n}\n","import { DestroyRef, Directive, ElementRef, Renderer2, inject } from \"@angular/core\";\nimport { bindProps } from \"@wirekyt/angular\";\n\nimport { injectCollapsibleContext } from \"./use-context\";\n\n@Directive({\n  selector: \"[collapsibleIndicator]\",\n  standalone: true,\n  exportAs: \"collapsibleIndicator\",\n})\nexport class CollapsibleIndicator {\n  constructor() {\n    const context = injectCollapsibleContext();\n    bindProps({\n      elementRef: inject(ElementRef),\n      renderer: inject(Renderer2),\n      destroyRef: inject(DestroyRef),\n      props: () => context.api().getIndicatorProps(),\n    });\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/dist/fesm2022/wirekyt-angular.mjs

@@ -1,8 +1,10 @@
 import { createScope, MachineStatus, hasTag, matchesState, getExitEnterStates, INIT_STATE, resolveStateValue, findTransition } from '@wirekyt/dom';
 export { mergeProps } from '@wirekyt/dom';
-import { RendererStyleFlags2, effect, inject, DestroyRef, signal, computed, untracked, afterNextRender } from '@angular/core';
+import * as i0 from '@angular/core';
+import { RendererStyleFlags2, effect, inject, DestroyRef, signal, computed, untracked, afterNextRender, InjectionToken, PLATFORM_ID, Injectable, createComponent, Injector, isDevMode } from '@angular/core';
 import { compact, isFunction, toArray, warn, isString, ensure, isEqual, callAll } from '@wirekyt/dom/utils';
 import { createNormalizer } from '@wirekyt/dom/types';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 
 const isAttributeKey = (key) => key === "role" ||
     key === "id" ||
@@ -98,6 +100,7 @@ const computeStyleMap = (value) => {
 function bindProps(options) {
     const { elementRef, renderer, destroyRef } = options;
     let prev = {};
+    let prevElement = null;
     const listeners = new Map();
     const appliedClasses = new Set();
     const appliedStyles = new Set();
@@ -155,11 +158,29 @@ function bindProps(options) {
         }
         appliedStyles.clear();
     };
+    const resetElement = (el) => {
+        for (const { dispose } of listeners.values())
+            dispose();
+        listeners.clear();
+        if (el) {
+            removeAllClasses(el);
+            removeAllStyles(el);
+        }
+        else {
+            appliedClasses.clear();
+            appliedStyles.clear();
+        }
+        prev = {};
+    };
     effect(() => {
         const el = elementRef.nativeElement;
+        const next = (options.props() ?? {});
+        if (el !== prevElement) {
+            resetElement(prevElement);
+            prevElement = el;
+        }
         if (!el)
             return;
-        const next = (options.props() ?? {});
         for (const key of Object.keys(next)) {
             const nextValue = next[key];
             const prevValue = prev[key];
@@ -191,7 +212,8 @@ function bindProps(options) {
                 continue;
             }
             if (isAttributeKey(key)) {
-                if (nextValue == null || nextValue === false) {
+                const remove = nextValue == null || (nextValue === false && !key.startsWith("aria-"));
+                if (remove) {
                     if (prevValue !== undefined && prevValue !== null && prevValue !== false) {
                         removeAttribute(el, key);
                     }
@@ -238,16 +260,8 @@ function bindProps(options) {
         prev = { ...next };
     });
     destroyRef.onDestroy(() => {
-        const el = elementRef.nativeElement;
-        for (const { dispose } of listeners.values()) {
-            dispose();
-        }
-        listeners.clear();
-        if (el) {
-            removeAllClasses(el);
-            removeAllStyles(el);
-        }
-        prev = {};
+        resetElement(prevElement);
+        prevElement = null;
     });
 }
 
@@ -706,9 +720,293 @@ function useMachine(options) {
     };
 }
 
+const ENVIRONMENT_TOKEN = new InjectionToken("WIREKIT.ENVIRONMENT_TOKEN");
+const createDefaultContext = (platformId) => ({
+    getRootNode: () => (isPlatformBrowser(platformId) ? document : undefined),
+});
+function provideEnvironment(config = {}) {
+    return {
+        provide: ENVIRONMENT_TOKEN,
+        useFactory: () => {
+            if (config.getRootNode) {
+                const getRootNode = config.getRootNode;
+                return { getRootNode };
+            }
+            const platformId = inject(PLATFORM_ID);
+            return createDefaultContext(platformId);
+        },
+    };
+}
+function injectEnvironment() {
+    const platformId = inject(PLATFORM_ID);
+    const ctx = inject(ENVIRONMENT_TOKEN, { optional: true });
+    return ctx ?? createDefaultContext(platformId);
+}
+
+const MODALITY_KEYS = new Set([
+    "Tab",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Enter",
+    "Escape",
+    " ",
+]);
+function isModalityKey(key) {
+    return MODALITY_KEYS.has(key);
+}
+class InteractionService {
+    _modality = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_modality" }] : /* istanbul ignore next */ []));
+    modality = this._modality.asReadonly();
+    isFocusVisible = computed(() => this._modality() === "keyboard", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFocusVisible" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const platformId = inject(PLATFORM_ID);
+        const document = inject(DOCUMENT);
+        const destroyRef = inject(DestroyRef);
+        if (!isPlatformBrowser(platformId))
+            return;
+        const onPointer = () => this._modality.set("pointer");
+        const onKey = (event) => {
+            if (isModalityKey(event.key))
+                this._modality.set("keyboard");
+        };
+        document.addEventListener("pointerdown", onPointer, true);
+        document.addEventListener("keydown", onKey, true);
+        destroyRef.onDestroy(() => {
+            document.removeEventListener("pointerdown", onPointer, true);
+            document.removeEventListener("keydown", onKey, true);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InteractionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InteractionService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InteractionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+const INTERACTION_TOKEN = new InjectionToken("WIREKIT.INTERACTION_TOKEN");
+function provideInteraction() {
+    return [InteractionService, { provide: INTERACTION_TOKEN, useExisting: InteractionService }];
+}
+function injectInteraction() {
+    const ctx = inject(INTERACTION_TOKEN, { optional: true });
+    if (ctx)
+        return ctx;
+    return {
+        modality: signal(null).asReadonly(),
+        isFocusVisible: signal(false).asReadonly(),
+    };
+}
+
+const DEFAULT_LOCALE = "en-US";
+const RTL_LANG_CODES = new Set([
+    "ae",
+    "ar",
+    "arc",
+    "bcc",
+    "bqi",
+    "ckb",
+    "dv",
+    "fa",
+    "glk",
+    "he",
+    "iw",
+    "khw",
+    "ks",
+    "ku",
+    "mzn",
+    "nqo",
+    "pnb",
+    "ps",
+    "sd",
+    "ug",
+    "ur",
+    "yi",
+]);
+function getDirection(locale) {
+    const lang = locale.toLowerCase().split("-")[0] ?? "";
+    return RTL_LANG_CODES.has(lang) ? "rtl" : "ltr";
+}
+const LOCALE_TOKEN = new InjectionToken("WIREKYT.LOCALE_TOKEN");
+function provideLocale(config = {}) {
+    return {
+        provide: LOCALE_TOKEN,
+        useFactory: () => {
+            const locale = config.locale ?? DEFAULT_LOCALE;
+            const dir = config.dir ?? getDirection(locale);
+            return { locale, dir };
+        },
+    };
+}
+function injectLocale() {
+    const ctx = inject(LOCALE_TOKEN, { optional: true });
+    return ctx ?? { locale: DEFAULT_LOCALE, dir: getDirection(DEFAULT_LOCALE) };
+}
+const collatorCache = new Map();
+const dateFormatterCache = new Map();
+const filterCache = new Map();
+const MAX_CACHE_SIZE = 64;
+const stableSerialize = (value) => {
+    if (value === null || typeof value !== "object")
+        return JSON.stringify(value);
+    if (Array.isArray(value))
+        return `[${value.map(stableSerialize).join(",")}]`;
+    const record = value;
+    return `{${Object.keys(record)
+        .sort()
+        .filter((key) => record[key] !== undefined)
+        .map((key) => `${JSON.stringify(key)}:${stableSerialize(record[key])}`)
+        .join(",")}}`;
+};
+const cacheKey = (locale, options) => `${locale}:${stableSerialize(options ?? {})}`;
+const setCached = (cache, key, value) => {
+    if (!cache.has(key) && cache.size >= MAX_CACHE_SIZE) {
+        const oldest = cache.keys().next().value;
+        if (oldest !== undefined)
+            cache.delete(oldest);
+    }
+    cache.set(key, value);
+};
+function getCollator(locale, options) {
+    const key = cacheKey(locale, options);
+    let collator = collatorCache.get(key);
+    if (!collator) {
+        collator = new Intl.Collator(locale, options);
+        setCached(collatorCache, key, collator);
+    }
+    return collator;
+}
+function getDateFormatter(locale, options) {
+    const key = cacheKey(locale, options);
+    let formatter = dateFormatterCache.get(key);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat(locale, options);
+        setCached(dateFormatterCache, key, formatter);
+    }
+    return formatter;
+}
+function getFilter(locale, options = { sensitivity: "base" }) {
+    const normalizedOptions = { ...options, usage: "search" };
+    const key = cacheKey(locale, normalizedOptions);
+    const cached = filterCache.get(key);
+    if (cached)
+        return cached;
+    const collator = getCollator(locale, normalizedOptions);
+    const filter = {
+        contains(s, sub) {
+            if (sub.length === 0)
+                return true;
+            for (let i = 0; i + sub.length <= s.length; i++) {
+                if (collator.compare(s.slice(i, i + sub.length), sub) === 0)
+                    return true;
+            }
+            return false;
+        },
+        startsWith(s, sub) {
+            if (sub.length > s.length)
+                return false;
+            return collator.compare(s.slice(0, sub.length), sub) === 0;
+        },
+        endsWith(s, sub) {
+            if (sub.length > s.length)
+                return false;
+            return collator.compare(s.slice(s.length - sub.length), sub) === 0;
+        },
+    };
+    setCached(filterCache, key, filter);
+    return filter;
+}
+
+function createContextCarrier(options) {
+    return {
+        originInjector: options.originInjector,
+        environmentInjector: options.environmentInjector,
+        elementInjector: options.elementInjector,
+        root: options.root,
+    };
+}
+function createEmbeddedViewWithCarrier(viewContainer, template, carrier, context) {
+    return viewContainer.createEmbeddedView(template, context, {
+        injector: carrier.elementInjector,
+    });
+}
+function createComponentWithCarrier(component, carrier) {
+    return createComponent(component, {
+        environmentInjector: carrier.environmentInjector,
+        elementInjector: carrier.elementInjector,
+    });
+}
+function buildRootCarrier(options) {
+    const elementInjector = Injector.create({
+        parent: options.originInjector,
+        providers: [
+            { provide: options.rootToken, useValue: options.root },
+            ...(options.providers ?? []),
+        ],
+    });
+    return createContextCarrier({
+        originInjector: options.originInjector,
+        environmentInjector: options.environmentInjector,
+        elementInjector,
+        root: options.root,
+    });
+}
+
+const warnMixedFormAndModelBinding = (componentName) => {
+    if (!isDevMode())
+        return;
+    console.warn(`[@wyrekit/angular] ${componentName}: a form binding and [(value)] are both present on the same root. The form binding remains the source of truth.`);
+};
+
+const noopChange = (_value) => { };
+const noopTouched = () => { };
+const createCvaController = (options) => {
+    let onChange = noopChange;
+    let onTouched = noopTouched;
+    let warned = false;
+    const maybeWarn = () => {
+        if (warned)
+            return;
+        if (!options.hasExternalModelBinding())
+            return;
+        warned = true;
+        warnMixedFormAndModelBinding(options.componentName);
+    };
+    return {
+        writeValue(value) {
+            maybeWarn();
+            options.value.set(value === null ? undefined : value);
+        },
+        registerOnChange(fn) {
+            maybeWarn();
+            onChange = fn;
+        },
+        registerOnTouched(fn) {
+            onTouched = fn;
+        },
+        setDisabledState(disabled) {
+            options.setDisabled(disabled);
+        },
+        notifyValueChange(value) {
+            onChange(value);
+        },
+        markTouched() {
+            onTouched();
+        },
+    };
+};
+
+let counter = 0;
+const createId = () => {
+    counter += 1;
+    return String(counter);
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { bindProps, normalizeProps, useMachine };
+export { DEFAULT_LOCALE, ENVIRONMENT_TOKEN, INTERACTION_TOKEN, InteractionService, LOCALE_TOKEN, bindProps, buildRootCarrier, createComponentWithCarrier, createContextCarrier, createCvaController, createEmbeddedViewWithCarrier, createId, getCollator, getDateFormatter, getDirection, getFilter, injectEnvironment, injectInteraction, injectLocale, normalizeProps, provideEnvironment, provideInteraction, provideLocale, useMachine, warnMixedFormAndModelBinding };
 //# sourceMappingURL=wirekyt-angular.mjs.map