@melodicdev/components 1.3.0 → 1.5.0
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/assets/melodic-components.js +3550 -1656
- package/assets/melodic-components.js.map +1 -1
- package/assets/melodic-components.min.js +5497 -3605
- package/lib/components/data-display/activity-feed/activity-feed-item.component.d.ts +5 -3
- package/lib/components/data-display/activity-feed/activity-feed-item.component.d.ts.map +1 -1
- package/lib/components/data-display/activity-feed/activity-feed-item.component.js +6 -1
- package/lib/components/data-display/activity-feed/activity-feed-item.styles.d.ts.map +1 -1
- package/lib/components/data-display/activity-feed/activity-feed-item.styles.js +80 -31
- package/lib/components/data-display/activity-feed/activity-feed-item.template.d.ts.map +1 -1
- package/lib/components/data-display/activity-feed/activity-feed-item.template.js +2 -1
- package/lib/components/data-display/activity-feed/activity-feed.component.d.ts.map +1 -1
- package/lib/components/data-display/activity-feed/activity-feed.styles.d.ts.map +1 -1
- package/lib/components/data-display/activity-feed/activity-feed.styles.js +5 -1
- package/lib/components/data-display/avatar/avatar.component.d.ts.map +1 -1
- package/lib/components/data-display/avatar/avatar.styles.d.ts.map +1 -1
- package/lib/components/data-display/avatar/avatar.styles.js +18 -7
- package/lib/components/data-display/badge/badge.component.d.ts +2 -0
- package/lib/components/data-display/badge/badge.component.d.ts.map +1 -1
- package/lib/components/data-display/badge/badge.component.js +3 -1
- package/lib/components/data-display/badge/badge.styles.d.ts.map +1 -1
- package/lib/components/data-display/badge/badge.styles.js +35 -10
- package/lib/components/data-display/badge/badge.template.d.ts.map +1 -1
- package/lib/components/data-display/badge/badge.template.js +4 -1
- package/lib/components/data-display/badge-group/badge-group.component.d.ts.map +1 -1
- package/lib/components/data-display/badge-group/badge-group.styles.d.ts.map +1 -1
- package/lib/components/data-display/badge-group/badge-group.styles.js +29 -14
- package/lib/components/data-display/calendar-view/calendar-view.component.d.ts.map +1 -1
- package/lib/components/data-display/calendar-view/calendar-view.styles.d.ts.map +1 -1
- package/lib/components/data-display/calendar-view/calendar-view.styles.js +155 -89
- package/lib/components/data-display/data-grid/data-grid.component.d.ts.map +1 -1
- package/lib/components/data-display/data-grid/data-grid.styles.d.ts.map +1 -1
- package/lib/components/data-display/data-grid/data-grid.styles.js +117 -61
- package/lib/components/data-display/list/list-item.component.d.ts.map +1 -1
- package/lib/components/data-display/list/list-item.styles.d.ts.map +1 -1
- package/lib/components/data-display/list/list-item.styles.js +35 -13
- package/lib/components/data-display/list/list.component.d.ts.map +1 -1
- package/lib/components/data-display/list/list.styles.d.ts.map +1 -1
- package/lib/components/data-display/list/list.styles.js +5 -1
- package/lib/components/data-display/profile-card/index.d.ts +2 -0
- package/lib/components/data-display/profile-card/index.d.ts.map +1 -0
- package/lib/components/data-display/profile-card/index.js +1 -0
- package/lib/components/data-display/profile-card/profile-card.component.d.ts +61 -0
- package/lib/components/data-display/profile-card/profile-card.component.d.ts.map +1 -0
- package/lib/components/data-display/profile-card/profile-card.component.js +102 -0
- package/lib/components/data-display/profile-card/profile-card.styles.d.ts +2 -0
- package/lib/components/data-display/profile-card/profile-card.styles.d.ts.map +1 -0
- package/lib/components/data-display/profile-card/profile-card.styles.js +182 -0
- package/lib/components/data-display/profile-card/profile-card.template.d.ts +3 -0
- package/lib/components/data-display/profile-card/profile-card.template.d.ts.map +1 -0
- package/lib/components/data-display/profile-card/profile-card.template.js +52 -0
- package/lib/components/data-display/stat-card/index.d.ts +2 -0
- package/lib/components/data-display/stat-card/index.d.ts.map +1 -0
- package/lib/components/data-display/stat-card/index.js +1 -0
- package/lib/components/data-display/stat-card/stat-card.component.d.ts +45 -0
- package/lib/components/data-display/stat-card/stat-card.component.d.ts.map +1 -0
- package/lib/components/data-display/stat-card/stat-card.component.js +59 -0
- package/lib/components/data-display/stat-card/stat-card.styles.d.ts +2 -0
- package/lib/components/data-display/stat-card/stat-card.styles.d.ts.map +1 -0
- package/lib/components/data-display/stat-card/stat-card.styles.js +119 -0
- package/lib/components/data-display/stat-card/stat-card.template.d.ts +3 -0
- package/lib/components/data-display/stat-card/stat-card.template.d.ts.map +1 -0
- package/lib/components/data-display/stat-card/stat-card.template.js +27 -0
- package/lib/components/data-display/table/table.component.d.ts.map +1 -1
- package/lib/components/data-display/table/table.styles.d.ts.map +1 -1
- package/lib/components/data-display/table/table.styles.js +61 -23
- package/lib/components/data-display/tag/tag.component.d.ts.map +1 -1
- package/lib/components/data-display/tag/tag.styles.d.ts.map +1 -1
- package/lib/components/data-display/tag/tag.styles.js +62 -25
- package/lib/components/feedback/alert/alert.component.d.ts.map +1 -1
- package/lib/components/feedback/alert/alert.styles.d.ts.map +1 -1
- package/lib/components/feedback/alert/alert.styles.js +41 -17
- package/lib/components/feedback/progress/progress.component.d.ts.map +1 -1
- package/lib/components/feedback/progress/progress.styles.d.ts.map +1 -1
- package/lib/components/feedback/progress/progress.styles.js +112 -56
- package/lib/components/feedback/spinner/spinner.component.d.ts.map +1 -1
- package/lib/components/feedback/spinner/spinner.styles.d.ts.map +1 -1
- package/lib/components/feedback/spinner/spinner.styles.js +32 -16
- package/lib/components/feedback/toast/toast-container.component.d.ts.map +1 -1
- package/lib/components/feedback/toast/toast.component.d.ts.map +1 -1
- package/lib/components/feedback/toast/toast.service.d.ts.map +1 -1
- package/lib/components/feedback/toast/toast.styles.d.ts.map +1 -1
- package/lib/components/feedback/toast/toast.styles.js +69 -26
- package/lib/components/forms/autocomplete/autocomplete.component.d.ts.map +1 -1
- package/lib/components/forms/autocomplete/autocomplete.styles.d.ts.map +1 -1
- package/lib/components/forms/autocomplete/autocomplete.styles.js +164 -76
- package/lib/components/forms/button/button.component.d.ts.map +1 -1
- package/lib/components/forms/button/button.styles.d.ts.map +1 -1
- package/lib/components/forms/button/button.styles.js +141 -116
- package/lib/components/forms/button-group/button-group-item.component.d.ts.map +1 -1
- package/lib/components/forms/button-group/button-group.component.d.ts.map +1 -1
- package/lib/components/forms/button-group/button-group.styles.d.ts.map +1 -1
- package/lib/components/forms/button-group/button-group.styles.js +8 -2
- package/lib/components/forms/checkbox/checkbox.component.d.ts.map +1 -1
- package/lib/components/forms/checkbox/checkbox.styles.d.ts.map +1 -1
- package/lib/components/forms/checkbox/checkbox.styles.js +75 -41
- package/lib/components/forms/date-picker/calendar.component.d.ts.map +1 -1
- package/lib/components/forms/date-picker/calendar.styles.d.ts.map +1 -1
- package/lib/components/forms/date-picker/calendar.styles.js +108 -47
- package/lib/components/forms/date-picker/date-picker.component.d.ts.map +1 -1
- package/lib/components/forms/date-picker/date-picker.styles.d.ts.map +1 -1
- package/lib/components/forms/date-picker/date-picker.styles.js +96 -38
- package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map +1 -1
- package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map +1 -1
- package/lib/components/forms/date-time-picker/date-time-picker.styles.js +65 -25
- package/lib/components/forms/file-upload/file-icon.component.d.ts.map +1 -1
- package/lib/components/forms/file-upload/file-upload-item.component.d.ts.map +1 -1
- package/lib/components/forms/file-upload/file-upload.component.d.ts +2 -2
- package/lib/components/forms/file-upload/file-upload.component.d.ts.map +1 -1
- package/lib/components/forms/file-upload/file-upload.component.js +3 -3
- package/lib/components/forms/file-upload/file-upload.styles.d.ts.map +1 -1
- package/lib/components/forms/file-upload/file-upload.styles.js +92 -39
- package/lib/components/forms/form-field/form-field.component.d.ts.map +1 -1
- package/lib/components/forms/form-field/form-field.styles.d.ts.map +1 -1
- package/lib/components/forms/form-field/form-field.styles.js +72 -29
- package/lib/components/forms/input/input.component.d.ts.map +1 -1
- package/lib/components/forms/input/input.styles.d.ts.map +1 -1
- package/lib/components/forms/input/input.styles.js +81 -29
- package/lib/components/forms/radio/radio-group.component.d.ts.map +1 -1
- package/lib/components/forms/radio/radio.component.d.ts.map +1 -1
- package/lib/components/forms/radio/radio.styles.d.ts.map +1 -1
- package/lib/components/forms/radio/radio.styles.js +85 -54
- package/lib/components/forms/radio-card-group/radio-card-group.component.d.ts.map +1 -1
- package/lib/components/forms/radio-card-group/radio-card-group.styles.d.ts.map +1 -1
- package/lib/components/forms/radio-card-group/radio-card-group.styles.js +34 -12
- package/lib/components/forms/radio-card-group/radio-card.component.d.ts.map +1 -1
- package/lib/components/forms/radio-card-group/radio-card.styles.d.ts.map +1 -1
- package/lib/components/forms/radio-card-group/radio-card.styles.js +108 -47
- package/lib/components/forms/select/select.component.d.ts.map +1 -1
- package/lib/components/forms/select/select.styles.d.ts.map +1 -1
- package/lib/components/forms/select/select.styles.js +152 -71
- package/lib/components/forms/slider/slider.component.d.ts.map +1 -1
- package/lib/components/forms/slider/slider.styles.d.ts.map +1 -1
- package/lib/components/forms/slider/slider.styles.js +77 -36
- package/lib/components/forms/textarea/textarea.component.d.ts.map +1 -1
- package/lib/components/forms/textarea/textarea.styles.d.ts.map +1 -1
- package/lib/components/forms/textarea/textarea.styles.js +79 -31
- package/lib/components/forms/time-picker/time-picker.component.d.ts.map +1 -1
- package/lib/components/forms/time-picker/time-picker.styles.d.ts.map +1 -1
- package/lib/components/forms/time-picker/time-picker.styles.js +196 -91
- package/lib/components/forms/toggle/toggle.component.d.ts.map +1 -1
- package/lib/components/forms/toggle/toggle.styles.d.ts.map +1 -1
- package/lib/components/forms/toggle/toggle.styles.js +84 -54
- package/lib/components/foundation/card/card.component.d.ts.map +1 -1
- package/lib/components/foundation/card/card.styles.d.ts.map +1 -1
- package/lib/components/foundation/card/card.styles.js +48 -17
- package/lib/components/foundation/container/container.component.d.ts.map +1 -1
- package/lib/components/foundation/divider/divider.component.d.ts.map +1 -1
- package/lib/components/foundation/divider/divider.styles.d.ts.map +1 -1
- package/lib/components/foundation/divider/divider.styles.js +24 -12
- package/lib/components/foundation/stack/stack.component.d.ts.map +1 -1
- package/lib/components/general/icon/icon.component.d.ts.map +1 -1
- package/lib/components/general/icon/icon.styles.d.ts.map +1 -1
- package/lib/components/general/icon/icon.styles.js +9 -2
- package/lib/components/navigation/breadcrumb/breadcrumb-item.component.d.ts.map +1 -1
- package/lib/components/navigation/breadcrumb/breadcrumb.component.d.ts.map +1 -1
- package/lib/components/navigation/breadcrumb/breadcrumb.styles.d.ts.map +1 -1
- package/lib/components/navigation/breadcrumb/breadcrumb.styles.js +4 -1
- package/lib/components/navigation/pagination/pagination.component.d.ts.map +1 -1
- package/lib/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/lib/components/navigation/pagination/pagination.styles.js +59 -23
- package/lib/components/navigation/sidebar/sidebar-group.component.d.ts.map +1 -1
- package/lib/components/navigation/sidebar/sidebar-item.component.d.ts +3 -1
- package/lib/components/navigation/sidebar/sidebar-item.component.d.ts.map +1 -1
- package/lib/components/navigation/sidebar/sidebar-item.component.js +3 -1
- package/lib/components/navigation/sidebar/sidebar-item.styles.d.ts.map +1 -1
- package/lib/components/navigation/sidebar/sidebar-item.styles.js +79 -33
- package/lib/components/navigation/sidebar/sidebar-item.template.js +1 -1
- package/lib/components/navigation/sidebar/sidebar.component.d.ts +1 -3
- package/lib/components/navigation/sidebar/sidebar.component.d.ts.map +1 -1
- package/lib/components/navigation/sidebar/sidebar.component.js +1 -5
- package/lib/components/navigation/sidebar/sidebar.styles.d.ts.map +1 -1
- package/lib/components/navigation/sidebar/sidebar.styles.js +154 -61
- package/lib/components/navigation/steps/step-panel.component.d.ts.map +1 -1
- package/lib/components/navigation/steps/step.component.d.ts.map +1 -1
- package/lib/components/navigation/steps/step.styles.d.ts.map +1 -1
- package/lib/components/navigation/steps/step.styles.js +149 -83
- package/lib/components/navigation/steps/steps.component.d.ts +1 -1
- package/lib/components/navigation/steps/steps.component.d.ts.map +1 -1
- package/lib/components/navigation/steps/steps.styles.d.ts.map +1 -1
- package/lib/components/navigation/steps/steps.styles.js +169 -91
- package/lib/components/navigation/tabs/tab-panel.component.d.ts.map +1 -1
- package/lib/components/navigation/tabs/tab.component.d.ts.map +1 -1
- package/lib/components/navigation/tabs/tab.styles.d.ts.map +1 -1
- package/lib/components/navigation/tabs/tab.styles.js +36 -12
- package/lib/components/navigation/tabs/tabs.component.d.ts +1 -1
- package/lib/components/navigation/tabs/tabs.component.d.ts.map +1 -1
- package/lib/components/navigation/tabs/tabs.styles.d.ts.map +1 -1
- package/lib/components/navigation/tabs/tabs.styles.js +126 -57
- package/lib/components/overlays/dialog/dialog-ref.class.d.ts.map +1 -1
- package/lib/components/overlays/dialog/dialog.component.d.ts.map +1 -1
- package/lib/components/overlays/dialog/dialog.service.d.ts.map +1 -1
- package/lib/components/overlays/dialog/dialog.styles.d.ts.map +1 -1
- package/lib/components/overlays/dialog/dialog.styles.js +73 -33
- package/lib/components/overlays/drawer/drawer.component.d.ts.map +1 -1
- package/lib/components/overlays/drawer/drawer.styles.d.ts.map +1 -1
- package/lib/components/overlays/drawer/drawer.styles.js +77 -33
- package/lib/components/overlays/dropdown/dropdown-group.component.d.ts.map +1 -1
- package/lib/components/overlays/dropdown/dropdown-item.component.d.ts.map +1 -1
- package/lib/components/overlays/dropdown/dropdown-item.styles.d.ts.map +1 -1
- package/lib/components/overlays/dropdown/dropdown-item.styles.js +43 -17
- package/lib/components/overlays/dropdown/dropdown.component.d.ts.map +1 -1
- package/lib/components/overlays/dropdown/dropdown.styles.d.ts.map +1 -1
- package/lib/components/overlays/dropdown/dropdown.styles.js +30 -15
- package/lib/components/overlays/popover/popover.component.d.ts.map +1 -1
- package/lib/components/overlays/popover/popover.styles.d.ts.map +1 -1
- package/lib/components/overlays/popover/popover.styles.js +29 -14
- package/lib/components/overlays/tooltip/tooltip.component.d.ts.map +1 -1
- package/lib/components/overlays/tooltip/tooltip.styles.d.ts.map +1 -1
- package/lib/components/overlays/tooltip/tooltip.styles.js +28 -12
- package/lib/components/pages/auth/auth-layout.styles.d.ts +1 -1
- package/lib/components/pages/auth/auth-layout.styles.d.ts.map +1 -1
- package/lib/components/pages/auth/auth-layout.styles.js +79 -31
- package/lib/components/pages/auth/login-page.component.d.ts.map +1 -1
- package/lib/components/pages/auth/signup-page.component.d.ts.map +1 -1
- package/lib/components/pages/dashboard/dashboard-page.component.d.ts.map +1 -1
- package/lib/components/pages/dashboard/dashboard-page.styles.d.ts.map +1 -1
- package/lib/components/pages/dashboard/dashboard-page.styles.js +34 -12
- package/lib/components/sections/app-shell/app-shell.component.d.ts.map +1 -1
- package/lib/components/sections/app-shell/app-shell.styles.d.ts.map +1 -1
- package/lib/components/sections/app-shell/app-shell.styles.js +54 -23
- package/lib/components/sections/hero/hero-section.component.d.ts.map +1 -1
- package/lib/components/sections/hero/hero-section.styles.d.ts.map +1 -1
- package/lib/components/sections/hero/hero-section.styles.js +97 -40
- package/lib/components/sections/page-header/page-header.component.d.ts.map +1 -1
- package/lib/components/sections/page-header/page-header.styles.d.ts.map +1 -1
- package/lib/components/sections/page-header/page-header.styles.js +62 -28
- package/lib/components/sections/page-section/index.d.ts +2 -0
- package/lib/components/sections/page-section/index.d.ts.map +1 -0
- package/lib/components/sections/page-section/index.js +1 -0
- package/lib/components/sections/page-section/page-section.component.d.ts +39 -0
- package/lib/components/sections/page-section/page-section.component.d.ts.map +1 -0
- package/lib/components/sections/page-section/page-section.component.js +56 -0
- package/lib/components/sections/page-section/page-section.styles.d.ts +2 -0
- package/lib/components/sections/page-section/page-section.styles.d.ts.map +1 -0
- package/lib/components/sections/page-section/page-section.styles.js +102 -0
- package/lib/components/sections/page-section/page-section.template.d.ts +3 -0
- package/lib/components/sections/page-section/page-section.template.d.ts.map +1 -0
- package/lib/components/sections/page-section/page-section.template.js +30 -0
- package/lib/utils/virtual-scroll/index.d.ts.map +1 -1
- package/package.json +13 -1
|
@@ -1,6 +1,72 @@
|
|
|
1
1
|
import { css } from '@melodicdev/core';
|
|
2
2
|
export const stepStyles = () => css `
|
|
3
3
|
:host {
|
|
4
|
+
/* Focus ring */
|
|
5
|
+
--ml-step-focus-color: var(--ml-color-primary);
|
|
6
|
+
--ml-step-focus-radius: var(--ml-radius);
|
|
7
|
+
|
|
8
|
+
/* Disabled state */
|
|
9
|
+
--ml-step-disabled-opacity: 0.5;
|
|
10
|
+
|
|
11
|
+
/* Connector */
|
|
12
|
+
--ml-step-connector-thickness: 2px;
|
|
13
|
+
--ml-step-connector-color: var(--ml-color-border);
|
|
14
|
+
--ml-step-connector-transition: var(--ml-duration-150) var(--ml-ease-in-out);
|
|
15
|
+
|
|
16
|
+
/* Indicator (numbered & circles) */
|
|
17
|
+
--ml-step-indicator-size: 32px;
|
|
18
|
+
--ml-step-indicator-border-width: 2px;
|
|
19
|
+
--ml-step-indicator-font-size: var(--ml-text-sm);
|
|
20
|
+
--ml-step-indicator-font-weight: var(--ml-font-medium);
|
|
21
|
+
--ml-step-indicator-font-family: var(--ml-font-sans);
|
|
22
|
+
--ml-step-indicator-transition: var(--ml-duration-150) var(--ml-ease-in-out);
|
|
23
|
+
|
|
24
|
+
/* Indicator upcoming */
|
|
25
|
+
--ml-step-upcoming-border-color: var(--ml-color-border);
|
|
26
|
+
--ml-step-upcoming-color: var(--ml-color-text-secondary);
|
|
27
|
+
--ml-step-upcoming-bg: var(--ml-color-surface);
|
|
28
|
+
|
|
29
|
+
/* Indicator dot (circles variant) */
|
|
30
|
+
--ml-step-dot-size: 10px;
|
|
31
|
+
|
|
32
|
+
/* Icons variant */
|
|
33
|
+
--ml-step-icon-indicator-size: 40px;
|
|
34
|
+
--ml-step-icon-indicator-radius: var(--ml-radius-lg);
|
|
35
|
+
--ml-step-icon-upcoming-color: var(--ml-color-text-muted);
|
|
36
|
+
--ml-step-icon-current-border-color: var(--ml-color-text);
|
|
37
|
+
--ml-step-icon-current-color: var(--ml-color-text);
|
|
38
|
+
|
|
39
|
+
/* Completed indicator text */
|
|
40
|
+
--ml-step-completed-indicator-text: #fff;
|
|
41
|
+
|
|
42
|
+
/* Bar variant */
|
|
43
|
+
--ml-step-bar-height: 4px;
|
|
44
|
+
--ml-step-bar-radius: 2px;
|
|
45
|
+
--ml-step-bar-color: var(--ml-color-border);
|
|
46
|
+
|
|
47
|
+
/* Compact / dots */
|
|
48
|
+
--ml-step-compact-dot-size: 12px;
|
|
49
|
+
--ml-step-compact-dot-color: var(--ml-color-border);
|
|
50
|
+
|
|
51
|
+
/* Content spacing */
|
|
52
|
+
--ml-step-content-gap: var(--ml-space-1);
|
|
53
|
+
--ml-step-track-gap: var(--ml-space-3);
|
|
54
|
+
--ml-step-vertical-content-padding: var(--ml-space-6);
|
|
55
|
+
|
|
56
|
+
/* Label */
|
|
57
|
+
--ml-step-label-font-family: var(--ml-font-sans);
|
|
58
|
+
--ml-step-label-font-size: var(--ml-text-sm);
|
|
59
|
+
--ml-step-label-font-weight: var(--ml-font-medium);
|
|
60
|
+
--ml-step-label-color: var(--ml-color-text);
|
|
61
|
+
--ml-step-label-line-height: var(--ml-leading-tight);
|
|
62
|
+
--ml-step-label-upcoming-color: var(--ml-color-text-secondary);
|
|
63
|
+
|
|
64
|
+
/* Description */
|
|
65
|
+
--ml-step-desc-font-family: var(--ml-font-sans);
|
|
66
|
+
--ml-step-desc-font-size: var(--ml-text-xs);
|
|
67
|
+
--ml-step-desc-color: var(--ml-color-text-muted);
|
|
68
|
+
--ml-step-desc-line-height: var(--ml-leading-normal);
|
|
69
|
+
|
|
4
70
|
display: contents;
|
|
5
71
|
}
|
|
6
72
|
|
|
@@ -17,13 +83,13 @@ export const stepStyles = () => css `
|
|
|
17
83
|
|
|
18
84
|
.ml-step--disabled {
|
|
19
85
|
cursor: not-allowed;
|
|
20
|
-
opacity:
|
|
86
|
+
opacity: var(--ml-step-disabled-opacity);
|
|
21
87
|
}
|
|
22
88
|
|
|
23
89
|
.ml-step:focus-visible {
|
|
24
|
-
outline: 2px solid var(--ml-color
|
|
90
|
+
outline: 2px solid var(--ml-step-focus-color);
|
|
25
91
|
outline-offset: 2px;
|
|
26
|
-
border-radius: var(--ml-radius);
|
|
92
|
+
border-radius: var(--ml-step-focus-radius);
|
|
27
93
|
}
|
|
28
94
|
|
|
29
95
|
/* ============================================
|
|
@@ -39,13 +105,13 @@ export const stepStyles = () => css `
|
|
|
39
105
|
display: flex;
|
|
40
106
|
align-items: center;
|
|
41
107
|
width: 100%;
|
|
42
|
-
margin-bottom: var(--ml-
|
|
108
|
+
margin-bottom: var(--ml-step-track-gap);
|
|
43
109
|
}
|
|
44
110
|
|
|
45
111
|
.ml-step--horizontal .ml-step__connector-before,
|
|
46
112
|
.ml-step--horizontal .ml-step__connector-after {
|
|
47
113
|
flex: 1;
|
|
48
|
-
height:
|
|
114
|
+
height: var(--ml-step-connector-thickness);
|
|
49
115
|
}
|
|
50
116
|
|
|
51
117
|
.ml-step--horizontal .ml-step__connector--hidden {
|
|
@@ -65,13 +131,13 @@ export const stepStyles = () => css `
|
|
|
65
131
|
display: flex;
|
|
66
132
|
flex-direction: column;
|
|
67
133
|
align-items: center;
|
|
68
|
-
margin-right: var(--ml-
|
|
134
|
+
margin-right: var(--ml-step-track-gap);
|
|
69
135
|
}
|
|
70
136
|
|
|
71
137
|
.ml-step--vertical .ml-step__connector-before,
|
|
72
138
|
.ml-step--vertical .ml-step__connector-after {
|
|
73
139
|
flex: 1;
|
|
74
|
-
width:
|
|
140
|
+
width: var(--ml-step-connector-thickness);
|
|
75
141
|
min-height: 12px;
|
|
76
142
|
}
|
|
77
143
|
|
|
@@ -80,7 +146,7 @@ export const stepStyles = () => css `
|
|
|
80
146
|
}
|
|
81
147
|
|
|
82
148
|
.ml-step--vertical .ml-step__content {
|
|
83
|
-
padding-bottom: var(--ml-
|
|
149
|
+
padding-bottom: var(--ml-step-vertical-content-padding);
|
|
84
150
|
}
|
|
85
151
|
|
|
86
152
|
.ml-step--vertical.ml-step--last .ml-step__content {
|
|
@@ -92,12 +158,12 @@ export const stepStyles = () => css `
|
|
|
92
158
|
============================================ */
|
|
93
159
|
.ml-step__connector-before,
|
|
94
160
|
.ml-step__connector-after {
|
|
95
|
-
transition: background-color var(--ml-
|
|
161
|
+
transition: background-color var(--ml-step-connector-transition);
|
|
96
162
|
}
|
|
97
163
|
|
|
98
164
|
/* Solid connector */
|
|
99
165
|
.ml-step__connector--solid {
|
|
100
|
-
background-color: var(--ml-color
|
|
166
|
+
background-color: var(--ml-step-connector-color);
|
|
101
167
|
}
|
|
102
168
|
|
|
103
169
|
/* Dotted connector */
|
|
@@ -109,8 +175,8 @@ export const stepStyles = () => css `
|
|
|
109
175
|
.ml-step--horizontal .ml-step__connector--dotted {
|
|
110
176
|
background-image: repeating-linear-gradient(
|
|
111
177
|
to right,
|
|
112
|
-
var(--ml-color
|
|
113
|
-
var(--ml-color
|
|
178
|
+
var(--ml-step-connector-color) 0,
|
|
179
|
+
var(--ml-step-connector-color) 4px,
|
|
114
180
|
transparent 4px,
|
|
115
181
|
transparent 8px
|
|
116
182
|
);
|
|
@@ -123,8 +189,8 @@ export const stepStyles = () => css `
|
|
|
123
189
|
.ml-step--vertical .ml-step__connector--dotted {
|
|
124
190
|
background-image: repeating-linear-gradient(
|
|
125
191
|
to bottom,
|
|
126
|
-
var(--ml-color
|
|
127
|
-
var(--ml-color
|
|
192
|
+
var(--ml-step-connector-color) 0,
|
|
193
|
+
var(--ml-step-connector-color) 4px,
|
|
128
194
|
transparent 4px,
|
|
129
195
|
transparent 8px
|
|
130
196
|
);
|
|
@@ -237,87 +303,87 @@ export const stepStyles = () => css `
|
|
|
237
303
|
align-items: center;
|
|
238
304
|
justify-content: center;
|
|
239
305
|
transition:
|
|
240
|
-
background-color var(--ml-
|
|
241
|
-
border-color var(--ml-
|
|
242
|
-
color var(--ml-
|
|
306
|
+
background-color var(--ml-step-indicator-transition),
|
|
307
|
+
border-color var(--ml-step-indicator-transition),
|
|
308
|
+
color var(--ml-step-indicator-transition);
|
|
243
309
|
}
|
|
244
310
|
|
|
245
311
|
/* ============================================
|
|
246
312
|
NUMBERED VARIANT
|
|
247
313
|
============================================ */
|
|
248
314
|
.ml-step__indicator-inner--numbered {
|
|
249
|
-
width:
|
|
250
|
-
height:
|
|
315
|
+
width: var(--ml-step-indicator-size);
|
|
316
|
+
height: var(--ml-step-indicator-size);
|
|
251
317
|
border-radius: 50%;
|
|
252
|
-
font-size: var(--ml-
|
|
253
|
-
font-weight: var(--ml-font-
|
|
254
|
-
font-family: var(--ml-font-
|
|
318
|
+
font-size: var(--ml-step-indicator-font-size);
|
|
319
|
+
font-weight: var(--ml-step-indicator-font-weight);
|
|
320
|
+
font-family: var(--ml-step-indicator-font-family);
|
|
255
321
|
}
|
|
256
322
|
|
|
257
323
|
/* Numbered - Upcoming */
|
|
258
324
|
.ml-step--upcoming .ml-step__indicator-inner--numbered {
|
|
259
|
-
border:
|
|
260
|
-
color: var(--ml-
|
|
261
|
-
background-color: var(--ml-
|
|
325
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-step-upcoming-border-color);
|
|
326
|
+
color: var(--ml-step-upcoming-color);
|
|
327
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
262
328
|
}
|
|
263
329
|
|
|
264
330
|
/* Numbered - Current (primary) */
|
|
265
331
|
.ml-step--current.ml-step--primary .ml-step__indicator-inner--numbered {
|
|
266
|
-
border:
|
|
332
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
|
|
267
333
|
color: var(--ml-color-primary);
|
|
268
|
-
background-color: var(--ml-
|
|
334
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
269
335
|
}
|
|
270
336
|
|
|
271
337
|
/* Numbered - Current (success) */
|
|
272
338
|
.ml-step--current.ml-step--success .ml-step__indicator-inner--numbered {
|
|
273
|
-
border:
|
|
339
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
|
|
274
340
|
color: var(--ml-color-success);
|
|
275
|
-
background-color: var(--ml-
|
|
341
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
276
342
|
}
|
|
277
343
|
|
|
278
344
|
/* Numbered - Completed (primary) */
|
|
279
345
|
.ml-step--completed.ml-step--primary .ml-step__indicator-inner--numbered {
|
|
280
346
|
background-color: var(--ml-color-primary);
|
|
281
|
-
border:
|
|
282
|
-
color:
|
|
347
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
|
|
348
|
+
color: var(--ml-step-completed-indicator-text);
|
|
283
349
|
}
|
|
284
350
|
|
|
285
351
|
/* Numbered - Completed (success) */
|
|
286
352
|
.ml-step--completed.ml-step--success .ml-step__indicator-inner--numbered {
|
|
287
353
|
background-color: var(--ml-color-success);
|
|
288
|
-
border:
|
|
289
|
-
color:
|
|
354
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
|
|
355
|
+
color: var(--ml-step-completed-indicator-text);
|
|
290
356
|
}
|
|
291
357
|
|
|
292
358
|
/* ============================================
|
|
293
359
|
CIRCLES VARIANT
|
|
294
360
|
============================================ */
|
|
295
361
|
.ml-step__indicator-inner--circles {
|
|
296
|
-
width:
|
|
297
|
-
height:
|
|
362
|
+
width: var(--ml-step-indicator-size);
|
|
363
|
+
height: var(--ml-step-indicator-size);
|
|
298
364
|
border-radius: 50%;
|
|
299
365
|
}
|
|
300
366
|
|
|
301
367
|
.ml-step__indicator-dot {
|
|
302
|
-
width:
|
|
303
|
-
height:
|
|
368
|
+
width: var(--ml-step-dot-size);
|
|
369
|
+
height: var(--ml-step-dot-size);
|
|
304
370
|
border-radius: 50%;
|
|
305
|
-
transition: background-color var(--ml-
|
|
371
|
+
transition: background-color var(--ml-step-connector-transition);
|
|
306
372
|
}
|
|
307
373
|
|
|
308
374
|
/* Circles - Upcoming */
|
|
309
375
|
.ml-step--upcoming .ml-step__indicator-inner--circles {
|
|
310
|
-
border:
|
|
311
|
-
background-color: var(--ml-
|
|
376
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-step-upcoming-border-color);
|
|
377
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
312
378
|
}
|
|
313
379
|
.ml-step--upcoming .ml-step__indicator-dot {
|
|
314
|
-
background-color: var(--ml-
|
|
380
|
+
background-color: var(--ml-step-upcoming-border-color);
|
|
315
381
|
}
|
|
316
382
|
|
|
317
383
|
/* Circles - Current (primary) */
|
|
318
384
|
.ml-step--current.ml-step--primary .ml-step__indicator-inner--circles {
|
|
319
|
-
border:
|
|
320
|
-
background-color: var(--ml-
|
|
385
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
|
|
386
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
321
387
|
}
|
|
322
388
|
.ml-step--current.ml-step--primary .ml-step__indicator-dot {
|
|
323
389
|
background-color: var(--ml-color-primary);
|
|
@@ -325,8 +391,8 @@ export const stepStyles = () => css `
|
|
|
325
391
|
|
|
326
392
|
/* Circles - Current (success) */
|
|
327
393
|
.ml-step--current.ml-step--success .ml-step__indicator-inner--circles {
|
|
328
|
-
border:
|
|
329
|
-
background-color: var(--ml-
|
|
394
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
|
|
395
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
330
396
|
}
|
|
331
397
|
.ml-step--current.ml-step--success .ml-step__indicator-dot {
|
|
332
398
|
background-color: var(--ml-color-success);
|
|
@@ -335,39 +401,39 @@ export const stepStyles = () => css `
|
|
|
335
401
|
/* Circles - Completed (primary) */
|
|
336
402
|
.ml-step--completed.ml-step--primary .ml-step__indicator-inner--circles {
|
|
337
403
|
background-color: var(--ml-color-primary);
|
|
338
|
-
border:
|
|
339
|
-
color:
|
|
404
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-primary);
|
|
405
|
+
color: var(--ml-step-completed-indicator-text);
|
|
340
406
|
}
|
|
341
407
|
|
|
342
408
|
/* Circles - Completed (success) */
|
|
343
409
|
.ml-step--completed.ml-step--success .ml-step__indicator-inner--circles {
|
|
344
410
|
background-color: var(--ml-color-success);
|
|
345
|
-
border:
|
|
346
|
-
color:
|
|
411
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-color-success);
|
|
412
|
+
color: var(--ml-step-completed-indicator-text);
|
|
347
413
|
}
|
|
348
414
|
|
|
349
415
|
/* ============================================
|
|
350
416
|
ICONS VARIANT
|
|
351
417
|
============================================ */
|
|
352
418
|
.ml-step__indicator-inner--icons {
|
|
353
|
-
width:
|
|
354
|
-
height:
|
|
355
|
-
border-radius: var(--ml-radius
|
|
356
|
-
border:
|
|
419
|
+
width: var(--ml-step-icon-indicator-size);
|
|
420
|
+
height: var(--ml-step-icon-indicator-size);
|
|
421
|
+
border-radius: var(--ml-step-icon-indicator-radius);
|
|
422
|
+
border: var(--ml-step-indicator-border-width) solid var(--ml-step-upcoming-border-color);
|
|
357
423
|
}
|
|
358
424
|
|
|
359
425
|
/* Icons - Upcoming */
|
|
360
426
|
.ml-step--upcoming .ml-step__indicator-inner--icons {
|
|
361
|
-
border-color: var(--ml-
|
|
362
|
-
background-color: var(--ml-
|
|
363
|
-
color: var(--ml-
|
|
427
|
+
border-color: var(--ml-step-upcoming-border-color);
|
|
428
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
429
|
+
color: var(--ml-step-icon-upcoming-color);
|
|
364
430
|
}
|
|
365
431
|
|
|
366
432
|
/* Icons - Current */
|
|
367
433
|
.ml-step--current .ml-step__indicator-inner--icons {
|
|
368
|
-
border-color: var(--ml-color
|
|
369
|
-
background-color: var(--ml-
|
|
370
|
-
color: var(--ml-color
|
|
434
|
+
border-color: var(--ml-step-icon-current-border-color);
|
|
435
|
+
background-color: var(--ml-step-upcoming-bg);
|
|
436
|
+
color: var(--ml-step-icon-current-color);
|
|
371
437
|
}
|
|
372
438
|
|
|
373
439
|
/* Icons - Completed (primary) */
|
|
@@ -394,11 +460,11 @@ export const stepStyles = () => css `
|
|
|
394
460
|
|
|
395
461
|
.ml-step--bar .ml-step__bar {
|
|
396
462
|
width: 100%;
|
|
397
|
-
height:
|
|
398
|
-
border-radius:
|
|
399
|
-
background-color: var(--ml-color
|
|
400
|
-
margin-bottom: var(--ml-
|
|
401
|
-
transition: background-color var(--ml-
|
|
463
|
+
height: var(--ml-step-bar-height);
|
|
464
|
+
border-radius: var(--ml-step-bar-radius);
|
|
465
|
+
background-color: var(--ml-step-bar-color);
|
|
466
|
+
margin-bottom: var(--ml-step-track-gap);
|
|
467
|
+
transition: background-color var(--ml-step-connector-transition);
|
|
402
468
|
}
|
|
403
469
|
|
|
404
470
|
/* Bar - Current & Completed (primary) */
|
|
@@ -419,15 +485,15 @@ export const stepStyles = () => css `
|
|
|
419
485
|
}
|
|
420
486
|
|
|
421
487
|
.ml-step--bar.ml-step--vertical .ml-step__bar {
|
|
422
|
-
width:
|
|
488
|
+
width: var(--ml-step-bar-height);
|
|
423
489
|
height: auto;
|
|
424
490
|
min-height: 40px;
|
|
425
491
|
margin-bottom: 0;
|
|
426
|
-
margin-right: var(--ml-
|
|
492
|
+
margin-right: var(--ml-step-track-gap);
|
|
427
493
|
}
|
|
428
494
|
|
|
429
495
|
.ml-step--bar.ml-step--vertical .ml-step__content {
|
|
430
|
-
padding-bottom: var(--ml-
|
|
496
|
+
padding-bottom: var(--ml-step-vertical-content-padding);
|
|
431
497
|
}
|
|
432
498
|
|
|
433
499
|
.ml-step--bar.ml-step--vertical.ml-step--last .ml-step__content {
|
|
@@ -445,11 +511,11 @@ export const stepStyles = () => css `
|
|
|
445
511
|
}
|
|
446
512
|
|
|
447
513
|
.ml-step__dot {
|
|
448
|
-
width:
|
|
449
|
-
height:
|
|
514
|
+
width: var(--ml-step-compact-dot-size);
|
|
515
|
+
height: var(--ml-step-compact-dot-size);
|
|
450
516
|
border-radius: 50%;
|
|
451
|
-
background-color: var(--ml-color
|
|
452
|
-
transition: background-color var(--ml-
|
|
517
|
+
background-color: var(--ml-step-compact-dot-color);
|
|
518
|
+
transition: background-color var(--ml-step-connector-transition);
|
|
453
519
|
}
|
|
454
520
|
|
|
455
521
|
.ml-step--compact.ml-step--current.ml-step--primary .ml-step__dot {
|
|
@@ -471,21 +537,21 @@ export const stepStyles = () => css `
|
|
|
471
537
|
.ml-step__content {
|
|
472
538
|
display: flex;
|
|
473
539
|
flex-direction: column;
|
|
474
|
-
gap: var(--ml-
|
|
540
|
+
gap: var(--ml-step-content-gap);
|
|
475
541
|
min-width: 0;
|
|
476
542
|
}
|
|
477
543
|
|
|
478
544
|
.ml-step__label {
|
|
479
|
-
font-family: var(--ml-font-
|
|
480
|
-
font-size: var(--ml-
|
|
481
|
-
font-weight: var(--ml-font-
|
|
482
|
-
color: var(--ml-color
|
|
483
|
-
line-height: var(--ml-
|
|
484
|
-
transition: color var(--ml-
|
|
545
|
+
font-family: var(--ml-step-label-font-family);
|
|
546
|
+
font-size: var(--ml-step-label-font-size);
|
|
547
|
+
font-weight: var(--ml-step-label-font-weight);
|
|
548
|
+
color: var(--ml-step-label-color);
|
|
549
|
+
line-height: var(--ml-step-label-line-height);
|
|
550
|
+
transition: color var(--ml-step-connector-transition);
|
|
485
551
|
}
|
|
486
552
|
|
|
487
553
|
.ml-step--upcoming .ml-step__label {
|
|
488
|
-
color: var(--ml-
|
|
554
|
+
color: var(--ml-step-label-upcoming-color);
|
|
489
555
|
}
|
|
490
556
|
|
|
491
557
|
.ml-step--current.ml-step--primary .ml-step__label {
|
|
@@ -497,9 +563,9 @@ export const stepStyles = () => css `
|
|
|
497
563
|
}
|
|
498
564
|
|
|
499
565
|
.ml-step__description {
|
|
500
|
-
font-family: var(--ml-font-
|
|
501
|
-
font-size: var(--ml-
|
|
502
|
-
color: var(--ml-
|
|
503
|
-
line-height: var(--ml-
|
|
566
|
+
font-family: var(--ml-step-desc-font-family);
|
|
567
|
+
font-size: var(--ml-step-desc-font-size);
|
|
568
|
+
color: var(--ml-step-desc-color);
|
|
569
|
+
line-height: var(--ml-step-desc-line-height);
|
|
504
570
|
}
|
|
505
571
|
`;
|
|
@@ -45,7 +45,7 @@ export declare class StepsComponent implements IElementRef, OnCreate, OnDestroy,
|
|
|
45
45
|
/** Step configurations (alternative to slotted ml-step elements) */
|
|
46
46
|
steps: StepConfig[];
|
|
47
47
|
/** Internal tracking of slotted steps */
|
|
48
|
-
_slottedSteps
|
|
48
|
+
private _slottedSteps;
|
|
49
49
|
/** Navigation event listener for routed mode */
|
|
50
50
|
private readonly _handleNavigation;
|
|
51
51
|
onCreate(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"steps.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI3H;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"steps.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI3H;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IACzE,UAAU,EAAG,WAAW,CAAC;IAEhC,kCAAkC;IAC3B,MAAM,SAAM;IAEnB,qBAAqB;IACd,OAAO,EAAE,YAAY,CAAc;IAE1C,yBAAyB;IAClB,WAAW,EAAE,gBAAgB,CAAgB;IAEpD,2BAA2B;IACpB,SAAS,EAAE,cAAc,CAAW;IAE3C,mBAAmB;IACZ,KAAK,EAAE,UAAU,CAAa;IAErC,wBAAwB;IACjB,OAAO,UAAS;IAEvB,gCAAgC;IACzB,MAAM,UAAS;IAEtB,oEAAoE;IAC7D,KAAK,EAAE,UAAU,EAAE,CAAM;IAEhC,yCAAyC;IACzC,OAAO,CAAC,aAAa,CAAqB;IAE1C,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAE3D,QAAQ,IAAI,IAAI;IAUhB,QAAQ,IAAI,IAAI;IAIhB,SAAS,IAAI,IAAI;IAQxB,+BAA+B;IACxB,oBAAoB,GAAI,OAAO,KAAK,KAAG,IAAI,CAchD;IAEF,sCAAsC;IAC/B,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAoB/D;IAEF,sCAAsC;IACtC,OAAO,CAAC,sBAAsB,CAG5B;IAEF,iCAAiC;IAC1B,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CA8CjD;IAEF,qEAAqE;IAC9D,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU;IAUnD,0DAA0D;IACnD,oBAAoB,IAAI,MAAM;IAMrC,2BAA2B;IACpB,aAAa,IAAI,MAAM;IAI9B,6CAA6C;IACtC,WAAW,IAAI,UAAU,EAAE;IAelC,wBAAwB;IACxB,OAAO,CAAC,cAAc;IAItB,yCAAyC;IACzC,OAAO,CAAC,uBAAuB;IAiB/B,8BAA8B;IAC9B,OAAO,CAAC,qBAAqB;IAU7B,mCAAmC;IACnC,OAAO,CAAC,SAAS;IAMjB,0CAA0C;IAC1C,OAAO,CAAC,aAAa;IASrB,6CAA6C;IAC7C,OAAO,CAAC,YAAY;CAGpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"steps.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"steps.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/steps.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA8lBvB,CAAC"}
|