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

package/src/qbo-mainmenu.ts

@@ -0,0 +1,270 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFetch } from '@quandis/qbo4.ui/src/qbo/qbo-fetch.js';
+import { Popover } from 'bootstrap';
+import { IApiService, RestApiService, services } from '@quandis/qbo4.ui';
+
+@customElement('qbo-mainmenu')
+export class QboMainMenu extends LitElement {
+
+    @property({ type: String })
+    ariaExpanded = 'false';
+
+    @property({ type: String })
+    ariaLabel = 'Toggle menu';
+
+    @property({ type: String })
+    buttonType = 'button';
+
+    @property({ type: String })
+    collapseToggle = 'collapse';
+
+    @property({ type: String })
+    dblClickClass = 'qbo-doubleclick';
+
+    @property({ type: String })
+    dropdownId = 'qboMainMenu';
+
+    @property({ type: String })
+    dropdownToggle = 'dropdown';
+
+    @property({ type: String })
+    iconClass = 'qbo-icon';
+
+    @property({ type: String })
+    liLinkToggleClass = 'qbo-dropdown';
+
+    @property({ type: String })
+    liLinkClass = 'qbo-nav-item';
+
+    @property({ type: String })
+    liAMenuClass = 'qbo-dropdown-item';
+
+    @property({ type: String })
+    navClass = 'qbo-mainmenu';
+
+    @property({ type: String })
+    popoverContainer = 'body';
+
+    @property({ type: String })
+    popoverHtml = 'false';
+
+    @property({ type: String })
+    popoverPlacement = 'bottom';
+
+    @property({ type: String })
+    popoverToggle = 'popover';
+
+    @property({ type: String })
+    popoverTrigger = 'hover';
+
+    @property({ type: String })
+    spanMenuClass = 'qbo-submenuexpand';
+
+    @property({ type: String })
+    spanMenuValue = '>';
+
+    @property({ type: String })
+    ulMainMenuToggleClass = 'qbo-dropdown-mainmenu';
+
+    @property({ type: String })
+    ulSubMenuClass = 'submenu';
+
+    @property({ type: String })
+    ulSubMenuToggleClass = 'dropdown-menu';
+
+    @property({ type: String })
+    apiEndpoint = 'qbo';
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    @property({ type: Object })
+    jsonData: any | null = {};
+
+    targetElement: Element | null = null;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize);
+        const service: IApiService = services.container.isRegistered(this.apiEndpoint) ? services.container.resolve<IApiService>(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+        this.jsonData = await service.fetch(`theme/mainmenu`);
+
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+        super.disconnectedCallback();
+    }
+
+    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');
+            });
+        }
+    }
+
+    updated(changedProperties: PropertyValues) {
+        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``;
+    }
+}

package/src/qbo-sidebar.d.ts

@@ -0,0 +1,10 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class QboSideBar extends LitElement {
+    collapseAttribute: string;
+    collapseSelector: string;
+    menuCollapsed: string;
+    menuExpanded: string;
+    menuShow: string;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo-sidebar.js

@@ -0,0 +1,65 @@
+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';
+let QboSideBar = class QboSideBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.collapseAttribute = `aria-expanded`;
+        this.collapseSelector = `[data-qbo-toggle="collapse"]`;
+        this.menuCollapsed = `false`;
+        this.menuExpanded = `true`;
+        this.menuShow = `qbo-show`;
+    }
+    updated(changedProperties) {
+        /* Enable collapsing menus */
+        const root = this;
+        root.querySelectorAll(`${this.collapseSelector}`).forEach(function (btn) {
+            btn.addEventListener('click', (e) => {
+                const sibling = btn.nextElementSibling;
+                if (btn.getAttribute(root.collapseAttribute) == root.menuCollapsed) {
+                    if (sibling instanceof HTMLElement)
+                        sibling.classList.add(root.menuShow);
+                    btn.setAttribute(root.collapseAttribute, root.menuExpanded);
+                }
+                else {
+                    if (sibling instanceof HTMLElement)
+                        sibling.classList.remove(root.menuShow);
+                    btn.setAttribute(root.collapseAttribute, root.menuCollapsed);
+                }
+            });
+        });
+    }
+    render() { return html `<slot></slot>`; }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSideBar.prototype, "collapseAttribute", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSideBar.prototype, "collapseSelector", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSideBar.prototype, "menuCollapsed", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSideBar.prototype, "menuExpanded", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSideBar.prototype, "menuShow", void 0);
+QboSideBar = __decorate([
+    customElement('qbo-sidebar')
+], QboSideBar);
+export { QboSideBar };

package/src/qbo-sidebar.ts

@@ -0,0 +1,41 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('qbo-sidebar')
+export class QboSideBar extends LitElement {
+
+    @property({ type: String })
+    collapseAttribute = `aria-expanded`;
+
+    @property({ type: String })
+    collapseSelector = `[data-qbo-toggle="collapse"]`;
+
+    @property({ type: String })
+    menuCollapsed = `false`;
+
+    @property({ type: String })
+    menuExpanded = `true`;
+
+    @property({ type: String })
+    menuShow = `qbo-show`;
+
+    updated(changedProperties: PropertyValues) {
+        /* Enable collapsing menus */
+        const root = this;
+        root.querySelectorAll(`${this.collapseSelector}`).forEach(function (btn) {
+            btn.addEventListener('click', (e) => {
+                const sibling = btn.nextElementSibling;
+
+                if (btn.getAttribute(root.collapseAttribute) == root.menuCollapsed) {
+                    if (sibling instanceof HTMLElement) sibling.classList.add(root.menuShow);
+                    btn.setAttribute(root.collapseAttribute, root.menuExpanded);
+                } else {
+                    if (sibling instanceof HTMLElement) sibling.classList.remove(root.menuShow);
+                    btn.setAttribute(root.collapseAttribute, root.menuCollapsed);
+                }
+            });
+        });
+    }
+
+    render() { return html`<slot></slot>`; }
+}

package/src/qbo-ssn.d.ts

@@ -0,0 +1,26 @@
+import { TemplateResult } from 'lit';
+import { QboFormElement } from '@quandis/qbo4.ui';
+export declare class QboSSN extends QboFormElement {
+    apiEndpoint: string;
+    disabled: boolean;
+    editMode: boolean;
+    event: String | null;
+    imageClassShow: String | null;
+    imageClassHide: String | null;
+    inputClass: String | null;
+    inputName: String | null;
+    selectorImage: String | null;
+    selectorInput: String | null;
+    selectorSpan: String | null;
+    show: boolean;
+    slotClass: String | null;
+    spanClass: String | null;
+    titleMaskText: String | null;
+    titleShowText: String | null;
+    type: string | null;
+    url: String | null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    toggleSSN(): Promise<void>;
+    render(): TemplateResult<1>;
+}

package/src/qbo-ssn.js

@@ -0,0 +1,174 @@
+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 { services } from '@quandis/qbo4.configuration';
+import { RestApiService } from '@quandis/qbo4.ui';
+import { QboFormElement } from '@quandis/qbo4.ui';
+const ssnMap = new Map();
+ssnMap.set('defaultLayout', (component) => {
+    return html `<div slot="content" class="${component.slotClass}">
+        <input type="text" ?disabled=${component.disabled} class="${component.inputClass}" name="${component.inputName}" value="${component.data?.['USSSN']}"/>
+        <span @click="${component.toggleSSN}" class="${component.spanClass}" title="${component.titleShowText}"><i class="${component.imageClassShow}"></i></span>
+    </div>`;
+});
+let QboSSN = class QboSSN extends QboFormElement {
+    constructor() {
+        super(...arguments);
+        this.apiEndpoint = 'qbo';
+        this.disabled = true;
+        this.editMode = false;
+        this.event = 'click';
+        this.imageClassShow = 'qbo-icon-eye';
+        this.imageClassHide = 'qbo-icon-eye-slash';
+        this.inputClass = 'qbo-sm';
+        this.inputName = 'USSSN';
+        this.selectorImage = 'i';
+        this.selectorInput = 'input';
+        this.selectorSpan = 'span';
+        this.show = false;
+        this.slotClass = 'qbo-input-group';
+        this.spanClass = 'qbo-input-group-text qbo-pointer';
+        this.titleMaskText = 'Mask';
+        this.titleShowText = 'Show';
+        this.type = 'defaultLayout';
+        this.url = 'contact/UnmaskSSN';
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async toggleSSN() {
+        this.show = !this.show;
+        if (this.show) {
+            const service = services.container.isRegistered(this.apiEndpoint)
+                ? services.container.resolve(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+            const json = await service.fetch(`${this.url}`, { ID: `${this.data?.['ContactID']}` });
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
+                if (input instanceof HTMLInputElement
+                    && json?.ContactCollection?.length > 0
+                    && json.ContactCollection[0].USSSN != null
+                    && json.ContactCollection[0].USSSN.length == 9) {
+                    const ssn = json.ContactCollection[0].USSSN;
+                    input.value = `${ssn.substring(0, 3)}-${ssn.substring(3, 5)}-${ssn.substring(5, 9)}`;
+                    if (this.editMode)
+                        input.disabled = false;
+                    this.renderRoot.querySelectorAll(`${this.selectorSpan}`).forEach(span => {
+                        span.setAttribute('title', `${this.titleMaskText}`);
+                    });
+                    this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                        i.className = `${this.imageClassHide}`;
+                    });
+                }
+                else {
+                    this.show = !this.show;
+                }
+            });
+        }
+        else {
+            this.renderRoot.querySelectorAll(`${this.selectorInput}`).forEach(input => {
+                if (input instanceof HTMLInputElement) {
+                    input.value = `${this.data?.['USSSN']}`;
+                    if (this.editMode)
+                        input.disabled = true;
+                }
+                this.renderRoot.querySelectorAll(`${this.selectorSpan}`).forEach(span => {
+                    span.setAttribute('title', `${this.titleShowText}`);
+                });
+                this.renderRoot.querySelectorAll(`${this.selectorImage}`).forEach(i => {
+                    i.className = `${this.imageClassShow}`;
+                });
+            });
+        }
+    }
+    render() {
+        return html `<slot>${ssnMap.has(this.type) ? ssnMap.get(this.type)(this) : null}</slot>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "editMode", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "event", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "imageClassShow", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "imageClassHide", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "inputClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "inputName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "selectorImage", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "selectorInput", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "selectorSpan", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "show", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "slotClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "spanClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "titleMaskText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "titleShowText", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "type", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "url", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "renderInHost", void 0);
+QboSSN = __decorate([
+    customElement('qbo-ssn')
+], QboSSN);
+export { QboSSN };