@quandis/qbo4.ui 4.0.1-CI-20240403-131518

package/src/qbo/qbo-json.js

@@ -0,0 +1,85 @@
+/* @description Find an array in a JSON object
+ * @param json {object} A Json object or array.
+ * @param arrayName {array} The name of a key that represents an array to use. If not specified, the first array found will be returned.
+ * @returns {Array} An array if found, otherwise null.
+*/
+function getArray(json, arrayName) {
+    if (typeof json === 'string') {
+        try {
+            json = JSON.parse(json);
+        }
+        catch (error) {
+            console.error('Error parsing JSON string:', error);
+            return null;
+        }
+    }
+    if (Array.isArray(json)) {
+        return json;
+    }
+    if (typeof json === 'object' && json !== null) {
+        for (const key in json) {
+            const value = json[key];
+            if (Array.isArray(value)) {
+                return value;
+            }
+            else if (typeof value === 'object') {
+                const nestedResult = getArray(value, arrayName);
+                if (nestedResult) {
+                    return nestedResult;
+                }
+            }
+        }
+    }
+    return null; // No array found
+}
+/* @description Perform string substitution on a template using a JSON object
+*/
+function interpolate(template, data) {
+    try {
+        return new Function("return `" + template + "`;").call(data);
+    }
+    catch (err) {
+        document.dispatchEvent(new CustomEvent('qbo-warning', { detail: { 'error': err, 'message': 'Unable to substitute template.', 'template': template, 'data': data } }));
+        return template;
+    }
+}
+/* @description Perform string substitution of ${expression} using one or more JSON objects.
+ * @example substitute('Hello ${name}!', { name: 'World' }) => 'Hello World!'
+*/
+function substitute(inputString, ...jsonData) {
+    // Use a regular expression to match ${key} expressions
+    const regex = /\${(.*?)}/g;
+    let resultString = inputString;
+    for (let i = 0; i < jsonData.length; i++) {
+        const data = jsonData[i];
+        resultString = resultString.replace(regex, (match, expression) => {
+            const parts = expression.split('|');
+            const key = parts[0].trim();
+            const format = (parts.lenth > 1) ? parts[1].trim() : null;
+            // todo: handle formatting (dates, currency, etc.)
+            const replacement = data[key];
+            // If the key exists in the JSON data, replace it; otherwise, keep the original string
+            return replacement !== undefined ? replacement : match;
+        });
+    }
+    resultString = resultString.replace(regex, () => '');
+    return resultString;
+}
+/* @description Replicates content in a target element for each item in a JSON array.
+*/
+function replicate(target, template, sourceData, emptyContent = true) {
+    if (target != null && template != null) {
+        while (emptyContent && target.firstChild) {
+            target.removeChild(target.firstChild);
+        }
+        sourceData.map((data, index) => {
+            const row = template.content.cloneNode(true);
+            if (row.firstElementChild != null) {
+                row.firstElementChild.setAttribute("data-index", `${index}`);
+                row.firstElementChild.innerHTML = substitute(row.firstElementChild?.innerHTML ?? '', data);
+            }
+            target.appendChild(row);
+        });
+    }
+}
+export { getArray, substitute, replicate };

package/src/qbo/qbo-json.ts

@@ -0,0 +1,92 @@
+
+/* @description Find an array in a JSON object
+ * @param json {object} A Json object or array.
+ * @param arrayName {array} The name of a key that represents an array to use. If not specified, the first array found will be returned.
+ * @returns {Array} An array if found, otherwise null.
+*/
+function getArray(json: any, arrayName?: string): Array<{ [key: string]: string }> | null {
+    if (typeof json === 'string') {
+        try {
+            json = JSON.parse(json);
+        } catch (error) {
+            console.error('Error parsing JSON string:', error);
+            return null;
+        }
+    }
+
+    if (Array.isArray(json)) {
+        return json;
+    }
+
+    if (typeof json === 'object' && json !== null) {
+        for (const key in json ) {
+            const value = json [key];
+            if (Array.isArray(value)) {
+                return value;
+            } else if (typeof value === 'object') {
+                const nestedResult = getArray(value, arrayName);
+                if (nestedResult) {
+                    return nestedResult;
+                }
+            }
+        }
+    }
+
+    return null; // No array found
+}
+
+/* @description Perform string substitution on a template using a JSON object
+*/
+function interpolate(template: string, data: { [key: string]: string }) {
+    try {
+        return new Function("return `" + template + "`;").call(data);
+    } catch (err) {
+        document.dispatchEvent(new CustomEvent('qbo-warning', { detail: { 'error': err, 'message': 'Unable to substitute template.', 'template': template, 'data': data } }));
+        return template;
+    }
+}
+
+/* @description Perform string substitution of ${expression} using one or more JSON objects.
+ * @example substitute('Hello ${name}!', { name: 'World' }) => 'Hello World!'
+*/
+function substitute(inputString: string, ...jsonData: any): string {
+    // Use a regular expression to match ${key} expressions
+    const regex = /\${(.*?)}/g;
+    let resultString = inputString;
+    for (let i = 0; i < jsonData.length; i++) {
+        const data = jsonData[i] as Record<string, any>;
+        resultString = resultString.replace(regex, (match, expression) => {
+            const parts = expression.split('|');
+            const key = parts[0].trim();
+            const format = (parts.lenth>1) ? parts[1].trim() : null;
+            // todo: handle formatting (dates, currency, etc.)
+            const replacement = data[key];
+            // If the key exists in the JSON data, replace it; otherwise, keep the original string
+            return replacement !== undefined ? replacement : match;
+        });
+    }
+    resultString = resultString.replace(regex, () => '');
+
+    return resultString;
+}
+
+
+/* @description Replicates content in a target element for each item in a JSON array.
+*/
+function replicate(target: HTMLElement | null, template: HTMLTemplateElement | null, sourceData: Array<{ [key: string]: string }>, emptyContent: boolean = true) {
+    if (target != null && template != null) {
+        while (emptyContent && target.firstChild) {
+            target.removeChild(target.firstChild);
+        }
+        sourceData.map((data, index) => {
+            const row = template.content.cloneNode(true) as DocumentFragment;
+            if (row.firstElementChild != null) {
+                row.firstElementChild.setAttribute("data-index", `${index}`);
+                row.firstElementChild.innerHTML = substitute(row.firstElementChild?.innerHTML ?? '', data)
+            }
+            target.appendChild(row);
+        });
+    }
+}
+
+export { getArray, substitute, replicate };

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+export declare class QboLink extends LitElement {
+    id: any;
+    name: any;
+    link: any;
+    href: any;
+    data: {
+        [key: string]: any;
+    } | null;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1> | undefined;
+}

package/src/qbo/qbo-link.js

@@ -0,0 +1,48 @@
+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 { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+let QboLink = class QboLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = null;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.data = { "ID": 1, "Name": "John Doe" };
+    }
+    render() {
+        if (this.data != null)
+            return html `<a href="${this.href}">${this.data[this.name]}</a>`;
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLink.prototype, "id", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLink.prototype, "name", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLink.prototype, "link", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLink.prototype, "href", void 0);
+QboLink = __decorate([
+    customElement('qbo-linkn')
+], QboLink);
+export { QboLink };

package/src/qbo/qbo-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qbo-select.js","sourceRoot":"","sources":["qbo-select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C;;;;;IAKI;AAEG,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,QAAQ;IAAhC;;QAGH,YAAO,GAAG,KAAK,CAAC;QAGhB,eAAU,GAAkB,IAAI,CAAC;QAGjC,gBAAW,GAAkB,IAAI,CAAC;QAGlC,iBAAY,GAAG,IAAI,CAAC;QAGpB,aAAQ,GAAG,IAAI,CAAC;QAGhB,YAAO,GAA4C,EAAE,CAAC;QAGtD,iBAAY,GAAG,IAAI,CAAC;IA+BxB,CAAC;aA7BU,WAAM,GAAG;QACZ,GAAG,CAAA;;;SAGF;KACJ,AALY,CAKX;IAEF,KAAK,CAAC,iBAAiB;QACnB,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,CAAC;QACrC,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,gBAAgB;QACZ,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;IAC/D,CAAC;IAED,MAAM;QACF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;YAC1C,OAAO,IAAI,CAAA,mBAAmB,CAAC;QAEnC,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;QAExE,OAAO,IAAI,CAAA;gCACa,IAAI,CAAC,QAAQ;sBACvB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,MAAM,CAAC,IAAI,CAAC,WAAY,CAAC,gBAAgB,MAAM,CAAC,IAAI,CAAC,WAAY,CAAC,KAAK,IAAI,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI,CAAC,UAAW,CAAC,WAAW,CAAC;0BAC9K,CAAC;IACvB,CAAC;;AAhDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACM;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACO;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACrB;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0CAC4B;AAGtD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACR;AArBX,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoDrB"}

package/src/qbo/qbo-link.ts

@@ -0,0 +1,34 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+@customElement('qbo-linkn')
+export class QboLink extends LitElement {
+
+    @property()
+    id;
+
+    @property()
+    name;
+
+    @property()
+    link;
+
+    @property()
+    href;
+
+    data: { [key: string]: any } | null = null;
+
+    async connectedCallback() {
+        super.connectedCallback();
+        this.data = { "ID": 1, "Name": "John Doe" };
+    }
+
+    render() {
+        if (this.data != null)
+            return html`<a href="${this.href}">${this.data[this.name]}</a>`;
+    }
+}
+

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

@@ -0,0 +1,13 @@
+import { LitElement, PropertyValues, CSSResult } from 'lit';
+export declare class QboLogging extends LitElement {
+    static styles: CSSResult[];
+    errorCount: number;
+    warningCount: number;
+    infoCount: number;
+    errorClass: string;
+    warningClass: string;
+    infoClass: string;
+    firstUpdated(changedProperties: PropertyValues): void;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-logging.js

@@ -0,0 +1,92 @@
+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, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { bootstrap } from './styles.js';
+let QboLogging = class QboLogging extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.errorCount = 0;
+        this.warningCount = 0;
+        this.infoCount = 0;
+        this.errorClass = 'badge text-bg-danger';
+        this.warningClass = 'badge text-bg-warning';
+        this.infoClass = 'badge text-bg-info';
+    }
+    static { this.styles = [
+        bootstrap,
+        css `/* Add any custom styles here */`
+    ]; }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const root = this.renderRoot;
+        this.renderRoot.querySelectorAll('span').forEach(tag => {
+            tag.addEventListener('click', (e) => {
+                if (e.currentTarget != null && e.currentTarget instanceof HTMLElement) {
+                    // console.log(e.currentTarget.style.display);
+                    e.currentTarget.style.display = 'none';
+                    root.querySelectorAll('span').forEach(child => {
+                        child.style.fontSize = "2em";
+                    });
+                }
+                console.log('tag is', tag);
+                console.log('e is', e);
+            });
+        });
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('qbo-error', (e) => {
+            this.errorCount++;
+            console.log(e);
+        });
+        document.addEventListener('qbo-warning', (e) => {
+            this.warningCount++;
+            console.log(e);
+        });
+        document.addEventListener('qbo-info', (e) => {
+            this.infoCount++;
+            console.log(e);
+        });
+    }
+    render() {
+        return html `<span class="${this.errorClass}">${this.errorCount}</span>
+<span class="${this.warningClass}">${this.warningCount}</span>
+<span class="boo ${this.infoClass}">${this.infoCount}</span>`;
+    }
+};
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboLogging.prototype, "errorCount", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboLogging.prototype, "warningCount", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboLogging.prototype, "infoCount", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLogging.prototype, "errorClass", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLogging.prototype, "warningClass", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboLogging.prototype, "infoClass", void 0);
+QboLogging = __decorate([
+    customElement('qbo-logging')
+], QboLogging);
+export { QboLogging };

package/src/qbo/qbo-logging.ts

@@ -0,0 +1,72 @@
+import { LitElement, html, css, PropertyValues, CSSResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { bootstrap } from './styles.js';
+
+@customElement('qbo-logging')
+export class QboLogging extends LitElement
+{
+    static styles = [
+        bootstrap,
+        css`/* Add any custom styles here */`
+    ];
+
+    @property({ type: Number })
+    errorCount = 0;
+
+    @property({ type: Number })
+    warningCount = 0;
+
+    @property({ type: Number })
+    infoCount = 0;
+
+    @property()
+    errorClass = 'badge text-bg-danger';
+
+    @property()
+    warningClass = 'badge text-bg-warning';
+
+    @property()
+    infoClass = 'badge text-bg-info';
+
+    firstUpdated(changedProperties: PropertyValues) {
+        super.firstUpdated(changedProperties);
+        const root = this.renderRoot;
+        this.renderRoot.querySelectorAll('span').forEach(tag => {
+            tag.addEventListener('click', (e) => {
+                if (e.currentTarget != null && e.currentTarget instanceof HTMLElement) {
+                    // console.log(e.currentTarget.style.display);
+                    e.currentTarget.style.display = 'none';
+                    root.querySelectorAll('span').forEach(child => {
+                        child.style.fontSize = "2em";
+                    });
+                }
+                console.log('tag is', tag);
+                console.log('e is', e);
+            })
+        });
+    }
+
+    async connectedCallback()
+    {
+        super.connectedCallback();
+        document.addEventListener('qbo-error', (e) => {
+            this.errorCount++;
+            console.log(e);
+        });
+        document.addEventListener('qbo-warning', (e) => {
+            this.warningCount++;
+            console.log(e);
+        });
+        document.addEventListener('qbo-info', (e) => {
+            this.infoCount++;
+            console.log(e);
+        });
+    }
+
+    render() {
+        return html`<span class="${this.errorClass}">${this.errorCount}</span>
+<span class="${this.warningClass}">${this.warningCount}</span>
+<span class="boo ${this.infoClass}">${this.infoCount}</span>`;
+    }
+}
+

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

@@ -0,0 +1,41 @@
+import { PropertyValues } from 'lit';
+import { QboFetch } from './qbo-fetch.js';
+export declare class QboMainMenu extends QboFetch {
+    ariaExpanded: string;
+    ariaLabel: string;
+    buttonType: string;
+    collapseToggle: string;
+    dblClickClass: string;
+    dropdownId: string;
+    dropdownToggle: string;
+    iconClass: string;
+    liLinkToggleClass: string;
+    liLinkClass: string;
+    liAMenuClass: string;
+    navClass: string;
+    popoverContainer: string;
+    popoverHtml: string;
+    popoverPlacement: string;
+    popoverToggle: string;
+    popoverTrigger: string;
+    spanMenuClass: string;
+    spanMenuValue: string;
+    ulMainMenuToggleClass: string;
+    ulSubMenuClass: string;
+    ulSubMenuToggleClass: string;
+    apiEndpoint: URL;
+    renderInHost: boolean;
+    targetElement: Element | null;
+    createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleResize: () => void;
+    updated(changedProperties: PropertyValues): void;
+    renderImage(image: any): import("lit").TemplateResult<1>;
+    renderMenu(json: any, isDropdown: any, isSubmenu: any): import("lit").TemplateResult<1>;
+    renderMenuDivider(): import("lit").TemplateResult<1>;
+    renderMenuDropdown(json: any, isSubmenu: any): import("lit").TemplateResult<1>;
+    renderMenuDropdownLink(url: any, text: any, icon: any): import("lit").TemplateResult<1>;
+    renderMenuLink(menu: any): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}