@design.estate/dees-catalog 3.70.1 → 3.71.1
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/dist_bundle/bundle.js +491 -160
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/00group-layout/dees-stepper/dees-stepper.d.ts +37 -0
- package/dist_ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.js +92 -91
- package/dist_ts_web/elements/00group-layout/dees-stepper/dees-stepper.js +348 -65
- package/dist_ts_web/elements/00group-layout/dees-tile/dees-tile.js +13 -3
- package/dist_ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.js +76 -1
- package/dist_ts_web/elements/00group-overlay/dees-modal/dees-modal.js +1 -8
- package/dist_watch/bundle.js +489 -158
- package/dist_watch/bundle.js.map +3 -3
- package/package.json +1 -1
- package/readme.plan.md +352 -0
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts +133 -130
- package/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts +345 -65
- package/ts_web/elements/00group-layout/dees-tile/dees-tile.ts +12 -2
- package/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts +75 -0
- package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts +0 -7
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-catalog',
|
|
6
|
-
version: '3.
|
|
6
|
+
version: '3.71.1',
|
|
7
7
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
import * as plugins from '../../00plugins.js';
|
|
1
2
|
import { DeesElement, type CSSResult, type TemplateResult } from '@design.estate/dees-element';
|
|
2
3
|
import * as domtools from '@design.estate/dees-domtools';
|
|
4
|
+
import type { DeesForm } from '../../00group-form/dees-form/dees-form.js';
|
|
5
|
+
import '../dees-tile/dees-tile.js';
|
|
3
6
|
export interface IStep {
|
|
4
7
|
title: string;
|
|
5
8
|
content: TemplateResult;
|
|
9
|
+
menuOptions?: plugins.tsclass.website.IMenuItem<DeesStepper>[];
|
|
6
10
|
validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
|
|
7
11
|
onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
|
|
8
12
|
validationFuncCalled?: boolean;
|
|
@@ -16,8 +20,17 @@ declare global {
|
|
|
16
20
|
export declare class DeesStepper extends DeesElement {
|
|
17
21
|
static demo: () => TemplateResult<1>;
|
|
18
22
|
static demoGroups: string[];
|
|
23
|
+
static createAndShow(optionsArg: {
|
|
24
|
+
steps: IStep[];
|
|
25
|
+
}): Promise<DeesStepper>;
|
|
19
26
|
accessor steps: IStep[];
|
|
20
27
|
accessor selectedStep: IStep;
|
|
28
|
+
accessor overlay: boolean;
|
|
29
|
+
accessor stepperZIndex: number;
|
|
30
|
+
accessor activeForm: DeesForm | null;
|
|
31
|
+
accessor activeFormValid: boolean;
|
|
32
|
+
private activeFormSubscription?;
|
|
33
|
+
private windowLayer?;
|
|
21
34
|
constructor();
|
|
22
35
|
static styles: CSSResult[];
|
|
23
36
|
render(): TemplateResult<1>;
|
|
@@ -28,4 +41,28 @@ export declare class DeesStepper extends DeesElement {
|
|
|
28
41
|
setScrollStatus(): Promise<void>;
|
|
29
42
|
goBack(): Promise<void>;
|
|
30
43
|
goNext(): void;
|
|
44
|
+
/**
|
|
45
|
+
* Scans the currently selected step for a <dees-form> in its content. When
|
|
46
|
+
* found, subscribes to the form's RxJS changeSubject so the primary
|
|
47
|
+
* menuOption button can auto-enable/disable as required fields are filled.
|
|
48
|
+
*
|
|
49
|
+
* If the form reference is the same as the previous activation (e.g. on a
|
|
50
|
+
* same-step re-render), we just recompute validity without re-subscribing.
|
|
51
|
+
*/
|
|
52
|
+
private scanActiveForm;
|
|
53
|
+
/**
|
|
54
|
+
* Recomputes activeFormValid by checking every required field in the active
|
|
55
|
+
* form for a non-empty value. Mirrors dees-form.updateRequiredStatus's logic
|
|
56
|
+
* but stores the result on the stepper instead of mutating a submit button.
|
|
57
|
+
*/
|
|
58
|
+
private recomputeFormValid;
|
|
59
|
+
/**
|
|
60
|
+
* Click handler for menuOption buttons in the footer. For the primary (last)
|
|
61
|
+
* button, if an active form is present, gates on required-field validity and
|
|
62
|
+
* triggers the form's gatherAndDispatch() before running the action. The
|
|
63
|
+
* action is awaited so any async work (e.g. goNext → scroll animation)
|
|
64
|
+
* completes before the click handler returns.
|
|
65
|
+
*/
|
|
66
|
+
private handleMenuOptionClick;
|
|
67
|
+
destroy(): Promise<void>;
|
|
31
68
|
}
|
|
@@ -1,134 +1,135 @@
|
|
|
1
1
|
import { html } from '@design.estate/dees-element';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
.steps=${[
|
|
2
|
+
import { DeesStepper } from './dees-stepper.js';
|
|
3
|
+
const demoSteps = [
|
|
5
4
|
{
|
|
6
5
|
title: 'Account Setup',
|
|
7
6
|
content: html `
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
17
|
-
},
|
|
7
|
+
<dees-form>
|
|
8
|
+
<dees-input-text key="email" label="Work Email" required></dees-input-text>
|
|
9
|
+
<dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
|
|
10
|
+
</dees-form>
|
|
11
|
+
`,
|
|
12
|
+
menuOptions: [
|
|
13
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
14
|
+
],
|
|
18
15
|
},
|
|
19
16
|
{
|
|
20
17
|
title: 'Profile Details',
|
|
21
18
|
content: html `
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
31
|
-
},
|
|
19
|
+
<dees-form>
|
|
20
|
+
<dees-input-text key="firstName" label="First Name" required></dees-input-text>
|
|
21
|
+
<dees-input-text key="lastName" label="Last Name" required></dees-input-text>
|
|
22
|
+
</dees-form>
|
|
23
|
+
`,
|
|
24
|
+
menuOptions: [
|
|
25
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
26
|
+
],
|
|
32
27
|
},
|
|
33
28
|
{
|
|
34
29
|
title: 'Contact Information',
|
|
35
30
|
content: html `
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
45
|
-
},
|
|
31
|
+
<dees-form>
|
|
32
|
+
<dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
|
|
33
|
+
<dees-input-text key="company" label="Company"></dees-input-text>
|
|
34
|
+
</dees-form>
|
|
35
|
+
`,
|
|
36
|
+
menuOptions: [
|
|
37
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
38
|
+
],
|
|
46
39
|
},
|
|
47
40
|
{
|
|
48
41
|
title: 'Team Size',
|
|
49
42
|
content: html `
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
43
|
+
<dees-form>
|
|
44
|
+
<dees-input-dropdown
|
|
45
|
+
key="teamSize"
|
|
46
|
+
label="How big is your team?"
|
|
47
|
+
.options=${[
|
|
55
48
|
{ label: '1-5', value: '1-5' },
|
|
56
49
|
{ label: '6-20', value: '6-20' },
|
|
57
50
|
{ label: '21-50', value: '21-50' },
|
|
58
51
|
{ label: '51+', value: '51+' },
|
|
59
52
|
]}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
68
|
-
},
|
|
53
|
+
required
|
|
54
|
+
></dees-input-dropdown>
|
|
55
|
+
</dees-form>
|
|
56
|
+
`,
|
|
57
|
+
menuOptions: [
|
|
58
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
59
|
+
],
|
|
69
60
|
},
|
|
70
61
|
{
|
|
71
62
|
title: 'Goals',
|
|
72
63
|
content: html `
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
64
|
+
<dees-form>
|
|
65
|
+
<dees-input-multitoggle
|
|
66
|
+
key="goal"
|
|
67
|
+
label="Main objective"
|
|
68
|
+
.options=${[
|
|
78
69
|
{ label: 'Onboarding', value: 'onboarding' },
|
|
79
70
|
{ label: 'Analytics', value: 'analytics' },
|
|
80
71
|
{ label: 'Automation', value: 'automation' },
|
|
81
72
|
]}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
90
|
-
},
|
|
73
|
+
required
|
|
74
|
+
></dees-input-multitoggle>
|
|
75
|
+
</dees-form>
|
|
76
|
+
`,
|
|
77
|
+
menuOptions: [
|
|
78
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
79
|
+
],
|
|
91
80
|
},
|
|
92
81
|
{
|
|
93
82
|
title: 'Brand Preferences',
|
|
94
83
|
content: html `
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
104
|
-
},
|
|
84
|
+
<dees-form>
|
|
85
|
+
<dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
|
|
86
|
+
<dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
|
|
87
|
+
</dees-form>
|
|
88
|
+
`,
|
|
89
|
+
menuOptions: [
|
|
90
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
91
|
+
],
|
|
105
92
|
},
|
|
106
93
|
{
|
|
107
94
|
title: 'Integrations',
|
|
108
95
|
content: html `
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
deesForm.addEventListener('formData', () => stepperArg.goNext(), { once: true });
|
|
121
|
-
},
|
|
96
|
+
<dees-form>
|
|
97
|
+
<dees-input-list
|
|
98
|
+
key="integrations"
|
|
99
|
+
label="Integrations in use"
|
|
100
|
+
placeholder="Add integration"
|
|
101
|
+
></dees-input-list>
|
|
102
|
+
</dees-form>
|
|
103
|
+
`,
|
|
104
|
+
menuOptions: [
|
|
105
|
+
{ name: 'Continue', action: async (stepper) => stepper.goNext() },
|
|
106
|
+
],
|
|
122
107
|
},
|
|
123
108
|
{
|
|
124
109
|
title: 'Review & Launch',
|
|
125
110
|
content: html `
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
111
|
+
<dees-panel>
|
|
112
|
+
<p>Almost there! Review your selections and launch whenever you're ready.</p>
|
|
113
|
+
</dees-panel>
|
|
114
|
+
`,
|
|
115
|
+
menuOptions: [
|
|
116
|
+
{ name: 'Launch', action: async (stepper) => stepper.goNext() },
|
|
117
|
+
],
|
|
130
118
|
},
|
|
131
|
-
]
|
|
132
|
-
|
|
119
|
+
];
|
|
120
|
+
const cloneSteps = () => demoSteps.map((step) => ({ ...step }));
|
|
121
|
+
export const stepperDemo = () => html `
|
|
122
|
+
<div style="position: absolute; inset: 0;">
|
|
123
|
+
<div
|
|
124
|
+
style="position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;"
|
|
125
|
+
>
|
|
126
|
+
<dees-button
|
|
127
|
+
@click=${async () => {
|
|
128
|
+
await DeesStepper.createAndShow({ steps: cloneSteps() });
|
|
129
|
+
}}
|
|
130
|
+
>Open stepper as overlay</dees-button>
|
|
131
|
+
</div>
|
|
132
|
+
<dees-stepper .steps=${cloneSteps()}></dees-stepper>
|
|
133
|
+
</div>
|
|
133
134
|
`;
|
|
134
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
135
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zdGVwcGVyLmRlbW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1sYXlvdXQvZGVlcy1zdGVwcGVyL2RlZXMtc3RlcHBlci5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsV0FBVyxFQUFjLE1BQU0sbUJBQW1CLENBQUM7QUFFNUQsTUFBTSxTQUFTLEdBQVk7SUFDekI7UUFDRSxLQUFLLEVBQUUsZUFBZTtRQUN0QixPQUFPLEVBQUUsSUFBSSxDQUFBOzs7OztLQUtaO1FBQ0QsV0FBVyxFQUFFO1lBQ1gsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFRLENBQUMsTUFBTSxFQUFFLEVBQUU7U0FDbkU7S0FDRjtJQUNEO1FBQ0UsS0FBSyxFQUFFLGlCQUFpQjtRQUN4QixPQUFPLEVBQUUsSUFBSSxDQUFBOzs7OztLQUtaO1FBQ0QsV0FBVyxFQUFFO1lBQ1gsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFRLENBQUMsTUFBTSxFQUFFLEVBQUU7U0FDbkU7S0FDRjtJQUNEO1FBQ0UsS0FBSyxFQUFFLHFCQUFxQjtRQUM1QixPQUFPLEVBQUUsSUFBSSxDQUFBOzs7OztLQUtaO1FBQ0QsV0FBVyxFQUFFO1lBQ1gsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFRLENBQUMsTUFBTSxFQUFFLEVBQUU7U0FDbkU7S0FDRjtJQUNEO1FBQ0UsS0FBSyxFQUFFLFdBQVc7UUFDbEIsT0FBTyxFQUFFLElBQUksQ0FBQTs7Ozs7cUJBS0k7WUFDVCxFQUFFLEtB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
|