@quandis/qbo4.ui 4.0.1-CI-20241108-002603 → 4.0.1-CI-20241108-204652

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20241108-002603",
+  "version": "4.0.1-CI-20241108-204652",
   "workspaces": [
     "code"
   ],

package/scss/qbo.scss

@@ -12,6 +12,7 @@
     --qbo-margin-vertical: 0.5rem;
     --qbo-focus-border-color: #80bdff;
     --qbo-focus-box-shadow: rgba(0, 123, 255, 0.25);
+
     --qbo-button-bg: #007bff;
     --qbo-button-border: #007bff;
     --qbo-button-bg-hover: #0056b3;
@@ -19,6 +20,7 @@
     --qbo-button-color: #ffffff;
     --qbo-button-padding: var(--qbo-padding); //0.375rem 0.75rem;
     --qbo-button-border-radius: var(--qbo-border-radius);
+
     --qbo-nav-color: #333;
     --qbo-nav-background-color: #999;
     --qbo-nav-background-hover: #81181d;
@@ -65,14 +67,6 @@
     --qbo-dark-border: #343a40;
     --qbo-dark-hover-bg: #23272b;
     --qbo-dark-hover-border: #1d2124;
-    /* Button */
-    --qbo-button-bg: #007bff;
-    --qbo-button-color: #ffffff;
-    --qbo-button-border: #007bff;
-    --qbo-button-bg-hover: #0056b3;
-    --qbo-button-border-hover: #004085;
-    --qbo-button-padding: var(--qbo-padding); //0.375rem 0.75rem;
-    --qbo-button-border-radius: var(--qbo-border-radius);
 }
 
 .qbo-theme-dark {
@@ -99,91 +93,23 @@
 }
 
 /* Default column styling */
-.qbo-col {
+.qbo-card {
+    @extend .qbo-col;
     border: 1px solid var(--qbo-border-color);
-    border-radius: .5em;
+    border-radius: var(--qbo-border-radius);
     box-shadow: 2px 2px 3px var(--qbo-border-color);
-    box-sizing: border-box;
-    flex: 1 0 0;
-    min-width: 15rem;
-    max-width: 100%;
     padding: .5em;
+    overflow: auto;
 }
 
-.qbo-col-left {
+.qbo-card-left {
     margin-left: .5em;
 }
 
-.qbo-col-right {
+.qbo-card-right {
     margin-right: .5em;
 }
 
-.qbo-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
-}
-
-.qbo-col-1 {
-    flex: 0 0 calc(8.33% - (var(--qbo-margin) / 2));
-    max-width: calc(8.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-2 {
-    flex: 0 0 calc(16.66% - (var(--qbo-margin) / 2));
-    max-width: calc(16.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-3 {
-    flex: 0 0 calc(25% - (var(--qbo-margin) / 2));
-    max-width: calc(25% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-4 {
-    flex: 0 0 calc(33.33% - (var(--qbo-margin) / 2));
-    max-width: calc(33.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-5 {
-    flex: 0 0 calc(41.66% - (var(--qbo-margin) / 2));
-    max-width: calc(41.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-6 {
-    flex: 0 0 calc(50% - (var(--qbo-margin) / 2));
-    max-width: calc(50% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-7 {
-    flex: 0 0 calc(58.33% - (var(--qbo-margin) / 2));
-    max-width: calc(58.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-8 {
-    flex: 0 0 calc(66.66% - (var(--qbo-margin) / 2));
-    max-width: calc(66.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-9 {
-    flex: 0 0 calc(75% - (var(--qbo-margin) / 2));
-    max-width: calc(75% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-10 {
-    flex: 0 0 calc(83.33% - (var(--qbo-margin) / 2));
-    max-width: calc(83.33% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-11 {
-    flex: 0 0 calc(91.66% - (var(--qbo-margin) / 2));
-    max-width: calc(91.66% - (var(--qbo-margin) / 2));
-}
-
-.qbo-col-12 {
-    flex: 0 0 calc(100% - (var(--qbo-margin) / 2));
-    max-width: calc(100% - (var(--qbo-margin) / 2));
-}
-
 svg {
     height: 1rem;
     width: 1rem;
@@ -198,7 +124,6 @@ svg {
 /* Default column styling */
 .qbo-col {
     flex: 1 0 0;
-    xborder: 1px solid var(--qbo-border-color);
     max-width: 100%;
     box-sizing: border-box;
 }
@@ -333,7 +258,6 @@ svg {
 .qbo-form input[disabled],
 .qbo-form textarea[disabled],
 .qbo-form select[disabled] {
-    xbackground-color: color-mix(in oklab, 15%, --qbo-color);
     color: color-mix( in oklab, var(--qbo-color) 50%, var(--qbo-background-color) );
     cursor: not-allowed;
     opacity: 1;
@@ -352,7 +276,7 @@ svg {
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     text-align: center;
-    text-wrap-mode: nowrap;
+    white-space: nowrap;
     border-right: none;
     border-radius: 0.25rem 0 0 0.25rem;
 }
@@ -365,7 +289,6 @@ svg {
     font-size: 1rem;
     background-clip: padding-box;
     margin: 0;
-    xborder-radius: 0 0;
 }
 
 .qbo-form .form-group {
@@ -485,7 +408,7 @@ button:disabled,
 /* Default column styling */
 .qbo-col {
     flex: 1 0 0;
-    xborder: 1px solid var(--qbo-border-color);
+    min-width: calc(8.33% - (var(--qbo-margin) / 2));
     max-width: 100%;
     box-sizing: border-box;
 }
@@ -658,7 +581,6 @@ menu.qbo-toolbar {
         background-color: var(--qbo-border-color);
         text-decoration: none;
         line-height: 1.5;
-        xborder-radius: 0; //var(--qbo-border-radius);
         transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
     }
 }

package/src/qbo/qbo-api.js

@@ -8,9 +8,9 @@ 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 { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { registerRestApi } from './RestApiService.js';
-export class QboApiElement extends LitElement {
+let QboApiElement = class QboApiElement extends LitElement {
     constructor() {
         super(...arguments);
         this.name = null;
@@ -46,7 +46,7 @@ export class QboApiElement extends LitElement {
         // Render nothing, as this component is for configuration purposes only
         return html ``;
     }
-}
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -59,5 +59,7 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], QboApiElement.prototype, "method", void 0);
-if (!customElements.get('qbo-api'))
-    customElements.define('qbo-api', QboApiElement);
+QboApiElement = __decorate([
+    customElement('qbo-api')
+], QboApiElement);
+export { QboApiElement };

package/src/qbo/qbo-api.ts

@@ -2,6 +2,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import { registerRestApi } from './RestApiService.js';
 
+@customElement('qbo-api')
 export class QboApiElement extends LitElement {
     @property({ type: String })
     name: string | null = null;
@@ -51,5 +52,3 @@ export class QboApiElement extends LitElement {
     }
 }
 
-if (!customElements.get('qbo-api'))
-    customElements.define('qbo-api', QboApiElement)

package/src/qbo/qbo-card.js

@@ -8,8 +8,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { LitElement, css, html } from "lit";
-import { property } from "lit/decorators.js";
-export class QboCard extends LitElement {
+import { customElement, property } from "lit/decorators.js";
+let QboCard = class QboCard extends LitElement {
     constructor() {
         super(...arguments);
         this.display = 'normal';
@@ -95,7 +95,7 @@ export class QboCard extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
-}
+};
 __decorate([
     property({ reflect: true }),
     __metadata("design:type", String)
@@ -112,5 +112,7 @@ __decorate([
     property(),
     __metadata("design:type", Object)
 ], QboCard.prototype, "columns", void 0);
-if (!customElements.get('qbo-card'))
-    customElements.define('qbo-card', QboCard);
+QboCard = __decorate([
+    customElement('qbo-card')
+], QboCard);
+export { QboCard };

package/src/qbo/qbo-card.ts

@@ -4,6 +4,7 @@ import { QboIcon } from "./qbo-icon.js";
 
 export type DisplayState = 'normal' | 'minimize' | 'maximize';
 
+@customElement('qbo-card')
 export class QboCard extends LitElement {
 
     static styles = [
@@ -111,7 +112,4 @@ export class QboCard extends LitElement {
     render() {
         return html`<slot></slot>`;
     }
-}
-
-if (!customElements.get('qbo-card'))
-    customElements.define('qbo-card', QboCard)
+}

package/src/qbo/qbo-contextmenu.js

@@ -8,9 +8,9 @@ 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 { property, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { qboui } from './styles.js';
-export class ContextMenu extends LitElement {
+let ContextMenu = class ContextMenu extends LitElement {
     constructor() {
         super(...arguments);
         this._open = false;
@@ -85,7 +85,7 @@ export class ContextMenu extends LitElement {
     render() {
         return html `${this._open ? html `<slot></slot>` : ''}`;
     }
-}
+};
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -94,5 +94,7 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], ContextMenu.prototype, "target", void 0);
-if (!customElements.get('qbo-contextmenu'))
-    customElements.define('qbo-contextmenu', ContextMenu);
+ContextMenu = __decorate([
+    customElement('qbo-contextmenu')
+], ContextMenu);
+export { ContextMenu };

package/src/qbo/qbo-contextmenu.ts

@@ -2,6 +2,7 @@
 import { customElement, property, state } from 'lit/decorators.js';
 import { qboui } from './styles.js';
 
+@customElement('qbo-contextmenu')
 export class ContextMenu extends LitElement {
     static styles = [
         qboui
@@ -97,6 +98,3 @@ export class ContextMenu extends LitElement {
         return html`${this._open ? html`<slot></slot>` : ''}`;
     }
 }
-
-if (!customElements.get('qbo-contextmenu'))
-    customElements.define('qbo-contextmenu', ContextMenu)

package/src/qbo/qbo-datalist.js

@@ -8,10 +8,10 @@ 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 { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { getArray } from './qbo-json.js';
 import { QboFetch } from './qbo-fetch.js';
-export class QboDataList extends QboFetch {
+let QboDataList = class QboDataList extends QboFetch {
     constructor() {
         super(...arguments);
         this.listId = null;
@@ -91,7 +91,7 @@ export class QboDataList extends QboFetch {
                 ${this.options.map(option => html `<option value="${option[this.text]}" data-value="${option[this.value]}"/>`)}
             </datalist>`;
     }
-}
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -120,5 +120,7 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboDataList.prototype, "fetchOnLoad", void 0);
-if (!customElements.get('qbo-datalist'))
-    customElements.define('qbo-datalist', QboDataList);
+QboDataList = __decorate([
+    customElement('qbo-datalist')
+], QboDataList);
+export { QboDataList };

package/src/qbo/qbo-datalist.ts

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { getArray } from './qbo-json.js';
 import { QboFetch } from './qbo-fetch.js';
 
+@customElement('qbo-datalist')
 export class QboDataList extends QboFetch {
 
     @property({ type: String })
@@ -100,7 +101,4 @@ export class QboDataList extends QboFetch {
                 ${this.options.map(option => html`<option value="${option[this.text!]}" data-value="${option[this.value!]}"/>`)}
             </datalist>`;
     }
-}
-
-if (!customElements.get('qbo-datalist'))
-    customElements.define('qbo-datalist', QboDataList)
+}

package/src/qbo/qbo-docviewer.js

@@ -8,7 +8,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, css } from 'lit';
-import { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { QboFetch } from './qbo-fetch.js';
 /**
   * Renders a <select> element with options populated from a JSON array.
@@ -16,7 +16,7 @@ import { QboFetch } from './qbo-fetch.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
-export class QboDocViewer extends QboFetch {
+let QboDocViewer = class QboDocViewer extends QboFetch {
     constructor() {
         super(...arguments);
         this.open = false;
@@ -36,7 +36,7 @@ export class QboDocViewer extends QboFetch {
     render() {
         return html `<iframe src='sample.pdf' width='100%' height='800px' frameborder='0'></iframe>`;
     }
-}
+};
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
@@ -49,5 +49,7 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboDocViewer.prototype, "renderInHost", void 0);
-if (!customElements.get('qbo-docviewer'))
-    customElements.define('qbo-docviewer', QboDocViewer);
+QboDocViewer = __decorate([
+    customElement('qbo-docviewer')
+], QboDocViewer);
+export { QboDocViewer };

package/src/qbo/qbo-docviewer.ts

@@ -9,6 +9,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
   * @remarks
   * This element is a thin wrapper around {@link QboFetch} that renders a <select> element with options populated from a JSON array.
   */
+@customElement('qbo-docviewer')
 export class QboDocViewer extends QboFetch {
     @property({ type: Boolean })
     open = false;
@@ -36,6 +37,3 @@ export class QboDocViewer extends QboFetch {
         return html`<iframe src='sample.pdf' width='100%' height='800px' frameborder='0'></iframe>`;
     }
 }
-
-if (!customElements.get('qbo-docviewer'))
-    customElements.define('qbo-docviewer', QboDocViewer)

package/src/qbo/qbo-fetch.js

@@ -59,10 +59,6 @@ export const QboFetchMixin = (superClass) => {
                     console.error('Error parsing payload JSON:', error);
                 }
             }
-            else {
-                if (Object.keys(this.dataset).length > 0)
-                    payload = { ...this.dataset };
-            }
             return payload;
         }
         /* @description Fetch data from an api, and set @see {@link html} or @see {@link jsonData} with the result. */

package/src/qbo/qbo-fetch.ts

@@ -88,9 +88,6 @@ export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T)
                 } catch (error) {
                     console.error('Error parsing payload JSON:', error);
                 }
-            } else {
-                if (Object.keys(this.dataset).length > 0)
-                    payload = { ...this.dataset } as Record<string, string>;
             }
             return payload;
         }

package/src/qbo/qbo-form-edit.js

@@ -8,7 +8,7 @@ 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 { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { elementDateTime } from './Program.js';
 const formEditMap = new Map();
 formEditMap.set('defaultLayout', (component) => {
@@ -44,7 +44,7 @@ formEditMap.set('updatedLayout', (component) => {
         <span>${component.UpdatedPerson}</span>
     </div>`;
 });
-export class QboFormEdit extends LitElement {
+let QboFormEdit = class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
         this.aDropdownClass = 'dropdown-item qbo-pointer';
@@ -111,7 +111,7 @@ export class QboFormEdit extends LitElement {
             </div>
         </slot>`;
     }
-}
+};
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -200,5 +200,7 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "renderInHost", void 0);
-if (!customElements.get('qbo-form-edit'))
-    customElements.define('qbo-form-edit', QboFormEdit);
+QboFormEdit = __decorate([
+    customElement('qbo-form-edit')
+], QboFormEdit);
+export { QboFormEdit };

package/src/qbo/qbo-form-edit.ts

@@ -38,6 +38,7 @@ formEditMap.set('updatedLayout', (component: any) => {
     </div>`;
 });
 
+@customElement('qbo-form-edit')
 export class QboFormEdit extends LitElement {
 
     @property({ type: String })
@@ -149,6 +150,3 @@ export class QboFormEdit extends LitElement {
         </slot>`;
     }
 }
-
-if (!customElements.get('qbo-form-edit'))
-    customElements.define('qbo-form-edit', QboFormEdit)

package/src/qbo/qbo-form-element.js

@@ -7,10 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+var QboFormElement_1;
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { substitute } from './qbo-json.js';
-export class QboFormElement extends LitElement {
+let QboFormElement = class QboFormElement extends LitElement {
+    static { QboFormElement_1 = this; }
     static { this.formAssociated = true; }
     constructor() {
         super();
@@ -74,7 +76,7 @@ export class QboFormElement extends LitElement {
             && (e instanceof HTMLInputElement
                 || e instanceof HTMLSelectElement
                 || e instanceof HTMLTextAreaElement
-                || e instanceof QboFormElement) && e.name);
+                || e instanceof QboFormElement_1) && e.name);
         inputs.forEach(element => {
             const input = element;
             if (input instanceof HTMLSelectElement) {
@@ -83,7 +85,7 @@ export class QboFormElement extends LitElement {
             else if (input instanceof HTMLTextAreaElement) {
                 this.value.set(`${this.name}${input.name}`, input.value);
             }
-            else if (input instanceof QboFormElement) {
+            else if (input instanceof QboFormElement_1) {
                 for (let [key, value] of input.value.entries()) {
                     this.value.set(`${this.name}${key}`, value);
                 }
@@ -102,7 +104,7 @@ export class QboFormElement extends LitElement {
         this.internals.setFormValue(this.value);
         console.trace(`Set ${this.name} values to `, this.value);
     }
-}
+};
 __decorate([
     property({ type: FormData }),
     __metadata("design:type", FormData)
@@ -119,5 +121,8 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], QboFormElement.prototype, "data", void 0);
-if (!customElements.get('qbo-form-element'))
-    customElements.define('qbo-form-element', QboFormElement);
+QboFormElement = QboFormElement_1 = __decorate([
+    customElement('qbo-form-element'),
+    __metadata("design:paramtypes", [])
+], QboFormElement);
+export { QboFormElement };

package/src/qbo/qbo-form-element.ts

@@ -3,6 +3,7 @@ import { html, css, LitElement, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { substitute } from './qbo-json.js';
 
+@customElement('qbo-form-element')
 export class QboFormElement extends LitElement {
     static formAssociated = true;
 
@@ -117,5 +118,3 @@ export class QboFormElement extends LitElement {
     }
 }
 
-if (!customElements.get('qbo-form-element'))
-    customElements.define('qbo-form-element', QboFormElement)

package/src/qbo/qbo-icon.js

@@ -7,8 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+var QboIcon_1;
 import { LitElement, html } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 const iconMap = new Map();
 // qbo modules
@@ -47,7 +48,7 @@ iconMap.set('video', 'camera-video');
 iconMap.set('headset', 'headphones');
 iconMap.set('warning', 'exclamation-triangle');
 // Renders an SVG icon based on the type attribute.
-export class QboIcon extends LitElement {
+let QboIcon = class QboIcon extends LitElement {
     constructor() {
         super(...arguments);
         this.type = 'icon';
@@ -62,6 +63,7 @@ export class QboIcon extends LitElement {
         this.selected = false;
         this.allIcons = undefined;
     }
+    static { QboIcon_1 = this; }
     static { this.map = iconMap; }
     // = '/ui/images/icons.svg';
     // Getter to retrieve the `qbo4-basepath` meta tag value
@@ -99,7 +101,7 @@ export class QboIcon extends LitElement {
             return this.allIcons;
         try {
             // Adjust this path to point to the correct location of bootstrap-icons.svg
-            const response = await fetch(this.sprite ?? QboIcon.spriteUrl);
+            const response = await fetch(this.sprite ?? QboIcon_1.spriteUrl);
             const svgText = await response.text();
             // Parse the SVG file
             const parser = new DOMParser();
@@ -156,7 +158,7 @@ ${Array.from(iconMap.keys()).map(k => html `<div class="col-3">
             component.icon = 'warning';
         }
         const id = iconMap.has(component.icon) ? iconMap.get(component.icon) : component.icon;
-        return html `<svg width="${component.width}" height="${component.width}" fill="${component.fill}" ?class=${component.getAttribute('class')}><use href="${component.sprite ?? QboIcon.spriteUrl}#${id}"></use></svg>`;
+        return html `<svg width="${component.width}" height="${component.width}" fill="${component.fill}" ?class=${component.getAttribute('class')}><use href="${component.sprite ?? QboIcon_1.spriteUrl}#${id}"></use></svg>`;
     }
     //renderButton(component: any) {
     //    return html`<button type="button" ?disabled=${component.disabled}>${component.renderIcon(component)}</button>`;
@@ -171,7 +173,7 @@ ${Array.from(iconMap.keys()).map(k => html `<div class="col-3">
             default: return this.renderIcon(this);
         }
     }
-}
+};
 __decorate([
     property(),
     __metadata("design:type", String)
@@ -216,5 +218,7 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], QboIcon.prototype, "selected", void 0);
-if (!customElements.get('qbo-icon'))
-    customElements.define('qbo-icon', QboIcon);
+QboIcon = QboIcon_1 = __decorate([
+    customElement('qbo-icon')
+], QboIcon);
+export { QboIcon };

package/src/qbo/qbo-icon.ts

@@ -44,6 +44,7 @@ iconMap.set('warning', 'exclamation-triangle');
 
 
 // Renders an SVG icon based on the type attribute.
+@customElement('qbo-icon')
 export class QboIcon extends LitElement {
 
     static map: Map<string, string> = iconMap;
@@ -207,6 +208,3 @@ ${Array.from(iconMap.keys()).map(k => html`<div class="col-3">
     }
 
 }
-
-if (!customElements.get('qbo-icon'))
-    customElements.define('qbo-icon', QboIcon)