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

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

@@ -0,0 +1,121 @@
+import { ILoggerService, ILoggerServiceToken, services } from '@quandis/qbo4.logging';
+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;
+
+    @property({ type: FormData })
+    value: FormData = new FormData();
+
+    @property({ type: String })
+    template = '';
+
+    @property({ type: String })
+    name = '';
+
+    @property({ type: Object })
+    data = null;
+
+    private templateNode: HTMLTemplateElement | null = null;
+
+    private internals: ElementInternals;
+    logger: ILoggerService;
+
+    constructor() {
+        super();
+        this.internals = this.attachInternals(); // Attach the form internals
+        this.logger = services.container.resolve<ILoggerService>(ILoggerServiceToken);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.templateNode = document.getElementById(this.template) as HTMLTemplateElement;
+
+        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: PropertyValues) {
+        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
+            ) && e.name
+        );
+        inputs!.forEach(element => {
+            const input = element as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | QboFormElement;
+
+            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) {
+                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);
+    }
+
+
+    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 } }));
+    }
+
+    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 } }));
+    }
+}
+

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

@@ -1,8 +1,7 @@
-declare function getArray(json: any, arrayName?: string): Array<{
+export declare function getArray(json: any, arrayName?: string): Array<{
     [key: string]: string;
 }> | null;
-declare function substitute(inputString: string, ...jsonData: any): string;
-declare function replicate(target: HTMLElement | null, template: HTMLTemplateElement | null, sourceData: Array<{
+export declare function substitute(inputString: string, ...jsonData: any): string;
+export declare function replicate(target: HTMLElement | null, template: HTMLTemplateElement | null, sourceData: Array<{
     [key: string]: string;
 }>, emptyContent?: boolean): void;
-export { getArray, substitute, replicate };

package/src/qbo/qbo-json.js

@@ -3,7 +3,7 @@
  * @param arrayName {array} The name of a key that represents an array to use. If not specified, the first array found will be returned.
  * @returns {Array} An array if found, otherwise null.
 */
-function getArray(json, arrayName) {
+export function getArray(json, arrayName) {
     if (typeof json === 'string') {
         try {
             json = JSON.parse(json);
@@ -46,7 +46,7 @@ function interpolate(template, data) {
 /* @description Perform string substitution of ${expression} using one or more JSON objects.
  * @example substitute('Hello ${name}!', { name: 'World' }) => 'Hello World!'
 */
-function substitute(inputString, ...jsonData) {
+function substituteOld(inputString, ...jsonData) {
     // Use a regular expression to match ${key} expressions
     const regex = /\${(.*?)}/g;
     let resultString = inputString;
@@ -65,9 +65,30 @@ function substitute(inputString, ...jsonData) {
     resultString = resultString.replace(regex, () => '');
     return resultString;
 }
+export function substitute(inputString, ...jsonData) {
+    // Use a regular expression to match ${key} expressions
+    const regex = /\${(.*?)}/g;
+    let resultString = inputString;
+    for (let i = 0; i < jsonData.length; i++) {
+        const data = jsonData[i];
+        resultString = resultString.replace(regex, (match, expression) => {
+            const parts = expression.split(/\.|\[|\]/).filter(part => part !== '');
+            let currentValue = data;
+            // Iterate over the parts to access the desired value
+            for (let part of parts) {
+                if (currentValue[part] === undefined)
+                    return match;
+                currentValue = currentValue[part];
+            }
+            return currentValue;
+        });
+    }
+    resultString = resultString.replace(regex, () => '');
+    return resultString;
+}
 /* @description Replicates content in a target element for each item in a JSON array.
 */
-function replicate(target, template, sourceData, emptyContent = true) {
+export function replicate(target, template, sourceData, emptyContent = true) {
     if (target != null && template != null) {
         while (emptyContent && target.firstChild) {
             target.removeChild(target.firstChild);
@@ -82,4 +103,3 @@ function replicate(target, template, sourceData, emptyContent = true) {
         });
     }
 }
-export { getArray, substitute, replicate };

package/src/qbo/qbo-json.ts

@@ -4,7 +4,7 @@
  * @param arrayName {array} The name of a key that represents an array to use. If not specified, the first array found will be returned.
  * @returns {Array} An array if found, otherwise null.
 */
-function getArray(json: any, arrayName?: string): Array<{ [key: string]: string }> | null {
+export function getArray(json: any, arrayName?: string): Array<{ [key: string]: string }> | null {
     if (typeof json === 'string') {
         try {
             json = JSON.parse(json);
@@ -49,7 +49,7 @@ function interpolate(template: string, data: { [key: string]: string }) {
 /* @description Perform string substitution of ${expression} using one or more JSON objects.
  * @example substitute('Hello ${name}!', { name: 'World' }) => 'Hello World!'
 */
-function substitute(inputString: string, ...jsonData: any): string {
+function substituteOld(inputString: string, ...jsonData: any): string {
     // Use a regular expression to match ${key} expressions
     const regex = /\${(.*?)}/g;
     let resultString = inputString;
@@ -70,10 +70,34 @@ function substitute(inputString: string, ...jsonData: any): string {
     return resultString;
 }
 
+export function substitute(inputString: string, ...jsonData: any): string {
+    // Use a regular expression to match ${key} expressions
+    const regex = /\${(.*?)}/g;
+    let resultString = inputString;
+    for (let i = 0; i < jsonData.length; i++) {
+        const data = jsonData[i] as Record<string, any>;
+        resultString = resultString.replace(regex, (match: string, expression: string) => {
+            const parts = expression.split(/\.|\[|\]/).filter(part => part !== '');
+            let currentValue: any = data;
+
+            // Iterate over the parts to access the desired value
+            for (let part of parts) {
+                if (currentValue[part] === undefined)
+                    return match;
+                currentValue = currentValue[part];
+            }
+            return currentValue;
+        });
+    }
+    resultString = resultString.replace(regex, () => '');
+
+    return resultString;
+}
+
 
 /* @description Replicates content in a target element for each item in a JSON array.
 */
-function replicate(target: HTMLElement | null, template: HTMLTemplateElement | null, sourceData: Array<{ [key: string]: string }>, emptyContent: boolean = true) {
+export function replicate(target: HTMLElement | null, template: HTMLTemplateElement | null, sourceData: Array<{ [key: string]: string }>, emptyContent: boolean = true) {
     if (target != null && template != null) {
         while (emptyContent && target.firstChild) {
             target.removeChild(target.firstChild);
@@ -89,4 +113,3 @@ function replicate(target: HTMLElement | null, template: HTMLTemplateElement | n
     }
 }
 
-export { getArray, substitute, replicate };

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

@@ -1,11 +1,28 @@
 import { LitElement } from 'lit';
-import { IValidate } from './qbo-validators.js';
+import { IValidate } from './IValidate.js';
 /**
-  * Renders a <form> element and applies extensible validators.
-  *
-  * @remarks
-  * Use HTML5 validation attributes to specify the type of validation to apply.
-  */
+ * `QboValidate` component is responsible for performing validation on forms and inputs.
+ * It emits two custom events to indicate the completion of validation processes:
+ * - `qbo-form-validated`: Fired when the entire form has been validated.
+ * - `qbo-input-validated`: Fired when a single input within the form has been validated.
+ *
+ * @fires qbo-form-validated - Event fired when the form validation is complete.
+ * @fires qbo-input-validated - Event fired when an individual input validation is complete.
+ * @example
+ * ```html
+ * <form id="myForm">
+ *   <qbo-validate></qbo-validate>
+ * </form>
+ * ```
+ * ```javascript
+ * document.querySelector('qbo-validate').addEventListener('qbo-form-validated', (e) => {
+ *   console.log('Form validation completed');
+ * });
+ * document.querySelector('qbo-validate').addEventListener('qbo-input-validated', (e) => {
+ *   console.log('Input validation completed');
+ * });
+ * ```
+ */
 export declare class QboValidate extends LitElement {
     renderInHost: boolean;
     autoComplete: string;
@@ -15,6 +32,7 @@ export declare class QboValidate extends LitElement {
     validators: IValidate[];
     connectedCallback(): Promise<void>;
     disconnectedCallback(): Promise<void>;
-    validate(event: any): void;
+    validate: (event: Event) => Promise<void>;
+    validateElement: (source: Event | HTMLElement) => Promise<void>;
     render(): import("lit").TemplateResult<1>;
 }

package/src/qbo/qbo-validate.js

@@ -7,16 +7,33 @@ 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 { ValidateToken } from './qbo-validators.js';
+import { ValidateToken } from './IValidate.js';
+import { services } from '@quandis/qbo4.logging';
 /**
-  * Renders a <form> element and applies extensible validators.
-  *
-  * @remarks
-  * Use HTML5 validation attributes to specify the type of validation to apply.
-  */
+ * `QboValidate` component is responsible for performing validation on forms and inputs.
+ * It emits two custom events to indicate the completion of validation processes:
+ * - `qbo-form-validated`: Fired when the entire form has been validated.
+ * - `qbo-input-validated`: Fired when a single input within the form has been validated.
+ *
+ * @fires qbo-form-validated - Event fired when the form validation is complete.
+ * @fires qbo-input-validated - Event fired when an individual input validation is complete.
+ * @example
+ * ```html
+ * <form id="myForm">
+ *   <qbo-validate></qbo-validate>
+ * </form>
+ * ```
+ * ```javascript
+ * document.querySelector('qbo-validate').addEventListener('qbo-form-validated', (e) => {
+ *   console.log('Form validation completed');
+ * });
+ * document.querySelector('qbo-validate').addEventListener('qbo-input-validated', (e) => {
+ *   console.log('Input validation completed');
+ * });
+ * ```
+ */
 let QboValidate = class QboValidate extends LitElement {
     constructor() {
         super(...arguments);
@@ -26,40 +43,74 @@ let QboValidate = class QboValidate extends LitElement {
         this.workingClass = ['bg-light', 'text-secondary'];
         this.form = null;
         this.validators = [];
+        this.validate = async (event) => {
+            console.log('validating form');
+            event.preventDefault();
+            const targets = Array.from(this.form?.querySelectorAll('*'));
+            for (const target of targets) {
+                if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+                    console.log('validating element ', target);
+                    await this.validateElement(target);
+                }
+                else
+                    console.log('ignoring element ', target);
+            }
+            if (!this.form?.checkValidity()) {
+                console.log('form is invalid');
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            else {
+                console.log('form is valid, js submit');
+                // this.form.submit();
+            }
+            this.form?.classList.add(this.validatedClass);
+            this.dispatchEvent(new Event('qbo-form-validated', { bubbles: true }));
+        };
+        this.validateElement = async (source) => {
+            const target = source instanceof Event ? source.target : source;
+            console.log('validateElement start ', target);
+            if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+                target.setCustomValidity('');
+                // Re-verify build-in validation.
+                if (!target.checkValidity())
+                    return;
+                for (const validator of this.validators) {
+                    if (target.matches(validator.selector)) {
+                        console.log('element matches selector ', validator.selector, ' for ', target.matches(validator.selector) ? 'true' : 'false');
+                        if (!target.checkValidity())
+                            break;
+                        // Show some loading indication if necessary.
+                        this.workingClass.forEach(c => target.classList.add(c));
+                        // Validate the element.
+                        const valid = await validator.validate(target);
+                        // Clear loading indication.
+                        this.workingClass.forEach(c => target.classList.remove(c));
+                        // Set custom validity based on the validation result.
+                        target.setCustomValidity(valid ? '' : validator.message);
+                        console.log('input validity is ', target.checkValidity(), ' message is ', target.validationMessage);
+                    }
+                    else
+                        console.log('element does not match selector ', validator.selector, ' for ', target.matches(validator.selector) ? 'true' : 'false');
+                }
+            }
+            console.log('validateElement end ', target);
+            target?.dispatchEvent(new Event('qbo-input-validated', { bubbles: true }));
+        };
     }
     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);
-                    }
-                });
-            });
-        });
+        this.form?.addEventListener('submit', this.validate);
+        this.form?.addEventListener('change', this.validateElement);
+        this.validators = services.container.resolveAll(ValidateToken);
     }
     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);
+        this.form?.addEventListener('change', this.validateElement);
+        this.form?.addEventListener('submit', this.validate);
     }
     render() {
         return html ``;

package/src/qbo/qbo-validate.ts

@@ -1,14 +1,31 @@
-import { html, css, LitElement } from 'lit';
+import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { container, injectable, injectAll, InjectionToken } from 'tsyringe';
-import { IValidate, ValidateToken } from './qbo-validators.js';
+import { IValidate, ValidateToken } from './IValidate.js';
+import { services } from '@quandis/qbo4.logging';
 
 /**
-  * Renders a <form> element and applies extensible validators.
-  *
-  * @remarks
-  * Use HTML5 validation attributes to specify the type of validation to apply.
-  */
+ * `QboValidate` component is responsible for performing validation on forms and inputs.
+ * It emits two custom events to indicate the completion of validation processes:
+ * - `qbo-form-validated`: Fired when the entire form has been validated.
+ * - `qbo-input-validated`: Fired when a single input within the form has been validated.
+ *
+ * @fires qbo-form-validated - Event fired when the form validation is complete.
+ * @fires qbo-input-validated - Event fired when an individual input validation is complete.
+ * @example
+ * ```html
+ * <form id="myForm">
+ *   <qbo-validate></qbo-validate>
+ * </form>
+ * ```
+ * ```javascript
+ * document.querySelector('qbo-validate').addEventListener('qbo-form-validated', (e) => {
+ *   console.log('Form validation completed');
+ * });
+ * document.querySelector('qbo-validate').addEventListener('qbo-input-validated', (e) => {
+ *   console.log('Input validation completed');
+ * });
+ * ```
+ */
 @customElement('qbo-validate')
 export class QboValidate extends LitElement {
 
@@ -37,37 +54,73 @@ export class QboValidate extends LitElement {
         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);
-                    }
-                });
-            });
-        });
+        this.form?.addEventListener('submit', this.validate);
+        this.form?.addEventListener('change', this.validateElement);
+        this.validators = services.container.resolveAll<IValidate>(ValidateToken);
     }
 
     async disconnectedCallback() {
         super.disconnectedCallback();
-        this.form?.removeEventListener('submit', this.validate.bind(this));
+        this.form?.addEventListener('change', this.validateElement);
+        this.form?.addEventListener('submit', this.validate);
     }
 
-    validate(event: any) {
+    validate = async (event: Event) => {
+        console.log('validating form');
+        event.preventDefault();
+        const targets = Array.from(this.form?.querySelectorAll('*')!);
+        for (const target of targets) {
+            if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+                console.log('validating element ', target);
+                await this.validateElement(target);
+            } else
+                console.log('ignoring element ', target);
+        }
         if (!this.form?.checkValidity()) {
+            console.log('form is invalid');
             event.preventDefault()
             event.stopPropagation()
         }
+        else {
+            console.log('form is valid, js submit');
+            // this.form.submit();
+        }
         this.form?.classList.add(this.validatedClass);
+        this.dispatchEvent(new Event('qbo-form-validated', { bubbles: true }));
+    }
+
+    validateElement = async (source: Event | HTMLElement) => {
+        const target = source instanceof Event ? source.target : source;
+        console.log('validateElement start ', target)
+        if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement || target instanceof HTMLTextAreaElement) {
+            target.setCustomValidity('');
+            // Re-verify build-in validation.
+            if (!target.checkValidity())
+                return;
+            for (const validator of this.validators) {
+                if (target.matches(validator.selector)) {
+                    console.log('element matches selector ', validator.selector, ' for ', target.matches(validator.selector) ? 'true' : 'false');
+                    if (!target.checkValidity()) break;
+
+                    // Show some loading indication if necessary.
+                    this.workingClass.forEach(c => target.classList.add(c));
+
+                    // Validate the element.
+                    const valid = await validator.validate(target);
+
+                    // Clear loading indication.
+                    this.workingClass.forEach(c => target.classList.remove(c));
+
+                    // Set custom validity based on the validation result.
+                    target.setCustomValidity(valid ? '' : validator.message);
+                    console.log('input validity is ', target.checkValidity(), ' message is ', target.validationMessage);
+                }
+                else
+                    console.log('element does not match selector ', validator.selector, ' for ', target.matches(validator.selector) ? 'true' : 'false');
+            }
+        }
+        console.log('validateElement end ', target);
+        target?.dispatchEvent(new Event('qbo-input-validated', { bubbles: true }));
     }
 
     render() {