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

package/src/qbo/qbo-api.js

@@ -0,0 +1,96 @@
+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';
+import { container } from 'tsyringe';
+import { substitute } from './qbo-json.js';
+export class RestApiService {
+    constructor(apiEndpoint, headers = { 'Content-Type': 'application/json' }, method = null) {
+        this.apiEndpoint = apiEndpoint;
+        this.headers = headers;
+        this.method = method;
+    }
+    async fetch(relativePath, payload = null) {
+        const endpoint = substitute(new URL(relativePath ?? '', this.apiEndpoint).href, payload);
+        const method = this.method ?? (payload !== null ? 'POST' : 'GET');
+        const headers = new Headers(this.headers || {});
+        if (payload !== null && !headers.has('Content-Type')) {
+            headers.append('Content-Type', 'application/json');
+        }
+        const response = await fetch(endpoint, {
+            method: method,
+            headers: headers,
+            body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
+        });
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+        return response.json();
+    }
+}
+let ApiServiceComponent = class ApiServiceComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = null;
+        this.apiEndpoint = null;
+        this.method = 'POST';
+    }
+    firstUpdated() {
+        const headers = {};
+        if (this.name == null)
+            console.error('qbo-api name is required.');
+        if (this.apiEndpoint == null)
+            console.error('qbo-api apiEndpoint is required.');
+        const headerElements = this.querySelectorAll('header');
+        headerElements.forEach(header => {
+            const name = header.getAttribute('name');
+            const value = header.textContent;
+            if (name && value) {
+                headers[name] = value;
+            }
+        });
+        // Adjust for correct header naming convention, if necessary
+        if (headers['ContentType']) {
+            headers['Content-Type'] = headers['ContentType'];
+            delete headers['ContentType'];
+        }
+        container.registerInstance(this.name, new RestApiService(this.apiEndpoint, headers, this.method));
+        // Call the registerRestApi function with the extracted configuration
+        registerRestApi(this.name, this.apiEndpoint, headers, this.method);
+    }
+    render() {
+        // Render nothing, as this component is for configuration purposes only
+        return html ``;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ApiServiceComponent.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ApiServiceComponent.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ApiServiceComponent.prototype, "method", void 0);
+ApiServiceComponent = __decorate([
+    customElement('qbo-api')
+], ApiServiceComponent);
+export { ApiServiceComponent };
+container.registerInstance('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));
+function registerRestApi(name, apiEndpoint, headers = { 'Content-Type': 'application/json' }, method) {
+    container.registerInstance(name, new RestApiService(apiEndpoint, headers, method));
+}
+function getApiService(name) {
+    return container.resolve(name);
+}
+export { registerRestApi, getApiService };

package/src/qbo/qbo-api.ts

@@ -0,0 +1,106 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { container, injectable, InjectionToken } from 'tsyringe';
+import {substitute} from './qbo-json.js';
+/**
+  * Defines a contract for form field validation.
+  * @remarks
+  * External classes may define custom validators by implementing this interface.
+  * Register the custom validator with the tsyringe DI container using {@link ValidateToken}.
+  */
+export interface IApiService {
+    fetch(relativePath: string | null, payload: Record<string, string> | null): Promise<any>;
+}
+
+export class RestApiService implements IApiService {
+
+    private headers: HeadersInit;
+    private apiEndpoint: string;
+    private method: string | null;
+
+    constructor(apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method: string | null = null) {
+        this.apiEndpoint = apiEndpoint;
+        this.headers = headers;
+        this.method = method;
+    }
+
+    async fetch(relativePath: string | null, payload: Record<string, string> | null = null): Promise<any> {
+        const endpoint = substitute(new URL(relativePath ?? '', this.apiEndpoint).href, payload);
+        const method = this.method ?? (payload !== null ? 'POST' : 'GET');
+        const headers = new Headers(this.headers || {});
+        if (payload !== null && !headers.has('Content-Type')) {
+            headers.append('Content-Type', 'application/json'); 
+        }
+
+        const response = await fetch(endpoint, {
+            method: method,
+            headers: headers,
+            body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
+        });
+
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+
+        return response.json();
+    }
+}
+
+
+@customElement('qbo-api')
+export class ApiServiceComponent extends LitElement {
+    @property({ type: String })
+    name: string | null = null;
+
+    @property({ type: String })
+    apiEndpoint: string | null = null;
+
+    @property({ type: String })
+    method: string = 'POST';
+
+    firstUpdated() {
+        const headers: HeadersInit = {};
+
+        if (this.name == null)
+            console.error('qbo-api name is required.');
+        if (this.apiEndpoint == null)
+            console.error('qbo-api apiEndpoint is required.');
+
+        const headerElements = this.querySelectorAll('header');
+        headerElements.forEach(header => {
+            const name = header.getAttribute('name');
+            const value = header.textContent;
+            if (name && value) {
+                headers[name] = value;
+            }
+        });
+
+        // Adjust for correct header naming convention, if necessary
+        if (headers['ContentType']) {
+            headers['Content-Type'] = headers['ContentType'];
+            delete headers['ContentType'];
+        }
+
+        container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
+
+        // Call the registerRestApi function with the extracted configuration
+        registerRestApi(this.name!, this.apiEndpoint!, headers, this.method);
+    }
+
+    render() {
+        // Render nothing, as this component is for configuration purposes only
+        return html``;
+    }
+}
+
+container.registerInstance<IApiService>('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));
+
+function registerRestApi(name: string, apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method?: string | null) {
+    container.registerInstance<IApiService>(name, new RestApiService(apiEndpoint, headers, method));
+}
+
+function getApiService(name: string) {
+    return container.resolve<IApiService>(name);
+}
+
+export { registerRestApi, getApiService }

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

@@ -0,0 +1,32 @@
+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 QboBadge extends QboFetch {
+    loading: boolean;
+    /**
+     * @description A CSS selector that identifies the parent element containing the badges.
+     */
+    target: null;
+    values: string[];
+    targetElement: Element | null;
+    /**
+     * @description A CSS selector that identifies where to render the badge elements.
+     * These elements should have a data-badge attribute that contributes to the API call.
+     * @example <div data-badge="123"/>
+     */
+    selector: string;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    getPayload(headers: {
+        [key: string]: string;
+    }): void;
+    getIds(): void;
+    fetchData(headers: {
+        [key: string]: string;
+    }, payload: Object | null): Promise<void>;
+    render(): void;
+}

package/src/qbo/qbo-badge.js

@@ -0,0 +1,93 @@
+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 { 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 QboBadge = class QboBadge extends QboFetch {
+    constructor() {
+        super(...arguments);
+        this.loading = false;
+        /**
+         * @description A CSS selector that identifies the parent element containing the badges.
+         */
+        this.target = null;
+        this.values = [];
+        this.targetElement = null;
+        /**
+         * @description A CSS selector that identifies where to render the badge elements.
+         * These elements should have a data-badge attribute that contributes to the API call.
+         * @example <div data-badge="123"/>
+         */
+        this.selector = '*[data-badge]';
+    }
+    async connectedCallback() {
+        this.targetElement = (this.target != null) ? this.closest(this.target) : this;
+        if (this.targetElement == null)
+            throw new Error(`Could not find target element ${this.target}`);
+        this.targetElement.addEventListener('qbo-updated', this.getIds.bind(this));
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.targetElement?.removeEventListener('qbo-updated', this.getIds);
+    }
+    getPayload(headers) {
+        const payload = super.getPayload(headers) ?? {};
+        payload["idList"] = this.values.join(",");
+    }
+    ;
+    getIds() {
+        console.log('reacting to target qbo-updated');
+        if (this.targetElement == null)
+            return;
+        const values = [];
+        const elements = this.targetElement.querySelectorAll(this.selector);
+        elements.forEach((element) => {
+            const dataBadgeValue = element.getAttribute('data-badge');
+            if (dataBadgeValue !== null) {
+                values.push(dataBadgeValue);
+            }
+        });
+        this.values = values;
+    }
+    async fetchData(headers, payload) {
+        super.fetchData(headers, payload);
+    }
+    render() {
+        const elements = this.targetElement.querySelectorAll(this.selector);
+        elements.forEach((element) => {
+            element.innerHTML = element.getAttribute('data-badge') ?? '';
+        });
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboBadge.prototype, "loading", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboBadge.prototype, "target", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Array)
+], QboBadge.prototype, "values", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboBadge.prototype, "selector", void 0);
+QboBadge = __decorate([
+    customElement('qbo-badge')
+], QboBadge);
+export { QboBadge };

package/src/qbo/qbo-badge.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-badge.ts

@@ -0,0 +1,80 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { getArray } from './qbo-json.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.
+  */
+@customElement('qbo-badge')
+export class QboBadge extends QboFetch
+{
+    @property({ type: Boolean })
+    loading = false;
+
+    /**
+     * @description A CSS selector that identifies the parent element containing the badges.
+     */
+    @property()
+    target = null;
+
+    @property()
+    values: string[] = [];
+
+    targetElement: Element | null = null;
+
+    /**
+     * @description A CSS selector that identifies where to render the badge elements.
+     * These elements should have a data-badge attribute that contributes to the API call.
+     * @example <div data-badge="123"/>
+     */
+    @property()
+    selector = '*[data-badge]';
+
+    async connectedCallback() {
+        this.targetElement = (this.target != null) ? this.closest(this.target) : this;
+        if (this.targetElement == null)
+            throw new Error(`Could not find target element ${this.target}`);
+        this.targetElement.addEventListener('qbo-updated', this.getIds.bind(this));
+        super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+        this.targetElement?.removeEventListener('qbo-updated', this.getIds);
+    }
+
+    getPayload(headers: { [key: string]: string; }) {
+        const payload = super.getPayload(headers) ?? {};
+        payload["idList"] = this.values.join(",");
+    };
+
+    getIds() {
+        console.log('reacting to target qbo-updated');
+        if (this.targetElement == null)
+            return;
+        const values: string[] = [];
+        const elements = this.targetElement!.querySelectorAll(this.selector);
+        elements.forEach((element) => {
+            const dataBadgeValue = element.getAttribute('data-badge');
+            if (dataBadgeValue !== null) {
+                values.push(dataBadgeValue);
+            }
+        });
+        this.values = values;
+    }
+
+    async fetchData(headers: { [key: string]: string; }, payload: Object | null) {
+
+        super.fetchData(headers, payload)
+    }
+
+    render() {
+        const elements = this.targetElement!.querySelectorAll(this.selector);
+        elements.forEach((element) => {
+            element.innerHTML = element.getAttribute('data-badge') ?? '';
+        });
+    }
+}

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

@@ -0,0 +1,23 @@
+import { QboFetch } from './qbo-fetch.js';
+export declare class QboBreadcrumb extends QboFetch {
+    ariaCurrent: string;
+    ariaLabel: string;
+    containerClass: string;
+    liClass: string;
+    liActiveClass: string;
+    navClass: string;
+    ulClass: string;
+    apiEndpoint: URL;
+    display: null;
+    object: null;
+    objectId: null;
+    operation: null;
+    options: Array<{
+        [key: string]: string;
+    }> | null;
+    renderInHost: boolean;
+    createRenderRoot(): Element | ShadowRoot;
+    connectedCallback(): void;
+    renderItem(option: any): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-breadcrumb.js

@@ -0,0 +1,132 @@
+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 QboBreadcrumb = class QboBreadcrumb extends QboFetch {
+    constructor() {
+        super(...arguments);
+        this.ariaCurrent = 'page';
+        this.ariaLabel = 'breadcrumb';
+        this.containerClass = 'container-fluid';
+        this.liClass = 'breadcrumb-item';
+        this.liActiveClass = 'active';
+        this.navClass = 'breadcrumb bd-subnavbar py-2';
+        this.ulClass = 'breadcrumb';
+        this.apiEndpoint = new URL('config/breadcrumb', this.baseURI);
+        this.display = null;
+        this.object = null;
+        this.objectId = null;
+        this.operation = null;
+        this.options = [];
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    connectedCallback() {
+        let url = this.apiEndpoint.toString();
+        url = `${url}?Object=${this.object != null ? this.object : ''}`;
+        url = `${url}&ObjectID=${this.objectId != null ? this.objectId : ''}`;
+        url = `${url}&Operation=${this.operation != null ? this.operation : ''}`;
+        url = `${url}&Display=${this.display != null ? this.display : ''}`;
+        this.apiEndpoint = new URL(url, this.baseURI);
+        super.connectedCallback();
+    }
+    renderItem(option) {
+        const sequence = option["Sequence"];
+        const text = option["Text"];
+        const url = option["URL"];
+        if ((sequence == null || sequence == "" || sequence == "0") && url != null && url != "")
+            return html `<li class="${this.liClass} ${this.liActiveClass}" aria-current="${this.ariaCurrent}"><a href="${url}">${text}</a></li>`;
+        else if (sequence == null || sequence == "" || sequence == "0")
+            return html `<li class="${this.liClass} ${this.liActiveClass}" aria-current="${this.ariaCurrent}">${text}</li>`;
+        else if (url != null && url != "")
+            return html `<li class="${this.liClass}"><a href="${url}">${text}</a></li>`;
+        else
+            return html `<li class="${this.liClass}">${text}</li>`;
+    }
+    render() {
+        this.options = getArray(this.jsonData);
+        if (!this.options || this.options.length === 0)
+            return html ``;
+        return html `
+            <nav class="${this.navClass}">
+                <div class="${this.containerClass}">
+                    <nav aria-label="${this.ariaLabel}">
+                        <ul class="${this.ulClass}">
+                            ${this.options.sort((a, b) => (a.Sequence > b.Sequence ? -1 : 1)).map(option => this.renderItem(option))}
+                        </ul>
+                    </nav>
+                </div>
+            </nav>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "ariaCurrent", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "containerClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "liClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "liActiveClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "navClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "ulClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "display", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "object", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "objectId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "operation", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboBreadcrumb.prototype, "renderInHost", void 0);
+QboBreadcrumb = __decorate([
+    customElement('qbo-breadcrumb')
+], QboBreadcrumb);
+export { QboBreadcrumb };

package/src/qbo/qbo-breadcrumb.ts

@@ -0,0 +1,96 @@
+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-breadcrumb')
+export class QboBreadcrumb extends QboFetch {
+
+    @property({ type: String })
+    ariaCurrent = 'page';
+
+    @property({ type: String })
+    ariaLabel = 'breadcrumb';
+
+    @property({ type: String })
+    containerClass = 'container-fluid';
+
+    @property({ type: String })
+    liClass = 'breadcrumb-item';
+
+    @property({ type: String })
+    liActiveClass = 'active';
+
+    @property({ type: String })
+    navClass = 'breadcrumb bd-subnavbar py-2';
+
+    @property({ type: String })
+    ulClass = 'breadcrumb';
+
+    @property({ type: String })
+    apiEndpoint = new URL('config/breadcrumb', this.baseURI);
+
+    @property({ type: String })
+    display = null;
+
+    @property({ type: String })
+    object = null;
+
+    @property({ type: String })
+    objectId = null;
+
+    @property({ type: String })
+    operation = null;
+
+    @property({ type: Array })
+    options: Array<{ [key: string]: string }> | null = [];
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    connectedCallback() {
+        let url = this.apiEndpoint.toString();
+        url = `${url}?Object=${this.object != null ? this.object : ''}`
+        url = `${url}&ObjectID=${this.objectId != null ? this.objectId : ''}`
+        url = `${url}&Operation=${this.operation != null ? this.operation : ''}`
+        url = `${url}&Display=${this.display != null ? this.display : ''}`
+        this.apiEndpoint = new URL(url, this.baseURI);
+
+        super.connectedCallback();
+    }
+
+    renderItem(option) {
+        const sequence = option["Sequence"];
+        const text = option["Text"];
+        const url = option["URL"];
+
+        if ((sequence == null || sequence == "" || sequence == "0") && url != null && url != "")
+            return html`<li class="${this.liClass} ${this.liActiveClass}" aria-current="${this.ariaCurrent}"><a href="${url}">${text}</a></li>`;
+        else if (sequence == null || sequence == "" || sequence == "0")
+            return html`<li class="${this.liClass} ${this.liActiveClass}" aria-current="${this.ariaCurrent}">${text}</li>`;
+        else if (url != null && url != "")
+            return html`<li class="${this.liClass}"><a href="${url}">${text}</a></li>`;
+        else
+            return html`<li class="${this.liClass}">${text}</li>`;
+    }
+
+    render() {
+        this.options = getArray(this.jsonData);
+        if (!this.options || this.options.length === 0) return html``;
+
+        return html`
+            <nav class="${this.navClass}">
+                <div class="${this.containerClass}">
+                    <nav aria-label="${this.ariaLabel}">
+                        <ul class="${this.ulClass}">
+                            ${this.options.sort((a, b) => (a.Sequence > b.Sequence ? -1 : 1)).map(option => this.renderItem(option))}
+                        </ul>
+                    </nav>
+                </div>
+            </nav>`;
+    }
+}