otimus-library 0.2.99 → 0.3.2

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 (22) hide show
  1. package/README.md +26 -26
  2. package/fesm2022/otimus-library.mjs +182 -69
  3. package/fesm2022/otimus-library.mjs.map +1 -1
  4. package/index.d.ts +6 -2
  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 +212 -212
  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/grid.scss +1122 -1122
  16. package/styles/patterns/shui/colors.shui.scss +154 -154
  17. package/styles/patterns/shui/fonts.shui.scss +65 -65
  18. package/styles/patterns/shui/index.shui.scss +24 -24
  19. package/styles/patterns/shui/variables.shui.scss +23 -23
  20. package/styles/states.scss +5 -5
  21. package/styles/styles.scss +46 -46
  22. package/styles/variables.scss +47 -47
package/index.d.ts CHANGED
@@ -186,6 +186,7 @@ declare class OcChipComponent {
186
186
  ocSelected: boolean;
187
187
  ocType: 'select' | 'remove' | 'tag' | 'select_remove';
188
188
  ocBg: 'green' | 'red' | 'yellow' | 'default';
189
+ ocBgHexColor?: string;
189
190
  ocText: string;
190
191
  ocFontSize: string;
191
192
  ocClick: EventEmitter<any>;
@@ -193,7 +194,7 @@ declare class OcChipComponent {
193
194
  ocEvent(event: any): void;
194
195
  ocRemoveEvent(event: any): void;
195
196
  static ɵfac: i0.ɵɵFactoryDeclaration<OcChipComponent, never>;
196
- static ɵcmp: i0.ɵɵComponentDeclaration<OcChipComponent, "oc-chip", never, { "ocSelected": { "alias": "ocSelected"; "required": false; }; "ocType": { "alias": "ocType"; "required": false; }; "ocBg": { "alias": "ocBg"; "required": false; }; "ocText": { "alias": "ocText"; "required": false; }; "ocFontSize": { "alias": "ocFontSize"; "required": false; }; }, { "ocClick": "ocClick"; "ocRemove": "ocRemove"; }, never, ["*"], true, never>;
197
+ static ɵcmp: i0.ɵɵComponentDeclaration<OcChipComponent, "oc-chip", never, { "ocSelected": { "alias": "ocSelected"; "required": false; }; "ocType": { "alias": "ocType"; "required": false; }; "ocBg": { "alias": "ocBg"; "required": false; }; "ocBgHexColor": { "alias": "ocBgHexColor"; "required": false; }; "ocText": { "alias": "ocText"; "required": false; }; "ocFontSize": { "alias": "ocFontSize"; "required": false; }; }, { "ocClick": "ocClick"; "ocRemove": "ocRemove"; }, never, ["*"], true, never>;
197
198
  }
198
199
 
199
200
  declare class OcModalFooterComponent {
@@ -456,14 +457,17 @@ declare class OcTabComponent {
456
457
  static ɵcmp: i0.ɵɵComponentDeclaration<OcTabComponent, "oc-tab", never, { "ocTitle": { "alias": "ocTitle"; "required": false; }; "ocIsActive": { "alias": "ocIsActive"; "required": false; }; }, {}, never, ["*"], true, never>;
457
458
  }
458
459
 
459
- declare class OcTabsComponent implements AfterContentInit {
460
+ declare class OcTabsComponent implements AfterContentInit, OnDestroy {
460
461
  private styleThemeService;
461
462
  constructor(styleThemeService: StyleThemeService);
462
463
  ocTabs: QueryList<OcTabComponent>;
463
464
  ocStyle: OcStyleThemeType;
464
465
  ocClick: EventEmitter<void>;
465
466
  activeTabIndex: number;
467
+ private tabsChangesSubscription?;
466
468
  ngAfterContentInit(): void;
469
+ ngOnDestroy(): void;
470
+ updateTabIndices(): void;
467
471
  selectTab(index: number): void;
468
472
  handleTabClick(): void;
469
473
  static ɵfac: i0.ɵɵFactoryDeclaration<OcTabsComponent, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "otimus-library",
3
- "version": "0.2.99",
3
+ "version": "0.3.2",
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: 0.5rem;
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: 0.5rem;
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';