commons-shared-web-ui 0.0.29 → 0.0.31

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 (7) hide show
  1. package/fesm2022/commons-shared-web-ui.mjs +123 -24
  2. package/fesm2022/commons-shared-web-ui.mjs.map +1 -1
  3. package/index.d.ts +31 -2
  4. package/package.json +1 -1
  5. package/src/lib/modules/pagination/pagination.theme.scss +66 -66
  6. package/src/lib/modules/smart-table/smart-table.theme.scss +323 -222
  7. package/src/lib/modules/snackbar/snackbar.theme.scss +93 -93
package/src/lib/modules/snackbar/snackbar.theme.scss CHANGED
@@ -1,93 +1,93 @@
1
- @use 'sass:map';
2
-
3
- // Default configuration for the snackbar theme
4
- $default-snackbar-config: (
5
- // Shared Layout
6
- font-family: ('Inter', sans-serif),
7
- font-size: 14px,
8
- font-weight: 500,
9
- min-width: 300px,
10
- padding: 12px 16px,
11
- gap: 12px,
12
- radius: 8px,
13
- shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)),
14
- icon-size: 20px,
15
- close-icon-size: 16px,
16
-
17
- // Base Colors
18
- bg: #ffffff,
19
- color: #1f2937,
20
- border: 1px solid transparent,
21
-
22
- // Success
23
- success-bg: #ecfdf5,
24
- success-color: #065f46,
25
- success-border: #a7f3d0,
26
- success-icon-color: #10b981,
27
-
28
- // Error
29
- error-bg: #fef2f2,
30
- error-color: #991b1b,
31
- error-border: #fecaca,
32
- error-icon-color: #ef4444,
33
-
34
- // Info
35
- info-bg: #eff6ff,
36
- info-color: #1e40af,
37
- info-border: #bfdbfe,
38
- info-icon-color: #3b82f6,
39
-
40
- // Warning
41
- warning-bg: #fffbeb,
42
- warning-color: #92400e,
43
- warning-border: #fde68a,
44
- warning-icon-color: #f59e0b
45
- );
46
-
47
- // Mixin to generate CSS variables for the snackbar component
48
- // E.g., @include cc-snackbar-theme()
49
- @mixin snackbar-theme($user-config: ()) {
50
- // Merge user config with defaults
51
- $config: map.merge($default-snackbar-config, $user-config);
52
-
53
- // Structural
54
- --cc-sb-font-family: #{map.get($config, font-family)};
55
- --cc-sb-font-size: #{map.get($config, font-size)};
56
- --cc-sb-font-weight: #{map.get($config, font-weight)};
57
- --cc-sb-min-width: #{map.get($config, min-width)};
58
- --cc-sb-padding: #{map.get($config, padding)};
59
- --cc-sb-gap: #{map.get($config, gap)};
60
- --cc-sb-radius: #{map.get($config, radius)};
61
- --cc-sb-shadow: #{map.get($config, shadow)};
62
- --cc-sb-icon-size: #{map.get($config, icon-size)};
63
- --cc-sb-close-icon-size: #{map.get($config, close-icon-size)};
64
-
65
- // Base Defaults
66
- --cc-sb-bg: #{map.get($config, bg)};
67
- --cc-sb-color: #{map.get($config, color)};
68
- --cc-sb-border: #{map.get($config, border)};
69
-
70
- // Success
71
- --cc-sb-success-bg: #{map.get($config, success-bg)};
72
- --cc-sb-success-color: #{map.get($config, success-color)};
73
- --cc-sb-success-border: #{map.get($config, success-border)};
74
- --cc-sb-success-icon-color: #{map.get($config, success-icon-color)};
75
-
76
- // Error
77
- --cc-sb-error-bg: #{map.get($config, error-bg)};
78
- --cc-sb-error-color: #{map.get($config, error-color)};
79
- --cc-sb-error-border: #{map.get($config, error-border)};
80
- --cc-sb-error-icon-color: #{map.get($config, error-icon-color)};
81
-
82
- // Info
83
- --cc-sb-info-bg: #{map.get($config, info-bg)};
84
- --cc-sb-info-color: #{map.get($config, info-color)};
85
- --cc-sb-info-border: #{map.get($config, info-border)};
86
- --cc-sb-info-icon-color: #{map.get($config, info-icon-color)};
87
-
88
- // Warning
89
- --cc-sb-warning-bg: #{map.get($config, warning-bg)};
90
- --cc-sb-warning-color: #{map.get($config, warning-color)};
91
- --cc-sb-warning-border: #{map.get($config, warning-border)};
92
- --cc-sb-warning-icon-color: #{map.get($config, warning-icon-color)};
93
- }
1
+ @use 'sass:map';
2
+
3
+ // Default configuration for the snackbar theme
4
+ $default-snackbar-config: (
5
+ // Shared Layout
6
+ font-family: ('Inter', sans-serif),
7
+ font-size: 14px,
8
+ font-weight: 500,
9
+ min-width: 300px,
10
+ padding: 12px 16px,
11
+ gap: 12px,
12
+ radius: 8px,
13
+ shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)),
14
+ icon-size: 20px,
15
+ close-icon-size: 16px,
16
+
17
+ // Base Colors
18
+ bg: #ffffff,
19
+ color: #1f2937,
20
+ border: 1px solid transparent,
21
+
22
+ // Success
23
+ success-bg: #ecfdf5,
24
+ success-color: #065f46,
25
+ success-border: #a7f3d0,
26
+ success-icon-color: #10b981,
27
+
28
+ // Error
29
+ error-bg: #fef2f2,
30
+ error-color: #991b1b,
31
+ error-border: #fecaca,
32
+ error-icon-color: #ef4444,
33
+
34
+ // Info
35
+ info-bg: #eff6ff,
36
+ info-color: #1e40af,
37
+ info-border: #bfdbfe,
38
+ info-icon-color: #3b82f6,
39
+
40
+ // Warning
41
+ warning-bg: #fffbeb,
42
+ warning-color: #92400e,
43
+ warning-border: #fde68a,
44
+ warning-icon-color: #f59e0b
45
+ );
46
+
47
+ // Mixin to generate CSS variables for the snackbar component
48
+ // E.g., @include cc-snackbar-theme()
49
+ @mixin snackbar-theme($user-config: ()) {
50
+ // Merge user config with defaults
51
+ $config: map.merge($default-snackbar-config, $user-config);
52
+
53
+ // Structural
54
+ --cc-sb-font-family: #{map.get($config, font-family)};
55
+ --cc-sb-font-size: #{map.get($config, font-size)};
56
+ --cc-sb-font-weight: #{map.get($config, font-weight)};
57
+ --cc-sb-min-width: #{map.get($config, min-width)};
58
+ --cc-sb-padding: #{map.get($config, padding)};
59
+ --cc-sb-gap: #{map.get($config, gap)};
60
+ --cc-sb-radius: #{map.get($config, radius)};
61
+ --cc-sb-shadow: #{map.get($config, shadow)};
62
+ --cc-sb-icon-size: #{map.get($config, icon-size)};
63
+ --cc-sb-close-icon-size: #{map.get($config, close-icon-size)};
64
+
65
+ // Base Defaults
66
+ --cc-sb-bg: #{map.get($config, bg)};
67
+ --cc-sb-color: #{map.get($config, color)};
68
+ --cc-sb-border: #{map.get($config, border)};
69
+
70
+ // Success
71
+ --cc-sb-success-bg: #{map.get($config, success-bg)};
72
+ --cc-sb-success-color: #{map.get($config, success-color)};
73
+ --cc-sb-success-border: #{map.get($config, success-border)};
74
+ --cc-sb-success-icon-color: #{map.get($config, success-icon-color)};
75
+
76
+ // Error
77
+ --cc-sb-error-bg: #{map.get($config, error-bg)};
78
+ --cc-sb-error-color: #{map.get($config, error-color)};
79
+ --cc-sb-error-border: #{map.get($config, error-border)};
80
+ --cc-sb-error-icon-color: #{map.get($config, error-icon-color)};
81
+
82
+ // Info
83
+ --cc-sb-info-bg: #{map.get($config, info-bg)};
84
+ --cc-sb-info-color: #{map.get($config, info-color)};
85
+ --cc-sb-info-border: #{map.get($config, info-border)};
86
+ --cc-sb-info-icon-color: #{map.get($config, info-icon-color)};
87
+
88
+ // Warning
89
+ --cc-sb-warning-bg: #{map.get($config, warning-bg)};
90
+ --cc-sb-warning-color: #{map.get($config, warning-color)};
91
+ --cc-sb-warning-border: #{map.get($config, warning-border)};
92
+ --cc-sb-warning-icon-color: #{map.get($config, warning-icon-color)};
93
+ }