@quandis/qbo4.ui 4.0.1-CI-20241027-142453 → 4.0.1-CI-20241029-174756

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20241027-142453",
+  "version": "4.0.1-CI-20241029-174756",
   "workspaces": [
     "code"
   ],
@@ -45,6 +45,7 @@
     "@fullhuman/postcss-purgecss": "^6.0.0",
     "autoprefixer": "^10.4.20",
     "clean-css": "^5.3.3",
+    "copy-webpack-plugin": "^12.0.2",
     "eslint": "^9.13.0",
     "glob": "^11.0.0",
     "html-webpack-plugin": "^5.6.3",

package/scss/qboui.scss

@@ -5,16 +5,115 @@
 @import "./navbar.scss";
 @import "./sidebar.scss";
 
-.qbo-card {
+qbo-icon[type=button] {
+    @extend .btn;
+}
+
+qbo-icon[type=toggle] {
+    @extend .btn;
+}
+
+qbo-icon[selected] {
+    @extend .active;
+}
+
+
+
+qbo-card, .qbo-card {
     @extend .card;
+    @extend .col;
+    overflow-y: auto;
 
     header {
         @extend .card-header;
+        font-weight: bold;
+        font-size: 1.25rem;
+        cursor: pointer;
+
+        position: relative;
+        padding-left: 1.25rem;
+        background-repeat: no-repeat;
+        background-position: left center;
+        background-size: 1rem 1rem;
     }
 
     footer {
         @extend .card-footer;
     }
+
+    &.minimize {
+        > * {
+            display: none;
+        }
+
+        header {
+            display: block;
+        }
+    }
+
+    &.normal {
+        > *.expanded {
+            display: none;
+        }
+    }
+}
+
+qbo-card[display="maximize"] header {
+    background-image: url('/ui/images/qbo-icons.svg#i-arrow-down-circle');
+}
+
+qbo-card[display="minimize"] header {
+    background-image: url('/ui/images/qbo-icons.svg#i-arrow-right-circle');
+}
+
+qbo-card[display="normal"] header {
+    position: relative;
+    padding-left: 1.25rem;
+    background-image: url('/ui/images/qbo-icons.svg#i-arrow-down-right-circle');
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: 1rem 1rem;
+}
+
+qbo-card[columns="1"] {
+    @extend .col-1;
+}
+
+qbo-card[columns="2"] {
+    @extend .col-2;
+}
+
+qbo-card[columns="3"] {
+    @extend .col-3;
+}
+
+qbo-card[columns="4"] {
+    @extend .col-4;
+}
+
+qbo-card[columns="6"] {
+    @extend .col-6;
+}
+qbo-card[columns="7"] {
+    @extend .col-7;
+}
+qbo-card[columns="8"] {
+    @extend .col-8;
+}
+qbo-card[columns="9"] {
+    @extend .col-9;
+}
+qbo-card[columns="10"] {
+    @extend .col-10;
+}
+qbo-card[columns="11"] {
+    @extend .col-11;
+}
+qbo-card[columns="12"] {
+    @extend .col-12;
+}
+qbo-card[columns="auto"] {
+    @extend .col-auto;
 }
 
 .qbo-modal {
@@ -435,9 +534,9 @@ button.qbo-primary-dropdown {
 div.qbo-input-group {
     @extend .input-group;
 }
+
 span.qbo-input-group-text {
     @extend .input-group-text;
-
     margin-left: calc(var(--bs-border-width)* -1);
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -488,8 +587,8 @@ qbo-resize.vertical {
     width: auto; /* Allow custom width */
 }
 
-qbo-contextmenu, .qbo-context-menu {
-    position: absolute;
+qbo-menu[type="context"], .qbo-menu-context {
+    position: fixed;
 
     > menu {
         @extend .dropdown-menu;
@@ -516,4 +615,3 @@ tr.qbo-select-on {
 li.qbo-select-on {
     background-color: lightgray;
 }
-

package/src/qbo/Program.d.ts

@@ -17,6 +17,7 @@ export * from './Validators.js';
 export * from './DependencyValidator.js';
 export * from './RestApiService.js';
 export * from './qbo-api.js';
+export * from './qbo-card.js';
 export * from './qbo-contextmenu.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
@@ -25,6 +26,7 @@ export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-icon.js';
 export * from './qbo-json.js';
+export * from './qbo-menu.js';
 export * from './qbo-microphone.js';
 export * from './qbo-paginate.js';
 export * from './qbo-popover.js';

package/src/qbo/Program.js

@@ -6,6 +6,7 @@ export * from './Validators.js';
 export * from './DependencyValidator.js';
 export * from './RestApiService.js';
 export * from './qbo-api.js';
+export * from './qbo-card.js';
 export * from './qbo-contextmenu.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
@@ -14,6 +15,7 @@ export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-icon.js';
 export * from './qbo-json.js';
+export * from './qbo-menu.js';
 export * from './qbo-microphone.js';
 export * from './qbo-paginate.js';
 export * from './qbo-popover.js';

package/src/qbo/Program.ts

@@ -23,6 +23,7 @@ export * from './Validators.js';
 export * from './DependencyValidator.js';
 export * from './RestApiService.js';
 export * from './qbo-api.js';
+export * from './qbo-card.js';
 export * from './qbo-contextmenu.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
@@ -31,6 +32,7 @@ export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-icon.js';
 export * from './qbo-json.js';
+export * from './qbo-menu.js';
 export * from './qbo-microphone.js'
 export * from './qbo-paginate.js'
 export * from './qbo-popover.js'

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

@@ -0,0 +1,21 @@
+import { LitElement, TemplateResult } from "lit";
+export type DisplayState = 'normal' | 'minimize' | 'maximize';
+export declare class QboCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    display: DisplayState;
+    trigger: string;
+    renderInHost: boolean;
+    columns: number | undefined;
+    private hasExpandedContent;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    minimize: (event: Event) => void;
+    normal: (event: Event) => void;
+    maximize: (event: Event) => void;
+    private handleClick;
+    shrink(): void;
+    grow(): void;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): TemplateResult<1>;
+}

package/src/qbo/qbo-card.js

@@ -0,0 +1,118 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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";
+let QboCard = class QboCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.display = 'normal';
+        this.trigger = 'header';
+        this.renderInHost = true;
+        this.hasExpandedContent = false;
+        this.minimize = (event) => {
+            this.display = 'minimize';
+        };
+        this.normal = (event) => {
+            this.display = 'normal';
+        };
+        this.maximize = (event) => {
+            this.display = 'maximize';
+        };
+    }
+    static { this.styles = [
+        css ``
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+        document.addEventListener('qbo-card-minimize', this.minimize);
+        document.addEventListener('qbo-card-normal', this.normal);
+        document.addEventListener('qbo-card-maximize', this.maximize);
+        this.hasExpandedContent = (this.querySelector('.expanded') != null);
+        if (this.display === 'normal' && !this.hasExpandedContent)
+            this.display = 'maximize';
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleClick);
+        document.removeEventListener('qbo-card-minimize', this.minimize);
+        document.removeEventListener('qbo-card-normal', this.normal);
+        document.removeEventListener('qbo-card-maximize', this.maximize);
+        super.disconnectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'display') {
+            this.classList.remove('normal', 'minimize', 'maximize');
+            if (newValue) {
+                this.classList.add(newValue);
+            }
+        }
+    }
+    // Handle click events on the header to toggle state
+    handleClick(event) {
+        const source = event.composedPath()[0];
+        const target = this.querySelector(this.trigger);
+        if (source === target) {
+            (event.ctrlKey) ? this.shrink() : this.grow();
+        }
+    }
+    shrink() {
+        switch (this.display) {
+            case 'minimize':
+                this.display = 'maximize';
+                return;
+            case 'maximize':
+                this.display = this.hasExpandedContent ? 'normal' : 'minimize';
+                return;
+            default:
+                this.display = 'minimize';
+                return;
+        }
+    }
+    grow() {
+        switch (this.display) {
+            case 'minimize':
+                this.display = this.hasExpandedContent ? 'normal' : 'maximize';
+                return;
+            case 'maximize':
+                this.display = 'minimize';
+                return;
+            default:
+                this.display = 'maximize';
+                return;
+        }
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], QboCard.prototype, "display", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboCard.prototype, "trigger", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], QboCard.prototype, "renderInHost", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboCard.prototype, "columns", void 0);
+QboCard = __decorate([
+    customElement('qbo-card')
+], QboCard);
+export { QboCard };

package/src/qbo/qbo-card.ts

@@ -0,0 +1,115 @@
+import { LitElement, TemplateResult, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { QboIcon } from "./qbo-icon.js";
+
+export type DisplayState = 'normal' | 'minimize' | 'maximize';
+
+@customElement('qbo-card')
+export class QboCard extends LitElement {
+
+    static styles = [
+        css``
+    ];
+
+    @property({ reflect: true })
+    display: DisplayState = 'normal';
+
+    @property()
+    trigger: string = 'header';
+
+    @property()
+    renderInHost: boolean = true;
+
+    @property()
+    columns: number | undefined;
+
+    private hasExpandedContent: boolean = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.addEventListener('click', this.handleClick);
+        document.addEventListener('qbo-card-minimize', this.minimize);
+        document.addEventListener('qbo-card-normal', this.normal);
+        document.addEventListener('qbo-card-maximize', this.maximize);
+        this.hasExpandedContent = (this.querySelector('.expanded') != null);
+        if (this.display === 'normal' && !this.hasExpandedContent)
+            this.display = 'maximize';
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('click', this.handleClick);
+        document.removeEventListener('qbo-card-minimize', this.minimize);
+        document.removeEventListener('qbo-card-normal', this.normal);
+        document.removeEventListener('qbo-card-maximize', this.maximize);
+        super.disconnectedCallback();
+    }
+
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'display') {
+            this.classList.remove('normal', 'minimize', 'maximize');
+            if (newValue) {
+                this.classList.add(newValue);
+            }
+        }
+    }
+
+    minimize = (event: Event) => {
+        this.display = 'minimize';
+    }
+
+    normal = (event: Event) => {
+        this.display = 'normal';
+    }
+
+    maximize = (event: Event) => {
+        this.display = 'maximize';
+    }
+
+
+    // Handle click events on the header to toggle state
+    private handleClick(event: MouseEvent) {
+        const source = event.composedPath()[0];
+        const target = this.querySelector(this.trigger);
+        if (source === target) {
+            (event.ctrlKey) ? this.shrink() : this.grow();
+        }
+    }
+
+    shrink() {
+        switch (this.display) {
+            case 'minimize':
+                this.display = 'maximize';
+                return;
+            case 'maximize':
+                this.display = this.hasExpandedContent ? 'normal' : 'minimize';
+                return;
+            default:
+                this.display = 'minimize';
+                return;
+        }
+    }
+
+    grow() {
+        switch (this.display) {
+            case 'minimize':
+                this.display = this.hasExpandedContent ? 'normal' : 'maximize';
+                return;
+            case 'maximize':
+                this.display = 'minimize';
+                return;
+            default:
+                this.display = 'maximize';
+                return;
+        }
+    }
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    render() {
+        return html`<slot></slot>`;
+    }
+}

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

@@ -6,9 +6,11 @@ export declare class ContextMenu extends LitElement {
     parent: HTMLElement | Document | null;
     menu: HTMLElement | null | undefined;
     connectedCallback(): void;
+    getContextTarget(): void;
     disconnectedCallback(): void;
     private _handleClickOutside;
-    private _handleContextMenu;
+    private showContextMenu;
+    private _updateMenuPosition;
     private _handleClose;
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo/qbo-contextmenu.js

@@ -7,30 +7,32 @@ 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 { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { qboui } from './styles.js';
 let ContextMenu = class ContextMenu extends LitElement {
     constructor() {
         super(...arguments);
         this._open = false;
-        //@state() private _x = 0;
-        //@state() private _y = 0;
         this.target = '';
         this.parent = null;
         this.menu = null;
+        this.showContextMenu = (event) => {
+            event.preventDefault();
+            this._open = true;
+            this._updateMenuPosition(event);
+        };
     }
     static { this.styles = [
-        qboui,
-        css `details { padding-left: 16px; }`
+        qboui
     ]; }
     connectedCallback() {
         super.connectedCallback();
+        this.getContextTarget();
+        document.addEventListener('click', this._handleClickOutside.bind(this));
+    }
+    getContextTarget() {
         if (this.target) {
-            const rootNode = this.getRootNode();
-            if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
-                const targetElement = rootNode.querySelector(this.target);
-            }
             this.parent = this.closest(this.target)
                 ?? ((() => {
                     const rootNode = this.getRootNode();
@@ -41,13 +43,14 @@ let ContextMenu = class ContextMenu extends LitElement {
                 })())
                 ?? document.querySelector(this.target)
                 ?? document;
-            this.parent.addEventListener('contextmenu', this._handleContextMenu.bind(this));
         }
-        document.addEventListener('click', this._handleClickOutside.bind(this));
+        else
+            this.parent = this.parentElement;
+        this.parent.addEventListener('contextmenu', this.showContextMenu);
     }
     disconnectedCallback() {
         if (this.parent)
-            this.parent.removeEventListener('contextmenu', this._handleContextMenu);
+            this.parent.removeEventListener('contextmenu', this.showContextMenu);
         document.removeEventListener('click', this._handleClickOutside.bind(this));
     }
     _handleClickOutside(event) {
@@ -55,10 +58,10 @@ let ContextMenu = class ContextMenu extends LitElement {
             this._open = false;
         }
     }
-    _handleContextMenu(event) {
+    async _updateMenuPosition(event) {
         event.preventDefault();
-        //this._x = event.clientX;
-        //this._y = event.clientY;
+        this._open = true;
+        await this.updateComplete;
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
         const menuWidth = this.offsetWidth || 0;
@@ -72,10 +75,9 @@ let ContextMenu = class ContextMenu extends LitElement {
         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';
-        this._open = true;
-        this.requestUpdate();
     }
     _handleClose() {
         this._open = false;

package/src/qbo/qbo-contextmenu.ts

@@ -5,13 +5,10 @@ import { qboui } from './styles.js';
 @customElement('qbo-contextmenu')
 export class ContextMenu extends LitElement {
     static styles = [
-        qboui,
-        css`details { padding-left: 16px; }`
+        qboui
     ];
 
     @state() private _open = false;
-    //@state() private _x = 0;
-    //@state() private _y = 0;
 
     @property({ type: String })
     target = '';
@@ -22,12 +19,14 @@ export class ContextMenu extends LitElement {
 
     connectedCallback() {
         super.connectedCallback();
-        if (this.target) {
-            const rootNode = this.getRootNode();
+          
+        this.getContextTarget();
+        document.addEventListener('click', this._handleClickOutside.bind(this));
+
+    }
 
-            if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
-                const targetElement = rootNode.querySelector(this.target);
-            }
+    getContextTarget() {
+        if (this.target) {
             this.parent = this.closest(this.target) as HTMLElement
                 ?? (
                     (() => {
@@ -40,15 +39,14 @@ export class ContextMenu extends LitElement {
                 )
                 ?? document.querySelector(this.target)
                 ?? document;
-            this.parent.addEventListener('contextmenu', this._handleContextMenu.bind(this));
-        }
-        document.addEventListener('click', this._handleClickOutside.bind(this));
-
+        } else
+            this.parent = this.parentElement;
+        this.parent!.addEventListener('contextmenu', this.showContextMenu);
     }
 
     disconnectedCallback() {
         if (this.parent)
-            this.parent.removeEventListener('contextmenu', this._handleContextMenu as EventListener);
+            this.parent.removeEventListener('contextmenu', this.showContextMenu);
         document.removeEventListener('click', this._handleClickOutside.bind(this));
     }
 
@@ -58,10 +56,16 @@ export class ContextMenu extends LitElement {
         }
     }
 
-    private _handleContextMenu(event: MouseEvent) {
+    private showContextMenu = (event: Event) => {
         event.preventDefault();
-        //this._x = event.clientX;
-        //this._y = event.clientY;
+        this._open = true;
+        this._updateMenuPosition(event as MouseEvent); 
+    }
+
+    private async _updateMenuPosition(event: MouseEvent) {
+        event.preventDefault();
+        this._open = true;
+        await this.updateComplete;
 
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
@@ -80,11 +84,10 @@ export class ContextMenu extends LitElement {
         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';
-        this._open = true;
-        this.requestUpdate();
     }
 
     private _handleClose() {

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

@@ -1,19 +1,27 @@
 import { LitElement, TemplateResult } from "lit";
 export declare class QboIcon extends LitElement {
+    static map: Map<string, string>;
     type: string;
+    sprite: string | undefined;
+    static get spriteUrl(): string;
     icon: string | null;
-    height: number;
-    width: number;
+    height: string;
+    width: string;
     viewbox: string;
     fill: string;
     backgroundColor: string | null;
-    unknown: string;
     disabled: boolean;
     renderInHost: boolean;
+    selected: boolean;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    toggle(): void;
     createRenderRoot(): HTMLElement | DocumentFragment;
-    renderAll(component: any): TemplateResult<1>;
+    updated(changedProperties: Map<string, any>): void;
+    private allIcons;
+    loadIcons(): Promise<string[] | undefined>;
+    renderStandard(component: any): TemplateResult<1>;
+    renderAll(component: any): Promise<TemplateResult<1>>;
     renderIcon(component: QboIcon): TemplateResult<1>;
-    renderButton(component: any): TemplateResult<1>;
     render(): TemplateResult<1>;
 }