@quandis/qbo4.ui 4.0.1-CI-20240421-210609 → 4.0.1-CI-20240425-185108

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240421-210609",
+  "version": "4.0.1-CI-20240425-185108",
   "workspaces": [
     "code"
   ],

package/readme.md

@@ -104,8 +104,15 @@ The `IValidate` interface is:
 
 ```typescript
 export interface IValidate {
-    validate(input: HTMLElement): Promise<boolean>;
+    // Called by `QboValidate` when fields change or a form is submitted.
+    validate(input: HTMLElement): Promise<boolean>; 
+    // Called by `QboValidate` when the component is connected to the DOM.
+    connect(form: HTMLFormElement): void { };
+    // Called by `QboValidate` when the component is disconnected from the DOM.
+    disconnect(): void { };
+    // Message to display when validation fails.
     message: string;
+    // Selector to use to find elements to apply the IValidate implementation to.
     selector: string;
 }
 ```
@@ -130,7 +137,7 @@ For example:
 
 In this example, the `Other` field will only be enabled if either the `This` or `That` field have a value.
 
-Options available include:
+### DependValidator Options 
 
 |Option|Default|Description|
 |-|-|-|
@@ -153,16 +160,26 @@ Options available include:
 |`{"depends": "!This"}`|`This` must have an empty value.|
 |`{"depends": "This=Foo*"}`|`This` must have a value that **starts with** `Foo`.|
 |`{"depends": "This=*Bar"}`|`This` must have a value that **ends with** `Bar`.|
-|`{"depends": "This=*oo*"}`|`This` must have a value that **contains** `Bar`.|
+|`{"depends": "This=*oo*"}`|`This` must have a value that **contains** `oo`.|
 
-> HTML markup and browser standards require that attributes containing JSON be double-quoted:
+The `depends` attribute may reference elements by `id` or by `name`. 
+In the case of a conflict, the `id` will be used.
+The following expression is used find the target element:
+
+```typescript
+const target = this.form.querySelector(`#${CSS.escape(selector)}`)
+    ?? this.form.querySelector(`[name="${CSS.escape(selector)}"]`);
+```
+
+HTML markup and browser standards require that attributes containing JSON be double-quoted:
 
 ```html
 <input type="text" data-depend-options='{"depends": "This"}'/>
 ```
 
-> is valid, but the following is not:
+is valid, but the following is not:
 
 ```html
 <input type="text" data-depend-options="{'depends': 'This'}"/>
 ```
+

package/src/qbo/{ValidateDepends.d.ts → DependencyValidator.d.ts}

@@ -6,21 +6,16 @@ export declare class Dependency {
     value: string | null;
 }
 export declare class DependencyValidatorOptions {
-    dependencies: Element[];
     evaluators: any[];
-    values: Map<Element, string>;
     depends: string;
     condition: string;
     emptyOnDisable: boolean;
     resetOnDisable: boolean;
-    conditionalRequired: boolean;
-    required: boolean;
     disabledClass: string;
-    target: string | null;
     disableChildren: boolean;
 }
 export declare const DependencyValidatorOptionsToken: InjectionToken<DependencyValidatorOptions>;
-export declare class DependValidator implements IValidate {
+export declare class DependencyValidator implements IValidate {
     message: string;
     selector: string;
     form: HTMLFormElement;

package/src/qbo/{ValidateDepends.js → DependencyValidator.js}

@@ -22,17 +22,17 @@ export class Dependency {
 }
 export class DependencyValidatorOptions {
     constructor() {
-        this.dependencies = [];
+        // public dependencies: Element[] = [];
         this.evaluators = [];
-        this.values = new Map();
+        // public values: Map<Element, string> = new Map();
         this.depends = '';
         this.condition = 'or';
         this.emptyOnDisable = false;
         this.resetOnDisable = true;
-        this.conditionalRequired = true;
-        this.required = false;
+        // public conditionalRequired: boolean = true;
+        // public required: boolean = false;
         this.disabledClass = 'disabled';
-        this.target = null;
+        // public target: string | null = null;
         this.disableChildren = true;
     }
 }
@@ -49,7 +49,7 @@ const operations = new Map([
 ]);
 // operations.set('', () => null);
 const operationsKeys = Array.from(operations.keys());
-let DependValidator = class DependValidator {
+let DependencyValidator = class DependencyValidator {
     constructor(containingForm, options) {
         this.message = 'Dependency condition not met';
         this.selector = '[data-depend-options]';
@@ -87,47 +87,29 @@ let DependValidator = class DependValidator {
         // let isValid: boolean;
         let opValid;
         if (options.condition === 'or') {
-            // isValid = options.dependencies.some(el => this.isElementValid(el, options));
             opValid = options.evaluators.some((evaluator) => evaluator() === true);
         }
         else {
-            // isValid = options.dependencies.every(el => this.isElementValid(el, options));
             opValid = options.evaluators.every((evaluator) => evaluator() === true);
         }
         if (input instanceof HTMLInputElement || input instanceof HTMLSelectElement || input instanceof HTMLTextAreaElement)
             input.disabled = !opValid;
         input.classList.toggle(options.disabledClass, !opValid);
+        const targets = elementSelectorAll(input, 'input,select,textarea');
         if (!opValid) {
             if (options.disableChildren)
-                elementSelectorAll(input, 'input,select,textarea').forEach((el) => el.setAttribute('disabled', 'disabled'));
+                targets.forEach((el) => el.setAttribute('disabled', 'disabled'));
             if (options.resetOnDisable)
-                elementSelectorAll(input, 'input,select,textarea').forEach((el) => elementResetValue(el));
+                targets.forEach((el) => elementResetValue(el));
             else if (options.emptyOnDisable)
-                elementSelectorAll(input, 'input,select,textarea').forEach((el) => elementClearValue(el));
+                targets.forEach((el) => elementClearValue(el));
         }
         else {
             if (options.disableChildren)
-                elementSelectorAll(input, 'input,select,textarea').forEach((el) => el.removeAttribute('disabled'));
+                targets.forEach((el) => el.removeAttribute('disabled'));
         }
         return Promise.resolve(opValid);
     }
-    //private isElementValid(element: Element | null, options: DependencyValidatorOptions): boolean {
-    //    if (!element) {
-    //        return false;
-    //    }
-    //    // const evaluator: OperationFunc | null = options.evaluators.get(element) ?? null;
-    //    if (element instanceof HTMLInputElement) {
-    //        if (element.type === 'checkbox' || element.type === 'radio') {
-    //            return element.checked;
-    //        } else {
-    //            return element.value.trim() !== '';
-    //        }
-    //    }
-    //    if (element instanceof HTMLSelectElement) {
-    //        return element.selectedIndex > 0;
-    //    }
-    //    return element.textContent?.trim() !== '';
-    //}
     getOptions(input) {
         let options = this.optionsCache.get(input);
         if (!options) {
@@ -178,32 +160,6 @@ let DependValidator = class DependValidator {
                     return (operator === "!=") ? () => target.selected : () => !target.selected;
                 }
             }).filter(op => op !== undefined);
-            options.dependencies = options.depends.split(',').map((depend) => {
-                depend = depend.trim();
-                let operator = operationsKeys.find(op => depend.includes(op)) ?? '!=';
-                let selector = null;
-                let value = '';
-                if (operator) {
-                    const parts = depend.split(operator);
-                    selector = parts[0];
-                    value = parts[1];
-                }
-                else if (depend.startsWith('!')) {
-                    operator = '=';
-                    selector = depend.substring(1);
-                }
-                else {
-                    operator = '!=';
-                    selector = depend;
-                }
-                const target = this.form.querySelector(`#${CSS.escape(selector)}`)
-                    ?? this.form.querySelector(`[name="${CSS.escape(selector)}"]`);
-                //if (target instanceof HTMLElement) {
-                //    options?.evaluators.set(target, operations.get(operator) ?? (() => null));
-                //    options?.values.set(target, value);
-                //}
-                return target;
-            }).filter((elem) => elem !== null);
             this.optionsCache.set(input, options);
         }
         return options;
@@ -214,12 +170,12 @@ let DependValidator = class DependValidator {
     }
     ;
 };
-DependValidator = __decorate([
+DependencyValidator = __decorate([
     injectable(),
     __param(1, inject(DependencyValidatorOptionsToken)),
     __metadata("design:paramtypes", [HTMLFormElement,
         DependencyValidatorOptions])
-], DependValidator);
-export { DependValidator };
+], DependencyValidator);
+export { DependencyValidator };
 services.container.register(DependencyValidatorOptionsToken, { useValue: new DependencyValidatorOptions() });
-services.container.register(ValidateToken, { useClass: DependValidator });
+services.container.register(ValidateToken, { useClass: DependencyValidator });

package/src/qbo/{ValidateDepends.ts → DependencyValidator.ts}

@@ -11,17 +11,17 @@ export class Dependency {
 
 type OperationFunc = (left: any, right: any) => boolean | null;
 export class DependencyValidatorOptions {
-    public dependencies: Element[] = [];
+    // public dependencies: Element[] = [];
     public evaluators: any[] = [];
-    public values: Map<Element, string> = new Map();
+    // public values: Map<Element, string> = new Map();
     public depends: string = '';
     public condition: string = 'or';
     public emptyOnDisable: boolean = false;
     public resetOnDisable: boolean = true;
-    public conditionalRequired: boolean = true;
-    public required: boolean = false;
+    // public conditionalRequired: boolean = true;
+    // public required: boolean = false;
     public disabledClass: string = 'disabled';
-    public target: string | null = null;
+    // public target: string | null = null;
     public disableChildren: boolean = true
 }
 export const DependencyValidatorOptionsToken: InjectionToken<DependencyValidatorOptions> = 'DependencyValidatorOptions';
@@ -41,7 +41,7 @@ const operations: Map<string, OperationFunc> = new Map([
 const operationsKeys = Array.from(operations.keys());
 
 @injectable()
-export class DependValidator implements IValidate {
+export class DependencyValidator implements IValidate {
     message: string = 'Dependency condition not met';
     selector: string = '[data-depend-options]';
     form: HTMLFormElement;
@@ -86,47 +86,24 @@ export class DependValidator implements IValidate {
         // let isValid: boolean;
         let opValid: boolean;
         if (options.condition === 'or') {
-            // isValid = options.dependencies.some(el => this.isElementValid(el, options));
             opValid = options.evaluators.some((evaluator: any) => evaluator() === true);
         } else {
-            // isValid = options.dependencies.every(el => this.isElementValid(el, options));
             opValid = options.evaluators.every((evaluator: any) => evaluator() === true);
         }
         if (input instanceof HTMLInputElement || input instanceof HTMLSelectElement || input instanceof HTMLTextAreaElement)
             input.disabled = !opValid;
         input.classList.toggle(options.disabledClass, !opValid);
-
+        const targets = elementSelectorAll(input, 'input,select,textarea');
         if (!opValid) {
-            if (options.disableChildren) elementSelectorAll(input, 'input,select,textarea').forEach((el) => el.setAttribute('disabled', 'disabled'));
-            if (options.resetOnDisable) elementSelectorAll(input, 'input,select,textarea').forEach((el) => elementResetValue(el));
-            else if (options.emptyOnDisable) elementSelectorAll(input, 'input,select,textarea').forEach((el) => elementClearValue(el));
+            if (options.disableChildren) targets.forEach((el) => el.setAttribute('disabled', 'disabled'));
+            if (options.resetOnDisable) targets.forEach((el) => elementResetValue(el));
+            else if (options.emptyOnDisable) targets.forEach((el) => elementClearValue(el));
         } else {
-            if (options.disableChildren) elementSelectorAll(input, 'input,select,textarea').forEach((el) => el.removeAttribute('disabled'));
+            if (options.disableChildren) targets.forEach((el) => el.removeAttribute('disabled'));
         }
         return Promise.resolve(opValid);
     }
 
-    //private isElementValid(element: Element | null, options: DependencyValidatorOptions): boolean {
-    //    if (!element) {
-    //        return false;
-    //    }
-
-    //    // const evaluator: OperationFunc | null = options.evaluators.get(element) ?? null;
-    //    if (element instanceof HTMLInputElement) {
-    //        if (element.type === 'checkbox' || element.type === 'radio') {
-    //            return element.checked;
-    //        } else {
-    //            return element.value.trim() !== '';
-    //        }
-    //    }
-
-    //    if (element instanceof HTMLSelectElement) {
-    //        return element.selectedIndex > 0;
-    //    }
-
-    //    return element.textContent?.trim() !== '';
-    //}
-
     private getOptions(input: HTMLElement): DependencyValidatorOptions | null {
         let options = this.optionsCache.get(input);
         if (!options) {
@@ -175,30 +152,6 @@ export class DependValidator implements IValidate {
                     return (operator === "!=") ? () => target.selected : () => !target.selected;
                 }
             }).filter(op => op !== undefined);
-            options.dependencies = options.depends.split(',').map((depend: string) => {
-                depend = depend.trim();
-                let operator = operationsKeys.find(op => depend.includes(op)) ?? '!=';
-                let selector: string | null = null;
-                let value: string = '';
-                if (operator) {
-                    const parts = depend.split(operator);
-                    selector = parts[0];
-                    value = parts[1];
-                } else if (depend.startsWith('!')) {
-                    operator = '=';
-                    selector = depend.substring(1);
-                } else {
-                    operator = '!=';
-                    selector = depend;
-                }
-                const target = this.form.querySelector(`#${CSS.escape(selector)}`)
-                    ?? this.form.querySelector(`[name="${CSS.escape(selector)}"]`);
-                //if (target instanceof HTMLElement) {
-                //    options?.evaluators.set(target, operations.get(operator) ?? (() => null));
-                //    options?.values.set(target, value);
-                //}
-                return target;
-            }).filter((elem: Element | null): elem is Element => elem !== null);
             this.optionsCache.set(input, options);
         }
         return options;
@@ -211,4 +164,4 @@ export class DependValidator implements IValidate {
 }
 
 services.container.register(DependencyValidatorOptionsToken, { useValue: new DependencyValidatorOptions() });
-services.container.register(ValidateToken, { useClass: DependValidator });
+services.container.register(ValidateToken, { useClass: DependencyValidator });

package/src/qbo/Program.d.ts

@@ -3,9 +3,11 @@ export { services } from '@quandis/qbo4.configuration';
 export * from './IApiService.js';
 export * from './IValidate.js';
 export * from './Validators.js';
-export * from './ValidateDepends.js';
+export * from './DependencyValidator.js';
 export * from './RestApiService.js';
+export * from './qbo-api.js';
 export * from './qbo-badge.js';
+export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
 export * from './qbo-form-element.js';
@@ -20,7 +22,6 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-api.js';
 export declare function elementOptions(element: any, prefix: any, options?: string): {};
 export declare function elementSelectorAll(element: Element, selector: string): Element[];
 export declare function elementResetValue(element: Element): void;

package/src/qbo/Program.js

@@ -3,9 +3,11 @@ export { services } from '@quandis/qbo4.configuration';
 export * from './IApiService.js';
 export * from './IValidate.js';
 export * from './Validators.js';
-export * from './ValidateDepends.js';
+export * from './DependencyValidator.js';
 export * from './RestApiService.js';
+export * from './qbo-api.js';
 export * from './qbo-badge.js';
+export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
 export * from './qbo-form-element.js';
@@ -20,7 +22,6 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js';
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-api.js';
 // Return JSON object from element attributes.
 export function elementOptions(element, prefix, options = 'options') {
     const result = {};

package/src/qbo/Program.ts

@@ -4,9 +4,11 @@ export { services } from '@quandis/qbo4.configuration';
 export * from './IApiService.js';
 export * from './IValidate.js';
 export * from './Validators.js';
-export * from './ValidateDepends.js';
+export * from './DependencyValidator.js';
 export * from './RestApiService.js';
+export * from './qbo-api.js';
 export * from './qbo-badge.js';
+export * from './qbo-contact.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
 export * from './qbo-form-element.js';
@@ -21,7 +23,6 @@ export * from './qbo-select.js';
 export * from './qbo-sidebar.js'
 export * from './qbo-table.js';
 export * from './qbo-validate.js';
-export * from './qbo-api.js';
 
 // Return JSON object from element attributes.
 export function elementOptions(element, prefix, options = 'options') {
@@ -35,7 +36,7 @@ export function elementOptions(element, prefix, options = 'options') {
             if (options != null && attr === optionsKey) {
                 try {
                     const options = JSON.parse(element.getAttribute(attr));
-                    Object.assign(result, options); 
+                    Object.assign(result, options);
                 } catch (error) {
                     console.error(`Error parsing JSON from element ${element.name} attribute ${optionsKey} (${element.getAttribute(attr)}):`, element, error);
                 }
@@ -84,7 +85,7 @@ export function elementClearValue(element: Element) {
         else
             element.value = '';
     }
-    else if (element instanceof HTMLSelectElement) 
+    else if (element instanceof HTMLSelectElement)
         element.options.selectedIndex = 0;
 }
 

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

@@ -3,6 +3,6 @@ export declare class ApiServiceComponent extends LitElement {
     name: string | null;
     apiEndpoint: string | null;
     method: string;
-    firstUpdated(): void;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo/qbo-api.js

@@ -17,7 +17,8 @@ let ApiServiceComponent = class ApiServiceComponent extends LitElement {
         this.apiEndpoint = null;
         this.method = 'POST';
     }
-    firstUpdated() {
+    connectedCallback() {
+        super.connectedCallback();
         const headers = {};
         if (this.name == null)
             console.error('qbo-api name is required.');
@@ -38,6 +39,8 @@ let ApiServiceComponent = class ApiServiceComponent extends LitElement {
         }
         // container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
         // Call the registerRestApi function with the extracted configuration
+        if (!this.apiEndpoint?.startsWith("http"))
+            this.apiEndpoint = new URL(this.apiEndpoint ?? '', document.location.origin).href;
         registerRestApi(this.name, this.apiEndpoint, headers, this.method);
     }
     render() {

package/src/qbo/qbo-api.ts

@@ -15,7 +15,9 @@ export class ApiServiceComponent extends LitElement {
     @property({ type: String })
     method: string = 'POST';
 
-    firstUpdated() {
+    connectedCallback() {
+        super.connectedCallback();
+
         const headers: HeadersInit = {};
 
         if (this.name == null)
@@ -41,6 +43,8 @@ export class ApiServiceComponent extends LitElement {
         // container.registerInstance<IApiService>(this.name!, new RestApiService(this.apiEndpoint!, headers, this.method));
 
         // Call the registerRestApi function with the extracted configuration
+        if (!this.apiEndpoint?.startsWith("http"))
+            this.apiEndpoint = new URL(this.apiEndpoint ?? '', document.location.origin).href;
         registerRestApi(this.name!, this.apiEndpoint!, headers, this.method);
     }
 

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare class QboContact extends LitElement {
+    apiEndpoint: string;
+    colFourClass: String | null;
+    colSixClass: String | null;
+    colThreeClass: String | null;
+    colTwelveClass: String | null;
+    contactId: String | null;
+    contactLabel: String | null;
+    contactName: String | null;
+    divSectionHeaderClass: String | null;
+    emptyOptionText: String | null;
+    emptyOptionValue: String | null;
+    formControlSmallClass: String | null;
+    formLabelSmallClass: String | null;
+    formSelectSmallClass: String | null;
+    renderInHost: boolean;
+    jsonData: any;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}