@quandis/qbo4.ui 4.0.1-CI-20241028-221206 → 4.0.1-CI-20241029-174756

package/src/qbo/qbo-icon.js

@@ -7,72 +7,169 @@ 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, svg } from "lit";
+var QboIcon_1;
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { iconMap } from './Icons.js';
+import { until } from "lit/directives/until.js";
+const iconMap = new Map();
+// qbo modules
+iconMap.set('accounting', 'currency-dollar');
+iconMap.set('collection', 'tag');
+iconMap.set('document', 'file-earmark');
+iconMap.set('export', 'database-down');
+iconMap.set('import', 'database-up');
+iconMap.set('message', 'envelope');
+iconMap.set('process', 'building-gear');
+iconMap.set('score', 'file-spreadsheet');
+iconMap.set('task', 'list-check');
+iconMap.set('workflow', 'diagram-2');
+iconMap.set('security', 'lock');
+// generic icons
+iconMap.set('refresh', 'arrow-repeat');
+iconMap.set('cut', 'scissors');
+iconMap.set('copy', 'copy');
+iconMap.set('paste', 'clipboard');
+iconMap.set('delete', 'trash');
+iconMap.set('up', 'arrow-up-circle');
+iconMap.set('down', 'arrow-down-circle');
+iconMap.set('left', 'arrow-left-circle');
+iconMap.set('right', 'arrow-right-circle');
+iconMap.set('copy', 'trash');
+iconMap.set('maximize', 'arrow-down-circle');
+iconMap.set('minimize', 'arrow-right-circle');
+iconMap.set('normal', 'arrow-down-right-circle');
+iconMap.set('upload', 'upload');
+iconMap.set('download', 'download');
+iconMap.set('folder', 'folder2');
+iconMap.set('folder-open', 'folder2-open');
+iconMap.set('pdf', 'filetype-pdf');
+iconMap.set('audio', 'headphones');
+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 {
     constructor() {
         super(...arguments);
         this.type = 'icon';
         this.icon = null;
-        this.height = 16;
-        this.width = 16;
-        this.viewbox = '0 0 16 16';
+        this.height = '1rem';
+        this.width = '1rem';
+        this.viewbox = '0 0 1em 1em';
         this.fill = 'currentColor';
         this.backgroundColor = null;
-        this.unknown = 'warning';
         this.disabled = false;
         this.renderInHost = true;
+        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
+    static get spriteUrl() {
+        const metaTag = document.querySelector('meta[name="qbo4-basepath"]');
+        const basePath = metaTag?.getAttribute('value') || '';
+        return `${basePath}/ui/images/qbo-icons.svg`;
     }
     connectedCallback() {
         this.type ??= 'icon';
         super.connectedCallback();
+        if (this.type === 'toggle') {
+            this.addEventListener('click', this.toggle);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.toggle);
+    }
+    toggle() {
+        this.selected = !this.selected;
+        this.dispatchEvent(new CustomEvent(this.selected ? 'selected' : 'delected', { bubbles: true, composed: true }));
     }
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
     }
-    renderAll(component) {
-        return html `<div class="container">
-    <div class="row">
-        ${Array.from(iconMap.keys()).map(k => html `
-            <div class="col-md-4"> <!-- Divides into 3 columns on medium screens and larger -->
-                <li class="list-unstyled">
-                    <qbo-icon 
-                        .height=${component.height} 
-                        .width=${component.width} 
-                        .viewbox=${component.viewbox} 
-                        icon="${k}" 
-                        .fill=${component.fill} 
-                        .backgroundColor=${component.backgroundColor}>
-                    </qbo-icon>: ${k}
-                </li>
-            </div>
-        `)}
-    </div>
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('selected') && this.type === 'toggle') {
+            this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
+        }
+    }
+    async loadIcons() {
+        if (this.allIcons)
+            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 svgText = await response.text();
+            // Parse the SVG file
+            const parser = new DOMParser();
+            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+            // Find all `<symbol>` elements and extract their `id` attributes
+            const symbols = svgDoc.querySelectorAll('symbol');
+            this.allIcons = Array.from(symbols).map(symbol => symbol.id);
+        }
+        catch (error) {
+            console.error('Error loading icons:', error);
+        }
+        return this.allIcons;
+    }
+    renderStandard(component) {
+        return html `<div class="row">
+${Array.from(iconMap.keys()).map(k => html `<div class="col-3"> 
+        <li class="list-unstyled">
+            <qbo-icon 
+                .height=${component.height} 
+                .width=${component.width} 
+                .viewbox=${component.viewbox} 
+                icon="${k}" 
+                .fill=${component.fill} 
+                .backgroundColor=${component.backgroundColor}>
+            </qbo-icon> ${k}
+        </li>
+    </div>`)}`;
+    }
+    async renderAll(component) {
+        await component.loadIcons();
+        if (this.allIcons === undefined)
+            return html `No icons found`;
+        return html `
+<div class="row">
+    ${this.allIcons.map(k => html `
+        <div class="col-md-4"> 
+            <li class="list-unstyled">
+                <qbo-icon 
+                    .height=${component.height} 
+                    .width=${component.width} 
+                    .viewbox=${component.viewbox} 
+                    icon="${k}" 
+                    .fill=${component.fill} 
+                    .backgroundColor=${component.backgroundColor}>
+                </qbo-icon> ${k}
+            </li>
+        </div>
+    `)}
 </div>`;
     }
     renderIcon(component) {
-        if (component.icon == null) {
+        if (component.icon == null || component.icon === undefined) {
             console.warn('qbo-icon: icon attribute is required');
-            component.icon = component.unknown;
-        }
-        if (!iconMap.has(component.icon)) {
-            console.warn(`qbo-icon: icon attribute is not valid. Valid values are: ${Array.from(iconMap.keys()).join(' ')}`);
-            component.icon = component.unknown;
+            component.icon = 'warning';
         }
-        return html `<svg width="${component.width}" height="${component.width}" fill="${component.fill}" ?class=${component.getAttribute('class')} viewBox="${component.viewbox}">${(component.backgroundColor)
-            ? svg `<rect width="${component.width}" height="${component.height}" fill="${component.backgroundColor}" />`
-            : svg ``}${iconMap.get(component.icon)}</svg>`;
-    }
-    renderButton(component) {
-        return html `<button type="button" ?disabled=${component.disabled}>${component.renderIcon(component)}</button>`;
+        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>`;
     }
+    //renderButton(component: any) {
+    //    return html`<button type="button" ?disabled=${component.disabled}>${component.renderIcon(component)}</button>`;
+    //}
     render() {
         switch (this.type) {
             case 'icon': return this.renderIcon(this);
-            case 'button': return this.renderButton(this);
-            case 'all': return this.renderAll(this);
+            case 'button': return this.renderIcon(this);
+            case 'toggle': return this.renderIcon(this);
+            case 'standard': return this.renderStandard(this);
+            case 'all': return html `${until(this.renderAll(this), html `Loading...`)}`;
             default: return this.renderIcon(this);
         }
     }
@@ -81,17 +178,21 @@ __decorate([
     property(),
     __metadata("design:type", String)
 ], QboIcon.prototype, "type", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboIcon.prototype, "sprite", void 0);
 __decorate([
     property(),
     __metadata("design:type", Object)
 ], QboIcon.prototype, "icon", void 0);
 __decorate([
     property(),
-    __metadata("design:type", Number)
+    __metadata("design:type", String)
 ], QboIcon.prototype, "height", void 0);
 __decorate([
     property(),
-    __metadata("design:type", Number)
+    __metadata("design:type", String)
 ], QboIcon.prototype, "width", void 0);
 __decorate([
     property(),
@@ -105,10 +206,6 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], QboIcon.prototype, "backgroundColor", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], QboIcon.prototype, "unknown", void 0);
 __decorate([
     property(),
     __metadata("design:type", Boolean)
@@ -117,7 +214,11 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], QboIcon.prototype, "renderInHost", void 0);
-QboIcon = __decorate([
+__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 };

package/src/qbo/qbo-icon.ts

@@ -1,25 +1,79 @@
-import { LitElement, TemplateResult, html, svg } from "lit";
+import { LitElement, TemplateResult, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { iconMap } from './Icons.js';
+import { until } from "lit/directives/until.js";
+
+const iconMap: Map<string, string> = new Map();
+// qbo modules
+iconMap.set('accounting', 'currency-dollar');
+iconMap.set('collection', 'tag');
+iconMap.set('document', 'file-earmark');
+iconMap.set('export', 'database-down');
+iconMap.set('import', 'database-up');
+iconMap.set('message', 'envelope');
+iconMap.set('process', 'building-gear');
+iconMap.set('score', 'file-spreadsheet');
+iconMap.set('task', 'list-check');
+iconMap.set('workflow', 'diagram-2');
+iconMap.set('security', 'lock');
+
+// generic icons
+iconMap.set('refresh', 'arrow-repeat');
+iconMap.set('cut', 'scissors');
+iconMap.set('copy', 'copy');
+iconMap.set('paste', 'clipboard');
+iconMap.set('delete', 'trash');
+
+iconMap.set('up', 'arrow-up-circle');
+iconMap.set('down', 'arrow-down-circle');
+iconMap.set('left', 'arrow-left-circle');
+iconMap.set('right', 'arrow-right-circle');
+iconMap.set('copy', 'trash');
+iconMap.set('maximize', 'arrow-down-circle');
+iconMap.set('minimize', 'arrow-right-circle');
+iconMap.set('normal', 'arrow-down-right-circle');
+
+iconMap.set('upload', 'upload');
+iconMap.set('download', 'download');
+iconMap.set('folder', 'folder2');
+iconMap.set('folder-open', 'folder2-open');
+iconMap.set('pdf', 'filetype-pdf');
+iconMap.set('audio', 'headphones');
+iconMap.set('video', 'camera-video');
+iconMap.set('headset', 'headphones');
+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;
+
     @property()
     type: string = 'icon';
 
+    @property()
+    sprite: string | undefined;
+    
+    // = '/ui/images/icons.svg';
+    // Getter to retrieve the `qbo4-basepath` meta tag value
+    static get spriteUrl(): string {
+        const metaTag = document.querySelector('meta[name="qbo4-basepath"]');
+        const basePath = metaTag?.getAttribute('value') || '';
+        return `${basePath}/ui/images/qbo-icons.svg`;
+    }
+
     @property()
     icon: string | null = null;
 
     @property()
-    height: number = 16;
+    height: string = '1rem';
 
     @property()
-    width: number = 16;
+    width: string = '1rem';
 
     @property()
-    viewbox: string = '0 0 16 16';
+    viewbox: string = '0 0 1em 1em';
 
     @property()
     fill: string = 'currentColor';
@@ -27,69 +81,128 @@ export class QboIcon extends LitElement {
     @property()
     backgroundColor: string | null = null;
 
-    @property()
-    unknown: string = 'warning';
-
     @property()
     disabled: boolean = false;
 
     @property({ type: Boolean, reflect: true })
     renderInHost = true;
 
+    @property({ type: Boolean, reflect: true })
+    selected: boolean = false;
 
     connectedCallback() {
         this.type ??= 'icon';
         super.connectedCallback();
+        if (this.type === 'toggle') {
+            this.addEventListener('click', this.toggle);
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.toggle);
+    }
+
+
+    toggle() {
+        this.selected = !this.selected;
+        this.dispatchEvent(new CustomEvent(this.selected ? 'selected' : 'delected', { bubbles: true, composed: true }))
     }
 
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
     }
 
-    renderAll(component: any) {
-        return html`<div class="container">
-    <div class="row">
-        ${Array.from(iconMap.keys()).map(k => html`
-            <div class="col-md-4"> <!-- Divides into 3 columns on medium screens and larger -->
-                <li class="list-unstyled">
-                    <qbo-icon 
-                        .height=${component.height} 
-                        .width=${component.width} 
-                        .viewbox=${component.viewbox} 
-                        icon="${k}" 
-                        .fill=${component.fill} 
-                        .backgroundColor=${component.backgroundColor}>
-                    </qbo-icon>: ${k}
-                </li>
-            </div>
-        `)}
-    </div>
+    updated(changedProperties: Map<string, any>) {
+        super.updated(changedProperties);
+
+        if (changedProperties.has('selected') && this.type === 'toggle') {
+            this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
+        }
+    }
+
+    private allIcons: string[] | undefined = undefined;
+
+    async loadIcons() {
+        if (this.allIcons) return this.allIcons;
+        try {
+            // Adjust this path to point to the correct location of bootstrap-icons.svg
+            const response = await fetch(this.sprite ?? QboIcon.spriteUrl);
+            const svgText = await response.text();
+
+            // Parse the SVG file
+            const parser = new DOMParser();
+            const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+
+            // Find all `<symbol>` elements and extract their `id` attributes
+            const symbols = svgDoc.querySelectorAll('symbol');
+            this.allIcons = Array.from(symbols).map(symbol => symbol.id);
+        } catch (error) {
+            console.error('Error loading icons:', error);
+        }
+        return this.allIcons;
+    }
+
+    renderStandard(component: any) {
+        return html`<div class="row">
+${Array.from(iconMap.keys()).map(k => html`<div class="col-3"> 
+        <li class="list-unstyled">
+            <qbo-icon 
+                .height=${component.height} 
+                .width=${component.width} 
+                .viewbox=${component.viewbox} 
+                icon="${k}" 
+                .fill=${component.fill} 
+                .backgroundColor=${component.backgroundColor}>
+            </qbo-icon> ${k}
+        </li>
+    </div>`)}`;
+    }
+
+    async renderAll(component: any) {
+        await component.loadIcons();
+        if (this.allIcons === undefined)
+            return html`No icons found`;
+
+        return html`
+<div class="row">
+    ${this.allIcons.map(k => html`
+        <div class="col-md-4"> 
+            <li class="list-unstyled">
+                <qbo-icon 
+                    .height=${component.height} 
+                    .width=${component.width} 
+                    .viewbox=${component.viewbox} 
+                    icon="${k}" 
+                    .fill=${component.fill} 
+                    .backgroundColor=${component.backgroundColor}>
+                </qbo-icon> ${k}
+            </li>
+        </div>
+    `)}
 </div>`;
     }
 
     renderIcon(component: QboIcon) {
-        if (component.icon == null) {
+        if (component.icon == null || component.icon === undefined) {
             console.warn('qbo-icon: icon attribute is required');
-            component.icon = component.unknown;
-        }
-        if (!iconMap.has(component.icon!)) {
-            console.warn(`qbo-icon: icon attribute is not valid. Valid values are: ${Array.from(iconMap.keys()).join(' ')}`);
-            component.icon = component.unknown;
+            component.icon = 'warning';
         }
-        return html`<svg width="${component.width}" height="${component.width}" fill="${component.fill}" ?class=${component.getAttribute('class')} viewBox="${component.viewbox}">${(component.backgroundColor)
-            ? svg`<rect width="${component.width}" height="${component.height}" fill="${component.backgroundColor}" />`
-            : svg``}${iconMap.get(component.icon!)}</svg>`;
+        const id: string | undefined = 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.spriteUrl}#${id}"></use></svg>`
     }
 
-    renderButton(component: any) {
-        return html`<button type="button" ?disabled=${component.disabled}>${component.renderIcon(component)}</button>`;
-    }
+    //renderButton(component: any) {
+    //    return html`<button type="button" ?disabled=${component.disabled}>${component.renderIcon(component)}</button>`;
+    //}
 
     render() {
         switch (this.type) {
             case 'icon': return this.renderIcon(this);
-            case 'button': return this.renderButton(this);
-            case 'all': return this.renderAll(this);
+            case 'button': return this.renderIcon(this);
+            case 'toggle': return this.renderIcon(this);
+            case 'standard': return this.renderStandard(this);
+            case 'all': return html`${until(this.renderAll(this), html`Loading...`)}`;
             default:  return this.renderIcon(this);
         }
     }

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class QboMenu extends LitElement {
+    type: string;
+    expanded: boolean;
+    static styles: import("lit").CSSResult[];
+    private toggleSidebar;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    target: string;
+    private showContextMenu;
+    private hideContextMenu;
+    private positionContextMenu;
+    get contextParent(): HTMLElement | Document | null;
+    context(): import("lit-html").TemplateResult<1>;
+    side(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
+    xrender(): import("lit-html").TemplateResult<1>;
+}