kritzel-stencil 0.0.129 → 0.0.131

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -0,0 +1,267 @@
+import { Host, h } from "@stencil/core";
+export class KritzelMenuItem {
+    host;
+    item;
+    onItemChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.isDirty = false;
+        }
+    }
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    isDirty = false;
+    inputRef;
+    componentDidLoad() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
+        }
+    }
+    componentDidUpdate() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
+        }
+    }
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit({ item: this.item, parent: this.parent });
+    };
+    handleInputChange = (event) => {
+        event.stopPropagation();
+        const target = event.target;
+        this.item.label = target.value;
+        this.isDirty = true;
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemSave.emit(this.item);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemCancel.emit(this.item);
+    };
+    handleMenuToggle = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+    };
+    handleMenuClose = () => {
+        this.itemCloseChildMenu.emit(this.item);
+    };
+    renderViewMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("div", null, this.item.label)),
+            h("div", { class: "menu-item-content right" }, this.item.children &&
+                this.item.children.length > 0 && [
+                h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, h("kritzel-icon", { name: "ellipsis-vertical", size: 16 })),
+                h("kritzel-portal", { anchor: this.item.childMenuAnchor, offsetY: 4, onClose: this.handleMenuClose }, h("kritzel-menu", { items: this.item.children, parent: this.item, onItemSelect: event => this.itemSelect.emit(event.detail), onItemSave: event => this.itemSave.emit(event.detail), onItemCancel: event => this.itemCancel.emit(event.detail), onClose: this.handleMenuClose })),
+            ]),
+        ];
+    }
+    renderEditMode() {
+        return [
+            h("div", { class: "menu-item-content left" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
+            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 })), h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 }))),
+        ];
+    }
+    render() {
+        return (h(Host, { key: '5440ed43726d00ab65e7f423f065c1a3fa74e39e', tabIndex: 0, class: {
+                'selected': this.item.isSelected,
+                'editing': this.item.isEditing,
+                'disabled': this.item.isDisabled,
+                'child-open': this.item.isChildMenuOpen,
+            }, onClick: this.handleItemSelect }, h("div", { key: '69542710179216a1df47bde5d474a72e4a07aa5b', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+    }
+    static get is() { return "kritzel-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-menu-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "item": {
+                "type": "unknown",
+                "attribute": "item",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "parent": {
+                "type": "unknown",
+                "attribute": "parent",
+                "mutable": false,
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDirty": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelect",
+                "name": "itemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemSelectEvent",
+                    "resolved": "IKritzelMenuItemSelectEvent",
+                    "references": {
+                        "IKritzelMenuItemSelectEvent": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemSelectEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemSave",
+                "name": "itemSave",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCancel",
+                "name": "itemCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemToggleChildMenu",
+                "name": "itemToggleChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItemToggleChildMenuEvent",
+                    "resolved": "IKritzelMenuItemToggleChildMenuEvent",
+                    "references": {
+                        "IKritzelMenuItemToggleChildMenuEvent": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItemToggleChildMenuEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemCloseChildMenu",
+                "name": "itemCloseChildMenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "IKritzelMenuItem",
+                    "resolved": "IKritzelMenuItem<any>",
+                    "references": {
+                        "IKritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::IKritzelMenuItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "item",
+                "methodName": "onItemChange"
+            }];
+    }
+}
+//# sourceMappingURL=kritzel-menu-item.js.map

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-menu-item.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-menu-item/kritzel-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-menu-item',\r\n  styleUrl: 'kritzel-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelMenuItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() item: IKritzelMenuItem;\r\n  @Watch('item')\r\n  onItemChange(newValue: IKritzelMenuItem, oldValue: IKritzelMenuItem) {\r\n    if (newValue !== oldValue) {\r\n      this.isDirty = false;\r\n    }\r\n  }\r\n  @Prop() parent: IKritzelMenuItem = null;\r\n\r\n  @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n  @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n  @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n\r\n  @State()\r\n  isDirty: boolean = false;\r\n\r\n  private inputRef: HTMLInputElement;\r\n\r\n  componentDidLoad() {\r\n    if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n      this.inputRef.focus();\r\n      this.inputRef.select();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    if (this.item.isEditing && this.inputRef && !this.isDirty) {\r\n      this.inputRef.focus();\r\n      this.inputRef.select();\r\n    }\r\n  }\r\n\r\n  private handleItemSelect = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemSelect.emit({ item: this.item, parent: this.parent });\r\n  };\r\n\r\n  private handleInputChange = (event: Event) => {\r\n    event.stopPropagation();\r\n    const target = event.target as HTMLInputElement;\r\n    this.item.label = target.value;\r\n    this.isDirty = true;\r\n  };\r\n\r\n  private handleSave = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.host.focus();\r\n    this.itemSave.emit(this.item);\r\n  };\r\n\r\n  private handleCancel = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.host.focus();\r\n    this.itemCancel.emit(this.item);\r\n  };\r\n\r\n  private handleMenuToggle = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target as HTMLElement });\r\n  };\r\n\r\n  private handleMenuClose = () => {\r\n    this.itemCloseChildMenu.emit(this.item);\r\n  };\r\n\r\n  private renderViewMode() {\r\n    return [\r\n      <div class=\"menu-item-content left\">\r\n        <div>{this.item.label}</div>\r\n      </div>,\r\n      <div class=\"menu-item-content right\">\r\n        {this.item.children &&\r\n          this.item.children.length > 0 && [\r\n            <button id=\"child-menu-toggle\" class=\"action-button\" onClick={this.handleMenuToggle} disabled={this.item.isDisabled}>\r\n              <kritzel-icon name=\"ellipsis-vertical\" size={16}></kritzel-icon>\r\n            </button>,\r\n            <kritzel-portal anchor={this.item.childMenuAnchor} offsetY={4} onClose={this.handleMenuClose}>\r\n              <kritzel-menu\r\n                items={this.item.children}\r\n                parent={this.item}\r\n                onItemSelect={event => this.itemSelect.emit(event.detail)}\r\n                onItemSave={event => this.itemSave.emit(event.detail)}\r\n                onItemCancel={event => this.itemCancel.emit(event.detail)}\r\n                onClose={this.handleMenuClose}\r\n              ></kritzel-menu>\r\n            </kritzel-portal>,\r\n          ]}\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  private renderEditMode() {\r\n    return [\r\n      <div class=\"menu-item-content left\">\r\n        <input ref={el => (this.inputRef = el)} type=\"text\" class=\"edit-input\" value={this.item.label} onInput={this.handleInputChange} />\r\n      </div>,\r\n      <div class=\"menu-item-content right\">\r\n        <div tabIndex={!this.isDirty && !this.item.isNewItem ? -1 : 0} class={{ 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }} onClick={this.handleSave}>\r\n          <kritzel-icon name=\"check\" size={16}></kritzel-icon>\r\n        </div>\r\n        <div tabIndex={0} class=\"action-button\" onClick={this.handleCancel}>\r\n          <kritzel-icon name=\"x\" size={16}></kritzel-icon>\r\n        </div>\r\n      </div>,\r\n    ];\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        tabIndex={0}\r\n        class={{\r\n          'selected': this.item.isSelected,\r\n          'editing': this.item.isEditing,\r\n          'disabled': this.item.isDisabled,\r\n          'child-open': this.item.isChildMenuOpen,\r\n        }}\r\n        onClick={this.handleItemSelect}\r\n      >\r\n        <div class=\"menu-item-overlay\"></div>\r\n        {this.item.isEditing ? this.renderEditMode() : this.renderViewMode()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -1,70 +1,190 @@
 import { Host, h } from "@stencil/core";
-import { KritzelHTMLHelper } from "../../../helpers/html.helper";
-const DEFAULT_OFFSET = 0;
-const MIN_LEFT_POSITION = 0;
-const Z_INDEX = '9005';
-const ID_PORTAL = 'portal';
+import { ObjectHelper } from "../../../helpers/object.helper";
 export class KritzelPortal {
-    constructor() {
-        this.autoFocus = true;
-        this.moved = false;
-        this.handleScroll = () => {
-            const isAnchorInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
-            if (!isAnchorInViewport) {
-                this.close.emit();
-                return;
-            }
-            this.calculatePosition();
-        };
-    }
+    host;
+    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();
     }
+    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 = this.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();
+            }
+        }
+    }
+    getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            return el.offsetParent !== null;
+        };
+        // Check if the root element itself is focusable
+        if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {
+            focusableElements.push(root);
+        }
+        // Function to recursively find focusable elements
+        const findFocusable = (element) => {
+            // Search in shadow root
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.querySelectorAll(focusableSelector)).forEach(el => {
+                    if (isVisible(el)) {
+                        focusableElements.push(el);
+                    }
+                });
+                Array.from(element.shadowRoot.children).forEach(findFocusable);
+            }
+            // Search in light DOM
+            Array.from(element.querySelectorAll(focusableSelector)).forEach(el => {
+                if (!focusableElements.includes(el) && isVisible(el)) {
+                    focusableElements.push(el);
+                }
+            });
+            // Handle slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(el => findFocusable(el));
+            }
+            Array.from(element.children).forEach(findFocusable);
+        };
+        findFocusable(root);
+        // Return unique elements in document order
+        return [...new Set(focusableElements)];
+    }
+    get firstFocusableElement() {
+        const slotEl = this.host.shadowRoot?.querySelector('slot');
+        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = this.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() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        const offset = this.offsetX ?? this.defaultOffset;
         let left = refRect.left + offset;
-        const maxLeft = window.innerWidth - portalRect.width - MIN_LEFT_POSITION;
-        if (left < MIN_LEFT_POSITION)
-            left = MIN_LEFT_POSITION;
+        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() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        const offset = this.offsetY ?? this.defaultOffset;
         let top = refRect.bottom + offset;
         if (top + portalRect.height > window.innerHeight) {
             top = refRect.top - portalRect.height - offset;
         }
         return Math.round(top + window.scrollY);
     }
-    createPortal() {
+    openPortal() {
         this.portal = document.createElement('div');
-        this.portal.setAttribute('id', ID_PORTAL);
-        this.portal.style.zIndex = Z_INDEX;
+        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);
     }
-    moveElementToPortal() {
-        this.portal.appendChild(this.element);
-        this.moved = true;
+    closePortal() {
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
     }
     calculatePosition() {
         if (!this.anchor || !this.portal)
@@ -74,25 +194,8 @@ export class KritzelPortal {
         this.portal.style.top = `${top}px`;
         this.portal.style.left = `${left}px`;
     }
-    componentWillLoad() {
-        this.createPortal();
-    }
-    componentDidLoad() {
-        var _a;
-        this.moveElementToPortal();
-        if (this.anchor) {
-            this.calculatePosition();
-            this.scrollableParent = KritzelHTMLHelper.getScrollableParent(this.anchor);
-            (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.handleScroll);
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        this.moved ? this.portal.remove() : (this.moved = true);
-        (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScroll);
-    }
     render() {
-        return (h(Host, { key: 'e39525c3e9ddbf738b63ac0c08d8c1e2264783b1', ref: el => (this.element = el) }, h("slot", { key: '95202c5bea32c77dc1dde0a12a58ac9bcebd8812' })));
+        return (h(Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +302,7 @@ export class KritzelPortal {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "anchor",
@@ -207,6 +311,18 @@ export class KritzelPortal {
     }
     static get listeners() {
         return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "resize",
                 "method": "handleResize",
                 "target": "window",

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-portal.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-portal/kritzel-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\nconst DEFAULT_OFFSET = 0;\r\nconst MIN_LEFT_POSITION = 0;\r\nconst Z_INDEX = '9005';\r\nconst ID_PORTAL = 'portal';\r\n\r\n@Component({\r\n  tag: 'kritzel-portal',\r\n  shadow: true,\r\n})\r\nexport class KritzelPortal {\r\n  @Prop()\r\n  anchor: HTMLElement;\r\n\r\n  @Watch('anchor')\r\n  anchorChanged(newValue: HTMLElement) {\r\n    if (newValue) {\r\n      this.calculatePosition();\r\n    }\r\n  }\r\n\r\n  @Prop()\r\n  offsetX: number;\r\n\r\n  @Prop()\r\n  offsetY: number;\r\n\r\n  @Prop()\r\n  autoFocus: boolean = true;\r\n\r\n  @Event()\r\n  close: EventEmitter<void>;\r\n\r\n  private portal: HTMLElement;\r\n\r\n  private element: HTMLElement;\r\n\r\n  private moved: boolean = false;\r\n\r\n  private scrollableParent: HTMLElement | Window;\r\n\r\n  @Listen('resize', { target: 'window', capture: true })\r\n  handleResize() {\r\n    this.calculatePosition();\r\n  }\r\n\r\n  private handleScroll = () => {\r\n    const isAnchorInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);\r\n\r\n    if (!isAnchorInViewport) {\r\n      this.close.emit();\r\n      return;\r\n    }\r\n\r\n    this.calculatePosition();\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 ?? DEFAULT_OFFSET;\r\n    let left = refRect.left + offset;\r\n\r\n    const maxLeft = window.innerWidth - portalRect.width - MIN_LEFT_POSITION;\r\n    if (left < MIN_LEFT_POSITION) left = MIN_LEFT_POSITION;\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 ?? DEFAULT_OFFSET;\r\n\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\r\n    }\r\n\r\n    return Math.round(top + window.scrollY);\r\n  }\r\n\r\n  private createPortal() {\r\n    this.portal = document.createElement('div');\r\n    this.portal.setAttribute('id', ID_PORTAL);\r\n    this.portal.style.zIndex = Z_INDEX;\r\n    this.portal.style.position = 'absolute';\r\n    this.portal.style.top = '0px';\r\n    this.portal.style.left = '0px';\r\n    document.body.append(this.portal);\r\n  }\r\n\r\n  private moveElementToPortal() {\r\n    this.portal.appendChild(this.element);\r\n    this.moved = true;\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  componentWillLoad() {\r\n    this.createPortal();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.moveElementToPortal();\r\n    if (this.anchor) {\r\n      this.calculatePosition();\r\n      this.scrollableParent = KritzelHTMLHelper.getScrollableParent(this.anchor);\r\n      this.scrollableParent?.addEventListener('scroll', this.handleScroll);\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.moved ? this.portal.remove() : (this.moved = true);\r\n    this.scrollableParent?.removeEventListener('scroll', this.handleScroll);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => (this.element = el)}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"kritzel-portal.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-portal/kritzel-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Listen, Prop, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { ObjectHelper } from '../../../helpers/object.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  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 = this.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 getFocusableElements(root: HTMLElement): HTMLElement[] {\r\n    if (!root) return [];\r\n\r\n    const focusableElements: HTMLElement[] = [];\r\n    const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex=\"-1\"])';\r\n\r\n    const isVisible = (el: HTMLElement) => {\r\n      return el.offsetParent !== null;\r\n    };\r\n\r\n    // Check if the root element itself is focusable\r\n    if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {\r\n      focusableElements.push(root);\r\n    }\r\n\r\n    // Function to recursively find focusable elements\r\n    const findFocusable = (element: Element) => {\r\n      // Search in shadow root\r\n      if (element.shadowRoot) {\r\n        Array.from(element.shadowRoot.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n          if (isVisible(el)) {\r\n            focusableElements.push(el);\r\n          }\r\n        });\r\n        Array.from(element.shadowRoot.children).forEach(findFocusable);\r\n      }\r\n\r\n      // Search in light DOM\r\n      Array.from(element.querySelectorAll<HTMLElement>(focusableSelector)).forEach(el => {\r\n        if (!focusableElements.includes(el) && isVisible(el)) {\r\n          focusableElements.push(el);\r\n        }\r\n      });\r\n\r\n      // Handle slotted content\r\n      if (element.tagName === 'SLOT') {\r\n        (element as HTMLSlotElement).assignedElements({ flatten: true }).forEach(el => findFocusable(el));\r\n      }\r\n\r\n      Array.from(element.children).forEach(findFocusable);\r\n    };\r\n\r\n    findFocusable(root);\r\n\r\n    // Return unique elements in document order\r\n    return [...new Set(focusableElements)];\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 = this.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\r\n    let top = refRect.bottom + offset;\r\n\r\n    if (top + portalRect.height > window.innerHeight) {\r\n      top = refRect.top - portalRect.height - offset;\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"]}