tyrell-components 1.0.0-RC6
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/LICENSE +21 -0
- package/README.md +221 -0
- package/css/tyrell.css +1783 -0
- package/dist/tyrell.css +1783 -0
- package/dist/tyrell.js +2 -0
- package/lib/base/ty-component.d.ts +133 -0
- package/lib/base/ty-component.d.ts.map +1 -0
- package/lib/base/ty-component.js +297 -0
- package/lib/base/ty-component.js.map +1 -0
- package/lib/components/button.d.ts +126 -0
- package/lib/components/button.d.ts.map +1 -0
- package/lib/components/button.js +244 -0
- package/lib/components/button.js.map +1 -0
- package/lib/components/calendar-month.d.ts +132 -0
- package/lib/components/calendar-month.d.ts.map +1 -0
- package/lib/components/calendar-month.js +440 -0
- package/lib/components/calendar-month.js.map +1 -0
- package/lib/components/calendar-navigation.d.ts +137 -0
- package/lib/components/calendar-navigation.d.ts.map +1 -0
- package/lib/components/calendar-navigation.js +366 -0
- package/lib/components/calendar-navigation.js.map +1 -0
- package/lib/components/calendar.d.ts +166 -0
- package/lib/components/calendar.d.ts.map +1 -0
- package/lib/components/calendar.js +774 -0
- package/lib/components/calendar.js.map +1 -0
- package/lib/components/checkbox.d.ts +189 -0
- package/lib/components/checkbox.d.ts.map +1 -0
- package/lib/components/checkbox.js +400 -0
- package/lib/components/checkbox.js.map +1 -0
- package/lib/components/copy.d.ts +180 -0
- package/lib/components/copy.d.ts.map +1 -0
- package/lib/components/copy.js +393 -0
- package/lib/components/copy.js.map +1 -0
- package/lib/components/date-picker.d.ts +379 -0
- package/lib/components/date-picker.d.ts.map +1 -0
- package/lib/components/date-picker.js +1586 -0
- package/lib/components/date-picker.js.map +1 -0
- package/lib/components/dropdown.d.ts +402 -0
- package/lib/components/dropdown.d.ts.map +1 -0
- package/lib/components/dropdown.js +1552 -0
- package/lib/components/dropdown.js.map +1 -0
- package/lib/components/icon.d.ts +118 -0
- package/lib/components/icon.d.ts.map +1 -0
- package/lib/components/icon.js +245 -0
- package/lib/components/icon.js.map +1 -0
- package/lib/components/input.d.ts +270 -0
- package/lib/components/input.d.ts.map +1 -0
- package/lib/components/input.js +721 -0
- package/lib/components/input.js.map +1 -0
- package/lib/components/modal.d.ts +58 -0
- package/lib/components/modal.d.ts.map +1 -0
- package/lib/components/modal.js +473 -0
- package/lib/components/modal.js.map +1 -0
- package/lib/components/multiselect.d.ts +397 -0
- package/lib/components/multiselect.d.ts.map +1 -0
- package/lib/components/multiselect.js +1580 -0
- package/lib/components/multiselect.js.map +1 -0
- package/lib/components/option.d.ts +66 -0
- package/lib/components/option.d.ts.map +1 -0
- package/lib/components/option.js +314 -0
- package/lib/components/option.js.map +1 -0
- package/lib/components/popup.d.ts +43 -0
- package/lib/components/popup.d.ts.map +1 -0
- package/lib/components/popup.js +380 -0
- package/lib/components/popup.js.map +1 -0
- package/lib/components/radio.d.ts +198 -0
- package/lib/components/radio.d.ts.map +1 -0
- package/lib/components/radio.js +437 -0
- package/lib/components/radio.js.map +1 -0
- package/lib/components/resize-observer.d.ts +48 -0
- package/lib/components/resize-observer.d.ts.map +1 -0
- package/lib/components/resize-observer.js +108 -0
- package/lib/components/resize-observer.js.map +1 -0
- package/lib/components/scroll-container.d.ts +51 -0
- package/lib/components/scroll-container.d.ts.map +1 -0
- package/lib/components/scroll-container.js +239 -0
- package/lib/components/scroll-container.js.map +1 -0
- package/lib/components/step.d.ts +26 -0
- package/lib/components/step.d.ts.map +1 -0
- package/lib/components/step.js +75 -0
- package/lib/components/step.js.map +1 -0
- package/lib/components/switch.d.ts +111 -0
- package/lib/components/switch.d.ts.map +1 -0
- package/lib/components/switch.js +240 -0
- package/lib/components/switch.js.map +1 -0
- package/lib/components/tab.d.ts +23 -0
- package/lib/components/tab.d.ts.map +1 -0
- package/lib/components/tab.js +76 -0
- package/lib/components/tab.js.map +1 -0
- package/lib/components/tabs.d.ts +93 -0
- package/lib/components/tabs.d.ts.map +1 -0
- package/lib/components/tabs.js +653 -0
- package/lib/components/tabs.js.map +1 -0
- package/lib/components/tag.d.ts +144 -0
- package/lib/components/tag.d.ts.map +1 -0
- package/lib/components/tag.js +316 -0
- package/lib/components/tag.js.map +1 -0
- package/lib/components/textarea.d.ts +241 -0
- package/lib/components/textarea.d.ts.map +1 -0
- package/lib/components/textarea.js +585 -0
- package/lib/components/textarea.js.map +1 -0
- package/lib/components/tooltip.d.ts +40 -0
- package/lib/components/tooltip.d.ts.map +1 -0
- package/lib/components/tooltip.js +439 -0
- package/lib/components/tooltip.js.map +1 -0
- package/lib/components/wizard.d.ts +86 -0
- package/lib/components/wizard.d.ts.map +1 -0
- package/lib/components/wizard.js +636 -0
- package/lib/components/wizard.js.map +1 -0
- package/lib/icons/fontawesome/brands.d.ts +557 -0
- package/lib/icons/fontawesome/brands.d.ts.map +1 -0
- package/lib/icons/fontawesome/brands.js +557 -0
- package/lib/icons/fontawesome/brands.js.map +1 -0
- package/lib/icons/fontawesome/regular.d.ts +281 -0
- package/lib/icons/fontawesome/regular.d.ts.map +1 -0
- package/lib/icons/fontawesome/regular.js +281 -0
- package/lib/icons/fontawesome/regular.js.map +1 -0
- package/lib/icons/fontawesome/solid.d.ts +1992 -0
- package/lib/icons/fontawesome/solid.d.ts.map +1 -0
- package/lib/icons/fontawesome/solid.js +1992 -0
- package/lib/icons/fontawesome/solid.js.map +1 -0
- package/lib/icons/heroicons/micro.d.ts +324 -0
- package/lib/icons/heroicons/micro.d.ts.map +1 -0
- package/lib/icons/heroicons/micro.js +1032 -0
- package/lib/icons/heroicons/micro.js.map +1 -0
- package/lib/icons/heroicons/mini.d.ts +332 -0
- package/lib/icons/heroicons/mini.d.ts.map +1 -0
- package/lib/icons/heroicons/mini.js +1038 -0
- package/lib/icons/heroicons/mini.js.map +1 -0
- package/lib/icons/heroicons/outline.d.ts +332 -0
- package/lib/icons/heroicons/outline.d.ts.map +1 -0
- package/lib/icons/heroicons/outline.js +993 -0
- package/lib/icons/heroicons/outline.js.map +1 -0
- package/lib/icons/heroicons/solid.d.ts +332 -0
- package/lib/icons/heroicons/solid.d.ts.map +1 -0
- package/lib/icons/heroicons/solid.js +1063 -0
- package/lib/icons/heroicons/solid.js.map +1 -0
- package/lib/icons/lucide.d.ts +1872 -0
- package/lib/icons/lucide.d.ts.map +1 -0
- package/lib/icons/lucide.js +28212 -0
- package/lib/icons/lucide.js.map +1 -0
- package/lib/icons/material/filled.d.ts +2180 -0
- package/lib/icons/material/filled.d.ts.map +1 -0
- package/lib/icons/material/filled.js +14003 -0
- package/lib/icons/material/filled.js.map +1 -0
- package/lib/icons/material/outlined.d.ts +2142 -0
- package/lib/icons/material/outlined.d.ts.map +1 -0
- package/lib/icons/material/outlined.js +14545 -0
- package/lib/icons/material/outlined.js.map +1 -0
- package/lib/icons/material/round.d.ts +2147 -0
- package/lib/icons/material/round.d.ts.map +1 -0
- package/lib/icons/material/round.js +14779 -0
- package/lib/icons/material/round.js.map +1 -0
- package/lib/icons/material/sharp.d.ts +2147 -0
- package/lib/icons/material/sharp.d.ts.map +1 -0
- package/lib/icons/material/sharp.js +14189 -0
- package/lib/icons/material/sharp.js.map +1 -0
- package/lib/icons/material/two-tone.d.ts +2185 -0
- package/lib/icons/material/two-tone.d.ts.map +1 -0
- package/lib/icons/material/two-tone.js +17152 -0
- package/lib/icons/material/two-tone.js.map +1 -0
- package/lib/index.d.ts +78 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +71 -0
- package/lib/index.js.map +1 -0
- package/lib/styles/button.d.ts +14 -0
- package/lib/styles/button.d.ts.map +1 -0
- package/lib/styles/button.js +457 -0
- package/lib/styles/button.js.map +1 -0
- package/lib/styles/calendar-month.d.ts +6 -0
- package/lib/styles/calendar-month.d.ts.map +1 -0
- package/lib/styles/calendar-month.js +275 -0
- package/lib/styles/calendar-month.js.map +1 -0
- package/lib/styles/calendar-navigation.d.ts +6 -0
- package/lib/styles/calendar-navigation.d.ts.map +1 -0
- package/lib/styles/calendar-navigation.js +143 -0
- package/lib/styles/calendar-navigation.js.map +1 -0
- package/lib/styles/calendar.d.ts +6 -0
- package/lib/styles/calendar.d.ts.map +1 -0
- package/lib/styles/calendar.js +28 -0
- package/lib/styles/calendar.js.map +1 -0
- package/lib/styles/checkbox.d.ts +9 -0
- package/lib/styles/checkbox.d.ts.map +1 -0
- package/lib/styles/checkbox.js +19 -0
- package/lib/styles/checkbox.js.map +1 -0
- package/lib/styles/copy.d.ts +7 -0
- package/lib/styles/copy.d.ts.map +1 -0
- package/lib/styles/copy.js +94 -0
- package/lib/styles/copy.js.map +1 -0
- package/lib/styles/custom-scrollbar.d.ts +6 -0
- package/lib/styles/custom-scrollbar.d.ts.map +1 -0
- package/lib/styles/custom-scrollbar.js +157 -0
- package/lib/styles/custom-scrollbar.js.map +1 -0
- package/lib/styles/date-picker.d.ts +6 -0
- package/lib/styles/date-picker.d.ts.map +1 -0
- package/lib/styles/date-picker.js +435 -0
- package/lib/styles/date-picker.js.map +1 -0
- package/lib/styles/dropdown.d.ts +12 -0
- package/lib/styles/dropdown.d.ts.map +1 -0
- package/lib/styles/dropdown.js +983 -0
- package/lib/styles/dropdown.js.map +1 -0
- package/lib/styles/icon.d.ts +6 -0
- package/lib/styles/icon.d.ts.map +1 -0
- package/lib/styles/icon.js +241 -0
- package/lib/styles/icon.js.map +1 -0
- package/lib/styles/input.d.ts +7 -0
- package/lib/styles/input.d.ts.map +1 -0
- package/lib/styles/input.js +685 -0
- package/lib/styles/input.js.map +1 -0
- package/lib/styles/modal.d.ts +8 -0
- package/lib/styles/modal.d.ts.map +1 -0
- package/lib/styles/modal.js +134 -0
- package/lib/styles/modal.js.map +1 -0
- package/lib/styles/multiselect.d.ts +6 -0
- package/lib/styles/multiselect.d.ts.map +1 -0
- package/lib/styles/multiselect.js +774 -0
- package/lib/styles/multiselect.js.map +1 -0
- package/lib/styles/option.d.ts +6 -0
- package/lib/styles/option.d.ts.map +1 -0
- package/lib/styles/option.js +116 -0
- package/lib/styles/option.js.map +1 -0
- package/lib/styles/popup.d.ts +8 -0
- package/lib/styles/popup.d.ts.map +1 -0
- package/lib/styles/popup.js +95 -0
- package/lib/styles/popup.js.map +1 -0
- package/lib/styles/radio.d.ts +8 -0
- package/lib/styles/radio.d.ts.map +1 -0
- package/lib/styles/radio.js +160 -0
- package/lib/styles/radio.js.map +1 -0
- package/lib/styles/resize-observer.d.ts +6 -0
- package/lib/styles/resize-observer.d.ts.map +1 -0
- package/lib/styles/resize-observer.js +18 -0
- package/lib/styles/resize-observer.js.map +1 -0
- package/lib/styles/scroll-container.d.ts +6 -0
- package/lib/styles/scroll-container.d.ts.map +1 -0
- package/lib/styles/scroll-container.js +198 -0
- package/lib/styles/scroll-container.js.map +1 -0
- package/lib/styles/step.d.ts +5 -0
- package/lib/styles/step.d.ts.map +1 -0
- package/lib/styles/step.js +50 -0
- package/lib/styles/step.js.map +1 -0
- package/lib/styles/switch.d.ts +9 -0
- package/lib/styles/switch.d.ts.map +1 -0
- package/lib/styles/switch.js +100 -0
- package/lib/styles/switch.js.map +1 -0
- package/lib/styles/tab.d.ts +5 -0
- package/lib/styles/tab.d.ts.map +1 -0
- package/lib/styles/tab.js +51 -0
- package/lib/styles/tab.js.map +1 -0
- package/lib/styles/tabs.d.ts +13 -0
- package/lib/styles/tabs.d.ts.map +1 -0
- package/lib/styles/tabs.js +184 -0
- package/lib/styles/tabs.js.map +1 -0
- package/lib/styles/tag.d.ts +6 -0
- package/lib/styles/tag.d.ts.map +1 -0
- package/lib/styles/tag.js +420 -0
- package/lib/styles/tag.js.map +1 -0
- package/lib/styles/textarea.d.ts +6 -0
- package/lib/styles/textarea.d.ts.map +1 -0
- package/lib/styles/textarea.js +350 -0
- package/lib/styles/textarea.js.map +1 -0
- package/lib/styles/tooltip.d.ts +9 -0
- package/lib/styles/tooltip.d.ts.map +1 -0
- package/lib/styles/tooltip.js +136 -0
- package/lib/styles/tooltip.js.map +1 -0
- package/lib/styles/wizard.d.ts +25 -0
- package/lib/styles/wizard.d.ts.map +1 -0
- package/lib/styles/wizard.js +325 -0
- package/lib/styles/wizard.js.map +1 -0
- package/lib/types/common.d.ts +143 -0
- package/lib/types/common.d.ts.map +1 -0
- package/lib/types/common.js +5 -0
- package/lib/types/common.js.map +1 -0
- package/lib/utils/calendar-utils.d.ts +176 -0
- package/lib/utils/calendar-utils.d.ts.map +1 -0
- package/lib/utils/calendar-utils.js +370 -0
- package/lib/utils/calendar-utils.js.map +1 -0
- package/lib/utils/custom-scrollbar.d.ts +82 -0
- package/lib/utils/custom-scrollbar.d.ts.map +1 -0
- package/lib/utils/custom-scrollbar.js +320 -0
- package/lib/utils/custom-scrollbar.js.map +1 -0
- package/lib/utils/icon-registry.d.ts +78 -0
- package/lib/utils/icon-registry.d.ts.map +1 -0
- package/lib/utils/icon-registry.js +304 -0
- package/lib/utils/icon-registry.js.map +1 -0
- package/lib/utils/locale.d.ts +136 -0
- package/lib/utils/locale.d.ts.map +1 -0
- package/lib/utils/locale.js +213 -0
- package/lib/utils/locale.js.map +1 -0
- package/lib/utils/mobile.d.ts +14 -0
- package/lib/utils/mobile.d.ts.map +1 -0
- package/lib/utils/mobile.js +21 -0
- package/lib/utils/mobile.js.map +1 -0
- package/lib/utils/number-format.d.ts +83 -0
- package/lib/utils/number-format.d.ts.map +1 -0
- package/lib/utils/number-format.js +143 -0
- package/lib/utils/number-format.js.map +1 -0
- package/lib/utils/parse-boolean.d.ts +39 -0
- package/lib/utils/parse-boolean.d.ts.map +1 -0
- package/lib/utils/parse-boolean.js +58 -0
- package/lib/utils/parse-boolean.js.map +1 -0
- package/lib/utils/positioning.d.ts +143 -0
- package/lib/utils/positioning.d.ts.map +1 -0
- package/lib/utils/positioning.js +308 -0
- package/lib/utils/positioning.js.map +1 -0
- package/lib/utils/property-capture.d.ts +132 -0
- package/lib/utils/property-capture.d.ts.map +1 -0
- package/lib/utils/property-capture.js +152 -0
- package/lib/utils/property-capture.js.map +1 -0
- package/lib/utils/property-manager.d.ts +90 -0
- package/lib/utils/property-manager.d.ts.map +1 -0
- package/lib/utils/property-manager.js +197 -0
- package/lib/utils/property-manager.js.map +1 -0
- package/lib/utils/resize-observer.d.ts +42 -0
- package/lib/utils/resize-observer.d.ts.map +1 -0
- package/lib/utils/resize-observer.js +71 -0
- package/lib/utils/resize-observer.js.map +1 -0
- package/lib/utils/scroll-lock.d.ts +79 -0
- package/lib/utils/scroll-lock.d.ts.map +1 -0
- package/lib/utils/scroll-lock.js +197 -0
- package/lib/utils/scroll-lock.js.map +1 -0
- package/lib/utils/styles.d.ts +27 -0
- package/lib/utils/styles.d.ts.map +1 -0
- package/lib/utils/styles.js +53 -0
- package/lib/utils/styles.js.map +1 -0
- package/lib/version.d.ts +8 -0
- package/lib/version.d.ts.map +1 -0
- package/lib/version.js +11 -0
- package/lib/version.js.map +1 -0
- package/package.json +159 -0
|
@@ -0,0 +1,636 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Wizard Component
|
|
3
|
+
*
|
|
4
|
+
* A carousel-based wizard/stepper component with smooth animations, progress tracking, and completion state.
|
|
5
|
+
* Features horizontal sliding transitions between steps, animated progress line, and step completion tracking.
|
|
6
|
+
* Behaves like tabs - a "dumb" component that only renders and fires events. All navigation and validation
|
|
7
|
+
* is controlled by the user.
|
|
8
|
+
*
|
|
9
|
+
* Features:
|
|
10
|
+
* - Carousel animation with smooth sliding transitions between steps
|
|
11
|
+
* - Fixed dimensions prevent layout shift between steps
|
|
12
|
+
* - Animated progress line showing completion status
|
|
13
|
+
* - Step indicators with completed/active/pending states
|
|
14
|
+
* - Rich indicator support via slots (icons, custom content)
|
|
15
|
+
* - Independent panel scrolling with scroll position reset
|
|
16
|
+
* - ResizeObserver for responsive percentage widths
|
|
17
|
+
* - Smart rendering - only updates DOM when necessary
|
|
18
|
+
* - Accessibility with ARIA roles and attributes
|
|
19
|
+
* - Fires events on step clicks - user controls navigation
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* <!-- Basic wizard with text labels -->
|
|
23
|
+
* <ty-wizard width="900px" height="600px" active="welcome">
|
|
24
|
+
* <ty-step id="welcome" label="Welcome">
|
|
25
|
+
* <div class="p-6">
|
|
26
|
+
* <h1>Welcome!</h1>
|
|
27
|
+
* <button onclick="goToStep('account')">Next</button>
|
|
28
|
+
* </div>
|
|
29
|
+
* </ty-step>
|
|
30
|
+
* <ty-step id="account" label="Account Setup">
|
|
31
|
+
* <div class="p-6">
|
|
32
|
+
* <h2>Account Setup</h2>
|
|
33
|
+
* <button onclick="goToStep('welcome')">Previous</button>
|
|
34
|
+
* <button onclick="goToStep('complete')">Next</button>
|
|
35
|
+
* </div>
|
|
36
|
+
* </ty-step>
|
|
37
|
+
* </ty-wizard>
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* <!-- Wizard with custom indicators -->
|
|
41
|
+
* <ty-wizard width="100%" height="700px" active="welcome" completed="welcome,account">
|
|
42
|
+
* <!-- Custom indicator icons -->
|
|
43
|
+
* <div slot="indicator-welcome">
|
|
44
|
+
* <ty-icon name="hand" size="sm"></ty-icon>
|
|
45
|
+
* </div>
|
|
46
|
+
* <div slot="indicator-account">
|
|
47
|
+
* <span class="text-lg font-bold">1</span>
|
|
48
|
+
* </div>
|
|
49
|
+
*
|
|
50
|
+
* <ty-step id="welcome" label="Welcome">...</ty-step>
|
|
51
|
+
* <ty-step id="account" label="Account">...</ty-step>
|
|
52
|
+
* <ty-step id="profile" label="Profile">...</ty-step>
|
|
53
|
+
* </ty-wizard>
|
|
54
|
+
*/
|
|
55
|
+
import { ensureStyles } from '../utils/styles.js';
|
|
56
|
+
import { wizardStyles } from '../styles/wizard.js';
|
|
57
|
+
// ============================================================================
|
|
58
|
+
// WeakMaps for State Management
|
|
59
|
+
// ============================================================================
|
|
60
|
+
const eventHandlers = new WeakMap();
|
|
61
|
+
const resizeObservers = new WeakMap();
|
|
62
|
+
// ============================================================================
|
|
63
|
+
// Helper Functions - Attribute Parsing
|
|
64
|
+
// ============================================================================
|
|
65
|
+
/**
|
|
66
|
+
* Extract wizard configuration from element attributes
|
|
67
|
+
*/
|
|
68
|
+
function getWizardAttributes(el) {
|
|
69
|
+
return {
|
|
70
|
+
width: el.getAttribute('width') || '100%',
|
|
71
|
+
height: el.getAttribute('height') || '700px',
|
|
72
|
+
active: el.getAttribute('active'),
|
|
73
|
+
completed: el.getAttribute('completed') || '',
|
|
74
|
+
orientation: (el.getAttribute('orientation') || 'horizontal'),
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
/**
|
|
78
|
+
* Get all ty-step child elements
|
|
79
|
+
*/
|
|
80
|
+
function getChildSteps(el) {
|
|
81
|
+
return Array.from(el.querySelectorAll('ty-step'));
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Get ID from a ty-step element
|
|
85
|
+
*/
|
|
86
|
+
function getStepId(step) {
|
|
87
|
+
return step.getAttribute('id');
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Get completed step IDs as a Set
|
|
91
|
+
*/
|
|
92
|
+
function getCompletedStepIds(el) {
|
|
93
|
+
const completedAttr = el.getAttribute('completed') || '';
|
|
94
|
+
if (!completedAttr.trim())
|
|
95
|
+
return new Set();
|
|
96
|
+
return new Set(completedAttr.split(',').map(id => id.trim()).filter(Boolean));
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Check if wizard has a direct child indicator slot for this step-id.
|
|
100
|
+
* Looks in ty-wizard's light DOM for slot='indicator-{step-id}' elements.
|
|
101
|
+
*/
|
|
102
|
+
function hasCustomIndicator(wizardEl, stepId) {
|
|
103
|
+
return wizardEl.querySelector(`[slot='indicator-${stepId}']`) !== null;
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Check if step is disabled
|
|
107
|
+
*/
|
|
108
|
+
function isStepDisabled(step) {
|
|
109
|
+
return step.hasAttribute('disabled');
|
|
110
|
+
}
|
|
111
|
+
// ============================================================================
|
|
112
|
+
// Helper Functions - Active Step Management
|
|
113
|
+
// ============================================================================
|
|
114
|
+
/**
|
|
115
|
+
* Find index of step with given ID
|
|
116
|
+
*/
|
|
117
|
+
function findStepIndex(steps, stepId) {
|
|
118
|
+
const index = steps.findIndex(step => getStepId(step) === stepId);
|
|
119
|
+
return index >= 0 ? index : undefined;
|
|
120
|
+
}
|
|
121
|
+
/**
|
|
122
|
+
* Get the active step ID, defaulting to first step if not specified
|
|
123
|
+
*/
|
|
124
|
+
function getActiveStepId(el, steps) {
|
|
125
|
+
const activeAttr = el.getAttribute('active');
|
|
126
|
+
if (activeAttr && findStepIndex(steps, activeAttr) !== undefined) {
|
|
127
|
+
return activeAttr;
|
|
128
|
+
}
|
|
129
|
+
// Default to first step
|
|
130
|
+
if (steps.length > 0) {
|
|
131
|
+
return getStepId(steps[0]);
|
|
132
|
+
}
|
|
133
|
+
return null;
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Set the active step by ID
|
|
137
|
+
*/
|
|
138
|
+
function setActiveStep(el, stepId) {
|
|
139
|
+
el.setAttribute('active', stepId);
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Calculate progress percentage for the progress line overlay
|
|
143
|
+
*/
|
|
144
|
+
function calculateProgressPercent(steps, activeId, completedIds) {
|
|
145
|
+
if (steps.length <= 1 || !activeId)
|
|
146
|
+
return 0;
|
|
147
|
+
const activeIndex = steps.findIndex(s => getStepId(s) === activeId);
|
|
148
|
+
// Progress bar shows progress up to the currently active step
|
|
149
|
+
return (activeIndex / (steps.length - 1)) * 100;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Dispatch ty-wizard-step-change event
|
|
153
|
+
*/
|
|
154
|
+
function dispatchStepChangeEvent(el, activeId, activeIndex, previousId, previousIndex) {
|
|
155
|
+
const direction = previousIndex === null ? 'none'
|
|
156
|
+
: activeIndex > previousIndex ? 'forward'
|
|
157
|
+
: activeIndex < previousIndex ? 'backward'
|
|
158
|
+
: 'none';
|
|
159
|
+
const event = new CustomEvent('ty-wizard-step-change', {
|
|
160
|
+
detail: {
|
|
161
|
+
activeId,
|
|
162
|
+
activeIndex,
|
|
163
|
+
previousId,
|
|
164
|
+
previousIndex,
|
|
165
|
+
direction,
|
|
166
|
+
},
|
|
167
|
+
bubbles: true,
|
|
168
|
+
cancelable: false,
|
|
169
|
+
});
|
|
170
|
+
el.dispatchEvent(event);
|
|
171
|
+
}
|
|
172
|
+
// ============================================================================
|
|
173
|
+
// Event Handlers - Step Indicator Click
|
|
174
|
+
// ============================================================================
|
|
175
|
+
/**
|
|
176
|
+
* Handle step indicator click - only dispatch event (like tabs)
|
|
177
|
+
*/
|
|
178
|
+
function handleStepClick(el, stepId, event) {
|
|
179
|
+
event.preventDefault();
|
|
180
|
+
event.stopPropagation();
|
|
181
|
+
const steps = getChildSteps(el);
|
|
182
|
+
const targetIndex = steps.findIndex(s => getStepId(s) === stepId);
|
|
183
|
+
if (targetIndex < 0)
|
|
184
|
+
return;
|
|
185
|
+
const currentActive = getActiveStepId(el, steps);
|
|
186
|
+
const currentIndex = currentActive ? findStepIndex(steps, currentActive) ?? null : null;
|
|
187
|
+
// Just dispatch event - user handles the actual navigation
|
|
188
|
+
const direction = currentIndex === null ? 'none'
|
|
189
|
+
: targetIndex > currentIndex ? 'forward'
|
|
190
|
+
: targetIndex < currentIndex ? 'backward'
|
|
191
|
+
: 'none';
|
|
192
|
+
const event2 = new CustomEvent('ty-wizard-step-change', {
|
|
193
|
+
detail: {
|
|
194
|
+
activeId: stepId,
|
|
195
|
+
activeIndex: targetIndex,
|
|
196
|
+
previousId: currentActive,
|
|
197
|
+
previousIndex: currentIndex,
|
|
198
|
+
direction,
|
|
199
|
+
},
|
|
200
|
+
bubbles: true,
|
|
201
|
+
cancelable: false,
|
|
202
|
+
});
|
|
203
|
+
el.dispatchEvent(event2);
|
|
204
|
+
}
|
|
205
|
+
/**
|
|
206
|
+
* Cleanup existing event listeners
|
|
207
|
+
*/
|
|
208
|
+
function cleanupEventListeners(el) {
|
|
209
|
+
const handlers = eventHandlers.get(el);
|
|
210
|
+
if (!handlers)
|
|
211
|
+
return;
|
|
212
|
+
const shadowRoot = el.shadowRoot;
|
|
213
|
+
if (!shadowRoot)
|
|
214
|
+
return;
|
|
215
|
+
// Remove all step click handlers
|
|
216
|
+
handlers.stepClickHandlers.forEach((handler, stepId) => {
|
|
217
|
+
const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
|
|
218
|
+
if (button) {
|
|
219
|
+
button.removeEventListener('pointerdown', handler);
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
handlers.stepClickHandlers.clear();
|
|
223
|
+
}
|
|
224
|
+
/**
|
|
225
|
+
* Setup event listeners for step indicator clicks
|
|
226
|
+
*/
|
|
227
|
+
function setupEventListeners(el, shadowRoot, steps) {
|
|
228
|
+
// Clean up any existing listeners first
|
|
229
|
+
cleanupEventListeners(el);
|
|
230
|
+
// Initialize handlers storage
|
|
231
|
+
const handlers = {
|
|
232
|
+
stepClickHandlers: new Map(),
|
|
233
|
+
};
|
|
234
|
+
// Add click listener for each step indicator
|
|
235
|
+
steps.forEach((step) => {
|
|
236
|
+
const stepId = getStepId(step);
|
|
237
|
+
if (!stepId)
|
|
238
|
+
return;
|
|
239
|
+
const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
|
|
240
|
+
if (button) {
|
|
241
|
+
const handler = (e) => handleStepClick(el, stepId, e);
|
|
242
|
+
button.addEventListener('pointerdown', handler);
|
|
243
|
+
handlers.stepClickHandlers.set(stepId, handler);
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
// Store handlers for cleanup
|
|
247
|
+
eventHandlers.set(el, handlers);
|
|
248
|
+
}
|
|
249
|
+
// ============================================================================
|
|
250
|
+
// Transform & Positioning Updates
|
|
251
|
+
// ============================================================================
|
|
252
|
+
/**
|
|
253
|
+
* Update the transform on panels-wrapper based on active index and measured width
|
|
254
|
+
*/
|
|
255
|
+
function updateTransform(el, activeIndex) {
|
|
256
|
+
const shadowRoot = el.shadowRoot;
|
|
257
|
+
if (!shadowRoot)
|
|
258
|
+
return;
|
|
259
|
+
const panelsWrapper = shadowRoot.querySelector('.panels-wrapper');
|
|
260
|
+
if (!panelsWrapper)
|
|
261
|
+
return;
|
|
262
|
+
// Measure the actual width of the container
|
|
263
|
+
const containerWidth = el.offsetWidth;
|
|
264
|
+
const offsetPx = activeIndex * containerWidth;
|
|
265
|
+
// Apply transform directly in pixels
|
|
266
|
+
panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
|
|
267
|
+
}
|
|
268
|
+
/**
|
|
269
|
+
* Update progress line overlay width
|
|
270
|
+
*/
|
|
271
|
+
function updateProgressLine(el) {
|
|
272
|
+
const shadowRoot = el.shadowRoot;
|
|
273
|
+
if (!shadowRoot)
|
|
274
|
+
return;
|
|
275
|
+
const progressOverlay = shadowRoot.querySelector('.progress-overlay');
|
|
276
|
+
if (!progressOverlay)
|
|
277
|
+
return;
|
|
278
|
+
const steps = getChildSteps(el);
|
|
279
|
+
const activeId = getActiveStepId(el, steps);
|
|
280
|
+
const completedIds = getCompletedStepIds(el);
|
|
281
|
+
const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
|
|
282
|
+
progressOverlay.style.width = `${progressPercent}%`;
|
|
283
|
+
}
|
|
284
|
+
/**
|
|
285
|
+
* Update ARIA attributes on step indicators without re-rendering
|
|
286
|
+
*/
|
|
287
|
+
function updateStepIndicators(el, shadowRoot, activeId) {
|
|
288
|
+
const steps = getChildSteps(el);
|
|
289
|
+
const completedIds = getCompletedStepIds(el);
|
|
290
|
+
const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
|
|
291
|
+
steps.forEach((step, index) => {
|
|
292
|
+
const stepId = getStepId(step);
|
|
293
|
+
if (!stepId)
|
|
294
|
+
return;
|
|
295
|
+
const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
|
|
296
|
+
const circle = shadowRoot.querySelector(`[data-step-id='${stepId}'] .step-circle`);
|
|
297
|
+
const isActive = stepId === activeId;
|
|
298
|
+
if (button) {
|
|
299
|
+
button.setAttribute('aria-selected', String(isActive));
|
|
300
|
+
button.setAttribute('tabindex', isActive ? '0' : '-1');
|
|
301
|
+
button.setAttribute('data-active', String(isActive));
|
|
302
|
+
}
|
|
303
|
+
if (circle) {
|
|
304
|
+
// Use same status logic as rendering (respects user's status attribute)
|
|
305
|
+
const state = getStepStatus(step, stepId, activeId, completedIds);
|
|
306
|
+
circle.setAttribute('data-state', state);
|
|
307
|
+
}
|
|
308
|
+
// Also set data-active on the slotted indicator element in light DOM
|
|
309
|
+
const slottedIndicator = el.querySelector(`[slot='indicator-${stepId}']`);
|
|
310
|
+
if (slottedIndicator) {
|
|
311
|
+
slottedIndicator.setAttribute('data-active', String(isActive));
|
|
312
|
+
}
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* Update pointer-events, opacity, and data-active on step panels without re-rendering
|
|
317
|
+
*/
|
|
318
|
+
function updatePanelInteraction(el, activeId) {
|
|
319
|
+
const steps = getChildSteps(el);
|
|
320
|
+
steps.forEach((step) => {
|
|
321
|
+
const stepId = getStepId(step);
|
|
322
|
+
if (!stepId)
|
|
323
|
+
return;
|
|
324
|
+
const isActive = stepId === activeId;
|
|
325
|
+
// Set data-active attribute for framework conditional rendering
|
|
326
|
+
step.setAttribute('data-active', String(isActive));
|
|
327
|
+
if (isActive) {
|
|
328
|
+
step.style.pointerEvents = 'auto';
|
|
329
|
+
step.style.opacity = '1';
|
|
330
|
+
}
|
|
331
|
+
else {
|
|
332
|
+
step.style.pointerEvents = 'none';
|
|
333
|
+
step.style.opacity = '0';
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
}
|
|
337
|
+
/**
|
|
338
|
+
* Update only the active step state without re-rendering DOM.
|
|
339
|
+
* This is called when only the active or completed attribute changes.
|
|
340
|
+
*/
|
|
341
|
+
function updateActiveStepState(el, stepId) {
|
|
342
|
+
const steps = getChildSteps(el);
|
|
343
|
+
const shadowRoot = el.shadowRoot;
|
|
344
|
+
if (!shadowRoot)
|
|
345
|
+
return;
|
|
346
|
+
const currentActive = getActiveStepId(el, steps);
|
|
347
|
+
const currentIndex = currentActive ? findStepIndex(steps, currentActive) : undefined;
|
|
348
|
+
const newIndex = findStepIndex(steps, stepId);
|
|
349
|
+
// Only update if different step and valid
|
|
350
|
+
if (currentActive === stepId || newIndex === undefined)
|
|
351
|
+
return;
|
|
352
|
+
// Update CSS variable for transform
|
|
353
|
+
el.style.setProperty('--active-index', String(newIndex));
|
|
354
|
+
// Update transform directly
|
|
355
|
+
updateTransform(el, newIndex);
|
|
356
|
+
// Update step indicator states (visual + ARIA)
|
|
357
|
+
updateStepIndicators(el, shadowRoot, stepId);
|
|
358
|
+
// Update progress line overlay
|
|
359
|
+
updateProgressLine(el);
|
|
360
|
+
// Update pointer-events on panels
|
|
361
|
+
updatePanelInteraction(el, stepId);
|
|
362
|
+
// Reset scroll position of new active panel
|
|
363
|
+
const newPanel = steps[newIndex];
|
|
364
|
+
if (newPanel?.resetScroll) {
|
|
365
|
+
newPanel.resetScroll();
|
|
366
|
+
}
|
|
367
|
+
// Dispatch change event
|
|
368
|
+
dispatchStepChangeEvent(el, stepId, newIndex, currentActive, currentIndex ?? null);
|
|
369
|
+
}
|
|
370
|
+
// ============================================================================
|
|
371
|
+
// ResizeObserver for Responsive Width
|
|
372
|
+
// ============================================================================
|
|
373
|
+
/**
|
|
374
|
+
* Setup ResizeObserver for percentage widths
|
|
375
|
+
*/
|
|
376
|
+
function setupResizeObserver(el) {
|
|
377
|
+
// Clean up old observer
|
|
378
|
+
const oldObserver = resizeObservers.get(el);
|
|
379
|
+
if (oldObserver) {
|
|
380
|
+
oldObserver.disconnect();
|
|
381
|
+
}
|
|
382
|
+
const { width } = getWizardAttributes(el);
|
|
383
|
+
// Only setup observer for percentage widths
|
|
384
|
+
if (width.includes('%')) {
|
|
385
|
+
const observer = new ResizeObserver((entries) => {
|
|
386
|
+
const entry = entries[0];
|
|
387
|
+
const measuredWidth = entry.contentRect.width;
|
|
388
|
+
const steps = getChildSteps(el);
|
|
389
|
+
const activeId = getActiveStepId(el, steps);
|
|
390
|
+
const activeIndex = activeId ? findStepIndex(steps, activeId) : 0;
|
|
391
|
+
// Update CSS variable with measured width
|
|
392
|
+
el.style.setProperty('--wizard-width', `${measuredWidth}px`);
|
|
393
|
+
// Update transform with new width
|
|
394
|
+
if (activeIndex !== undefined) {
|
|
395
|
+
updateTransform(el, activeIndex);
|
|
396
|
+
}
|
|
397
|
+
});
|
|
398
|
+
observer.observe(el);
|
|
399
|
+
resizeObservers.set(el, observer);
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
/**
|
|
403
|
+
* Cleanup ResizeObserver
|
|
404
|
+
*/
|
|
405
|
+
function cleanupResizeObserver(el) {
|
|
406
|
+
const observer = resizeObservers.get(el);
|
|
407
|
+
if (observer) {
|
|
408
|
+
observer.disconnect();
|
|
409
|
+
resizeObservers.delete(el);
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
// ============================================================================
|
|
413
|
+
// Rendering Functions
|
|
414
|
+
// ============================================================================
|
|
415
|
+
/**
|
|
416
|
+
* Get step status - use user's explicit status attribute or fall back to automatic detection
|
|
417
|
+
*/
|
|
418
|
+
function getStepStatus(step, stepId, activeId, completedIds) {
|
|
419
|
+
// Check if user provided explicit status
|
|
420
|
+
const explicitStatus = step.getAttribute('status');
|
|
421
|
+
if (explicitStatus && ['completed', 'active', 'pending', 'error'].includes(explicitStatus)) {
|
|
422
|
+
return explicitStatus;
|
|
423
|
+
}
|
|
424
|
+
// Fall back to automatic detection
|
|
425
|
+
const isActive = stepId === activeId;
|
|
426
|
+
const isCompleted = completedIds.has(stepId);
|
|
427
|
+
return isCompleted ? 'completed' : isActive ? 'active' : 'pending';
|
|
428
|
+
}
|
|
429
|
+
/**
|
|
430
|
+
* Generate HTML for step indicators with progress line
|
|
431
|
+
*/
|
|
432
|
+
function renderStepIndicators(wizardEl, steps, activeId, completedIds) {
|
|
433
|
+
const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
|
|
434
|
+
const indicators = steps.map((step, index) => {
|
|
435
|
+
const stepId = getStepId(step);
|
|
436
|
+
if (!stepId)
|
|
437
|
+
return '';
|
|
438
|
+
const label = step.getAttribute('label') || `Step ${index + 1}`;
|
|
439
|
+
const description = step.getAttribute('description') || '';
|
|
440
|
+
const disabled = isStepDisabled(step);
|
|
441
|
+
const isActive = stepId === activeId;
|
|
442
|
+
const hasCustom = hasCustomIndicator(wizardEl, stepId);
|
|
443
|
+
// User can override status via attribute
|
|
444
|
+
const state = getStepStatus(step, stepId, activeId, completedIds);
|
|
445
|
+
// Icon content varies by state
|
|
446
|
+
let circleContent = '';
|
|
447
|
+
if (hasCustom) {
|
|
448
|
+
circleContent = `<slot name="indicator-${stepId}"></slot>`;
|
|
449
|
+
}
|
|
450
|
+
else if (state === 'completed') {
|
|
451
|
+
// Checkmark for completed
|
|
452
|
+
circleContent = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
|
|
453
|
+
}
|
|
454
|
+
else if (state === 'error') {
|
|
455
|
+
// X icon for error
|
|
456
|
+
circleContent = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
|
|
457
|
+
}
|
|
458
|
+
else {
|
|
459
|
+
// Number for active/pending
|
|
460
|
+
circleContent = `<span style="font-size: 12px; font-weight: 700;">${index + 1}</span>`;
|
|
461
|
+
}
|
|
462
|
+
return `<button
|
|
463
|
+
class="step-indicator"
|
|
464
|
+
role="tab"
|
|
465
|
+
data-step-id="${stepId}"
|
|
466
|
+
id="step-${stepId}"
|
|
467
|
+
aria-controls="panel-${stepId}"
|
|
468
|
+
aria-selected="${isActive}"
|
|
469
|
+
tabindex="${isActive ? '0' : '-1'}"
|
|
470
|
+
data-active="${isActive}"
|
|
471
|
+
${disabled ? 'disabled aria-disabled="true"' : ''}
|
|
472
|
+
>
|
|
473
|
+
<div class="step-circle" data-state="${state}" part="step-circle">
|
|
474
|
+
${circleContent}
|
|
475
|
+
</div>
|
|
476
|
+
<div class="step-text">
|
|
477
|
+
<span class="step-label">${label}</span>
|
|
478
|
+
${description ? `<span class="step-description">${description}</span>` : ''}
|
|
479
|
+
</div>
|
|
480
|
+
</button>`;
|
|
481
|
+
}).join('');
|
|
482
|
+
const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
|
|
483
|
+
const stepCount = steps.length;
|
|
484
|
+
return `
|
|
485
|
+
<div class="step-indicators-wrapper" part="indicators-wrapper">
|
|
486
|
+
<div class="step-indicators" style="--step-count: ${stepCount}">
|
|
487
|
+
<div class="progress-line" part="progress-line" role="progressbar" aria-valuenow="${Math.round(progressPercent)}" aria-valuemin="0" aria-valuemax="100">
|
|
488
|
+
<div class="progress-overlay" style="width: ${progressPercent}%"></div>
|
|
489
|
+
</div>
|
|
490
|
+
${indicators}
|
|
491
|
+
</div>
|
|
492
|
+
</div>
|
|
493
|
+
`;
|
|
494
|
+
}
|
|
495
|
+
/**
|
|
496
|
+
* Render the wizard container with step indicators and panel viewport.
|
|
497
|
+
* Smart rendering: checks if structure exists and only updates when needed.
|
|
498
|
+
*/
|
|
499
|
+
function render(el) {
|
|
500
|
+
const shadowRoot = el.shadowRoot;
|
|
501
|
+
if (!shadowRoot)
|
|
502
|
+
return;
|
|
503
|
+
const { width, height } = getWizardAttributes(el);
|
|
504
|
+
const steps = getChildSteps(el);
|
|
505
|
+
const activeId = getActiveStepId(el, steps);
|
|
506
|
+
const activeIndex = activeId ? (findStepIndex(steps, activeId) ?? 0) : 0;
|
|
507
|
+
const completedIds = getCompletedStepIds(el);
|
|
508
|
+
// Check if structure already exists
|
|
509
|
+
const existingContainer = shadowRoot.querySelector('.wizard-container');
|
|
510
|
+
const existingIndicators = shadowRoot.querySelector('.step-indicators-wrapper');
|
|
511
|
+
const existingViewport = shadowRoot.querySelector('.panels-viewport');
|
|
512
|
+
// Ensure styles are loaded
|
|
513
|
+
ensureStyles(shadowRoot, { css: wizardStyles, id: 'ty-wizard' });
|
|
514
|
+
// Set CSS variables for dimensions and step count
|
|
515
|
+
el.style.setProperty('--wizard-width', width.includes('%') ? '100%' : width);
|
|
516
|
+
el.style.setProperty('--wizard-height', height);
|
|
517
|
+
el.style.setProperty('--active-index', String(activeIndex));
|
|
518
|
+
el.style.setProperty('--step-count', String(steps.length));
|
|
519
|
+
if (existingContainer && existingIndicators && existingViewport) {
|
|
520
|
+
// === SMART UPDATE: Structure exists, only update what changed ===
|
|
521
|
+
// Remove old indicators and replace
|
|
522
|
+
existingIndicators.remove();
|
|
523
|
+
const newIndicatorsHtml = renderStepIndicators(el, steps, activeId, completedIds);
|
|
524
|
+
const tempDiv = document.createElement('div');
|
|
525
|
+
tempDiv.innerHTML = newIndicatorsHtml;
|
|
526
|
+
existingContainer.insertBefore(tempDiv.firstElementChild, existingViewport);
|
|
527
|
+
// Re-setup event listeners (indicators were recreated)
|
|
528
|
+
setupEventListeners(el, shadowRoot, steps);
|
|
529
|
+
// Update ARIA and data-active attributes
|
|
530
|
+
updateStepIndicators(el, shadowRoot, activeId || '');
|
|
531
|
+
// Measure indicators height
|
|
532
|
+
requestAnimationFrame(() => {
|
|
533
|
+
const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
|
|
534
|
+
if (indicators) {
|
|
535
|
+
const indicatorsHeight = indicators.offsetHeight;
|
|
536
|
+
el.style.setProperty('--indicators-height', `${indicatorsHeight}px`);
|
|
537
|
+
}
|
|
538
|
+
// Update transform with current active index
|
|
539
|
+
updateTransform(el, activeIndex);
|
|
540
|
+
// Update progress line
|
|
541
|
+
updateProgressLine(el);
|
|
542
|
+
});
|
|
543
|
+
// Update panel interaction states
|
|
544
|
+
if (activeId) {
|
|
545
|
+
updatePanelInteraction(el, activeId);
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
else {
|
|
549
|
+
// === FULL RENDER: First time or structure missing ===
|
|
550
|
+
shadowRoot.innerHTML = `
|
|
551
|
+
<div class="wizard-container">
|
|
552
|
+
${renderStepIndicators(el, steps, activeId, completedIds)}
|
|
553
|
+
<div class="panels-viewport" part="panels-container">
|
|
554
|
+
<div class="panels-wrapper">
|
|
555
|
+
<slot></slot>
|
|
556
|
+
</div>
|
|
557
|
+
</div>
|
|
558
|
+
</div>
|
|
559
|
+
`;
|
|
560
|
+
// Measure indicators height, update transform and progress after render
|
|
561
|
+
requestAnimationFrame(() => {
|
|
562
|
+
const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
|
|
563
|
+
if (indicators) {
|
|
564
|
+
const indicatorsHeight = indicators.offsetHeight;
|
|
565
|
+
el.style.setProperty('--indicators-height', `${indicatorsHeight}px`);
|
|
566
|
+
}
|
|
567
|
+
// Update transform with measured width
|
|
568
|
+
updateTransform(el, activeIndex);
|
|
569
|
+
// Update progress line
|
|
570
|
+
updateProgressLine(el);
|
|
571
|
+
});
|
|
572
|
+
// Setup event listeners
|
|
573
|
+
setupEventListeners(el, shadowRoot, steps);
|
|
574
|
+
// Update ARIA and data-active attributes on initial render
|
|
575
|
+
updateStepIndicators(el, shadowRoot, activeId || '');
|
|
576
|
+
// Setup ResizeObserver for responsive width
|
|
577
|
+
setupResizeObserver(el);
|
|
578
|
+
// Update step panel states
|
|
579
|
+
if (activeId) {
|
|
580
|
+
updatePanelInteraction(el, activeId);
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
}
|
|
584
|
+
/**
|
|
585
|
+
* Cleanup when wizard component is disconnected
|
|
586
|
+
*/
|
|
587
|
+
function cleanup(el) {
|
|
588
|
+
cleanupEventListeners(el);
|
|
589
|
+
cleanupResizeObserver(el);
|
|
590
|
+
}
|
|
591
|
+
// ============================================================================
|
|
592
|
+
// Component Definition
|
|
593
|
+
// ============================================================================
|
|
594
|
+
/**
|
|
595
|
+
* TyWizard Web Component
|
|
596
|
+
*/
|
|
597
|
+
export class TyWizard extends HTMLElement {
|
|
598
|
+
/** Observed attributes */
|
|
599
|
+
static get observedAttributes() {
|
|
600
|
+
return ['width', 'height', 'active', 'completed', 'orientation'];
|
|
601
|
+
}
|
|
602
|
+
constructor() {
|
|
603
|
+
super();
|
|
604
|
+
this.attachShadow({ mode: 'open' });
|
|
605
|
+
}
|
|
606
|
+
connectedCallback() {
|
|
607
|
+
render(this);
|
|
608
|
+
}
|
|
609
|
+
disconnectedCallback() {
|
|
610
|
+
cleanup(this);
|
|
611
|
+
}
|
|
612
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
613
|
+
// Smart rendering: only full render when structural attributes change
|
|
614
|
+
if (name === 'active') {
|
|
615
|
+
// Active step changed - update state, then do smart render
|
|
616
|
+
if (newValue) {
|
|
617
|
+
updateActiveStepState(this, newValue);
|
|
618
|
+
}
|
|
619
|
+
// Always call render after active change to update indicator states
|
|
620
|
+
render(this);
|
|
621
|
+
}
|
|
622
|
+
else if (name === 'completed') {
|
|
623
|
+
// Completed steps changed - update progress line and indicators
|
|
624
|
+
render(this);
|
|
625
|
+
}
|
|
626
|
+
else {
|
|
627
|
+
// Other attributes changed (width, height, linear, orientation) - full render
|
|
628
|
+
render(this);
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
// Register the custom element
|
|
633
|
+
if (!customElements.get('ty-wizard')) {
|
|
634
|
+
customElements.define('ty-wizard', TyWizard);
|
|
635
|
+
}
|
|
636
|
+
//# sourceMappingURL=wizard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wizard.js","sourceRoot":"","sources":["../../src/components/wizard.ts"],"names":[],"mappings":"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"}
|