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

package/src/qbo/qbo-datalist.js

@@ -8,10 +8,10 @@ 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 } from './qbo-json.js';
 import { QboFetch } from './qbo-fetch.js';
-let QboDataList = class QboDataList extends QboFetch {
+export class QboDataList extends QboFetch {
     constructor() {
         super(...arguments);
         this.listId = null;
@@ -91,7 +91,7 @@ let QboDataList = class QboDataList extends QboFetch {
                 ${this.options.map(option => html `<option value="${option[this.text]}" data-value="${option[this.value]}"/>`)}
             </datalist>`;
     }
-};
+}
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -120,7 +120,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboDataList.prototype, "fetchOnLoad", void 0);
-QboDataList = __decorate([
-    customElement('qbo-datalist')
-], QboDataList);
-export { QboDataList };
+if (!customElements.get('qbo-datalist'))
+    customElements.define('qbo-datalist', QboDataList);

package/src/qbo/qbo-datalist.ts

@@ -3,7 +3,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { getArray } from './qbo-json.js';
 import { QboFetch } from './qbo-fetch.js';
 
-@customElement('qbo-datalist')
 export class QboDataList extends QboFetch {
 
     @property({ type: String })
@@ -101,4 +100,7 @@ export class QboDataList extends QboFetch {
                 ${this.options.map(option => html`<option value="${option[this.text!]}" data-value="${option[this.value!]}"/>`)}
             </datalist>`;
     }
-}
+}
+
+if (!customElements.get('qbo-datalist'))
+    customElements.define('qbo-datalist', QboDataList)

package/src/qbo/qbo-docviewer.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';
 /**
   * Renders a <select> element with options populated from a JSON array.
@@ -16,7 +16,7 @@ import { QboFetch } from './qbo-fetch.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-let QboDocViewer = class QboDocViewer extends QboFetch {
+export class QboDocViewer extends QboFetch {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -36,7 +36,7 @@ let QboDocViewer = class QboDocViewer extends QboFetch {
     render() {
         return html `<iframe src='sample.pdf' width='100%' height='800px' frameborder='0'></iframe>`;
     }
-};
+}
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -49,7 +49,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboDocViewer.prototype, "renderInHost", void 0);
-QboDocViewer = __decorate([
-    customElement('qbo-docviewer')
-], QboDocViewer);
-export { QboDocViewer };
+if (!customElements.get('qbo-docviewer'))
+    customElements.define('qbo-docviewer', QboDocViewer);

package/src/qbo/qbo-docviewer.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-docviewer')
 export class QboDocViewer extends QboFetch {
     @property({ type: Boolean })
     open = false;
@@ -37,3 +36,6 @@ export class QboDocViewer extends QboFetch {
         return html`<iframe src='sample.pdf' width='100%' height='800px' frameborder='0'></iframe>`;
     }
 }
+
+if (!customElements.get('qbo-docviewer'))
+    customElements.define('qbo-docviewer', QboDocViewer)

package/src/qbo/qbo-fetch.js

@@ -59,6 +59,10 @@ export const QboFetchMixin = (superClass) => {
                     console.error('Error parsing payload JSON:', error);
                 }
             }
+            else {
+                if (Object.keys(this.dataset).length > 0)
+                    payload = { ...this.dataset };
+            }
             return payload;
         }
         /* @description Fetch data from an api, and set @see {@link html} or @see {@link jsonData} with the result. */

package/src/qbo/qbo-fetch.ts

@@ -88,6 +88,9 @@ export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T)
                 } catch (error) {
                     console.error('Error parsing payload JSON:', error);
                 }
+            } else {
+                if (Object.keys(this.dataset).length > 0)
+                    payload = { ...this.dataset } as Record<string, string>;
             }
             return payload;
         }

package/src/qbo/qbo-form-edit.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, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { elementDateTime } from './Program.js';
 const formEditMap = new Map();
 formEditMap.set('defaultLayout', (component) => {
@@ -44,7 +44,7 @@ formEditMap.set('updatedLayout', (component) => {
         <span>${component.UpdatedPerson}</span>
     </div>`;
 });
-let QboFormEdit = class QboFormEdit extends LitElement {
+export class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
         this.aDropdownClass = 'dropdown-item qbo-pointer';
@@ -111,7 +111,7 @@ let QboFormEdit = class QboFormEdit extends LitElement {
             </div>
         </slot>`;
     }
-};
+}
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -200,7 +200,5 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "renderInHost", void 0);
-QboFormEdit = __decorate([
-    customElement('qbo-form-edit')
-], QboFormEdit);
-export { QboFormEdit };
+if (!customElements.get('qbo-form-edit'))
+    customElements.define('qbo-form-edit', QboFormEdit);

package/src/qbo/qbo-form-edit.ts

@@ -38,7 +38,6 @@ formEditMap.set('updatedLayout', (component: any) => {
     </div>`;
 });
 
-@customElement('qbo-form-edit')
 export class QboFormEdit extends LitElement {
 
     @property({ type: String })
@@ -150,3 +149,6 @@ export class QboFormEdit extends LitElement {
         </slot>`;
     }
 }
+
+if (!customElements.get('qbo-form-edit'))
+    customElements.define('qbo-form-edit', QboFormEdit)

package/src/qbo/qbo-form-element.js

@@ -7,12 +7,10 @@ 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);
 };
-var QboFormElement_1;
 import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { substitute } from './qbo-json.js';
-let QboFormElement = class QboFormElement extends LitElement {
-    static { QboFormElement_1 = this; }
+export class QboFormElement extends LitElement {
     static { this.formAssociated = true; }
     constructor() {
         super();
@@ -76,7 +74,7 @@ let QboFormElement = class QboFormElement extends LitElement {
             && (e instanceof HTMLInputElement
                 || e instanceof HTMLSelectElement
                 || e instanceof HTMLTextAreaElement
-                || e instanceof QboFormElement_1) && e.name);
+                || e instanceof QboFormElement) && e.name);
         inputs.forEach(element => {
             const input = element;
             if (input instanceof HTMLSelectElement) {
@@ -85,7 +83,7 @@ let QboFormElement = class QboFormElement extends LitElement {
             else if (input instanceof HTMLTextAreaElement) {
                 this.value.set(`${this.name}${input.name}`, input.value);
             }
-            else if (input instanceof QboFormElement_1) {
+            else if (input instanceof QboFormElement) {
                 for (let [key, value] of input.value.entries()) {
                     this.value.set(`${this.name}${key}`, value);
                 }
@@ -104,7 +102,7 @@ let QboFormElement = class QboFormElement extends LitElement {
         this.internals.setFormValue(this.value);
         console.trace(`Set ${this.name} values to `, this.value);
     }
-};
+}
 __decorate([
     property({ type: FormData }),
     __metadata("design:type", FormData)
@@ -121,8 +119,5 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], QboFormElement.prototype, "data", void 0);
-QboFormElement = QboFormElement_1 = __decorate([
-    customElement('qbo-form-element'),
-    __metadata("design:paramtypes", [])
-], QboFormElement);
-export { QboFormElement };
+if (!customElements.get('qbo-form-element'))
+    customElements.define('qbo-form-element', QboFormElement);

package/src/qbo/qbo-form-element.ts

@@ -3,7 +3,6 @@ import { html, css, LitElement, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { substitute } from './qbo-json.js';
 
-@customElement('qbo-form-element')
 export class QboFormElement extends LitElement {
     static formAssociated = true;
 
@@ -118,3 +117,5 @@ export class QboFormElement extends LitElement {
     }
 }
 
+if (!customElements.get('qbo-form-element'))
+    customElements.define('qbo-form-element', QboFormElement)

package/src/qbo/qbo-icon.js

@@ -7,9 +7,8 @@ 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);
 };
-var QboIcon_1;
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 const iconMap = new Map();
 // qbo modules
@@ -48,7 +47,7 @@ iconMap.set('video', 'camera-video');
 iconMap.set('headset', 'headphones');
 iconMap.set('warning', 'exclamation-triangle');
 // Renders an SVG icon based on the type attribute.
-let QboIcon = class QboIcon extends LitElement {
+export class QboIcon extends LitElement {
     constructor() {
         super(...arguments);
         this.type = 'icon';
@@ -63,7 +62,6 @@ let QboIcon = class QboIcon extends LitElement {
         this.selected = false;
         this.allIcons = undefined;
     }
-    static { QboIcon_1 = this; }
     static { this.map = iconMap; }
     // = '/ui/images/icons.svg';
     // Getter to retrieve the `qbo4-basepath` meta tag value
@@ -101,7 +99,7 @@ let QboIcon = class QboIcon extends LitElement {
             return this.allIcons;
         try {
             // Adjust this path to point to the correct location of bootstrap-icons.svg
-            const response = await fetch(this.sprite ?? QboIcon_1.spriteUrl);
+            const response = await fetch(this.sprite ?? QboIcon.spriteUrl);
             const svgText = await response.text();
             // Parse the SVG file
             const parser = new DOMParser();
@@ -158,7 +156,7 @@ ${Array.from(iconMap.keys()).map(k => html `<div class="col-3">
             component.icon = 'warning';
         }
         const id = iconMap.has(component.icon) ? iconMap.get(component.icon) : component.icon;
-        return html `<svg width="${component.width}" height="${component.width}" fill="${component.fill}" ?class=${component.getAttribute('class')}><use href="${component.sprite ?? QboIcon_1.spriteUrl}#${id}"></use></svg>`;
+        return html `<svg width="${component.width}" height="${component.width}" fill="${component.fill}" ?class=${component.getAttribute('class')}><use href="${component.sprite ?? QboIcon.spriteUrl}#${id}"></use></svg>`;
     }
     //renderButton(component: any) {
     //    return html`<button type="button" ?disabled=${component.disabled}>${component.renderIcon(component)}</button>`;
@@ -173,7 +171,7 @@ ${Array.from(iconMap.keys()).map(k => html `<div class="col-3">
             default: return this.renderIcon(this);
         }
     }
-};
+}
 __decorate([
     property(),
     __metadata("design:type", String)
@@ -218,7 +216,5 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], QboIcon.prototype, "selected", void 0);
-QboIcon = QboIcon_1 = __decorate([
-    customElement('qbo-icon')
-], QboIcon);
-export { QboIcon };
+if (!customElements.get('qbo-icon'))
+    customElements.define('qbo-icon', QboIcon);

package/src/qbo/qbo-icon.ts

@@ -44,7 +44,6 @@ iconMap.set('warning', 'exclamation-triangle');
 
 
 // Renders an SVG icon based on the type attribute.
-@customElement('qbo-icon')
 export class QboIcon extends LitElement {
 
     static map: Map<string, string> = iconMap;
@@ -208,3 +207,6 @@ ${Array.from(iconMap.keys()).map(k => html`<div class="col-3">
     }
 
 }
+
+if (!customElements.get('qbo-icon'))
+    customElements.define('qbo-icon', QboIcon)

package/src/qbo/qbo-menu.d.ts

@@ -1,19 +1,21 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from "lit";
+import { Placement } from "@floating-ui/dom";
 export declare class QboMenu extends LitElement {
-    type: string;
-    expanded: boolean;
-    static styles: import("lit").CSSResult[];
-    private toggleSidebar;
+    placement: Placement;
+    private isOpen;
+    private slotElement;
+    private menuSlotElement;
+    private triggerButton;
+    private menuContainer;
+    private middleware;
+    static styles: import("lit").CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    target: string;
-    xcreateRenderRoot(): this;
-    private showContextMenu;
-    private hideContextMenu;
-    private positionContextMenu;
-    get contextParent(): HTMLElement | Document | null;
-    context(): import("lit-html").TemplateResult<1>;
-    toggleSideMenu: (event: Event) => void;
-    side(): import("lit-html").TemplateResult<1>;
-    render(): import("lit-html").TemplateResult<1> | undefined;
+    handleMenuOpen: (event: Event) => void;
+    handleOutsideClick: (event: Event) => void;
+    firstUpdated(changes: PropertyValues): void;
+    toggleMenu: (event: Event) => void;
+    closeMenu(): void;
+    private updateMenuPosition;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo/qbo-menu.js

@@ -7,144 +7,117 @@ 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 { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { qboui } from './styles.js';
-let QboMenu = class QboMenu extends LitElement {
+import { LitElement, html, css } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { computePosition, shift, flip } from "@floating-ui/dom";
+export class QboMenu extends LitElement {
     constructor() {
         super(...arguments);
-        this.type = 'side';
-        this.expanded = false;
-        /* Css Selector for the HTMLElement that the context menu applies to. */
-        this.target = '';
-        this.showContextMenu = (event) => {
+        // Define the placement property with type `string`
+        this.placement = "bottom-start";
+        // Internal state to control menu visibility
+        this.isOpen = false;
+        this.middleware = [flip(), shift()];
+        this.handleMenuOpen = (event) => {
             event.preventDefault();
-            if (!this.expanded) {
-                this.expanded = true;
-                this.positionContextMenu(event);
+            event.stopPropagation();
+            const customEvent = event;
+            if (customEvent.detail.menu !== this && this.isOpen) {
+                this.closeMenu();
             }
         };
-        this.hideContextMenu = (event) => {
-            if (this.expanded && !this.shadowRoot?.contains(event.target) && !this.contains(event.target)) {
-                this.expanded = false;
+        this.handleOutsideClick = (event) => {
+            const customEvent = event;
+            const target = customEvent.target;
+            if (target !== this && !this.contains(target)) {
+                this.closeMenu();
             }
         };
-        this.toggleSideMenu = (event) => {
-            const target = event.target;
-            if (target?.closest('menu') == null) {
-                this.expanded = !this.expanded;
-                this.classList.toggle('expanded', this.expanded);
+        this.toggleMenu = (event) => {
+            if (event.target instanceof HTMLElement
+                || event.target instanceof SVGElement
+                || event.target instanceof SVGUseElement) {
+                let toggleMenu = true;
+                let parent = event.target.parentElement;
+                while (toggleMenu && parent) {
+                    if (parent instanceof HTMLElement && parent.tagName.toLowerCase() == 'aside')
+                        toggleMenu = false;
+                    else
+                        parent = parent.parentElement;
+                }
+                if (toggleMenu) {
+                    this.isOpen = !this.isOpen;
+                    this.menuContainer.classList.toggle("open", this.isOpen);
+                    if (this.isOpen) {
+                        this.updateMenuPosition();
+                        document.dispatchEvent(new CustomEvent("qbo-menu-open", {
+                            bubbles: true,
+                            composed: true,
+                            detail: { menu: this },
+                        }));
+                    }
+                }
             }
         };
     }
-    static { this.styles = [qboui, css `
-        :host {
-            display: block;
-        }
-
-        .toggle-btn {
-            width: 100%;
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            cursor: pointer;
-            text-align: left;
-        }
-    `]; }
-    toggleSidebar() {
-        this.expanded = !this.expanded;
-    }
+    static { this.styles = css ``; }
     connectedCallback() {
         super.connectedCallback();
-        switch (this.type) {
-            case 'context':
-                document.addEventListener('click', this.hideContextMenu);
-                this.contextParent?.addEventListener('contextmenu', this.showContextMenu);
-                break;
-            case 'side':
-                this.renderRoot.addEventListener('click', this.toggleSideMenu);
-                break;
-        }
+        // document.addEventListener("click", this.handleOutsideClick.bind);
+        document.addEventListener("qbo-menu-open", this.handleMenuOpen.bind(this));
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        switch (this.type) {
-            case 'context':
-                this.contextParent?.removeEventListener('contextmenu', this.showContextMenu);
-                document.removeEventListener('click', this.hideContextMenu);
-                break;
-            case 'side':
-                this.renderRoot.removeEventListener('click', this.toggleSideMenu);
-                break;
-        }
-    }
-    xcreateRenderRoot() {
-        return this; // : super.createRenderRoot();
+        // document.removeEventListener("click", this.handleOutsideClick);
+        document.removeEventListener("qbo-menu-open", this.handleMenuOpen);
+        this.triggerButton.removeEventListener("click", this.toggleMenu);
     }
-    async positionContextMenu(event) {
-        event.preventDefault();
-        this.expanded = true;
-        await this.updateComplete;
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const menuWidth = this.offsetWidth || 0;
-        const menuHeight = this.offsetHeight || 0;
-        // Calculate adjusted x and y positions
-        let x = event.clientX;
-        let y = event.clientY;
-        if (x + menuWidth > viewportWidth) {
-            x = viewportWidth - menuWidth;
-        }
-        if (y + menuHeight > viewportHeight) {
-            y = viewportHeight - menuHeight;
-        }
-        console.log(`mouse event: ${event.clientX} x ${event.clientY} ; ${x} x ${y}`);
-        this.style.left = x + 'px';
-        this.style.top = y + 'px';
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.triggerButton =
+            this.querySelector("*[data-trigger]") ||
+                this.querySelector("button") ||
+                this.parentElement;
+        this.menuContainer =
+            this.querySelector("*[data-content]") ||
+                this.querySelector("aside") ||
+                this.querySelector("menu");
+        if (this.triggerButton != null)
+            this.triggerButton.addEventListener("click", this.toggleMenu);
     }
-    get contextParent() {
-        if (this.target) {
-            return (this.closest(this.target) ||
-                (() => {
-                    const rootNode = this.getRootNode();
-                    if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
-                        return rootNode.querySelector(this.target);
-                    }
-                    return null;
-                })() ||
-                document.querySelector(this.target) ||
-                document);
-        }
-        else {
-            return this.parentElement;
-        }
-    }
-    context() {
-        return html `${this.expanded ? html `<slot></slot>` : ''}`;
+    closeMenu() {
+        this.isOpen = false;
+        this.menuContainer.classList.remove("open");
     }
-    side() {
-        return html `<slot></slot>`;
+    async updateMenuPosition() {
+        const { x, y } = await computePosition(this.triggerButton, this.menuContainer, {
+            placement: this.placement,
+            middleware: this.middleware,
+        });
+        Object.assign(this.menuContainer.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
     }
     render() {
-        switch (this.type) {
-            case 'side': return this.side();
-            case 'context': return this.context();
-        }
+        return html `<slot></slot>`;
     }
-};
+}
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
-], QboMenu.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], QboMenu.prototype, "expanded", void 0);
+], QboMenu.prototype, "placement", void 0);
 __decorate([
-    property({ type: String }),
+    state(),
     __metadata("design:type", Object)
-], QboMenu.prototype, "target", void 0);
-QboMenu = __decorate([
-    customElement('qbo-menu')
-], QboMenu);
-export { QboMenu };
+], QboMenu.prototype, "isOpen", void 0);
+__decorate([
+    query("slot"),
+    __metadata("design:type", HTMLSlotElement)
+], QboMenu.prototype, "slotElement", void 0);
+__decorate([
+    query('slot[name="menu"]'),
+    __metadata("design:type", HTMLSlotElement)
+], QboMenu.prototype, "menuSlotElement", void 0);
+if (!customElements.get("qbo-menu"))
+    customElements.define("qbo-menu", QboMenu);