bromcom-ui-next 0.1.9 → 0.1.10

package/dist/collection/components/linked/linked.component.js

@@ -1,77 +1,278 @@
 import { h } from "@stencil/core";
-import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom";
 export class BcmLinked {
     constructor() {
+        // Trigger configuration
+        this.trigger = 'click';
+        this.placement = 'bottom-start';
+        // Timing configuration
+        this.showDelay = 0;
+        this.hideDelay = 0;
+        // Positioning configuration
+        this.offset = 8;
+        this.arrow = false;
+        this.disabled = false;
+        // Style configuration
+        this.zIndex = 1000;
+        this.appendToBody = false;
+        this.destroyOnHide = false;
+        // State
         this.isVisible = false;
+        this.isReady = false;
+        this.handleMouseEnter = () => {
+            this.clearTimeouts();
+            if (this.showDelay > 0) {
+                this.showTimeout = setTimeout(() => this.show(), this.showDelay);
+            }
+            else {
+                this.show();
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.clearTimeouts();
+            if (this.hideDelay > 0) {
+                this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
+            }
+            else {
+                this.hide();
+            }
+        };
+        this.handleFloatingMouseEnter = () => {
+            this.clearTimeouts();
+        };
+        this.handleFloatingMouseLeave = () => {
+            this.clearTimeouts();
+            if (this.hideDelay > 0) {
+                this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
+            }
+            else {
+                this.hide();
+            }
+        };
+        this.handleClick = (e) => {
+            e.stopPropagation();
+            this.toggle();
+        };
+        this.handleFocus = () => {
+            this.show();
+        };
+        this.handleBlur = () => {
+            this.hide();
+        };
+    }
+    // Watch for changes
+    setupTarget() {
+        this.disconnectTarget();
+        this.connectTarget();
+    }
+    onVisibilityChange(newValue) {
+        if (newValue) {
+            this.updatePosition();
+            this.bcmShown.emit();
+        }
+        else {
+            this.bcmHidden.emit();
+        }
     }
     componentDidLoad() {
         requestAnimationFrame(() => {
-            this.targetEl = this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null);
             this.floatingEl = this.host.shadowRoot.querySelector('.floating-content');
-            if (this.targetEl) {
-                this.targetEl.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    this.toggle();
-                });
-                const handleClickOutside = (e) => {
-                    var _a, _b;
-                    const target = e.target;
-                    if (!((_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
-                        !((_b = this.targetEl) === null || _b === void 0 ? void 0 : _b.contains(target)) &&
-                        !this.host.contains(target)) {
-                        this.hide();
-                    }
-                };
-                document.addEventListener('click', handleClickOutside);
-                this.host['_handleClickOutside'] = handleClickOutside;
+            this.isReady = true;
+            this.connectTarget();
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.disconnectTarget();
+        this.clearTimeouts();
+        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    connectTarget() {
+        if (!this.isReady)
+            return;
+        // Find target element
+        this.targetEl =
+            this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null) || this.host.previousElementSibling || this.host.parentElement;
+        if (!this.targetEl) {
+            console.warn('bcm-linked: No target element found');
+            return;
+        }
+        // Setup event listeners based on trigger type
+        this.setupEventListeners();
+        // Setup auto-update for position
+        if (this.targetEl && this.floatingEl) {
+            this.cleanup = autoUpdate(this.targetEl, this.floatingEl, () => {
+                if (this.isVisible) {
+                    this.updatePosition();
+                }
+            });
+        }
+        // Setup resize observer for responsive positioning
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.isVisible) {
+                this.updatePosition();
             }
         });
+        this.resizeObserver.observe(this.floatingEl);
+    }
+    disconnectTarget() {
+        var _a, _b;
+        if (this.targetEl) {
+            this.removeEventListeners();
+        }
+        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    setupEventListeners() {
+        var _a, _b;
+        if (!this.targetEl || this.disabled)
+            return;
+        switch (this.trigger) {
+            case 'hover':
+                this.targetEl.addEventListener('mouseenter', this.handleMouseEnter);
+                this.targetEl.addEventListener('mouseleave', this.handleMouseLeave);
+                (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.handleFloatingMouseEnter);
+                (_b = this.floatingEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.handleFloatingMouseLeave);
+                break;
+            case 'click':
+                this.targetEl.addEventListener('click', this.handleClick);
+                this.setupClickOutside();
+                break;
+            case 'focus':
+                this.targetEl.addEventListener('focus', this.handleFocus);
+                this.targetEl.addEventListener('blur', this.handleBlur);
+                break;
+        }
+    }
+    removeEventListeners() {
+        var _a, _b;
+        if (!this.targetEl)
+            return;
+        this.targetEl.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.targetEl.removeEventListener('mouseleave', this.handleMouseLeave);
+        this.targetEl.removeEventListener('click', this.handleClick);
+        this.targetEl.removeEventListener('focus', this.handleFocus);
+        this.targetEl.removeEventListener('blur', this.handleBlur);
+        (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.handleFloatingMouseEnter);
+        (_b = this.floatingEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.handleFloatingMouseLeave);
+        this.removeClickOutside();
+    }
+    setupClickOutside() {
+        this.clickOutsideHandler = (e) => {
+            var _a, _b;
+            const target = e.target;
+            if (!((_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.contains(target)) && !((_b = this.targetEl) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.host.contains(target)) {
+                this.hide();
+            }
+        };
+        document.addEventListener('click', this.clickOutsideHandler, true);
+    }
+    removeClickOutside() {
+        if (this.clickOutsideHandler) {
+            document.removeEventListener('click', this.clickOutsideHandler, true);
+            this.clickOutsideHandler = undefined;
+        }
+    }
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = undefined;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = undefined;
+        }
     }
     async updatePosition() {
-        if (!this.targetEl || !this.floatingEl)
+        if (!this.targetEl || !this.floatingEl || !this.isVisible)
             return;
-        const { x, y } = await computePosition(this.targetEl, this.floatingEl, {
-            placement: 'bottom-start',
-            middleware: [
-                offset(2),
-                flip({
-                    fallbackPlacements: ['top-start'],
-                }),
-                shift({ padding: 8 }),
-            ],
+        const middleware = [
+            offset(this.offset),
+            flip({
+                fallbackPlacements: ['top-start', 'bottom-start', 'right-start', 'left-start'],
+            }),
+            shift({ padding: 8 }),
+        ];
+        const { x, y, placement } = await computePosition(this.targetEl, this.floatingEl, {
+            placement: this.placement,
+            middleware,
+            strategy: 'fixed',
         });
         Object.assign(this.floatingEl.style, {
             left: `${x}px`,
             top: `${y}px`,
+            zIndex: this.zIndex.toString(),
         });
+        // Update arrow if enabled
+        if (this.arrow) {
+            this.updateArrow(placement);
+        }
     }
-    show() {
+    updateArrow(placement) {
+        var _a;
+        const arrow = (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.querySelector('.floating-arrow');
+        if (!arrow)
+            return;
+        // Remove all arrow classes
+        arrow.className = 'floating-arrow';
+        // Add placement-specific class
+        const side = placement.split('-')[0];
+        arrow.classList.add(`arrow-${side}`);
+    }
+    async show() {
+        if (this.disabled || this.isVisible)
+            return;
+        this.bcmShow.emit();
         this.isVisible = true;
-        this.updatePosition();
+        // Don't move to body in StencilJS, keep in shadow DOM
+        // if (this.appendToBody && this.floatingEl) {
+        //     document.body.appendChild(this.floatingEl);
+        // }
+        await this.updatePosition();
     }
-    hide() {
+    async hide() {
+        if (!this.isVisible)
+            return;
+        this.bcmHide.emit();
         this.isVisible = false;
+        if (this.destroyOnHide && this.floatingEl && this.floatingEl.parentNode) {
+            this.floatingEl.parentNode.removeChild(this.floatingEl);
+        }
     }
-    toggle() {
-        this.isVisible = !this.isVisible;
+    async toggle() {
         if (this.isVisible) {
-            this.updatePosition();
+            await this.hide();
+        }
+        else {
+            await this.show();
         }
     }
-    render() {
-        return (h("div", { key: '3f941aabcf3f17e8ee628c645ebb1316a305a43f', class: "floating-content z-[1000] flex min-w-max", style: {
-                display: this.isVisible ? 'block' : 'none',
-                position: 'absolute',
-                top: "0px",
-                left: "0px",
-            } }, h("slot", { key: 'd75ff826bc512230c7befcf51757797ffe52abc6' })));
+    async updatePositioning() {
+        await this.updatePosition();
     }
-    disconnectedCallback() {
-        if (this.targetEl) {
-            this.targetEl.removeEventListener('mouseenter', () => this.show());
-            this.targetEl.removeEventListener('mouseleave', () => this.hide());
-            this.targetEl.removeEventListener('click', () => this.toggle());
-        }
+    render() {
+        const floatingClasses = {
+            'floating-content': true,
+            'floating-visible': this.isVisible,
+            'floating-hidden': !this.isVisible,
+            'floating-with-arrow': this.arrow,
+            'floating-destroy-on-hide': this.destroyOnHide,
+        };
+        return [
+            // Portal div to body for positioning, but keep slot in shadow DOM
+            h("div", { key: 'b6af79e7bb9a025d39686d02416175ace281a19a', class: floatingClasses, style: {
+                    position: 'fixed',
+                    top: '0px',
+                    left: '0px',
+                    zIndex: this.zIndex.toString(),
+                    visibility: this.isVisible ? 'visible' : 'hidden',
+                    opacity: this.isVisible ? '1' : '0',
+                    pointerEvents: this.isVisible ? 'auto' : 'none',
+                } }, this.arrow && h("div", { key: 'ec25846caa6c8c3ee71ca01e802f714a01491a67', class: "floating-arrow" }), h("div", { key: '7a855e6caaee49c17c1f57d8283af789e7bb458f', class: "floating-wrapper" }, h("slot", { key: 'ba15b2faf8a0c7e6fa14441aa366deaa582aa419' }))),
+            // Hidden content holder for slot fallback
+            h("div", { key: 'e1542255d3d34e5c3d2d3b3e5d752848dc706ed5', style: { display: 'none' } }, h("slot", { key: 'aa62f7a2a3f109160082fb6ef798bd7b61760fb2', name: "fallback" })),
+        ];
     }
     static get is() { return "bcm-linked"; }
     static get encapsulation() { return "shadow"; }
@@ -96,7 +297,7 @@ export class BcmLinked {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -127,14 +328,374 @@ export class BcmLinked {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TriggerType",
+                    "resolved": "\"click\" | \"focus\" | \"hover\" | \"manual\"",
+                    "references": {
+                        "TriggerType": {
+                            "location": "local",
+                            "path": "/Users/muratpolatozkan/works/bromcom/ui-team/next/bromcom-ui-v2/src/components/linked/linked.component.tsx",
+                            "id": "src/components/linked/linked.component.tsx::TriggerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "node_modules::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            },
+            "showDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-delay",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "hideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-delay",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "offset",
+                "reflect": false,
+                "defaultValue": "8"
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "arrow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "z-index",
+                "reflect": false,
+                "defaultValue": "1000"
+            },
+            "appendToBody": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "append-to-body",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "destroyOnHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "destroy-on-hide",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isVisible": {}
+            "isVisible": {},
+            "isReady": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmShow",
+                "name": "bcmShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmHide",
+                "name": "bcmHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmShown",
+                "name": "bcmShown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bcmHidden",
+                "name": "bcmHidden",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updatePositioning": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "targetId",
+                "methodName": "setupTarget"
+            }, {
+                "propName": "targetElement",
+                "methodName": "setupTarget"
+            }, {
+                "propName": "isVisible",
+                "methodName": "onVisibilityChange"
+            }];
+    }
 }
 //# sourceMappingURL=linked.component.js.map