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

package/src/qbo-contact.ts

@@ -0,0 +1,211 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { IApiService } from '@quandis/qbo4.ui';
+import { services } from '@quandis/qbo4.configuration';
+import { RestApiService } from '@quandis/qbo4.ui';
+import { elementDate } from '@quandis/qbo4.ui';
+
+@customElement('qbo-contact')
+export class QboContact extends LitElement {
+
+    @property({ type: String })
+    apiEndpoint = 'qbo';
+
+    @property({ type: String })
+    colFourClass: String | null = 'qbo-col-4';
+
+    @property({ type: String })
+    colSixClass: String | null = 'qbo-col-6';
+
+    @property({ type: String })
+    colThreeClass: String | null = 'qbo-col-3';
+
+    @property({ type: String })
+    colTwelveClass: String | null = 'qbo-col-12';
+
+    @property({ type: String })
+    contactId: String | null = null;
+
+    @property({ type: String })
+    contactLabel: String | null = 'Contact';
+
+    @property({ type: String })
+    contactName: String | null = 'Contact';
+
+    @property({ type: Boolean })
+    disabled = true;
+
+    @property({ type: String })
+    divSectionHeaderClass: String | null = 'qbo-header';
+
+    @property({ type: String })
+    formControlSmallClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    formLabelSmallClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    formSelectSmallClass: String | null = 'qbo-sm';
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    @property({ type: Object })
+    jsonData: any | null = {};
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+
+        const service: IApiService = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve<IApiService>(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+        this.jsonData = await service.fetch(`contact/summary/${this.contactId}`);
+    }
+
+    render() {
+        if (this.jsonData == undefined || this.jsonData.Root == undefined || (this.jsonData.Root.ContactItem == undefined && this.contactId != null)) return html`<p>Loading...</p>`;
+
+        return html`<slot>
+            <div class="${this.colSixClass}">
+                <label for="${this.contactName}" class="${this.formLabelSmallClass}">${this.contactLabel}</label>
+                <qbo-contact-name class="${this.formControlSmallClass}" name="${this.contactName}" .data="${this.jsonData.Root.ContactItem}"></qbo-contact-name>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="ContactTemplateID" class="${this.formLabelSmallClass}">Template</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactTemplateID" apiEndpoint="api://qbo/contacttemplate/listwhere?appliesto=${this.jsonData.Root.ContactItem?.Object}" defaultValue="${this.jsonData.Root.ContactItem?.ContactTemplateID}"></qbo-select>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Status" class="${this.formLabelSmallClass}">Status</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Status" apiEndpoint="api://qbo/objectstatus/customlist?object=Contact&objectid=${this.jsonData.Root.ContactItem?.ContactTemplateID}" optionValue="ObjectStatus" defaultValue="${this.jsonData.Root.ContactItem?.Status}"></qbo-select>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="ContactType" class="${this.formLabelSmallClass}">Type</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="ContactType" apiEndpoint="api://qbo/objecttype/customlist?object=Contact&objectid=${this.jsonData.Root.ContactItem?.ContactTemplateID}" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.ContactType}"></qbo-select>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>Location</h5>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Company" class="${this.formLabelSmallClass}">Company</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Company" value="${this.jsonData.Root.ContactItem?.Company}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Title" class="${this.formLabelSmallClass}">Title</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Title" value="${this.jsonData.Root.ContactItem?.Title}"/>
+            </div>
+            <div class="${this.colTwelveClass}">
+                <label for="Address" class="${this.formLabelSmallClass}">Address</label>
+                <textarea ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Address">${this.jsonData.Root.ContactItem?.Address}</textarea>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="City" class="${this.formLabelSmallClass}">City</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="City" value="${this.jsonData.Root.ContactItem?.City}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="State" class="${this.formLabelSmallClass}">State</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="State" apiEndpoint="api://qbo/state/list" optionValue="State" defaultValue="${this.jsonData.Root.ContactItem?.State}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="PostalCode" class="${this.formLabelSmallClass}">Postal Code</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="PostalCode" pattern="\d{5}-?(\d{4})?" value="${this.jsonData.Root.ContactItem?.PostalCode}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="Country" class="${this.formLabelSmallClass}">Country</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Country" value="${this.jsonData.Root.ContactItem?.Country}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Latitude" class="${this.formLabelSmallClass}">Latitude</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Latitude" value="${this.jsonData.Root.ContactItem?.Latitude}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Longitude" class="${this.formLabelSmallClass}">Longitude</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="Longitude" value="${this.jsonData.Root.ContactItem?.Longitude}"/>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>Identity</h5>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="USSSN" class="${this.formLabelSmallClass}">SSN</label>
+                <qbo-ssn .data="${this.jsonData.Root.ContactItem}"></qbo-ssn>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="TIN" class="${this.formLabelSmallClass}">TIN</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="TIN" value="${this.jsonData.Root.ContactItem?.TIN}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="Nationality" class="${this.formLabelSmallClass}">Nationality</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="Nationality" apiEndpoint="api://qbo/objecttype/list?object=Contact.Nationality" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.Nationality}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SpokenLanguage" class="${this.formLabelSmallClass}">Spoken Language</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SpokenLanguage" apiEndpoint="api://qbo/objecttype/list?object=Contact.SpokenLanguage" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.SpokenLanguage}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="BirthDate" class="${this.formLabelSmallClass}">Birth Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="BirthDate" value="${elementDate(this.jsonData.Root.ContactItem?.BirthDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="DeathDate" class="${this.formLabelSmallClass}">Death Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="DeathDate" value="${elementDate(this.jsonData.Root.ContactItem?.DeathDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="ValidStart" class="${this.formLabelSmallClass}">Valid Start</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidStart" value="${elementDate(this.jsonData.Root.ContactItem?.ValidStart)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="ValidEnd" class="${this.formLabelSmallClass}">Valid End</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="ValidEnd" value="${elementDate(this.jsonData.Root.ContactItem?.ValidEnd)}"/>
+            </div>
+            <div class="${this.colSixClass}">
+                <label for="VerifiedSource" class="${this.formLabelSmallClass}">Verified Source</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedSource" value="${this.jsonData.Root.ContactItem?.VerifiedSource}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="VerifiedDate" class="${this.formLabelSmallClass}">Verified Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedDate" value="${elementDate(this.jsonData.Root.ContactItem?.VerifiedDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="VerifiedConfidence" class="${this.formLabelSmallClass}">Verified Confidence</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="VerifiedConfidence" value="${this.jsonData.Root.ContactItem?.VerifiedConfidence}"/>
+            </div>
+            <div class="${this.divSectionHeaderClass}">
+                <h5>SCRA</h5>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStatus" class="${this.formLabelSmallClass}">SCRA Status</label>
+                <qbo-select ?disabled=${this.disabled} class="${this.formSelectSmallClass}" name="SCRAStatus" apiEndpoint="api://qbo/objecttype/list?object=Contact.SCRAStatus" optionValue="ObjectType" defaultValue="${this.jsonData.Root.ContactItem?.SCRAStatus}"></qbo-select>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStatusAsOf" class="${this.formLabelSmallClass}">SCRA Status As Of</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStatusAsOf" value="${elementDate(this.jsonData.Root.ContactItem?.SCRAStatusAsOf)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAStartDate" class="${this.formLabelSmallClass}">SCRA Start Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAStartDate" value="${elementDate(this.jsonData.Root.ContactItem?.SCRAStartDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRADischargeDate" class="${this.formLabelSmallClass}">SCRA Discharge Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRADischargeDate" value="${elementDate(this.jsonData.Root.ContactItem?.SCRADischargeDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAVerified" class="${this.formLabelSmallClass}">SCRA Verified</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerified" value="${this.jsonData.Root.ContactItem?.SCRAVerified}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAVerifiedDate" class="${this.formLabelSmallClass}">SCRA Verified Date</label>
+                <input type="date" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAVerifiedDate" value="${elementDate(this.jsonData.Root.ContactItem?.SCRAVerifiedDate)}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRASource" class="${this.formLabelSmallClass}">SCRA Source</label>
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRASource" value="${this.jsonData.Root.ContactItem?.SCRASource}"/>
+            </div>
+            <div class="${this.colThreeClass}">
+                <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
+                <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData.Root.ContactItem?.SCRAID}"/>
+            </div>
+            <qbo-form-edit .data="${this.jsonData.Root.ContactItem}"></qbo-form-edit>
+        </slot>`;
+    }
+}

package/src/qbo-mainmenu.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class QboMainMenu extends LitElement {
+    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: string;
+    renderInHost: boolean;
+    jsonData: any | null;
+    targetElement: Element | null;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    handleResize: () => void;
+    updated(changedProperties: PropertyValues): void;
+    renderImage(image: any): import("lit-html").TemplateResult<1>;
+    renderMenu(json: any, isDropdown: any, isSubmenu: any): import("lit-html").TemplateResult<1>;
+    renderMenuDivider(): import("lit-html").TemplateResult<1>;
+    renderMenuDropdown(json: any, isSubmenu: any): import("lit-html").TemplateResult<1>;
+    renderMenuDropdownLink(url: any, text: any, icon: any): import("lit-html").TemplateResult<1>;
+    renderMenuLink(menu: any): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo-mainmenu.js

@@ -0,0 +1,314 @@
+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 { Popover } from 'bootstrap';
+import { RestApiService, services } from '@quandis/qbo4.ui';
+let QboMainMenu = class QboMainMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.ariaExpanded = 'false';
+        this.ariaLabel = 'Toggle menu';
+        this.buttonType = 'button';
+        this.collapseToggle = 'collapse';
+        this.dblClickClass = 'qbo-doubleclick';
+        this.dropdownId = 'qboMainMenu';
+        this.dropdownToggle = 'dropdown';
+        this.iconClass = 'qbo-icon';
+        this.liLinkToggleClass = 'qbo-dropdown';
+        this.liLinkClass = 'qbo-nav-item';
+        this.liAMenuClass = 'qbo-dropdown-item';
+        this.navClass = 'qbo-mainmenu';
+        this.popoverContainer = 'body';
+        this.popoverHtml = 'false';
+        this.popoverPlacement = 'bottom';
+        this.popoverToggle = 'popover';
+        this.popoverTrigger = 'hover';
+        this.spanMenuClass = 'qbo-submenuexpand';
+        this.spanMenuValue = '>';
+        this.ulMainMenuToggleClass = 'qbo-dropdown-mainmenu';
+        this.ulSubMenuClass = 'submenu';
+        this.ulSubMenuToggleClass = 'dropdown-menu';
+        this.apiEndpoint = 'qbo';
+        this.renderInHost = true;
+        this.jsonData = {};
+        this.targetElement = null;
+        this.handleResize = () => {
+            if (window.innerWidth < 992) {
+                /* Collapse menu on small screens */
+                this.renderRoot.querySelectorAll(`button`).forEach(function (btn) {
+                    if (btn != null && btn instanceof HTMLElement && btn.hasAttribute('aria-expanded') && btn.getAttribute('aria-expanded') == 'true')
+                        btn.click();
+                });
+            }
+            else {
+                /* Remove collapsed styling on large screens*/
+                this.renderRoot.querySelectorAll(`.${this.ulSubMenuToggleClass} .${this.ulSubMenuClass}`).forEach(function (ul) {
+                    if (ul != null && ul instanceof HTMLElement && ul.hasAttribute('style'))
+                        ul.removeAttribute('style');
+                });
+            }
+        };
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize);
+        const service = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+        this.jsonData = await service.fetch(`theme/mainmenu`);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.get('jsonData') != undefined) {
+            /* Disable click */
+            this.renderRoot.querySelectorAll(`.${this.ulSubMenuToggleClass}`).forEach(ul => {
+                ul.addEventListener('click', function (e) {
+                    e.stopPropagation();
+                });
+            });
+            /* Click for menu expansion on small screens */
+            const className = this.ulSubMenuClass;
+            this.renderRoot.querySelectorAll(`.${this.ulSubMenuToggleClass} a`).forEach(function (a) {
+                a.addEventListener('click', (e) => {
+                    if (e.currentTarget != null && e.currentTarget instanceof HTMLElement && window.innerWidth < 992) {
+                        const nextEl = e.currentTarget.nextElementSibling;
+                        if (nextEl != null && nextEl instanceof HTMLElement && nextEl.classList.contains(className)) {
+                            e.preventDefault();
+                            nextEl.style.display = nextEl.style.display == 'block' ? 'none' : 'block';
+                        }
+                    }
+                });
+            });
+            /* Enable popovers */
+            this.renderRoot.querySelectorAll(`[data-bs-toggle="${this.popoverToggle}"]`).forEach(function (t) {
+                new Popover(t);
+            });
+        }
+    }
+    renderImage(image) {
+        if (image != null)
+            return html `<img src="${image}"/><span/>`;
+        else
+            return html ``;
+    }
+    renderMenu(json, isDropdown, isSubmenu) {
+        let result = html ``;
+        const jsonMenu = json != null && json.Menu != null ? json.Menu : json;
+        if (jsonMenu != null) {
+            if (jsonMenu.forEach) {
+                jsonMenu.forEach(mm => {
+                    if (mm.Menu != null)
+                        result = html `${result}${this.renderMenuDropdown(mm, isSubmenu)}`;
+                    else if (mm.Type == "Divider")
+                        result = html `${result}${this.renderMenuDivider()}`;
+                    else if (isDropdown)
+                        result = html `${result}${this.renderMenuDropdownLink(mm.URL, mm.Text, mm.Icon)}`;
+                    else
+                        result = html `${result}${this.renderMenuLink(mm)}`;
+                });
+            }
+            else {
+                if (jsonMenu.Menu != null)
+                    result = html `${result}${this.renderMenuDropdown(jsonMenu, isSubmenu)}`;
+                else if (jsonMenu.Type == "Divider")
+                    result = html `${result}${this.renderMenuDivider()}`;
+                else if (isDropdown)
+                    result = html `${result}${this.renderMenuDropdownLink(jsonMenu.URL, jsonMenu.Text, jsonMenu.Icon)}`;
+                else
+                    result = html `${result}${this.renderMenuLink(jsonMenu)}`;
+            }
+        }
+        return html `${result}`;
+    }
+    renderMenuDivider() {
+        return html `<li><hr/></li>`;
+    }
+    renderMenuDropdown(json, isSubmenu) {
+        const i = (json.Icon != null && json.Icon != '') ? html `<i class="${json.Icon} ${this.iconClass}" />` : ``;
+        if (isSubmenu)
+            return html `<li>
+                <a class="${this.liAMenuClass}" href="${json.URL}">
+                    ${i}<span>${json.Text}</span>
+                    <span class="${this.spanMenuClass}">${this.spanMenuValue}</span>
+                </a>
+                <ul class="${this.ulSubMenuClass} ${this.ulSubMenuToggleClass}">
+                    ${this.renderMenu(json.Menu, true, true)}
+                </ul>
+            </li>`;
+        else
+            return html `<li class="${this.liLinkClass} ${this.liLinkToggleClass}">
+                    <a href="${json.URL}" data-bs-toggle="${this.dropdownToggle}">
+                        ${i}<span>${json.Text}</span>
+                    </a>
+                    <ul class="${this.ulSubMenuToggleClass} ${this.ulMainMenuToggleClass}">
+                        ${this.renderMenu(json.Menu, true, true)}
+                    </ul>
+                </li>`;
+    }
+    renderMenuDropdownLink(url, text, icon) {
+        const i = (icon != null && icon != '') ? html `<i class="${icon} ${this.iconClass}" />` : ``;
+        return html `<li><a class="${this.liAMenuClass}" href="${url}">${i}${text}</a></li>`;
+    }
+    renderMenuLink(menu) {
+        const i = (menu.Icon != null && menu.Icon != '') ? html `<i class="${menu.Icon} ${this.iconClass}" />` : ``;
+        const title = menu.Title;
+        const content = menu.DataContent;
+        const toggle = menu.DataToggle != null ? menu.DataToggle : this.popoverToggle;
+        const container = menu.DataContainer != null ? menu.DataContainer : this.popoverContainer;
+        const placement = menu.DataPlacement != null ? menu.DataPlacement : this.popoverPlacement;
+        const trigger = menu.DataTrigger != null ? menu.DataTrigger : this.popoverTrigger;
+        const isHtml = menu.DataHtml != null ? menu.DataHtml : this.popoverHtml;
+        if (menu.DoubleClick != null)
+            return html `<li class="${this.liLinkClass}">
+                <a class="${this.dblClickClass}" title="${title}" data-bs-trigger="${trigger}" data-bs-placement="${placement}" data-bs-container="${container}" data-bs-content="${content}" data-bs-toggle="${toggle}" data-bs-html="${isHtml}" ondblclick="${menu.DoubleClick}">
+                    ${i}${menu.Text}
+                </a>
+            </li>`;
+        else
+            return html `<li class="${this.liLinkClass}">
+                <a title="${title}" data-bs-trigger="${trigger}" data-bs-placement="${placement}" data-bs-container="${container}" data-bs-content="${content}" data-bs-toggle="${toggle}" data-bs-html="${isHtml}" href="${menu.URL}">
+                    ${i}${menu.Text}
+                </a>
+            </li>`;
+    }
+    render() {
+        if (this.jsonData && this.jsonData.Root && this.jsonData.Root.MainMenu) {
+            return html `
+                <nav class="${this.navClass}">
+                    <div>
+                        <a href="#">
+                            ${this.renderImage(this.jsonData.Root.MainMenu.Image)}
+                            ${this.jsonData.Root.MainMenu.Label}
+                        </a>
+                        <button type="${this.buttonType}" data-bs-toggle="${this.collapseToggle}" data-bs-target="#${this.dropdownId}" aria-expanded="${this.ariaExpanded}" aria-label="${this.ariaLabel}">
+                            <span/>
+                        </button>
+                        <div id="${this.dropdownId}">
+                            <ul>
+                                ${this.renderMenu(this.jsonData.Root.MainMenu, false, false)}
+                            </ul>
+                        </div>
+                    </div>
+                </nav>`;
+        }
+        else
+            return html ``;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "ariaExpanded", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "buttonType", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "collapseToggle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "dblClickClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "dropdownId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "dropdownToggle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "iconClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "liLinkToggleClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "liLinkClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "liAMenuClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "navClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "popoverContainer", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "popoverHtml", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "popoverPlacement", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "popoverToggle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "popoverTrigger", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "spanMenuClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "spanMenuValue", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "ulMainMenuToggleClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "ulSubMenuClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "ulSubMenuToggleClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboMainMenu.prototype, "jsonData", void 0);
+QboMainMenu = __decorate([
+    customElement('qbo-mainmenu')
+], QboMainMenu);
+export { QboMainMenu };