diginet-core-ui 1.3.43 → 1.3.45

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 (30) hide show
  1. package/assets/images/menu/dhr/MHRM00N0005.svg +11 -0
  2. package/assets/images/menu/dhr/MHRM09N1010.svg +12 -0
  3. package/assets/images/menu/dhr/MHRM09N1015.svg +18 -0
  4. package/assets/images/menu/dhr/MHRM09N1020.svg +13 -0
  5. package/assets/images/menu/dhr/MHRM09N1400.svg +11 -0
  6. package/assets/images/menu/dhr/MHRP25L0101.svg +15 -0
  7. package/assets/images/menu/dhr/MHRP25L0501.svg +14 -0
  8. package/components/button/icon.js +211 -216
  9. package/components/chart/line/Axis.js +11 -10
  10. package/components/chart/line/Grid.js +4 -3
  11. package/components/chart/line/Path.js +11 -10
  12. package/components/chart/line/Point.js +107 -80
  13. package/components/chart/line/index.js +36 -17
  14. package/components/form-control/checkbox/index.js +5 -5
  15. package/components/form-control/date-picker/index.js +131 -119
  16. package/components/form-control/dropdown/index.js +3 -4
  17. package/components/form-control/dropdown-box/index.js +1 -1
  18. package/components/form-control/helper-text/index.js +35 -33
  19. package/components/form-control/input-base/index.js +318 -317
  20. package/components/form-control/text-input/index.js +4 -4
  21. package/components/form-control/time-picker/index.js +10 -19
  22. package/components/modal/modal.js +10 -4
  23. package/components/paging/page-info.js +78 -41
  24. package/components/slider/slider-container.js +150 -126
  25. package/components/slider/slider-item.js +84 -89
  26. package/components/tree-view/css.js +17 -16
  27. package/components/tree-view/index.js +41 -23
  28. package/package.json +1 -1
  29. package/readme.md +20 -0
  30. package/theme/settings.js +3 -1
package/components/form-control/input-base/index.js CHANGED
@@ -61,357 +61,358 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
61
61
  /* Start styled */
62
62
 
63
63
  const inputBaseRoot = css`
64
- display: flex;
65
- flex: 1 1 auto;
66
- align-items: center;
67
- position: relative;
68
- height: max-content;
69
- &:hover,
70
- &:focus-within {
71
- .start-icon:not(.non-effect) {
72
- path {
73
- fill: ${colors.primary};
64
+ display: flex;
65
+ flex: 1 1 auto;
66
+ align-items: center;
67
+ position: relative;
68
+ height: max-content;
69
+ &:hover,
70
+ &:focus-within {
71
+ .start-icon:not(.non-effect) {
72
+ path {
73
+ fill: ${colors.primary};
74
+ }
75
+ }
74
76
  }
75
- }
76
- }
77
- &:focus-within {
78
- border-bottom-color: ${colors.info5};
79
- &::after {
80
- border-bottom-color: inherit;
81
- transform: scaleX(1);
82
- }
83
- }
84
- &.underlined {
85
- padding-bottom: 4px;
86
- padding-top: 4px;
87
- &:not(:focus-within):hover {
88
- &::before {
89
- border-bottom-color: ${colors.brand};
77
+ &:focus-within {
78
+ border-bottom-color: ${colors.info5};
79
+ &::after {
80
+ border-bottom-color: inherit;
81
+ transform: scaleX(1);
82
+ }
90
83
  }
91
- }
92
- &:focus-within {
93
- ${!readOnly && `
84
+ &.underlined {
85
+ padding-bottom: 4px;
86
+ padding-top: 4px;
87
+ &:not(:focus-within):hover {
88
+ &::before {
89
+ border-bottom-color: ${colors.brand};
90
+ }
91
+ }
92
+ &:focus-within {
93
+ ${!readOnly && `
94
94
  border-bottom-color: ${colors.info5};
95
95
  &::after {
96
96
  border-bottom-color: inherit;
97
97
  transform: scaleX(1);
98
98
  }
99
99
  `}
100
- }
101
- &::before {
102
- content: '';
103
- position: absolute;
104
- left: 0;
105
- right: 0;
106
- bottom: 0;
107
- border-bottom: 1px solid ${colors.border};
108
- }
109
- &::after {
110
- content: '';
111
- position: absolute;
112
- left: 0px;
113
- right: 0px;
114
- bottom: -1px;
115
- border-bottom: 2px solid transparent;
116
- transform: scaleX(0);
117
- transform-origin: center;
118
- transition: all 0.2s ease;
119
- }
120
- }
121
- &.outlined {
122
- border: 1px solid ${colors.border};
123
- border-radius: 4px;
124
- height: 40px;
125
- box-sizing: border-box;
126
- background-color: ${colors.white};
127
- &:not(:focus-within):hover {
128
- background-color: ${colors.hover};
129
- border-color: ${colors.brand};
130
- input {
131
- background-color: ${colors.hover};
100
+ }
101
+ &::before {
102
+ content: '';
103
+ position: absolute;
104
+ left: 0;
105
+ right: 0;
106
+ bottom: 0;
107
+ border-bottom: 1px solid ${colors.border};
108
+ }
109
+ &::after {
110
+ content: '';
111
+ position: absolute;
112
+ left: 0px;
113
+ right: 0px;
114
+ bottom: -1px;
115
+ border-bottom: 2px solid transparent;
116
+ transform: scaleX(0);
117
+ transform-origin: center;
118
+ transition: all 0.2s ease;
119
+ }
132
120
  }
133
- }
134
- &:focus-within {
135
- ${!readOnly && `
121
+ &.outlined {
122
+ border: 1px solid ${colors.border};
123
+ border-radius: 4px;
124
+ height: 40px;
125
+ box-sizing: border-box;
126
+ background-color: ${colors.white};
127
+ &:not(:focus-within):hover {
128
+ background-color: ${colors.hover};
129
+ border-color: ${colors.brand};
130
+ input {
131
+ background-color: ${colors.hover};
132
+ }
133
+ }
134
+ &:focus-within {
135
+ ${!readOnly && `
136
136
  border-color: ${colors.info5};
137
137
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
138
138
  &::after {
139
139
  border-color: inherit;
140
140
  }
141
141
  `}
142
- }
143
- &::after {
144
- content: '';
145
- position: absolute;
146
- left: -2px;
147
- right: -2px;
148
- top: -2px;
149
- bottom: -2px;
150
- border: 2px solid transparent;
151
- border-radius: 4px;
152
- pointer-events: none;
153
- }
154
- .start-icon {
155
- margin-left: 16px;
156
- }
157
- .end-icon {
158
- margin-right: 16px;
159
- }
160
- }
161
- &.non-style {
162
- border-color: transparent !important;
163
- box-shadow: none !important;
164
- background-color: transparent !important;
165
- input {
166
- background-color: transparent !important;
167
- }
168
- &:before,
169
- &:after {
170
- border-color: transparent !important;
171
- }
172
- }
173
- &.info {
174
- border-color: ${colors.info} !important;
175
- &::before {
176
- border-color: ${colors.info} !important;
177
- }
178
- }
179
- &.success {
180
- border-color: ${colors.success} !important;
181
- &::before {
182
- border-color: ${colors.success} !important;
183
- }
184
- }
185
- &.warning {
186
- border-color: ${colors.warning} !important;
187
- &::before {
188
- border-color: ${colors.warning} !important;
189
- }
190
- }
191
- &.danger {
192
- border-color: ${colors.danger} !important;
193
- &::before {
194
- border-color: ${colors.danger} !important;
195
- }
196
- }
197
- &.disabled {
198
- border-color: ${colors.disabled} !important;
199
- pointer-events: none;
200
- &::before {
201
- border-bottom-color: ${colors.disabled} !important;
202
- }
203
- &.outlined {
204
- background-color: ${colors.dark12};
205
- }
206
- input {
207
- // color: ${colors.disabled};
208
- }
209
- .start-icon,
210
- .end-icon {
211
- &:not(.non-effect), &.allow-disabled {
212
- path {
213
- fill: ${colors.disabled};
142
+ }
143
+ &::after {
144
+ content: '';
145
+ position: absolute;
146
+ left: -2px;
147
+ right: -2px;
148
+ top: -2px;
149
+ bottom: -2px;
150
+ border: 2px solid transparent;
151
+ border-radius: 4px;
152
+ pointer-events: none;
153
+ }
154
+ .start-icon {
155
+ margin-left: 16px;
156
+ }
157
+ .end-icon {
158
+ margin-right: 16px;
214
159
  }
215
160
  }
216
- }
217
- }
218
- & + .DGN-UI-HelperText {
219
- min-height: 16px;
220
- position: absolute;
221
- top: 100%;
222
- }
223
- `;
161
+ &.non-style {
162
+ border-color: transparent !important;
163
+ box-shadow: none !important;
164
+ background-color: transparent !important;
165
+ input {
166
+ background-color: transparent !important;
167
+ }
168
+ &:before,
169
+ &:after {
170
+ border-color: transparent !important;
171
+ }
172
+ }
173
+ &.info {
174
+ border-color: ${colors.info} !important;
175
+ &::before {
176
+ border-color: ${colors.info} !important;
177
+ }
178
+ }
179
+ &.success {
180
+ border-color: ${colors.success} !important;
181
+ &::before {
182
+ border-color: ${colors.success} !important;
183
+ }
184
+ }
185
+ &.warning {
186
+ border-color: ${colors.warning} !important;
187
+ &::before {
188
+ border-color: ${colors.warning} !important;
189
+ }
190
+ }
191
+ &.danger {
192
+ border-color: ${colors.danger} !important;
193
+ &::before {
194
+ border-color: ${colors.danger} !important;
195
+ }
196
+ }
197
+ &.disabled {
198
+ border-color: ${colors.disabled} !important;
199
+ pointer-events: none;
200
+ &::before {
201
+ border-bottom-color: ${colors.disabled} !important;
202
+ }
203
+ &.outlined {
204
+ background-color: ${colors.dark12};
205
+ }
206
+ input {
207
+ color: ${colors.disabled};
208
+ }
209
+ .start-icon,
210
+ .end-icon {
211
+ &:not(.non-effect),
212
+ &.allow-disabled {
213
+ path {
214
+ fill: ${colors.disabled};
215
+ }
216
+ }
217
+ }
218
+ }
219
+ & + .DGN-UI-HelperText {
220
+ min-height: 16px;
221
+ position: absolute;
222
+ top: 100%;
223
+ }
224
+ `;
224
225
  const inputBaseCSS = css`
225
- display: flex;
226
- flex: 1 1 auto;
227
- `;
226
+ display: flex;
227
+ flex: 1 1 auto;
228
+ `;
228
229
  const inputCSS = css`
229
- width: 100%;
230
- border: none;
231
- outline: none;
232
- color: ${colors.input};
233
- background-color: transparent;
234
- padding-top: 0;
235
- ${typography.paragraph1};
236
- height: 24px;
237
- text-overflow: ellipsis;
238
- &::placeholder {
239
- color: ${colors.placeholder};
240
- ${typography.paragraph1};
241
- }
242
- &:focus {
243
- background-color: transparent;
244
- color: ${colors.primary};
245
- }
246
- &:hover {
247
- color: ${colors.primary};
248
- }
249
- &.outlined {
250
- padding-bottom: inherit;
251
- padding-left: 16px;
252
- padding-right: 16px;
253
- }
254
- &.underlined {
255
- padding-bottom: 0;
256
- padding-left: 0;
257
- padding-right: 0;
258
- }
259
- &:disabled {
260
- background-color: transparent;
261
- }
262
- `;
263
- const textAreaCSS = css`
264
- display: block;
265
- color: ${colors.input};
266
- ${typography.paragraph1};
267
- min-height: max-content;
268
- min-width: max-content;
269
- outline: none;
270
- border: none;
271
- background-color: transparent;
272
- padding: 2px 0;
273
- width: 100%;
274
- overflow-y: auto;
275
- position: relative;
276
- resize: ${resize};
277
- box-sizing: border-box;
278
- &:disabled {
279
- color: ${colors.disabled};
280
- }
281
- &:hover:not(:focus-within) {
282
- border-color: ${colors.brand};
283
- color: ${colors.primary};
284
- ::placeholder {
285
- color: ${colors.primary};
286
- }
287
- }
288
- &:focus-within {
289
- color: ${colors.primary};
290
- }
291
- &::-webkit-scrollbar {
292
- width: 4px;
293
- background-color: white;
294
- border-radius: 4px;
295
- }
296
- &::-webkit-scrollbar-thumb{
297
- border-radius: 10px;
298
- mix-blend-mode: normal;
299
- background-color: ${colors.dark12};
300
- background-clip: content-box;
301
- }
302
- `;
303
- const multilineCSS = css`
304
- display: block;
305
- position: relative;
306
- height: max-content;
307
- width: 100%;
308
- box-sizing: border-box;
309
- &.outlined {
310
- border: 1px solid ${colors.border};
311
- border-radius: 4px;
312
- /* height: 30px; */
313
- padding: 7px 16px;
314
- .css-${textAreaCSS.name} {
230
+ width: 100%;
231
+ border: none;
232
+ outline: none;
233
+ color: ${colors.input};
234
+ background-color: transparent;
235
+ padding-top: 0;
236
+ ${typography.paragraph1};
315
237
  height: 24px;
316
- }
317
- &:not(:focus-within):hover {
318
- background-color: ${colors.hover};
319
- border-color: ${colors.brand};
320
- input {
321
- background-color: ${colors.hover};
238
+ text-overflow: ellipsis;
239
+ &::placeholder {
240
+ color: ${colors.placeholder};
241
+ ${typography.paragraph1};
242
+ }
243
+ &:focus {
244
+ background-color: transparent;
245
+ color: ${colors.primary};
246
+ }
247
+ &:hover {
248
+ color: ${colors.primary};
249
+ }
250
+ &.outlined {
251
+ padding-bottom: inherit;
252
+ padding-left: 16px;
253
+ padding-right: 16px;
322
254
  }
323
- }
324
- &:focus-within {
325
- ${!readOnly && `
255
+ &.underlined {
256
+ padding-bottom: 0;
257
+ padding-left: 0;
258
+ padding-right: 0;
259
+ }
260
+ &:disabled {
261
+ background-color: transparent;
262
+ }
263
+ `;
264
+ const textAreaCSS = css`
265
+ display: block;
266
+ color: ${colors.input};
267
+ ${typography.paragraph1};
268
+ min-height: max-content;
269
+ min-width: max-content;
270
+ outline: none;
271
+ border: none;
272
+ background-color: transparent;
273
+ padding: 2px 0;
274
+ width: 100%;
275
+ overflow-y: auto;
276
+ position: relative;
277
+ resize: ${resize};
278
+ box-sizing: border-box;
279
+ &:disabled {
280
+ color: ${colors.disabled};
281
+ }
282
+ &:hover:not(:focus-within) {
283
+ border-color: ${colors.brand};
284
+ color: ${colors.primary};
285
+ ::placeholder {
286
+ color: ${colors.primary};
287
+ }
288
+ }
289
+ &:focus-within {
290
+ color: ${colors.primary};
291
+ }
292
+ &::-webkit-scrollbar {
293
+ width: 4px;
294
+ background-color: white;
295
+ border-radius: 4px;
296
+ }
297
+ &::-webkit-scrollbar-thumb {
298
+ border-radius: 10px;
299
+ mix-blend-mode: normal;
300
+ background-color: ${colors.dark12};
301
+ background-clip: content-box;
302
+ }
303
+ `;
304
+ const multilineCSS = css`
305
+ display: block;
306
+ position: relative;
307
+ height: max-content;
308
+ width: 100%;
309
+ box-sizing: border-box;
310
+ &.outlined {
311
+ border: 1px solid ${colors.border};
312
+ border-radius: 4px;
313
+ /* height: 30px; */
314
+ padding: 7px 16px;
315
+ .css-${textAreaCSS.name} {
316
+ height: 24px;
317
+ }
318
+ &:not(:focus-within):hover {
319
+ background-color: ${colors.hover};
320
+ border-color: ${colors.brand};
321
+ input {
322
+ background-color: ${colors.hover};
323
+ }
324
+ }
325
+ &:focus-within {
326
+ ${!readOnly && `
326
327
  border-color: ${colors.info5};
327
328
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
328
329
  &::after {
329
330
  border-color: inherit;
330
331
  }
331
332
  `}
332
- }
333
- &::after {
334
- content: '';
335
- position: absolute;
336
- left: -2px;
337
- right: -2px;
338
- top: -2px;
339
- bottom: -2px;
340
- border: 2px solid transparent;
341
- border-radius: 4px;
342
- pointer-events: none;
343
- }
344
- }
345
- &.underlined {
346
- border: 0;
347
- /* height: 26px; */
348
- padding: 4px 0;
349
- .css-${textAreaCSS.name} {
350
- height: 24px;
351
- }
352
- &:not(:focus-within):hover {
353
- &::before {
354
- border-bottom-color: ${colors.brand};
333
+ }
334
+ &::after {
335
+ content: '';
336
+ position: absolute;
337
+ left: -2px;
338
+ right: -2px;
339
+ top: -2px;
340
+ bottom: -2px;
341
+ border: 2px solid transparent;
342
+ border-radius: 4px;
343
+ pointer-events: none;
344
+ }
355
345
  }
356
- }
357
- &:focus-within {
358
- ${!readOnly && `
346
+ &.underlined {
347
+ border: 0;
348
+ /* height: 26px; */
349
+ padding: 4px 0;
350
+ .css-${textAreaCSS.name} {
351
+ height: 24px;
352
+ }
353
+ &:not(:focus-within):hover {
354
+ &::before {
355
+ border-bottom-color: ${colors.brand};
356
+ }
357
+ }
358
+ &:focus-within {
359
+ ${!readOnly && `
359
360
  &::after {
360
361
  border-bottom-color: ${colors.info5};
361
362
  transform: scaleX(1);
362
363
  }
363
364
  `}
364
- }
365
- &::before {
366
- content: '';
367
- position: absolute;
368
- left: 0;
369
- right: 0;
370
- bottom: 0;
371
- border-bottom: 1px solid ${colors.border};
372
- }
373
- &::after {
374
- content: '';
375
- position: absolute;
376
- left: 0px;
377
- right: 0px;
378
- bottom: -1px;
379
- border-bottom: 2px solid transparent;
380
- transform: scaleX(0);
381
- transform-origin: center;
382
- transition: all 0.2s ease;
383
- }
384
- }
385
- &.disabled {
386
- pointer-events: none;
387
- resize: none;
388
- color: ${colors.disabled};
389
- &.outlined {
390
- background-color: ${colors.dark12};
391
- }
392
- &.underlined::before {
393
- border-bottom-color: ${colors.disabled} !important;
394
- }
395
- }
396
- & + .DGN-UI-HelperText {
397
- min-height: 16px;
398
- position: absolute;
399
- top: 100%;
400
- }
401
- `;
365
+ }
366
+ &::before {
367
+ content: '';
368
+ position: absolute;
369
+ left: 0;
370
+ right: 0;
371
+ bottom: 0;
372
+ border-bottom: 1px solid ${colors.border};
373
+ }
374
+ &::after {
375
+ content: '';
376
+ position: absolute;
377
+ left: 0px;
378
+ right: 0px;
379
+ bottom: -1px;
380
+ border-bottom: 2px solid transparent;
381
+ transform: scaleX(0);
382
+ transform-origin: center;
383
+ transition: all 0.2s ease;
384
+ }
385
+ }
386
+ &.disabled {
387
+ pointer-events: none;
388
+ resize: none;
389
+ color: ${colors.disabled};
390
+ &.outlined {
391
+ background-color: ${colors.dark12};
392
+ }
393
+ &.underlined::before {
394
+ border-bottom-color: ${colors.disabled} !important;
395
+ }
396
+ }
397
+ & + .DGN-UI-HelperText {
398
+ min-height: 16px;
399
+ position: absolute;
400
+ top: 100%;
401
+ }
402
+ `;
402
403
  const inputBaseIconCSS = css`
403
- display: flex;
404
- color: inherit;
405
- &.start-icon {
406
- margin-right: 4px;
407
- & + input {
408
- padding-left: 0;
409
- }
410
- }
411
- &.end-icon {
412
- margin-left: 4px;
413
- }
414
- `;
404
+ display: flex;
405
+ color: inherit;
406
+ &.start-icon {
407
+ margin-right: 4px;
408
+ & + input {
409
+ padding-left: 0;
410
+ }
411
+ }
412
+ &.end-icon {
413
+ margin-left: 4px;
414
+ }
415
+ `;
415
416
  /* End styled */
416
417
 
417
418
  /* Start handler */