@wirekyt/angular 0.0.18 → 0.0.20

package/dist/fesm2022/wirekyt-angular-floating-panel.mjs

@@ -0,0 +1,679 @@
+import * as floatingPanel from '@wirekyt/dom/machines/floating-panel';
+export { anatomy as floatingPanelAnatomy, resizeTriggerAxes } from '@wirekyt/dom/machines/floating-panel';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, model, booleanAttribute, output, EnvironmentInjector, Injector, forwardRef, Directive, computed, DestroyRef, Renderer2, ElementRef, TemplateRef, ViewContainerRef, effect, untracked } from '@angular/core';
+import { injectLocale, injectEnvironment, createId, useMachine, buildRootCarrier, bindProps } from '@wirekyt/angular';
+import { PresenceBase, PRESENCE_CONTEXT, injectPresenceContext } from '@wirekyt/angular/presence';
+
+const FLOATING_PANEL_CONTEXT = new InjectionToken("WIREKYT.FLOATING_PANEL_CONTEXT");
+function injectFloatingPanelContext() {
+    return inject(FLOATING_PANEL_CONTEXT);
+}
+const FLOATING_PANEL_CONTEXT_CARRIER = new InjectionToken("WIREKYT.FLOATING_PANEL_CONTEXT_CARRIER");
+function injectFloatingPanelContextCarrier() {
+    return inject(FLOATING_PANEL_CONTEXT_CARRIER);
+}
+const FLOATING_PANEL_RENDER_STRATEGY_CONTEXT = new InjectionToken("WIREKYT.FLOATING_PANEL_RENDER_STRATEGY_CONTEXT");
+function injectFloatingPanelRenderStrategyContext() {
+    return inject(FLOATING_PANEL_RENDER_STRATEGY_CONTEXT);
+}
+
+function useFloatingPanel(options) {
+    const locale = injectLocale();
+    const environment = injectEnvironment();
+    const fallbackId = createId();
+    return useMachine({
+        machine: floatingPanel.machine,
+        context: () => {
+            const props = options.context();
+            return {
+                ...props,
+                dir: locale.dir,
+                getRootNode: environment.getRootNode,
+                id: props.id ?? fallbackId,
+            };
+        },
+        connect: (service, normalize) => floatingPanel.connect(service, normalize),
+    });
+}
+
+const arePointsEqual = (left, right) => left !== undefined && Object.is(left.x, right.x) && Object.is(left.y, right.y);
+const areSizesEqual = (left, right) => left !== undefined && Object.is(left.width, right.width) && Object.is(left.height, right.height);
+const areDetailsEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+class FloatingPanelRoot extends PresenceBase {
+    /** The unique identifier of the floating panel. */
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** The ids of the floating panel elements. Useful for composition. */
+    ids = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    /** The controlled open state of the floating panel. */
+    open = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** The initial open state of the floating panel when uncontrolled. */
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The controlled position of the floating panel. */
+    position = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** The initial position of the floating panel when uncontrolled. */
+    defaultPosition = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPosition" }] : /* istanbul ignore next */ []));
+    /** The controlled size of the floating panel. */
+    size = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** The initial size of the floating panel when uncontrolled. */
+    defaultSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []));
+    /** The minimum size of the floating panel. */
+    minSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /** The maximum size of the floating panel. */
+    maxSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** The positioning strategy to use. */
+    strategy = input("fixed", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strategy" }] : /* istanbul ignore next */ []));
+    /** Whether the panel may overflow the boundary while dragging. */
+    allowOverflow = input(true, { ...(ngDevMode ? { debugName: "allowOverflow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the floating panel is draggable. */
+    draggable = input(true, { ...(ngDevMode ? { debugName: "draggable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the floating panel is resizable. */
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether resizing locks the panel to its aspect ratio. */
+    lockAspectRatio = input(false, { ...(ngDevMode ? { debugName: "lockAspectRatio" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the floating panel closes when the escape key is pressed. */
+    closeOnEscape = input(false, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether focus should be restored when the floating panel closes. */
+    restoreFocus = input(true, { ...(ngDevMode ? { debugName: "restoreFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the floating panel is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether size and position should be preserved when the floating panel closes. */
+    persistRect = input(false, { ...(ngDevMode ? { debugName: "persistRect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The snap grid for dragging and keyboard movement. */
+    gridSize = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridSize" }] : /* istanbul ignore next */ []));
+    /** Localized strings for control labels. */
+    translations = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translations" }] : /* istanbul ignore next */ []));
+    /** Function that returns the initial panel position when opened. */
+    getAnchorPosition = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getAnchorPosition" }] : /* istanbul ignore next */ []));
+    /** Function that returns the boundary element for dragging and resizing. */
+    getBoundaryEl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getBoundaryEl" }] : /* istanbul ignore next */ []));
+    /** Element to receive focus when the floating panel opens. */
+    initialFocusEl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialFocusEl" }] : /* istanbul ignore next */ []));
+    /** Element to receive focus when the floating panel closes. */
+    finalFocusEl = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "finalFocusEl" }] : /* istanbul ignore next */ []));
+    /** Emits details when the panel open state changes. */
+    openChangeDetails = output();
+    /** Emits details when the panel position changes via dragging or API calls. */
+    positionDetailsChange = output();
+    /** Emits details when a position-changing drag interaction ends. */
+    positionChangeEnd = output();
+    /** Emits details when the panel size changes via resizing or API calls. */
+    sizeDetailsChange = output();
+    /** Emits details when a size-changing resize interaction ends. */
+    sizeChangeEnd = output();
+    /** Emits details when the panel stage changes. */
+    stageChange = output();
+    lastPositionDetails;
+    lastPositionEndDetails;
+    lastSizeDetails;
+    lastSizeEndDetails;
+    lastStageDetails;
+    machine = useFloatingPanel({
+        context: () => ({
+            id: this.id(),
+            ids: this.ids(),
+            open: this.open(),
+            defaultOpen: this.defaultOpen(),
+            position: this.position(),
+            defaultPosition: this.defaultPosition(),
+            size: this.size(),
+            defaultSize: this.defaultSize(),
+            minSize: this.minSize(),
+            maxSize: this.maxSize(),
+            strategy: this.strategy(),
+            allowOverflow: this.allowOverflow(),
+            draggable: this.draggable(),
+            resizable: this.resizable(),
+            lockAspectRatio: this.lockAspectRatio(),
+            closeOnEscape: this.closeOnEscape(),
+            restoreFocus: this.restoreFocus(),
+            disabled: this.disabled(),
+            persistRect: this.persistRect(),
+            gridSize: this.gridSize(),
+            translations: this.translations(),
+            getAnchorPosition: this.getAnchorPosition(),
+            getBoundaryEl: this.getBoundaryEl(),
+            initialFocusEl: this.initialFocusEl(),
+            finalFocusEl: this.finalFocusEl(),
+            onOpenChange: (details) => {
+                if (this.open() !== details.open) {
+                    this.open.set(details.open);
+                }
+                this.openChangeDetails.emit(details);
+            },
+            onPositionChange: (details) => {
+                if (areDetailsEqual(this.lastPositionDetails, details))
+                    return;
+                this.lastPositionDetails = details;
+                if (!arePointsEqual(this.position(), details.position)) {
+                    this.position.set({ ...details.position });
+                }
+                this.positionDetailsChange.emit(details);
+            },
+            onPositionChangeEnd: (details) => {
+                if (areDetailsEqual(this.lastPositionEndDetails, details))
+                    return;
+                this.lastPositionEndDetails = details;
+                this.positionChangeEnd.emit(details);
+            },
+            onSizeChange: (details) => {
+                if (areDetailsEqual(this.lastSizeDetails, details))
+                    return;
+                this.lastSizeDetails = details;
+                if (!areSizesEqual(this.size(), details.size)) {
+                    this.size.set({ ...details.size });
+                }
+                this.sizeDetailsChange.emit(details);
+            },
+            onSizeChangeEnd: (details) => {
+                if (areDetailsEqual(this.lastSizeEndDetails, details))
+                    return;
+                this.lastSizeEndDetails = details;
+                this.sizeChangeEnd.emit(details);
+            },
+            onStageChange: (details) => {
+                if (areDetailsEqual(this.lastStageDetails, details))
+                    return;
+                this.lastStageDetails = details;
+                this.stageChange.emit(details);
+            },
+        }),
+    });
+    state = this.machine.state;
+    api = this.machine.api;
+    service = this.machine.service;
+    send = this.machine.send;
+    presence = this.createPresence(() => this.api().open);
+    contextCarrier = buildRootCarrier({
+        providers: [
+            { provide: PRESENCE_CONTEXT, useValue: this.presence },
+            { provide: FLOATING_PANEL_RENDER_STRATEGY_CONTEXT, useValue: this },
+        ],
+        root: this,
+        rootToken: FLOATING_PANEL_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    /** @internal Exposed for floating panel part directives to consume through portals. */
+    getContextCarrier() {
+        return this.contextCarrier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelRoot, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: FloatingPanelRoot, isStandalone: true, selector: "[floating-panel-root]", 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 }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null }, allowOverflow: { classPropertyName: "allowOverflow", publicName: "allowOverflow", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, lockAspectRatio: { classPropertyName: "lockAspectRatio", publicName: "lockAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, persistRect: { classPropertyName: "persistRect", publicName: "persistRect", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, translations: { classPropertyName: "translations", publicName: "translations", isSignal: true, isRequired: false, transformFunction: null }, getAnchorPosition: { classPropertyName: "getAnchorPosition", publicName: "getAnchorPosition", isSignal: true, isRequired: false, transformFunction: null }, getBoundaryEl: { classPropertyName: "getBoundaryEl", publicName: "getBoundaryEl", isSignal: true, isRequired: false, transformFunction: null }, initialFocusEl: { classPropertyName: "initialFocusEl", publicName: "initialFocusEl", isSignal: true, isRequired: false, transformFunction: null }, finalFocusEl: { classPropertyName: "finalFocusEl", publicName: "finalFocusEl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", position: "positionChange", size: "sizeChange", openChangeDetails: "openChangeDetails", positionDetailsChange: "positionDetailsChange", positionChangeEnd: "positionChangeEnd", sizeDetailsChange: "sizeDetailsChange", sizeChangeEnd: "sizeChangeEnd", stageChange: "stageChange" }, providers: [
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (root) => root.presence,
+                deps: [forwardRef(() => FloatingPanelRoot)],
+            },
+            {
+                provide: FLOATING_PANEL_RENDER_STRATEGY_CONTEXT,
+                useExisting: forwardRef(() => FloatingPanelRoot),
+            },
+            { provide: FLOATING_PANEL_CONTEXT, useExisting: forwardRef(() => FloatingPanelRoot) },
+            {
+                provide: FLOATING_PANEL_CONTEXT_CARRIER,
+                useFactory: (root) => root.getContextCarrier(),
+                deps: [forwardRef(() => FloatingPanelRoot)],
+            },
+        ], exportAs: ["floatingPanelRoot"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-root]",
+                    standalone: true,
+                    exportAs: "floatingPanelRoot",
+                    providers: [
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (root) => root.presence,
+                            deps: [forwardRef(() => FloatingPanelRoot)],
+                        },
+                        {
+                            provide: FLOATING_PANEL_RENDER_STRATEGY_CONTEXT,
+                            useExisting: forwardRef(() => FloatingPanelRoot),
+                        },
+                        { provide: FLOATING_PANEL_CONTEXT, useExisting: forwardRef(() => FloatingPanelRoot) },
+                        {
+                            provide: FLOATING_PANEL_CONTEXT_CARRIER,
+                            useFactory: (root) => root.getContextCarrier(),
+                            deps: [forwardRef(() => FloatingPanelRoot)],
+                        },
+                    ],
+                }]
+        }], 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 }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }, { type: i0.Output, args: ["sizeChange"] }], defaultSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], strategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "strategy", required: false }] }], allowOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowOverflow", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], lockAspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockAspectRatio", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], persistRect: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistRect", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], translations: [{ type: i0.Input, args: [{ isSignal: true, alias: "translations", required: false }] }], getAnchorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "getAnchorPosition", required: false }] }], getBoundaryEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "getBoundaryEl", required: false }] }], initialFocusEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFocusEl", required: false }] }], finalFocusEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "finalFocusEl", required: false }] }], openChangeDetails: [{ type: i0.Output, args: ["openChangeDetails"] }], positionDetailsChange: [{ type: i0.Output, args: ["positionDetailsChange"] }], positionChangeEnd: [{ type: i0.Output, args: ["positionChangeEnd"] }], sizeDetailsChange: [{ type: i0.Output, args: ["sizeDetailsChange"] }], sizeChangeEnd: [{ type: i0.Output, args: ["sizeChangeEnd"] }], stageChange: [{ type: i0.Output, args: ["stageChange"] }] } });
+
+class FloatingPanelRootProvider extends PresenceBase {
+    /** The floating panel machine returned by useFloatingPanel(). */
+    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 */ []));
+    send = (event) => this.value().send(event);
+    get service() {
+        return this.value().service;
+    }
+    presence = this.createPresence(() => {
+        try {
+            return this.api().open;
+        }
+        catch {
+            return false;
+        }
+    });
+    contextCarrier = buildRootCarrier({
+        providers: [
+            { provide: PRESENCE_CONTEXT, useValue: this.presence },
+            { provide: FLOATING_PANEL_RENDER_STRATEGY_CONTEXT, useValue: this },
+        ],
+        root: this,
+        rootToken: FLOATING_PANEL_CONTEXT,
+        originInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+    });
+    /** @internal Exposed for floating panel part directives to consume through portals. */
+    getContextCarrier() {
+        return this.contextCarrier;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelRootProvider, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: FloatingPanelRootProvider, isStandalone: true, selector: "[floating-panel-root-provider]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            {
+                provide: PRESENCE_CONTEXT,
+                useFactory: (provider) => provider.presence,
+                deps: [forwardRef(() => FloatingPanelRootProvider)],
+            },
+            {
+                provide: FLOATING_PANEL_RENDER_STRATEGY_CONTEXT,
+                useExisting: forwardRef(() => FloatingPanelRootProvider),
+            },
+            {
+                provide: FLOATING_PANEL_CONTEXT,
+                useExisting: forwardRef(() => FloatingPanelRootProvider),
+            },
+            {
+                provide: FLOATING_PANEL_CONTEXT_CARRIER,
+                useFactory: (provider) => provider.getContextCarrier(),
+                deps: [forwardRef(() => FloatingPanelRootProvider)],
+            },
+        ], exportAs: ["floatingPanelRootProvider"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelRootProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-root-provider]",
+                    standalone: true,
+                    exportAs: "floatingPanelRootProvider",
+                    providers: [
+                        {
+                            provide: PRESENCE_CONTEXT,
+                            useFactory: (provider) => provider.presence,
+                            deps: [forwardRef(() => FloatingPanelRootProvider)],
+                        },
+                        {
+                            provide: FLOATING_PANEL_RENDER_STRATEGY_CONTEXT,
+                            useExisting: forwardRef(() => FloatingPanelRootProvider),
+                        },
+                        {
+                            provide: FLOATING_PANEL_CONTEXT,
+                            useExisting: forwardRef(() => FloatingPanelRootProvider),
+                        },
+                        {
+                            provide: FLOATING_PANEL_CONTEXT_CARRIER,
+                            useFactory: (provider) => provider.getContextCarrier(),
+                            deps: [forwardRef(() => FloatingPanelRootProvider)],
+                        },
+                    ],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class FloatingPanelTrigger {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        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.3", ngImport: i0, type: FloatingPanelTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelTrigger, isStandalone: true, selector: "[floating-panel-trigger]", exportAs: ["floatingPanelTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-trigger]",
+                    standalone: true,
+                    exportAs: "floatingPanelTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelPositioner {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        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.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;
+                }
+            }
+        });
+        bindProps({
+            elementRef,
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                const unmounted = presence.unmounted();
+                return { ...context.api().getPositionerProps(), hidden: unmounted };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelPositioner, isStandalone: true, selector: "[floating-panel-positioner]", exportAs: ["floatingPanelPositioner"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-positioner]",
+                    standalone: true,
+                    exportAs: "floatingPanelPositioner",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelContent {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        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.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(() => presence.setNode(elementRef.nativeElement));
+        });
+        bindProps({
+            elementRef,
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => {
+                presence.unmounted();
+                return { ...context.api().getContentProps(), ...presence.getPresenceProps() };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelContent, isStandalone: true, selector: "[floating-panel-content]", exportAs: ["floatingPanelContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-content]",
+                    standalone: true,
+                    exportAs: "floatingPanelContent",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelControl {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getControlProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelControl, isStandalone: true, selector: "[floating-panel-control]", exportAs: ["floatingPanelControl"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelControl, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-control]",
+                    standalone: true,
+                    exportAs: "floatingPanelControl",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelHeader {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getHeaderProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelHeader, isStandalone: true, selector: "[floating-panel-header]", exportAs: ["floatingPanelHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-header]",
+                    standalone: true,
+                    exportAs: "floatingPanelHeader",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelBody {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getBodyProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelBody, isStandalone: true, selector: "[floating-panel-body]", exportAs: ["floatingPanelBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-body]",
+                    standalone: true,
+                    exportAs: "floatingPanelBody",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelTitle {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getTitleProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelTitle, isStandalone: true, selector: "[floating-panel-title]", exportAs: ["floatingPanelTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-title]",
+                    standalone: true,
+                    exportAs: "floatingPanelTitle",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelCloseTrigger {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getCloseTriggerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelCloseTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelCloseTrigger, isStandalone: true, selector: "[floating-panel-close-trigger]", exportAs: ["floatingPanelCloseTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelCloseTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-close-trigger]",
+                    standalone: true,
+                    exportAs: "floatingPanelCloseTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelDragTrigger {
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getDragTriggerProps(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelDragTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelDragTrigger, isStandalone: true, selector: "[floating-panel-drag-trigger]", exportAs: ["floatingPanelDragTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelDragTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-drag-trigger]",
+                    standalone: true,
+                    exportAs: "floatingPanelDragTrigger",
+                }]
+        }], ctorParameters: () => [] });
+
+class FloatingPanelResizeTrigger {
+    /** The axis of the resize handle. */
+    axis = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getResizeTriggerProps({ axis: this.axis() }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelResizeTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: FloatingPanelResizeTrigger, isStandalone: true, selector: "[floating-panel-resize-trigger]", inputs: { axis: { classPropertyName: "axis", publicName: "axis", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["floatingPanelResizeTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelResizeTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-resize-trigger]",
+                    standalone: true,
+                    exportAs: "floatingPanelResizeTrigger",
+                }]
+        }], ctorParameters: () => [], propDecorators: { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: true }] }] } });
+
+class FloatingPanelStageTrigger {
+    /** The stage to apply when the trigger is clicked. */
+    stage = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const context = injectFloatingPanelContext();
+        bindProps({
+            elementRef: inject(ElementRef),
+            renderer: inject(Renderer2),
+            destroyRef: inject(DestroyRef),
+            props: () => context.api().getStageTriggerProps({ stage: this.stage() }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelStageTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: FloatingPanelStageTrigger, isStandalone: true, selector: "[floating-panel-stage-trigger]", inputs: { stage: { classPropertyName: "stage", publicName: "stage", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["floatingPanelStageTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelStageTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-stage-trigger]",
+                    standalone: true,
+                    exportAs: "floatingPanelStageTrigger",
+                }]
+        }], ctorParameters: () => [], propDecorators: { stage: [{ type: i0.Input, args: [{ isSignal: true, alias: "stage", required: true }] }] } });
+
+class FloatingPanelContext {
+    static ngTemplateContextGuard(_directive, context) {
+        void context;
+        return true;
+    }
+    floatingPanel = injectFloatingPanelContext();
+    templateRef = inject(TemplateRef);
+    viewContainer = inject(ViewContainerRef);
+    constructor() {
+        const view = this.viewContainer.createEmbeddedView(this.templateRef, {
+            $implicit: this.floatingPanel.api,
+            api: this.floatingPanel.api,
+        });
+        effect(() => {
+            this.floatingPanel.api();
+            view.detectChanges();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelContext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: FloatingPanelContext, isStandalone: true, selector: "[floating-panel-context]", exportAs: ["floatingPanelContext"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FloatingPanelContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[floating-panel-context]",
+                    standalone: true,
+                    exportAs: "floatingPanelContext",
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FLOATING_PANEL_CONTEXT, FLOATING_PANEL_CONTEXT_CARRIER, FLOATING_PANEL_RENDER_STRATEGY_CONTEXT, FloatingPanelBody, FloatingPanelCloseTrigger, FloatingPanelContent, FloatingPanelContext, FloatingPanelControl, FloatingPanelDragTrigger, FloatingPanelHeader, FloatingPanelPositioner, FloatingPanelResizeTrigger, FloatingPanelRoot, FloatingPanelRootProvider, FloatingPanelStageTrigger, FloatingPanelTitle, FloatingPanelTrigger, injectFloatingPanelContext, injectFloatingPanelContextCarrier, injectFloatingPanelRenderStrategyContext, useFloatingPanel };
+//# sourceMappingURL=wirekyt-angular-floating-panel.mjs.map