kritzel-stencil 0.0.172 → 0.1.1

package/dist/components/p-fm-bG_zL.js

@@ -1,231 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { O as ObjectHelper } from './p-B0kd2rUI.js';
-import { K as KritzelHTMLHelper } from './p-C6qB08BS.js';
-
-const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.close = createEvent(this, "close");
-    }
-    get host() { return this; }
-    anchor;
-    anchorChanged(newValue) {
-        if (newValue) {
-            this.openPortal();
-            this.calculatePosition();
-            if (this.autoFocus) {
-                this.focusFirstElement();
-            }
-        }
-        else {
-            this.closePortal();
-        }
-    }
-    offsetX;
-    offsetY;
-    autoFocus = true;
-    close;
-    handleOutsideClick(event) {
-        event.stopPropagation();
-        const isLastPortal = this.lastAddedPortal === this.portal;
-        if (!isLastPortal)
-            return;
-        const target = event.target;
-        if (!this.host.contains(target)) {
-            this.close.emit();
-            this.closePortal();
-        }
-    }
-    handleKeyDown(event) {
-        event.stopPropagation();
-        const isLastPortal = this.lastAddedPortal === this.portal;
-        if (!isLastPortal)
-            return;
-        if (event.key === 'Escape') {
-            this.anchor.focus();
-            this.close.emit();
-            this.closePortal();
-        }
-        if (event.key === 'Tab') {
-            this.trapFocus(event);
-        }
-        if (event.key === 'Enter') {
-            const activeElement = this.getDeepActiveElement();
-            if (activeElement?.click) {
-                event.preventDefault();
-                activeElement.click();
-            }
-        }
-    }
-    handleResize() {
-        this.calculatePosition();
-    }
-    handleWindowScroll() {
-        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
-        if (!isInViewport) {
-            this.anchor?.blur();
-            this.closePortal();
-            return;
-        }
-        this.calculatePosition();
-    }
-    portal;
-    id = `portal-${ObjectHelper.generateUUID()}`;
-    defaultOffset = 0;
-    minLeft = 0;
-    focusFirstElement() {
-        requestAnimationFrame(() => {
-            this.firstFocusableElement?.focus?.();
-        });
-    }
-    getDeepActiveElement() {
-        let activeEl = document.activeElement;
-        while (activeEl?.shadowRoot?.activeElement) {
-            activeEl = activeEl.shadowRoot.activeElement;
-        }
-        return activeEl;
-    }
-    trapFocus(event) {
-        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
-        if (focusableElements.length === 0)
-            return;
-        const firstFocusable = focusableElements[0];
-        const lastFocusable = focusableElements[focusableElements.length - 1];
-        const activeElement = this.getDeepActiveElement();
-        if (event.shiftKey) {
-            /* shift + tab */
-            if (activeElement === firstFocusable) {
-                lastFocusable.focus();
-                event.preventDefault();
-            }
-        }
-        else {
-            /* tab */
-            if (activeElement === lastFocusable) {
-                firstFocusable.focus();
-                event.preventDefault();
-            }
-        }
-    }
-    get firstFocusableElement() {
-        const slotEl = this.host.shadowRoot?.querySelector('slot');
-        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
-        if (!firstAssigned)
-            return null;
-        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
-        return focusable[0] ?? firstAssigned;
-    }
-    get lastAddedPortal() {
-        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
-        return portals.length ? portals[portals.length - 1] : null;
-    }
-    calculateLeft() {
-        if (!this.anchor || !this.portal)
-            return 0;
-        const refRect = this.anchor.getBoundingClientRect();
-        const portalRect = this.portal.getBoundingClientRect();
-        const offset = this.offsetX ?? this.defaultOffset;
-        let left = refRect.left + offset;
-        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
-        if (left < this.minLeft)
-            left = this.minLeft;
-        if (left > maxLeft)
-            left = maxLeft;
-        return Math.round(left + window.scrollX);
-    }
-    calculateTop() {
-        if (!this.anchor || !this.portal)
-            return 0;
-        const refRect = this.anchor.getBoundingClientRect();
-        const portalRect = this.portal.getBoundingClientRect();
-        const offset = this.offsetY ?? this.defaultOffset;
-        const padding = 8; // Minimum padding from viewport edges
-        let top = refRect.bottom + offset;
-        const spaceBelow = window.innerHeight - refRect.bottom - offset - padding;
-        const spaceAbove = refRect.top - offset - padding;
-        // Reset max-height CSS custom property  
-        this.host.style.removeProperty('--kritzel-portal-max-height');
-        if (portalRect.height <= spaceBelow) {
-            // Fits below the anchor
-            top = refRect.bottom + offset;
-        }
-        else if (portalRect.height <= spaceAbove) {
-            // Fits above the anchor
-            top = refRect.top - portalRect.height - offset;
-        }
-        else {
-            // Doesn't fit above or below - constrain the height
-            if (spaceBelow >= spaceAbove) {
-                // More space below, keep it below with constrained height
-                top = refRect.bottom + offset;
-                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceBelow}px`);
-            }
-            else {
-                // More space above, position above with constrained height
-                top = padding;
-                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceAbove}px`);
-            }
-        }
-        return Math.round(top + window.scrollY);
-    }
-    openPortal() {
-        this.portal = document.createElement('div');
-        this.portal.setAttribute('id', this.id);
-        this.portal.style.zIndex = '1';
-        this.portal.style.position = 'absolute';
-        this.portal.style.top = '0px';
-        this.portal.style.left = '0px';
-        this.portal.appendChild(this.host);
-        document.body.append(this.portal);
-    }
-    closePortal() {
-        const portal = document.getElementById(this.id);
-        if (!portal)
-            return;
-        document.body.removeChild(portal);
-        this.host.remove();
-    }
-    calculatePosition() {
-        if (!this.anchor || !this.portal)
-            return;
-        const top = this.calculateTop();
-        const left = this.calculateLeft();
-        this.portal.style.top = `${top}px`;
-        this.portal.style.left = `${left}px`;
-    }
-    render() {
-        return (h(Host, { key: '9706a815c6f49853983a0fdb68b097d62e65e90b', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '1bd76deeb440cd25e3895dc8824f5200461e4ae0' })));
-    }
-    static get watchers() { return {
-        "anchor": ["anchorChanged"]
-    }; }
-}, [769, "kritzel-portal", {
-        "anchor": [16],
-        "offsetX": [2, "offset-x"],
-        "offsetY": [2, "offset-y"],
-        "autoFocus": [4, "auto-focus"]
-    }, [[8, "click", "handleOutsideClick"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"], [11, "scroll", "handleWindowScroll"]], {
-        "anchor": ["anchorChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["kritzel-portal"];
-    components.forEach(tagName => { switch (tagName) {
-        case "kritzel-portal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, KritzelPortal);
-            }
-            break;
-    } });
-}
-
-export { KritzelPortal as K, defineCustomElement as d };
-//# sourceMappingURL=p-fm-bG_zL.js.map
-
-//# sourceMappingURL=p-fm-bG_zL.js.map

package/dist/components/p-fm-bG_zL.js.map

@@ -1 +0,0 @@
-{"file":"p-fm-bG_zL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-portal/kritzel-portal.tsx"],"sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.helper';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() anchor: HTMLElement;\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.openPortal();\r\n      this.calculatePosition();\r\n      if (this.autoFocus) {\r\n        this.focusFirstElement();\r\n      }\r\n    } else {\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Prop() offsetX: number;\r\n  @Prop() offsetY: number;\r\n  @Prop() autoFocus: boolean = true;\r\n\r\n  @Event() close: EventEmitter<void>;\r\n\r\n  @Listen('click', { target: 'window' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    event.stopPropagation();\r\n\r\n    const isLastPortal = this.lastAddedPortal === this.portal;\r\n    if (!isLastPortal) return;\r\n\r\n    if (event.key === 'Escape') {\r\n      this.anchor.focus();\r\n      this.close.emit();\r\n      this.closePortal();\r\n    }\r\n\r\n    if (event.key === 'Tab') {\r\n      this.trapFocus(event);\r\n    }\r\n\r\n    if (event.key === 'Enter') {\r\n      const activeElement = this.getDeepActiveElement() as HTMLElement;\r\n      if (activeElement?.click) {\r\n        event.preventDefault();\r\n        activeElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  @Listen('scroll', { target: 'window', capture: true })\r\n  handleWindowScroll() {\r\n    const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n    if (!isInViewport) {\r\n      this.anchor?.blur();\r\n      this.closePortal();\r\n      return;\r\n    }\r\n\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private portal: HTMLElement;\r\n  private id: string = `portal-${ObjectHelper.generateUUID()}`;\r\n  private defaultOffset = 0;\r\n  private minLeft = 0;\r\n\r\n  private focusFirstElement() {\r\n    requestAnimationFrame(() => {\r\n      this.firstFocusableElement?.focus?.();\r\n    });\r\n  }\r\n\r\n  private getDeepActiveElement(): Element {\r\n    let activeEl = document.activeElement;\r\n    while (activeEl?.shadowRoot?.activeElement) {\r\n      activeEl = activeEl.shadowRoot.activeElement;\r\n    }\r\n    return activeEl;\r\n  }\r\n\r\n  private trapFocus(event: KeyboardEvent) {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length === 0) return;\r\n\r\n    const firstFocusable = focusableElements[0];\r\n    const lastFocusable = focusableElements[focusableElements.length - 1];\r\n    const activeElement = this.getDeepActiveElement();\r\n\r\n    if (event.shiftKey) {\r\n      /* shift + tab */\r\n      if (activeElement === firstFocusable) {\r\n        lastFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    } else {\r\n      /* tab */\r\n      if (activeElement === lastFocusable) {\r\n        firstFocusable.focus();\r\n        event.preventDefault();\r\n      }\r\n    }\r\n  }\r\n\r\n  private get firstFocusableElement(): HTMLElement | null {\r\n    const slotEl = this.host.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\r\n    const firstAssigned = slotEl?.assignedElements({ flatten: true })[0] as HTMLElement | undefined;\r\n    if (!firstAssigned) return null;\r\n\r\n    const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);\r\n    return focusable[0] ?? firstAssigned;\r\n  }\r\n\r\n  private get lastAddedPortal(): HTMLElement | null {\r\n    const portals = Array.from(document.querySelectorAll<HTMLElement>('[id^=\"portal-\"]'));\r\n    return portals.length ? portals[portals.length - 1] : null;\r\n  }\r\n\r\n  private calculateLeft() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n\r\n    const offset = this.offsetX ?? this.defaultOffset;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - this.minLeft;\r\n    if (left < this.minLeft) left = this.minLeft;\r\n    if (left > maxLeft) left = maxLeft;\r\n\r\n    return Math.round(left + window.scrollX);\r\n  }\r\n\r\n  private calculateTop() {\r\n    if (!this.anchor || !this.portal) return 0;\r\n    const refRect = this.anchor.getBoundingClientRect();\r\n    const portalRect = this.portal.getBoundingClientRect();\r\n    const offset = this.offsetY ?? this.defaultOffset;\r\n    const padding = 8; // Minimum padding from viewport edges\r\n\r\n    let top = refRect.bottom + offset;\r\n    const spaceBelow = window.innerHeight - refRect.bottom - offset - padding;\r\n    const spaceAbove = refRect.top - offset - padding;\r\n\r\n    // Reset max-height CSS custom property  \r\n    this.host.style.removeProperty('--kritzel-portal-max-height');\r\n\r\n    if (portalRect.height <= spaceBelow) {\r\n      // Fits below the anchor\r\n      top = refRect.bottom + offset;\r\n    } else if (portalRect.height <= spaceAbove) {\r\n      // Fits above the anchor\r\n      top = refRect.top - portalRect.height - offset;\r\n    } else {\r\n      // Doesn't fit above or below - constrain the height\r\n      if (spaceBelow >= spaceAbove) {\r\n        // More space below, keep it below with constrained height\r\n        top = refRect.bottom + offset;\r\n        this.host.style.setProperty('--kritzel-portal-max-height', `${spaceBelow}px`);\r\n      } else {\r\n        // More space above, position above with constrained height\r\n        top = padding;\r\n        this.host.style.setProperty('--kritzel-portal-max-height', `${spaceAbove}px`);\r\n      }\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private openPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', this.id);\r\n    this.portal.style.zIndex = '1';\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    this.portal.appendChild(this.host);\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private closePortal() {\r\n    const portal = document.getElementById(this.id);\r\n    if (!portal) return;\r\n    document.body.removeChild(portal);\r\n    this.host.remove();\r\n  }\r\n\r\n  private calculatePosition() {\r\n    if (!this.anchor || !this.portal) return;\r\n    const top = this.calculateTop();\r\n    const left = this.calculateLeft();\r\n    this.portal.style.top = `${top}px`;\r\n    this.portal.style.left = `${left}px`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host style={{ display: this.anchor ? 'block' : 'none' }}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}