@quandis/qbo4.ui-bridge 4.0.1-CI-20240919-212538

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@quandis/qbo4.ui-bridge",
+  "author": "Quandis, Inc.",
+  "license": "MIT",
+  "type": "module",
+  "version": "4.0.1-CI-20240919-212538",
+  "workspaces": [
+    "code"
+  ],
+  "main": "src/Program.js",
+  "private": false,
+  "scripts": {
+    "build": "npm run update && npm run sass && tsc && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.ui-bridge.tgz",
+    "update": "npm install ../../src/qbo4.ui.Web/qbo4.ui.tgz --force",
+    "clean": "rd \"node_modules/@quandis/qbo4.ui\" -force -recurse -ErrorAction SilentlyContinue",
+    "packdev": "webpack --config webpack.config.dev.js --no-color",
+    "packprod": "webpack --config webpack.config.prod.js --no-color",
+    "sass": "sass scss/:wwwroot/css && node cssshake.js"
+  },
+  "keywords": [
+    "qbo"
+  ],
+  "files": [
+    "wwwroot/js/",
+    "src/"
+  ],
+  "dependencies": {
+    "@codemirror/commands": "^6.5.0",
+    "@codemirror/lang-html": "^6.4.9",
+    "@joint/core": "^4.0.4",
+    "@quandis/qbo4.logging": "^4.0.1-CI-20240528-220411",
+    "@quandis/qbo4.ui": "file:../qbo4.ui.Web/qbo4.ui.tgz",
+    "@quandis/qbo4.ui-bridge": "file:qbo4.ui-bridge.tgz",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "codemirror": "6.0.1",
+    "lit": "^3.1.3",
+    "reflect-metadata": "^0.2.2",
+    "tsyringe": "^4.8.0",
+    "zero-md": "^3.0.0"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
+    "autoprefixer": "^10.4.19",
+    "clean-css": "^5.3.3",
+    "eslint": "^9.7.0",
+    "glob": "^10.4.1",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.77.4",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.10.0"
+  }
+}

package/src/Program.d.ts

@@ -0,0 +1,9 @@
+import 'reflect-metadata';
+export { services } from '@quandis/qbo4.configuration';
+export * from './qbo-badge.js';
+export * from './qbo-contact.js';
+export * from './qbo-contact-name.js';
+export * from './qbo-mainmenu.js';
+export * from './qbo-sidebar.js';
+export * from './qbo-ssn.js';
+export * from '@quandis/qbo4.ui';

package/src/Program.js

@@ -0,0 +1,9 @@
+import 'reflect-metadata';
+export { services } from '@quandis/qbo4.configuration';
+export * from './qbo-badge.js';
+export * from './qbo-contact.js';
+export * from './qbo-contact-name.js';
+export * from './qbo-mainmenu.js';
+export * from './qbo-sidebar.js';
+export * from './qbo-ssn.js';
+export * from '@quandis/qbo4.ui';

package/src/Program.ts

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+export { services } from '@quandis/qbo4.configuration';
+export * from './qbo-badge.js';
+export * from './qbo-contact.js';
+export * from './qbo-contact-name.js';
+export * from './qbo-mainmenu.js';
+export * from './qbo-sidebar.js'
+export * from './qbo-ssn.js';
+export * from '@quandis/qbo4.ui';
+

package/src/qbo-badge.d.ts

@@ -0,0 +1,32 @@
+import { QboFetch } from '@quandis/qbo4.ui/src/qbo/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-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 '@quandis/qbo4.ui/src/qbo/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-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-badge.ts

@@ -0,0 +1,79 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFetch } from '@quandis/qbo4.ui/src/qbo/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-breadcrumb.d.ts

@@ -0,0 +1,23 @@
+import { QboFetch } from '@quandis/qbo4.ui/src/qbo/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(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    renderItem(option: any): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/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 '@quandis/qbo4.ui';
+import { QboFetch } from '@quandis/qbo4.ui/src/qbo/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-breadcrumb.ts

@@ -0,0 +1,96 @@
+import { html, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { getArray } from '@quandis/qbo4.ui';
+import { QboFetch } from '@quandis/qbo4.ui/src/qbo/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>`;
+    }
+}

package/src/qbo-contact-name.d.ts

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit';
+import { QboFormElement } from '@quandis/qbo4.ui';
+export declare class QboContactName extends QboFormElement {
+    buttonClass: String | null;
+    disabled: boolean;
+    elementClass: String | null;
+    elementStackedTopClass: String | null;
+    icon: String | null;
+    modalBodyDivClass: String | null;
+    modalContentDivClass: String | null;
+    modalDivClass: String | null;
+    modalDialogDivClass: String | null;
+    modalFooterDivClass: String | null;
+    modalHeaderDivClass: String | null;
+    modalHeaderText: String | null;
+    slotClass: String | null;
+    spanClass: String | null;
+    type: string | null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): TemplateResult<1>;
+}