powerpagestoolkit 3.0.2 → 3.0.311
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -43
- package/dist/src/{core → ancillary}/DOMNodeReference.d.ts +20 -42
- package/dist/src/ancillary/EventManager.d.ts +25 -0
- package/dist/src/ancillary/Radio.d.ts +8 -0
- package/dist/src/ancillary/ValueManager.d.ts +27 -0
- package/dist/src/ancillary/VisibilityManager.d.ts +11 -0
- package/dist/src/constants/EventTypes.d.ts +2 -2
- package/dist/src/core/PowerPagesElement.d.ts +32 -0
- package/dist/src/core/PowerPagesElementArray.d.ts +12 -0
- package/dist/src/core/bindForm.d.ts +7 -7
- package/dist/src/core/{createDOMNodeReferences.d.ts → getPowerPagesElement.d.ts} +16 -16
- package/dist/src/errors/errors.d.ts +32 -9
- package/dist/src/globals.d.ts +14 -11
- package/dist/src/index.d.ts +2 -2
- package/dist/src/index.js +2 -2
- package/dist/src/index.js.map +4 -4
- package/dist/src/utils/enhanceArray.d.ts +4 -4
- package/package.json +1 -1
- package/dist/src/core/DOMNodeReferenceArray.d.ts +0 -12
- package/dist/src/managers/ReferenceManager.d.ts +0 -6
package/README.md
CHANGED
|
@@ -21,13 +21,13 @@ npm install powerpagestoolkit
|
|
|
21
21
|
|
|
22
22
|
# Core Modules
|
|
23
23
|
|
|
24
|
-
###
|
|
24
|
+
### PowerPagesElement
|
|
25
25
|
|
|
26
26
|
A powerful class for managing DOM elements with automatic value synchronization and event handling.
|
|
27
27
|
|
|
28
28
|
#### Basic Usage
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
PowerPagesElements are instantiated with the help of the following factory function: `createRef`
|
|
31
31
|
|
|
32
32
|
```typescript
|
|
33
33
|
createRef(
|
|
@@ -37,7 +37,7 @@ createRef(
|
|
|
37
37
|
root: HTMLElement,
|
|
38
38
|
timeoutMs:number
|
|
39
39
|
}
|
|
40
|
-
): Promise<
|
|
40
|
+
): Promise<PowerPagesElement | PowerPagesElement[]>;
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
createRef takes two main arguments:
|
|
@@ -76,13 +76,13 @@ createRef takes two main arguments:
|
|
|
76
76
|
</tbody>
|
|
77
77
|
</table>
|
|
78
78
|
|
|
79
|
-
Import the utility function for creating
|
|
79
|
+
Import the utility function for creating PowerPagesElement(s)
|
|
80
80
|
|
|
81
81
|
```typescript
|
|
82
82
|
import { createRef } from "powerpagestoolkit";
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
Instantiate one, or multiple instances of a
|
|
85
|
+
Instantiate one, or multiple instances of a PowerPagesElement, and optionally configure advanced options
|
|
86
86
|
|
|
87
87
|
```javascript
|
|
88
88
|
// Create a single reference (i.e. 'querySelector')
|
|
@@ -120,8 +120,8 @@ const nodes2 = await createRef("#target", {
|
|
|
120
120
|
| value | any | Current synchronized value of the element |
|
|
121
121
|
| isLoaded | boolean | Element load status |
|
|
122
122
|
| target | HTMLElement \| string | Original target selector or element |
|
|
123
|
-
| yesRadio |
|
|
124
|
-
| noRadio |
|
|
123
|
+
| yesRadio | PowerPagesElement \| null | Reference to 'yes' radio (for boolean fields) |
|
|
124
|
+
| noRadio | PowerPagesElement \| null | Reference to 'no' radio (for boolean fields) |
|
|
125
125
|
| checked | boolean | Checkbox/radio checked state |
|
|
126
126
|
|
|
127
127
|
#### Key Methods
|
|
@@ -151,8 +151,8 @@ _Method Signature:_
|
|
|
151
151
|
```typescript
|
|
152
152
|
applyBusinessRule(
|
|
153
153
|
rule: BusinessRule,
|
|
154
|
-
dependencies:
|
|
155
|
-
):
|
|
154
|
+
dependencies: PowerPagesElement[]
|
|
155
|
+
): PowerPagesElement; /* Instance of this is returned for optional
|
|
156
156
|
method chaining */
|
|
157
157
|
```
|
|
158
158
|
|
|
@@ -160,18 +160,15 @@ applyBusinessRule(
|
|
|
160
160
|
|
|
161
161
|
```typescript
|
|
162
162
|
interface BusinessRule {
|
|
163
|
-
setVisibility?:
|
|
164
|
-
|
|
165
|
-
clearValuesOnHide?: boolean = true
|
|
166
|
-
];
|
|
167
|
-
setRequired?: [
|
|
163
|
+
setVisibility?: () => boolean;
|
|
164
|
+
setRequirements?: () => ({
|
|
168
165
|
isRequired: () => boolean,
|
|
169
166
|
isValid: () => boolean
|
|
170
|
-
|
|
171
|
-
setValue?:
|
|
167
|
+
});
|
|
168
|
+
setValue?: () => ({
|
|
172
169
|
condition: () => boolean,
|
|
173
170
|
value: () => any | any
|
|
174
|
-
|
|
171
|
+
});
|
|
175
172
|
setDisabled?: () => boolean;
|
|
176
173
|
}
|
|
177
174
|
```
|
|
@@ -183,24 +180,10 @@ interface BusinessRule {
|
|
|
183
180
|
// 'businessTypeField' is set to 'Corporation' or 'LLC'
|
|
184
181
|
taxIdField.applyBusinessRule(
|
|
185
182
|
{
|
|
186
|
-
setVisibility:
|
|
187
|
-
() =>
|
|
188
|
-
businessTypeField.value === "Corporation" ||
|
|
189
|
-
businessTypeField.value === "LLC",
|
|
190
|
-
],
|
|
191
|
-
},
|
|
192
|
-
[businessTypeField] // Re-evaluate when businessTypeField changes
|
|
193
|
-
);
|
|
194
|
-
|
|
195
|
-
// Optionally disable 'clearValuesOnHide':
|
|
196
|
-
taxIdField.applyBusinessRule(
|
|
197
|
-
{
|
|
198
|
-
setVisibility: [
|
|
183
|
+
setVisibility:
|
|
199
184
|
() =>
|
|
200
185
|
businessTypeField.value === "Corporation" ||
|
|
201
|
-
businessTypeField.value === "LLC"
|
|
202
|
-
false, // defaults to true. False will prevent the fields from losing it's value if it is hidden
|
|
203
|
-
],
|
|
186
|
+
businessTypeField.value === "LLC"
|
|
204
187
|
},
|
|
205
188
|
[businessTypeField] // Re-evaluate when businessTypeField changes
|
|
206
189
|
);
|
|
@@ -212,17 +195,17 @@ taxIdField.applyBusinessRule(
|
|
|
212
195
|
// Require 'taxIdField' when 'businessTypeField' is 'Corporation' or 'LLC'
|
|
213
196
|
taxIdField.applyBusinessRule(
|
|
214
197
|
{
|
|
215
|
-
|
|
216
|
-
function () {
|
|
198
|
+
setRequirements: () => ({
|
|
199
|
+
isRequired: function () {
|
|
217
200
|
return (
|
|
218
201
|
businessTypeField.value === "Corporation" ||
|
|
219
202
|
businessTypeField.value === "LLC"
|
|
220
203
|
);
|
|
221
204
|
},
|
|
222
|
-
function () {
|
|
205
|
+
isValid: function () {
|
|
223
206
|
return this.value != null && this.value !== "";
|
|
224
207
|
},
|
|
225
|
-
|
|
208
|
+
})
|
|
226
209
|
},
|
|
227
210
|
[businessTypeField] // Revalidate when businessTypeField changes
|
|
228
211
|
);
|
|
@@ -234,10 +217,10 @@ taxIdField.applyBusinessRule(
|
|
|
234
217
|
// Set default industry value when 'businessTypeField' is 'Corporation'
|
|
235
218
|
industryField.applyBusinessRule(
|
|
236
219
|
{
|
|
237
|
-
setValue:
|
|
238
|
-
() => businessTypeField.value === "Corporation",
|
|
239
|
-
"Corporate"
|
|
240
|
-
|
|
220
|
+
setValue: () => ({
|
|
221
|
+
condition: () => businessTypeField.value === "Corporation",
|
|
222
|
+
value: "Corporate"
|
|
223
|
+
})
|
|
241
224
|
},
|
|
242
225
|
[businessTypeField] // Apply value when businessTypeField changes
|
|
243
226
|
);
|
|
@@ -387,7 +370,7 @@ bindForm("form-guid").then((form) => {
|
|
|
387
370
|
* @param formGuid Unique identifier for the form
|
|
388
371
|
* @returns Promise resolving to form element references
|
|
389
372
|
*/
|
|
390
|
-
function bindForm(formGuid: string): Promise<
|
|
373
|
+
function bindForm(formGuid: string): Promise<PowerPagesElementArray & Record<string: PowerPagesElement>>;
|
|
391
374
|
```
|
|
392
375
|
|
|
393
376
|
##### Benefits
|
|
@@ -464,7 +447,7 @@ await API.updateRecord("contacts", "record-guid", {
|
|
|
464
447
|
|
|
465
448
|
## Best Practices
|
|
466
449
|
|
|
467
|
-
1. Always await
|
|
450
|
+
1. Always await PowerPagesElement creation:
|
|
468
451
|
|
|
469
452
|
```typescript
|
|
470
453
|
const node = await createRef("#element");
|
|
@@ -1,44 +1,41 @@
|
|
|
1
1
|
/// <reference path="../globals.d.ts" />
|
|
2
|
+
import type VisibilityManager from "../ancillary/VisibilityManager.d.ts";
|
|
3
|
+
import type EventManager from "../ancillary/EventManager.d.ts";
|
|
4
|
+
import type ValueManager from "../ancillary/ValueManager.d.ts";
|
|
2
5
|
export default class DOMNodeReference {
|
|
3
6
|
static instances: DOMNodeReference[];
|
|
4
7
|
[key: symbol]: (...arg: any[]) => any;
|
|
5
8
|
target: Element | string;
|
|
6
9
|
logicalName?: string;
|
|
7
10
|
root: Element;
|
|
8
|
-
protected
|
|
9
|
-
protected
|
|
10
|
-
protected _defaultDisplay: string;
|
|
11
|
-
protected _observers: Array<MutationObserver | ResizeObserver>;
|
|
12
|
-
protected _boundListeners: Array<BoundEventListener>;
|
|
13
|
-
protected _dependents: Dependants;
|
|
14
|
-
protected _isRadio: boolean;
|
|
15
|
-
protected _radioType: RadioType | null;
|
|
11
|
+
protected timeoutMs: number;
|
|
12
|
+
protected isLoaded: boolean;
|
|
16
13
|
/**
|
|
17
14
|
* The value of the element that this node represents
|
|
18
15
|
* stays in syncs with the live DOM elements?.,m via event handler
|
|
19
16
|
*/
|
|
20
|
-
value: any;
|
|
17
|
+
get value(): any;
|
|
18
|
+
set value(newValue: any);
|
|
19
|
+
get checked(): boolean;
|
|
21
20
|
/**
|
|
22
21
|
* The element targeted when instantiating DOMNodeReference.
|
|
23
22
|
* Made available in order to perform normal DOM traversal,
|
|
24
23
|
* or access properties not available through this class.
|
|
25
24
|
*/
|
|
26
25
|
element: HTMLElement;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
visibilityManager: VisibilityManager | null;
|
|
27
|
+
valueManager: ValueManager | null;
|
|
28
|
+
eventManager: EventManager | null;
|
|
30
29
|
/**
|
|
31
30
|
* Represents the 'yes' option of a boolean radio field.
|
|
32
31
|
* This property is only available when the parent node
|
|
33
32
|
* is a main field for a boolean radio input.
|
|
34
33
|
*/
|
|
35
|
-
yesRadio: DOMNodeReference | null;
|
|
36
34
|
/**
|
|
37
35
|
* Represents the 'no' option of a boolean radio field.
|
|
38
36
|
* This property is only available when the parent node
|
|
39
37
|
* is a main field for a boolean radio input.
|
|
40
38
|
*/
|
|
41
|
-
noRadio: DOMNodeReference | null;
|
|
42
39
|
/**
|
|
43
40
|
* Creates an instance of DOMNodeReference.
|
|
44
41
|
* @param target - The CSS selector to find the desired DOM element.
|
|
@@ -55,24 +52,14 @@ export default class DOMNodeReference {
|
|
|
55
52
|
protected _determineEventType(): keyof HTMLElementEventMap;
|
|
56
53
|
protected _isDateInput(): boolean;
|
|
57
54
|
protected _isValidFormElement(element: Element): element is FormElement;
|
|
58
|
-
protected _registerEventListener(element: Element, eventType: keyof HTMLElementEventMap, handler: (e: Event) => unknown): void;
|
|
59
55
|
protected _dateSync(element: HTMLInputElement): Promise<void>;
|
|
60
|
-
/**
|
|
61
|
-
* Gets the current value of the element based on its type
|
|
62
|
-
* @protected
|
|
63
|
-
* @returns Object containing value and optional checked state
|
|
64
|
-
*/
|
|
65
|
-
protected _getElementValue(): Promise<ElementValue>;
|
|
66
|
-
protected _attachVisibilityController(): void;
|
|
67
|
-
protected _attachRadioButtons(): Promise<void>;
|
|
68
56
|
protected _bindMethods(): void;
|
|
69
57
|
/**
|
|
70
58
|
* Updates the value and checked state based on element type
|
|
71
59
|
* @public
|
|
72
60
|
*/
|
|
73
61
|
updateValue(e?: Event): Promise<void>;
|
|
74
|
-
protected
|
|
75
|
-
protected _validateValue(value: any): any;
|
|
62
|
+
protected triggerDependentsHandlers(): void;
|
|
76
63
|
/**
|
|
77
64
|
* Sets up an event listener based on the specified event type, executing the specified
|
|
78
65
|
* event handler
|
|
@@ -115,13 +102,10 @@ export default class DOMNodeReference {
|
|
|
115
102
|
* Clears all values and states of the element.
|
|
116
103
|
* Handles different input types appropriately, and can be called
|
|
117
104
|
* on an element containing N child inputs to clear all
|
|
118
|
-
*
|
|
119
|
-
* @returns - Instance of this [provides option to method chain]
|
|
120
|
-
* @throws If clearing values fails
|
|
121
105
|
*/
|
|
122
|
-
clearValue():
|
|
106
|
+
clearValue(): void;
|
|
123
107
|
protected _getChildren(): DOMNodeReference[] | null;
|
|
124
|
-
protected
|
|
108
|
+
protected callAgainstChildrenInputs(callback: (child: DOMNodeReference) => any): void;
|
|
125
109
|
/**
|
|
126
110
|
* Enables the element so that users can input data
|
|
127
111
|
* @returns - Instance of this [provides option to method chain]
|
|
@@ -181,15 +165,11 @@ export default class DOMNodeReference {
|
|
|
181
165
|
*/
|
|
182
166
|
remove(): this;
|
|
183
167
|
/**
|
|
184
|
-
*
|
|
185
|
-
* @
|
|
168
|
+
* Sets inline CSS styles on the element.
|
|
169
|
+
* @param options - An object containing CSS property-value pairs, e.g., { display: 'block' }.
|
|
170
|
+
* @returns The instance, enabling method chaining.
|
|
186
171
|
*/
|
|
187
172
|
setStyle(options: Partial<CSSStyleDeclaration>): this;
|
|
188
|
-
/**
|
|
189
|
-
* Unchecks both the yes and no radio buttons if they exist.
|
|
190
|
-
* @returns - Instance of this [provides option to method chain]
|
|
191
|
-
*/
|
|
192
|
-
uncheckRadios(): DOMNodeReference;
|
|
193
173
|
/**
|
|
194
174
|
* Applies a business rule to manage visibility, required state, value, and disabled state dynamically.
|
|
195
175
|
* @see {@link BusinessRule}
|
|
@@ -197,8 +177,8 @@ export default class DOMNodeReference {
|
|
|
197
177
|
* @param dependencies For re-evaluation of conditions when the state of the dependencies change
|
|
198
178
|
* @returns Instance of this for method chaining.
|
|
199
179
|
*/
|
|
200
|
-
applyBusinessRule(rule: BusinessRule, dependencies: DOMNodeReference
|
|
201
|
-
protected
|
|
180
|
+
applyBusinessRule(rule: BusinessRule, dependencies: DependencyArray<DOMNodeReference>): DOMNodeReference;
|
|
181
|
+
protected _returnBusinessRuleHandler(rule: BusinessRule): BusinessRuleHandler;
|
|
202
182
|
protected _createValidator(evaluationFunction: () => boolean): void;
|
|
203
183
|
/**
|
|
204
184
|
* Sets up tracking for dependencies using both event listeners and mutation observers.
|
|
@@ -207,9 +187,7 @@ export default class DOMNodeReference {
|
|
|
207
187
|
* @param dependencies Array of dependent DOM nodes to track
|
|
208
188
|
* all other options defaults to true
|
|
209
189
|
*/
|
|
210
|
-
protected _configureDependencyTracking(handler:
|
|
211
|
-
protected _getVisibility(): boolean;
|
|
212
|
-
protected _receiveNotification(): void;
|
|
190
|
+
protected _configureDependencyTracking(handler: DependencyHandler, dependencies: DOMNodeReference[]): void;
|
|
213
191
|
/**
|
|
214
192
|
* Sets the required level for the field by adding or removing the "required-field" class on the label.
|
|
215
193
|
*
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference path="../globals.d.ts" />
|
|
2
|
+
import type DOMNodeReference from "./DOMNodeReference.d.ts";
|
|
3
|
+
declare type EventType = string;
|
|
4
|
+
declare type Handler = (this: DOMNodeReference, ...args: any[]) => void;
|
|
5
|
+
/********/ /********/ export default class EventManager {
|
|
6
|
+
private readonly events;
|
|
7
|
+
private readonly listeners;
|
|
8
|
+
private readonly dependencyHandlers;
|
|
9
|
+
private observers;
|
|
10
|
+
private boundListeners;
|
|
11
|
+
constructor();
|
|
12
|
+
dispatchDependencyHandlers(): void;
|
|
13
|
+
registerDependent(dependency: DOMNodeReference, handler: Handler): true | false;
|
|
14
|
+
registerEvent(event: EventType, handler: Handler): true | false;
|
|
15
|
+
registerListener(event: EventType, listener: DOMNodeReference): true | false;
|
|
16
|
+
emit(eventType: EventType, ...args: any[]): void;
|
|
17
|
+
stopListening(listener: DOMNodeReference): void;
|
|
18
|
+
registerObserver(observer: MutationObserver | ResizeObserver, observerOptions: {
|
|
19
|
+
nodeToObserve: Element;
|
|
20
|
+
options: Partial<ResizeObserverOptions> | Partial<MutationObserverInit>;
|
|
21
|
+
}): void;
|
|
22
|
+
registerDOMEventListener(element: Element, eventType: keyof HTMLElementEventMap, handler: (e: Event) => unknown): void;
|
|
23
|
+
destroy(): void;
|
|
24
|
+
}
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference path="../globals.d.ts" />
|
|
2
|
+
import DOMNodeReference from "./DOMNodeReference.d.ts";
|
|
3
|
+
export default class Radio extends DOMNodeReference {
|
|
4
|
+
[key: symbol]: (...arg: any[]) => any;
|
|
5
|
+
protected radioType: RadioType | null;
|
|
6
|
+
radioParent: DOMNodeReference | undefined;
|
|
7
|
+
constructor(parent: DOMNodeReference, target: Element | string, root: Element | undefined, timeoutMs: number, radioType: RadioType);
|
|
8
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/// <reference path="../globals.d.ts" />
|
|
2
|
+
import type DOMNodeReference from "./DOMNodeReference.d.ts";
|
|
3
|
+
import Radio from "./Radio.d.ts";
|
|
4
|
+
declare interface ValueManagerProps {
|
|
5
|
+
element: HTMLElement;
|
|
6
|
+
noRadio?: Radio;
|
|
7
|
+
yesRadio?: Radio;
|
|
8
|
+
radioParent?: DOMNodeReference;
|
|
9
|
+
isRadio: boolean;
|
|
10
|
+
}
|
|
11
|
+
export default class ValueManager {
|
|
12
|
+
value: any;
|
|
13
|
+
checked: true | false;
|
|
14
|
+
private element;
|
|
15
|
+
private noRadio?;
|
|
16
|
+
private yesRadio?;
|
|
17
|
+
radioParent?: DOMNodeReference | undefined;
|
|
18
|
+
private isRadio;
|
|
19
|
+
constructor(properties: ValueManagerProps);
|
|
20
|
+
setValue(value: any): void;
|
|
21
|
+
updateValue(e?: Event): Promise<void>;
|
|
22
|
+
getElementValue(): Promise<ElementValue>;
|
|
23
|
+
protected _validateValue(value: any): any;
|
|
24
|
+
clearValue(): void;
|
|
25
|
+
destroy(): void;
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference path="../globals.d.ts" />
|
|
2
|
+
export default class VisibilityManager {
|
|
3
|
+
private visibilityController;
|
|
4
|
+
private defaultVisibility;
|
|
5
|
+
constructor(target: HTMLElement);
|
|
6
|
+
hide(): void;
|
|
7
|
+
show(): void;
|
|
8
|
+
toggleVisibility(shouldShow: boolean): void;
|
|
9
|
+
getVisibility(): true | false;
|
|
10
|
+
destroy(): void;
|
|
11
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference path="../globals.d.ts" />
|
|
2
2
|
/**
|
|
3
|
-
* For use in setting up event management in the instances of
|
|
4
|
-
* @see {@link
|
|
3
|
+
* For use in setting up event management in the instances of PowerPagesElement
|
|
4
|
+
* @see {@link PowerPagesElement}
|
|
5
5
|
*/
|
|
6
6
|
export declare const EventTypes: {
|
|
7
7
|
readonly CHECKBOX: "click";
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/// <reference path="../globals.d.ts" />
|
|
2
|
+
import DOMNodeReference from "../ancillary/DOMNodeReference.d.ts";
|
|
3
|
+
import Radio from "../ancillary/Radio.d.ts";
|
|
4
|
+
export default class PowerPagesElement extends DOMNodeReference {
|
|
5
|
+
[key: symbol]: (...arg: any[]) => any;
|
|
6
|
+
/**
|
|
7
|
+
* Represents the 'yes' option of a boolean radio field.
|
|
8
|
+
* This property is only available when the parent node
|
|
9
|
+
* is a main field for a boolean radio input.
|
|
10
|
+
*/
|
|
11
|
+
yesRadio: Radio | undefined;
|
|
12
|
+
/**
|
|
13
|
+
* Represents the 'no' option of a boolean radio field.
|
|
14
|
+
* This property is only available when the parent node
|
|
15
|
+
* is a main field for a boolean radio input.
|
|
16
|
+
*/
|
|
17
|
+
noRadio: Radio | undefined;
|
|
18
|
+
/**
|
|
19
|
+
* Creates an instance of PowerPagesElement.
|
|
20
|
+
* @param target - The CSS selector to find the desired DOM element.
|
|
21
|
+
* @param root - Optionally specify the element within to search for the element targeted by 'target'
|
|
22
|
+
* Defaults to 'document.body'
|
|
23
|
+
*/
|
|
24
|
+
/******/ /******/ constructor(target: Element | string, root: Element | undefined, timeoutMs: number);
|
|
25
|
+
protected _attachRadioButtons(): Promise<void>;
|
|
26
|
+
clearValue(): void;
|
|
27
|
+
/**
|
|
28
|
+
* Unchecks both the yes and no radio buttons if they exist.
|
|
29
|
+
* @returns - Instance of this [provides option to method chain]
|
|
30
|
+
*/
|
|
31
|
+
uncheckRadios(): DOMNodeReference;
|
|
32
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference path="../globals.d.ts" />
|
|
2
|
+
import type PowerPagesElement from "./PowerPagesElement.d.ts";
|
|
3
|
+
export default class PowerPagesElementArray extends Array<PowerPagesElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Hides all the containers of the PowerPagesElement instances in the array.
|
|
6
|
+
*/
|
|
7
|
+
hideAll(this: PowerPagesElementArray): PowerPagesElementArray;
|
|
8
|
+
/**
|
|
9
|
+
* Shows all the containers of the PowerPagesElement instances in the array.
|
|
10
|
+
*/
|
|
11
|
+
showAll(this: PowerPagesElementArray): PowerPagesElementArray;
|
|
12
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/// <reference path="../globals.d.ts" />
|
|
2
|
-
import type
|
|
3
|
-
import type
|
|
2
|
+
import type PowerPagesElementArray from "./PowerPagesElementArray.d.ts";
|
|
3
|
+
import type PowerPagesElement from "./PowerPagesElement.d.ts";
|
|
4
4
|
/**
|
|
5
5
|
* When loading into a page in PowerPages that has a form,
|
|
6
6
|
* you can use this function by passing in the GUID of the form, and you will receive an array/record
|
|
7
|
-
* of {@link
|
|
7
|
+
* of {@link PowerPagesElement}s that represent all fields, sections, sub-grids, and tabs of the given form.
|
|
8
8
|
* Access these properties of the {@link BoundForm} using the logical name of the control you need to access: form['logical_name']
|
|
9
|
-
* you can then execute all the methods available from
|
|
9
|
+
* you can then execute all the methods available from PowerPagesElement
|
|
10
10
|
* @param formId - The string GUID of the form you want to bind to
|
|
11
|
-
* @returns An array of
|
|
11
|
+
* @returns An array of PowerPagesElements, accessible as properties of a Record<string, PowerPagesElement> i.e. formProp = form["some_logicalName"]
|
|
12
12
|
* @example
|
|
13
13
|
* ```js
|
|
14
14
|
* bindForm("form-guid-0000").then((form) => {
|
|
@@ -23,6 +23,6 @@ import type DOMNodeReferenceArray from "./DOMNodeReferenceArray.d.ts";
|
|
|
23
23
|
* const form = await bindForm("form-guid-0000")
|
|
24
24
|
* ```
|
|
25
25
|
* @see {@link BoundForm}
|
|
26
|
-
* @see {@link
|
|
26
|
+
* @see {@link PowerPagesElement}
|
|
27
27
|
*/
|
|
28
|
-
export default function bindForm(formId: string): Promise<
|
|
28
|
+
export default function bindForm(formId: string): Promise<PowerPagesElementArray & Record<string, PowerPagesElement>>;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
/// <reference path="../globals.d.ts" />
|
|
2
|
-
import
|
|
3
|
-
import
|
|
2
|
+
import type PowerPagesElementArray from "./PowerPagesElementArray.d.ts";
|
|
3
|
+
import PowerPagesElement from "./PowerPagesElement.d.ts";
|
|
4
4
|
/**
|
|
5
|
-
* Creates and initializes a
|
|
5
|
+
* Creates and initializes a PowerPagesElement instance.
|
|
6
6
|
* @see {@link CreationOptions}
|
|
7
|
-
* @param **target** - The selector, using `querySelector` syntax, for the desired DOM element. Or, the `HTMLElement` itself for which to create a
|
|
7
|
+
* @param **target** - The selector, using `querySelector` syntax, for the desired DOM element. Or, the `HTMLElement` itself for which to create a PowerPagesElement.
|
|
8
8
|
* @param **options** - Options for advanced retrieval of elements
|
|
9
9
|
* @param **options.multiple** - Should this call return an array of instantiated references, or just a single? Defaults to false, returning a single instance
|
|
10
10
|
* @param **options.root** - Optionally specify the element within to search for the element targeted by 'target'. Defaults to `document.body`
|
|
11
11
|
* @param **options.timeoutMs** - Optionally specify the amount of time that should be waited to find the targeted element before throwing error - useful for async DOM loading. Relies on MutationObserver. ***WARNING***: Implementing multiple references with timeout can result in infinite loading.
|
|
12
|
-
* @returns A promise that resolves to a Proxy of the initialized
|
|
12
|
+
* @returns A promise that resolves to a Proxy of the initialized PowerPagesElement instance.
|
|
13
13
|
*
|
|
14
|
-
* @see {@link
|
|
15
|
-
* @see {@link
|
|
14
|
+
* @see {@link PowerPagesElement}
|
|
15
|
+
* @see {@link PowerPagesElementArray}
|
|
16
16
|
* @see {@link enhanceArray}
|
|
17
17
|
*/
|
|
18
|
-
export default function
|
|
18
|
+
export default function createPowerPagesElement(target: string | HTMLElement, options?: {
|
|
19
19
|
/**
|
|
20
20
|
* Should this call return an array of instantiated references, or just a single?
|
|
21
21
|
* Defaults to false, returning a single instance.
|
|
@@ -32,8 +32,8 @@ export default function createDOMNodeReference(target: string | HTMLElement, opt
|
|
|
32
32
|
* WARNING: Implementing multiple references with timeout can result in infinite loading.
|
|
33
33
|
*/
|
|
34
34
|
timeoutMs?: number;
|
|
35
|
-
}): Promise<
|
|
36
|
-
export default function
|
|
35
|
+
}): Promise<PowerPagesElement>;
|
|
36
|
+
export default function createPowerPagesElement(target: string, options?: {
|
|
37
37
|
/**
|
|
38
38
|
* Should this call return an array of instantiated references, or just a single?
|
|
39
39
|
* Defaults to false, returning a single instance.
|
|
@@ -50,8 +50,8 @@ export default function createDOMNodeReference(target: string, options?: {
|
|
|
50
50
|
* WARNING: Implementing multiple references with timeout can result in infinite loading.
|
|
51
51
|
*/
|
|
52
52
|
timeoutMs?: number;
|
|
53
|
-
}): Promise<
|
|
54
|
-
export default function
|
|
53
|
+
}): Promise<PowerPagesElement>;
|
|
54
|
+
export default function createPowerPagesElement(target: Element, options?: {
|
|
55
55
|
/**
|
|
56
56
|
* Optionally specify the element within which to search for the element targeted by 'target'.
|
|
57
57
|
* Defaults to 'document.body'.
|
|
@@ -63,8 +63,8 @@ export default function createDOMNodeReference(target: Element, options?: {
|
|
|
63
63
|
* WARNING: Implementing multiple references with timeout can result in infinite loading.
|
|
64
64
|
*/
|
|
65
65
|
timeoutMs?: number;
|
|
66
|
-
}): Promise<
|
|
67
|
-
export default function
|
|
66
|
+
}): Promise<PowerPagesElement>;
|
|
67
|
+
export default function createPowerPagesElement(target: string, options?: {
|
|
68
68
|
/**
|
|
69
69
|
* Should this call return an array of instantiated references, or just a single?
|
|
70
70
|
* Defaults to false, returning a single instance.
|
|
@@ -81,8 +81,8 @@ export default function createDOMNodeReference(target: string, options?: {
|
|
|
81
81
|
* WARNING: Implementing multiple references with timeout can result in infinite loading.
|
|
82
82
|
*/
|
|
83
83
|
timeoutMs?: number;
|
|
84
|
-
}): Promise<
|
|
84
|
+
}): Promise<PowerPagesElementArray>;
|
|
85
85
|
export declare function validateOptions(options: Partial<CreationOptions>): void;
|
|
86
86
|
export declare function createProxyHandler(): {
|
|
87
|
-
get: (target:
|
|
87
|
+
get: (target: PowerPagesElement, prop: string | symbol) => any;
|
|
88
88
|
};
|
|
@@ -1,14 +1,37 @@
|
|
|
1
1
|
/// <reference path="../globals.d.ts" />
|
|
2
|
-
import type DOMNodeReference from "../
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import type DOMNodeReference from "../ancillary/DOMNodeReference.d.ts";
|
|
3
|
+
declare class CustomError extends Error {
|
|
4
|
+
node: DOMNodeReference;
|
|
5
|
+
constructor(node: DOMNodeReference, message: string);
|
|
5
6
|
}
|
|
6
|
-
|
|
7
|
-
constructor(
|
|
7
|
+
declare class InitializationError extends CustomError {
|
|
8
|
+
constructor(node: DOMNodeReference, error: string);
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
-
constructor(
|
|
10
|
+
declare class NodeNotFoundError extends CustomError {
|
|
11
|
+
constructor(node: DOMNodeReference);
|
|
11
12
|
}
|
|
12
|
-
|
|
13
|
-
constructor(node: DOMNodeReference
|
|
13
|
+
declare class Page_ValidatorsNotFoundError extends CustomError {
|
|
14
|
+
constructor(node: DOMNodeReference);
|
|
15
|
+
}
|
|
16
|
+
declare class BusinessRuleError extends CustomError {
|
|
17
|
+
constructor(node: DOMNodeReference);
|
|
18
|
+
}
|
|
19
|
+
declare class SelfReferenceError extends CustomError {
|
|
20
|
+
constructor(node: DOMNodeReference);
|
|
21
|
+
}
|
|
22
|
+
declare class LabelNotFoundError extends CustomError {
|
|
23
|
+
constructor(node: DOMNodeReference);
|
|
24
|
+
}
|
|
25
|
+
declare class IncorrectParameterError extends CustomError {
|
|
26
|
+
constructor(node: DOMNodeReference, functionName: string, argName: string, expectedTypes: string[], receivedType: any);
|
|
14
27
|
}
|
|
28
|
+
declare const Errors: {
|
|
29
|
+
NodeNotFoundError: typeof NodeNotFoundError;
|
|
30
|
+
InitializationError: typeof InitializationError;
|
|
31
|
+
Page_ValidatorsNotFoundError: typeof Page_ValidatorsNotFoundError;
|
|
32
|
+
BusinessRuleError: typeof BusinessRuleError;
|
|
33
|
+
SelfReferenceError: typeof SelfReferenceError;
|
|
34
|
+
LabelNotFoundError: typeof LabelNotFoundError;
|
|
35
|
+
IncorrectParameterError: typeof IncorrectParameterError;
|
|
36
|
+
};
|
|
37
|
+
export default Errors;
|
package/dist/src/globals.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/// <reference path="../core/
|
|
1
|
+
/// <reference path="../core/PowerPagesElement.ts"/>
|
|
2
2
|
|
|
3
3
|
declare type EventCallback = () => any;
|
|
4
4
|
|
|
@@ -70,7 +70,6 @@ declare interface Form extends Partial<SystemForm> {
|
|
|
70
70
|
formxml: string;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
|
|
74
73
|
declare interface BusinessRule {
|
|
75
74
|
/**
|
|
76
75
|
* @param condition A function that returns a boolean to determine
|
|
@@ -78,18 +77,18 @@ declare interface BusinessRule {
|
|
|
78
77
|
* otherwise, it is hidden.
|
|
79
78
|
|
|
80
79
|
*/
|
|
81
|
-
setVisibility?: (this:
|
|
80
|
+
setVisibility?: (this: PowerPagesElement) => boolean;
|
|
82
81
|
/**
|
|
83
82
|
* Configuration function for determining the required level, and field validity of the given fields
|
|
84
83
|
* @param isRequired - Function determining if field is required
|
|
85
|
-
* @param isRequired.this - Reference to this
|
|
84
|
+
* @param isRequired.this - Reference to this PowerPagesElement
|
|
86
85
|
* @param isValid - Function validating field input.
|
|
87
|
-
* @param isValid.this - Reference to this
|
|
86
|
+
* @param isValid.this - Reference to this PowerPagesElement
|
|
88
87
|
* @param isValid.isRequiredResult - Only available if 'isRequired' is also returned from the configuration function
|
|
89
88
|
*/
|
|
90
89
|
setRequirements?: () => {
|
|
91
|
-
isRequired?: (this:
|
|
92
|
-
isValid?: (this:
|
|
90
|
+
isRequired?: (this: PowerPagesElement) => boolean;
|
|
91
|
+
isValid?: (this: PowerPagesElement, isRequiredResult?: boolean) => boolean;
|
|
93
92
|
};
|
|
94
93
|
|
|
95
94
|
/**
|
|
@@ -99,16 +98,18 @@ declare interface BusinessRule {
|
|
|
99
98
|
* an expression returning a boolean
|
|
100
99
|
*/
|
|
101
100
|
setValue?: () => {
|
|
102
|
-
condition: (this:
|
|
101
|
+
condition: (this: PowerPagesElement) => boolean;
|
|
103
102
|
value: (() => any) | any;
|
|
104
103
|
};
|
|
105
104
|
/**
|
|
106
105
|
* @param condition A function to determine if this field
|
|
107
106
|
* should be enabled in a form, or disabled. True || 1 = disabled. False || 0 = enabled
|
|
108
107
|
*/
|
|
109
|
-
setDisabled?: (this:
|
|
108
|
+
setDisabled?: (this: PowerPagesElement) => boolean;
|
|
110
109
|
}
|
|
111
110
|
|
|
111
|
+
declare type DependencyArray<T> = [T, ...T[]];
|
|
112
|
+
|
|
112
113
|
declare interface CreationOptions {
|
|
113
114
|
/**
|
|
114
115
|
* Should this call return an array of instantiated references, or just a single?
|
|
@@ -130,9 +131,11 @@ declare interface CreationOptions {
|
|
|
130
131
|
timeoutMs?: number;
|
|
131
132
|
}
|
|
132
133
|
|
|
133
|
-
declare type
|
|
134
|
+
declare type DependencyHandler = () => void;
|
|
135
|
+
|
|
136
|
+
declare interface BusinessRuleHandler extends DependencyHandler {}
|
|
134
137
|
|
|
135
|
-
declare type
|
|
138
|
+
declare type Dependents = Map<PowerPagesElement, DependencyHandler>;
|
|
136
139
|
|
|
137
140
|
declare type ValueElement =
|
|
138
141
|
| HTMLInputElement
|