otimus-library 0.3.48 → 0.3.49

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 (23) hide show
  1. package/README.md +26 -26
  2. package/fesm2022/otimus-library.mjs +82 -74
  3. package/fesm2022/otimus-library.mjs.map +1 -1
  4. package/index.d.ts +6 -0
  5. package/package.json +1 -1
  6. package/styles/colors.scss +70 -70
  7. package/styles/components/buttons/buttons.scss +225 -225
  8. package/styles/components/buttons/buttons.shui.scss +61 -61
  9. package/styles/components/index.scss +2 -2
  10. package/styles/components/inputs/inputs.scss +248 -248
  11. package/styles/components/inputs/inputs.shui.scss +225 -225
  12. package/styles/components/table/table.scss +98 -98
  13. package/styles/components/table/table.shui.scss +50 -50
  14. package/styles/components/tooltip.scss +26 -26
  15. package/styles/fonts.scss +178 -178
  16. package/styles/grid.scss +1122 -1122
  17. package/styles/patterns/shui/colors.shui.scss +154 -154
  18. package/styles/patterns/shui/fonts.shui.scss +65 -65
  19. package/styles/patterns/shui/index.shui.scss +24 -24
  20. package/styles/patterns/shui/variables.shui.scss +23 -23
  21. package/styles/states.scss +5 -5
  22. package/styles/styles.scss +47 -47
  23. package/styles/variables.scss +47 -47
package/index.d.ts CHANGED
@@ -249,6 +249,7 @@ declare class OcModalFooterComponent {
249
249
  interface OcAutoCompleteType {
250
250
  name: string;
251
251
  value?: any;
252
+ id?: any;
252
253
  icon?: MaterialSymbol;
253
254
  iconSize?: string;
254
255
  counter?: number;
@@ -281,6 +282,11 @@ declare class OcAutocompleteComponent implements AfterContentInit, AfterViewInit
281
282
  input: ElementRef;
282
283
  options: ElementRef;
283
284
  outerDiv: ElementRef<HTMLDivElement>;
285
+ /**
286
+ * Helper to get the identifier value from a data item.
287
+ * Supports both 'value' and 'id' properties for backwards compatibility.
288
+ */
289
+ private getItemValue;
284
290
  listOptionsElements: QueryList<ElementRef<HTMLLIElement>>;
285
291
  ocPrefix: any;
286
292
  ocSuffix: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "otimus-library",
3
- "version": "0.3.48",
3
+ "version": "0.3.49",
4
4
  "license": "MIT",
5
5
  "peerDependencies": {
6
6
  "@angular/cdk": "^20.2.5",
package/styles/colors.scss CHANGED
@@ -1,71 +1,71 @@
1
- @use './variables.scss';
2
-
3
- .oc.color {
4
- // Purple Colors
5
- &.p-1 {
6
- color: variables.$color-brand-p-1;
7
- }
8
- &.p-2 {
9
- color: variables.$color-brand-dp-1;
10
- }
11
- &.p-3 {
12
- color: variables.$color-brand-p-3;
13
- }
14
- &.p-4 {
15
- color: variables.$color-brand-p-4;
16
- }
17
- &.p-5 {
18
- color: variables.$color-brand-p-5;
19
- }
20
- &.p-6 {
21
- color: variables.$color-brand-p-6;
22
- }
23
-
24
- // Dark Purple Colors
25
- &.dp-1 {
26
- color: variables.$color-brand-dp-1;
27
- }
28
- &.dp-2 {
29
- color: variables.$color-brand-dp-2;
30
- }
31
- &.dp-3 {
32
- color: variables.$color-brand-dp-3;
33
- }
34
- &.dp-4 {
35
- color: variables.$color-brand-dp-4;
36
- }
37
- &.dp-5 {
38
- color: variables.$color-brand-dp-5;
39
- }
40
-
41
- // Green Colors
42
- &.g-1 {
43
- color: variables.$color-brand-g-1;
44
- }
45
- &.g-2 {
46
- color: variables.$color-brand-g-2;
47
- }
48
- &.g-3 {
49
- color: variables.$color-brand-g-3;
50
- }
51
- &.g-4 {
52
- color: variables.$color-brand-g-4;
53
- }
54
- &.g-5 {
55
- color: variables.$color-brand-g-5;
56
- }
57
- &.g-6 {
58
- color: variables.$color-brand-g-6;
59
- }
60
-
61
- // Status Colors
62
- &.error {
63
- color: variables.$color-error;
64
- }
65
- &.success {
66
- color: variables.$color-success;
67
- }
68
- &.error {
69
- color: variables.$color-error;
70
- }
1
+ @use './variables.scss';
2
+
3
+ .oc.color {
4
+ // Purple Colors
5
+ &.p-1 {
6
+ color: variables.$color-brand-p-1;
7
+ }
8
+ &.p-2 {
9
+ color: variables.$color-brand-dp-1;
10
+ }
11
+ &.p-3 {
12
+ color: variables.$color-brand-p-3;
13
+ }
14
+ &.p-4 {
15
+ color: variables.$color-brand-p-4;
16
+ }
17
+ &.p-5 {
18
+ color: variables.$color-brand-p-5;
19
+ }
20
+ &.p-6 {
21
+ color: variables.$color-brand-p-6;
22
+ }
23
+
24
+ // Dark Purple Colors
25
+ &.dp-1 {
26
+ color: variables.$color-brand-dp-1;
27
+ }
28
+ &.dp-2 {
29
+ color: variables.$color-brand-dp-2;
30
+ }
31
+ &.dp-3 {
32
+ color: variables.$color-brand-dp-3;
33
+ }
34
+ &.dp-4 {
35
+ color: variables.$color-brand-dp-4;
36
+ }
37
+ &.dp-5 {
38
+ color: variables.$color-brand-dp-5;
39
+ }
40
+
41
+ // Green Colors
42
+ &.g-1 {
43
+ color: variables.$color-brand-g-1;
44
+ }
45
+ &.g-2 {
46
+ color: variables.$color-brand-g-2;
47
+ }
48
+ &.g-3 {
49
+ color: variables.$color-brand-g-3;
50
+ }
51
+ &.g-4 {
52
+ color: variables.$color-brand-g-4;
53
+ }
54
+ &.g-5 {
55
+ color: variables.$color-brand-g-5;
56
+ }
57
+ &.g-6 {
58
+ color: variables.$color-brand-g-6;
59
+ }
60
+
61
+ // Status Colors
62
+ &.error {
63
+ color: variables.$color-error;
64
+ }
65
+ &.success {
66
+ color: variables.$color-success;
67
+ }
68
+ &.error {
69
+ color: variables.$color-error;
70
+ }
71
71
  }
package/styles/components/buttons/buttons.scss CHANGED
@@ -1,226 +1,226 @@
1
- @use '../../variables.scss';
2
-
3
- .oc.button {
4
- height: 3rem;
5
-
6
- padding: 0 2rem;
7
-
8
- background-color: variables.$color-gray-4;
9
- color: variables.$color-gray-1;
10
-
11
- border-radius: 14px;
12
- border: none;
13
-
14
- font-weight: 500;
15
- font-size: 1rem;
16
- transition: 0.15s ease;
17
-
18
- display: flex;
19
- justify-content: center;
20
- align-items: center;
21
- gap: 0.5rem;
22
-
23
- cursor: pointer;
24
-
25
- span{
26
- pointer-events: none;
27
- }
28
-
29
- &.disabled{
30
- opacity: .4;
31
- pointer-events: none;
32
- cursor: not-allowed;
33
- }
34
-
35
- &.align-left{
36
- padding-left: 1rem;
37
- }
38
-
39
- &.align-right{
40
- padding-right: 1rem;
41
- }
42
-
43
- &:active{
44
- transform: scale(0.99);
45
- filter: brightness(0.97);
46
- }
47
-
48
- &.white {
49
- background-color: variables.$color-white;
50
- color: variables.$color-gray-3;
51
- }
52
-
53
- &.no-bg{
54
- color: variables.$color-gray-3;
55
- background-color: transparent;
56
-
57
- &:hover{
58
- background-color: variables.$color-gray-6;
59
- }
60
- }
61
-
62
- &.error{
63
- background-color: variables.$color-error;
64
- color: variables.$color-gray-6;
65
- }
66
-
67
- //Purple Tones
68
- &.p-1{
69
- background-color: variables.$color-brand-p-1;
70
- color: variables.$color-gray-6;
71
- }
72
-
73
- &.p-2{
74
- background-color: variables.$color-brand-dp-1;
75
- color: variables.$color-gray-6;
76
- }
77
-
78
- &.p-3{
79
- background-color: variables.$color-brand-p-4;
80
- color: variables.$color-gray-6;
81
- }
82
-
83
- &.p-4{
84
- background-color: variables.$color-brand-p-6;
85
- color: variables.$color-gray-6;
86
- }
87
-
88
- //Green Tones
89
- &.g-1{
90
- background-color: variables.$color-brand-g-1;
91
- color: variables.$color-brand-dp-1;
92
- }
93
-
94
- &.g-2{
95
- background-color: variables.$color-brand-g-2;
96
- color: variables.$color-brand-dp-1;
97
- }
98
-
99
- &.g-3{
100
- background-color: variables.$color-brand-g-3;
101
- color: variables.$color-brand-dp-1;
102
- }
103
-
104
- &.g-4{
105
- background-color: variables.$color-brand-g-6;
106
- color: variables.$color-brand-dp-1;
107
- }
108
-
109
- &.gray-1 {
110
- background-color: variables.$color-gray-6;
111
- color: variables.$color-gray-3
112
- }
113
-
114
- &.gray-2{
115
- background-color: variables.$color-gray-4;
116
- color: variables.$color-gray-1
117
- }
118
-
119
- &.gray-3{
120
- background-color: variables.$color-gray-3;
121
- color: variables.$color-gray-6;
122
- }
123
-
124
- &.gray-4{
125
- background-color: variables.$color-gray-2;
126
- color: variables.$color-gray-6;
127
- }
128
-
129
- &.gray-5{
130
- background-color: variables.$color-gray-1;
131
- color: variables.$color-gray-6;
132
- }
133
-
134
- // SIZES
135
- &.tiny {
136
- height: 2rem !important;
137
- }
138
-
139
- &.small{
140
- height: 2.5rem !important;
141
- }
142
-
143
- &.large{
144
- height: 3.5rem !important;
145
- }
146
-
147
- //ICON
148
- &.icon{
149
- height: 3rem;
150
- width: 3rem;
151
- padding: 0;
152
-
153
- gap: 0 ;
154
-
155
- &.tiny{
156
- width: 2rem !important;
157
- }
158
-
159
- &.small{
160
- width: 2.5rem !important;
161
- padding: 0;
162
- }
163
-
164
- &.large{
165
- width: 3.5rem !important;
166
- padding: 0;
167
-
168
- // font-size: 2rem !important;
169
- }
170
- }
171
-
172
- &.outlined{
173
- background-color: transparent;
174
- border: 2px solid;
175
-
176
- //Purple Tones
177
- &.p-1{
178
- color: variables.$color-brand-p-1;
179
- }
180
-
181
- &.p-2{
182
- color: variables.$color-brand-dp-1;
183
- }
184
-
185
- &.p-3{
186
- color: variables.$color-brand-p-4;
187
- }
188
-
189
- &.p-4{
190
- color: variables.$color-brand-p-6;
191
- }
192
-
193
- //Green Tones
194
- &.g-1{
195
- color: variables.$color-brand-g-1;
196
- }
197
-
198
- &.g-2{
199
- color: variables.$color-brand-g-2;
200
- }
201
-
202
- &.g-3{
203
- color: variables.$color-brand-g-3;
204
- }
205
-
206
- &.g-4{
207
- color: variables.$color-brand-g-6;
208
- }
209
-
210
- //Gray
211
-
212
- &.gray-1{
213
- color: variables.$color-gray-3;
214
- }
215
-
216
- &.gray-2{
217
- color: variables.$color-gray-2;
218
- }
219
-
220
- &.gray-3{
221
- color: variables.$color-gray-1;
222
- }
223
- }
224
- }
225
-
1
+ @use '../../variables.scss';
2
+
3
+ .oc.button {
4
+ height: 3rem;
5
+
6
+ padding: 0 2rem;
7
+
8
+ background-color: variables.$color-gray-4;
9
+ color: variables.$color-gray-1;
10
+
11
+ border-radius: 14px;
12
+ border: none;
13
+
14
+ font-weight: 500;
15
+ font-size: 1rem;
16
+ transition: 0.15s ease;
17
+
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ gap: 0.5rem;
22
+
23
+ cursor: pointer;
24
+
25
+ span{
26
+ pointer-events: none;
27
+ }
28
+
29
+ &.disabled{
30
+ opacity: .4;
31
+ pointer-events: none;
32
+ cursor: not-allowed;
33
+ }
34
+
35
+ &.align-left{
36
+ padding-left: 1rem;
37
+ }
38
+
39
+ &.align-right{
40
+ padding-right: 1rem;
41
+ }
42
+
43
+ &:active{
44
+ transform: scale(0.99);
45
+ filter: brightness(0.97);
46
+ }
47
+
48
+ &.white {
49
+ background-color: variables.$color-white;
50
+ color: variables.$color-gray-3;
51
+ }
52
+
53
+ &.no-bg{
54
+ color: variables.$color-gray-3;
55
+ background-color: transparent;
56
+
57
+ &:hover{
58
+ background-color: variables.$color-gray-6;
59
+ }
60
+ }
61
+
62
+ &.error{
63
+ background-color: variables.$color-error;
64
+ color: variables.$color-gray-6;
65
+ }
66
+
67
+ //Purple Tones
68
+ &.p-1{
69
+ background-color: variables.$color-brand-p-1;
70
+ color: variables.$color-gray-6;
71
+ }
72
+
73
+ &.p-2{
74
+ background-color: variables.$color-brand-dp-1;
75
+ color: variables.$color-gray-6;
76
+ }
77
+
78
+ &.p-3{
79
+ background-color: variables.$color-brand-p-4;
80
+ color: variables.$color-gray-6;
81
+ }
82
+
83
+ &.p-4{
84
+ background-color: variables.$color-brand-p-6;
85
+ color: variables.$color-gray-6;
86
+ }
87
+
88
+ //Green Tones
89
+ &.g-1{
90
+ background-color: variables.$color-brand-g-1;
91
+ color: variables.$color-brand-dp-1;
92
+ }
93
+
94
+ &.g-2{
95
+ background-color: variables.$color-brand-g-2;
96
+ color: variables.$color-brand-dp-1;
97
+ }
98
+
99
+ &.g-3{
100
+ background-color: variables.$color-brand-g-3;
101
+ color: variables.$color-brand-dp-1;
102
+ }
103
+
104
+ &.g-4{
105
+ background-color: variables.$color-brand-g-6;
106
+ color: variables.$color-brand-dp-1;
107
+ }
108
+
109
+ &.gray-1 {
110
+ background-color: variables.$color-gray-6;
111
+ color: variables.$color-gray-3
112
+ }
113
+
114
+ &.gray-2{
115
+ background-color: variables.$color-gray-4;
116
+ color: variables.$color-gray-1
117
+ }
118
+
119
+ &.gray-3{
120
+ background-color: variables.$color-gray-3;
121
+ color: variables.$color-gray-6;
122
+ }
123
+
124
+ &.gray-4{
125
+ background-color: variables.$color-gray-2;
126
+ color: variables.$color-gray-6;
127
+ }
128
+
129
+ &.gray-5{
130
+ background-color: variables.$color-gray-1;
131
+ color: variables.$color-gray-6;
132
+ }
133
+
134
+ // SIZES
135
+ &.tiny {
136
+ height: 2rem !important;
137
+ }
138
+
139
+ &.small{
140
+ height: 2.5rem !important;
141
+ }
142
+
143
+ &.large{
144
+ height: 3.5rem !important;
145
+ }
146
+
147
+ //ICON
148
+ &.icon{
149
+ height: 3rem;
150
+ width: 3rem;
151
+ padding: 0;
152
+
153
+ gap: 0 ;
154
+
155
+ &.tiny{
156
+ width: 2rem !important;
157
+ }
158
+
159
+ &.small{
160
+ width: 2.5rem !important;
161
+ padding: 0;
162
+ }
163
+
164
+ &.large{
165
+ width: 3.5rem !important;
166
+ padding: 0;
167
+
168
+ // font-size: 2rem !important;
169
+ }
170
+ }
171
+
172
+ &.outlined{
173
+ background-color: transparent;
174
+ border: 2px solid;
175
+
176
+ //Purple Tones
177
+ &.p-1{
178
+ color: variables.$color-brand-p-1;
179
+ }
180
+
181
+ &.p-2{
182
+ color: variables.$color-brand-dp-1;
183
+ }
184
+
185
+ &.p-3{
186
+ color: variables.$color-brand-p-4;
187
+ }
188
+
189
+ &.p-4{
190
+ color: variables.$color-brand-p-6;
191
+ }
192
+
193
+ //Green Tones
194
+ &.g-1{
195
+ color: variables.$color-brand-g-1;
196
+ }
197
+
198
+ &.g-2{
199
+ color: variables.$color-brand-g-2;
200
+ }
201
+
202
+ &.g-3{
203
+ color: variables.$color-brand-g-3;
204
+ }
205
+
206
+ &.g-4{
207
+ color: variables.$color-brand-g-6;
208
+ }
209
+
210
+ //Gray
211
+
212
+ &.gray-1{
213
+ color: variables.$color-gray-3;
214
+ }
215
+
216
+ &.gray-2{
217
+ color: variables.$color-gray-2;
218
+ }
219
+
220
+ &.gray-3{
221
+ color: variables.$color-gray-1;
222
+ }
223
+ }
224
+ }
225
+
226
226
  @import './buttons.shui.scss';