tyrell-components 1.0.0-RC13 → 1.0.0-RC14
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 +1 -1
- package/css/tyrell-theme.css +167 -178
- package/css/tyrell.css +19 -0
- package/dist/tyrell-theme.css +167 -178
- package/dist/tyrell.css +19 -0
- package/dist/tyrell.js +1 -1
- package/lib/base/ty-component.d.ts +20 -10
- package/lib/base/ty-component.js +21 -144
- package/lib/components/button.d.ts +2 -16
- package/lib/components/button.js +0 -36
- package/lib/components/calendar-month.d.ts +2 -48
- package/lib/components/calendar-month.js +4 -166
- package/lib/components/calendar-navigation.d.ts +3 -48
- package/lib/components/calendar-navigation.js +3 -126
- package/lib/components/calendar.d.ts +3 -80
- package/lib/components/calendar.js +8 -230
- package/lib/components/checkbox.d.ts +4 -71
- package/lib/components/checkbox.js +7 -151
- package/lib/components/copy.d.ts +3 -56
- package/lib/components/copy.js +1 -120
- package/lib/components/date-picker.d.ts +13 -162
- package/lib/components/date-picker.js +41 -592
- package/lib/components/file-upload.d.ts +9 -15
- package/lib/components/file-upload.js +19 -41
- package/lib/components/icon.d.ts +3 -24
- package/lib/components/icon.js +1 -90
- package/lib/components/input.d.ts +7 -107
- package/lib/components/input.js +5 -193
- package/lib/components/modal.d.ts +17 -26
- package/lib/components/modal.js +57 -201
- package/lib/components/option.d.ts +2 -9
- package/lib/components/option.js +0 -48
- package/lib/components/popup.d.ts +2 -17
- package/lib/components/popup.js +8 -139
- package/lib/components/radio.d.ts +3 -23
- package/lib/components/radio.js +10 -65
- package/lib/components/resize-observer.d.ts +3 -30
- package/lib/components/resize-observer.js +12 -46
- package/lib/components/scroll-container.d.ts +2 -12
- package/lib/components/scroll-container.js +3 -46
- package/lib/components/select.d.ts +22 -153
- package/lib/components/select.js +33 -590
- package/lib/components/selected-tags.d.ts +4 -47
- package/lib/components/selected-tags.js +1 -95
- package/lib/components/step.d.ts +1 -6
- package/lib/components/step.js +0 -6
- package/lib/components/switch.d.ts +0 -11
- package/lib/components/switch.js +2 -36
- package/lib/components/tab.d.ts +1 -6
- package/lib/components/tab.js +0 -7
- package/lib/components/tabs.d.ts +5 -63
- package/lib/components/tabs.js +20 -283
- package/lib/components/tag.d.ts +2 -36
- package/lib/components/tag.js +5 -105
- package/lib/components/textarea.d.ts +6 -86
- package/lib/components/textarea.js +2 -173
- package/lib/components/tooltip.d.ts +3 -11
- package/lib/components/tooltip.js +24 -160
- package/lib/components/wizard.d.ts +6 -54
- package/lib/components/wizard.js +15 -228
- package/lib/icons/fontawesome/brands.d.ts +0 -1
- package/lib/icons/fontawesome/brands.js +0 -8
- package/lib/icons/fontawesome/regular.d.ts +0 -1
- package/lib/icons/fontawesome/regular.js +0 -8
- package/lib/icons/fontawesome/solid.d.ts +0 -1
- package/lib/icons/fontawesome/solid.js +0 -8
- package/lib/icons/heroicons/micro.d.ts +0 -1
- package/lib/icons/heroicons/micro.js +0 -8
- package/lib/icons/heroicons/mini.d.ts +0 -1
- package/lib/icons/heroicons/mini.js +0 -8
- package/lib/icons/heroicons/outline.d.ts +0 -1
- package/lib/icons/heroicons/outline.js +0 -8
- package/lib/icons/heroicons/solid.d.ts +0 -1
- package/lib/icons/heroicons/solid.js +0 -8
- package/lib/icons/lucide.d.ts +0 -1
- package/lib/icons/lucide.js +0 -1872
- package/lib/icons/material/filled.d.ts +0 -1
- package/lib/icons/material/filled.js +0 -10
- package/lib/icons/material/outlined.d.ts +0 -1
- package/lib/icons/material/outlined.js +0 -10
- package/lib/icons/material/round.d.ts +0 -1
- package/lib/icons/material/round.js +0 -10
- package/lib/icons/material/sharp.d.ts +0 -1
- package/lib/icons/material/sharp.js +0 -10
- package/lib/icons/material/two-tone.d.ts +0 -1
- package/lib/icons/material/two-tone.js +0 -10
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -20
- package/lib/styles/button.d.ts +2 -20
- package/lib/styles/button.js +22 -122
- package/lib/styles/calendar-month.d.ts +1 -5
- package/lib/styles/calendar-month.js +4 -61
- package/lib/styles/calendar-navigation.d.ts +2 -6
- package/lib/styles/calendar-navigation.js +2 -27
- package/lib/styles/calendar.d.ts +1 -2
- package/lib/styles/calendar.js +1 -14
- package/lib/styles/checkbox.d.ts +0 -1
- package/lib/styles/checkbox.js +1 -23
- package/lib/styles/copy.d.ts +0 -1
- package/lib/styles/copy.js +2 -17
- package/lib/styles/custom-scrollbar.d.ts +1 -2
- package/lib/styles/custom-scrollbar.js +3 -18
- package/lib/styles/date-picker.d.ts +1 -5
- package/lib/styles/date-picker.js +35 -39
- package/lib/styles/file-upload.d.ts +1 -2
- package/lib/styles/file-upload.js +1 -16
- package/lib/styles/icon.d.ts +2 -6
- package/lib/styles/icon.js +7 -21
- package/lib/styles/input.d.ts +1 -6
- package/lib/styles/input.js +5 -54
- package/lib/styles/modal.d.ts +1 -2
- package/lib/styles/modal.js +21 -23
- package/lib/styles/option.d.ts +2 -6
- package/lib/styles/option.js +17 -12
- package/lib/styles/popup.d.ts +1 -2
- package/lib/styles/popup.js +26 -30
- package/lib/styles/radio.d.ts +0 -1
- package/lib/styles/radio.js +2 -16
- package/lib/styles/resize-observer.d.ts +1 -2
- package/lib/styles/resize-observer.js +0 -7
- package/lib/styles/scroll-container.d.ts +1 -2
- package/lib/styles/scroll-container.js +0 -19
- package/lib/styles/select-base.d.ts +0 -1
- package/lib/styles/select-base.js +68 -79
- package/lib/styles/select.d.ts +1 -2
- package/lib/styles/select.js +7 -15
- package/lib/styles/step.d.ts +1 -2
- package/lib/styles/step.js +0 -4
- package/lib/styles/switch.d.ts +0 -1
- package/lib/styles/switch.js +2 -20
- package/lib/styles/tab.d.ts +1 -2
- package/lib/styles/tab.js +0 -5
- package/lib/styles/tabs.d.ts +3 -11
- package/lib/styles/tabs.js +10 -48
- package/lib/styles/tag.d.ts +1 -5
- package/lib/styles/tag.js +2 -31
- package/lib/styles/textarea.d.ts +1 -2
- package/lib/styles/textarea.js +2 -45
- package/lib/styles/tooltip.d.ts +0 -1
- package/lib/styles/tooltip.js +0 -10
- package/lib/styles/wizard.d.ts +5 -21
- package/lib/styles/wizard.js +8 -88
- package/lib/types/common.d.ts +0 -2
- package/lib/types/common.js +0 -12
- package/lib/utils/calendar-utils.d.ts +4 -21
- package/lib/utils/calendar-utils.js +4 -177
- package/lib/utils/custom-scrollbar.d.ts +6 -20
- package/lib/utils/custom-scrollbar.js +1 -45
- package/lib/utils/flavor-sheet.d.ts +0 -1
- package/lib/utils/flavor-sheet.js +0 -23
- package/lib/utils/icon-registry.d.ts +0 -2
- package/lib/utils/icon-registry.js +1 -107
- package/lib/utils/icons.d.ts +0 -1
- package/lib/utils/icons.js +0 -9
- package/lib/utils/loader-registry.d.ts +0 -1
- package/lib/utils/loader-registry.js +0 -32
- package/lib/utils/locale.d.ts +2 -23
- package/lib/utils/locale.js +0 -86
- package/lib/utils/mobile.d.ts +0 -1
- package/lib/utils/mobile.js +0 -17
- package/lib/utils/number-format.d.ts +6 -3
- package/lib/utils/number-format.js +11 -67
- package/lib/utils/positioning.d.ts +50 -7
- package/lib/utils/positioning.js +52 -62
- package/lib/utils/property-capture.d.ts +5 -27
- package/lib/utils/property-capture.js +0 -108
- package/lib/utils/property-manager.d.ts +0 -1
- package/lib/utils/property-manager.js +0 -70
- package/lib/utils/resize-observer.d.ts +0 -1
- package/lib/utils/resize-observer.js +0 -36
- package/lib/utils/scroll-lock.d.ts +4 -11
- package/lib/utils/scroll-lock.js +0 -107
- package/lib/utils/styles.d.ts +0 -1
- package/lib/utils/styles.js +0 -24
- package/lib/version.d.ts +1 -2
- package/lib/version.js +1 -11
- package/package.json +2 -2
- package/lib/base/ty-component.d.ts.map +0 -1
- package/lib/base/ty-component.js.map +0 -1
- package/lib/components/button.d.ts.map +0 -1
- package/lib/components/button.js.map +0 -1
- package/lib/components/calendar-month.d.ts.map +0 -1
- package/lib/components/calendar-month.js.map +0 -1
- package/lib/components/calendar-navigation.d.ts.map +0 -1
- package/lib/components/calendar-navigation.js.map +0 -1
- package/lib/components/calendar.d.ts.map +0 -1
- package/lib/components/calendar.js.map +0 -1
- package/lib/components/checkbox.d.ts.map +0 -1
- package/lib/components/checkbox.js.map +0 -1
- package/lib/components/copy.d.ts.map +0 -1
- package/lib/components/copy.js.map +0 -1
- package/lib/components/date-picker.d.ts.map +0 -1
- package/lib/components/date-picker.js.map +0 -1
- package/lib/components/file-upload.d.ts.map +0 -1
- package/lib/components/file-upload.js.map +0 -1
- package/lib/components/icon.d.ts.map +0 -1
- package/lib/components/icon.js.map +0 -1
- package/lib/components/input.d.ts.map +0 -1
- package/lib/components/input.js.map +0 -1
- package/lib/components/modal.d.ts.map +0 -1
- package/lib/components/modal.js.map +0 -1
- package/lib/components/option.d.ts.map +0 -1
- package/lib/components/option.js.map +0 -1
- package/lib/components/popup.d.ts.map +0 -1
- package/lib/components/popup.js.map +0 -1
- package/lib/components/radio.d.ts.map +0 -1
- package/lib/components/radio.js.map +0 -1
- package/lib/components/resize-observer.d.ts.map +0 -1
- package/lib/components/resize-observer.js.map +0 -1
- package/lib/components/scroll-container.d.ts.map +0 -1
- package/lib/components/scroll-container.js.map +0 -1
- package/lib/components/select.d.ts.map +0 -1
- package/lib/components/select.js.map +0 -1
- package/lib/components/selected-tags.d.ts.map +0 -1
- package/lib/components/selected-tags.js.map +0 -1
- package/lib/components/step.d.ts.map +0 -1
- package/lib/components/step.js.map +0 -1
- package/lib/components/switch.d.ts.map +0 -1
- package/lib/components/switch.js.map +0 -1
- package/lib/components/tab.d.ts.map +0 -1
- package/lib/components/tab.js.map +0 -1
- package/lib/components/tabs.d.ts.map +0 -1
- package/lib/components/tabs.js.map +0 -1
- package/lib/components/tag.d.ts.map +0 -1
- package/lib/components/tag.js.map +0 -1
- package/lib/components/textarea.d.ts.map +0 -1
- package/lib/components/textarea.js.map +0 -1
- package/lib/components/tooltip.d.ts.map +0 -1
- package/lib/components/tooltip.js.map +0 -1
- package/lib/components/wizard.d.ts.map +0 -1
- package/lib/components/wizard.js.map +0 -1
- package/lib/icons/fontawesome/brands.d.ts.map +0 -1
- package/lib/icons/fontawesome/brands.js.map +0 -1
- package/lib/icons/fontawesome/regular.d.ts.map +0 -1
- package/lib/icons/fontawesome/regular.js.map +0 -1
- package/lib/icons/fontawesome/solid.d.ts.map +0 -1
- package/lib/icons/fontawesome/solid.js.map +0 -1
- package/lib/icons/heroicons/micro.d.ts.map +0 -1
- package/lib/icons/heroicons/micro.js.map +0 -1
- package/lib/icons/heroicons/mini.d.ts.map +0 -1
- package/lib/icons/heroicons/mini.js.map +0 -1
- package/lib/icons/heroicons/outline.d.ts.map +0 -1
- package/lib/icons/heroicons/outline.js.map +0 -1
- package/lib/icons/heroicons/solid.d.ts.map +0 -1
- package/lib/icons/heroicons/solid.js.map +0 -1
- package/lib/icons/lucide.d.ts.map +0 -1
- package/lib/icons/lucide.js.map +0 -1
- package/lib/icons/material/filled.d.ts.map +0 -1
- package/lib/icons/material/filled.js.map +0 -1
- package/lib/icons/material/outlined.d.ts.map +0 -1
- package/lib/icons/material/outlined.js.map +0 -1
- package/lib/icons/material/round.d.ts.map +0 -1
- package/lib/icons/material/round.js.map +0 -1
- package/lib/icons/material/sharp.d.ts.map +0 -1
- package/lib/icons/material/sharp.js.map +0 -1
- package/lib/icons/material/two-tone.d.ts.map +0 -1
- package/lib/icons/material/two-tone.js.map +0 -1
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js.map +0 -1
- package/lib/styles/button.d.ts.map +0 -1
- package/lib/styles/button.js.map +0 -1
- package/lib/styles/calendar-month.d.ts.map +0 -1
- package/lib/styles/calendar-month.js.map +0 -1
- package/lib/styles/calendar-navigation.d.ts.map +0 -1
- package/lib/styles/calendar-navigation.js.map +0 -1
- package/lib/styles/calendar.d.ts.map +0 -1
- package/lib/styles/calendar.js.map +0 -1
- package/lib/styles/checkbox.d.ts.map +0 -1
- package/lib/styles/checkbox.js.map +0 -1
- package/lib/styles/copy.d.ts.map +0 -1
- package/lib/styles/copy.js.map +0 -1
- package/lib/styles/custom-scrollbar.d.ts.map +0 -1
- package/lib/styles/custom-scrollbar.js.map +0 -1
- package/lib/styles/date-picker.d.ts.map +0 -1
- package/lib/styles/date-picker.js.map +0 -1
- package/lib/styles/file-upload.d.ts.map +0 -1
- package/lib/styles/file-upload.js.map +0 -1
- package/lib/styles/icon.d.ts.map +0 -1
- package/lib/styles/icon.js.map +0 -1
- package/lib/styles/input.d.ts.map +0 -1
- package/lib/styles/input.js.map +0 -1
- package/lib/styles/modal.d.ts.map +0 -1
- package/lib/styles/modal.js.map +0 -1
- package/lib/styles/multiselect.d.ts +0 -8
- package/lib/styles/multiselect.d.ts.map +0 -1
- package/lib/styles/multiselect.js +0 -849
- package/lib/styles/multiselect.js.map +0 -1
- package/lib/styles/option.d.ts.map +0 -1
- package/lib/styles/option.js.map +0 -1
- package/lib/styles/popup.d.ts.map +0 -1
- package/lib/styles/popup.js.map +0 -1
- package/lib/styles/radio.d.ts.map +0 -1
- package/lib/styles/radio.js.map +0 -1
- package/lib/styles/resize-observer.d.ts.map +0 -1
- package/lib/styles/resize-observer.js.map +0 -1
- package/lib/styles/scroll-container.d.ts.map +0 -1
- package/lib/styles/scroll-container.js.map +0 -1
- package/lib/styles/select-base.d.ts.map +0 -1
- package/lib/styles/select-base.js.map +0 -1
- package/lib/styles/select.d.ts.map +0 -1
- package/lib/styles/select.js.map +0 -1
- package/lib/styles/step.d.ts.map +0 -1
- package/lib/styles/step.js.map +0 -1
- package/lib/styles/switch.d.ts.map +0 -1
- package/lib/styles/switch.js.map +0 -1
- package/lib/styles/tab.d.ts.map +0 -1
- package/lib/styles/tab.js.map +0 -1
- package/lib/styles/tabs.d.ts.map +0 -1
- package/lib/styles/tabs.js.map +0 -1
- package/lib/styles/tag.d.ts.map +0 -1
- package/lib/styles/tag.js.map +0 -1
- package/lib/styles/textarea.d.ts.map +0 -1
- package/lib/styles/textarea.js.map +0 -1
- package/lib/styles/tooltip.d.ts.map +0 -1
- package/lib/styles/tooltip.js.map +0 -1
- package/lib/styles/wizard.d.ts.map +0 -1
- package/lib/styles/wizard.js.map +0 -1
- package/lib/types/common.d.ts.map +0 -1
- package/lib/types/common.js.map +0 -1
- package/lib/utils/calendar-utils.d.ts.map +0 -1
- package/lib/utils/calendar-utils.js.map +0 -1
- package/lib/utils/custom-scrollbar.d.ts.map +0 -1
- package/lib/utils/custom-scrollbar.js.map +0 -1
- package/lib/utils/flavor-sheet.d.ts.map +0 -1
- package/lib/utils/flavor-sheet.js.map +0 -1
- package/lib/utils/icon-registry.d.ts.map +0 -1
- package/lib/utils/icon-registry.js.map +0 -1
- package/lib/utils/icons.d.ts.map +0 -1
- package/lib/utils/icons.js.map +0 -1
- package/lib/utils/loader-registry.d.ts.map +0 -1
- package/lib/utils/loader-registry.js.map +0 -1
- package/lib/utils/locale.d.ts.map +0 -1
- package/lib/utils/locale.js.map +0 -1
- package/lib/utils/mobile.d.ts.map +0 -1
- package/lib/utils/mobile.js.map +0 -1
- package/lib/utils/number-format.d.ts.map +0 -1
- package/lib/utils/number-format.js.map +0 -1
- package/lib/utils/parse-boolean.d.ts +0 -39
- package/lib/utils/parse-boolean.d.ts.map +0 -1
- package/lib/utils/parse-boolean.js +0 -58
- package/lib/utils/parse-boolean.js.map +0 -1
- package/lib/utils/positioning.d.ts.map +0 -1
- package/lib/utils/positioning.js.map +0 -1
- package/lib/utils/property-capture.d.ts.map +0 -1
- package/lib/utils/property-capture.js.map +0 -1
- package/lib/utils/property-manager.d.ts.map +0 -1
- package/lib/utils/property-manager.js.map +0 -1
- package/lib/utils/resize-observer.d.ts.map +0 -1
- package/lib/utils/resize-observer.js.map +0 -1
- package/lib/utils/scroll-lock.d.ts.map +0 -1
- package/lib/utils/scroll-lock.js.map +0 -1
- package/lib/utils/styles.d.ts.map +0 -1
- package/lib/utils/styles.js.map +0 -1
- package/lib/version.d.ts.map +0 -1
- package/lib/version.js.map +0 -1
package/lib/components/wizard.js
CHANGED
|
@@ -1,70 +1,7 @@
|
|
|
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
1
|
import { ensureStyles } from '../utils/styles.js';
|
|
56
2
|
import { wizardStyles } from '../styles/wizard.js';
|
|
57
|
-
// ============================================================================
|
|
58
|
-
// WeakMaps for State Management
|
|
59
|
-
// ============================================================================
|
|
60
3
|
const eventHandlers = new WeakMap();
|
|
61
4
|
const resizeObservers = new WeakMap();
|
|
62
|
-
// ============================================================================
|
|
63
|
-
// Helper Functions - Attribute Parsing
|
|
64
|
-
// ============================================================================
|
|
65
|
-
/**
|
|
66
|
-
* Extract wizard configuration from element attributes
|
|
67
|
-
*/
|
|
68
5
|
function getWizardAttributes(el) {
|
|
69
6
|
return {
|
|
70
7
|
width: el.getAttribute('width') || '100%',
|
|
@@ -74,83 +11,47 @@ function getWizardAttributes(el) {
|
|
|
74
11
|
orientation: (el.getAttribute('orientation') || 'horizontal'),
|
|
75
12
|
};
|
|
76
13
|
}
|
|
77
|
-
/**
|
|
78
|
-
* Get all ty-step child elements
|
|
79
|
-
*/
|
|
80
14
|
function getChildSteps(el) {
|
|
81
15
|
return Array.from(el.querySelectorAll('ty-step'));
|
|
82
16
|
}
|
|
83
|
-
/**
|
|
84
|
-
* Get ID from a ty-step element
|
|
85
|
-
*/
|
|
86
17
|
function getStepId(step) {
|
|
87
18
|
return step.getAttribute('id');
|
|
88
19
|
}
|
|
89
|
-
/**
|
|
90
|
-
* Get completed step IDs as a Set
|
|
91
|
-
*/
|
|
92
20
|
function getCompletedStepIds(el) {
|
|
93
21
|
const completedAttr = el.getAttribute('completed') || '';
|
|
94
22
|
if (!completedAttr.trim())
|
|
95
23
|
return new Set();
|
|
96
24
|
return new Set(completedAttr.split(',').map(id => id.trim()).filter(Boolean));
|
|
97
25
|
}
|
|
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
26
|
function hasCustomIndicator(wizardEl, stepId) {
|
|
103
27
|
return wizardEl.querySelector(`[slot='indicator-${stepId}']`) !== null;
|
|
104
28
|
}
|
|
105
|
-
/**
|
|
106
|
-
* Check if step is disabled
|
|
107
|
-
*/
|
|
108
29
|
function isStepDisabled(step) {
|
|
109
30
|
return step.hasAttribute('disabled');
|
|
110
31
|
}
|
|
111
|
-
// ============================================================================
|
|
112
|
-
// Helper Functions - Active Step Management
|
|
113
|
-
// ============================================================================
|
|
114
|
-
/**
|
|
115
|
-
* Find index of step with given ID
|
|
116
|
-
*/
|
|
117
32
|
function findStepIndex(steps, stepId) {
|
|
118
33
|
const index = steps.findIndex(step => getStepId(step) === stepId);
|
|
119
34
|
return index >= 0 ? index : undefined;
|
|
120
35
|
}
|
|
121
|
-
/**
|
|
122
|
-
* Get the active step ID, defaulting to first step if not specified
|
|
123
|
-
*/
|
|
124
36
|
function getActiveStepId(el, steps) {
|
|
125
37
|
const activeAttr = el.getAttribute('active');
|
|
126
38
|
if (activeAttr && findStepIndex(steps, activeAttr) !== undefined) {
|
|
127
39
|
return activeAttr;
|
|
128
40
|
}
|
|
129
|
-
// Default to first step
|
|
130
41
|
if (steps.length > 0) {
|
|
131
42
|
return getStepId(steps[0]);
|
|
132
43
|
}
|
|
133
44
|
return null;
|
|
134
45
|
}
|
|
135
|
-
/**
|
|
136
|
-
* Set the active step by ID
|
|
137
|
-
*/
|
|
138
46
|
function setActiveStep(el, stepId) {
|
|
139
47
|
el.setAttribute('active', stepId);
|
|
140
48
|
}
|
|
141
|
-
/**
|
|
142
|
-
* Calculate progress percentage for the progress line overlay
|
|
143
|
-
*/
|
|
144
49
|
function calculateProgressPercent(steps, activeId, completedIds) {
|
|
145
50
|
if (steps.length <= 1 || !activeId)
|
|
146
51
|
return 0;
|
|
147
52
|
const activeIndex = steps.findIndex(s => getStepId(s) === activeId);
|
|
148
|
-
// Progress bar shows progress up to the currently active step
|
|
149
53
|
return (activeIndex / (steps.length - 1)) * 100;
|
|
150
54
|
}
|
|
151
|
-
/**
|
|
152
|
-
* Dispatch ty-wizard-step-change event
|
|
153
|
-
*/
|
|
154
55
|
function dispatchStepChangeEvent(el, activeId, activeIndex, previousId, previousIndex) {
|
|
155
56
|
const direction = previousIndex === null ? 'none'
|
|
156
57
|
: activeIndex > previousIndex ? 'forward'
|
|
@@ -169,12 +70,6 @@ function dispatchStepChangeEvent(el, activeId, activeIndex, previousId, previous
|
|
|
169
70
|
});
|
|
170
71
|
el.dispatchEvent(event);
|
|
171
72
|
}
|
|
172
|
-
// ============================================================================
|
|
173
|
-
// Event Handlers - Step Indicator Click
|
|
174
|
-
// ============================================================================
|
|
175
|
-
/**
|
|
176
|
-
* Handle step indicator click - only dispatch event (like tabs)
|
|
177
|
-
*/
|
|
178
73
|
function handleStepClick(el, stepId, event) {
|
|
179
74
|
event.preventDefault();
|
|
180
75
|
event.stopPropagation();
|
|
@@ -184,7 +79,6 @@ function handleStepClick(el, stepId, event) {
|
|
|
184
79
|
return;
|
|
185
80
|
const currentActive = getActiveStepId(el, steps);
|
|
186
81
|
const currentIndex = currentActive ? findStepIndex(steps, currentActive) ?? null : null;
|
|
187
|
-
// Just dispatch event - user handles the actual navigation
|
|
188
82
|
const direction = currentIndex === null ? 'none'
|
|
189
83
|
: targetIndex > currentIndex ? 'forward'
|
|
190
84
|
: targetIndex < currentIndex ? 'backward'
|
|
@@ -202,9 +96,6 @@ function handleStepClick(el, stepId, event) {
|
|
|
202
96
|
});
|
|
203
97
|
el.dispatchEvent(event2);
|
|
204
98
|
}
|
|
205
|
-
/**
|
|
206
|
-
* Cleanup existing event listeners
|
|
207
|
-
*/
|
|
208
99
|
function cleanupEventListeners(el) {
|
|
209
100
|
const handlers = eventHandlers.get(el);
|
|
210
101
|
if (!handlers)
|
|
@@ -212,7 +103,6 @@ function cleanupEventListeners(el) {
|
|
|
212
103
|
const shadowRoot = el.shadowRoot;
|
|
213
104
|
if (!shadowRoot)
|
|
214
105
|
return;
|
|
215
|
-
// Remove all step click handlers
|
|
216
106
|
handlers.stepClickHandlers.forEach((handler, stepId) => {
|
|
217
107
|
const button = shadowRoot.querySelector(`[data-step-id='${stepId}']`);
|
|
218
108
|
if (button) {
|
|
@@ -221,17 +111,11 @@ function cleanupEventListeners(el) {
|
|
|
221
111
|
});
|
|
222
112
|
handlers.stepClickHandlers.clear();
|
|
223
113
|
}
|
|
224
|
-
/**
|
|
225
|
-
* Setup event listeners for step indicator clicks
|
|
226
|
-
*/
|
|
227
114
|
function setupEventListeners(el, shadowRoot, steps) {
|
|
228
|
-
// Clean up any existing listeners first
|
|
229
115
|
cleanupEventListeners(el);
|
|
230
|
-
// Initialize handlers storage
|
|
231
116
|
const handlers = {
|
|
232
117
|
stepClickHandlers: new Map(),
|
|
233
118
|
};
|
|
234
|
-
// Add click listener for each step indicator
|
|
235
119
|
steps.forEach((step) => {
|
|
236
120
|
const stepId = getStepId(step);
|
|
237
121
|
if (!stepId)
|
|
@@ -243,15 +127,8 @@ function setupEventListeners(el, shadowRoot, steps) {
|
|
|
243
127
|
handlers.stepClickHandlers.set(stepId, handler);
|
|
244
128
|
}
|
|
245
129
|
});
|
|
246
|
-
// Store handlers for cleanup
|
|
247
130
|
eventHandlers.set(el, handlers);
|
|
248
131
|
}
|
|
249
|
-
// ============================================================================
|
|
250
|
-
// Transform & Positioning Updates
|
|
251
|
-
// ============================================================================
|
|
252
|
-
/**
|
|
253
|
-
* Update the transform on panels-wrapper based on active index and measured width
|
|
254
|
-
*/
|
|
255
132
|
function updateTransform(el, activeIndex) {
|
|
256
133
|
const shadowRoot = el.shadowRoot;
|
|
257
134
|
if (!shadowRoot)
|
|
@@ -259,15 +136,10 @@ function updateTransform(el, activeIndex) {
|
|
|
259
136
|
const panelsWrapper = shadowRoot.querySelector('.panels-wrapper');
|
|
260
137
|
if (!panelsWrapper)
|
|
261
138
|
return;
|
|
262
|
-
// Measure the actual width of the container
|
|
263
139
|
const containerWidth = el.offsetWidth;
|
|
264
140
|
const offsetPx = activeIndex * containerWidth;
|
|
265
|
-
// Apply transform directly in pixels
|
|
266
141
|
panelsWrapper.style.transform = `translateX(-${offsetPx}px)`;
|
|
267
142
|
}
|
|
268
|
-
/**
|
|
269
|
-
* Update progress line overlay width
|
|
270
|
-
*/
|
|
271
143
|
function updateProgressLine(el) {
|
|
272
144
|
const shadowRoot = el.shadowRoot;
|
|
273
145
|
if (!shadowRoot)
|
|
@@ -281,9 +153,6 @@ function updateProgressLine(el) {
|
|
|
281
153
|
const progressPercent = calculateProgressPercent(steps, activeId, completedIds);
|
|
282
154
|
progressOverlay.style.width = `${progressPercent}%`;
|
|
283
155
|
}
|
|
284
|
-
/**
|
|
285
|
-
* Update ARIA attributes on step indicators without re-rendering
|
|
286
|
-
*/
|
|
287
156
|
function updateStepIndicators(el, shadowRoot, activeId) {
|
|
288
157
|
const steps = getChildSteps(el);
|
|
289
158
|
const completedIds = getCompletedStepIds(el);
|
|
@@ -301,20 +170,15 @@ function updateStepIndicators(el, shadowRoot, activeId) {
|
|
|
301
170
|
button.setAttribute('data-active', String(isActive));
|
|
302
171
|
}
|
|
303
172
|
if (circle) {
|
|
304
|
-
// Use same status logic as rendering (respects user's status attribute)
|
|
305
173
|
const state = getStepStatus(step, stepId, activeId, completedIds);
|
|
306
174
|
circle.setAttribute('data-state', state);
|
|
307
175
|
}
|
|
308
|
-
// Also set data-active on the slotted indicator element in light DOM
|
|
309
176
|
const slottedIndicator = el.querySelector(`[slot='indicator-${stepId}']`);
|
|
310
177
|
if (slottedIndicator) {
|
|
311
178
|
slottedIndicator.setAttribute('data-active', String(isActive));
|
|
312
179
|
}
|
|
313
180
|
});
|
|
314
181
|
}
|
|
315
|
-
/**
|
|
316
|
-
* Update pointer-events, opacity, and data-active on step panels without re-rendering
|
|
317
|
-
*/
|
|
318
182
|
function updatePanelInteraction(el, activeId) {
|
|
319
183
|
const steps = getChildSteps(el);
|
|
320
184
|
steps.forEach((step) => {
|
|
@@ -322,7 +186,6 @@ function updatePanelInteraction(el, activeId) {
|
|
|
322
186
|
if (!stepId)
|
|
323
187
|
return;
|
|
324
188
|
const isActive = stepId === activeId;
|
|
325
|
-
// Set data-active attribute for framework conditional rendering
|
|
326
189
|
step.setAttribute('data-active', String(isActive));
|
|
327
190
|
if (isActive) {
|
|
328
191
|
step.style.pointerEvents = 'auto';
|
|
@@ -334,10 +197,6 @@ function updatePanelInteraction(el, activeId) {
|
|
|
334
197
|
}
|
|
335
198
|
});
|
|
336
199
|
}
|
|
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
200
|
function updateActiveStepState(el, stepId) {
|
|
342
201
|
const steps = getChildSteps(el);
|
|
343
202
|
const shadowRoot = el.shadowRoot;
|
|
@@ -346,41 +205,25 @@ function updateActiveStepState(el, stepId) {
|
|
|
346
205
|
const currentActive = getActiveStepId(el, steps);
|
|
347
206
|
const currentIndex = currentActive ? findStepIndex(steps, currentActive) : undefined;
|
|
348
207
|
const newIndex = findStepIndex(steps, stepId);
|
|
349
|
-
// Only update if different step and valid
|
|
350
208
|
if (currentActive === stepId || newIndex === undefined)
|
|
351
209
|
return;
|
|
352
|
-
// Update CSS variable for transform
|
|
353
210
|
el.style.setProperty('--ty-wizard-active-index', String(newIndex));
|
|
354
|
-
// Update transform directly
|
|
355
211
|
updateTransform(el, newIndex);
|
|
356
|
-
// Update step indicator states (visual + ARIA)
|
|
357
212
|
updateStepIndicators(el, shadowRoot, stepId);
|
|
358
|
-
// Update progress line overlay
|
|
359
213
|
updateProgressLine(el);
|
|
360
|
-
// Update pointer-events on panels
|
|
361
214
|
updatePanelInteraction(el, stepId);
|
|
362
|
-
// Reset scroll position of new active panel
|
|
363
215
|
const newPanel = steps[newIndex];
|
|
364
216
|
if (newPanel?.resetScroll) {
|
|
365
217
|
newPanel.resetScroll();
|
|
366
218
|
}
|
|
367
|
-
// Dispatch change event
|
|
368
219
|
dispatchStepChangeEvent(el, stepId, newIndex, currentActive, currentIndex ?? null);
|
|
369
220
|
}
|
|
370
|
-
// ============================================================================
|
|
371
|
-
// ResizeObserver for Responsive Width
|
|
372
|
-
// ============================================================================
|
|
373
|
-
/**
|
|
374
|
-
* Setup ResizeObserver for percentage widths
|
|
375
|
-
*/
|
|
376
221
|
function setupResizeObserver(el) {
|
|
377
|
-
// Clean up old observer
|
|
378
222
|
const oldObserver = resizeObservers.get(el);
|
|
379
223
|
if (oldObserver) {
|
|
380
224
|
oldObserver.disconnect();
|
|
381
225
|
}
|
|
382
226
|
const { width } = getWizardAttributes(el);
|
|
383
|
-
// Only setup observer for percentage widths
|
|
384
227
|
if (width.includes('%')) {
|
|
385
228
|
const observer = new ResizeObserver((entries) => {
|
|
386
229
|
const entry = entries[0];
|
|
@@ -388,9 +231,7 @@ function setupResizeObserver(el) {
|
|
|
388
231
|
const steps = getChildSteps(el);
|
|
389
232
|
const activeId = getActiveStepId(el, steps);
|
|
390
233
|
const activeIndex = activeId ? findStepIndex(steps, activeId) : 0;
|
|
391
|
-
// Update CSS variable with measured width
|
|
392
234
|
el.style.setProperty('--ty-wizard-width', `${measuredWidth}px`);
|
|
393
|
-
// Update transform with new width
|
|
394
235
|
if (activeIndex !== undefined) {
|
|
395
236
|
updateTransform(el, activeIndex);
|
|
396
237
|
}
|
|
@@ -399,9 +240,6 @@ function setupResizeObserver(el) {
|
|
|
399
240
|
resizeObservers.set(el, observer);
|
|
400
241
|
}
|
|
401
242
|
}
|
|
402
|
-
/**
|
|
403
|
-
* Cleanup ResizeObserver
|
|
404
|
-
*/
|
|
405
243
|
function cleanupResizeObserver(el) {
|
|
406
244
|
const observer = resizeObservers.get(el);
|
|
407
245
|
if (observer) {
|
|
@@ -409,26 +247,15 @@ function cleanupResizeObserver(el) {
|
|
|
409
247
|
resizeObservers.delete(el);
|
|
410
248
|
}
|
|
411
249
|
}
|
|
412
|
-
// ============================================================================
|
|
413
|
-
// Rendering Functions
|
|
414
|
-
// ============================================================================
|
|
415
|
-
/**
|
|
416
|
-
* Get step status - use user's explicit status attribute or fall back to automatic detection
|
|
417
|
-
*/
|
|
418
250
|
function getStepStatus(step, stepId, activeId, completedIds) {
|
|
419
|
-
// Check if user provided explicit status
|
|
420
251
|
const explicitStatus = step.getAttribute('status');
|
|
421
252
|
if (explicitStatus && ['completed', 'active', 'pending', 'error'].includes(explicitStatus)) {
|
|
422
253
|
return explicitStatus;
|
|
423
254
|
}
|
|
424
|
-
// Fall back to automatic detection
|
|
425
255
|
const isActive = stepId === activeId;
|
|
426
256
|
const isCompleted = completedIds.has(stepId);
|
|
427
257
|
return isCompleted ? 'completed' : isActive ? 'active' : 'pending';
|
|
428
258
|
}
|
|
429
|
-
/**
|
|
430
|
-
* Generate HTML for step indicators with progress line
|
|
431
|
-
*/
|
|
432
259
|
function renderStepIndicators(wizardEl, steps, activeId, completedIds) {
|
|
433
260
|
const activeIndex = activeId ? steps.findIndex(s => getStepId(s) === activeId) : 0;
|
|
434
261
|
const indicators = steps.map((step, index) => {
|
|
@@ -440,32 +267,20 @@ function renderStepIndicators(wizardEl, steps, activeId, completedIds) {
|
|
|
440
267
|
const disabled = isStepDisabled(step);
|
|
441
268
|
const isActive = stepId === activeId;
|
|
442
269
|
const hasCustom = hasCustomIndicator(wizardEl, stepId);
|
|
443
|
-
// User can override status via attribute
|
|
444
270
|
const state = getStepStatus(step, stepId, activeId, completedIds);
|
|
445
|
-
// Icon content varies by state
|
|
446
271
|
let circleContent = '';
|
|
447
272
|
if (hasCustom) {
|
|
448
273
|
circleContent = `<slot name="indicator-${stepId}"></slot>`;
|
|
449
274
|
}
|
|
450
275
|
else if (state === 'completed') {
|
|
451
|
-
// Checkmark for completed
|
|
452
276
|
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
277
|
}
|
|
454
278
|
else if (state === 'error') {
|
|
455
|
-
// X icon for error
|
|
456
279
|
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
280
|
}
|
|
458
281
|
else {
|
|
459
|
-
// Number for active/pending
|
|
460
282
|
circleContent = `<span style="font-size: 12px; font-weight: 700;">${index + 1}</span>`;
|
|
461
283
|
}
|
|
462
|
-
// No aria-controls: the button lives in shadow DOM, the panel (<ty-step>,
|
|
463
|
-
// see the render() step below) is light DOM — ARIA id-references don't
|
|
464
|
-
// resolve across a shadow-tree boundary, so a cross-boundary reference
|
|
465
|
-
// here is spec-invalid even though getElementById can technically find
|
|
466
|
-
// the target (axe's aria-valid-attr-value correctly flags it). The
|
|
467
|
-
// load-bearing relationship is role=tab + aria-selected here, and
|
|
468
|
-
// aria-labelledby (pointing back at this button) on the <ty-step> side.
|
|
469
284
|
return `<button
|
|
470
285
|
class="step-indicator"
|
|
471
286
|
role="tab"
|
|
@@ -500,10 +315,6 @@ function renderStepIndicators(wizardEl, steps, activeId, completedIds) {
|
|
|
500
315
|
</div>
|
|
501
316
|
`;
|
|
502
317
|
}
|
|
503
|
-
/**
|
|
504
|
-
* Render the wizard container with step indicators and panel viewport.
|
|
505
|
-
* Smart rendering: checks if structure exists and only updates when needed.
|
|
506
|
-
*/
|
|
507
318
|
function render(el) {
|
|
508
319
|
const shadowRoot = el.shadowRoot;
|
|
509
320
|
if (!shadowRoot)
|
|
@@ -513,9 +324,6 @@ function render(el) {
|
|
|
513
324
|
const activeId = getActiveStepId(el, steps);
|
|
514
325
|
const activeIndex = activeId ? (findStepIndex(steps, activeId) ?? 0) : 0;
|
|
515
326
|
const completedIds = getCompletedStepIds(el);
|
|
516
|
-
// Each <ty-step> IS its tabpanel (single catch-all <slot> in the carousel
|
|
517
|
-
// viewport below) — same pattern and same rationale as ty-tabs. `id` is
|
|
518
|
-
// also the stepId (getStepId reads it directly), so it's never reassigned.
|
|
519
327
|
steps.forEach((step) => {
|
|
520
328
|
const stepId = getStepId(step);
|
|
521
329
|
if (!stepId)
|
|
@@ -524,48 +332,36 @@ function render(el) {
|
|
|
524
332
|
step.setAttribute('aria-labelledby', `step-${stepId}`);
|
|
525
333
|
step.setAttribute('tabindex', '0');
|
|
526
334
|
});
|
|
527
|
-
// Check if structure already exists
|
|
528
335
|
const existingContainer = shadowRoot.querySelector('.wizard-container');
|
|
529
336
|
const existingIndicators = shadowRoot.querySelector('.step-indicators-wrapper');
|
|
530
337
|
const existingViewport = shadowRoot.querySelector('.panels-viewport');
|
|
531
|
-
// Ensure styles are loaded
|
|
532
338
|
ensureStyles(shadowRoot, { css: wizardStyles, id: 'ty-wizard' });
|
|
533
|
-
// Set CSS variables for dimensions and step count
|
|
534
339
|
el.style.setProperty('--ty-wizard-width', width.includes('%') ? '100%' : width);
|
|
535
340
|
el.style.setProperty('--ty-wizard-height', height);
|
|
536
341
|
el.style.setProperty('--ty-wizard-active-index', String(activeIndex));
|
|
537
342
|
el.style.setProperty('--ty-wizard-step-count', String(steps.length));
|
|
538
343
|
if (existingContainer && existingIndicators && existingViewport) {
|
|
539
|
-
// === SMART UPDATE: Structure exists, only update what changed ===
|
|
540
|
-
// Remove old indicators and replace
|
|
541
344
|
existingIndicators.remove();
|
|
542
345
|
const newIndicatorsHtml = renderStepIndicators(el, steps, activeId, completedIds);
|
|
543
346
|
const tempDiv = document.createElement('div');
|
|
544
347
|
tempDiv.innerHTML = newIndicatorsHtml;
|
|
545
348
|
existingContainer.insertBefore(tempDiv.firstElementChild, existingViewport);
|
|
546
|
-
// Re-setup event listeners (indicators were recreated)
|
|
547
349
|
setupEventListeners(el, shadowRoot, steps);
|
|
548
|
-
// Update ARIA and data-active attributes
|
|
549
350
|
updateStepIndicators(el, shadowRoot, activeId || '');
|
|
550
|
-
// Measure indicators height
|
|
551
351
|
requestAnimationFrame(() => {
|
|
552
352
|
const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
|
|
553
353
|
if (indicators) {
|
|
554
354
|
const indicatorsHeight = indicators.offsetHeight;
|
|
555
355
|
el.style.setProperty('--ty-wizard-indicators-height', `${indicatorsHeight}px`);
|
|
556
356
|
}
|
|
557
|
-
// Update transform with current active index
|
|
558
357
|
updateTransform(el, activeIndex);
|
|
559
|
-
// Update progress line
|
|
560
358
|
updateProgressLine(el);
|
|
561
359
|
});
|
|
562
|
-
// Update panel interaction states
|
|
563
360
|
if (activeId) {
|
|
564
361
|
updatePanelInteraction(el, activeId);
|
|
565
362
|
}
|
|
566
363
|
}
|
|
567
364
|
else {
|
|
568
|
-
// === FULL RENDER: First time or structure missing ===
|
|
569
365
|
shadowRoot.innerHTML = `
|
|
570
366
|
<div class="wizard-container">
|
|
571
367
|
${renderStepIndicators(el, steps, activeId, completedIds)}
|
|
@@ -576,80 +372,71 @@ function render(el) {
|
|
|
576
372
|
</div>
|
|
577
373
|
</div>
|
|
578
374
|
`;
|
|
579
|
-
// Measure indicators height, update transform and progress after render
|
|
580
375
|
requestAnimationFrame(() => {
|
|
581
376
|
const indicators = shadowRoot.querySelector('.step-indicators-wrapper');
|
|
582
377
|
if (indicators) {
|
|
583
378
|
const indicatorsHeight = indicators.offsetHeight;
|
|
584
379
|
el.style.setProperty('--ty-wizard-indicators-height', `${indicatorsHeight}px`);
|
|
585
380
|
}
|
|
586
|
-
// Update transform with measured width
|
|
587
381
|
updateTransform(el, activeIndex);
|
|
588
|
-
// Update progress line
|
|
589
382
|
updateProgressLine(el);
|
|
590
383
|
});
|
|
591
|
-
// Setup event listeners
|
|
592
384
|
setupEventListeners(el, shadowRoot, steps);
|
|
593
|
-
// Update ARIA and data-active attributes on initial render
|
|
594
385
|
updateStepIndicators(el, shadowRoot, activeId || '');
|
|
595
|
-
// Setup ResizeObserver for responsive width
|
|
596
386
|
setupResizeObserver(el);
|
|
597
|
-
// Update step panel states
|
|
598
387
|
if (activeId) {
|
|
599
388
|
updatePanelInteraction(el, activeId);
|
|
600
389
|
}
|
|
601
390
|
}
|
|
602
391
|
}
|
|
603
|
-
/**
|
|
604
|
-
* Cleanup when wizard component is disconnected
|
|
605
|
-
*/
|
|
606
392
|
function cleanup(el) {
|
|
607
393
|
cleanupEventListeners(el);
|
|
608
394
|
cleanupResizeObserver(el);
|
|
609
395
|
}
|
|
610
|
-
// ============================================================================
|
|
611
|
-
// Component Definition
|
|
612
|
-
// ============================================================================
|
|
613
|
-
/**
|
|
614
|
-
* TyWizard Web Component
|
|
615
|
-
*/
|
|
616
396
|
export class TyWizard extends HTMLElement {
|
|
617
|
-
/** Observed attributes */
|
|
618
397
|
static get observedAttributes() {
|
|
619
398
|
return ['width', 'height', 'active', 'completed', 'orientation'];
|
|
620
399
|
}
|
|
621
400
|
constructor() {
|
|
622
401
|
super();
|
|
402
|
+
this._childObserver = null;
|
|
403
|
+
this._childRenderQueued = false;
|
|
623
404
|
this.attachShadow({ mode: 'open' });
|
|
624
405
|
}
|
|
625
406
|
connectedCallback() {
|
|
626
407
|
render(this);
|
|
408
|
+
this._childObserver = new MutationObserver(() => {
|
|
409
|
+
if (this._childRenderQueued)
|
|
410
|
+
return;
|
|
411
|
+
this._childRenderQueued = true;
|
|
412
|
+
queueMicrotask(() => {
|
|
413
|
+
this._childRenderQueued = false;
|
|
414
|
+
if (this.isConnected)
|
|
415
|
+
render(this);
|
|
416
|
+
});
|
|
417
|
+
});
|
|
418
|
+
this._childObserver.observe(this, { childList: true });
|
|
627
419
|
}
|
|
628
420
|
disconnectedCallback() {
|
|
421
|
+
this._childObserver?.disconnect();
|
|
422
|
+
this._childObserver = null;
|
|
629
423
|
cleanup(this);
|
|
630
424
|
}
|
|
631
425
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
632
|
-
// Smart rendering: only full render when structural attributes change
|
|
633
426
|
if (name === 'active') {
|
|
634
|
-
// Active step changed - update state, then do smart render
|
|
635
427
|
if (newValue) {
|
|
636
428
|
updateActiveStepState(this, newValue);
|
|
637
429
|
}
|
|
638
|
-
// Always call render after active change to update indicator states
|
|
639
430
|
render(this);
|
|
640
431
|
}
|
|
641
432
|
else if (name === 'completed') {
|
|
642
|
-
// Completed steps changed - update progress line and indicators
|
|
643
433
|
render(this);
|
|
644
434
|
}
|
|
645
435
|
else {
|
|
646
|
-
// Other attributes changed (width, height, linear, orientation) - full render
|
|
647
436
|
render(this);
|
|
648
437
|
}
|
|
649
438
|
}
|
|
650
439
|
}
|
|
651
|
-
// Register the custom element
|
|
652
440
|
if (!customElements.get('ty-wizard')) {
|
|
653
441
|
customElements.define('ty-wizard', TyWizard);
|
|
654
442
|
}
|
|
655
|
-
//# sourceMappingURL=wizard.js.map
|
|
@@ -554,4 +554,3 @@ export declare const yoast = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=
|
|
|
554
554
|
export declare const youtubeSquare = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M282 256.2l-95.2-54.1 0 108.2 95.2-54.1zM384 32L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64zm14.4 136.1c7.6 28.6 7.6 88.2 7.6 88.2s0 59.6-7.6 88.1c-4.2 15.8-16.5 27.7-32.2 31.9-28.3 7.7-142.2 7.7-142.2 7.7s-113.9 0-142.2-7.6c-15.7-4.2-28-16.1-32.2-31.9-7.6-28.6-7.6-88.2-7.6-88.2s0-59.7 7.6-88.2c4.2-15.8 16.5-28.2 32.2-32.4 28.3-7.7 142.2-7.7 142.2-7.7s113.9 0 142.2 7.7c15.7 4.2 28 16.6 32.2 32.4z\"/></svg>";
|
|
555
555
|
export declare const youtube = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M549.7 124.1C543.5 100.4 524.9 81.8 501.4 75.5 458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5C51.2 81.8 32.7 100.4 26.4 124.1 15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8 42.6 11.5 213.4 11.5 213.4 11.5s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6l0-162.4 142.7 81.2-142.7 81.2z\"/></svg>";
|
|
556
556
|
export declare const zhihu = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M170.5 148.1l0 217.5 23.4 0 7.7 26.4 42-26.4 49.5 0 0-217.5-122.7 0zm97.8 193.9l-27.9 0-27.9 17.5-5.1-17.5-11.9 0 0-170.3 72.8 0 0 170.3zM149.8 247.7l-52.3 0c1.7-27.1 2.2-51.6 2.2-73.5l51.2 0s2-22.6-8.6-22.3l-88.5 0c3.5-13.1 7.9-26.7 13.1-40.7 0 0-24.1 0-32.3 21.6-3.4 8.9-13.2 43.1-30.7 78.1 5.9-.6 25.4-1.2 36.8-22.2 2.1-5.9 2.5-6.7 5.1-14.5l28.9 0c0 10.5-1.2 66.9-1.7 73.4l-52.3 0c-11.7 0-15.6 23.6-15.6 23.6l65.6 0c-4.4 49.9-28 91.9-70.8 125.1 20.5 5.9 40.9-.9 51-9.9 0 0 23-20.9 35.6-69.3l54 64.9s7.9-26.9-1.2-40c-7.6-8.9-28.1-33.1-36.8-41.8L87.9 312c4.4-14 7-27.6 7.9-40.7l61.6 0s-.1-23.6-7.6-23.6l0 0zm412-1.6c20.8-25.6 45-58.6 45-58.6s-18.6-14.8-27.4-4.1c-6 8.2-36.8 48.2-36.8 48.2l19.2 14.4zM411.8 187c-9-8.2-25.9 2.1-25.9 2.1s39.5 55 41.1 57.4l19.5-13.7s-25.7-37.6-34.7-45.9l0 0 0 0zM640 258.4c-19.8 0-130.9 .9-131.1 .9l0-101c4.8 0 12.4-.4 22.8-1.2 40.9-2.4 70.1-4 87.8-4.8 0 0 12.2-27.2-.6-33.4-3.1-1.2-23.2 4.6-23.2 4.6s-165.2 16.5-232.4 18c1.6 8.8 7.6 17.1 15.8 19.6 13.3 3.5 22.7 1.7 49.2 .9 24.8-1.6 43.7-2.4 56.5-2.4l0 99.8-133.5 0s2.8 22.3 25.5 22.9l107.9 0 0 70.9c0 14-11.2 22-24.5 21.1-14.1 .1-26.1-1.1-41.7-1.8 2 4 6.3 14.4 19.3 21.8 9.9 4.8 16.2 6.6 26 6.6 29.6 0 45.7-17.3 44.9-45.3l0-73.3 122.4 0c9.7 0 8.7-23.8 8.7-23.8l0 0z\"/></svg>";
|
|
557
|
-
//# sourceMappingURL=brands.d.ts.map
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* FontAwesome 6 BRANDS - Auto-generated
|
|
3
|
-
* DO NOT EDIT THIS FILE MANUALLY
|
|
4
|
-
* Generated from: https://github.com/FortAwesome/Font-Awesome
|
|
5
|
-
* Style: brands
|
|
6
|
-
* Total icons: 549
|
|
7
|
-
*/
|
|
8
1
|
export const icon11ty = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M615.3 168.5c2.3 0 4.6 .7 6.6 2.2 1.9 1.4 3.1 3.3 3.8 5 1.4 3.3 1.8 7.3 1.8 11.3 0 2.2-.3 4.9-.7 7.6l0 .4-50.9 264.9 0 0c-4 22.1-8.5 39.4-13.6 51.7-5 12.1-10.9 21.6-18.6 27l0 0c-7.5 5.3-16.9 7.7-27.6 8l-3 0c-16 0-29.3-4.2-36.9-14.8-.1-.1-.1-.1-.2-.2-.1-.2-.3-.4-.5-.6l0 0c-1.8-2.4-2.5-5.2-2.9-7.4-.5-2.8-.7-6.1-.7-9.8 0-7.3 .6-13.5 2.1-18.2 1.4-4.4 4.8-10.4 12.2-10.4l1.3 .1c.2 0 .4 .1 .5 .1 .3 .1 .6 .1 .8 .2 .6 .1 1.3 .3 2.2 .6l7.6 2.2 .1 0 7.6 2.1c.9 .2 1.7 .4 2.2 .5 .4 .1 .6 .1 .7 .1 0 0 .1 0 .2-.1 .1-.1 .4-.2 .8-.6 .9-.9 2.2-2.6 3.6-5.7 2.6-5.8 4.2-14.7 4.2-27.4 0-.7-.3-3.4-1.3-8.9-.9-5.1-2.3-12.2-4.2-21.1l-56-232.9-.1-.4 0-.3c-.4-2.7-.7-5.3-.7-7.3 0-3.7 .4-7.5 1.7-10.6 .7-1.6 1.8-3.4 3.5-4.9 1.9-1.5 4.2-2.3 6.5-2.3l34.6 0c4.6 0 8.7 1.7 11.9 5l1.3 1.5c1.2 1.6 2 3.4 2.7 5.2 .9 2.4 1.5 5.1 2 8.1l30.4 161.2 23.8-160c.8-5.8 2.2-11.4 5.1-15.1 3-3.8 7.2-5.8 12-5.8l24 0zM375.1 34.6c2.6 0 5.1 .7 7.4 2.3 2.2 1.5 3.7 3.6 4.7 5.7 1.9 4 2.5 9.1 2.5 14.5l0 111.2c0 .1 0 .2 0 .3l32.4 0c2.5 0 5 .6 7.2 2.1 2.2 1.4 3.7 3.4 4.8 5.5 2 3.9 2.6 8.8 2.6 13.9l0 15.4c0 5-.6 9.8-2.6 13.7-1.1 2-2.6 4-4.8 5.4-2.2 1.4-4.7 2-7.1 2l-32.5 0 0 145.8c0 10.8 .7 19.5 2 26.2 1.4 6.9 3.1 10.9 4.7 12.9 1.2 1.5 2.2 2.5 3.1 3.2l2.2 1.4 .1 .1 2.9 .8c1.2 .2 2.6 .3 4.3 .3l20.3 0c4.5 0 8.9 1.7 11.8 5.8 2.6 3.6 3.3 8.1 3.3 12.2l0 17.2c0 4.5-.8 9.3-3.4 13.1-3 4.2-7.5 6-12.3 6l0 0-29.1 .1c-8 0-15-.6-21.2-1.7-6.7-1.3-13.4-4.1-20.1-8.1-7.2-4.4-13-10.3-17.5-17.8-4.5-7.5-7.9-17.5-10.5-29.5-2.6-12.2-3.9-26.6-3.9-43l0-144.9-13.4 0c-2.4 0-4.9-.6-7.1-2-2.2-1.4-3.7-3.4-4.8-5.4-2-3.9-2.6-8.7-2.6-13.7l0-15.4c0-5.1 .6-10 2.6-13.9 1.1-2.1 2.6-4 4.8-5.5 2.2-1.5 4.7-2.1 7.2-2.1l13.4 0 0-.6 5.2-111.2 0-.1 .3-3.9c.5-3.8 1.3-7.4 2.7-10.3 2.1-4.2 6-7.9 11.8-7.9l28.6 0zm-268 11.7c1.8 .3 3.6 .9 5.3 2.1 2.1 1.5 3.5 3.5 4.4 5.4 1.7 3.7 2.3 8.4 2.3 13.2l0 377.8c0 6.7-.6 12.6-2.4 17.1-.9 2.3-2.3 4.7-4.4 6.5-2.3 2-5.1 3-8.1 3l-43.7 0c-3 0-5.8-1.1-8.1-3.1-2.1-1.9-3.4-4.3-4.2-6.5-1.7-4.5-2.3-10.3-2.3-17l0-315.8c-4.8 1.2-8.7 2.2-11.5 2.9-1.9 .5-3.4 .8-4.4 1.1-.5 .1-.9 .2-1.2 .3-.1 0-.3 .1-.5 .1-.1 0-.2 0-.3 .1 0 0-.2 0-.3 0 0 0-.2 0-.4 0l0 0c-.1 0-.3 0-.4 0-.1 0-.2 0-.2 0-2.2 .1-4.5-.4-6.6-1.7-2.3-1.4-3.8-3.4-4.7-5.3-1.8-3.7-2.3-8.4-2.3-13l0-27.4c0-4.4 .7-8.8 2.6-12.4 2.1-3.9 5.5-6.6 9.8-7.6l75.5-19.5c1.4-.4 2.9-.5 4.4-.5l1.8 .1zm143.8-.5c1.8 .3 3.6 .9 5.2 2.1 2.1 1.5 3.5 3.5 4.4 5.4 1.7 3.7 2.2 8.4 2.2 13.2l0 377.8c0 6.7-.6 12.6-2.4 17.1-.9 2.3-2.3 4.7-4.4 6.5-2.3 2-5.1 3-8.1 3l-43.7 0c-3 0-5.8-1.1-8.1-3.1-2.1-1.9-3.4-4.3-4.2-6.5-1.7-4.5-2.3-10.3-2.3-17l0-315.8c-4.8 1.2-8.7 2.2-11.5 2.9-1.9 .5-3.4 .8-4.4 1.1-.5 .1-.9 .2-1.2 .3-.1 0-.3 .1-.5 .1-.1 0-.2 0-.3 .1-.1 0-.2 0-.3 0 0 0-.2 0-.4 0l0 0c-.1 0-.2 0-.3 0-.1 0-.2 0-.3 0-2.2 .1-4.5-.4-6.6-1.7-2.3-1.4-3.8-3.4-4.7-5.3-1.8-3.7-2.3-8.3-2.3-13l0-27.4c0-4.4 .7-8.7 2.6-12.4 2.1-3.9 5.5-6.6 9.8-7.6l75.4-19.4c1.4-.4 2.9-.5 4.4-.5l1.8 .1z"/></svg>`;
|
|
9
2
|
export const icon42Group = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M320 96l0 320c21 0 41.8-4.1 61.2-12.2s37-19.8 51.9-34.7 26.6-32.5 34.7-51.9 12.2-40.2 12.2-61.2-4.1-41.8-12.2-61.2-19.8-37.1-34.7-51.9-32.5-26.6-51.9-34.7-40.2-12.2-61.2-12.2zM0 256L160 416 320 256 160 96 0 256zm480 0c0 21 4.1 41.8 12.2 61.2s19.8 37 34.7 51.9 32.5 26.6 51.9 34.7 40.2 12.2 61.2 12.2l0-320c-42.4 0-83.1 16.9-113.1 46.9S480 213.6 480 256z"/></svg>`;
|
|
10
3
|
export const icon500px = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M71.8 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2l.3 0 0-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7 8.5-28.6 53 0 89.4-10.1 89.4-64.4 0-61-77.1-89.6-116.9-44.6-23.5 26.4-17.6 42.1-17.6 157.6 50.7 31 118.3 22 160.4-20.1 24.8-24.8 38.5-58 38.5-93 0-35.2-13.8-68.2-38.8-93.3-24.8-24.8-57.8-38.5-93.3-38.5S151 163.3 126.3 188c-.3 .3-16 16.5-21.2 23.9l-.5 .6c-3.3 4.7-6.3 9.1-20.1 6.1-6.9-1.7-14.3-5.8-14.3-11.8L70.2 20c0-5 3.9-10.5 10.5-10.5L322 9.5c8.3 0 8.3 11.6 8.3 15.1 0 3.9 0 15.1-8.3 15.1l-223.2 0 0 132.9 .3 0c104.2-109.8 282.8-36 282.8 108.9 0 178.1-244.8 220.3-310.1 62.8zM135.1 83.5c-.5 4.2 4.6 24.5 14.6 20.6 124.8-47.5 202.8 40.4 209.4 40.4 4.8 0 22.8-15.3 14.3-22.8-93.2-89-234.5-57-238.3-38.2zM361.5 414.7c-110 109.9-299 60.8-332-104.2 0-12.2-30.4-7.4-28.9 3.3 24 173.4 246 256.9 381.6 121.3 6.9-7.8-12.6-28.4-20.7-20.4zM182.1 306.6c0 4 4.3 7.3 5.5 8.5 3 3 6.1 4.4 8.5 4.4 3.8 0 2.6 .2 22.3-19.5 19.6 19.3 19.1 19.5 22.3 19.5 5.4 0 18.5-10.4 10.7-18.2l-17.3-17.3 18.2-18.2c6.3-6.8-10.1-21.8-16.2-15.7L218.2 268c-18.6-18.8-18.4-19.5-21.5-19.5-5 0-18 11.7-12.4 17.3L202.5 284c-18.1 17.9-20.4 19.2-20.4 22.6z"/></svg>`;
|
|
@@ -554,4 +547,3 @@ export const yoast = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 5
|
|
|
554
547
|
export const youtubeSquare = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M282 256.2l-95.2-54.1 0 108.2 95.2-54.1zM384 32L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64zm14.4 136.1c7.6 28.6 7.6 88.2 7.6 88.2s0 59.6-7.6 88.1c-4.2 15.8-16.5 27.7-32.2 31.9-28.3 7.7-142.2 7.7-142.2 7.7s-113.9 0-142.2-7.6c-15.7-4.2-28-16.1-32.2-31.9-7.6-28.6-7.6-88.2-7.6-88.2s0-59.7 7.6-88.2c4.2-15.8 16.5-28.2 32.2-32.4 28.3-7.7 142.2-7.7 142.2-7.7s113.9 0 142.2 7.7c15.7 4.2 28 16.6 32.2 32.4z"/></svg>`;
|
|
555
548
|
export const youtube = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M549.7 124.1C543.5 100.4 524.9 81.8 501.4 75.5 458.9 64 288.1 64 288.1 64S117.3 64 74.7 75.5C51.2 81.8 32.7 100.4 26.4 124.1 15 167 15 256.4 15 256.4s0 89.4 11.4 132.3c6.3 23.6 24.8 41.5 48.3 47.8 42.6 11.5 213.4 11.5 213.4 11.5s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zM232.2 337.6l0-162.4 142.7 81.2-142.7 81.2z"/></svg>`;
|
|
556
549
|
export const zhihu = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M170.5 148.1l0 217.5 23.4 0 7.7 26.4 42-26.4 49.5 0 0-217.5-122.7 0zm97.8 193.9l-27.9 0-27.9 17.5-5.1-17.5-11.9 0 0-170.3 72.8 0 0 170.3zM149.8 247.7l-52.3 0c1.7-27.1 2.2-51.6 2.2-73.5l51.2 0s2-22.6-8.6-22.3l-88.5 0c3.5-13.1 7.9-26.7 13.1-40.7 0 0-24.1 0-32.3 21.6-3.4 8.9-13.2 43.1-30.7 78.1 5.9-.6 25.4-1.2 36.8-22.2 2.1-5.9 2.5-6.7 5.1-14.5l28.9 0c0 10.5-1.2 66.9-1.7 73.4l-52.3 0c-11.7 0-15.6 23.6-15.6 23.6l65.6 0c-4.4 49.9-28 91.9-70.8 125.1 20.5 5.9 40.9-.9 51-9.9 0 0 23-20.9 35.6-69.3l54 64.9s7.9-26.9-1.2-40c-7.6-8.9-28.1-33.1-36.8-41.8L87.9 312c4.4-14 7-27.6 7.9-40.7l61.6 0s-.1-23.6-7.6-23.6l0 0zm412-1.6c20.8-25.6 45-58.6 45-58.6s-18.6-14.8-27.4-4.1c-6 8.2-36.8 48.2-36.8 48.2l19.2 14.4zM411.8 187c-9-8.2-25.9 2.1-25.9 2.1s39.5 55 41.1 57.4l19.5-13.7s-25.7-37.6-34.7-45.9l0 0 0 0zM640 258.4c-19.8 0-130.9 .9-131.1 .9l0-101c4.8 0 12.4-.4 22.8-1.2 40.9-2.4 70.1-4 87.8-4.8 0 0 12.2-27.2-.6-33.4-3.1-1.2-23.2 4.6-23.2 4.6s-165.2 16.5-232.4 18c1.6 8.8 7.6 17.1 15.8 19.6 13.3 3.5 22.7 1.7 49.2 .9 24.8-1.6 43.7-2.4 56.5-2.4l0 99.8-133.5 0s2.8 22.3 25.5 22.9l107.9 0 0 70.9c0 14-11.2 22-24.5 21.1-14.1 .1-26.1-1.1-41.7-1.8 2 4 6.3 14.4 19.3 21.8 9.9 4.8 16.2 6.6 26 6.6 29.6 0 45.7-17.3 44.9-45.3l0-73.3 122.4 0c9.7 0 8.7-23.8 8.7-23.8l0 0z"/></svg>`;
|
|
557
|
-
//# sourceMappingURL=brands.js.map
|
|
@@ -278,4 +278,3 @@ export declare const windowMaximize = "<svg xmlns=\"http://www.w3.org/2000/svg\"
|
|
|
278
278
|
export declare const windowMinimize = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M0 424c0-13.3 10.7-24 24-24l464 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 448c-13.3 0-24-10.7-24-24z\"/></svg>";
|
|
279
279
|
export declare const windowRestore = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M512 80L224 80c-8.8 0-16 7.2-16 16l0 16-48 0 0-16c0-35.3 28.7-64 64-64l288 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64l-48 0 0-48 48 0c8.8 0 16-7.2 16-16l0-192c0-8.8-7.2-16-16-16zM368 288l-320 0 0 128c0 8.8 7.2 16 16 16l288 0c8.8 0 16-7.2 16-16l0-128zM64 160l288 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z\"/></svg>";
|
|
280
280
|
export declare const xmarkCircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM167 167c-9.4 9.4-9.4 24.6 0 33.9l55 55-55 55c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l55-55 55 55c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-55-55 55-55c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-55 55-55-55c-9.4-9.4-24.6-9.4-33.9 0z\"/></svg>";
|
|
281
|
-
//# sourceMappingURL=regular.d.ts.map
|
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* FontAwesome 6 REGULAR - Auto-generated
|
|
3
|
-
* DO NOT EDIT THIS FILE MANUALLY
|
|
4
|
-
* Generated from: https://github.com/FortAwesome/Font-Awesome
|
|
5
|
-
* Style: regular
|
|
6
|
-
* Total icons: 273
|
|
7
|
-
*/
|
|
8
1
|
export const addressBook = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M384 48c8.8 0 16 7.2 16 16l0 384c0 8.8-7.2 16-16 16L96 464c-8.8 0-16-7.2-16-16L80 64c0-8.8 7.2-16 16-16l288 0zM96 0C60.7 0 32 28.7 32 64l0 384c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L96 0zM240 248a56 56 0 1 0 0-112 56 56 0 1 0 0 112zm-32 40c-44.2 0-80 35.8-80 80 0 8.8 7.2 16 16 16l192 0c8.8 0 16-7.2 16-16 0-44.2-35.8-80-80-80l-64 0zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64zM496 192c-8.8 0-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64z"/></svg>`;
|
|
9
2
|
export const addressCard = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M512 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l448 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM208 248a56 56 0 1 0 0-112 56 56 0 1 0 0 112zm-32 40c-44.2 0-80 35.8-80 80 0 8.8 7.2 16 16 16l192 0c8.8 0 16-7.2 16-16 0-44.2-35.8-80-80-80l-64 0zM376 144c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0z"/></svg>`;
|
|
10
3
|
export const alarmClock = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M402.6 50.2c-5.4 1.7-11.3 1.8-16.2-.9-5.8-3.2-11.8-6.2-17.8-8.9-10.4-4.7-13.7-18.3-4.1-24.6 15-9.9 33-15.7 52.3-15.7 52.6 0 95.2 42.6 95.2 95.2 0 13.2-2.7 25.8-7.6 37.3-4.5 10.5-18.4 9.8-24.9 .4-3.8-5.5-7.8-10.8-12-16-3.5-4.4-4.5-10.2-3.8-15.8 .2-1.9 .4-3.9 .4-5.9 0-26.1-21.2-47.2-47.2-47.2-4.9 0-9.7 .8-14.2 2.2zM32.5 132.9c-6.5 9.4-20.5 10.1-24.9-.4-4.9-11.5-7.6-24.1-7.6-37.3 0-52.6 42.6-95.2 95.2-95.2 19.3 0 37.3 5.8 52.3 15.7 9.6 6.3 6.3 19.9-4.1 24.6-6.1 2.8-12 5.7-17.8 8.9-4.9 2.7-10.9 2.6-16.2 .9-4.5-1.4-9.2-2.2-14.2-2.2-26.1 0-47.2 21.2-47.2 47.2 0 2 .1 4 .4 5.9 .7 5.6-.3 11.4-3.8 15.8-4.2 5.2-8.2 10.5-12 16zM432 288a176 176 0 1 0 -352 0 176 176 0 1 0 352 0zM396.5 462.5C358.1 493.4 309.2 512 256 512s-102.1-18.6-140.5-49.5L73 505c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l42.5-42.5C50.6 390.1 32 341.2 32 288 32 164.3 132.3 64 256 64S480 164.3 480 288c0 53.2-18.6 102.1-49.5 140.5L473 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-42.5-42.5zM280 184l0 94.1 41 41c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-4.5-4.5-7-10.6-7-17l0-104c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>`;
|
|
@@ -278,4 +271,3 @@ export const windowMaximize = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="
|
|
|
278
271
|
export const windowMinimize = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M0 424c0-13.3 10.7-24 24-24l464 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 448c-13.3 0-24-10.7-24-24z"/></svg>`;
|
|
279
272
|
export const windowRestore = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M512 80L224 80c-8.8 0-16 7.2-16 16l0 16-48 0 0-16c0-35.3 28.7-64 64-64l288 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64l-48 0 0-48 48 0c8.8 0 16-7.2 16-16l0-192c0-8.8-7.2-16-16-16zM368 288l-320 0 0 128c0 8.8 7.2 16 16 16l288 0c8.8 0 16-7.2 16-16l0-128zM64 160l288 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z"/></svg>`;
|
|
280
273
|
export const xmarkCircle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM167 167c-9.4 9.4-9.4 24.6 0 33.9l55 55-55 55c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l55-55 55 55c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-55-55 55-55c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-55 55-55-55c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`;
|
|
281
|
-
//# sourceMappingURL=regular.js.map
|
|
@@ -1989,4 +1989,3 @@ export declare const yen = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"
|
|
|
1989
1989
|
export declare const yinYang = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32 352a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-448c53 0 96 43 96 96s-43 96-96 96-96 43-96 96 43 96 96 96C150 448 64 362 64 256S150 64 256 64zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\"/></svg>";
|
|
1990
1990
|
export declare const z = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M0 64C0 46.3 14.3 32 32 32l320 0c12.4 0 23.7 7.2 29 18.4s3.6 24.5-4.4 34.1L100.3 416 352 416c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-12.4 0-23.7-7.2-29-18.4s-3.6-24.5 4.4-34.1L283.7 96 32 96C14.3 96 0 81.7 0 64z\"/></svg>";
|
|
1991
1991
|
export declare const zap = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc. --><path fill=\"currentColor\" d=\"M338.8-9.9c11.9 8.6 16.3 24.2 10.9 37.8L271.3 224 416 224c13.5 0 25.5 8.4 30.1 21.1s.7 26.9-9.6 35.5l-288 240c-11.3 9.4-27.4 9.9-39.3 1.3s-16.3-24.2-10.9-37.8L176.7 288 32 288c-13.5 0-25.5-8.4-30.1-21.1s-.7-26.9 9.6-35.5l288-240c11.3-9.4 27.4-9.9 39.3-1.3z\"/></svg>";
|
|
1992
|
-
//# sourceMappingURL=solid.d.ts.map
|