@apipass/inputs 0.2.16 → 1.0.1

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 (71) hide show
  1. package/ace-editor/component.d.ts +52 -52
  2. package/ace-editor/directive.d.ts +39 -39
  3. package/assets/css/colors.scss +34 -34
  4. package/assets/css/fonts.scss +24 -24
  5. package/assets/css/inputs.scss +245 -197
  6. package/assets/css/pt_sans.scss +143 -143
  7. package/assets/css/spacing.scss +28 -28
  8. package/assets/css/texts.scss +18 -18
  9. package/custom-select/custom-select-item.d.ts +5 -5
  10. package/custom-select/custom-select.component.d.ts +51 -51
  11. package/debounce-model-directive/debouceInput.directive.d.ts +14 -14
  12. package/{esm2015/ace-editor/component.js → esm2020/ace-editor/component.mjs} +199 -204
  13. package/{esm2015/ace-editor/directive.js → esm2020/ace-editor/directive.mjs} +150 -150
  14. package/{esm2015/apipass-inputs.js → esm2020/apipass-inputs.mjs} +4 -4
  15. package/{esm2015/custom-select/custom-select-item.js → esm2020/custom-select/custom-select-item.mjs} +7 -7
  16. package/esm2020/custom-select/custom-select.component.mjs +204 -0
  17. package/esm2020/debounce-model-directive/debouceInput.directive.mjs +31 -0
  18. package/esm2020/field/field.component.mjs +51 -0
  19. package/esm2020/input-avatar/input-avatar.component.mjs +92 -0
  20. package/esm2020/input-boolean/input-boolean.component.mjs +56 -0
  21. package/esm2020/input-file/input-file.component.mjs +82 -0
  22. package/esm2020/input-number/input-number.component.mjs +62 -0
  23. package/esm2020/input-password/input-password.component.mjs +96 -0
  24. package/esm2020/input-text/input-text.component.mjs +62 -0
  25. package/esm2020/inputs.module.mjs +149 -0
  26. package/{esm2015/public-api.js → esm2020/public-api.mjs} +17 -17
  27. package/{esm2015/select-box/mat-select-infinite-scroll.directive.js → esm2020/select-box/mat-select-infinite-scroll.directive.mjs} +86 -86
  28. package/esm2020/select-box/select-box.component.mjs +220 -0
  29. package/esm2020/select-enum/select-enum.component.mjs +48 -0
  30. package/esm2020/select-interpolation/select-interpolation.component.mjs +169 -0
  31. package/{esm2015/value-acessor-base.js → esm2020/value-acessor-base.mjs} +31 -31
  32. package/fesm2015/apipass-inputs.mjs +1704 -0
  33. package/fesm2015/apipass-inputs.mjs.map +1 -0
  34. package/fesm2020/apipass-inputs.mjs +1697 -0
  35. package/fesm2020/apipass-inputs.mjs.map +1 -0
  36. package/field/field.component.d.ts +15 -15
  37. package/{apipass-inputs.d.ts → index.d.ts} +5 -5
  38. package/input-avatar/input-avatar.component.d.ts +29 -29
  39. package/input-boolean/input-boolean.component.d.ts +15 -15
  40. package/input-file/input-file.component.d.ts +31 -31
  41. package/input-number/input-number.component.d.ts +17 -17
  42. package/input-password/input-password.component.d.ts +29 -29
  43. package/input-text/input-text.component.d.ts +17 -17
  44. package/inputs.module.d.ts +36 -36
  45. package/package.json +38 -29
  46. package/public-api.d.ts +16 -16
  47. package/select-box/mat-select-infinite-scroll.directive.d.ts +26 -26
  48. package/select-box/select-box.component.d.ts +57 -57
  49. package/select-enum/select-enum.component.d.ts +12 -12
  50. package/select-interpolation/select-interpolation.component.d.ts +44 -44
  51. package/value-acessor-base.d.ts +13 -13
  52. package/assets/css/buttons.scss +0 -118
  53. package/bundles/apipass-inputs.umd.js +0 -3060
  54. package/bundles/apipass-inputs.umd.js.map +0 -1
  55. package/bundles/apipass-inputs.umd.min.js +0 -16
  56. package/bundles/apipass-inputs.umd.min.js.map +0 -1
  57. package/esm2015/custom-select/custom-select.component.js +0 -310
  58. package/esm2015/debounce-model-directive/debouceInput.directive.js +0 -31
  59. package/esm2015/field/field.component.js +0 -92
  60. package/esm2015/input-avatar/input-avatar.component.js +0 -167
  61. package/esm2015/input-boolean/input-boolean.component.js +0 -77
  62. package/esm2015/input-file/input-file.component.js +0 -133
  63. package/esm2015/input-number/input-number.component.js +0 -118
  64. package/esm2015/input-password/input-password.component.js +0 -159
  65. package/esm2015/input-text/input-text.component.js +0 -118
  66. package/esm2015/inputs.module.js +0 -155
  67. package/esm2015/select-box/select-box.component.js +0 -367
  68. package/esm2015/select-enum/select-enum.component.js +0 -95
  69. package/esm2015/select-interpolation/select-interpolation.component.js +0 -248
  70. package/fesm2015/apipass-inputs.js +0 -2434
  71. package/fesm2015/apipass-inputs.js.map +0 -1
package/assets/css/inputs.scss CHANGED
@@ -1,197 +1,245 @@
1
- @import "colors";
2
- @import "fonts";
3
- @import "spacing";
4
-
5
- /* Default Inputs */
6
- .mat-input-underline, .mat-form-field-underline {
7
- display: none;
8
- }
9
-
10
- .mat-form-field-appearance-fill .mat-form-field-flex {
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
- .mat-form-field-flex {
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
- .mat-form-field-flex {
106
- padding: $spacing-input-top $spacing-input-right $spacing-input-bottom $spacing-input-left !important;
107
- }
108
- }
109
-
110
- .apipass-input-text,
111
- .apipass-search-input-text,
112
- .custom-select-component,
113
- .apipass-select,
114
- .apipass-date-filter {
115
-
116
- .mat-form-field-wrapper {
117
- padding: 0 !important;
118
- }
119
- .mat-icon-button {
120
- width: auto!important;
121
- height: auto!important;
122
- }
123
-
124
- &.label-input {
125
- .mat-form-field-label-wrapper {
126
- padding-top: 0;
127
- top: auto !important;
128
- }
129
- input {
130
- padding-top: 10px !important;
131
- padding-bottom: 5px !important;
132
- }
133
- }
134
- &.mat-form-field-should-float {
135
- .mat-form-field-label-wrapper {
136
- padding-top: 0 !important;
137
- margin-top: -10px !important;
138
- }
139
- }
140
-
141
- }
142
-
143
-
144
- .apipass-search-input-text {
145
- width: 100%;
146
-
147
- &.small-text {
148
- font-size: $base-font-size - 2px;
149
- }
150
- .mat-form-field-flex {
151
- padding: 2px 5px 2px 2px !important;
152
- border-top: none !important;
153
- border-left: none !important;
154
- border-right: none !important;
155
- border-radius: 0 !important;
156
- }
157
- .search-icon {
158
- margin-top: -5px !important;
159
- }
160
-
161
- }
162
-
163
- .custom-select-component {
164
- width: 100%;
165
- .mat-form-field-flex {
166
- padding: 1px $spacing-input-right 1px $spacing-input-left !important;
167
- }
168
- }
169
-
170
- .apipass-select {
171
- width: 100%;
172
- .mat-form-field-flex {
173
- padding: $spacing-select-top $spacing-select-right $spacing-select-bottom $spacing-select-left !important;
174
- }
175
- &.label-input {
176
- .mat-form-field-infix {
177
- padding-top: 7px !important;
178
- padding-bottom: 7px !important;
179
- }
180
- }
181
- }
182
-
183
- .apipass-date-filter {
184
- width: 100%;
185
- .mat-form-field-flex {
186
- padding: $spacing-date-filter-top $spacing-date-filter-right $spacing-date-filter-bottom $spacing-date-filter-left !important;
187
- }
188
- .mat-form-field-suffix {
189
- span {
190
- cursor: pointer;
191
- color: #777;
192
- }
193
- }
194
- .mat-form-field-wrapper {
195
- padding-bottom: 0 !important;
196
- }
197
- }
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
+ }