otimus-library 0.4.78 → 0.4.80

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 +89 -89
  3. package/fesm2022/otimus-library.mjs.map +1 -1
  4. package/index.d.ts +2 -2
  5. package/package.json +1 -1
  6. package/styles/colors.scss +70 -70
  7. package/styles/components/buttons/buttons.scss +225 -226
  8. package/styles/components/buttons/buttons.shui.scss +61 -61
  9. package/styles/components/index.scss +3 -3
  10. package/styles/components/inputs/inputs.scss +250 -249
  11. package/styles/components/inputs/inputs.shui.scss +271 -271
  12. package/styles/components/table/table.scss +123 -124
  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 -48
  23. package/styles/variables.scss +47 -47
package/index.d.ts CHANGED
@@ -731,12 +731,12 @@ declare class OcPaginationComponent implements OnInit {
731
731
  static ɵcmp: i0.ɵɵComponentDeclaration<OcPaginationComponent, "oc-pagination", never, { "ocPage": { "alias": "ocPage"; "required": false; }; "ocMaxPage": { "alias": "ocMaxPage"; "required": false; }; "ocStyle": { "alias": "ocStyle"; "required": false; }; "ocItemName": { "alias": "ocItemName"; "required": false; }; }, { "ocGetPage": "ocGetPage"; }, never, never, true, never>;
732
732
  }
733
733
 
734
- declare class OcProfileComponent implements OnInit {
734
+ declare class OcProfileComponent implements OnChanges {
735
735
  ocUserName?: string;
736
736
  ocProfilePic?: string;
737
737
  ocSize: 'large' | 'medium' | 'small' | 'tiny';
738
738
  nameInitials: string;
739
- ngOnInit(): void;
739
+ ngOnChanges(): void;
740
740
  getInitials(): void;
741
741
  static ɵfac: i0.ɵɵFactoryDeclaration<OcProfileComponent, never>;
742
742
  static ɵcmp: i0.ɵɵComponentDeclaration<OcProfileComponent, "oc-profile", never, { "ocUserName": { "alias": "ocUserName"; "required": false; }; "ocProfilePic": { "alias": "ocProfilePic"; "required": false; }; "ocSize": { "alias": "ocSize"; "required": false; }; }, {}, never, never, true, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "otimus-library",
3
- "version": "0.4.78",
3
+ "version": "0.4.80",
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,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
- @import './buttons.shui.scss';
1
+ @use '../../variables.scss';
2
+ @use './buttons.shui.scss';
3
+
4
+ .oc.button {
5
+ height: 3rem;
6
+
7
+ padding: 0 2rem;
8
+
9
+ background-color: variables.$color-gray-4;
10
+ color: variables.$color-gray-1;
11
+
12
+ border-radius: 14px;
13
+ border: none;
14
+
15
+ font-weight: 500;
16
+ font-size: 1rem;
17
+ transition: 0.15s ease;
18
+
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ gap: 0.5rem;
23
+
24
+ cursor: pointer;
25
+
26
+ span{
27
+ pointer-events: none;
28
+ }
29
+
30
+ &.disabled{
31
+ opacity: .4;
32
+ pointer-events: none;
33
+ cursor: not-allowed;
34
+ }
35
+
36
+ &.align-left{
37
+ padding-left: 1rem;
38
+ }
39
+
40
+ &.align-right{
41
+ padding-right: 1rem;
42
+ }
43
+
44
+ &:active{
45
+ transform: scale(0.99);
46
+ filter: brightness(0.97);
47
+ }
48
+
49
+ &.white {
50
+ background-color: variables.$color-white;
51
+ color: variables.$color-gray-3;
52
+ }
53
+
54
+ &.no-bg{
55
+ color: variables.$color-gray-3;
56
+ background-color: transparent;
57
+
58
+ &:hover{
59
+ background-color: variables.$color-gray-6;
60
+ }
61
+ }
62
+
63
+ &.error{
64
+ background-color: variables.$color-error;
65
+ color: variables.$color-gray-6;
66
+ }
67
+
68
+ //Purple Tones
69
+ &.p-1{
70
+ background-color: variables.$color-brand-p-1;
71
+ color: variables.$color-gray-6;
72
+ }
73
+
74
+ &.p-2{
75
+ background-color: variables.$color-brand-dp-1;
76
+ color: variables.$color-gray-6;
77
+ }
78
+
79
+ &.p-3{
80
+ background-color: variables.$color-brand-p-4;
81
+ color: variables.$color-gray-6;
82
+ }
83
+
84
+ &.p-4{
85
+ background-color: variables.$color-brand-p-6;
86
+ color: variables.$color-gray-6;
87
+ }
88
+
89
+ //Green Tones
90
+ &.g-1{
91
+ background-color: variables.$color-brand-g-1;
92
+ color: variables.$color-brand-dp-1;
93
+ }
94
+
95
+ &.g-2{
96
+ background-color: variables.$color-brand-g-2;
97
+ color: variables.$color-brand-dp-1;
98
+ }
99
+
100
+ &.g-3{
101
+ background-color: variables.$color-brand-g-3;
102
+ color: variables.$color-brand-dp-1;
103
+ }
104
+
105
+ &.g-4{
106
+ background-color: variables.$color-brand-g-6;
107
+ color: variables.$color-brand-dp-1;
108
+ }
109
+
110
+ &.gray-1 {
111
+ background-color: variables.$color-gray-6;
112
+ color: variables.$color-gray-3
113
+ }
114
+
115
+ &.gray-2{
116
+ background-color: variables.$color-gray-4;
117
+ color: variables.$color-gray-1
118
+ }
119
+
120
+ &.gray-3{
121
+ background-color: variables.$color-gray-3;
122
+ color: variables.$color-gray-6;
123
+ }
124
+
125
+ &.gray-4{
126
+ background-color: variables.$color-gray-2;
127
+ color: variables.$color-gray-6;
128
+ }
129
+
130
+ &.gray-5{
131
+ background-color: variables.$color-gray-1;
132
+ color: variables.$color-gray-6;
133
+ }
134
+
135
+ // SIZES
136
+ &.tiny {
137
+ height: 2rem !important;
138
+ }
139
+
140
+ &.small{
141
+ height: 2.5rem !important;
142
+ }
143
+
144
+ &.large{
145
+ height: 3.5rem !important;
146
+ }
147
+
148
+ //ICON
149
+ &.icon{
150
+ height: 3rem;
151
+ width: 3rem;
152
+ padding: 0;
153
+
154
+ gap: 0 ;
155
+
156
+ &.tiny{
157
+ width: 2rem !important;
158
+ }
159
+
160
+ &.small{
161
+ width: 2.5rem !important;
162
+ padding: 0;
163
+ }
164
+
165
+ &.large{
166
+ width: 3.5rem !important;
167
+ padding: 0;
168
+
169
+ // font-size: 2rem !important;
170
+ }
171
+ }
172
+
173
+ &.outlined{
174
+ background-color: transparent;
175
+ border: 2px solid;
176
+
177
+ //Purple Tones
178
+ &.p-1{
179
+ color: variables.$color-brand-p-1;
180
+ }
181
+
182
+ &.p-2{
183
+ color: variables.$color-brand-dp-1;
184
+ }
185
+
186
+ &.p-3{
187
+ color: variables.$color-brand-p-4;
188
+ }
189
+
190
+ &.p-4{
191
+ color: variables.$color-brand-p-6;
192
+ }
193
+
194
+ //Green Tones
195
+ &.g-1{
196
+ color: variables.$color-brand-g-1;
197
+ }
198
+
199
+ &.g-2{
200
+ color: variables.$color-brand-g-2;
201
+ }
202
+
203
+ &.g-3{
204
+ color: variables.$color-brand-g-3;
205
+ }
206
+
207
+ &.g-4{
208
+ color: variables.$color-brand-g-6;
209
+ }
210
+
211
+ //Gray
212
+
213
+ &.gray-1{
214
+ color: variables.$color-gray-3;
215
+ }
216
+
217
+ &.gray-2{
218
+ color: variables.$color-gray-2;
219
+ }
220
+
221
+ &.gray-3{
222
+ color: variables.$color-gray-1;
223
+ }
224
+ }
225
+ }