nexheal-lib 0.0.32 → 0.0.34

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 (5) hide show
  1. package/fesm2022/nexheal-lib.mjs +6 -6
  2. package/fesm2022/nexheal-lib.mjs.map +1 -1
  3. package/index.d.ts +2 -2
  4. package/package.json +1 -1
  5. package/src/styles/_formcontrols.scss +83 -15
package/index.d.ts CHANGED
@@ -87,12 +87,12 @@ declare class CalendarControl implements ControlValueAccessor, OnInit, OnDestroy
87
87
  dateFormat: string;
88
88
  placeholder: string;
89
89
  viewMode: "date" | "month" | "year";
90
+ inputLoader: boolean;
90
91
  private _disabled;
91
92
  get disabled(): boolean;
92
93
  set disabled(value: boolean);
93
94
  readonly: boolean;
94
95
  submitted: boolean;
95
- inputPlaceholder: boolean;
96
96
  closeVal: boolean;
97
97
  showTime: boolean;
98
98
  selectionCleared: EventEmitter<void>;
@@ -190,7 +190,7 @@ declare class CalendarControl implements ControlValueAccessor, OnInit, OnDestroy
190
190
  closeCalendar(): void;
191
191
  clearDate(event: Event): void;
192
192
  static ɵfac: i0.ɵɵFactoryDeclaration<CalendarControl, never>;
193
- static ɵcmp: i0.ɵɵComponentDeclaration<CalendarControl, "calendar-control", never, { "title": { "alias": "title"; "required": false; }; "required": { "alias": "required"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "clearVal": { "alias": "clearVal"; "required": false; }; "deFocus": { "alias": "deFocus"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "hourFormat": { "alias": "hourFormat"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "timeOnly": { "alias": "timeOnly"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "submitted": { "alias": "submitted"; "required": false; }; "inputPlaceholder": { "alias": "inputPlaceholder"; "required": false; }; "closeVal": { "alias": "close-val"; "required": false; }; "showTime": { "alias": "showTime"; "required": false; }; "defaultDate": { "alias": "defaultDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectionCleared": "selectionCleared"; "blurEvent": "blurEvent"; "dateSelected": "dateSelected"; }, never, never, true, never>;
193
+ static ɵcmp: i0.ɵɵComponentDeclaration<CalendarControl, "calendar-control", never, { "title": { "alias": "title"; "required": false; }; "required": { "alias": "required"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "clearVal": { "alias": "clearVal"; "required": false; }; "deFocus": { "alias": "deFocus"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "hourFormat": { "alias": "hourFormat"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "timeOnly": { "alias": "timeOnly"; "required": false; }; "dateFormat": { "alias": "dateFormat"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "viewMode": { "alias": "viewMode"; "required": false; }; "inputLoader": { "alias": "inputLoader"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "submitted": { "alias": "submitted"; "required": false; }; "closeVal": { "alias": "close-val"; "required": false; }; "showTime": { "alias": "showTime"; "required": false; }; "defaultDate": { "alias": "defaultDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectionCleared": "selectionCleared"; "blurEvent": "blurEvent"; "dateSelected": "dateSelected"; }, never, never, true, never>;
194
194
  }
195
195
 
196
196
  declare class CheckboxControl implements ControlValueAccessor {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexheal-lib",
3
- "version": "0.0.32",
3
+ "version": "0.0.34",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.1.0",
6
6
  "@angular/core": "^20.1.0"
package/src/styles/_formcontrols.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  .form-group {
2
2
  position: relative;
3
3
  margin-bottom: 1.25rem;
4
+
4
5
  .inp-label {
5
6
  width: 100%;
6
7
  color: #9b9b9b;
@@ -8,6 +9,7 @@
8
9
  font-size: 0.95em;
9
10
  margin-bottom: 2px;
10
11
  position: relative;
12
+
11
13
  &.required:after {
12
14
  content: "*";
13
15
  top: -0.075em;
@@ -18,18 +20,22 @@
18
20
  position: absolute;
19
21
  }
20
22
  }
23
+
21
24
  .option-list {
22
25
  .list-item {
23
26
  padding: 5px 10px;
24
27
  cursor: pointer;
28
+
25
29
  &.highlighted {
26
30
  background-color: #f0f0f0;
27
31
  }
32
+
28
33
  &:hover {
29
34
  background-color: #e0e0e0;
30
35
  }
31
36
  }
32
37
  }
38
+
33
39
  .form-control {
34
40
  width: 100%;
35
41
  height: 42px;
@@ -49,10 +55,12 @@
49
55
  transition:
50
56
  border-color 0.15s ease-in-out,
51
57
  box-shadow 0.15s ease-in-out;
58
+
52
59
  &::placeholder {
53
60
  color: #a8a8a8;
54
61
  font-size: 1.025em;
55
62
  }
63
+
56
64
  &:disabled,
57
65
  &[readonly] {
58
66
  opacity: 1;
@@ -61,17 +69,20 @@
61
69
  background: #e7e7e7;
62
70
  }
63
71
  }
72
+
64
73
  .form-control.is-invalid,
65
74
  .is-invalid .form-control input {
66
75
  background-image: none;
67
76
  border: 0 solid transparent !important;
68
77
  border-bottom: 2px solid #ff3e1d !important;
78
+
69
79
  &:focus {
70
80
  outline: none;
71
81
  box-shadow: none;
72
82
  }
73
83
  }
74
- .form-control ~ .focus-border {
84
+
85
+ .form-control~.focus-border {
75
86
  width: 0;
76
87
  bottom: 0;
77
88
  left: 50%;
@@ -80,18 +91,22 @@
80
91
  position: absolute;
81
92
  background-color: #3399ff;
82
93
  }
83
- .form-control:focus ~ .focus-border {
94
+
95
+ .form-control:focus~.focus-border {
84
96
  left: 0;
85
97
  width: 100%;
86
98
  transition: 0.4s;
87
99
  }
88
- .form-control:focus ~ .clear {
100
+
101
+ .form-control:focus~.clear {
89
102
  opacity: 1;
90
103
  }
104
+
91
105
  .form-control[readonly] {
92
106
  user-select: none;
93
107
  background: #d0d3da;
94
108
  }
109
+
95
110
  .clear {
96
111
  top: 31px;
97
112
  right: 7px;
@@ -101,11 +116,13 @@
101
116
  padding: 2px 5px;
102
117
  position: absolute;
103
118
  background: #eff2f9;
119
+
104
120
  .he {
105
121
  font-size: 11px;
106
122
  color: #ff0000;
107
123
  }
108
124
  }
125
+
109
126
  .val-msg {
110
127
  font-size: 0.9em;
111
128
  color: #ff0000;
@@ -113,6 +130,7 @@
113
130
  position: absolute;
114
131
  letter-spacing: 0.01rem;
115
132
  }
133
+
116
134
  &.select,
117
135
  &.auto-complete,
118
136
  &.multi-select,
@@ -120,30 +138,36 @@
120
138
  .form-control {
121
139
  padding-right: 2rem;
122
140
  }
141
+
123
142
  .form-control[readonly] {
124
143
  opacity: 1;
125
144
  cursor: default;
126
145
  user-select: none;
127
146
  background: #eff2f9;
128
- &:focus ~ .focus-border {
147
+
148
+ &:focus~.focus-border {
129
149
  display: unset;
130
150
  }
131
151
  }
152
+
132
153
  .form-control[disabled] {
133
154
  opacity: 1;
134
155
  -webkit-user-select: none;
135
156
  user-select: none;
136
157
  cursor: not-allowed;
137
158
  background: #e7e7e7;
138
- &:focus ~ .focus-border {
159
+
160
+ &:focus~.focus-border {
139
161
  display: unset;
140
162
  }
141
163
  }
164
+
142
165
  .arrow {
143
166
  top: 34px;
144
167
  right: 10px;
145
168
  position: absolute;
146
169
  pointer-events: none;
170
+
147
171
  .he {
148
172
  color: inherit;
149
173
  font-size: 13px;
@@ -152,18 +176,21 @@
152
176
  font-weight: 600;
153
177
  }
154
178
  }
179
+
155
180
  .calendar-icon {
156
- top: 13px;
181
+ top: 35px;
157
182
  right: 10px;
158
183
  line-height: 1;
159
184
  position: absolute;
160
185
  pointer-events: none;
186
+
161
187
  i {
162
188
  font-size: 1rem;
163
189
  color: #2ba599;
164
190
  font-weight: 600;
165
191
  }
166
192
  }
193
+
167
194
  .option-list {
168
195
  top: 65px;
169
196
  z-index: 2;
@@ -175,6 +202,7 @@
175
202
  overflow-y: overlay;
176
203
  background: #ffffff;
177
204
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.125);
205
+
178
206
  .list-item {
179
207
  gap: 10px;
180
208
  display: flex;
@@ -185,37 +213,45 @@
185
213
  padding: 9px 10px;
186
214
  align-items: center;
187
215
  letter-spacing: 0.015rem;
216
+
188
217
  label {
189
218
  cursor: default;
190
219
  }
220
+
191
221
  img {
192
222
  box-shadow: 0px 0px 1px 0 #646363;
193
223
  }
224
+
194
225
  &:hover {
195
226
  background: #efefef;
196
227
  }
228
+
197
229
  &.active {
198
230
  color: #ffffff;
199
231
  background: #13b4a4;
200
232
  }
201
233
  }
202
234
  }
235
+
203
236
  &.list-lg {
204
237
  .option-list {
205
238
  width: 225px;
206
239
  }
207
240
  }
208
241
  }
242
+
209
243
  &.calendar.disabled {
210
244
  .form-control {
211
245
  cursor: not-allowed;
212
246
  user-select: none;
213
247
  background: #e7e7e7;
214
248
  }
249
+
215
250
  .calendar-icon i {
216
251
  color: #b0b0b0;
217
252
  }
218
253
  }
254
+
219
255
  &.input-placeholder {
220
256
  .form-control {
221
257
  &::placeholder {
@@ -224,50 +260,62 @@
224
260
  }
225
261
  }
226
262
  }
263
+
227
264
  &.no-label {
228
265
  .arrow {
229
266
  top: 11px;
230
267
  }
268
+
231
269
  .clear {
232
270
  top: 9px;
233
271
  }
272
+
234
273
  .option-list {
235
274
  top: 44px;
236
275
  }
237
276
  }
277
+
238
278
  &.group-sm {
239
279
  .form-control {
240
280
  height: 36px;
241
281
  font-size: 1em;
242
282
  }
283
+
243
284
  .arrow {
244
285
  top: 31px;
245
286
  }
287
+
246
288
  .clear {
247
289
  top: 29px;
248
290
  }
291
+
249
292
  &.no-label {
250
293
  .arrow {
251
294
  top: 8px;
252
295
  }
296
+
253
297
  .clear {
254
298
  top: 7px;
255
299
  }
256
300
  }
257
301
  }
302
+
258
303
  &.clear {
259
304
  .form-control {
260
305
  padding-right: 2rem;
261
306
  }
262
307
  }
308
+
263
309
  &.clear-right {
264
310
  .form-control {
265
311
  padding-right: 2.5rem;
266
312
  }
267
313
  }
314
+
268
315
  &.min-clear-bottom {
269
316
  margin-bottom: 0.5rem;
270
317
  }
318
+
271
319
  &.clear-bottom {
272
320
  margin-bottom: 0;
273
321
  }
@@ -291,22 +339,26 @@ input::-webkit-inner-spin-button {
291
339
  width: fit-content;
292
340
  font-size: 0.975em;
293
341
  margin-bottom: 1.25rem;
342
+
294
343
  input {
295
344
  width: 0;
296
345
  height: 0;
297
346
  opacity: 0;
298
347
  cursor: pointer;
299
348
  position: absolute;
349
+
300
350
  &:disabled {
301
- &:checked ~ .checkmark {
351
+ &:checked~.checkmark {
302
352
  opacity: 0.5;
303
353
  cursor: not-allowed;
304
354
  }
305
355
  }
306
356
  }
307
- &:hover input ~ .checkmark {
357
+
358
+ &:hover input~.checkmark {
308
359
  background-color: #727272;
309
360
  }
361
+
310
362
  .checkmark {
311
363
  top: 0;
312
364
  left: 0;
@@ -315,6 +367,7 @@ input::-webkit-inner-spin-button {
315
367
  cursor: pointer;
316
368
  position: absolute;
317
369
  background-color: #cccccc;
370
+
318
371
  &:after {
319
372
  top: 4px;
320
373
  left: 8px;
@@ -328,29 +381,37 @@ input::-webkit-inner-spin-button {
328
381
  border-width: 0 3px 3px 0;
329
382
  }
330
383
  }
331
- input:checked ~ .checkmark {
384
+
385
+ input:checked~.checkmark {
332
386
  background-color: #0d6f7d;
387
+
333
388
  &:after {
334
389
  display: block;
335
390
  }
336
391
  }
392
+
337
393
  &.checkbox-form {
338
394
  top: 31px;
339
395
  }
396
+
340
397
  &.min-clear-bottom {
341
398
  margin-bottom: 0.5rem;
342
399
  }
400
+
343
401
  &.clear-bottom {
344
402
  margin-bottom: 0;
345
403
  }
404
+
346
405
  &.blank {
347
406
  .checkmark {
348
407
  top: -11px;
349
408
  }
350
409
  }
410
+
351
411
  &.focused {
352
412
  color: #6dc0dc;
353
413
  }
414
+
354
415
  &.multi-select {
355
416
  width: 100%;
356
417
  font-size: 1em;
@@ -359,36 +420,43 @@ input::-webkit-inner-spin-button {
359
420
  color: #584e4e;
360
421
  letter-spacing: 0.015rem;
361
422
  padding: 10px 10px 10px 40px;
423
+
362
424
  .checkmark {
363
425
  top: 10px;
364
426
  left: 10px;
365
427
  }
366
428
  }
367
429
  }
368
- .checkbox-container input[type="checkbox"]:focus-visible ~ .checkmark,
369
- .checkbox-container input[type="checkbox"]:focus-visible + .checkmark,
370
- .switch-container input[type="checkbox"]:focus-visible ~ .switch-slider,
371
- .switch-container input[type="checkbox"]:focus-visible + .switch-slider {
430
+
431
+ .checkbox-container input[type="checkbox"]:focus-visible~.checkmark,
432
+ .checkbox-container input[type="checkbox"]:focus-visible+.checkmark,
433
+ .switch-container input[type="checkbox"]:focus-visible~.switch-slider,
434
+ .switch-container input[type="checkbox"]:focus-visible+.switch-slider {
372
435
  background-color: #6dc0dc;
373
436
  }
437
+
374
438
  .checkbox-container:has(input:disabled) {
375
439
  opacity: 0.6;
376
440
  cursor: not-allowed;
377
- &:hover input ~ .checkmark {
441
+
442
+ &:hover input~.checkmark {
378
443
  cursor: not-allowed;
379
444
  background-color: #cccccc;
380
445
  }
381
446
  }
447
+
382
448
  .checkbox-container.readonly {
383
449
  cursor: default;
384
450
  pointer-events: none;
451
+
385
452
  .checkmark {
386
453
  cursor: default;
387
454
  opacity: 0.75;
388
455
  }
389
456
  }
457
+
390
458
  .switch-container.readonly {
391
459
  cursor: default;
392
460
  pointer-events: none;
393
461
  opacity: 0.75;
394
- }
462
+ }