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

package/src/qbo/qbo-popover.ts

@@ -1,74 +1,102 @@
-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() {
         return html`<slot></slot>`;
     }
-}
+}
+
+if (!customElements.get('qbo-popover'))
+    customElements.define('qbo-popover', QboPopover)

package/src/qbo/qbo-popup-listener.js

@@ -8,11 +8,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 /**
   * Listens for a popup event, and renders popup with the content.
   */
-let QboPopupListener = class QboPopupListener extends LitElement {
+export class QboPopupListener extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -102,7 +102,7 @@ let QboPopupListener = class QboPopupListener extends LitElement {
         </slot>
     `;
     }
-};
+}
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -139,7 +139,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboPopupListener.prototype, "listen", void 0);
-QboPopupListener = __decorate([
-    customElement('qbo-popup-listener')
-], QboPopupListener);
-export { QboPopupListener };
+if (!customElements.get('qbo-popup-listener'))
+    customElements.define('qbo-popup-listener', QboPopupListener);

package/src/qbo/qbo-popup-listener.ts

@@ -4,7 +4,6 @@ import { customElement, property } from 'lit/decorators.js';
 /**
   * Listens for a popup event, and renders popup with the content.
   */
-@customElement('qbo-popup-listener')
 export class QboPopupListener extends LitElement {
     @property({ type: Boolean })
     open = false;
@@ -127,3 +126,6 @@ export class QboPopupListener extends LitElement {
     `;
     }
 }
+
+if (!customElements.get('qbo-popup-listener'))
+    customElements.define('qbo-popup-listener', QboPopupListener)

package/src/qbo/qbo-popup.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { QboFetch } from './qbo-fetch.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 /**
@@ -17,7 +17,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-let QboPopup = class QboPopup extends QboFetch {
+export class QboPopup extends QboFetch {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -76,7 +76,7 @@ let QboPopup = class QboPopup extends QboFetch {
         <slot name="content" @click="${this.hide}" style="display:${this.open ? 'flex' : 'none'}">${unsafeHTML(this.html)}</slot>
     `;
     }
-};
+}
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -89,7 +89,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboPopup.prototype, "renderInHost", void 0);
-QboPopup = __decorate([
-    customElement('qbo-popup')
-], QboPopup);
-export { QboPopup };
+if (!customElements.get('qbo-popup'))
+    customElements.define('qbo-popup', QboPopup);

package/src/qbo/qbo-popup.ts

@@ -9,7 +9,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-@customElement('qbo-popup')
 export class QboPopup extends QboFetch {
     @property({ type: Boolean })
     open = false;
@@ -82,3 +81,6 @@ export class QboPopup extends QboFetch {
     `;
     }
 }
+
+if (!customElements.get('qbo-popup'))
+    customElements.define('qbo-popup', QboPopup)

package/src/qbo/qbo-resize.js

@@ -8,13 +8,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 export var ResizeType;
 (function (ResizeType) {
     ResizeType["Horizontal"] = "horizontal";
     ResizeType["Vertical"] = "vertical";
 })(ResizeType || (ResizeType = {}));
-let QboResize = class QboResize extends LitElement {
+export class QboResize extends LitElement {
     constructor() {
         super(...arguments);
         this.isResizing = false;
@@ -93,7 +93,7 @@ let QboResize = class QboResize extends LitElement {
     render() {
         return html `<slot><span></span></slot>`;
     }
-};
+}
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -102,7 +102,5 @@ __decorate([
     property(),
     __metadata("design:type", String)
 ], QboResize.prototype, "type", void 0);
-QboResize = __decorate([
-    customElement('qbo-resize')
-], QboResize);
-export { QboResize };
+if (!customElements.get('qbo-resize'))
+    customElements.define('qbo-resize', QboResize);

package/src/qbo/qbo-resize.ts

@@ -6,8 +6,6 @@ export enum ResizeType {
     Vertical = 'vertical'
 }
 
-
-@customElement('qbo-resize')
 export class QboResize extends LitElement {
     static styles = css`
   `;
@@ -101,3 +99,6 @@ export class QboResize extends LitElement {
         return html`<slot><span></span></slot>`;
     }
 }
+
+if (!customElements.get('qbo-resize'))
+    customElements.define('qbo-resize', QboResize)

package/src/qbo/qbo-select.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { getArray } from './qbo-json.js';
 import { QboFormElement, getApiService } from './Program.js';
 /**
@@ -17,7 +17,7 @@ import { QboFormElement, getApiService } from './Program.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-let QboSelect = class QboSelect extends QboFormElement {
+export class QboSelect extends QboFormElement {
     constructor() {
         super(...arguments);
         this.apiEndpoint = 'default';
@@ -59,7 +59,7 @@ let QboSelect = class QboSelect extends QboFormElement {
             ${this.options.map(option => html `<option value="${option[this.optionValue]}" ?selected="${option[this.optionValue] == this.defaultValue}">${option[this.optionText]}</option>`)}
         </select>`;
     }
-};
+}
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -100,7 +100,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboSelect.prototype, "renderInHost", void 0);
-QboSelect = __decorate([
-    customElement('qbo-select')
-], QboSelect);
-export { QboSelect };
+if (!customElements.get('qbo-select'))
+    customElements.define('qbo-select', QboSelect);

package/src/qbo/qbo-select.ts

@@ -10,7 +10,6 @@ import { IApiService, QboFormElement, getApiService } from './Program.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-@customElement('qbo-select')
 export class QboSelect extends QboFormElement
 {
     @property({ type: String })
@@ -77,3 +76,6 @@ export class QboSelect extends QboFormElement
         </select>`;
     }
 }
+
+if (!customElements.get('qbo-select'))
+    customElements.define('qbo-select', QboSelect)

package/src/qbo/qbo-selectable.js

@@ -8,14 +8,14 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { qboui } from "./styles.js";
 export var Mode;
 (function (Mode) {
     Mode["Single"] = "single";
     Mode["Multi"] = "multi";
 })(Mode || (Mode = {}));
-let QboSelectable = class QboSelectable extends LitElement {
+export class QboSelectable extends LitElement {
     constructor() {
         super(...arguments);
         this.classSelected = 'qbo-select-on';
@@ -129,7 +129,7 @@ let QboSelectable = class QboSelectable extends LitElement {
         });
         this.dispatchEvent(event);
     }
-};
+}
 __decorate([
     property(),
     __metadata("design:type", String)
@@ -166,7 +166,5 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], QboSelectable.prototype, "target", void 0);
-QboSelectable = __decorate([
-    customElement('qbo-selectable')
-], QboSelectable);
-export { QboSelectable };
+if (!customElements.get('qbo-selectable'))
+    customElements.define('qbo-selectable', QboSelectable);

package/src/qbo/qbo-selectable.ts

@@ -7,7 +7,6 @@ export enum Mode {
     Multi = 'multi'
 }
 
-@customElement('qbo-selectable')
 export class QboSelectable extends LitElement {
 
     @property()
@@ -154,3 +153,6 @@ export class QboSelectable extends LitElement {
         this.dispatchEvent(event);
     }
 }
+
+if (!customElements.get('qbo-selectable'))
+    customElements.define('qbo-selectable', QboSelectable)

package/src/qbo/qbo-table.js

@@ -8,7 +8,7 @@ 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 { property } from 'lit/decorators.js';
 import { getArray, replicate } from './qbo-json.js';
 import { QboFetch } from './qbo-fetch.js';
 /**
@@ -18,7 +18,7 @@ import { QboFetch } from './qbo-fetch.js';
   * This element is a thin wrapper around {@link QboFetch} that renders a <table> element with options populated from a JSON array.
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#examples
   */
-let QboTable = class QboTable extends QboFetch {
+export class QboTable extends QboFetch {
     constructor() {
         super(...arguments);
         this.loading = false;
@@ -67,7 +67,7 @@ let QboTable = class QboTable extends QboFetch {
         }
         return null;
     }
-};
+}
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -88,7 +88,5 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], QboTable.prototype, "options", void 0);
-QboTable = __decorate([
-    customElement('qbo-table')
-], QboTable);
-export { QboTable };
+if (!customElements.get('qbo-table'))
+    customElements.define('qbo-table', QboTable);

package/src/qbo/qbo-table.ts

@@ -10,7 +10,6 @@ import { QboFetch } from './qbo-fetch.js';
   * This element is a thin wrapper around {@link QboFetch} that renders a <table> element with options populated from a JSON array.
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#examples
   */
-@customElement('qbo-table')
 export class QboTable extends QboFetch {
     @property({ type: Boolean })
     loading = false;
@@ -78,3 +77,5 @@ export class QboTable extends QboFetch {
 
 }
 
+if (!customElements.get('qbo-table'))
+    customElements.define('qbo-table', QboTable)

package/src/qbo/qbo-user-preferences.js

@@ -8,9 +8,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { qboui } from './styles.js';
-let QboUserPreferences = class QboUserPreferences extends LitElement {
+export class QboUserPreferences extends LitElement {
     static { this.styles = [qboui, css `
     :host {
       display: block;
@@ -89,7 +89,7 @@ let QboUserPreferences = class QboUserPreferences extends LitElement {
       </dialog>
     ` : html ``}`;
     }
-};
+}
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
@@ -102,11 +102,6 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], QboUserPreferences.prototype, "isEditing", void 0);
-QboUserPreferences = __decorate([
-    customElement('qbo-user-preferences'),
-    __metadata("design:paramtypes", [])
-], QboUserPreferences);
-export { QboUserPreferences };
 export function setUserPreference(preference, value, storageKey = 'qbo4.ui.preferences') {
     // Get the current stored preferences
     const storedPreferences = localStorage.getItem(storageKey);
@@ -176,3 +171,5 @@ export function formatDate(dateString, format = null) {
     const formattedDate = new Intl.DateTimeFormat(undefined, options).format(new Date(dateString));
     return formattedDate;
 }
+if (!customElements.get('qbo-user-preferences'))
+    customElements.define('qbo-user-preferences', QboUserPreferences);

package/src/qbo/qbo-user-preferences.ts

@@ -2,7 +2,6 @@
 import { customElement, property, state } from 'lit/decorators.js';
 import { qboui } from './styles.js';
 
-@customElement('qbo-user-preferences')
 export class QboUserPreferences extends LitElement {
     @property({ type: Object }) preferences = {};
 
@@ -165,3 +164,6 @@ export function formatDate(dateString: string | Date | undefined | null, format:
 
     return formattedDate;
 }
+
+if (!customElements.get('qbo-user-preferences'))
+    customElements.define('qbo-user-preferences', QboUserPreferences)

package/src/qbo/qbo-validate.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { ValidateToken } from './IValidate.js';
 import { services } from './Services.js';
 /**
@@ -34,7 +34,7 @@ import { services } from './Services.js';
  * });
  * ```
  */
-let QboValidate = class QboValidate extends LitElement {
+export class QboValidate extends LitElement {
     constructor() {
         super();
         this.renderInHost = false;
@@ -120,7 +120,7 @@ let QboValidate = class QboValidate extends LitElement {
     render() {
         return html ``;
     }
-};
+}
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -142,8 +142,5 @@ __decorate([
     }),
     __metadata("design:type", Object)
 ], QboValidate.prototype, "workingClass", void 0);
-QboValidate = __decorate([
-    customElement('qbo-validate'),
-    __metadata("design:paramtypes", [])
-], QboValidate);
-export { QboValidate };
+if (!customElements.get('qbo-validate'))
+    customElements.define('qbo-validate', QboValidate);

package/src/qbo/qbo-validate.ts

@@ -27,7 +27,6 @@ import { DependencyContainer } from 'tsyringe';
  * });
  * ```
  */
-@customElement('qbo-validate')
 export class QboValidate extends LitElement {
 
     @property({ type: Boolean })
@@ -139,3 +138,6 @@ export class QboValidate extends LitElement {
     }
 
 }
+
+if (!customElements.get('qbo-validate'))
+    customElements.define('qbo-validate', QboValidate)