@quandis/qbo4.ui 4.0.1-CI-20240403-131518 → 4.0.1-CI-20240405-163539

package/src/qbo/Program.js

@@ -1,9 +1,14 @@
 import 'reflect-metadata';
+export { services } from '@quandis/qbo4.logging';
+export * from './IApiService.js';
+export * from './IValidate.js';
+export * from './Validators.js';
+export * from './RestApiService.js';
 export * from './qbo-badge.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
+export * from './qbo-form-element.js';
 export * from './qbo-json.js';
-export * from './qbo-logging.js';
 export * from './qbo-mainmenu.js';
 export * from './qbo-markdown.js';
 export * from './qbo-microphone.js';
@@ -14,5 +19,4 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-validators.js';
 export * from './qbo-api.js';

package/src/qbo/Program.ts

@@ -1,10 +1,15 @@
 import 'reflect-metadata';
 
+export { services } from '@quandis/qbo4.logging';
+export * from './IApiService.js';
+export * from './IValidate.js';
+export * from './Validators.js';
+export * from './RestApiService.js';
 export * from './qbo-badge.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
+export * from './qbo-form-element.js';
 export * from './qbo-json.js';
-export * from './qbo-logging.js';
 export * from './qbo-mainmenu.js';
 export * from './qbo-markdown.js'
 export * from './qbo-microphone.js'
@@ -15,5 +20,4 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js'
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-validators.js';
 export * from './qbo-api.js';

package/src/qbo/RestApiService.d.ts

@@ -0,0 +1,9 @@
+import { IApiService } from "./IApiService.js";
+export declare class RestApiService implements IApiService {
+    private headers;
+    private apiEndpoint;
+    private method;
+    constructor(apiEndpoint: string, headers?: HeadersInit, method?: string | null);
+    fetch(relativePath: string | null, payload?: Record<string, string> | null): Promise<any>;
+}
+export declare function registerRestApi(name: string, apiEndpoint: string, headers?: HeadersInit, method?: string | null): void;

package/src/qbo/RestApiService.js

@@ -0,0 +1,32 @@
+import { services } from "@quandis/qbo4.logging";
+import { substitute } from "./qbo-json.js";
+export class RestApiService {
+    constructor(apiEndpoint, headers = { 'Content-Type': 'application/json' }, method = null) {
+        this.apiEndpoint = apiEndpoint;
+        this.headers = headers;
+        this.method = method;
+    }
+    async fetch(relativePath, payload = null) {
+        const endpoint = substitute(new URL(relativePath ?? '', this.apiEndpoint).href, payload);
+        const method = this.method ?? (payload !== null ? 'POST' : 'GET');
+        const headers = new Headers(this.headers || {});
+        if (payload !== null && !headers.has('Content-Type')) {
+            headers.append('Content-Type', 'application/json');
+        }
+        const response = await fetch(endpoint, {
+            method: method,
+            headers: headers,
+            body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
+        });
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+        return response.json();
+    }
+}
+// Register a RestApiService with the default name 'default' and the base URL of the current page
+services.container.registerInstance('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));
+// Sugar for registering a RestApiService with registerRestApi('myName', 'https://my.api.com')
+export function registerRestApi(name, apiEndpoint, headers = { 'Content-Type': 'application/json' }, method) {
+    services.container.registerInstance(name, new RestApiService(apiEndpoint, headers, method));
+}

package/src/qbo/RestApiService.ts

@@ -0,0 +1,45 @@
+import { services } from "@quandis/qbo4.logging";
+import { IApiService } from "./IApiService.js";
+import { substitute } from "./qbo-json.js";
+
+export class RestApiService implements IApiService {
+
+    private headers: HeadersInit;
+    private apiEndpoint: string;
+    private method: string | null;
+
+    constructor(apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method: string | null = null) {
+        this.apiEndpoint = apiEndpoint;
+        this.headers = headers;
+        this.method = method;
+    }
+
+    async fetch(relativePath: string | null, payload: Record<string, string> | null = null): Promise<any> {
+        const endpoint = substitute(new URL(relativePath ?? '', this.apiEndpoint).href, payload);
+        const method = this.method ?? (payload !== null ? 'POST' : 'GET');
+        const headers = new Headers(this.headers || {});
+        if (payload !== null && !headers.has('Content-Type')) {
+            headers.append('Content-Type', 'application/json');
+        }
+
+        const response = await fetch(endpoint, {
+            method: method,
+            headers: headers,
+            body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
+        });
+
+        if (!response.ok) {
+            throw new Error(`API request failed with status ${response.status}`);
+        }
+
+        return response.json();
+    }
+}
+
+// Register a RestApiService with the default name 'default' and the base URL of the current page
+services.container.registerInstance<IApiService>('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));
+
+// Sugar for registering a RestApiService with registerRestApi('myName', 'https://my.api.com')
+export function registerRestApi(name: string, apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method?: string | null) {
+    services.container.registerInstance<IApiService>(name, new RestApiService(apiEndpoint, headers, method));
+}

package/src/qbo/Validators.d.ts

@@ -0,0 +1,22 @@
+import { IValidate } from './IValidate.js';
+/**
+ * A validator for a US zip code.
+ */
+export declare class ZipCodeValidator implements IValidate {
+    validate(input: HTMLElement): Promise<boolean>;
+    message: string;
+    selector: string;
+}
+/**
+ * A validator for an email address.
+ */
+export declare class EmailValidator implements IValidate {
+    validate(input: HTMLElement): Promise<boolean>;
+    message: string;
+    selector: string;
+}
+export declare class ExistsValidator implements IValidate {
+    validate(input: HTMLElement): Promise<boolean>;
+    message: string;
+    selector: string;
+}

package/src/qbo/{qbo-validators.js → Validators.js}

@@ -4,13 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { container, injectable } from 'tsyringe';
-import { RestApiService } from './qbo-api.js';
+import { injectable } from 'tsyringe';
+import { services } from '@quandis/qbo4.logging';
 import { getArray } from './qbo-json.js';
-/**
- *  Define a token for the validators
- */
-export const ValidateToken = 'ValidateToken';
+import { RestApiService } from './RestApiService.js';
+import { ValidateToken } from './IValidate.js';
 /**
  * A validator for a US zip code.
  */
@@ -26,7 +24,7 @@ ZipCodeValidator = __decorate([
     injectable()
 ], ZipCodeValidator);
 export { ZipCodeValidator };
-container.register(ValidateToken, { useClass: ZipCodeValidator });
+services.container.register(ValidateToken, { useClass: ZipCodeValidator });
 /**
  * A validator for an email address.
  */
@@ -42,7 +40,7 @@ EmailValidator = __decorate([
     injectable()
 ], EmailValidator);
 export { EmailValidator };
-container.register(ValidateToken, { useClass: EmailValidator });
+services.container.register(ValidateToken, { useClass: EmailValidator });
 let ExistsValidator = class ExistsValidator {
     constructor() {
         this.message = 'This value does not appear to exist.';
@@ -53,7 +51,7 @@ let ExistsValidator = class ExistsValidator {
         if (!url)
             return false;
         var path = input.getAttribute('data-exists-path');
-        const service = container.isRegistered(url) ? container.resolve(url) : new RestApiService(url);
+        const service = services.container.isRegistered(url) ? services.container.resolve(url) : new RestApiService(url);
         if (input instanceof HTMLInputElement || input instanceof HTMLSelectElement || input instanceof HTMLTextAreaElement) {
             const response = await service.fetch(path, { value: input.value });
             const json = getArray(response);
@@ -69,4 +67,4 @@ ExistsValidator = __decorate([
     injectable()
 ], ExistsValidator);
 export { ExistsValidator };
-container.register(ValidateToken, { useClass: ExistsValidator });
+services.container.register(ValidateToken, { useClass: ExistsValidator });

package/src/qbo/{qbo-validators.ts → Validators.ts}

@@ -1,24 +1,11 @@
-import { container, injectable, InjectionToken } from 'tsyringe';
-import { IApiService, RestApiService } from './qbo-api.js';
+import { injectable } from 'tsyringe';
+import { services } from '@quandis/qbo4.logging';
 import { getArray } from './qbo-json.js';
-
-/**
-  * Defines a contract for form field validation.
-  * @remarks
-  * External classes may define custom validators by implementing this interface.
-  * Register the custom validator with the tsyringe DI container using {@link ValidateToken}.
-  */
-export interface IValidate {
-    validate(input: HTMLElement): Promise<boolean>;
-    message: string;
-    selector: string;
-}
+import { IApiService } from './IApiService.js';
+import { RestApiService } from './RestApiService.js';
+import { IValidate, ValidateToken } from './IValidate.js';
 
 
-/**
- *  Define a token for the validators
- */
-export const ValidateToken: InjectionToken<IValidate> = 'ValidateToken';
 
 /**
  * A validator for a US zip code.
@@ -29,7 +16,7 @@ export class ZipCodeValidator implements IValidate {
     message = 'Zip code is invalid';
     selector = '.zipcode';
 }
-container.register(ValidateToken, { useClass: ZipCodeValidator });
+services.container.register(ValidateToken, { useClass: ZipCodeValidator });
 
 /**
  * A validator for an email address.
@@ -40,7 +27,7 @@ export class EmailValidator implements IValidate {
     message = 'Email is invalid';
     selector = '.email';
 }
-container.register(ValidateToken, { useClass: EmailValidator });
+services.container.register(ValidateToken, { useClass: EmailValidator });
 
 @injectable()
 export class ExistsValidator implements IValidate {
@@ -48,7 +35,7 @@ export class ExistsValidator implements IValidate {
         var url = input.getAttribute('data-exists');
         if (!url) return false;
         var path = input.getAttribute('data-exists-path');
-        const service: IApiService = container.isRegistered(url) ? container.resolve<IApiService>(url) : new RestApiService(url);
+        const service: IApiService = services.container.isRegistered(url) ? services.container.resolve<IApiService>(url) : new RestApiService(url);
 
         if (input instanceof HTMLInputElement || input instanceof HTMLSelectElement || input instanceof HTMLTextAreaElement) {
             const response = await service.fetch(path, { value: input.value });
@@ -62,5 +49,6 @@ export class ExistsValidator implements IValidate {
     message = 'This value does not appear to exist.';
     selector = '[data-exists]';
 }
-container.register(ValidateToken, { useClass: ExistsValidator });
+
+services.container.register(ValidateToken, { useClass: ExistsValidator });
 

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

@@ -1,20 +1,4 @@
 import { LitElement } from 'lit';
-/**
-  * Defines a contract for form field validation.
-  * @remarks
-  * External classes may define custom validators by implementing this interface.
-  * Register the custom validator with the tsyringe DI container using {@link ValidateToken}.
-  */
-export interface IApiService {
-    fetch(relativePath: string | null, payload: Record<string, string> | null): Promise<any>;
-}
-export declare class RestApiService implements IApiService {
-    private headers;
-    private apiEndpoint;
-    private method;
-    constructor(apiEndpoint: string, headers?: HeadersInit, method?: string | null);
-    fetch(relativePath: string | null, payload?: Record<string, string> | null): Promise<any>;
-}
 export declare class ApiServiceComponent extends LitElement {
     name: string | null;
     apiEndpoint: string | null;
@@ -22,6 +6,3 @@ export declare class ApiServiceComponent extends LitElement {
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }
-declare function registerRestApi(name: string, apiEndpoint: string, headers?: HeadersInit, method?: string | null): void;
-declare function getApiService(name: string): IApiService;
-export { registerRestApi, getApiService };

package/src/qbo/qbo-api.js

@@ -7,34 +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);
 };
-import { html, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { container } from 'tsyringe';
-import { substitute } from './qbo-json.js';
-export class RestApiService {
-    constructor(apiEndpoint, headers = { 'Content-Type': 'application/json' }, method = null) {
-        this.apiEndpoint = apiEndpoint;
-        this.headers = headers;
-        this.method = method;
-    }
-    async fetch(relativePath, payload = null) {
-        const endpoint = substitute(new URL(relativePath ?? '', this.apiEndpoint).href, payload);
-        const method = this.method ?? (payload !== null ? 'POST' : 'GET');
-        const headers = new Headers(this.headers || {});
-        if (payload !== null && !headers.has('Content-Type')) {
-            headers.append('Content-Type', 'application/json');
-        }
-        const response = await fetch(endpoint, {
-            method: method,
-            headers: headers,
-            body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
-        });
-        if (!response.ok) {
-            throw new Error(`API request failed with status ${response.status}`);
-        }
-        return response.json();
-    }
-}
+import { registerRestApi } from './RestApiService.js';
 let ApiServiceComponent = class ApiServiceComponent extends LitElement {
     constructor() {
         super(...arguments);
@@ -61,7 +36,7 @@ let ApiServiceComponent = class ApiServiceComponent extends LitElement {
             headers['Content-Type'] = headers['ContentType'];
             delete headers['ContentType'];
         }
-        container.registerInstance(this.name, new RestApiService(this.apiEndpoint, headers, this.method));
+        // container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
         // Call the registerRestApi function with the extracted configuration
         registerRestApi(this.name, this.apiEndpoint, headers, this.method);
     }
@@ -86,11 +61,3 @@ ApiServiceComponent = __decorate([
     customElement('qbo-api')
 ], ApiServiceComponent);
 export { ApiServiceComponent };
-container.registerInstance('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));
-function registerRestApi(name, apiEndpoint, headers = { 'Content-Type': 'application/json' }, method) {
-    container.registerInstance(name, new RestApiService(apiEndpoint, headers, method));
-}
-function getApiService(name) {
-    return container.resolve(name);
-}
-export { registerRestApi, getApiService };

package/src/qbo/qbo-api.ts

@@ -1,50 +1,7 @@
-import { html, css, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { container, injectable, InjectionToken } from 'tsyringe';
-import {substitute} from './qbo-json.js';
-/**
-  * Defines a contract for form field validation.
-  * @remarks
-  * External classes may define custom validators by implementing this interface.
-  * Register the custom validator with the tsyringe DI container using {@link ValidateToken}.
-  */
-export interface IApiService {
-    fetch(relativePath: string | null, payload: Record<string, string> | null): Promise<any>;
-}
-
-export class RestApiService implements IApiService {
-
-    private headers: HeadersInit;
-    private apiEndpoint: string;
-    private method: string | null;
-
-    constructor(apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method: string | null = null) {
-        this.apiEndpoint = apiEndpoint;
-        this.headers = headers;
-        this.method = method;
-    }
-
-    async fetch(relativePath: string | null, payload: Record<string, string> | null = null): Promise<any> {
-        const endpoint = substitute(new URL(relativePath ?? '', this.apiEndpoint).href, payload);
-        const method = this.method ?? (payload !== null ? 'POST' : 'GET');
-        const headers = new Headers(this.headers || {});
-        if (payload !== null && !headers.has('Content-Type')) {
-            headers.append('Content-Type', 'application/json'); 
-        }
-
-        const response = await fetch(endpoint, {
-            method: method,
-            headers: headers,
-            body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
-        });
+import { registerRestApi } from './RestApiService.js';
 
-        if (!response.ok) {
-            throw new Error(`API request failed with status ${response.status}`);
-        }
-
-        return response.json();
-    }
-}
 
 
 @customElement('qbo-api')
@@ -81,7 +38,7 @@ export class ApiServiceComponent extends LitElement {
             delete headers['ContentType'];
         }
 
-        container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
+        // container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
 
         // Call the registerRestApi function with the extracted configuration
         registerRestApi(this.name!, this.apiEndpoint!, headers, this.method);
@@ -93,14 +50,3 @@ export class ApiServiceComponent extends LitElement {
     }
 }
 
-container.registerInstance<IApiService>('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));
-
-function registerRestApi(name: string, apiEndpoint: string, headers: HeadersInit = { 'Content-Type': 'application/json' }, method?: string | null) {
-    container.registerInstance<IApiService>(name, new RestApiService(apiEndpoint, headers, method));
-}
-
-function getApiService(name: string) {
-    return container.resolve<IApiService>(name);
-}
-
-export { registerRestApi, getApiService }

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

@@ -0,0 +1,20 @@
+import { ILoggerService } from '@quandis/qbo4.logging';
+import { LitElement, PropertyValues } from 'lit';
+export declare class QboFormElement extends LitElement {
+    static formAssociated: boolean;
+    value: FormData;
+    template: string;
+    name: string;
+    data: null;
+    private templateNode;
+    private internals;
+    logger: ILoggerService;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    render(): import("lit").TemplateResult<1>;
+    establishFormData(): void;
+    handleFormChange: (event: any) => void;
+    augment: (event: any) => void;
+}

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

@@ -0,0 +1,128 @@
+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 QboFormElement_1;
+import { ILoggerServiceToken, services } from '@quandis/qbo4.logging';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { substitute } from './qbo-json.js';
+let QboFormElement = class QboFormElement extends LitElement {
+    static { QboFormElement_1 = this; }
+    static { this.formAssociated = true; }
+    constructor() {
+        super();
+        this.value = new FormData();
+        this.template = '';
+        this.name = '';
+        this.data = null;
+        this.templateNode = null;
+        this.handleFormChange = (event) => {
+            const target = event.target;
+            if (target.matches('input, select, textarea') && target.name && !target.assignedSlot) {
+                // if the element is assigned to a slot, it's already visible to the parent. Ignore it.
+                this.value.set(`${this.name}${target.name}`, target.value);
+                this.logger.logTrace(`${this.name}${target.name} was set to ${target.value}`);
+            }
+            this.internals.setFormValue(this.value);
+            this.dispatchEvent(new CustomEvent('qbo-form-update', { bubbles: true, composed: true, detail: { formData: this.value } }));
+        };
+        this.augment = (event) => {
+            event.stopPropagation();
+            console.log(event);
+            if (event instanceof CustomEvent && event.detail.formData instanceof FormData) {
+                // To replace existing entries instead of appending
+                for (let [key, value] of event.detail.formData.entries()) {
+                    this.value.set(key, value);
+                    console.log(`Added ${key}=${value} to ${this.name}`);
+                }
+            }
+            this.internals.setFormValue(this.value);
+            this.dispatchEvent(new CustomEvent('qbo-form-update', { bubbles: true, composed: true, detail: { formData: this.value } }));
+        };
+        this.internals = this.attachInternals(); // Attach the form internals
+        this.logger = services.container.resolve(ILoggerServiceToken);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.templateNode = document.getElementById(this.template);
+        if (this.templateNode) {
+            this.appendChild(this.templateNode.content.cloneNode(true));
+            this.innerHTML = substitute(this.innerHTML, this.data);
+        }
+        this.shadowRoot?.addEventListener('change', this.handleFormChange);
+        this.shadowRoot?.addEventListener('qbo-form-update', this.augment);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.shadowRoot?.removeEventListener('change', this.handleFormChange);
+        this.shadowRoot?.removeEventListener('qbo-form-update', this.augment);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.establishFormData();
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    establishFormData() {
+        const elements = this.shadowRoot?.querySelectorAll('input, select, textarea');
+        const inputs = Array.from(elements).filter(e => !e.assignedSlot
+            && (e instanceof HTMLInputElement
+                || e instanceof HTMLSelectElement
+                || e instanceof HTMLTextAreaElement
+                || e instanceof QboFormElement_1) && e.name);
+        inputs.forEach(element => {
+            const input = element;
+            if (input instanceof HTMLSelectElement) {
+                this.value.set(`${this.name}${input.name}`, input.value);
+            }
+            else if (input instanceof HTMLTextAreaElement) {
+                this.value.set(`${this.name}${input.name}`, input.value);
+            }
+            else if (input instanceof QboFormElement_1) {
+                for (let [key, value] of input.value.entries()) {
+                    this.value.set(`${this.name}${key}`, value);
+                }
+            }
+            else if (input instanceof HTMLInputElement) {
+                if (input.type === 'checkbox' || input.type === 'radio') {
+                    if (input.checked) {
+                        this.value.set(`${this.name}${input.name}`, input.value);
+                    }
+                }
+                else {
+                    this.value.set(`${this.name}${input.name}`, input.value);
+                }
+            }
+        });
+        this.internals.setFormValue(this.value);
+        this.logger.logTrace(`Set ${this.name} values to `, this.value);
+    }
+};
+__decorate([
+    property({ type: FormData }),
+    __metadata("design:type", FormData)
+], QboFormElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormElement.prototype, "template", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], QboFormElement.prototype, "data", void 0);
+QboFormElement = QboFormElement_1 = __decorate([
+    customElement('qbo-form-element'),
+    __metadata("design:paramtypes", [])
+], QboFormElement);
+export { QboFormElement };