@apipass/inputs 0.1.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 (42) hide show
  1. package/README.md +33 -0
  2. package/apipass-inputs.d.ts +6 -0
  3. package/apipass-inputs.metadata.json +1 -0
  4. package/assets/css/buttons.scss +112 -0
  5. package/assets/css/colors.scss +34 -0
  6. package/assets/css/fonts.scss +24 -0
  7. package/assets/css/inputs.scss +197 -0
  8. package/assets/css/pt_sans.scss +144 -0
  9. package/assets/css/spacing.scss +28 -0
  10. package/assets/css/texts.scss +18 -0
  11. package/bundles/apipass-inputs.umd.js +1044 -0
  12. package/bundles/apipass-inputs.umd.js.map +1 -0
  13. package/bundles/apipass-inputs.umd.min.js +16 -0
  14. package/bundles/apipass-inputs.umd.min.js.map +1 -0
  15. package/custom-select/custom-select-item.d.ts +5 -0
  16. package/custom-select/custom-select.component.d.ts +38 -0
  17. package/esm2015/apipass-inputs.js +7 -0
  18. package/esm2015/custom-select/custom-select-item.js +7 -0
  19. package/esm2015/custom-select/custom-select.component.js +147 -0
  20. package/esm2015/field/field.component.js +33 -0
  21. package/esm2015/input-avatar/input-avatar.component.js +77 -0
  22. package/esm2015/input-password/input-password.component.js +75 -0
  23. package/esm2015/input-text/input-text.component.js +50 -0
  24. package/esm2015/inputs.module.js +68 -0
  25. package/esm2015/public-api.js +10 -0
  26. package/esm2015/select-box/mat-select-infinite-scroll.directive.js +83 -0
  27. package/esm2015/select-box/select-box.component.js +132 -0
  28. package/esm2015/select-enum/select-enum.component.js +38 -0
  29. package/esm2015/value-acessor-base.js +31 -0
  30. package/fesm2015/apipass-inputs.js +719 -0
  31. package/fesm2015/apipass-inputs.js.map +1 -0
  32. package/field/field.component.d.ts +12 -0
  33. package/input-avatar/input-avatar.component.d.ts +26 -0
  34. package/input-password/input-password.component.d.ts +26 -0
  35. package/input-text/input-text.component.d.ts +14 -0
  36. package/inputs.module.d.ts +2 -0
  37. package/package.json +40 -0
  38. package/public-api.d.ts +9 -0
  39. package/select-box/mat-select-infinite-scroll.directive.d.ts +23 -0
  40. package/select-box/select-box.component.d.ts +40 -0
  41. package/select-enum/select-enum.component.d.ts +9 -0
  42. package/value-acessor-base.d.ts +13 -0
package/assets/css/inputs.scss ADDED
@@ -0,0 +1,197 @@
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
+ }
package/assets/css/pt_sans.scss ADDED
@@ -0,0 +1,144 @@
1
+ /* cyrillic-ext */
2
+ @font-face {
3
+ font-family: 'PT Sans';
4
+ font-style: italic;
5
+ font-weight: 400;
6
+ font-display: swap;
7
+ src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0ysmIEDQ.woff2) format('woff2');
8
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
9
+ }
10
+ /* cyrillic */
11
+ @font-face {
12
+ font-family: 'PT Sans';
13
+ font-style: italic;
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0w8mIEDQ.woff2) format('woff2');
17
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
18
+ }
19
+ /* latin-ext */
20
+ @font-face {
21
+ font-family: 'PT Sans';
22
+ font-style: italic;
23
+ font-weight: 400;
24
+ font-display: swap;
25
+ src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0ycmIEDQ.woff2) format('woff2');
26
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
27
+ }
28
+ /* latin */
29
+ @font-face {
30
+ font-family: 'PT Sans';
31
+ font-style: italic;
32
+ font-weight: 400;
33
+ font-display: swap;
34
+ src: local('PT Sans Italic'), local('PTSans-Italic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0x8mI.woff2) format('woff2');
35
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
36
+ }
37
+ /* cyrillic-ext */
38
+ @font-face {
39
+ font-family: 'PT Sans';
40
+ font-style: italic;
41
+ font-weight: 700;
42
+ font-display: swap;
43
+ src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydIhUdwzM.woff2) format('woff2');
44
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
45
+ }
46
+ /* cyrillic */
47
+ @font-face {
48
+ font-family: 'PT Sans';
49
+ font-style: italic;
50
+ font-weight: 700;
51
+ font-display: swap;
52
+ src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydKxUdwzM.woff2) format('woff2');
53
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
54
+ }
55
+ /* latin-ext */
56
+ @font-face {
57
+ font-family: 'PT Sans';
58
+ font-style: italic;
59
+ font-weight: 700;
60
+ font-display: swap;
61
+ src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydIRUdwzM.woff2) format('woff2');
62
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
63
+ }
64
+ /* latin */
65
+ @font-face {
66
+ font-family: 'PT Sans';
67
+ font-style: italic;
68
+ font-weight: 700;
69
+ font-display: swap;
70
+ src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydLxUd.woff2) format('woff2');
71
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
72
+ }
73
+ /* cyrillic-ext */
74
+ @font-face {
75
+ font-family: 'PT Sans';
76
+ font-style: normal;
77
+ font-weight: 400;
78
+ font-display: swap;
79
+ src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0-ExdGM.woff2) format('woff2');
80
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
81
+ }
82
+ /* cyrillic */
83
+ @font-face {
84
+ font-family: 'PT Sans';
85
+ font-style: normal;
86
+ font-weight: 400;
87
+ font-display: swap;
88
+ src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0aExdGM.woff2) format('woff2');
89
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
90
+ }
91
+ /* latin-ext */
92
+ @font-face {
93
+ font-family: 'PT Sans';
94
+ font-style: normal;
95
+ font-weight: 400;
96
+ font-display: swap;
97
+ src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0yExdGM.woff2) format('woff2');
98
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
99
+ }
100
+ /* latin */
101
+ @font-face {
102
+ font-family: 'PT Sans';
103
+ font-style: normal;
104
+ font-weight: 400;
105
+ font-display: swap;
106
+ src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0KExQ.woff2) format('woff2');
107
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
108
+ }
109
+ /* cyrillic-ext */
110
+ @font-face {
111
+ font-family: 'PT Sans';
112
+ font-style: normal;
113
+ font-weight: 700;
114
+ font-display: swap;
115
+ src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0OOtLQ0Z.woff2) format('woff2');
116
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
117
+ }
118
+ /* cyrillic */
119
+ @font-face {
120
+ font-family: 'PT Sans';
121
+ font-style: normal;
122
+ font-weight: 700;
123
+ font-display: swap;
124
+ src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0OqtLQ0Z.woff2) format('woff2');
125
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
126
+ }
127
+ /* latin-ext */
128
+ @font-face {
129
+ font-family: 'PT Sans';
130
+ font-style: normal;
131
+ font-weight: 700;
132
+ font-display: swap;
133
+ src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0OCtLQ0Z.woff2) format('woff2');
134
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
135
+ }
136
+ /* latin */
137
+ @font-face {
138
+ font-family: 'PT Sans';
139
+ font-style: normal;
140
+ font-weight: 700;
141
+ font-display: swap;
142
+ src: local('PT Sans Bold'), local('PTSans-Bold'), url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0O6tLQ.woff2) format('woff2');
143
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
144
+ }
package/assets/css/spacing.scss ADDED
@@ -0,0 +1,28 @@
1
+ // Input
2
+ $spacing-input-top: 10px;
3
+ $spacing-input-right: 10px;
4
+ $spacing-input-bottom: 10px;
5
+ $spacing-input-left: 10px;
6
+
7
+ // Date Filter
8
+ $spacing-date-filter-top: 7px;
9
+ $spacing-date-filter-right: 10px;
10
+ $spacing-date-filter-bottom: 7px;
11
+ $spacing-date-filter-left: 10px;
12
+
13
+ // Select
14
+ $spacing-select-top: 10px;
15
+ $spacing-select-right: 5px;
16
+ $spacing-select-bottom: 10px;
17
+ $spacing-select-left: 10px;
18
+
19
+ // Buttons
20
+ $spacing-button-top: 7px;
21
+ $spacing-button-right: 15px;
22
+ $spacing-button-bottom: 7px;
23
+ $spacing-button-left: 15px;
24
+
25
+ $spacing-tab-button-top: 8px;
26
+ $spacing-tab-button-right: 40px;
27
+ $spacing-tab-button-bottom: 8px;
28
+ $spacing-tab-button-left: 40px;
package/assets/css/texts.scss ADDED
@@ -0,0 +1,18 @@
1
+ @import "colors";
2
+
3
+ .text-color-primary {
4
+ color: var(--color-primary);
5
+ }
6
+
7
+ .text-color-secondary {
8
+ color: var(--color-secondary);
9
+ }
10
+
11
+ .text-color-tertiary {
12
+ color: var(--color-fonts-tertiary);
13
+ }
14
+
15
+ .font-black {
16
+ color: #000 !important;
17
+ }
18
+