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

package/src/qbo/qbo-table.ts

@@ -0,0 +1,80 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { getArray, replicate } from './qbo-json.js';
+import { QboFetch } from './qbo-fetch.js';
+
+/**
+  * Renders a <select> element with options populated from a JSON array.
+  *
+  * @remarks
+  * This element is a thin wrapper around {@link QboFetch} that renders a <table> element with options populated from a JSON array.
+  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#examples
+  */
+@customElement('qbo-table')
+export class QboTable extends QboFetch {
+    @property({ type: Boolean })
+    loading = false;
+
+    @property({ type: Boolean })
+    renderInHost = false;
+
+    @property({ attribute: 'qbo-class' })
+    qboClass = 'table table-striped table-hover';
+
+    @property()
+    dataSelector = null;
+
+    @property()
+    options: Array<{ [key: string]: string }> | null = null;
+
+    async connectedCallback() {
+        super.connectedCallback();
+    }
+
+    /* @description Let related elements know that the content has changed by raising a content-changed event. */
+    //updated(changedProperties) {
+    //    super.update(changedProperties);
+    //    this.dispatchEvent(new CustomEvent('qbo-updated', { bubbles: true, composed: true }));
+    //}
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    render() {
+        this.options = getArray(this.jsonData)
+            ?? this.loadData()
+            ?? [{ Loading: "..." }];
+
+        const body = this.querySelector('tbody');
+        const template = this.querySelector('template');
+
+        // If the user has specified a <template> for the body, replicate it for each item in the array.
+        replicate(this.querySelector('tbody'), this.querySelector('template'), this.options);
+
+        const keys = Object.keys(this.options[0]);
+        return html`<slot>
+            <table class=${this.qboClass}>
+                <thead>
+                    ${this.querySelector('*[slot=header]') != null ? html`<tr><th colspan="${keys.length}"><slot name="header"></slot></th></tr>` : null}
+                    <tr>${keys.map(key => html`<th>${key}</th>`)}</tr>
+                </thead>
+                <tbody>${this.options.map((option, index) => html`<tr data-index="${index}">${keys.map(key => html`<td>${option[key]}</td>`)}</tr>`)}</tbody>
+                <tfoot><tr><td colspan="${keys.length}"><slot name="footer">${keys.length} rows rendered.</slot></td></tr></tfoot>
+            </table>
+        </slot>`
+    }
+
+    loadData(): Array<{ [key: string]: string }> | null {
+        if (this.dataSelector != null) {
+            const script = document.querySelector(this.dataSelector);
+            if (script != null) {
+                return getArray((<HTMLScriptElement>script).text);
+            }
+        }
+        return null;
+    }
+
+
+}
+

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { IValidate } from './qbo-validators.js';
+/**
+  * Renders a <form> element and applies extensible validators.
+  *
+  * @remarks
+  * Use HTML5 validation attributes to specify the type of validation to apply.
+  */
+export declare class QboValidate extends LitElement {
+    renderInHost: boolean;
+    autoComplete: string;
+    validatedClass: string;
+    workingClass: string[];
+    form: HTMLFormElement | null;
+    validators: IValidate[];
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    validate(event: any): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/src/qbo/qbo-validate.js

@@ -0,0 +1,92 @@
+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 { container } from 'tsyringe';
+import { ValidateToken } from './qbo-validators.js';
+/**
+  * Renders a <form> element and applies extensible validators.
+  *
+  * @remarks
+  * Use HTML5 validation attributes to specify the type of validation to apply.
+  */
+let QboValidate = class QboValidate extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.renderInHost = false;
+        this.autoComplete = 'off';
+        this.validatedClass = 'was-validated';
+        this.workingClass = ['bg-light', 'text-secondary'];
+        this.form = null;
+        this.validators = [];
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.form = this.closest('form');
+        if (this.form == null)
+            return;
+        this.form?.addEventListener('submit', this.validate.bind(this));
+        this.validators = container.resolveAll(ValidateToken);
+        this.validators.forEach(validator => {
+            this.form?.querySelectorAll(validator.selector).forEach(element => {
+                element.addEventListener('change', async () => {
+                    if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+                        element.setCustomValidity('');
+                        if (!element.checkValidity())
+                            return;
+                        this.workingClass.forEach(c => element.classList.add(c));
+                        var valid = await validator.validate(element);
+                        this.workingClass.forEach(c => element.classList.add(c));
+                        element.setCustomValidity(valid ? '' : validator.message);
+                    }
+                });
+            });
+        });
+    }
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('submit', this.validate.bind(this));
+    }
+    validate(event) {
+        if (!this.form?.checkValidity()) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.form?.classList.add(this.validatedClass);
+    }
+    render() {
+        return html ``;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboValidate.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboValidate.prototype, "autoComplete", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboValidate.prototype, "validatedClass", void 0);
+__decorate([
+    property({
+        converter: {
+            fromAttribute: (value, type) => value?.split(' '),
+            toAttribute: (value, type) => value.join(' ')
+        }
+    }),
+    __metadata("design:type", Object)
+], QboValidate.prototype, "workingClass", void 0);
+QboValidate = __decorate([
+    customElement('qbo-validate')
+], QboValidate);
+export { QboValidate };

package/src/qbo/qbo-validate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qbo-validate.js","sourceRoot":"","sources":["qbo-validate.ts"],"names":[],"mappings":"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"}

package/src/qbo/qbo-validate.ts

@@ -0,0 +1,77 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { container, injectable, injectAll, InjectionToken } from 'tsyringe';
+import { IValidate, ValidateToken } from './qbo-validators.js';
+
+/**
+  * Renders a <form> element and applies extensible validators.
+  *
+  * @remarks
+  * Use HTML5 validation attributes to specify the type of validation to apply.
+  */
+@customElement('qbo-validate')
+export class QboValidate extends LitElement {
+
+    @property({ type: Boolean })
+    renderInHost = false;
+
+    @property({ type: String })
+    autoComplete = 'off';
+
+    @property({ type: String })
+    validatedClass = 'was-validated';
+
+    @property({
+        converter: {
+            fromAttribute: (value, type) => value?.split(' '),
+            toAttribute: (value: Array<string>, type) => value.join(' ')
+        }
+    })
+    workingClass = ['bg-light', 'text-secondary'];
+
+    form: HTMLFormElement | null = null;
+    validators: IValidate[] = [];
+
+    async connectedCallback() {
+        super.connectedCallback();
+        this.form = this.closest('form');
+        if (this.form == null)
+            return;
+
+        this.form?.addEventListener('submit', this.validate.bind(this));
+        this.validators = container.resolveAll<IValidate>(ValidateToken);
+        this.validators.forEach(validator => {
+            this.form?.querySelectorAll(validator.selector).forEach(element => {
+                element.addEventListener('change', async () => {
+                    if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+                        element.setCustomValidity('');
+                        if (!element.checkValidity())
+                            return;
+                        this.workingClass.forEach(c => element.classList.add(c));
+                        var valid = await validator.validate(element);
+                        this.workingClass.forEach(c => element.classList.add(c))
+                        element.setCustomValidity(valid ? '' : validator.message);
+                    }
+                });
+            });
+        });
+    }
+
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('submit', this.validate.bind(this));
+    }
+
+    validate(event: any) {
+        if (!this.form?.checkValidity()) {
+            event.preventDefault()
+            event.stopPropagation()
+        }
+        this.form?.classList.add(this.validatedClass);
+    }
+
+    render() {
+        return html``;
+    }
+
+}

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

@@ -0,0 +1,37 @@
+import { InjectionToken } from 'tsyringe';
+/**
+  * 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;
+}
+/**
+ *  Define a token for the validators
+ */
+export declare const ValidateToken: InjectionToken<IValidate>;
+/**
+ * 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

@@ -0,0 +1,72 @@
+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;
+};
+import { container, injectable } from 'tsyringe';
+import { RestApiService } from './qbo-api.js';
+import { getArray } from './qbo-json.js';
+/**
+ *  Define a token for the validators
+ */
+export const ValidateToken = 'ValidateToken';
+/**
+ * A validator for a US zip code.
+ */
+let ZipCodeValidator = class ZipCodeValidator {
+    constructor() {
+        this.message = 'Zip code is invalid';
+        this.selector = '.zipcode';
+    }
+    validate(input) { return Promise.resolve(true); }
+    ;
+};
+ZipCodeValidator = __decorate([
+    injectable()
+], ZipCodeValidator);
+export { ZipCodeValidator };
+container.register(ValidateToken, { useClass: ZipCodeValidator });
+/**
+ * A validator for an email address.
+ */
+let EmailValidator = class EmailValidator {
+    constructor() {
+        this.message = 'Email is invalid';
+        this.selector = '.email';
+    }
+    validate(input) { return Promise.resolve(true); }
+    ;
+};
+EmailValidator = __decorate([
+    injectable()
+], EmailValidator);
+export { EmailValidator };
+container.register(ValidateToken, { useClass: EmailValidator });
+let ExistsValidator = class ExistsValidator {
+    constructor() {
+        this.message = 'This value does not appear to exist.';
+        this.selector = '[data-exists]';
+    }
+    async validate(input) {
+        var url = input.getAttribute('data-exists');
+        if (!url)
+            return false;
+        var path = input.getAttribute('data-exists-path');
+        const service = container.isRegistered(url) ? 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);
+            if (json == null)
+                return false;
+            return json.length > 0;
+        }
+        return false;
+    }
+    ;
+};
+ExistsValidator = __decorate([
+    injectable()
+], ExistsValidator);
+export { ExistsValidator };
+container.register(ValidateToken, { useClass: ExistsValidator });

package/src/qbo/qbo-validators.ts

@@ -0,0 +1,66 @@
+import { container, injectable, InjectionToken } from 'tsyringe';
+import { IApiService, RestApiService } from './qbo-api.js';
+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;
+}
+
+
+/**
+ *  Define a token for the validators
+ */
+export const ValidateToken: InjectionToken<IValidate> = 'ValidateToken';
+
+/**
+ * A validator for a US zip code.
+ */
+@injectable()
+export class ZipCodeValidator implements IValidate {
+    validate(input: HTMLElement): Promise<boolean> { return Promise.resolve(true); };
+    message = 'Zip code is invalid';
+    selector = '.zipcode';
+}
+container.register(ValidateToken, { useClass: ZipCodeValidator });
+
+/**
+ * A validator for an email address.
+ */
+@injectable()
+export class EmailValidator implements IValidate {
+    validate(input: HTMLElement): Promise<boolean> { return Promise.resolve(true); };
+    message = 'Email is invalid';
+    selector = '.email';
+}
+container.register(ValidateToken, { useClass: EmailValidator });
+
+@injectable()
+export class ExistsValidator implements IValidate {
+    async validate(input: HTMLElement): Promise<boolean> {
+        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);
+
+        if (input instanceof HTMLInputElement || input instanceof HTMLSelectElement || input instanceof HTMLTextAreaElement) {
+            const response = await service.fetch(path, { value: input.value });
+            const json = getArray(response);
+            if (json == null)
+                return false;
+            return json.length > 0;
+        }
+        return false;
+    };
+    message = 'This value does not appear to exist.';
+    selector = '[data-exists]';
+}
+container.register(ValidateToken, { useClass: ExistsValidator });
+

package/src/qbo/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const bootstrap: import("lit").CSSResult;
+export declare const bootstrapicons: import("lit").CSSResult;
+export declare const qboui: import("lit").CSSResult;