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

package/src/qbo/qbo-microphone.js

@@ -0,0 +1,149 @@
+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);
+};
+var QboMicrophone_1;
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+  * Collect text input from the user.
+  */
+let QboMicrophone = class QboMicrophone extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.renderInHost = true;
+        this.continuous = false;
+        this.interimResults = false;
+        this.maxAlternatives = 1;
+        this.for = 'input';
+        this.class = 'input-group-text bi bi-headset';
+        this.activeClass = 'bg-primary-subtle';
+        this._recognition = null;
+        this.target = null;
+        this.listening = false;
+    }
+    static { QboMicrophone_1 = this; }
+    static { this.activeInstance = null; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.listen);
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.continuous = this.continuous;
+        // recognition.lang = 'en-US';
+        recognition.interimResults = this.interimResults;
+        recognition.maxAlternatives = this.maxAlternatives;
+        recognition.onresult = (e) => { this.onResult(e); };
+        recognition.onspeechend = (e) => { this.stop(e); };
+        recognition.onerror = (e) => { this.error(e); };
+        this._recognition = recognition;
+        this.target = document.getElementById(this.for)
+            || this.querySelector(this.for)
+            || this.parentElement?.querySelector(this.for);
+        if (this.target == null)
+            console.log(`qbo-microphone: no target found for ${this.for}`);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.listen);
+        super.disconnectedCallback();
+    }
+    onResult(e) {
+        const text = e.results[e.results.length - 1][0].transcript; //e.results[0][0].transcript;
+        console.log('Result: ' + text);
+        if (this.target == null)
+            return;
+        const element = this.target;
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio') {
+                if (element.value === text) {
+                    element.checked = true;
+                }
+            }
+            else {
+                if (this.continuous)
+                    element.value += text;
+                else
+                    element.value = text;
+            }
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            if (this.continuous)
+                element.value += text;
+            else
+                element.value = text;
+        }
+        else if (element instanceof HTMLSelectElement) {
+            for (let i = 0; i < element.options.length; i++) {
+                if (element.options[i].value === text || element.options[i].text === text) {
+                    element.selectedIndex = i;
+                    break;
+                }
+            }
+        }
+    }
+    listen(e) {
+        if (this.listening)
+            this.stop(e);
+        else
+            this.start();
+    }
+    start() {
+        this.listening = true;
+        QboMicrophone_1.activeInstance = this;
+        if (this.activeClass)
+            this.classList.add(this.activeClass);
+        console.log('listening');
+        this._recognition.start();
+    }
+    stop(e) {
+        this.listening = false;
+        QboMicrophone_1.activeInstance = null;
+        if (this.activeClass)
+            this.classList.remove(this.activeClass);
+        console.log('stopped listening');
+        this._recognition.stop();
+        this._recognition.abort();
+    }
+    error(e) {
+        console.log('Error during speech recognition:', e);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "continuous", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "interimResults", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "maxAlternatives", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "for", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "class", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMicrophone.prototype, "activeClass", void 0);
+QboMicrophone = QboMicrophone_1 = __decorate([
+    customElement('qbo-microphone')
+], QboMicrophone);
+export { QboMicrophone };

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

@@ -0,0 +1,137 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+declare global {
+    interface Window {
+        SpeechRecognition:any;
+        webkitSpeechRecognition:any;
+    }
+}
+
+/**
+  * Collect text input from the user.
+  */
+@customElement('qbo-microphone')
+export class QboMicrophone extends LitElement
+{
+    static activeInstance: QboMicrophone | null = null;
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    @property({ type: Boolean })
+    continuous = false;
+
+    @property({ type: Boolean })
+    interimResults = false;
+
+    @property({ type: Number })
+    maxAlternatives = 1;
+
+    @property({ type: String })
+    for = 'input';
+
+    @property({ type: String })
+    class = 'input-group-text bi bi-headset';
+
+    @property({ type: String })
+    activeClass = 'bg-primary-subtle';
+
+    _recognition: any = null;
+
+    target: Element | null | undefined = null;
+
+    listening = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.listen);
+        const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+        recognition.continuous = this.continuous;
+        // recognition.lang = 'en-US';
+        recognition.interimResults = this.interimResults;
+        recognition.maxAlternatives = this.maxAlternatives;
+        recognition.onresult = (e) => { this.onResult(e) };
+        recognition.onspeechend = (e) => { this.stop(e) };
+        recognition.onerror = (e) => { this.error(e) };
+
+        this._recognition = recognition;
+
+        this.target = document.getElementById(this.for) 
+            || this.querySelector(this.for)
+            || this.parentElement?.querySelector(this.for);
+        if (this.target == null) console.log(`qbo-microphone: no target found for ${this.for}`);
+
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('click', this.listen);
+        super.disconnectedCallback();
+    }
+
+    onResult(e: any) {
+        const text = e.results[e.results.length-1][0].transcript; //e.results[0][0].transcript;
+        console.log('Result: ' + text);
+        if (this.target == null)
+            return;
+        const element = this.target;
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio') {
+                if (element.value === text) {
+                    element.checked = true;
+                }
+            } else {
+                if (this.continuous)
+                    element.value += text;
+                else 
+                    element.value = text;
+            }
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            if (this.continuous)
+                element.value += text;
+            else 
+                element.value = text;
+        }
+        else if (element instanceof HTMLSelectElement) {
+            for (let i = 0; i < element.options.length; i++) {
+                if (element.options[i].value === text || element.options[i].text === text) {
+                    element.selectedIndex = i;
+                    break;
+                }
+            }
+        }
+    }
+
+    listen(e) {
+        if (this.listening) this.stop(e);
+        else this.start();
+    }
+
+    start() {
+        this.listening = true;
+        QboMicrophone.activeInstance = this;
+        if (this.activeClass)
+            this.classList.add(this.activeClass);
+        console.log('listening');
+        this._recognition.start();
+    }
+
+    stop(e: any) {  
+        this.listening = false;
+        QboMicrophone.activeInstance = null;
+        if (this.activeClass)
+            this.classList.remove(this.activeClass);
+        console.log('stopped listening');
+        this._recognition.stop();
+        this._recognition.abort();
+    }
+
+    error(e) {
+        console.log('Error during speech recognition:', e);
+    }
+
+    render() {
+        return html`<slot></slot>`;
+    }
+}

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

@@ -0,0 +1,8 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class QboPopover extends LitElement {
+    selector: string;
+    renderInHost: boolean;
+    createRenderRoot(): Element | ShadowRoot;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-popover.js

@@ -0,0 +1,41 @@
+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';
+let QboPopover = class QboPopover extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selector = `[data-bs-toggle="popover"]`;
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    updated(changedProperties) {
+        /* Enable Popover */
+        this.renderRoot.querySelectorAll(`${this.selector}`).forEach(function (t) {
+            new Popover(t);
+        });
+    }
+    render() { return html `<slot></slot>`; }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "selector", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboPopover.prototype, "renderInHost", void 0);
+QboPopover = __decorate([
+    customElement('qbo-popover')
+], QboPopover);
+export { QboPopover };

package/src/qbo/qbo-popover.ts

@@ -0,0 +1,26 @@
+import { html, LitElement, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Popover } from 'bootstrap';
+
+@customElement('qbo-popover')
+export class QboPopover extends LitElement {
+
+    @property({ type: String })
+    selector = `[data-bs-toggle="popover"]`;
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    updated(changedProperties: PropertyValues) {
+        /* Enable Popover */
+        this.renderRoot.querySelectorAll(`${this.selector}`).forEach(function (t) {
+            new Popover(t);
+        });
+    }
+
+    render() { return html`<slot></slot>`; }
+}

package/src/qbo/qbo-popup-listener.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+  * Listens for a popup event, and renders popup with the content.
+  */
+export declare class QboPopupListener extends LitElement {
+    open: boolean;
+    loading: boolean;
+    renderInHost: boolean;
+    src: any;
+    title: string;
+    clickSelector: any;
+    eventName: string;
+    target: any;
+    listen: boolean;
+    targetElement: any;
+    targetContainer: HTMLIFrameElement | null | undefined;
+    connectedCallback(): Promise<void>;
+    toggle(): void;
+    show(): void;
+    hide(event: any): void;
+    handleOutsideClick(event: any): void;
+    firstUpdated(): void;
+    showElement(el: any): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-popup-listener.js

@@ -0,0 +1,145 @@
+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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+  * Listens for a popup event, and renders popup with the content.
+  */
+let QboPopupListener = class QboPopupListener extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.loading = false;
+        this.renderInHost = false;
+        this.title = "Popup";
+        this.eventName = 'qbo-popup';
+        /* If true, call target.addEventListener to listen for any click events. */
+        this.listen = true;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    }
+    toggle() {
+        this.open = !this.open;
+        if (this.open)
+            document.addEventListener('click', this.handleOutsideClick);
+        else
+            document.removeEventListener('click', this.handleOutsideClick);
+    }
+    show() {
+        this.open = true;
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    hide(event) {
+        if (event.target.closest('[data-dismiss="modal"]')) {
+            this.open = false;
+            this.src = null;
+            const iframe = this.querySelector('iframe') ?? this.renderRoot.querySelector('iframe');
+            if (iframe != null)
+                iframe.removeAttribute('src');
+            document.removeEventListener('click', this.handleOutsideClick);
+        }
+    }
+    handleOutsideClick(event) {
+        //    if (this.open && !this.contains(event.target)) {
+        //        this.open = false;
+        //        document.removeEventListener('click', this.handleOutsideClick);
+        //    }
+    }
+    firstUpdated() {
+        const component = this;
+        component.targetElement = document.querySelector(component.target) ?? document;
+        // component.targetContainer = component.renderRoot.querySelector('iframe');
+        component.targetContainer = component.querySelector('iframe') ?? component.renderRoot.querySelector('iframe');
+        component.targetElement.addEventListener(component.eventName, (e) => {
+            component.showElement(e.target);
+        });
+        if (component.listen) {
+            component.targetElement.addEventListener('click', (e) => {
+                const source = e.composedPath().find(el => el instanceof HTMLAnchorElement);
+                if (source != null) {
+                    source.dispatchEvent(new CustomEvent(this.eventName, { bubbles: true, composed: true }));
+                    e.preventDefault();
+                }
+            });
+        }
+    }
+    /* @description Sets the popup iframe.src to the el.src. */
+    showElement(el) {
+        // Handle Youtube watch vs embed
+        this.src = el.href.replace('youtube.com/watch', 'youtube.com/embed');
+        const iframe = this.querySelector('iframe') ?? this.renderRoot.querySelector('iframe');
+        if (iframe != null) {
+            iframe.src = this.src;
+            this.show();
+        }
+    }
+    render() {
+        return html `
+        <slot name="button" @click="${this.toggle}"></slot>
+        <slot name="content" @click="${this.hide}" style="display:${this.open ? 'flex' : 'none'}">
+            <link href="scripts/qbo4.css" rel="stylesheet">
+            <div class="modal" tabindex="-1" role="dialog" style="display:block">
+                <div class="modal-dialog modal-lg" role="document" style="width:960px; height:600px">
+                    <div class="modal-content">
+                        <div class="modal-body" style="height:500px">
+                            <iframe src="${this.src}" title="${this.title}" frameborder="0" width="100%" height="100%" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "src", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "title", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "clickSelector", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "eventName", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboPopupListener.prototype, "listen", void 0);
+QboPopupListener = __decorate([
+    customElement('qbo-popup-listener')
+], QboPopupListener);
+export { QboPopupListener };

package/src/qbo/qbo-popup-listener.ts

@@ -0,0 +1,129 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+  * Listens for a popup event, and renders popup with the content.
+  */
+@customElement('qbo-popup-listener')
+export class QboPopupListener extends LitElement {
+    @property({ type: Boolean })
+    open = false;
+
+    @property({ type: Boolean })
+    loading = false;
+
+    @property({ type: Boolean })
+    renderInHost = false;
+
+    @property({ type: String })
+    src;
+
+    @property({ type: String })
+    title = "Popup";
+
+    @property()
+    clickSelector;
+
+    @property()
+    eventName = 'qbo-popup';
+
+    /* @description Css selector for the target element to listen to. */
+    @property()
+    target;
+
+    /* If true, call target.addEventListener to listen for any click events. */
+    @property({ type: Boolean })
+    listen = true;
+
+    targetElement: any;
+    targetContainer: HTMLIFrameElement | null | undefined;
+
+    async connectedCallback() {
+        super.connectedCallback();
+        this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    }
+
+    toggle() {
+        this.open = !this.open;
+        if (this.open)
+            document.addEventListener('click', this.handleOutsideClick);
+        else
+            document.removeEventListener('click', this.handleOutsideClick);
+    }
+
+    show() {
+        this.open = true;
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+
+    hide(event) {
+        if (event.target.closest('[data-dismiss="modal"]')) {
+            this.open = false;
+            this.src = null;
+            const iframe = this.querySelector('iframe') ?? this.renderRoot.querySelector('iframe');
+            if (iframe != null)
+                iframe.removeAttribute('src');
+            document.removeEventListener('click', this.handleOutsideClick);
+        }
+    }
+
+    handleOutsideClick(event) {
+        //    if (this.open && !this.contains(event.target)) {
+        //        this.open = false;
+        //        document.removeEventListener('click', this.handleOutsideClick);
+        //    }
+    }
+
+    firstUpdated() {
+        const component = this;
+        component.targetElement = document.querySelector(component.target) ?? document;
+        // component.targetContainer = component.renderRoot.querySelector('iframe');
+        component.targetContainer = component.querySelector('iframe') ?? component.renderRoot.querySelector('iframe');
+        component.targetElement.addEventListener(component.eventName, (e) => {
+            component.showElement(e.target);
+        });
+
+        if (component.listen) {
+            component.targetElement.addEventListener('click', (e) => {
+                const source: HTMLAnchorElement | undefined = e.composedPath().find(el => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
+                if (source != null) {
+                    source.dispatchEvent(new CustomEvent(this.eventName, { bubbles: true, composed: true }));
+                    e.preventDefault();
+                }
+            });
+        }
+    }
+
+    /* @description Sets the popup iframe.src to the el.src. */
+    showElement(el) {
+        // Handle Youtube watch vs embed
+        this.src = el.href.replace('youtube.com/watch', 'youtube.com/embed');
+        const iframe = this.querySelector('iframe') ?? this.renderRoot.querySelector('iframe');
+        if (iframe != null) {
+            iframe.src = this.src;
+            this.show();
+        }
+    }
+
+
+    render() {
+        return html`
+        <slot name="button" @click="${this.toggle}"></slot>
+        <slot name="content" @click="${this.hide}" style="display:${this.open ? 'flex' : 'none'}">
+            <link href="scripts/qbo4.css" rel="stylesheet">
+            <div class="modal" tabindex="-1" role="dialog" style="display:block">
+                <div class="modal-dialog modal-lg" role="document" style="width:960px; height:600px">
+                    <div class="modal-content">
+                        <div class="modal-body" style="height:500px">
+                            <iframe src="${this.src}" title="${this.title}" frameborder="0" width="100%" height="100%" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </slot>
+    `;
+    }
+}