@quandis/qbo4.ui 4.0.1-CI-20240421-210609 → 4.0.1-CI-20240422-135811

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-20240422-135811",
   "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,7 +3,7 @@ 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-badge.js';
 export * from './qbo-datalist.js';

package/src/qbo/Program.js

@@ -3,7 +3,7 @@ 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-badge.js';
 export * from './qbo-datalist.js';

package/src/qbo/Program.ts

@@ -4,7 +4,7 @@ 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-badge.js';
 export * from './qbo-datalist.js'