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

package/src/qbo/qbo-mainmenu.js

@@ -0,0 +1,307 @@
+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 { QboFetch } from './qbo-fetch.js';
+import { Popover } from 'bootstrap';
+let QboMainMenu = class QboMainMenu extends QboFetch {
+    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 = new URL('config/mainmenu', this.baseURI);
+        this.renderInHost = true;
+        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();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize);
+    }
+    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.MainMenu) {
+            return html `
+                <nav class="${this.navClass}">
+                    <div>
+                        <a href="#">
+                            ${this.renderImage(this.jsonData.MainMenu.Image)}
+                            ${this.jsonData.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.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);
+QboMainMenu = __decorate([
+    customElement('qbo-mainmenu')
+], QboMainMenu);
+export { QboMainMenu };

package/src/qbo/qbo-mainmenu.ts

@@ -0,0 +1,263 @@
+import { html, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QboFetch } from './qbo-fetch.js';
+import { Popover } from 'bootstrap';
+
+@customElement('qbo-mainmenu')
+export class QboMainMenu extends QboFetch {
+
+    @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 = new URL('config/mainmenu', this.baseURI);
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    targetElement: Element | null = null;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize);
+    }
+
+    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.MainMenu) {
+            return html`
+                <nav class="${this.navClass}">
+                    <div>
+                        <a href="#">
+                            ${this.renderImage(this.jsonData.MainMenu.Image)}
+                            ${this.jsonData.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.MainMenu, false, false)}
+                            </ul>
+                        </div>
+                    </div>
+                </nav>`;
+        }
+        else
+            return html``;
+    }
+}

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

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+export declare class QboMarkdown extends LitElement {
+    src: any;
+    connectedCallback(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-markdown.js

@@ -0,0 +1,33 @@
+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 { ZeroMd } from 'zero-md';
+const md = ZeroMd;
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+let QboMarkdown = class QboMarkdown extends LitElement {
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        const s = "script";
+        return html `<zero-md src="${this.src}"><script type="text/markdown">${this.querySelector('script')?.innerHTML}<\/script></zero-md>`;
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboMarkdown.prototype, "src", void 0);
+QboMarkdown = __decorate([
+    customElement('qbo-markdown')
+], QboMarkdown);
+export { QboMarkdown };

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

@@ -0,0 +1,22 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ZeroMd } from 'zero-md'
+const md = ZeroMd;
+/**
+  * Renders CodeMirror to edit HTML.
+  */
+@customElement('qbo-markdown')
+export class QboMarkdown extends LitElement
+{
+    @property()
+    src;
+
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+    render() {
+        const s = "script";
+        return html`<zero-md src="${this.src}"><script type="text/markdown">${this.querySelector('script')?.innerHTML}<\/script></zero-md>`
+    }
+}
+

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

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        SpeechRecognition: any;
+        webkitSpeechRecognition: any;
+    }
+}
+/**
+  * Collect text input from the user.
+  */
+export declare class QboMicrophone extends LitElement {
+    static activeInstance: QboMicrophone | null;
+    renderInHost: boolean;
+    continuous: boolean;
+    interimResults: boolean;
+    maxAlternatives: number;
+    for: string;
+    class: string;
+    activeClass: string;
+    _recognition: any;
+    target: Element | null | undefined;
+    listening: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onResult(e: any): void;
+    listen(e: any): void;
+    start(): void;
+    stop(e: any): void;
+    error(e: any): void;
+    render(): import("lit").TemplateResult<1>;
+}