@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

package/dist/src/nile-popup/nile-popup.js

@@ -0,0 +1,441 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { offsetParent } from 'composed-offset-position';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-popup.css';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-popup
+ *
+ */
+let NilePopup = class NilePopup extends NileElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
+         * down and the popup will be hidden.
+         */
+        this.active = false;
+        /**
+         * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
+         * panel inside of the viewport.
+         */
+        this.placement = 'top';
+        /**
+         * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
+         * clipped, using a `fixed` position strategy can often workaround it.
+         */
+        this.strategy = 'absolute';
+        /** The distance in pixels from which to offset the panel away from its anchor. */
+        this.distance = 0;
+        /** The distance in pixels from which to offset the panel along its anchor. */
+        this.skidding = 0;
+        /**
+         * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
+         * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
+         * `::part(arrow)` in your stylesheet.
+         */
+        this.arrow = false;
+        /**
+         * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+         * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
+         * align the arrow to the start, end, or center of the popover instead.
+         */
+        this.arrowPlacement = 'anchor';
+        /**
+         * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
+         * this will prevent it from overflowing the corners.
+         */
+        this.arrowPadding = 10;
+        /**
+         * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
+         * `flipFallbackPlacements` to further configure how the fallback placement is determined.
+         */
+        this.flip = false;
+        /**
+         * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
+         * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
+         * fallback strategy will be used instead.
+         * */
+        this.flipFallbackPlacements = '';
+        /**
+         * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+         * the popup should be positioned using the best available fit based on available space or as it was initially
+         * preferred.
+         */
+        this.flipFallbackStrategy = 'best-fit';
+        /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
+        this.flipPadding = 0;
+        /** Moves the popup along the axis to keep it in view when clipped. */
+        this.shift = false;
+        /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
+        this.shiftPadding = 0;
+        /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
+        this.autoSizePadding = 0;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        // Start the positioner after the first update
+        await this.updateComplete;
+        this.start();
+    }
+    disconnectedCallback() {
+        this.stop();
+    }
+    async updated(changedProps) {
+        super.updated(changedProps);
+        // Start or stop the positioner when active changes
+        if (changedProps.has('active')) {
+            if (this.active) {
+                this.start();
+            }
+            else {
+                this.stop();
+            }
+        }
+        // Update the anchor when anchor changes
+        if (changedProps.has('anchor')) {
+            this.handleAnchorChange();
+        }
+        // All other properties will trigger a reposition when active
+        if (this.active) {
+            await this.updateComplete;
+            this.reposition();
+        }
+    }
+    async handleAnchorChange() {
+        await this.stop();
+        if (this.anchor && typeof this.anchor === 'string') {
+            // Locate the anchor by id
+            const root = this.getRootNode();
+            this.anchorEl = root.getElementById(this.anchor);
+        }
+        else if (this.anchor instanceof Element) {
+            // Use the anchor's reference
+            this.anchorEl = this.anchor;
+        }
+        else {
+            // Look for a slotted anchor
+            this.anchorEl = this.querySelector('[slot="anchor"]');
+        }
+        // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`
+        // and positioning can't be calculated on them
+        if (this.anchorEl instanceof HTMLSlotElement) {
+            this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0];
+        }
+        /**
+         * NOTE TO DEVELOPERS:
+         * The anchor element is essential for nile-popup to function correctly.
+         * This error was thrown when an anchor (slot="anchor") or anchor reference was not found.
+         *
+         * In many places, developers are using *ngIf or similar conditional rendering directly on the anchor slot
+         * inside <nile-tooltip>, which removes the anchor from the DOM.
+         * As a result, the tooltip remains but cannot be anchored — leading to this error.
+         *
+         * Suggested Fixes:
+         *  - Move *ngIf to a wrapper above <nile-tooltip>
+         *  - OR use the 'disabled' property of nile-tooltip to prevent it from activating without anchor
+         *
+         * For now, this error is commented out to avoid runtime crashes.
+         * Proper usage patterns should be followed instead.
+         */
+        if (!this.anchorEl) {
+            // throw new Error(
+            //   'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'
+            // );
+            return;
+        }
+        this.start();
+    }
+    start() {
+        // We can't start the positioner without an anchor
+        if (!this.anchorEl) {
+            return;
+        }
+        this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
+            this.reposition();
+        });
+    }
+    async stop() {
+        return new Promise(resolve => {
+            if (this.cleanup) {
+                this.cleanup();
+                this.cleanup = undefined;
+                this.removeAttribute('data-current-placement');
+                this.style.removeProperty('--auto-size-available-width');
+                this.style.removeProperty('--auto-size-available-height');
+                requestAnimationFrame(() => resolve());
+            }
+            else {
+                resolve();
+            }
+        });
+    }
+    /** Forces the popup to recalculate and reposition itself. */
+    reposition() {
+        // Nothing to do if the popup is inactive or the anchor doesn't exist
+        if (!this.active || !this.anchorEl) {
+            return;
+        }
+        //
+        // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware
+        //
+        const middleware = [
+            // The offset middleware goes first
+            offset({ mainAxis: this.distance, crossAxis: this.skidding })
+        ];
+        // First we sync width/height
+        if (this.sync) {
+            middleware.push(size({
+                apply: ({ rects }) => {
+                    const syncWidth = this.sync === 'width' || this.sync === 'both';
+                    const syncHeight = this.sync === 'height' || this.sync === 'both';
+                    this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';
+                    this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';
+                }
+            }));
+        }
+        else {
+            // Cleanup styles if we're not matching width/height
+            this.popup.style.width = '';
+            this.popup.style.height = '';
+        }
+        // Then we flip
+        if (this.flip) {
+            middleware.push(flip({
+                boundary: this.flipBoundary,
+                // @ts-expect-error - We're converting a string attribute to an array here
+                fallbackPlacements: this.flipFallbackPlacements,
+                fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',
+                padding: this.flipPadding
+            }));
+        }
+        // Then we shift
+        if (this.shift) {
+            middleware.push(shift({
+                boundary: this.shiftBoundary,
+                padding: this.shiftPadding
+            }));
+        }
+        // Now we adjust the size as needed
+        if (this.autoSize) {
+            middleware.push(size({
+                boundary: this.autoSizeBoundary,
+                padding: this.autoSizePadding,
+                apply: ({ availableWidth, availableHeight }) => {
+                    if (this.autoSize === 'vertical' || this.autoSize === 'both') {
+                        this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);
+                    }
+                    else {
+                        this.style.removeProperty('--auto-size-available-height');
+                    }
+                    if (this.autoSize === 'horizontal' || this.autoSize === 'both') {
+                        this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);
+                    }
+                    else {
+                        this.style.removeProperty('--auto-size-available-width');
+                    }
+                }
+            }));
+        }
+        else {
+            // Cleanup styles if we're no longer using auto-size
+            this.style.removeProperty('--auto-size-available-width');
+            this.style.removeProperty('--auto-size-available-height');
+        }
+        // Finally, we add an arrow
+        if (this.arrow) {
+            middleware.push(arrow({
+                element: this.arrowEl,
+                padding: this.arrowPadding
+            }));
+        }
+        //
+        // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.
+        //
+        //
+        const getOffsetParent = this.strategy === 'absolute'
+            ? (element) => platform.getOffsetParent(element, offsetParent)
+            : platform.getOffsetParent;
+        computePosition(this.anchorEl, this.popup, {
+            placement: this.placement,
+            middleware,
+            strategy: this.strategy,
+            platform: {
+                ...platform,
+                getOffsetParent
+            }
+        }).then(({ x, y, middlewareData, placement }) => {
+            //
+            // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of
+            // that, we'll use the same approach that Floating UI uses.
+            //
+            // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31
+            //
+            const isRtl = getComputedStyle(this).direction === 'rtl';
+            const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]];
+            this.setAttribute('data-current-placement', placement);
+            Object.assign(this.popup.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            });
+            if (this.arrow) {
+                const arrowX = middlewareData.arrow.x;
+                const arrowY = middlewareData.arrow.y;
+                let top = '';
+                let right = '';
+                let bottom = '';
+                let left = '';
+                if (this.arrowPlacement === 'start') {
+                    // Start
+                    const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+                    top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+                    right = isRtl ? value : '';
+                    left = isRtl ? '' : value;
+                }
+                else if (this.arrowPlacement === 'end') {
+                    // End
+                    const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+                    right = isRtl ? '' : value;
+                    left = isRtl ? value : '';
+                    bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+                }
+                else if (this.arrowPlacement === 'center') {
+                    // Center
+                    left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';
+                    top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';
+                }
+                else {
+                    // Anchor (default)
+                    left = typeof arrowX === 'number' ? `${arrowX}px` : '';
+                    top = typeof arrowY === 'number' ? `${arrowY}px` : '';
+                }
+                Object.assign(this.arrowEl.style, {
+                    top,
+                    right,
+                    bottom,
+                    left,
+                    [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'
+                });
+            }
+        });
+        this.emit('reposition');
+    }
+    render() {
+        return html `
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+
+      <div
+        part="popup"
+        class=${classMap({
+            popup: true,
+            'popup--active': this.active,
+            'popup--fixed': this.strategy === 'fixed',
+            'popup--has-arrow': this.arrow
+        })}
+      >
+        <slot></slot>
+        ${this.arrow ? html `<div part="arrow" class="popup__arrow" role="presentation"></div>` : ''}
+      </div>
+    `;
+    }
+};
+NilePopup.styles = styles;
+__decorate([
+    query('.popup')
+], NilePopup.prototype, "popup", void 0);
+__decorate([
+    query('.popup__arrow')
+], NilePopup.prototype, "arrowEl", void 0);
+__decorate([
+    property()
+], NilePopup.prototype, "anchor", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NilePopup.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], NilePopup.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true })
+], NilePopup.prototype, "strategy", void 0);
+__decorate([
+    property({ type: Number })
+], NilePopup.prototype, "distance", void 0);
+__decorate([
+    property({ type: Number })
+], NilePopup.prototype, "skidding", void 0);
+__decorate([
+    property({ type: Boolean })
+], NilePopup.prototype, "arrow", void 0);
+__decorate([
+    property({ attribute: 'arrow-placement' })
+], NilePopup.prototype, "arrowPlacement", void 0);
+__decorate([
+    property({ attribute: 'arrow-padding', type: Number })
+], NilePopup.prototype, "arrowPadding", void 0);
+__decorate([
+    property({ type: Boolean })
+], NilePopup.prototype, "flip", void 0);
+__decorate([
+    property({
+        attribute: 'flip-fallback-placements',
+        converter: {
+            fromAttribute: (value) => {
+                return value
+                    .split(' ')
+                    .map(p => p.trim())
+                    .filter(p => p !== '');
+            },
+            toAttribute: (value) => {
+                return value.join(' ');
+            }
+        }
+    })
+], NilePopup.prototype, "flipFallbackPlacements", void 0);
+__decorate([
+    property({ attribute: 'flip-fallback-strategy' })
+], NilePopup.prototype, "flipFallbackStrategy", void 0);
+__decorate([
+    property({ type: Object })
+], NilePopup.prototype, "flipBoundary", void 0);
+__decorate([
+    property({ attribute: 'flip-padding', type: Number })
+], NilePopup.prototype, "flipPadding", void 0);
+__decorate([
+    property({ type: Boolean })
+], NilePopup.prototype, "shift", void 0);
+__decorate([
+    property({ type: Object })
+], NilePopup.prototype, "shiftBoundary", void 0);
+__decorate([
+    property({ attribute: 'shift-padding', type: Number })
+], NilePopup.prototype, "shiftPadding", void 0);
+__decorate([
+    property({ attribute: 'auto-size' })
+], NilePopup.prototype, "autoSize", void 0);
+__decorate([
+    property()
+], NilePopup.prototype, "sync", void 0);
+__decorate([
+    property({ type: Object })
+], NilePopup.prototype, "autoSizeBoundary", void 0);
+__decorate([
+    property({ attribute: 'auto-size-padding', type: Number })
+], NilePopup.prototype, "autoSizePadding", void 0);
+NilePopup = __decorate([
+    customElement('nile-popup')
+], NilePopup);
+export { NilePopup };
+export default NilePopup;
+//# sourceMappingURL=nile-popup.js.map

package/dist/src/nile-popup/nile-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-popup.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, CSSResultArray, TemplateResult} from 'lit';\nimport { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { offsetParent } from 'composed-offset-position';\nimport NileElement from '../internal/nile-element';\nimport {styles} from './nile-popup.css';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-popup\n *\n */\n@customElement('nile-popup')\nexport class NilePopup extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private anchorEl: Element | null;\n  private cleanup: ReturnType<typeof autoUpdate> | undefined;\n\n  /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */\n  @query('.popup') popup: HTMLElement;\n  @query('.popup__arrow') private arrowEl: HTMLElement;\n\n  /**\n   * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\n   * reference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n   */\n  @property() anchor: Element | string;\n\n  /**\n   * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\n   * down and the popup will be hidden.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\n   * panel inside of the viewport.\n   */\n  @property({ reflect: true }) placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /**\n   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\n   * clipped, using a `fixed` position strategy can often workaround it.\n   */\n  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';\n\n  /** The distance in pixels from which to offset the panel away from its anchor. */\n  @property({ type: Number }) distance = 0;\n\n  /** The distance in pixels from which to offset the panel along its anchor. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n   * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n   * `::part(arrow)` in your stylesheet.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /**\n   * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\n   * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\n   * align the arrow to the start, end, or center of the popover instead.\n   */\n  @property({ attribute: 'arrow-placement' }) arrowPlacement: 'start' | 'end' | 'center' | 'anchor' = 'anchor';\n\n  /**\n   * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\n   * this will prevent it from overflowing the corners.\n   */\n  @property({ attribute: 'arrow-padding', type: Number }) arrowPadding = 10;\n\n  /**\n   * When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n   * `flipFallbackPlacements` to further configure how the fallback placement is determined.\n   */\n  @property({ type: Boolean }) flip = false;\n\n  /**\n   * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\n   * string of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\n   * fallback strategy will be used instead.\n   * */\n  @property({\n    attribute: 'flip-fallback-placements',\n    converter: {\n      fromAttribute: (value: string) => {\n        return value\n          .split(' ')\n          .map(p => p.trim())\n          .filter(p => p !== '');\n      },\n      toAttribute: (value: []) => {\n        return value.join(' ');\n      }\n    }\n  })\n  flipFallbackPlacements = '';\n\n  /**\n   * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\n   * the popup should be positioned using the best available fit based on available space or as it was initially\n   * preferred.\n   */\n  @property({ attribute: 'flip-fallback-strategy' }) flipFallbackStrategy: 'best-fit' | 'initial' = 'best-fit';\n\n  /**\n   * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) flipBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */\n  @property({ attribute: 'flip-padding', type: Number }) flipPadding = 0;\n\n  /** Moves the popup along the axis to keep it in view when clipped. */\n  @property({ type: Boolean }) shift = false;\n\n  /**\n   * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) shiftBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */\n  @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;\n\n  /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */\n  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';\n\n  /** Syncs the popup's width or height to that of the anchor element. */\n  @property() sync: 'width' | 'height' | 'both';\n\n  /**\n   * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\n   * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\n   * change the boundary by passing a reference to one or more elements to this property.\n   */\n  @property({ type: Object }) autoSizeBoundary: Element | Element[];\n\n  /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */\n  @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;\n\n  async connectedCallback() {\n    super.connectedCallback();\n\n    // Start the positioner after the first update\n    await this.updateComplete;\n    this.start();\n  }\n\n  disconnectedCallback() {\n    this.stop();\n  }\n\n  async updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    // Start or stop the positioner when active changes\n    if (changedProps.has('active')) {\n      if (this.active) {\n        this.start();\n      } else {\n        this.stop();\n      }\n    }\n\n    // Update the anchor when anchor changes\n    if (changedProps.has('anchor')) {\n      this.handleAnchorChange();\n    }\n\n    // All other properties will trigger a reposition when active\n    if (this.active) {\n      await this.updateComplete;\n      this.reposition();\n    }\n  }\n\n  private async handleAnchorChange() {\n    await this.stop();\n\n    if (this.anchor && typeof this.anchor === 'string') {\n      // Locate the anchor by id\n      const root = this.getRootNode() as Document | ShadowRoot;\n      this.anchorEl = root.getElementById(this.anchor);\n    } else if (this.anchor instanceof Element) {\n      // Use the anchor's reference\n      this.anchorEl = this.anchor;\n    } else {\n      // Look for a slotted anchor\n      this.anchorEl = this.querySelector<HTMLElement>('[slot=\"anchor\"]');\n    }\n\n    // If the anchor is a <slot>, we'll use the first assigned element as the target since slots use `display: contents`\n    // and positioning can't be calculated on them\n    if (this.anchorEl instanceof HTMLSlotElement) {\n      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;\n    }\n\n    /**\n     * NOTE TO DEVELOPERS:\n     * The anchor element is essential for nile-popup to function correctly.\n     * This error was thrown when an anchor (slot=\"anchor\") or anchor reference was not found.\n     *\n     * In many places, developers are using *ngIf or similar conditional rendering directly on the anchor slot\n     * inside <nile-tooltip>, which removes the anchor from the DOM.\n     * As a result, the tooltip remains but cannot be anchored — leading to this error.\n     *\n     * Suggested Fixes:\n     *  - Move *ngIf to a wrapper above <nile-tooltip>\n     *  - OR use the 'disabled' property of nile-tooltip to prevent it from activating without anchor\n     *\n     * For now, this error is commented out to avoid runtime crashes.\n     * Proper usage patterns should be followed instead.\n     */\n    if (!this.anchorEl) {\n      // throw new Error(\n      //   'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'\n      // );\n      return;\n    }\n\n    this.start();\n  }\n\n  private start() {\n    // We can't start the positioner without an anchor\n    if (!this.anchorEl) {\n      return;\n    }\n\n    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {\n      this.reposition();\n    });\n  }\n\n  private async stop(): Promise<void> {\n    return new Promise(resolve => {\n      if (this.cleanup) {\n        this.cleanup();\n        this.cleanup = undefined;\n        this.removeAttribute('data-current-placement');\n        this.style.removeProperty('--auto-size-available-width');\n        this.style.removeProperty('--auto-size-available-height');\n        requestAnimationFrame(() => resolve());\n      } else {\n        resolve();\n      }\n    });\n  }\n\n  /** Forces the popup to recalculate and reposition itself. */\n  reposition() {\n    // Nothing to do if the popup is inactive or the anchor doesn't exist\n    if (!this.active || !this.anchorEl) {\n      return;\n    }\n\n    //\n    // NOTE: Floating UI middlewares are order dependent: https://floating-ui.com/docs/middleware\n    //\n    const middleware = [\n      // The offset middleware goes first\n      offset({ mainAxis: this.distance, crossAxis: this.skidding })\n    ];\n\n    // First we sync width/height\n    if (this.sync) {\n      middleware.push(\n        size({\n          apply: ({ rects }) => {\n            const syncWidth = this.sync === 'width' || this.sync === 'both';\n            const syncHeight = this.sync === 'height' || this.sync === 'both';\n            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : '';\n            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : '';\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're not matching width/height\n      this.popup.style.width = '';\n      this.popup.style.height = '';\n    }\n\n    // Then we flip\n    if (this.flip) {\n      middleware.push(\n        flip({\n          boundary: this.flipBoundary,\n          // @ts-expect-error - We're converting a string attribute to an array here\n          fallbackPlacements: this.flipFallbackPlacements,\n          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',\n          padding: this.flipPadding\n        })\n      );\n    }\n\n    // Then we shift\n    if (this.shift) {\n      middleware.push(\n        shift({\n          boundary: this.shiftBoundary,\n          padding: this.shiftPadding\n        })\n      );\n    }\n\n    // Now we adjust the size as needed\n    if (this.autoSize) {\n      middleware.push(\n        size({\n          boundary: this.autoSizeBoundary,\n          padding: this.autoSizePadding,\n          apply: ({ availableWidth, availableHeight }) => {\n            if (this.autoSize === 'vertical' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-height');\n            }\n\n            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {\n              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);\n            } else {\n              this.style.removeProperty('--auto-size-available-width');\n            }\n          }\n        })\n      );\n    } else {\n      // Cleanup styles if we're no longer using auto-size\n      this.style.removeProperty('--auto-size-available-width');\n      this.style.removeProperty('--auto-size-available-height');\n    }\n\n    // Finally, we add an arrow\n    if (this.arrow) {\n      middleware.push(\n        arrow({\n          element: this.arrowEl,\n          padding: this.arrowPadding\n        })\n      );\n    }\n\n    //\n    // Use custom positioning logic if the strategy is absolute. Otherwise, fall back to the default logic.\n    //\n    //\n    const getOffsetParent =\n      this.strategy === 'absolute'\n        ? (element: Element) => platform.getOffsetParent(element, offsetParent)\n        : platform.getOffsetParent;\n\n    computePosition(this.anchorEl, this.popup, {\n      placement: this.placement,\n      middleware,\n      strategy: this.strategy,\n      platform: {\n        ...platform,\n        getOffsetParent\n      }\n    }).then(({ x, y, middlewareData, placement }) => {\n      //\n      // Even though we have our own localization utility, it uses different heuristics to determine RTL. Because of\n      // that, we'll use the same approach that Floating UI uses.\n      //\n      // Source: https://github.com/floating-ui/floating-ui/blob/cb3b6ab07f95275730d3e6e46c702f8d4908b55c/packages/dom/src/utils/getDocumentRect.ts#L31\n      //\n      const isRtl = getComputedStyle(this).direction === 'rtl';\n      const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[placement.split('-')[0]]!;\n\n      this.setAttribute('data-current-placement', placement);\n\n      Object.assign(this.popup.style, {\n        left: `${x}px`,\n        top: `${y}px`\n      });\n\n      if (this.arrow) {\n        const arrowX = middlewareData.arrow!.x;\n        const arrowY = middlewareData.arrow!.y;\n        let top = '';\n        let right = '';\n        let bottom = '';\n        let left = '';\n\n        if (this.arrowPlacement === 'start') {\n          // Start\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? value : '';\n          left = isRtl ? '' : value;\n        } else if (this.arrowPlacement === 'end') {\n          // End\n          const value = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n          right = isRtl ? '' : value;\n          left = isRtl ? value : '';\n          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';\n        } else if (this.arrowPlacement === 'center') {\n          // Center\n          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';\n        } else {\n          // Anchor (default)\n          left = typeof arrowX === 'number' ? `${arrowX}px` : '';\n          top = typeof arrowY === 'number' ? `${arrowY}px` : '';\n        }\n\n        Object.assign(this.arrowEl.style, {\n          top,\n          right,\n          bottom,\n          left,\n          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'\n        });\n      }\n    });\n\n    this.emit('reposition');\n  }\n\n  render() {\n    return html`\n      <slot name=\"anchor\" @slotchange=${this.handleAnchorChange}></slot>\n\n      <div\n        part=\"popup\"\n        class=${classMap({\n          popup: true,\n          'popup--active': this.active,\n          'popup--fixed': this.strategy === 'fixed',\n          'popup--has-arrow': this.arrow\n        })}\n      >\n        <slot></slot>\n        ${this.arrow ? html`<div part=\"arrow\" class=\"popup__arrow\" role=\"presentation\"></div>` : ''}\n      </div>\n    `;\n  }\n}\n\nexport default NilePopup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-popup': NilePopup;\n  }\n}\n"]}

package/dist/src/nile-popup/nile-popup.test.js

@@ -0,0 +1,69 @@
+import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
+import './nile-popup';
+import { NilePopup } from './nile-popup';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
+describe('NilePopup', () => {
+    it('should render correctly', async () => {
+        const el = await fixture(html `<nile-popup></nile-popup>`);
+        expect(el).to.be.instanceOf(NilePopup);
+        expect(el.shadowRoot).not.to.be.null;
+    });
+    it('should be inactive by default', async () => {
+        const el = await fixture(html `<nile-popup></nile-popup>`);
+        expect(el.active).to.be.false;
+        const popup = el.shadowRoot?.querySelector('.popup');
+        expect(popup?.classList.contains('popup--active')).to.be.false;
+    });
+    it('should show popup when active is set to true', async () => {
+        const el = await fixture(html `<nile-popup></nile-popup>`);
+        el.active = true;
+        await elementUpdated(el);
+        const popup = el.shadowRoot?.querySelector('.popup');
+        expect(el.active).to.be.true;
+        expect(popup?.classList.contains('popup--active')).to.be.true;
+    });
+    it('should hide popup when active is set to false', async () => {
+        const el = await fixture(html `<nile-popup active></nile-popup>`);
+        el.active = false;
+        await elementUpdated(el);
+        const popup = el.shadowRoot?.querySelector('.popup');
+        expect(el.active).to.be.false;
+        expect(popup?.classList.contains('popup--active')).to.be.false;
+    });
+    it('should set correct placement class based on "placement" property', async () => {
+        const el = await fixture(html `<nile-popup placement="bottom"></nile-popup>`);
+        el.active = true;
+        await elementUpdated(el);
+        expect(el.placement).to.equal('bottom');
+        expect(el.getAttribute('placement')).to.equal('bottom');
+    });
+    it('should position correctly when anchor is provided', async () => {
+        const anchor = document.createElement('div');
+        anchor.id = 'anchorEl';
+        document.body.appendChild(anchor);
+        const el = await fixture(html `<nile-popup anchor="anchorEl" active></nile-popup>`);
+        await elementUpdated(el);
+        // Ensure popup is active
+        const popup = el.shadowRoot?.querySelector('.popup');
+        expect(popup?.classList.contains('popup--active')).to.be.true;
+        // Check if anchor is present
+        const anchorEl = document.getElementById('anchorEl');
+        expect(anchorEl).to.exist;
+        document.body.removeChild(anchor);
+    });
+    it('should display an arrow when the "arrow" property is true', async () => {
+        const el = await fixture(html `<nile-popup arrow></nile-popup>`);
+        el.active = true;
+        await elementUpdated(el);
+        const arrowEl = el.shadowRoot?.querySelector('.popup__arrow');
+        expect(arrowEl).to.exist;
+    });
+    it('should apply correct strategy when "strategy" is set', async () => {
+        const el = await fixture(html `<nile-popup strategy="fixed"></nile-popup>`);
+        el.active = true;
+        await elementUpdated(el);
+        const popup = el.shadowRoot?.querySelector('.popup');
+        expect(popup?.classList.contains('popup--fixed')).to.be.true;
+    });
+});
+//# sourceMappingURL=nile-popup.test.js.map

package/dist/src/nile-popup/nile-popup.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-popup.test.js","sourceRoot":"","sources":["../../../src/nile-popup/nile-popup.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, elementUpdated, oneEvent } from '@open-wc/testing';\nimport './nile-popup';\nimport { NilePopup } from './nile-popup';\n\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\ndescribe('NilePopup', () => {\n\tit('should render correctly', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup></nile-popup>`);\n    expect(el).to.be.instanceOf(NilePopup);\n    expect(el.shadowRoot).not.to.be.null;\n  });\n\n  it('should be inactive by default', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup></nile-popup>`);\n    expect(el.active).to.be.false;\n    const popup = el.shadowRoot?.querySelector('.popup');\n    expect(popup?.classList.contains('popup--active')).to.be.false;\n  });\n\n  it('should show popup when active is set to true', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup></nile-popup>`);\n    el.active = true;\n    await elementUpdated(el);\n    \n    const popup = el.shadowRoot?.querySelector('.popup');\n    expect(el.active).to.be.true;\n    expect(popup?.classList.contains('popup--active')).to.be.true;\n  });\n\n  it('should hide popup when active is set to false', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup active></nile-popup>`);\n    el.active = false;\n    await elementUpdated(el);\n\n    const popup = el.shadowRoot?.querySelector('.popup');\n    expect(el.active).to.be.false;\n    expect(popup?.classList.contains('popup--active')).to.be.false;\n  });\n\n  it('should set correct placement class based on \"placement\" property', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup placement=\"bottom\"></nile-popup>`);\n    el.active = true;\n    await elementUpdated(el);\n    \n    expect(el.placement).to.equal('bottom');\n    expect(el.getAttribute('placement')).to.equal('bottom');\n  });\n\n  it('should position correctly when anchor is provided', async () => {\n    const anchor = document.createElement('div');\n    anchor.id = 'anchorEl';\n    document.body.appendChild(anchor);\n\n    const el = await fixture<NilePopup>(html`<nile-popup anchor=\"anchorEl\" active></nile-popup>`);\n    await elementUpdated(el);\n\n    // Ensure popup is active\n    const popup = el.shadowRoot?.querySelector('.popup');\n    expect(popup?.classList.contains('popup--active')).to.be.true;\n    \n    // Check if anchor is present\n    const anchorEl = document.getElementById('anchorEl');\n    expect(anchorEl).to.exist;\n\n    document.body.removeChild(anchor);\n  });\n\n  it('should display an arrow when the \"arrow\" property is true', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup arrow></nile-popup>`);\n    el.active = true;\n    await elementUpdated(el);\n\n    const arrowEl = el.shadowRoot?.querySelector('.popup__arrow');\n    expect(arrowEl).to.exist;\n  });\n\n  it('should apply correct strategy when \"strategy\" is set', async () => {\n    const el = await fixture<NilePopup>(html`<nile-popup strategy=\"fixed\"></nile-popup>`);\n    el.active = true;\n    await elementUpdated(el);\n\n    const popup = el.shadowRoot?.querySelector('.popup');\n    expect(popup?.classList.contains('popup--fixed')).to.be.true;\n  });\n});\n"]}

package/dist/src/nile-progress-bar/index.js

@@ -0,0 +1,2 @@
+export { NileProgressBar } from './nile-progress-bar';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { NileProgressBar } from './nile-progress-bar';\n"]}

package/dist/src/nile-progress-bar/nile-progress-bar.css.js

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+export default css `
+
+:host{
+  -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+}
+  .nile-progress-bar__container {
+    width: 100%;
+    margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-height-auto, var(--ng-height-auto));
+  }
+
+  .nile-progress-bar__progress-bar {
+    width: 100%;
+    counter-reset: step;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-height-auto, var(--ng-height-auto));
+    list-style: none;
+    display: flex;
+    height: var(--nile-height-6px, var(--ng-height-8px));
+    justify-content: space-between;
+  }
+
+  .nile-progress-bar__progress-bar li {
+    position: relative;
+    width: 100%;
+    height: var(--nile-height-6px, var(--ng-height-8px));
+    background-color: var(--nile-progress-bar-track-color-stroke, var(--ng-colors-bg-quaternary));
+    transition: stroke-dashoffset 0.8s ease-in-out;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
+    overflow: hidden;
+  }
+
+   
+
+  .nile-progress-bar__progress-bar li.changeColor::after {
+    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
+  }
+
+  .nile-progress-bar__progress-bar li span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--nile-progress-bar-progress-color-stroke, var(--ng-colors-fg-brand-primary-600));
+    height: 100%;
+    transition: all 1s linear;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
+  }
+
+  .nile-progress-bar__progress-bar.lg li span {
+    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
+  }
+
+  .nile-progress-bar__reset {
+    background-color: var(--nile-progress-bar-track-color-stroke, var(--ng-colors-bg-quaternary));
+    position: absolute;
+    z-index: 1;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-full));
+  }
+`;
+//# sourceMappingURL=nile-progress-bar.css.js.map