@apipass/inputs 1.0.8 → 1.0.9

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 (28) hide show
  1. package/assets/css/colors.scss +34 -34
  2. package/assets/css/fonts.scss +24 -24
  3. package/assets/css/inputs.scss +245 -245
  4. package/assets/css/pt_sans.scss +143 -143
  5. package/assets/css/spacing.scss +28 -28
  6. package/assets/css/texts.scss +18 -18
  7. package/esm2022/ace-editor/component.mjs +1 -1
  8. package/esm2022/ace-editor/directive.mjs +1 -1
  9. package/esm2022/custom-select/custom-select-item.mjs +1 -1
  10. package/esm2022/custom-select/custom-select.component.mjs +3 -3
  11. package/esm2022/debounce-model-directive/debouceInput.directive.mjs +1 -1
  12. package/esm2022/field/field.component.mjs +27 -27
  13. package/esm2022/input-avatar/input-avatar.component.mjs +3 -3
  14. package/esm2022/input-boolean/input-boolean.component.mjs +3 -3
  15. package/esm2022/input-file/input-file.component.mjs +3 -3
  16. package/esm2022/input-number/input-number.component.mjs +3 -3
  17. package/esm2022/input-password/input-password.component.mjs +3 -3
  18. package/esm2022/input-text/input-text.component.mjs +3 -3
  19. package/esm2022/inputs.module.mjs +1 -1
  20. package/esm2022/public-api.mjs +1 -1
  21. package/esm2022/select-box/mat-select-infinite-scroll.directive.mjs +1 -1
  22. package/esm2022/select-box/select-box.component.mjs +3 -3
  23. package/esm2022/select-enum/select-enum.component.mjs +3 -3
  24. package/esm2022/select-interpolation/select-interpolation.component.mjs +3 -3
  25. package/esm2022/value-acessor-base.mjs +1 -1
  26. package/fesm2022/apipass-inputs.mjs +46 -46
  27. package/fesm2022/apipass-inputs.mjs.map +1 -1
  28. package/package.json +11 -2
package/assets/css/colors.scss CHANGED
@@ -1,34 +1,34 @@
1
- :root {
2
- --color-primary: #222D57;
3
- --color-primary-hover: #18203D;
4
- --color-primary-active: #29376A;
5
-
6
- --color-secondary: #D3D921;
7
- --color-secondary-hover: #B3B81C;
8
- --color-secondary-active: #DCE13F;
9
-
10
- --color-tertiary: #EFEFEF;
11
- --color-tertiary-hover: #CBCBCB;
12
- --color-tertiary-active: #F1F1F1;
13
-
14
- --color-fonts-tertiary: #777777;
15
-
16
-
17
-
18
-
19
- // Defaults
20
- --color-body-light: #FFF;
21
- --color-red: rgb(255, 0, 0);
22
- --limit-plan-color: #ff6c00;
23
- --color_disabled: #E0E0E0;
24
- --color_components_light: #FFF;
25
- --color-inputs-border: #DDD;
26
- --color-inputs-background: #FFF;
27
- --color_icon_remove: var(--color-red);
28
- --color_icon_success: #070;
29
- --color_graph_primary: #1643EF;
30
- --color_graph_primary_hover: #0A2692;
31
- --color_graph_error: #EB5757;
32
- --color_graph_error_hover: #C91717;
33
-
34
- }
1
+ :root {
2
+ --color-primary: #222D57;
3
+ --color-primary-hover: #18203D;
4
+ --color-primary-active: #29376A;
5
+
6
+ --color-secondary: #D3D921;
7
+ --color-secondary-hover: #B3B81C;
8
+ --color-secondary-active: #DCE13F;
9
+
10
+ --color-tertiary: #EFEFEF;
11
+ --color-tertiary-hover: #CBCBCB;
12
+ --color-tertiary-active: #F1F1F1;
13
+
14
+ --color-fonts-tertiary: #777777;
15
+
16
+
17
+
18
+
19
+ // Defaults
20
+ --color-body-light: #FFF;
21
+ --color-red: rgb(255, 0, 0);
22
+ --limit-plan-color: #ff6c00;
23
+ --color_disabled: #E0E0E0;
24
+ --color_components_light: #FFF;
25
+ --color-inputs-border: #DDD;
26
+ --color-inputs-background: #FFF;
27
+ --color_icon_remove: var(--color-red);
28
+ --color_icon_success: #070;
29
+ --color_graph_primary: #1643EF;
30
+ --color_graph_primary_hover: #0A2692;
31
+ --color_graph_error: #EB5757;
32
+ --color_graph_error_hover: #C91717;
33
+
34
+ }
package/assets/css/fonts.scss CHANGED
@@ -1,24 +1,24 @@
1
- $base-font-size: 14px;
2
- $base-input-font-size: $base-font-size;
3
-
4
- @import "pt_sans";
5
-
6
- .text-primary {
7
- color: var(--color-primary) !important;
8
- }
9
-
10
- .text-secondary {
11
- color: var(--color-secondary) !important;
12
- }
13
-
14
- .text-tertiary {
15
- color: var(--color-fonts-tertiary) !important;
16
- }
17
-
18
- .text-weight-bold {
19
- font-weight: bold !important;
20
- }
21
-
22
- .text-weight-normal {
23
- font-weight: normal !important;
24
- }
1
+ $base-font-size: 14px;
2
+ $base-input-font-size: $base-font-size;
3
+
4
+ @import "pt_sans";
5
+
6
+ .text-primary {
7
+ color: var(--color-primary) !important;
8
+ }
9
+
10
+ .text-secondary {
11
+ color: var(--color-secondary) !important;
12
+ }
13
+
14
+ .text-tertiary {
15
+ color: var(--color-fonts-tertiary) !important;
16
+ }
17
+
18
+ .text-weight-bold {
19
+ font-weight: bold !important;
20
+ }
21
+
22
+ .text-weight-normal {
23
+ font-weight: normal !important;
24
+ }
package/assets/css/inputs.scss CHANGED
@@ -1,245 +1,245 @@
1
- @import "colors";
2
- @import "fonts";
3
- @import "spacing";
4
-
5
- /* Default Inputs */
6
- .mat-mdc-form-field-subscript-wrapper {
7
- display: none;
8
- }
9
-
10
- .mat-form-field-appearance-fill .mdc-text-field {
11
- display: flex!important;
12
- align-items: center!important;
13
- border: 1px solid var(--color-inputs-border) !important;
14
- background: var(--color-inputs-background) !important;
15
- border-radius: 6px !important;
16
- }
17
-
18
- .mat-form-field-infix {
19
- padding: 0 !important;
20
- display: flex!important;
21
- align-items: center!important;
22
- border-top: none!important;
23
- }
24
-
25
- .mat-select-arrow-wrapper {
26
- display: flex!important;
27
- }
28
-
29
- .mat-icon-button {
30
- width: auto!important;
31
- }
32
-
33
- .no-border {
34
- .mdc-text-field {
35
- border: none !important;
36
- input {
37
- padding: 1px;
38
- }
39
- }
40
- }
41
-
42
- .mat-form-field-label-wrapper {
43
- top: -10px;
44
- }
45
-
46
- .mat-form-field-should-float .mat-form-field-label-wrapper {
47
- font-size: $base-font-size;
48
- }
49
-
50
- .placeholder-primary {
51
- .mat-form-field-label-wrapper {
52
- color: var(--color-primary) !important;
53
- label {
54
- color: var(--color-primary) !important;
55
- }
56
- }
57
- ::ng-deep .mat-form-field-placeholder, .mat-form-field-placeholder {
58
- color: var(--color-primary) !important;
59
- }
60
- ::ng-deep .mat-focused .mat-form-field-placeholder, .mat-focused .mat-form-field-placeholder {
61
- color: var(--color-primary) !important;
62
- }
63
- input {
64
- ::-webkit-input-placeholder { /* Edge */
65
- color: var(--color-primary) !important;
66
- }
67
- :-ms-input-placeholder { /* Internet Explorer 10-11 */
68
- color: var(--color-primary) !important;
69
- }
70
- ::placeholder {
71
- color: var(--color-primary) !important;
72
- }
73
- }
74
- }
75
-
76
- .placeholder-bold {
77
- .mat-form-field-label-wrapper {
78
- font-weight: bold !important;
79
- label {
80
- font-weight: bold !important;
81
- }
82
- }
83
- ::ng-deep .mat-form-field-placeholder, .mat-form-field-placeholder {
84
- font-weight: bold !important;
85
- }
86
- ::ng-deep .mat-focused .mat-form-field-placeholder, .mat-focused .mat-form-field-placeholder {
87
- font-weight: bold !important;
88
- }
89
- input {
90
- ::-webkit-input-placeholder { /* Edge */
91
- font-weight: bold !important;
92
- }
93
- :-ms-input-placeholder { /* Internet Explorer 10-11 */
94
- font-weight: bold !important;
95
- }
96
- ::placeholder {
97
- font-weight: bold !important;
98
- }
99
- }
100
- }
101
-
102
- /* Inputs */
103
- .apipass-input-text {
104
- width: 100%;
105
- height: 51px;
106
- &.search-input-item {
107
- height: 40px !important;
108
- .search-input-item {
109
- margin-top: 5px;
110
- }
111
- }
112
- .mat-mdc-form-field-flex {
113
- padding: 0!important;
114
- height: auto;
115
- }
116
- }
117
-
118
- .apipass-input-text,
119
- .apipass-search-input-text,
120
- .custom-select-component,
121
- .apipass-select,
122
- .apipass-date-filter {
123
-
124
- .mdc-line-ripple:before {
125
- border-bottom-color: transparent !important;
126
- }
127
-
128
- .mdc-line-ripple:after {
129
- border-bottom-color: var(--color-primary-active);
130
- }
131
-
132
- .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
133
- color: var(--color-primary-active);
134
- }
135
-
136
- .mat-mdc-form-field-infix {
137
- padding-top: 12px !important;
138
- padding-bottom: 0 !important;
139
- font-size: $base-font-size !important;
140
- }
141
- .mat-icon-button {
142
- width: auto!important;
143
- height: auto!important;
144
- }
145
-
146
- &.label-input {
147
- .mat-form-field-label-wrapper {
148
- padding-top: 0;
149
- top: auto !important;
150
- }
151
- input {
152
- padding-top: 10px !important;
153
- padding-bottom: 5px !important;
154
- }
155
- }
156
- &.mat-form-field-should-float {
157
- .mat-form-field-label-wrapper {
158
- padding-top: 0 !important;
159
- margin-top: -10px !important;
160
- }
161
- }
162
-
163
- .mat-mdc-form-field-focus-overlay {
164
- opacity: 0 !important;
165
- }
166
-
167
- }
168
-
169
-
170
- .apipass-search-input-text {
171
- width: 100%;
172
-
173
- &.small-text {
174
- font-size: $base-font-size - 2px;
175
- }
176
- .mat-mdc-form-field-flex {
177
- padding: 0!important;
178
- height: auto;
179
- border-top: none !important;
180
- border-left: none !important;
181
- border-right: none !important;
182
- border-radius: 0 !important;
183
- }
184
- .search-icon {
185
- margin-top: -5px !important;
186
- }
187
-
188
- }
189
-
190
- .custom-select-component {
191
- width: 100%;
192
- height: 51px;
193
- .mat-mdc-form-field-flex {
194
- padding: 0 !important;
195
- height: auto;
196
- }
197
- .mat-mdc-form-field-infix {
198
- padding-top: 0 !important;
199
- padding-bottom: 0 !important;
200
- font-size: 14px !important;
201
- width: 100%;
202
- display: flex;
203
- align-items: center;
204
- justify-content: center;
205
- }
206
-
207
- mat-form-field {
208
- height: 20px !important;
209
- }
210
- }
211
-
212
- .apipass-select {
213
- width: 100%;
214
- .mat-mdc-form-field-flex {
215
- padding: 0!important;
216
- height: auto;
217
- }
218
- &.label-input {
219
- .mat-form-field-infix {
220
- padding-top: 7px !important;
221
- padding-bottom: 7px !important;
222
- }
223
- }
224
- }
225
-
226
- .apipass-date-filter {
227
- width: 100%;
228
- .mat-mdc-form-field-flex {
229
- padding: 0!important;
230
- height: auto;
231
- }
232
- .mat-form-field-suffix {
233
- span {
234
- cursor: pointer;
235
- color: #777;
236
- }
237
- }
238
- .mat-mdc-form-field-infix {
239
- padding-top: 12px !important;
240
- padding-bottom: 0 !important;
241
- height: 51px !important;
242
- max-height: 51px !important;
243
- min-height: 51px !important;
244
- }
245
- }
1
+ @import "colors";
2
+ @import "fonts";
3
+ @import "spacing";
4
+
5
+ /* Default Inputs */
6
+ .mat-mdc-form-field-subscript-wrapper {
7
+ display: none;
8
+ }
9
+
10
+ .mat-form-field-appearance-fill .mdc-text-field {
11
+ display: flex!important;
12
+ align-items: center!important;
13
+ border: 1px solid var(--color-inputs-border) !important;
14
+ background: var(--color-inputs-background) !important;
15
+ border-radius: 6px !important;
16
+ }
17
+
18
+ .mat-form-field-infix {
19
+ padding: 0 !important;
20
+ display: flex!important;
21
+ align-items: center!important;
22
+ border-top: none!important;
23
+ }
24
+
25
+ .mat-select-arrow-wrapper {
26
+ display: flex!important;
27
+ }
28
+
29
+ .mat-icon-button {
30
+ width: auto!important;
31
+ }
32
+
33
+ .no-border {
34
+ .mdc-text-field {
35
+ border: none !important;
36
+ input {
37
+ padding: 1px;
38
+ }
39
+ }
40
+ }
41
+
42
+ .mat-form-field-label-wrapper {
43
+ top: -10px;
44
+ }
45
+
46
+ .mat-form-field-should-float .mat-form-field-label-wrapper {
47
+ font-size: $base-font-size;
48
+ }
49
+
50
+ .placeholder-primary {
51
+ .mat-form-field-label-wrapper {
52
+ color: var(--color-primary) !important;
53
+ label {
54
+ color: var(--color-primary) !important;
55
+ }
56
+ }
57
+ ::ng-deep .mat-form-field-placeholder, .mat-form-field-placeholder {
58
+ color: var(--color-primary) !important;
59
+ }
60
+ ::ng-deep .mat-focused .mat-form-field-placeholder, .mat-focused .mat-form-field-placeholder {
61
+ color: var(--color-primary) !important;
62
+ }
63
+ input {
64
+ ::-webkit-input-placeholder { /* Edge */
65
+ color: var(--color-primary) !important;
66
+ }
67
+ :-ms-input-placeholder { /* Internet Explorer 10-11 */
68
+ color: var(--color-primary) !important;
69
+ }
70
+ ::placeholder {
71
+ color: var(--color-primary) !important;
72
+ }
73
+ }
74
+ }
75
+
76
+ .placeholder-bold {
77
+ .mat-form-field-label-wrapper {
78
+ font-weight: bold !important;
79
+ label {
80
+ font-weight: bold !important;
81
+ }
82
+ }
83
+ ::ng-deep .mat-form-field-placeholder, .mat-form-field-placeholder {
84
+ font-weight: bold !important;
85
+ }
86
+ ::ng-deep .mat-focused .mat-form-field-placeholder, .mat-focused .mat-form-field-placeholder {
87
+ font-weight: bold !important;
88
+ }
89
+ input {
90
+ ::-webkit-input-placeholder { /* Edge */
91
+ font-weight: bold !important;
92
+ }
93
+ :-ms-input-placeholder { /* Internet Explorer 10-11 */
94
+ font-weight: bold !important;
95
+ }
96
+ ::placeholder {
97
+ font-weight: bold !important;
98
+ }
99
+ }
100
+ }
101
+
102
+ /* Inputs */
103
+ .apipass-input-text {
104
+ width: 100%;
105
+ height: 51px;
106
+ &.search-input-item {
107
+ height: 40px !important;
108
+ .search-input-item {
109
+ margin-top: 5px;
110
+ }
111
+ }
112
+ .mat-mdc-form-field-flex {
113
+ padding: 0!important;
114
+ height: auto;
115
+ }
116
+ }
117
+
118
+ .apipass-input-text,
119
+ .apipass-search-input-text,
120
+ .custom-select-component,
121
+ .apipass-select,
122
+ .apipass-date-filter {
123
+
124
+ .mdc-line-ripple:before {
125
+ border-bottom-color: transparent !important;
126
+ }
127
+
128
+ .mdc-line-ripple:after {
129
+ border-bottom-color: var(--color-primary-active);
130
+ }
131
+
132
+ .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
133
+ color: var(--color-primary-active);
134
+ }
135
+
136
+ .mat-mdc-form-field-infix {
137
+ padding-top: 12px !important;
138
+ padding-bottom: 0 !important;
139
+ font-size: $base-font-size !important;
140
+ }
141
+ .mat-icon-button {
142
+ width: auto!important;
143
+ height: auto!important;
144
+ }
145
+
146
+ &.label-input {
147
+ .mat-form-field-label-wrapper {
148
+ padding-top: 0;
149
+ top: auto !important;
150
+ }
151
+ input {
152
+ padding-top: 10px !important;
153
+ padding-bottom: 5px !important;
154
+ }
155
+ }
156
+ &.mat-form-field-should-float {
157
+ .mat-form-field-label-wrapper {
158
+ padding-top: 0 !important;
159
+ margin-top: -10px !important;
160
+ }
161
+ }
162
+
163
+ .mat-mdc-form-field-focus-overlay {
164
+ opacity: 0 !important;
165
+ }
166
+
167
+ }
168
+
169
+
170
+ .apipass-search-input-text {
171
+ width: 100%;
172
+
173
+ &.small-text {
174
+ font-size: $base-font-size - 2px;
175
+ }
176
+ .mat-mdc-form-field-flex {
177
+ padding: 0!important;
178
+ height: auto;
179
+ border-top: none !important;
180
+ border-left: none !important;
181
+ border-right: none !important;
182
+ border-radius: 0 !important;
183
+ }
184
+ .search-icon {
185
+ margin-top: -5px !important;
186
+ }
187
+
188
+ }
189
+
190
+ .custom-select-component {
191
+ width: 100%;
192
+ height: 51px;
193
+ .mat-mdc-form-field-flex {
194
+ padding: 0 !important;
195
+ height: auto;
196
+ }
197
+ .mat-mdc-form-field-infix {
198
+ padding-top: 0 !important;
199
+ padding-bottom: 0 !important;
200
+ font-size: 14px !important;
201
+ width: 100%;
202
+ display: flex;
203
+ align-items: center;
204
+ justify-content: center;
205
+ }
206
+
207
+ mat-form-field {
208
+ height: 20px !important;
209
+ }
210
+ }
211
+
212
+ .apipass-select {
213
+ width: 100%;
214
+ .mat-mdc-form-field-flex {
215
+ padding: 0!important;
216
+ height: auto;
217
+ }
218
+ &.label-input {
219
+ .mat-form-field-infix {
220
+ padding-top: 7px !important;
221
+ padding-bottom: 7px !important;
222
+ }
223
+ }
224
+ }
225
+
226
+ .apipass-date-filter {
227
+ width: 100%;
228
+ .mat-mdc-form-field-flex {
229
+ padding: 0!important;
230
+ height: auto;
231
+ }
232
+ .mat-form-field-suffix {
233
+ span {
234
+ cursor: pointer;
235
+ color: #777;
236
+ }
237
+ }
238
+ .mat-mdc-form-field-infix {
239
+ padding-top: 12px !important;
240
+ padding-bottom: 0 !important;
241
+ height: 51px !important;
242
+ max-height: 51px !important;
243
+ min-height: 51px !important;
244
+ }
245
+ }