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

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

@@ -0,0 +1,22 @@
+import { QboFetch } from './qbo-fetch.js';
+export declare class QboDataList extends QboFetch {
+    listId: null;
+    min: number;
+    options: Array<{
+        [key: string]: string;
+    }> | null;
+    renderInHost: boolean;
+    text: string | null;
+    value: string | null;
+    fetchOnLoad: boolean;
+    endpoint: String | null | undefined;
+    headers: any | null | undefined;
+    payload: any | null;
+    targets: NodeListOf<Element> | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    createRenderRoot(): Element | ShadowRoot;
+    buildDataList(e: any): Promise<void>;
+    setOutputValue(e: any): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-datalist.js

@@ -0,0 +1,126 @@
+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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { getArray } from './qbo-json.js';
+import { QboFetch } from './qbo-fetch.js';
+let QboDataList = class QboDataList extends QboFetch {
+    constructor() {
+        super(...arguments);
+        this.listId = null;
+        this.min = 3;
+        this.options = [];
+        this.renderInHost = true;
+        this.text = null;
+        this.value = null;
+        this.fetchOnLoad = false;
+        this.endpoint = null;
+        this.headers = null;
+        this.payload = {};
+        this.targets = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.targets = document.querySelectorAll(`input[list=${this.listId}]`);
+        const el = this;
+        this.targets.forEach(function (target) {
+            target.addEventListener('keyup', el.buildDataList.bind(el));
+            if (target.hasAttribute('data-for'))
+                target.addEventListener('change', el.setOutputValue.bind(el));
+        });
+        this.endpoint = this.apiEndpoint.toString();
+        this.headers = this.getHeaders();
+        this.payload = this.getPayload(this.headers);
+    }
+    disconnectedCallback() {
+        const el = this;
+        this.targets?.forEach(function (target) {
+            target.removeEventListener('keyup', el.buildDataList.bind(el));
+            if (target.hasAttribute('data-for'))
+                target.removeEventListener('change', el.setOutputValue.bind(el));
+        });
+        super.disconnectedCallback();
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async buildDataList(e) {
+        const target = e.target;
+        if (target instanceof HTMLInputElement) {
+            if (target.value.length >= this.min) {
+                if (this.endpoint != null)
+                    this.apiEndpoint = new URL(this.endpoint.replace('{value}', `${target.value}`), this.baseURI);
+                await this.fetchData(this.headers, this.payload);
+            }
+        }
+    }
+    setOutputValue(e) {
+        const target = e.target;
+        let targetFor = null;
+        if (target.hasAttribute('data-for')) {
+            const attribute = target.getAttribute('data-for');
+            targetFor = document.getElementById(attribute)
+                || target.querySelector(attribute)
+                || target.parentElement?.querySelector(attribute)
+                || document.getElementsByName(attribute)[0];
+        }
+        if (target instanceof HTMLInputElement && targetFor instanceof HTMLInputElement) {
+            const text = this.text;
+            const result = this.options?.filter(function (j) { return j[text] == target.value; });
+            target.value = result?.length == 1 ? result[0][`${this.text}`] : '';
+            targetFor.value = result?.length == 1 ? result[0][`${this.value}`] : '';
+        }
+    }
+    render() {
+        this.options = getArray(this.jsonData);
+        if (!this.options || this.options.length === 0)
+            return html ``;
+        if (this.options != null) {
+            this.value ??= Object.keys(this.options[0])[0];
+            this.text ??= Object.keys(this.options[0])[1] ?? this.value;
+        }
+        return html `
+            <datalist id=${this.listId}>
+                ${this.options.map(option => html `<option value="${option[this.text]}" data-value="${option[this.value]}"/>`)}
+            </datalist>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "listId", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "min", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "text", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboDataList.prototype, "fetchOnLoad", void 0);
+QboDataList = __decorate([
+    customElement('qbo-datalist')
+], QboDataList);
+export { QboDataList };

package/src/qbo/qbo-datalist.ts

@@ -0,0 +1,104 @@
+import { html, PropertyValues } from 'lit';
+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 })
+    listId = null;
+
+    @property({ type: Number })
+    min = 3;
+
+    @property({ type: Array })
+    options: Array<{ [key: string]: string }> | null = [];
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    @property({ type: String })
+    text: string | null = null;
+
+    @property({ type: String })
+    value: string | null = null;
+
+    @property({ type: Boolean })
+    fetchOnLoad = false;
+
+    endpoint: String | null | undefined = null;
+
+    headers: any | null | undefined = null;
+
+    payload: any | null = {};
+
+    targets: NodeListOf<Element> | null = null
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.targets = document.querySelectorAll(`input[list=${this.listId}]`);
+        const el = this;
+        this.targets.forEach(function (target) {
+            target.addEventListener('keyup', el.buildDataList.bind(el));
+            if (target.hasAttribute('data-for')) target.addEventListener('change', el.setOutputValue.bind(el));
+        });
+        this.endpoint = this.apiEndpoint.toString();
+        this.headers = this.getHeaders();
+        this.payload = this.getPayload(this.headers);
+    }
+
+    disconnectedCallback() {
+        const el = this;
+        this.targets?.forEach(function (target) {
+            target.removeEventListener('keyup', el.buildDataList.bind(el));
+            if (target.hasAttribute('data-for')) target.removeEventListener('change', el.setOutputValue.bind(el));
+        });
+        super.disconnectedCallback();
+    }
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    async buildDataList(e: any) {
+        const target = e.target;
+        if (target instanceof HTMLInputElement) {
+            if (target.value.length >= this.min) {
+                if (this.endpoint != null) this.apiEndpoint = new URL(this.endpoint.replace('{value}', `${target.value}`), this.baseURI);
+                await this.fetchData(this.headers, this.payload);
+            }
+        }
+    }
+
+    setOutputValue(e: any) {
+        const target = e.target;
+        let targetFor: HTMLInputElement | null = null;
+        if (target.hasAttribute('data-for')) {
+            const attribute = target.getAttribute('data-for');
+            targetFor = document.getElementById(attribute)
+                || target.querySelector(attribute)
+                || target.parentElement?.querySelector(attribute)
+                || document.getElementsByName(attribute)![0];
+        }
+        if (target instanceof HTMLInputElement && targetFor instanceof HTMLInputElement) {
+            const text = this.text;
+            const result = this.options?.filter(function (j) { return j[text!] == target.value; });
+            target.value = result?.length == 1 ? result[0][`${this.text}`] : '';
+            targetFor.value = result?.length == 1 ? result[0][`${this.value}`] : '';
+        }
+    }
+
+    render() {
+        this.options = getArray(this.jsonData);
+        if (!this.options || this.options.length === 0) return html``;
+        if (this.options != null) {
+            this.value ??= Object.keys(this.options[0])[0];
+            this.text ??= Object.keys(this.options[0])[1] ?? this.value;
+        }
+        return html`
+            <datalist id=${this.listId}>
+                ${this.options.map(option => html`<option value="${option[this.text!]}" data-value="${option[this.value!]}"/>`)}
+            </datalist>`;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { QboFetch } from './qbo-fetch.js';
+/**
+  * Renders a <select> element with options populated from a JSON array.
+  *
+  * @remarks
+  * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
+  */
+export declare class QboDocViewer extends QboFetch {
+    open: boolean;
+    loading: boolean;
+    renderInHost: boolean;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-docviewer.js

@@ -0,0 +1,55 @@
+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, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFetch } from './qbo-fetch.js';
+/**
+  * Renders a <select> element with options populated from a JSON array.
+  *
+  * @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 {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.loading = false;
+        this.renderInHost = false;
+    }
+    // container: HTMLElement;
+    static { this.styles = [
+        css `
+            /* Add any custom styles here */
+            .foo { color: red; }
+        `
+    ]; }
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        return html `<iframe src='sample.pdf' width='100%' height='800px' frameborder='0'></iframe>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboDocViewer.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboDocViewer.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboDocViewer.prototype, "renderInHost", void 0);
+QboDocViewer = __decorate([
+    customElement('qbo-docviewer')
+], QboDocViewer);
+export { QboDocViewer };

package/src/qbo/qbo-docviewer.ts

@@ -0,0 +1,39 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFetch } from './qbo-fetch.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+/**
+  * Renders a <select> element with options populated from a JSON array.
+  *
+  * @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;
+
+    @property({ type: Boolean })
+    loading = false;
+
+    @property({ type: Boolean })
+    renderInHost = false;
+
+    // container: HTMLElement;
+
+    static styles = [
+        css`
+            /* Add any custom styles here */
+            .foo { color: red; }
+        `
+    ];
+
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+
+    render() {
+        return html`<iframe src='sample.pdf' width='100%' height='800px' frameborder='0'></iframe>`;
+    }
+}

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

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export declare class IFetch {
+    apiEndpoint: URL;
+    method: string;
+    error: boolean;
+    jsonData: any | null;
+    html: string | null;
+    protected fetchData(headers: {
+        [key: string]: string;
+    }, payload: Object | null): Promise<void>;
+    protected getPayload(headers: {
+        [key: string]: string;
+    }): any;
+    protected getHeaders(): {
+        [key: string]: string;
+    };
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const QboFetchMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<IFetch> & T;
+/**
+  * Fetches Json data from an API endpoint.
+  *
+  * @remarks
+  * @param apiEndpoint - The API endpoint to fetch data from.
+  * @param method - The HTTP method to use when fetching data.
+  * @param error - Indicates whether an error occurred while fetching data.
+  */
+export declare const QboFetch: Constructor<IFetch> & typeof LitElement;
+export {};

package/src/qbo/qbo-fetch.js

@@ -0,0 +1,134 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+export const QboFetchMixin = (superClass) => {
+    class QboFetchClass extends superClass {
+        constructor(...args) {
+            super(...args);
+            this.apiEndpoint = null;
+            this.method = 'GET';
+            this.error = false;
+            this.jsonData = {};
+            this.accept = "application/json";
+            this.headerTag = 'script[name="headers"]';
+            this.html = null;
+            this.fetchOnLoad = true;
+        }
+        async connectedCallback() {
+            super.connectedCallback();
+            if (this.fetchOnLoad) {
+                const headers = this.getHeaders();
+                const payload = this.getPayload(headers);
+                await this.fetchData(headers, payload);
+            }
+        }
+        getHeaders() {
+            const headerElement = this.querySelector(this.headerTag);
+            let headers = { "Accept": this.accept };
+            if (headerElement && headerElement.textContent !== null) {
+                try {
+                    headers = JSON.parse(headerElement.textContent);
+                }
+                catch (error) {
+                    console.error('Error parsing header JSON:', error);
+                }
+            }
+            return headers;
+        }
+        getPayload(headers) {
+            const payloadTag = this.querySelector('script[name="payload"]');
+            let payload = null;
+            if (payloadTag && payloadTag.textContent !== null) {
+                try {
+                    payload = JSON.parse(payloadTag.textContent);
+                    if (payload)
+                        headers["Content-Type"] = "application/json";
+                }
+                catch (error) {
+                    console.error('Error parsing payload JSON:', error);
+                }
+            }
+            return payload;
+        }
+        /* @description Fetch data from an api, and set @see {@link html} or @see {@link jsonData} with the result. */
+        async fetchData(headers, payload) {
+            if (this.apiEndpoint === null)
+                return;
+            if (payload !== null)
+                this.method = 'POST';
+            try {
+                const response = await fetch(this.apiEndpoint, {
+                    method: this.method,
+                    headers: headers,
+                    body: payload ? JSON.stringify(payload) : null
+                });
+                switch (this.accept) {
+                    case "application/json":
+                        this.jsonData = await response.json();
+                        this.html = null;
+                        break;
+                    default:
+                        this.html = await response.text();
+                        this.jsonData = null;
+                        break;
+                }
+                this.dispatchEvent(new CustomEvent('qbo-updated', { bubbles: true, composed: true }));
+            }
+            catch (err) {
+                this.error = true;
+                dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+            }
+        }
+    }
+    __decorate([
+        property({ type: URL }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "apiEndpoint", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "method", void 0);
+    __decorate([
+        property({ type: Boolean }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "error", void 0);
+    __decorate([
+        property({ type: Object }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "jsonData", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "accept", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "headerTag", void 0);
+    __decorate([
+        property({ type: String }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "html", void 0);
+    __decorate([
+        property({ type: Boolean }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "fetchOnLoad", void 0);
+    ;
+    return QboFetchClass;
+};
+/**
+  * Fetches Json data from an API endpoint.
+  *
+  * @remarks
+  * @param apiEndpoint - The API endpoint to fetch data from.
+  * @param method - The HTTP method to use when fetching data.
+  * @param error - Indicates whether an error occurred while fetching data.
+  */
+export const QboFetch = QboFetchMixin(LitElement);

package/src/qbo/qbo-fetch.ts

@@ -0,0 +1,127 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+// Define the interface for the mixin
+export declare class IFetch {
+    apiEndpoint: URL;
+    method: string;
+    error: boolean;
+    jsonData: any | null;
+    html: string | null;
+    protected fetchData(headers: { [key: string]: string; }, payload: Object | null): Promise<void>;
+    protected getPayload(headers: { [key: string]: string; });
+    protected getHeaders(): { [key: string]: string };
+    // protected createRenderRoot(): unknown;
+}
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T) => {
+    class QboFetchClass extends superClass {
+        @property({ type: URL })
+        apiEndpoint = null;
+
+        @property({ type: String })
+        method = 'GET';
+
+        @property({ type: Boolean })
+        error = false;
+
+        @property({ type: Object })
+        jsonData: any | null = {};
+
+        @property({ type: String })
+        accept = "application/json";
+
+        @property({ type: String })
+        headerTag = 'script[name="headers"]';
+
+        @property({ type: String })
+        html: String | null = null;
+
+        @property({ type: Boolean })
+        fetchOnLoad = true;
+
+        constructor(...args: any[]) {
+            super(...args);
+        }
+
+        async connectedCallback() {
+            super.connectedCallback();
+
+            if (this.fetchOnLoad) {
+                const headers = this.getHeaders();
+                const payload = this.getPayload(headers);
+                await this.fetchData(headers, payload);
+            }
+        }
+
+        getHeaders() {
+            const headerElement = this.querySelector(this.headerTag);
+            let headers: { [key: string]: string } = { "Accept": this.accept };
+            if (headerElement && headerElement.textContent !== null) {
+                try {
+                    headers = JSON.parse(headerElement.textContent);
+                } catch (error) {
+                    console.error('Error parsing header JSON:', error);
+                }
+            }
+            return headers;
+        }
+
+        getPayload(headers: { [key: string]: string; }) {
+            const payloadTag = this.querySelector('script[name="payload"]');
+            let payload: Object | null = null;
+            if (payloadTag && payloadTag.textContent !== null) {
+                try {
+                    payload = JSON.parse(payloadTag.textContent);
+                    if (payload)
+                        headers["Content-Type"] = "application/json";
+                } catch (error) {
+                    console.error('Error parsing payload JSON:', error);
+                }
+            }
+            return payload;
+        }
+
+        /* @description Fetch data from an api, and set @see {@link html} or @see {@link jsonData} with the result. */
+        async fetchData(headers: { [key: string]: string; }, payload: Object | null) {
+            if (this.apiEndpoint === null) return;
+            if (payload !== null)
+                this.method = 'POST';
+            try {
+                const response = await fetch(this.apiEndpoint, {
+                    method: this.method,
+                    headers: headers,
+                    body: payload ? JSON.stringify(payload) : null
+                });
+                switch (this.accept) {
+                    case "application/json":
+                        this.jsonData = await response.json();
+                        this.html = null;
+                        break;
+                    default:
+                        this.html = await response.text();
+                        this.jsonData = null;
+                        break;
+                }
+                this.dispatchEvent(new CustomEvent('qbo-updated', { bubbles: true, composed: true }));
+            } catch (err) {
+                this.error = true;
+                dispatchEvent(new CustomEvent('qbo-error', { detail: err }));
+            }
+        }
+    };
+
+    return QboFetchClass as unknown as Constructor<IFetch> & T;
+}
+
+/**
+  * Fetches Json data from an API endpoint.
+  *
+  * @remarks
+  * @param apiEndpoint - The API endpoint to fetch data from.
+  * @param method - The HTTP method to use when fetching data.
+  * @param error - Indicates whether an error occurred while fetching data.
+  */
+export const QboFetch = QboFetchMixin(LitElement);

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

@@ -0,0 +1,8 @@
+declare function getArray(json: any, arrayName?: string): Array<{
+    [key: string]: string;
+}> | null;
+declare function substitute(inputString: string, ...jsonData: any): string;
+declare function replicate(target: HTMLElement | null, template: HTMLTemplateElement | null, sourceData: Array<{
+    [key: string]: string;
+}>, emptyContent?: boolean): void;
+export { getArray, substitute, replicate };