@quandis/qbo4.ui 4.0.1-CI-20241107-011209 → 4.0.1-CI-20241108-204652

package/src/qbo/qbo-popover.js

@@ -7,44 +7,73 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { Popover } from 'bootstrap';
-import { QboFormElement } from './qbo-form-element.js';
-let QboPopover = class QboPopover extends QboFormElement {
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { computePosition, shift, flip } from "@floating-ui/dom";
+let QboPopover = class QboPopover extends LitElement {
     constructor() {
         super(...arguments);
-        this.contentAtt = 'data-bs-content';
-        this.contentStyle = 'none';
-        this.containerAtt = 'data-bs-container';
-        this.containerValue = 'body';
-        this.defaultContent = 'No content provided';
-        this.htmlAtt = 'data-bs-html';
-        this.htmlValue = 'true';
-        this.placementAtt = 'data-bs-placement';
-        this.placementValue = 'left';
-        this.selector = '*[slot=content]';
-        this.toggleAtt = 'data-bs-toggle';
-        this.toggleValue = 'popover';
-        this.renderInHost = true;
+        this.placement = "bottom";
+        this.selector = '*[data-popover-trigger]';
+        // Internal state to control menu visibility
+        this.isOpen = false;
+        this.middleware = [flip(), shift()];
+        this.handleMenuOpen = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.detail.menu !== this && this.isOpen)
+                this.closeMenu();
+        };
+        this.toggleMenu = (event) => {
+            this.isOpen = !this.isOpen;
+            this.classList.toggle("open", this.isOpen);
+            if (this.isOpen) {
+                this.setPosition();
+                document.dispatchEvent(new CustomEvent("qbo-popover-open", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { menu: this },
+                }));
+            }
+        };
     }
-    createRenderRoot() {
-        return this.renderInHost ? this : super.createRenderRoot();
+    async setPosition() {
+        const { x, y } = await computePosition(this.triggerElement, this, {
+            placement: this.placement,
+            middleware: this.middleware,
+        });
+        Object.assign(this.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute(this.toggleAtt, this.toggleValue);
-        this.setAttribute(this.placementAtt, this.placementValue);
-        this.setAttribute(this.containerAtt, this.containerValue);
-        this.setAttribute(this.htmlAtt, this.htmlValue);
+        document.addEventListener("qbo-popover-open", this.handleMenuOpen);
     }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        const content = this.querySelector(this.selector);
-        if (content instanceof HTMLElement)
-            content.style.display = this.contentStyle;
-        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
-        new Popover(this);
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("qbo-popover-open", this.handleMenuOpen);
+        if (this.triggerElement != null) {
+            this.triggerElement.removeEventListener("mouseover", this.toggleMenu);
+            this.triggerElement.removeEventListener("mouseout", this.toggleMenu);
+        }
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.triggerElement =
+            this.parentElement?.querySelector(this.selector) ||
+                this.shadowRoot?.querySelector(this.selector) ||
+                document.querySelector(this.selector) ||
+                this.parentElement;
+        if (this.triggerElement != null) {
+            this.triggerElement.addEventListener("mouseover", this.toggleMenu);
+            this.triggerElement.addEventListener("mouseout", this.toggleMenu);
+        }
+    }
+    closeMenu() {
+        this.isOpen = false;
+        this.classList.remove("open");
     }
     render() {
         return html `<slot></slot>`;
@@ -52,56 +81,16 @@ let QboPopover = class QboPopover extends QboFormElement {
 };
 __decorate([
     property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "contentAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "contentStyle", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "containerAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "containerValue", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "defaultContent", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "htmlAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "htmlValue", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "placementAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "placementValue", void 0);
+    __metadata("design:type", String)
+], QboPopover.prototype, "placement", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], QboPopover.prototype, "selector", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "toggleAtt", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboPopover.prototype, "toggleValue", void 0);
-__decorate([
-    property({ type: Boolean }),
+    state(),
     __metadata("design:type", Object)
-], QboPopover.prototype, "renderInHost", void 0);
+], QboPopover.prototype, "isOpen", void 0);
 QboPopover = __decorate([
     customElement('qbo-popover')
 ], QboPopover);

package/src/qbo/qbo-popover.ts

@@ -1,71 +1,97 @@
-import { html, PropertyValues } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { Popover } from 'bootstrap';
-import { QboFormElement } from './qbo-form-element.js';
+import { LitElement, PropertyValues, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { computePosition, Placement, shift, flip } from "@floating-ui/dom";
 
 @customElement('qbo-popover')
-export class QboPopover extends QboFormElement {
+export class QboPopover extends LitElement {
 
     @property({ type: String })
-    contentAtt = 'data-bs-content';
+    placement: Placement = "bottom";
 
     @property({ type: String })
-    contentStyle = 'none';
-
-    @property({ type: String })
-    containerAtt = 'data-bs-container';
-
-    @property({ type: String })
-    containerValue = 'body';
-
-    @property({ type: String })
-    defaultContent = 'No content provided';
-
-    @property({ type: String })
-    htmlAtt = 'data-bs-html';
-
-    @property({ type: String })
-    htmlValue = 'true';
-
-    @property({ type: String })
-    placementAtt = 'data-bs-placement';
-
-    @property({ type: String })
-    placementValue = 'left';
+    selector = '*[data-popover-trigger]';
+
+    // Internal state to control menu visibility
+    @state() private isOpen = false;
+
+    private triggerElement!: HTMLElement;
+    private middleware = [flip(), shift()];
+
+    private async setPosition() {
+        const { x, y } = await computePosition(
+            this.triggerElement,
+            this,
+            {
+                placement: this.placement as Placement | undefined,
+                middleware: this.middleware,
+            }
+        );
+
+        Object.assign(
+            this.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    }
 
-    @property({ type: String })
-    selector = '*[slot=content]';
+    connectedCallback() {
+        super.connectedCallback();
 
-    @property({ type: String })
-    toggleAtt = 'data-bs-toggle';
+        document.addEventListener("qbo-popover-open", this.handleMenuOpen);
+    }
 
-    @property({ type: String })
-    toggleValue = 'popover';
+    disconnectedCallback() {
+        super.disconnectedCallback();
 
-    @property({ type: Boolean })
-    renderInHost = true;
+        document.removeEventListener("qbo-popover-open", this.handleMenuOpen);
 
-    createRenderRoot() {
-        return this.renderInHost ? this : super.createRenderRoot();
+        if (this.triggerElement != null) {
+            this.triggerElement.removeEventListener("mouseover", this.toggleMenu);
+            this.triggerElement.removeEventListener("mouseout", this.toggleMenu);
+        }
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.setAttribute(this.toggleAtt, this.toggleValue);
-        this.setAttribute(this.placementAtt, this.placementValue);
-        this.setAttribute(this.containerAtt, this.containerValue);
-        this.setAttribute(this.htmlAtt, this.htmlValue);
-    }
+    firstUpdated(changes: PropertyValues) {
+        super.firstUpdated(changes);
 
-    firstUpdated(changedProperties: PropertyValues) {
-        super.firstUpdated(changedProperties);
+        this.triggerElement =
+            this.parentElement?.querySelector(this.selector) ||
+            this.shadowRoot?.querySelector(this.selector) ||
+            document.querySelector(this.selector) ||
+            this.parentElement as HTMLElement;
 
-        const content = this.querySelector(this.selector);
-        if (content instanceof HTMLElement) content.style.display = this.contentStyle;
-        this.setAttribute(this.contentAtt, content?.innerHTML ?? this.defaultContent);
+        if (this.triggerElement != null) {
+            this.triggerElement.addEventListener("mouseover", this.toggleMenu);
+            this.triggerElement.addEventListener("mouseout", this.toggleMenu);
+        }
+    }
 
-        new Popover(this);
+    handleMenuOpen = (event: Event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if ((event as CustomEvent).detail.menu !== this && this.isOpen) this.closeMenu();
+    };
+
+    toggleMenu = (event: Event) => {
+        this.isOpen = !this.isOpen;
+        this.classList.toggle("open", this.isOpen);
+
+        if (this.isOpen) {
+            this.setPosition();
+            document.dispatchEvent(
+                new CustomEvent("qbo-popover-open", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { menu: this },
+                })
+            );
+        }
+    };
+
+    closeMenu() {
+        this.isOpen = false;
+        this.classList.remove("open");
     }
 
     render() {