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/styles/global.scss CHANGED
@@ -1,135 +1,152 @@
1
- @use '../modules/side-nav/side-nav.theme' as sideNav;
2
- @use '../modules/form-builder/form-builder.theme' as fb;
3
- @use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
4
- @import 'quill/dist/quill.snow.css';
5
- @import './utilities.scss';
6
-
7
- :root {
8
- @include sideNav.side-nav-theme();
9
- @include fb.form-builder-theme();
10
- --cc-card-bg: #ffffff;
11
- --cc-card-border-color: #e0e0e0;
12
- --cc-card-border-radius: 8px;
13
- --cc-card-padding: 16px;
14
- --cc-card-shadow: none;
15
-
16
- @include fts.filter-table-selector-theme();
17
-
18
- /* Text Colors */
19
- --text-color: #333333;
20
- --text-muted: #666666;
21
- --text-muted-2: #888888;
22
- --text-light: #6c757d;
23
- --text-on-primary: #ffffff;
24
-
25
- /* Borders & Icons */
26
- --border-color: #dee2e6;
27
- --icon-bg: rgba(0, 0, 0, 0.05);
28
-
29
- /* Components */
30
- --primary-color: #c21e25;
31
- /* Default Base Primary */
32
- --btn-primary-bg: var(--primary-color);
33
- --btn-primary-text: #ffffff;
34
- --card-bg: #ffffff;
35
- --input-bg: #fcfcfc;
36
- --sidenav-bg: #ffffff;
37
- --sidenav-active-bg: #fff0f0;
38
- --sidenav-active-text: #ff0000;
39
-
40
- /* Status & Chips */
41
- --status-active-bg: #f6ffed;
42
- --status-active-text: #52c41a;
43
- --status-inactive-bg: #fffbe6;
44
- --status-inactive-text: #faad14;
45
-
46
- --chip-blue-bg: #e6f7ff;
47
- --chip-blue-text: #1890ff;
48
- --chip-green-bg: #f6ffed;
49
- --chip-green-text: #52c41a;
50
-
51
- /* Form Fields */
52
- --field-label-color: #202124;
53
- --field-label-height: 27px;
54
- --field-input-bg: #fefefe;
55
- --field-input-border: #bdc1c6;
56
- --field-input-height: 40px;
57
- --field-input-radius: 7px;
58
- --field-hint-color: #5f6368;
59
-
60
- /* MultiSave (Card Repeater) */
61
- --ms-card-bg: #ffffff;
62
- --ms-card-border: #e8eaed;
63
- --ms-card-radius: 10px;
64
- --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
65
- --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
66
- --ms-title-color: #111827;
67
- --ms-desc-color: #6b7280;
68
- --ms-btn-add-color: #3b82f6;
69
- --ms-btn-add-hover: #2563eb;
70
-
71
- @include sideNav.side-nav-theme();
72
- }
73
-
74
- /* ----------------------------------------------------
75
- Theme 2 - Aesthetic Midnight (Dark/Neon)
76
- ---------------------------------------------------- */
77
- body.theme-2 {
78
- --primary-color: #00d4ff;
79
- /* Neon Cyan */
80
- --secondary-color: #2b52ff;
81
- /* Bright Blue */
82
-
83
- /* Layout Backgrounds */
84
- --header-bg: rgba(15, 28, 63, 0.95);
85
- /* Deep Indigo */
86
- --footer-bg-start: #0a1128;
87
- --footer-bg-end: #0f1c3f;
88
- --sidebar-bg: #0a1128;
89
- --content-bg: #0f1c3f;
90
-
91
- /* Text Colors */
92
- --text-color: #ffffff;
93
- --text-muted: rgba(255, 255, 255, 0.7);
94
- --text-muted-2: rgba(255, 255, 255, 0.6);
95
- --text-light: #aaaaaa;
96
- --text-on-primary: #000000;
97
-
98
- /* Borders & Icons */
99
- --border-color: rgba(255, 255, 255, 0.1);
100
- --icon-bg: rgba(255, 255, 255, 0.1);
101
- /* Typography */
102
- --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
103
- --cc-text-color-primary: #000000;
104
- --cc-text-color-secondary: #757575;
105
- --cc-text-size-label: 12px;
106
- --cc-text-size-value: 24px;
107
- --cc-text-weight-bold: 700;
108
- --cc-text-weight-medium: 500;
109
-
110
- /* Theme 1 - Screenshot Match */
111
- --cc-theme-1-padding: 20px;
112
- --cc-theme-1-border-radius: 6px;
113
- --cc-theme-1-border: 1px solid #eeeeee;
114
- --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
115
-
116
- /* Theme 2 - Aesthetic */
117
- --cc-theme-2-padding: 32px;
118
- --cc-theme-2-border-radius: 16px;
119
- --cc-theme-2-border: none;
120
- --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
121
- --cc-theme-2-bg: #ffffff;
122
-
123
- }
124
-
125
- /* Global Reset/Base */
126
- body {
127
- margin: 0;
128
- font-family: 'Inter', sans-serif;
129
- background-color: var(--content-bg);
130
- /* Use content-bg, not generic bg-color */
131
- color: var(--text-color);
132
- transition:
133
- background-color 0.3s ease,
134
- color 0.3s ease;
1
+ @use '../modules/side-nav/side-nav.theme' as sideNav;
2
+ @use '../modules/form-builder/form-builder.theme' as fb;
3
+ @use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
4
+ @import 'quill/dist/quill.snow.css';
5
+ @import './utilities.scss';
6
+
7
+ :root {
8
+ @include sideNav.side-nav-theme();
9
+ @include fb.form-builder-theme();
10
+ --cc-card-bg: #ffffff;
11
+ --cc-card-border-color: #e0e0e0;
12
+ --cc-card-border-radius: 8px;
13
+ --cc-card-padding: 16px;
14
+ --cc-card-shadow: none;
15
+
16
+ @include fts.filter-table-selector-theme();
17
+
18
+ /* Text Colors */
19
+ --text-color: #333333;
20
+ --text-muted: #666666;
21
+ --text-muted-2: #888888;
22
+ --text-light: #6c757d;
23
+ --text-on-primary: #ffffff;
24
+
25
+ /* Borders & Icons */
26
+ --border-color: #dee2e6;
27
+ --icon-bg: rgba(0, 0, 0, 0.05);
28
+
29
+ /* Components */
30
+ --primary-color: #c21e25;
31
+ /* Default Base Primary */
32
+ --btn-primary-bg: var(--primary-color);
33
+ --btn-primary-text: #ffffff;
34
+ --card-bg: #ffffff;
35
+ --input-bg: #fcfcfc;
36
+ --sidenav-bg: #ffffff;
37
+ --sidenav-active-bg: #fff0f0;
38
+ --sidenav-active-text: #ff0000;
39
+
40
+ /* Status & Chips */
41
+ --status-active-bg: #f6ffed;
42
+ --status-active-text: #52c41a;
43
+ --status-inactive-bg: #fffbe6;
44
+ --status-inactive-text: #faad14;
45
+
46
+ --chip-blue-bg: #e6f7ff;
47
+ --chip-blue-text: #1890ff;
48
+ --chip-green-bg: #f6ffed;
49
+ --chip-green-text: #52c41a;
50
+
51
+ /* Form Fields */
52
+ --field-label-color: #202124;
53
+ --field-label-height: 27px;
54
+ --field-input-bg: #fefefe;
55
+ --field-input-border: #bdc1c6;
56
+ --field-input-height: 40px;
57
+ --field-input-radius: 7px;
58
+ --field-hint-color: #5f6368;
59
+
60
+ /* Smart Table Inline Edit Controls */
61
+ --st-cell-input-border: 1px solid var(--field-input-border, #dee2e6);
62
+ --st-cell-input-focus-outline-color: var(--primary-color, #c21e25);
63
+ --st-cell-input-bg: var(--field-input-bg, #fcfcfc);
64
+ --st-cell-select-bg: var(--field-input-bg, #fcfcfc);
65
+
66
+ /* Smart Table Inline Edit Controls (Mirrored) */
67
+ --st-edit-actions-gap: 0.75rem;
68
+ --st-action-btn-size: 32px;
69
+ --st-action-btn-icon-size: 16px;
70
+ --st-tick-btn-bg: transparent;
71
+ --st-cross-btn-bg: #ffffff;
72
+ --st-cross-btn-border: 1px solid #e8eaed;
73
+ --st-cross-btn-hover-bg: #f8f9fa;
74
+ --st-top-add-btn-bg: #4d89eb;
75
+ --st-top-add-btn-hover-bg: #295eb7;
76
+
77
+ /* MultiSave (Card Repeater) */
78
+ --ms-card-bg: #ffffff;
79
+ --ms-card-border: #e8eaed;
80
+ --ms-card-radius: 10px;
81
+ --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
82
+ --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
83
+ --ms-title-color: #111827;
84
+ --ms-desc-color: #6b7280;
85
+ --ms-btn-add-color: #3b82f6;
86
+ --ms-btn-add-hover: #2563eb;
87
+
88
+ @include sideNav.side-nav-theme();
89
+ }
90
+
91
+ /* ----------------------------------------------------
92
+ Theme 2 - Aesthetic Midnight (Dark/Neon)
93
+ ---------------------------------------------------- */
94
+ body.theme-2 {
95
+ --primary-color: #00d4ff;
96
+ /* Neon Cyan */
97
+ --secondary-color: #2b52ff;
98
+ /* Bright Blue */
99
+
100
+ /* Layout Backgrounds */
101
+ --header-bg: rgba(15, 28, 63, 0.95);
102
+ /* Deep Indigo */
103
+ --footer-bg-start: #0a1128;
104
+ --footer-bg-end: #0f1c3f;
105
+ --sidebar-bg: #0a1128;
106
+ --content-bg: #0f1c3f;
107
+
108
+ /* Text Colors */
109
+ --text-color: #ffffff;
110
+ --text-muted: rgba(255, 255, 255, 0.7);
111
+ --text-muted-2: rgba(255, 255, 255, 0.6);
112
+ --text-light: #aaaaaa;
113
+ --text-on-primary: #000000;
114
+
115
+ /* Borders & Icons */
116
+ --border-color: rgba(255, 255, 255, 0.1);
117
+ --icon-bg: rgba(255, 255, 255, 0.1);
118
+ /* Typography */
119
+ --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
120
+ --cc-text-color-primary: #000000;
121
+ --cc-text-color-secondary: #757575;
122
+ --cc-text-size-label: 12px;
123
+ --cc-text-size-value: 24px;
124
+ --cc-text-weight-bold: 700;
125
+ --cc-text-weight-medium: 500;
126
+
127
+ /* Theme 1 - Screenshot Match */
128
+ --cc-theme-1-padding: 20px;
129
+ --cc-theme-1-border-radius: 6px;
130
+ --cc-theme-1-border: 1px solid #eeeeee;
131
+ --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
132
+
133
+ /* Theme 2 - Aesthetic */
134
+ --cc-theme-2-padding: 32px;
135
+ --cc-theme-2-border-radius: 16px;
136
+ --cc-theme-2-border: none;
137
+ --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
138
+ --cc-theme-2-bg: #ffffff;
139
+
140
+ }
141
+
142
+ /* Global Reset/Base */
143
+ body {
144
+ margin: 0;
145
+ font-family: 'Inter', sans-serif;
146
+ background-color: var(--content-bg);
147
+ /* Use content-bg, not generic bg-color */
148
+ color: var(--text-color);
149
+ transition:
150
+ background-color 0.3s ease,
151
+ color 0.3s ease;
135
152
  }