siam-ui-utils 2.2.28 → 2.2.29

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.
@@ -0,0 +1,595 @@
1
+ /* Estilos para los checkbox personalizados */
2
+ .custom-checkbox input[type="checkbox"] {
3
+ position: absolute;
4
+ opacity: 0;
5
+ z-index: -1;
6
+ }
7
+
8
+ .custom-checkbox input[type="checkbox"] + label {
9
+ position: relative;
10
+ padding-left: 2rem;
11
+ cursor: pointer;
12
+ line-height:0px !important;
13
+ }
14
+
15
+ .custom-checkbox input[type="checkbox"] + label::before {
16
+ content: '';
17
+ display: inline-block;
18
+ width: 1rem;
19
+ height: 1rem;
20
+ border: 1px solid #ccc;
21
+ border-radius: 0.25rem;
22
+ background-color: white;
23
+ position: absolute;
24
+ left: 0;
25
+ top: -11px;
26
+ transition: background-color 0.2s, border-color 0.2s;
27
+
28
+ }
29
+
30
+ .custom-checkbox input[type="checkbox"]:checked + label::before {
31
+ background-color: #900604;
32
+ border-color: #900604;
33
+
34
+
35
+ }
36
+
37
+ .custom-checkbox input[type="checkbox"]:checked + label::after {
38
+ content: '';
39
+ position: absolute;
40
+ top: -10px;
41
+ left: 0.3rem;
42
+ width: 0.5rem;
43
+ height: 0.6rem;
44
+ border: solid white;
45
+ border-width: 0 0.2rem 0.2rem 0;
46
+ transform: rotate(45deg);
47
+
48
+
49
+ }
50
+
51
+ /* Estilos específicos para CheckMultiSelect */
52
+ .check-multi-select .custom-checkbox input[type="checkbox"]:not(:checked) + label::before {
53
+ background-color: #900604; /* Fondo rojo en CheckMultiSelect para desmarcados */
54
+ border-color: #900604;
55
+ }
56
+
57
+ .check-multi-select .custom-checkbox input[type="checkbox"]:not(:checked) + label::after {
58
+ content: '';
59
+ position: absolute;
60
+ top: -0.29rem; /* Ajusta la posición del tilde */
61
+ left: 0.25rem;
62
+ width: 0.5rem;
63
+ height: 0.1rem;
64
+ background-color: white;
65
+ }
66
+
67
+
68
+ /* Estilos para checkboxes deshabilitados */
69
+ .custom-checkbox input[type="checkbox"]:disabled + label {
70
+ cursor: not-allowed; /* Cambia el cursor */
71
+ color: #6c757d;
72
+ line-height:0px !important;
73
+ }
74
+
75
+
76
+ .custom-checkbox input[type="checkbox"]:disabled + label::before {
77
+ background-color: #e9ecef;
78
+ border-color: #ced4da;
79
+
80
+ }
81
+
82
+ .custom-checkbox input[type="checkbox"]:disabled:checked + label::before {
83
+ background-color: #adb5bd;
84
+ border-color: #adb5bd;
85
+ }
86
+
87
+ /* Estilos para los radio buttons personalizados */
88
+ .custom-radio input[type="radio"] {
89
+ position: absolute;
90
+ opacity: 0;
91
+ }
92
+
93
+ .custom-radio label {
94
+ display: inline-flex;
95
+ align-items: center;
96
+ cursor: pointer;
97
+ }
98
+
99
+ .custom-radio label::before {
100
+ content: '';
101
+ display: inline-block;
102
+ width: 20px;
103
+ height: 20px;
104
+ border-radius: 50%;
105
+ border: 2px solid #ced4da;
106
+ background-color: white;
107
+ margin-right: 10px;
108
+ transition: background-color 0.2s, border-color 0.2s;
109
+ }
110
+
111
+ .custom-radio input[type="radio"]:checked + label::before {
112
+ background-color: #900604;
113
+ border-color: #900604;
114
+ }
115
+
116
+ .custom-radio input[type="radio"]:checked + label::after {
117
+ content: '';
118
+ position: absolute;
119
+ left: 26px;
120
+ top: 44%;
121
+ transform: translateY(-50%);
122
+ width: 0.5rem;
123
+ height: 0.45rem;
124
+ background-color: white !important;
125
+ border-radius: 50%;
126
+ }
127
+
128
+ /* Estilos específicos para radio buttons deshabilitados */
129
+ .custom-radio input[type="radio"]:disabled + label {
130
+ cursor: not-allowed; /* Cambia el cursor */
131
+ color: #6c757d; /* Color gris */
132
+ }
133
+
134
+ .custom-radio input[type="radio"]:disabled + label::before {
135
+ background-color: #e9ecef; /* Fondo gris claro */
136
+ border-color: #ced4da; /* Borde gris claro */
137
+ }
138
+
139
+ .custom-radio input[type="radio"]:disabled:checked + label::before {
140
+ background-color: #adb5bd; /* Fondo gris más oscuro para el estado checked */
141
+ border-color: #adb5bd; /* Borde gris más oscuro */
142
+ }
143
+
144
+ /* Estilos para el custom file */
145
+ .custom-file {
146
+ height: calc(2.5rem + 2px);
147
+ }
148
+
149
+ .custom-file-label:focus,
150
+ .custom-file-input:focus {
151
+ border-color: #900604;
152
+ }
153
+
154
+ .custom-file-label::after {
155
+ height: calc(2.5rem + 2px - 2px);
156
+ padding: 0.75rem 0.75rem 0.5rem 0.75rem;
157
+ background: #900604;
158
+ color: white; /* Ajustado para contraste */
159
+ border-color: #900604;
160
+ }
161
+
162
+ .custom-file-input:focus ~ .custom-file-label {
163
+ border-color: rgba(144, 6, 4, 0.6);
164
+ }
165
+
166
+ .custom-file-input {
167
+ box-shadow: initial !important;
168
+ }
169
+ .dzu-dropzone {
170
+ display: flex;
171
+ flex-direction: column;
172
+ align-items: center;
173
+ width: 100%;
174
+ min-height: 120px;
175
+ overflow: scroll;
176
+ margin: 0 auto;
177
+ position: relative;
178
+ box-sizing: border-box;
179
+ transition: all .15s linear;
180
+ border: 2px solid #d9d9d9;
181
+ border-radius: 4px;
182
+ }
183
+
184
+ .dzu-dropzoneActive {
185
+ background-color: #DEEBFF;
186
+ border-color: #2484FF;
187
+ }
188
+
189
+ .dzu-dropzoneDisabled {
190
+ opacity: 0.5;
191
+ }
192
+
193
+ .dzu-dropzoneDisabled *:hover {
194
+ cursor: unset;
195
+ }
196
+
197
+ .dzu-input {
198
+ display: none;
199
+ }
200
+
201
+ .dzu-inputLabel {
202
+ display: flex;
203
+ justify-content: center;
204
+ align-items: center;
205
+ position: absolute;
206
+ top: 0;
207
+ bottom: 0;
208
+ left: 0;
209
+ right: 0;
210
+ font-family: 'Helvetica', sans-serif;
211
+ font-size: 20px;
212
+ font-weight: 600;
213
+ color: #2484FF;
214
+ -moz-osx-font-smoothing: grayscale;
215
+ -webkit-font-smoothing: antialiased;
216
+ cursor: pointer;
217
+ }
218
+
219
+ .dzu-inputLabelWithFiles {
220
+ display: flex;
221
+ justify-content: center;
222
+ align-items: center;
223
+ align-self: flex-start;
224
+ padding: 0 14px;
225
+ min-height: 32px;
226
+ background-color: #E6E6E6;
227
+ color: #2484FF;
228
+ border: none;
229
+ font-family: 'Helvetica', sans-serif;
230
+ border-radius: 4px;
231
+ font-size: 14px;
232
+ font-weight: 600;
233
+ margin-top: 20px;
234
+ margin-left: 3%;
235
+ -moz-osx-font-smoothing: grayscale;
236
+ -webkit-font-smoothing: antialiased;
237
+ cursor: pointer;
238
+ }
239
+
240
+ .dzu-previewContainer {
241
+ padding: 40px 3%;
242
+ display: flex;
243
+ flex-direction: row;
244
+ align-items: center;
245
+ justify-content: space-between;
246
+ position: relative;
247
+ width: 100%;
248
+ min-height: 60px;
249
+ z-index: 1;
250
+ border-bottom: 1px solid #ECECEC;
251
+ box-sizing: border-box;
252
+ }
253
+
254
+ .dzu-previewStatusContainer {
255
+ display: flex;
256
+ align-items: center;
257
+ }
258
+
259
+ .dzu-previewFileName {
260
+ font-family: 'Helvetica', sans-serif;
261
+ font-size: 14px;
262
+ font-weight: 400;
263
+ color: #333333;
264
+ }
265
+
266
+ .dzu-previewImage {
267
+ width: auto;
268
+ max-height: 40px;
269
+ max-width: 140px;
270
+ border-radius: 4px;
271
+ }
272
+
273
+ .dzu-previewButton {
274
+ background-size: 14px 14px;
275
+ background-position: center;
276
+ background-repeat: no-repeat;
277
+ width: 14px;
278
+ height: 14px;
279
+ cursor: pointer;
280
+ opacity: 0.9;
281
+ margin: 0 0 2px 10px;
282
+ }
283
+
284
+ .dzu-submitButtonContainer {
285
+ margin: 24px 0;
286
+ z-index: 1;
287
+ }
288
+
289
+ .dzu-submitButton {
290
+ padding: 0 14px;
291
+ min-height: 32px;
292
+ background-color: #2484FF;
293
+ border: none;
294
+ border-radius: 4px;
295
+ font-family: 'Helvetica', sans-serif;
296
+ font-size: 14px;
297
+ font-weight: 600;
298
+ color: #FFF;
299
+ -moz-osx-font-smoothing: grayscale;
300
+ -webkit-font-smoothing: antialiased;
301
+ cursor: pointer;
302
+ }
303
+
304
+ .dzu-submitButton:disabled {
305
+ background-color: #E6E6E6;
306
+ color: #333333;
307
+ cursor: unset;
308
+ }
309
+ .dropzone-upload-button{
310
+ padding: 25;
311
+ border-radius: 5px !important;
312
+ cursor: pointer;
313
+ color: #fff;
314
+ width: 10rem !important;
315
+ height: 2rem !important;
316
+ line-height: 1.5 !important;
317
+ font-size: 13px;
318
+ text-align: center;
319
+ vertical-align: middle !important;
320
+ border: none;
321
+ padding-top: 0.5rem;
322
+ margin-top: 0.5rem;
323
+ background-color: #af251b;
324
+ &:hover {
325
+ background-color: rgb(108, 31, 1);
326
+ }
327
+ }
328
+ .dropzone-upload-frame{
329
+ border: 0px !important;
330
+ overflow: 'none' !important;
331
+ }
332
+ .dropzone-upload-previewContainer {
333
+ display: flex;
334
+ flex-direction: row;
335
+ align-items: center;
336
+ justify-content: space-between;
337
+ position: relative;
338
+ width: 100px;
339
+ min-height: 60px;
340
+ z-index: 1;
341
+ border-bottom: 1px solid #ECECEC;
342
+ box-sizing: border-box;
343
+ }
344
+
345
+ .dropzone-upload-previewImage {
346
+ width: 60rem;
347
+ max-height: 60px;
348
+ max-width: 10rem;
349
+ border-radius: 4px;
350
+ padding-right: 1rem;
351
+ }
352
+
353
+ .dropzone-upload-delete-btn {
354
+ width: 2rem;
355
+ line-height: 1.5;
356
+ border : 0;
357
+ color: #ff0000;
358
+ background-color: #f8f8f8;
359
+ padding-right:1rem;
360
+ }
361
+
362
+ .dropzone-upload-file-name-container {
363
+ position: relative;
364
+ display: inline-block;
365
+ max-width: 150px; /* Ajusta este valor para aumentar el ancho */
366
+ }
367
+
368
+ .dropzone-upload-file-name {
369
+ padding-right: 1rem;
370
+ white-space: nowrap;
371
+ overflow: hidden;
372
+ text-overflow: ellipsis;
373
+ max-width: 150px; /* Ajusta este valor para aumentar el ancho */
374
+ }.copy-link-container {
375
+ display: inline-flex;
376
+ align-items: center;
377
+ gap: 8px;
378
+ width: 100%;
379
+ position: relative;
380
+ }
381
+
382
+ .copy-link-text {
383
+ width: 90%;
384
+ overflow: hidden;
385
+ text-overflow: ellipsis;
386
+ white-space: nowrap;
387
+ display: inline-block;
388
+ vertical-align: middle;
389
+ cursor: pointer;
390
+ transition: color 0.2s;
391
+ font-weight: 500;
392
+ color: #007bff;
393
+ }
394
+ .copy-link-text.copied {
395
+ color: #28a745;
396
+ }
397
+
398
+ .copy-link-btn {
399
+ padding: 0;
400
+ font-size: 16px;
401
+ }
402
+
403
+ .copy-link-copied {
404
+ color: #28a745;
405
+ font-size: 13px;
406
+ margin-left: 8px;
407
+ position: absolute;
408
+ top: 100%;
409
+ left: 0;
410
+ white-space: nowrap;
411
+ }.av-video-timer {
412
+ color: inherit;
413
+ margin: 0 12px;
414
+ flex: 1;
415
+ text-align: center;
416
+ display: flex;
417
+ justify-content: center;
418
+ font-weight: bold;
419
+ align-items: center;
420
+ font-size: 1.3em;
421
+ width: 100%;
422
+ margin: 8px 0;
423
+ }
424
+
425
+ .timer {
426
+ font-size: clamp(5px, 2vw, 20px);
427
+ margin-right: 4px;
428
+ }
429
+
430
+ .timer-green {
431
+ color: #28a745;
432
+ }
433
+
434
+ .timer-yellow {
435
+ color: #ffc107;
436
+ }
437
+
438
+ .timer-red {
439
+ color: #bd0300;
440
+ }
441
+
442
+ @keyframes vibrate {
443
+ 0% {
444
+ transform: translateX(0);
445
+ }
446
+ 20% {
447
+ transform: translateX(-3px);
448
+ }
449
+ 40% {
450
+ transform: translateX(3px);
451
+ }
452
+ 60% {
453
+ transform: translateX(-3px);
454
+ }
455
+ 80% {
456
+ transform: translateX(3px);
457
+ }
458
+ 100% {
459
+ transform: translateX(0);
460
+ }
461
+ }
462
+ .timer-out {
463
+ color: #000000;
464
+ animation: vibrate 0.3s linear infinite;
465
+ }
466
+
467
+ .timer-over {
468
+ color: #c00805;
469
+ }.visualizador-container {
470
+ position: relative;
471
+ }
472
+
473
+ .visualizador-grid,
474
+ .visualizador-grid-css {
475
+ width: 100%;
476
+ height: 100%;
477
+ min-width: 90vh;
478
+ min-height: 80vh;
479
+ background: #ffffff;
480
+ border-radius: 12px;
481
+ display: grid;
482
+ border: solid 2px #900604;
483
+ position: relative;
484
+ gap: 1px;
485
+ box-sizing: content-box;
486
+ }
487
+
488
+ .visualizador-slot {
489
+ display: flex;
490
+ border: 1px solid #900604;
491
+ border-radius: 7px;
492
+ background: #fff;
493
+ }
494
+ .visualizador-slot--row, .visualizador-slot-row {
495
+ flex-direction: row;
496
+ }
497
+ .visualizador-slot--column, .visualizador-slot-column, .visualizador-slot-column-col {
498
+ flex-direction: column;
499
+ }
500
+ .visualizador-slot-content--small {
501
+ font-size: 0.85rem;
502
+ }
503
+ .visualizador-slot-content--medium {
504
+ font-size: 1rem;
505
+ }
506
+ .visualizador-slot-content--large {
507
+ font-size: 1.5rem;
508
+ }
509
+ .visualizador-slot-align--start {
510
+ align-items: flex-start;
511
+ }
512
+ .visualizador-slot-align--center {
513
+ align-items: center;
514
+ }
515
+ .visualizador-slot-align--end {
516
+ align-items: flex-end;
517
+ }
518
+ .visualizador-slot-align--stretch {
519
+ align-items: stretch;
520
+ }
521
+ .visualizador-slot-justify--start {
522
+ justify-content: flex-start;
523
+ }
524
+ .visualizador-slot-justify--center {
525
+ justify-content: center;
526
+ }
527
+ .visualizador-slot-justify--end {
528
+ justify-content: flex-end;
529
+ }
530
+ .visualizador-slot-justify--space-between {
531
+ justify-content: space-between;
532
+ }
533
+ .visualizador-slot-justify--space-around {
534
+ justify-content: space-around;
535
+ }
536
+ .visualizador-slot-justify--space-evenly {
537
+ justify-content: space-evenly;
538
+ }
539
+ .visualizador-slot--no-border {
540
+ border: none !important;
541
+ }
542
+
543
+ .slot-legend {
544
+ width: auto;
545
+ font-size: 0.75rem;
546
+ margin-bottom: 0px !important;
547
+ margin-left: -20px !important;
548
+ font-weight: 700;
549
+ color: #900604;
550
+ white-space: nowrap;
551
+ }
552
+
553
+ .editor-layer {
554
+ position: absolute;
555
+ width: 100%;
556
+ height: 100%;
557
+ pointer-events: none;
558
+ z-index: 20;
559
+ display: grid;
560
+ }
561
+
562
+ .editor-layer-cell-coord {
563
+ font-size: 0.75rem;
564
+ justify-self: center;
565
+ }
566
+
567
+ .editor-layer-cell {
568
+ font-size: 0.7em;
569
+ color: #797979;
570
+ align-content: center;
571
+ padding: 2px;
572
+ text-align: left;
573
+ pointer-events: none;
574
+ box-sizing: border-box;
575
+ border: 1px dashed #bbb;
576
+ }
577
+
578
+ .visualizador-editor-btn {
579
+ position: absolute;
580
+ top: 8px;
581
+ right: 8px;
582
+ z-index: 100;
583
+ padding: 6px 12px;
584
+ font-size: 1em;
585
+ color: #fff;
586
+ border: none;
587
+ border-radius: 4px;
588
+ cursor: pointer;
589
+ }
590
+ .visualizador-editor-btn--activo {
591
+ background: #900604;
592
+ }
593
+ .visualizador-editor-btn--inactivo {
594
+ background: #bbb;
595
+ }
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useState } from "react";
3
3
  import { Button } from "reactstrap";
4
4
  import copiarIcon from "../assets/img/copiar.png.js";
5
- import "./styles.scss";
5
+ /* empty css */
6
6
  const copyToClipboard = async (text) => {
7
7
  try {
8
8
  if (!text) return false;
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { FormGroup, Input, Label } from "reactstrap";
3
- import "./index.css";
3
+ /* empty css */
4
4
  const CustomInputCheckbox = ({
5
5
  className,
6
6
  id,
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { FormGroup, Input, Label } from "reactstrap";
3
- import "./index.css";
3
+ /* empty css */
4
4
  const CustomInputRadio = ({
5
5
  className,
6
6
  customClassName,
@@ -3,10 +3,10 @@ import { getDroppedOrSelectedFiles } from "html5-file-selector";
3
3
  import { useState } from "react";
4
4
  import { Button } from "reactstrap";
5
5
  import Dropzone from "../../dropzone/Dropzone.js";
6
- import "../../dropzone/styles.css";
6
+ /* empty css */
7
7
  import { pdfImage } from "../../iconos/constants-svg.js";
8
8
  import { IconButtonSvg as _t } from "../../iconos/icon-button-svg.js";
9
- import "../dropzone-uploader.css";
9
+ /* empty css */
10
10
  const DropzoneUploaderDniDigital = ({
11
11
  accept = "image/*, application/pdf",
12
12
  classNames = "",
@@ -2,10 +2,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { getDroppedOrSelectedFiles } from "html5-file-selector";
3
3
  import { useState, useEffect } from "react";
4
4
  import Dropzone from "../dropzone/Dropzone.js";
5
- import "../dropzone/styles.css";
5
+ /* empty css */
6
6
  import { pdfImage } from "../iconos/constants-svg.js";
7
7
  import { IconButtonSvg as _t } from "../iconos/icon-button-svg.js";
8
- import "./dropzone-uploader.css";
8
+ /* empty css */
9
9
  const maxSize = 7;
10
10
  const DropzoneUploader = ({
11
11
  onChangeFiles,
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useState, useRef, useEffect } from "react";
3
- import "./styles.scss";
3
+ /* empty css */
4
4
  const formatTiempo = (ms) => {
5
5
  if (ms == null) return "--:--";
6
6
  const absMs = Math.abs(ms);
@@ -2,21 +2,21 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import { useState } from "react";
3
3
  import { Row } from "reactstrap";
4
4
  import "react-router";
5
- import "../custom-input/index.css";
5
+ /* empty css */
6
6
  import "react-select";
7
7
  import "react-tagsinput/react-tagsinput.css";
8
8
  import { Colxx } from "../CustomBootstrap.js";
9
9
  import { DropzoneUploader } from "../dropzone-uploader/index.js";
10
10
  import "html5-file-selector";
11
11
  import "../dropzone/Dropzone.js";
12
- import "../dropzone/styles.css";
12
+ /* empty css */
13
13
  import "../iconos/icon-button-svg.js";
14
- import "../dropzone-uploader/dropzone-uploader.css";
14
+ /* empty css */
15
15
  import { TAKE_PHOTO } from "../constants.js";
16
16
  import imgHacerFoto from "../assets/img/take-photo.png.js";
17
- import "../copy-link/styles.scss";
18
- import "../timer/styles.scss";
19
- import "../view-layout/styles.scss";
17
+ /* empty css */
18
+ /* empty css */
19
+ /* empty css */
20
20
  import "@whereby.com/browser-sdk/react";
21
21
  import "@whereby.com/browser-sdk/embed";
22
22
  import "../IntlMessages.js";
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import "./styles.scss";
2
+ /* empty css */
3
3
  const ButtonEditor = ({ activo, onClick }) => /* @__PURE__ */ jsx(
4
4
  "button",
5
5
  {
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import "./styles.scss";
2
+ /* empty css */
3
3
  const EditorLayer = ({ gridCols, gridRows }) => {
4
4
  return /* @__PURE__ */ jsx(
5
5
  "div",
@@ -4,7 +4,7 @@ import SlotWrapper from "./slot-wrapper.js";
4
4
  import EditorLayer from "./editor-layer.js";
5
5
  import { GRID_SIZES, LOCALHOST } from "./constants.js";
6
6
  import ButtonEditor from "./button-editor.js";
7
- import "./styles.scss";
7
+ /* empty css */
8
8
  const ViewLayout = ({
9
9
  slots = [],
10
10
  size = "md",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "siam-ui-utils",
3
- "version": "2.2.28",
3
+ "version": "2.2.29",
4
4
  "keywords": [
5
5
  "ampf-react",
6
6
  "ampf-utils",