commons-shared-web-ui 0.0.39 → 0.0.41

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.
Files changed (29) hide show
  1. package/fesm2022/commons-shared-web-ui.mjs +2039 -1409
  2. package/fesm2022/commons-shared-web-ui.mjs.map +1 -1
  3. package/index.d.ts +127 -6
  4. package/package.json +1 -1
  5. package/src/lib/modules/alert/alert.theme.scss +84 -84
  6. package/src/lib/modules/button/button.theme.scss +120 -120
  7. package/src/lib/modules/configurable-form/configurable-form.theme.scss +77 -77
  8. package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss +86 -86
  9. package/src/lib/modules/filter/filter.theme.scss +91 -91
  10. package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss +37 -37
  11. package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss +36 -36
  12. package/src/lib/modules/form-builder/form-builder.theme.scss +212 -212
  13. package/src/lib/modules/form-components/components/checkbox/_theme.scss +62 -62
  14. package/src/lib/modules/form-components/components/datepicker/_theme.scss +81 -81
  15. package/src/lib/modules/form-components/components/dropdown/_theme.scss +90 -90
  16. package/src/lib/modules/form-components/components/input/_theme.scss +76 -76
  17. package/src/lib/modules/form-components/components/radio/_theme.scss +60 -60
  18. package/src/lib/modules/form-components/components/search/_theme.scss +72 -72
  19. package/src/lib/modules/form-components/components/toggle/_theme.scss +44 -44
  20. package/src/lib/modules/form-components/form-components.theme.scss +24 -24
  21. package/src/lib/modules/nav/nav.theme.scss +86 -86
  22. package/src/lib/modules/pagination/pagination.theme.scss +66 -66
  23. package/src/lib/modules/side-nav/side-nav.theme.scss +111 -111
  24. package/src/lib/modules/smart-form/smart-form.theme.scss +889 -889
  25. package/src/lib/modules/smart-table/smart-table.theme.scss +335 -323
  26. package/src/lib/modules/snackbar/snackbar.theme.scss +93 -93
  27. package/src/lib/modules/summary-card/summary-card.theme.scss +175 -175
  28. package/src/lib/styles/global.scss +151 -134
  29. package/src/lib/styles/utilities.scss +250 -250
package/src/lib/modules/side-nav/side-nav.theme.scss CHANGED
@@ -1,111 +1,111 @@
1
- @use 'sass:map';
2
-
3
- $default-side-nav-config: (
4
- // Container & Global
5
- bg: #ffffff,
6
- border-color: rgba(0, 0, 0, 0.08),
7
- width: 220px,
8
- collapsed-width: 56px,
9
- gap-sections: 24px,
10
- padding: 16px,
11
-
12
- // Typographic Global
13
- font-family: ('Poppins', sans-serif),
14
-
15
- // Header Typography
16
- heading-font-weight: 500,
17
- heading-font-size: 16px,
18
- heading-color: #3C4043,
19
-
20
- // Item Defaults (Inactive)
21
- item-gap: 4px,
22
- item-padding: 12px 16px,
23
- item-border-radius: 8px,
24
- item-font-weight: 400,
25
- item-font-size: 14px,
26
- item-color: #5F6368,
27
-
28
- // Item Hover
29
- item-hover-bg: rgba(30, 30, 45, 0.08),
30
- item-hover-color: #1e1e2d,
31
-
32
- // Active Item
33
- active-bg: #1e1e2d,
34
- active-color: #ffffff,
35
- active-font-weight: 500,
36
- active-hover-bg: #2a2a3d,
37
-
38
- // Disable State
39
- disabled-opacity: 0.5,
40
-
41
- // Toggle Pill
42
- toggle-bg: #ffffff,
43
- toggle-border-color: rgba(0, 0, 0, 0.1),
44
-
45
- // Tooltip Styling
46
- tooltip-bg: #1e1e2d,
47
- tooltip-color: #FFFFFF,
48
- tooltip-padding: 8px 14px,
49
- tooltip-border-radius: 6px,
50
- tooltip-font-size: 12px,
51
- tooltip-font-weight: 500,
52
- tooltip-letter-spacing: 0.2px,
53
- tooltip-offset: 20px,
54
- tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.35)
55
- );
56
-
57
- @mixin side-nav-theme($user-config: ()) {
58
- $config: map.merge($default-side-nav-config, $user-config);
59
-
60
- // Container
61
- --cc-side-nav-bg: #{map.get($config, bg)};
62
- --cc-side-nav-border-color: #{map.get($config, border-color)};
63
- --cc-side-nav-width: #{map.get($config, width)};
64
- --cc-side-nav-collapsed-width: #{map.get($config, collapsed-width)};
65
- --cc-side-nav-gap-sections: #{map.get($config, gap-sections)};
66
- --cc-side-nav-padding: #{map.get($config, padding)};
67
-
68
- // Typography Family
69
- --cc-side-nav-font-family: #{map.get($config, font-family)};
70
-
71
- // Headers
72
- --cc-side-nav-heading-font-weight: #{map.get($config, heading-font-weight)};
73
- --cc-side-nav-heading-font-size: #{map.get($config, heading-font-size)};
74
- --cc-side-nav-heading-color: #{map.get($config, heading-color)};
75
-
76
- // Items Config
77
- --cc-side-nav-item-gap: #{map.get($config, item-gap)};
78
- --cc-side-nav-item-padding: #{map.get($config, item-padding)};
79
- --cc-side-nav-item-border-radius: #{map.get($config, item-border-radius)};
80
-
81
- // Inactive Items
82
- --cc-side-nav-item-font-weight: #{map.get($config, item-font-weight)};
83
- --cc-side-nav-item-font-size: #{map.get($config, item-font-size)};
84
- --cc-side-nav-item-color: #{map.get($config, item-color)};
85
- --cc-side-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
86
- --cc-side-nav-item-hover-color: #{map.get($config, item-hover-color)};
87
-
88
- // Active Items
89
- --cc-side-nav-active-bg: #{map.get($config, active-bg)};
90
- --cc-side-nav-active-color: #{map.get($config, active-color)};
91
- --cc-side-nav-active-font-weight: #{map.get($config, active-font-weight)};
92
- --cc-side-nav-active-hover-bg: #{map.get($config, active-hover-bg)};
93
-
94
- // Disabled
95
- --cc-side-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
96
-
97
- // Toggle Pill
98
- --cc-side-nav-toggle-bg: #{map.get($config, toggle-bg)};
99
- --cc-side-nav-toggle-border-color: #{map.get($config, toggle-border-color)};
100
-
101
- // Tooltip
102
- --cc-side-nav-tooltip-bg: #{map.get($config, tooltip-bg)};
103
- --cc-side-nav-tooltip-color: #{map.get($config, tooltip-color)};
104
- --cc-side-nav-tooltip-padding: #{map.get($config, tooltip-padding)};
105
- --cc-side-nav-tooltip-border-radius: #{map.get($config, tooltip-border-radius)};
106
- --cc-side-nav-tooltip-font-size: #{map.get($config, tooltip-font-size)};
107
- --cc-side-nav-tooltip-font-weight: #{map.get($config, tooltip-font-weight)};
108
- --cc-side-nav-tooltip-letter-spacing: #{map.get($config, tooltip-letter-spacing)};
109
- --cc-side-nav-tooltip-offset: #{map.get($config, tooltip-offset)};
110
- --cc-side-nav-tooltip-shadow: #{map.get($config, tooltip-shadow)};
111
- }
1
+ @use 'sass:map';
2
+
3
+ $default-side-nav-config: (
4
+ // Container & Global
5
+ bg: #ffffff,
6
+ border-color: rgba(0, 0, 0, 0.08),
7
+ width: 220px,
8
+ collapsed-width: 56px,
9
+ gap-sections: 24px,
10
+ padding: 16px,
11
+
12
+ // Typographic Global
13
+ font-family: ('Poppins', sans-serif),
14
+
15
+ // Header Typography
16
+ heading-font-weight: 500,
17
+ heading-font-size: 16px,
18
+ heading-color: #3C4043,
19
+
20
+ // Item Defaults (Inactive)
21
+ item-gap: 4px,
22
+ item-padding: 12px 16px,
23
+ item-border-radius: 8px,
24
+ item-font-weight: 400,
25
+ item-font-size: 14px,
26
+ item-color: #5F6368,
27
+
28
+ // Item Hover
29
+ item-hover-bg: rgba(30, 30, 45, 0.08),
30
+ item-hover-color: #1e1e2d,
31
+
32
+ // Active Item
33
+ active-bg: #1e1e2d,
34
+ active-color: #ffffff,
35
+ active-font-weight: 500,
36
+ active-hover-bg: #2a2a3d,
37
+
38
+ // Disable State
39
+ disabled-opacity: 0.5,
40
+
41
+ // Toggle Pill
42
+ toggle-bg: #ffffff,
43
+ toggle-border-color: rgba(0, 0, 0, 0.1),
44
+
45
+ // Tooltip Styling
46
+ tooltip-bg: #1e1e2d,
47
+ tooltip-color: #FFFFFF,
48
+ tooltip-padding: 8px 14px,
49
+ tooltip-border-radius: 6px,
50
+ tooltip-font-size: 12px,
51
+ tooltip-font-weight: 500,
52
+ tooltip-letter-spacing: 0.2px,
53
+ tooltip-offset: 20px,
54
+ tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.35)
55
+ );
56
+
57
+ @mixin side-nav-theme($user-config: ()) {
58
+ $config: map.merge($default-side-nav-config, $user-config);
59
+
60
+ // Container
61
+ --cc-side-nav-bg: #{map.get($config, bg)};
62
+ --cc-side-nav-border-color: #{map.get($config, border-color)};
63
+ --cc-side-nav-width: #{map.get($config, width)};
64
+ --cc-side-nav-collapsed-width: #{map.get($config, collapsed-width)};
65
+ --cc-side-nav-gap-sections: #{map.get($config, gap-sections)};
66
+ --cc-side-nav-padding: #{map.get($config, padding)};
67
+
68
+ // Typography Family
69
+ --cc-side-nav-font-family: #{map.get($config, font-family)};
70
+
71
+ // Headers
72
+ --cc-side-nav-heading-font-weight: #{map.get($config, heading-font-weight)};
73
+ --cc-side-nav-heading-font-size: #{map.get($config, heading-font-size)};
74
+ --cc-side-nav-heading-color: #{map.get($config, heading-color)};
75
+
76
+ // Items Config
77
+ --cc-side-nav-item-gap: #{map.get($config, item-gap)};
78
+ --cc-side-nav-item-padding: #{map.get($config, item-padding)};
79
+ --cc-side-nav-item-border-radius: #{map.get($config, item-border-radius)};
80
+
81
+ // Inactive Items
82
+ --cc-side-nav-item-font-weight: #{map.get($config, item-font-weight)};
83
+ --cc-side-nav-item-font-size: #{map.get($config, item-font-size)};
84
+ --cc-side-nav-item-color: #{map.get($config, item-color)};
85
+ --cc-side-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
86
+ --cc-side-nav-item-hover-color: #{map.get($config, item-hover-color)};
87
+
88
+ // Active Items
89
+ --cc-side-nav-active-bg: #{map.get($config, active-bg)};
90
+ --cc-side-nav-active-color: #{map.get($config, active-color)};
91
+ --cc-side-nav-active-font-weight: #{map.get($config, active-font-weight)};
92
+ --cc-side-nav-active-hover-bg: #{map.get($config, active-hover-bg)};
93
+
94
+ // Disabled
95
+ --cc-side-nav-disabled-opacity: #{map.get($config, disabled-opacity)};
96
+
97
+ // Toggle Pill
98
+ --cc-side-nav-toggle-bg: #{map.get($config, toggle-bg)};
99
+ --cc-side-nav-toggle-border-color: #{map.get($config, toggle-border-color)};
100
+
101
+ // Tooltip
102
+ --cc-side-nav-tooltip-bg: #{map.get($config, tooltip-bg)};
103
+ --cc-side-nav-tooltip-color: #{map.get($config, tooltip-color)};
104
+ --cc-side-nav-tooltip-padding: #{map.get($config, tooltip-padding)};
105
+ --cc-side-nav-tooltip-border-radius: #{map.get($config, tooltip-border-radius)};
106
+ --cc-side-nav-tooltip-font-size: #{map.get($config, tooltip-font-size)};
107
+ --cc-side-nav-tooltip-font-weight: #{map.get($config, tooltip-font-weight)};
108
+ --cc-side-nav-tooltip-letter-spacing: #{map.get($config, tooltip-letter-spacing)};
109
+ --cc-side-nav-tooltip-offset: #{map.get($config, tooltip-offset)};
110
+ --cc-side-nav-tooltip-shadow: #{map.get($config, tooltip-shadow)};
111
+ }