@radix-ng/primitives 0.42.0 → 0.44.0

package/fesm2022/radix-ng-primitives-popper.mjs

@@ -0,0 +1,418 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, contentChild, computed, DestroyRef, Injector, PLATFORM_ID, input, numberAttribute, booleanAttribute, output, forwardRef, resource, afterNextRender, EnvironmentInjector, effect, createComponent, inputBinding } from '@angular/core';
+import { RdxArrow } from '@radix-ng/primitives/arrow';
+import { isPlatformBrowser } from '@angular/common';
+import { computePosition, offset, shift, flip, size, arrow, hide, limitShift, autoUpdate } from '@floating-ui/dom';
+import { createContext, elementSize } from '@radix-ng/primitives/core';
+
+class RdxPopperAnchor {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopperAnchor, isStandalone: true, selector: "[rdxPopperAnchor]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopperAnchor]'
+                }]
+        }] });
+
+class RdxPopper {
+    constructor() {
+        this.anchor = contentChild.required(RdxPopperAnchor);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxPopper, isStandalone: true, selector: "[rdxPopperRoot]", queries: [{ propertyName: "anchor", first: true, predicate: RdxPopperAnchor, descendants: true, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopperRoot]'
+                }]
+        }] });
+
+class RdxPopperContent {
+    constructor() {
+        this.popperContentWrapper = injectPopperContentWrapperContext();
+        /**
+         * if the PopperContent hasn't been placed yet (not all measurements done)
+         * we prevent animations so that users's animation don't kick in too early referring wrong sides
+         */
+        this.style = computed(() => ({
+            animation: !this.popperContentWrapper.isPositioned() ? 'none' : undefined
+        }), ...(ngDevMode ? [{ debugName: "style" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxPopperContent, isStandalone: true, selector: "[rdxPopperContent]", host: { properties: { "attr.data-side": "popperContentWrapper.placedSide()", "attr.data-align": "popperContentWrapper.placedAlign()", "style": "style()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopperContent]',
+                    host: {
+                        '[attr.data-side]': 'popperContentWrapper.placedSide()',
+                        '[attr.data-align]': 'popperContentWrapper.placedAlign()',
+                        '[style]': 'style()'
+                    }
+                }]
+        }] });
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'];
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ALIGN_OPTIONS = ['start', 'center', 'end'];
+function isNotNull(value) {
+    return value !== null;
+}
+function transformOrigin(options) {
+    return {
+        name: 'transformOrigin',
+        options,
+        fn(data) {
+            const { placement, rects, middlewareData } = data;
+            const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+            const isArrowHidden = cannotCenterArrow;
+            const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+            const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+            const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+            const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];
+            const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+            const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+            let x = '';
+            let y = '';
+            if (placedSide === 'bottom') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${-arrowHeight}px`;
+            }
+            else if (placedSide === 'top') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${rects.floating.height + arrowHeight}px`;
+            }
+            else if (placedSide === 'right') {
+                x = `${-arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            else if (placedSide === 'left') {
+                x = `${rects.floating.width + arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            return { data: { x, y } };
+        }
+    };
+}
+function getSideAndAlignFromPlacement(placement) {
+    const [side, align = 'center'] = placement.split('-');
+    return [side, align];
+}
+
+const context = () => {
+    const popperContentWrapper = inject(RdxPopperContentWrapper);
+    return {
+        placedSide: popperContentWrapper.placedSide,
+        placedAlign: popperContentWrapper.placedAlign,
+        arrowX: popperContentWrapper.arrowX,
+        arrowY: popperContentWrapper.arrowY,
+        shouldHideArrow: popperContentWrapper.shouldHideArrow,
+        isPositioned: popperContentWrapper.isPositioned
+    };
+};
+const [injectPopperContentWrapperContext, providePopperContentWrapperContext] = createContext('PopperContentWrapperContext');
+class RdxPopperContentWrapper {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        this.context = inject(RdxPopper);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        /**
+         * The preferred side of the anchor to render against when open.
+         * Will be reversed when collisions occur and avoidCollisions is enabled.
+         */
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : []));
+        /**
+         * Distance between the anchor and the popup in pixels.
+         */
+        this.sideOffset = input(0, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * How to align the popup relative to the specified side. May change when collisions occur.
+         */
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+        /** An offset in pixels from the `start` or `end` alignment options. */
+        this.alignOffset = input(0, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * Minimum distance to maintain between the arrow and the edges of the popup.
+         * If your content has border-radius, this will prevent it from overflowing the corners.
+         */
+        this.arrowPadding = input(0, ...(ngDevMode ? [{ debugName: "arrowPadding", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /** When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges. */
+        this.avoidCollisions = input(true, ...(ngDevMode ? [{ debugName: "avoidCollisions", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * The element used as the collision boundary.
+         * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+         */
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : []));
+        /**
+         * The distance in pixels from the boundary edges where collision detection should occur.
+         * Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
+         */
+        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : []));
+        /**
+         * The sticky behavior on the align axis. `partial` will keep the
+         * content in the boundary as long as the trigger is at least partially
+         * in the boundary whilst "always" will keep the content in the boundary
+         * regardless.
+         */
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+        /**
+         * Whether to hide the content when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, ...(ngDevMode ? [{ debugName: "hideWhenDetached", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         *  The type of CSS position property to use.
+         */
+        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : []));
+        /**
+         * Strategy to update the position of the floating element on every animation frame.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : []));
+        /**
+         * Emits when the element is placed.
+         */
+        this.placed = output();
+        this.arrow = contentChild(forwardRef(() => RdxPopperArrow), ...(ngDevMode ? [{ debugName: "arrow" }] : []));
+        this.shouldHideArrow = computed(() => this.position.value()?.middlewareData['arrow']?.centerOffset !== 0, ...(ngDevMode ? [{ debugName: "shouldHideArrow" }] : []));
+        this.arrowX = computed(() => this.position.value()?.middlewareData['arrow']?.x, ...(ngDevMode ? [{ debugName: "arrowX" }] : []));
+        this.arrowY = computed(() => this.position.value()?.middlewareData['arrow']?.y, ...(ngDevMode ? [{ debugName: "arrowY" }] : []));
+        this.desiredPlacement = computed(() => (this.side() + (this.align() !== 'center' ? '-' + this.align() : '')), ...(ngDevMode ? [{ debugName: "desiredPlacement" }] : []));
+        this.arrowSize = computed(() => {
+            const arrowElementRef = this.arrow()?.elementRef;
+            if (!arrowElementRef) {
+                return computed(() => ({
+                    height: 0,
+                    width: 0
+                }));
+            }
+            return elementSize({
+                elementRef: arrowElementRef,
+                injector: this.injector
+            });
+        }, ...(ngDevMode ? [{ debugName: "arrowSize" }] : []));
+        this.boundary = computed(() => {
+            const boundary = this.collisionBoundary();
+            if (Array.isArray(boundary)) {
+                return boundary.map((e) => e.nativeElement);
+            }
+            if (!boundary) {
+                return [];
+            }
+            return [boundary.nativeElement];
+        }, ...(ngDevMode ? [{ debugName: "boundary" }] : []));
+        this.hasExplicitBoundaries = computed(() => this.boundary().length > 0, ...(ngDevMode ? [{ debugName: "hasExplicitBoundaries" }] : []));
+        this.detectOverflowOptions = computed(() => ({
+            padding: this.collisionPadding(),
+            boundary: this.boundary().filter(isNotNull),
+            // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+            altBoundary: this.hasExplicitBoundaries()
+        }), ...(ngDevMode ? [{ debugName: "detectOverflowOptions" }] : []));
+        this.position = resource({
+            loader: () => computePosition(this.context.anchor().elementRef.nativeElement, this.elementRef.nativeElement, {
+                // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+                strategy: this.positionStrategy(),
+                placement: this.desiredPlacement(),
+                middleware: [
+                    offset({
+                        mainAxis: this.sideOffset() + this.arrowSize()().height || 0,
+                        alignmentAxis: this.alignOffset()
+                    }),
+                    this.avoidCollisions() &&
+                        shift({
+                            mainAxis: true,
+                            crossAxis: false,
+                            limiter: this.sticky() === 'partial' ? limitShift() : undefined,
+                            ...this.detectOverflowOptions()
+                        }),
+                    this.avoidCollisions() && flip({ ...this.detectOverflowOptions() }),
+                    size({
+                        ...this.detectOverflowOptions(),
+                        apply: ({ elements, rects, availableWidth, availableHeight }) => {
+                            const { width: anchorWidth, height: anchorHeight } = rects.reference;
+                            const contentStyle = elements.floating.style;
+                            contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);
+                            contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);
+                            contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);
+                            contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);
+                        }
+                    }),
+                    this.arrow() &&
+                        arrow({
+                            element: this.arrow().elementRef.nativeElement,
+                            padding: this.arrowPadding()
+                        }),
+                    transformOrigin({
+                        arrowWidth: this.arrowSize()().width,
+                        arrowHeight: this.arrowSize()().height
+                    }),
+                    this.hideWhenDetached() &&
+                        hide({
+                            strategy: 'referenceHidden',
+                            ...this.detectOverflowOptions()
+                        })
+                ]
+            })
+        });
+        /**
+         * Whether the panel is positioned.
+         */
+        this.isPositioned = computed(() => this.position.hasValue(), ...(ngDevMode ? [{ debugName: "isPositioned" }] : []));
+        /**
+         * The current placement of the panel.
+         */
+        this.placement = computed(() => {
+            const placement = this.position.value()?.placement;
+            if (!placement) {
+                return;
+            }
+            const [side, align = 'center'] = placement.split('-');
+            return {
+                side: side,
+                align: align
+            };
+        }, ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        /**
+         * The side the panel is currently placed against.
+         */
+        this.placedSide = computed(() => this.placement()?.side, ...(ngDevMode ? [{ debugName: "placedSide" }] : []));
+        /**
+         * The current alignment of the panel.
+         */
+        this.placedAlign = computed(() => this.placement()?.align, ...(ngDevMode ? [{ debugName: "placedAlign" }] : []));
+        this.contentElementRef = contentChild.required(RdxPopperContent, {
+            read: ElementRef
+        });
+        this.contentZIndex = computed(() => {
+            if (!this.isBrowser) {
+                return 0;
+            }
+            return getComputedStyle(this.contentElementRef().nativeElement).zIndex;
+        }, ...(ngDevMode ? [{ debugName: "contentZIndex" }] : []));
+        this.style = computed(() => {
+            const pos = this.position.value();
+            const x = pos?.x;
+            const y = pos?.y;
+            const ready = Number.isFinite(x) && Number.isFinite(y);
+            return {
+                position: this.positionStrategy(),
+                transform: this.isPositioned() ? '' : 'translate(0, -200%)', // keep off the page when measuring
+                minWidth: 'max-content',
+                zIndex: this.contentZIndex(),
+                top: Number.isFinite(y) ? `${y}px` : '',
+                left: Number.isFinite(x) ? `${x}px` : '',
+                '--radix-popper-transform-origin': [
+                    pos?.middlewareData['transformOrigin']?.x,
+                    pos?.middlewareData['transformOrigin']?.y
+                ].join(' '),
+                visibility: ready ? 'visible' : 'hidden',
+                pointerEvents: ready ? 'auto' : 'none',
+                // hide the content if using the hide middleware and should be hidden
+                // set visibility to hidden and disable pointer events so the UI behaves
+                // as if the PopperContent isn't there at all
+                ...(pos?.middlewareData.hide?.referenceHidden && {
+                    visibility: 'hidden',
+                    pointerEvents: 'none'
+                })
+            };
+        }, ...(ngDevMode ? [{ debugName: "style" }] : []));
+        this.afterNextRender = afterNextRender(() => {
+            this.position.reload();
+            const cleanup = autoUpdate(this.context.anchor().elementRef.nativeElement, this.elementRef.nativeElement, () => this.position.reload(), {
+                animationFrame: this.updatePositionStrategy() === 'always'
+            });
+            this.destroyRef.onDestroy(() => {
+                cleanup();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxPopperContentWrapper, isStandalone: true, selector: "[rdxPopperContentWrapper]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { attributes: { "data-radix-popper-content-wrapper": "" }, properties: { "style": "style()" } }, providers: [providePopperContentWrapperContext(context)], queries: [{ propertyName: "arrow", first: true, predicate: i0.forwardRef(() => RdxPopperArrow), descendants: true, isSignal: true }, { propertyName: "contentElementRef", first: true, predicate: RdxPopperContent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperContentWrapper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopperContentWrapper]',
+                    providers: [providePopperContentWrapperContext(context)],
+                    host: {
+                        'data-radix-popper-content-wrapper': '',
+                        '[style]': 'style()'
+                    }
+                }]
+        }] });
+
+const OPPOSITE_SIDE = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+};
+class RdxPopperArrow {
+    constructor() {
+        this.popperContentContext = injectPopperContentWrapperContext();
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.elementRef = inject(ElementRef);
+        this.width = input(10, ...(ngDevMode ? [{ debugName: "width", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.height = input(5, ...(ngDevMode ? [{ debugName: "height", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.baseSide = computed(() => OPPOSITE_SIDE[this.popperContentContext.placedSide()], ...(ngDevMode ? [{ debugName: "baseSide" }] : []));
+        this.style = computed(() => {
+            return {
+                position: 'absolute',
+                left: this.popperContentContext.arrowX() ? `${this.popperContentContext.arrowX()}px` : undefined,
+                top: this.popperContentContext.arrowY() ? `${this.popperContentContext.arrowY()}px` : undefined,
+                [this.baseSide()]: 0,
+                transformOrigin: {
+                    top: '',
+                    right: '0 0',
+                    bottom: 'center 0',
+                    left: '100% 0'
+                }[this.popperContentContext.placedSide()],
+                transform: {
+                    top: 'translateY(100%)',
+                    right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+                    bottom: `rotate(180deg)`,
+                    left: 'translateY(50%) rotate(-90deg) translateX(50%)'
+                }[this.popperContentContext.placedSide()],
+                visibility: this.popperContentContext.shouldHideArrow() ? 'hidden' : undefined
+            };
+        }, ...(ngDevMode ? [{ debugName: "style" }] : []));
+        this.onCleanup = effect((onCleanup) => {
+            const component = createComponent(RdxArrow, {
+                environmentInjector: this.environmentInjector,
+                hostElement: this.elementRef.nativeElement,
+                projectableNodes: [Array.from(this.elementRef.nativeElement.childNodes)],
+                bindings: [inputBinding('width', () => this.width()), inputBinding('height', () => this.height())]
+            });
+            component.changeDetectorRef.detectChanges();
+            onCleanup(() => component.destroy());
+        }, ...(ngDevMode ? [{ debugName: "onCleanup" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxPopperArrow, isStandalone: true, selector: "[rdxPopperArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "style()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxPopperArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPopperArrow]',
+                    host: {
+                        '[style]': 'style()'
+                    }
+                }]
+        }] });
+
+const popperImports = [RdxPopper, RdxPopperArrow, RdxPopperContentWrapper, RdxPopperContent, RdxPopperAnchor];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxPopper, RdxPopperAnchor, RdxPopperArrow, RdxPopperContent, RdxPopperContentWrapper, getSideAndAlignFromPlacement, injectPopperContentWrapperContext, isNotNull, popperImports, providePopperContentWrapperContext, transformOrigin };
+//# sourceMappingURL=radix-ng-primitives-popper.mjs.map