@digi-frontend/dgate-api-documentation 1.0.21 → 1.0.25

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 (35) hide show
  1. package/dist/src/components/InfoForm/InfoForm.js +1 -1
  2. package/dist/src/components/InfoForm/InfoForm.js.map +1 -1
  3. package/dist/src/components/JsonInput/JsonInput.js +1 -1
  4. package/dist/src/components/JsonInput/JsonInput.js.map +1 -1
  5. package/dist/src/components/LivePreview/LivePreview.js +1 -1
  6. package/dist/src/components/LivePreview/LivePreview.js.map +1 -1
  7. package/dist/src/components/MethodAccordion/MethodAccordion.js +1 -1
  8. package/dist/src/components/MethodAccordion/MethodAccordion.js.map +1 -1
  9. package/dist/src/components/Tooltip/Tooltip.js.map +1 -1
  10. package/dist/src/components/table/table.js +1 -1
  11. package/dist/src/components/table/table.js.map +1 -1
  12. package/dist/src/components/table/tags-table.js +1 -1
  13. package/dist/src/components/table/tags-table.js.map +1 -1
  14. package/dist/src/constants/regex.js +1 -1
  15. package/dist/src/constants/regex.js.map +1 -1
  16. package/dist/src/layout/layout.js +1 -1
  17. package/dist/src/layout/layout.js.map +1 -1
  18. package/dist/src/validator/form.scheme.js +1 -1
  19. package/dist/src/validator/form.scheme.js.map +1 -1
  20. package/dist/styles.css +473 -473
  21. package/dist/types/components/Tooltip/Tooltip.d.ts +2 -2
  22. package/dist/types/constants/regex.d.ts +1 -0
  23. package/dist/types/validator/form.scheme.d.ts +1 -1
  24. package/package.json +2 -2
  25. package/src/components/InfoForm/InfoForm.tsx +33 -14
  26. package/src/components/JsonInput/JsonInput.tsx +7 -1
  27. package/src/components/LivePreview/LivePreview.tsx +40 -21
  28. package/src/components/MethodAccordion/MethodAccordion.tsx +36 -14
  29. package/src/components/Tooltip/Tooltip.scss +3 -3
  30. package/src/components/Tooltip/Tooltip.tsx +2 -3
  31. package/src/components/table/table.tsx +3 -1
  32. package/src/components/table/tags-table.tsx +27 -5
  33. package/src/constants/regex.ts +1 -0
  34. package/src/layout/layout.tsx +41 -6
  35. package/src/validator/form.scheme.ts +9 -9
package/dist/styles.css CHANGED
@@ -1,102 +1,26 @@
1
- .apiInfoForm {
2
- display: grid;
3
- padding: 1.25rem 1.875rem;
4
- gap: 1.25rem;
5
- }
6
- .apiInfoForm .paramsTable .paramDescContainer {
7
- display: flex;
8
- }
9
- .apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
10
- height: inherit;
11
- width: 1px;
12
- background-color: #d8dae5;
13
- }
14
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
15
- stroke-width: 0.1;
16
- }
17
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
18
- padding: 0;
19
- margin-right: 1.25rem;
20
- }
21
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
1
+ .containerTitleDrawer {
2
+ height: 64px;
3
+ min-height: 64px;
22
4
  display: flex;
5
+ flex-direction: row;
6
+ justify-content: space-between;
23
7
  align-items: center;
24
- padding: 0;
25
- color: #12131a;
26
- }
27
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
28
- margin-block: auto;
29
- }
30
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
31
- fill: #12131a;
32
- }
33
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
34
- padding: 0;
35
- }
36
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
37
- margin-block: auto;
38
- }
39
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
40
- width: 1.125rem;
41
- }
42
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) {
43
- margin-block: auto;
44
- }
45
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg {
46
- width: 1.125rem;
47
- }
48
- .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg path {
49
- fill: #3aaa35;
50
- }
51
- .apiInfoForm .paramsTable .editDescTooltipContent {
52
- display: flex;
53
- flex-direction: column;
54
- gap: 0.625rem;
55
- padding-bottom: 0.625rem;
56
- }
57
- .apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
58
- margin-inline: 0.625rem;
8
+ background-color: #f1f2f6;
9
+ padding: 0 30px 0 30px;
10
+ width: 100%;
59
11
  }
60
- .apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
12
+ .containerTitleDrawer span {
13
+ color: #12131a;
61
14
  font-weight: 600;
62
- font-size: 0.875rem;
63
- line-height: 1.25rem;
64
- padding: 0.75rem 1.25rem;
65
- border-bottom: 1px solid #d8dae5;
66
- }
67
- .apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
68
- content: "*";
69
- color: red;
70
- transform: translateX(0.125rem);
71
- }
72
- .apiInfoForm .apiDocRow {
73
- display: grid;
74
- grid-template-columns: 1fr 1fr;
75
- gap: 1.25rem;
76
- }
77
- .apiInfoForm .apiInfoForm_tagsChips {
78
- margin-top: -1.25rem;
79
- }
80
- .apiInfoForm .editDescTooltipContent {
81
- display: flex;
82
- flex-direction: column;
83
- gap: 0.625rem;
84
- padding-bottom: 0.625rem;
85
- }
86
- .apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
87
- margin-inline: 0.625rem;
15
+ font-size: 18px;
16
+ line-height: 25px;
17
+ letter-spacing: 0em;
88
18
  }
89
- .apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
90
- font-weight: 600;
91
- font-size: 0.875rem;
92
- line-height: 1.25rem;
93
- padding: 0.75rem 1.25rem;
94
- border-bottom: 1px solid #d8dae5;
19
+ .containerTitleDrawer svg path {
20
+ stroke: #000 !important;
95
21
  }
96
- .apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
97
- content: "*";
98
- color: red;
99
- transform: translateX(0.125rem);
22
+ .containerTitleDrawer .closeIcon {
23
+ cursor: pointer;
100
24
  }.methodAccordion {
101
25
  border: none !important;
102
26
  box-shadow: none !important;
@@ -370,91 +294,260 @@
370
294
  }
371
295
  .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
372
296
  background-color: #ebecf2;
373
- }.containerTitleDrawer {
374
- height: 64px;
375
- min-height: 64px;
376
- display: flex;
377
- flex-direction: row;
378
- justify-content: space-between;
379
- align-items: center;
380
- background-color: #f1f2f6;
381
- padding: 0 30px 0 30px;
382
- width: 100%;
297
+ }.json-editor-container {
298
+ overflow: hidden;
299
+ border-bottom-right-radius: 0.3125rem;
300
+ border-bottom-left-radius: 0.3125rem;
383
301
  }
384
- .containerTitleDrawer span {
385
- color: #12131a;
302
+ .json-editor-container .json-editor-label {
303
+ font-size: 0.875rem;
386
304
  font-weight: 600;
387
- font-size: 18px;
388
- line-height: 25px;
389
- letter-spacing: 0em;
305
+ line-height: 1.25rem;
306
+ margin-bottom: 0.3125rem;
390
307
  }
391
- .containerTitleDrawer svg path {
392
- stroke: #000 !important;
308
+ .json-editor-container .json-editor {
309
+ display: flex;
310
+ flex-direction: column;
311
+ background-color: #142452;
312
+ width: 100%;
313
+ outline: 1px solid transparent;
314
+ position: relative;
315
+ overflow: hidden;
393
316
  }
394
- .containerTitleDrawer .closeIcon {
395
- cursor: pointer;
396
- }.tooltip-custom-wrapper {
317
+ .json-editor-container .json-editor .actions-container {
318
+ width: 100%;
319
+ height: 5rem;
320
+ padding: 1.25rem;
321
+ border-radius: 0 0 0.3125rem 0.3125rem;
322
+ background: #101e47;
397
323
  display: flex;
324
+ flex-direction: row;
325
+ gap: 1.25rem;
326
+ align-items: center;
398
327
  }
399
-
400
- .tippy-box {
401
- background-color: #202f5b;
402
- font-size: 0.875rem;
328
+ .json-editor-container .json-editor .actions-container .validate {
329
+ color: #fff;
330
+ text-align: center;
331
+ font-size: 1rem;
332
+ font-style: normal;
333
+ font-weight: 600;
334
+ line-height: 1.25rem;
335
+ width: 8.75rem;
336
+ padding: 0.625rem 2.25rem;
337
+ background-color: rgba(240, 248, 255, 0);
403
338
  border-radius: 0.3125rem;
404
- width: max-content;
405
- max-width: 100%;
406
- overflow-wrap: break-word;
407
- word-break: break-word;
408
- position: relative;
409
- border: 1px solid #d8dae5;
410
- }
411
- .tippy-box.function .tippy-content {
412
- background-color: #fff !important;
413
- color: #000 !important;
339
+ border: 0.0625rem solid #4d75d8;
340
+ cursor: pointer;
414
341
  }
415
- .tippy-box[data-placement] > .tippy-arrow:before {
416
- color: #fff !important;
342
+ .json-editor-container .json-editor .actions-container .validate:disabled {
343
+ color: #babdcc;
344
+ border-color: #a2a5b6;
417
345
  }
418
- .tippy-box.info .tippy-arrow {
419
- color: #202f5b;
346
+ .json-editor-container .json-editor .actions-container .beautify {
347
+ color: #fff;
348
+ text-align: center;
349
+ font-size: 1rem;
350
+ font-style: normal;
351
+ font-weight: 600;
352
+ line-height: 1.25rem;
353
+ width: 8.75rem;
354
+ padding: 0.625rem 2.25rem;
355
+ background-color: rgba(240, 248, 255, 0);
356
+ border-radius: 0.3125rem;
357
+ border: 1px solid #babdcc;
358
+ cursor: pointer;
420
359
  }
421
- .tippy-box.success {
422
- border-radius: 1.875rem;
423
- background-color: #3aaa35;
424
- padding-inline: 0.625rem;
360
+ .json-editor-container .json-editor .actions-container .beautify:disabled {
361
+ color: #a2a5b6;
362
+ border-color: #a2a5b6;
425
363
  }
426
- .tippy-box .tippy-content {
427
- text-align: justify;
364
+ .json-editor-container .json-editor textarea {
365
+ width: 100%;
366
+ padding: 1.25rem;
428
367
  font-size: 0.875rem;
368
+ font-style: normal;
369
+ font-weight: 400;
429
370
  line-height: 1.25rem;
430
- padding: 0.625rem;
431
- }
432
- .tippy-box .tippy-arrow {
433
- position: relative;
434
- width: 1rem;
435
- height: 1rem;
371
+ color: white;
372
+ height: 25rem;
373
+ background-color: #142452;
374
+ border: none;
375
+ resize: none;
436
376
  }
437
- .tippy-box[data-placement^=top] .tippy-arrow:before {
438
- bottom: -0.4375rem;
439
- border-width: 0.5rem 0.5rem 0 !important;
377
+ .json-editor-container .json-editor textarea:focus, .json-editor-container .json-editor textarea:focus-within, .json-editor-container .json-editor textarea:focus-visible .json-editor-container .json-editor textarea:active {
378
+ outline: none;
379
+ border: none;
440
380
  }
441
- .tippy-box[data-placement^=right] .tippy-arrow:before {
442
- left: -0.4375rem;
443
- border-width: 0.5rem 0.5rem 0.5rem 0 !important;
381
+ .json-editor-container .json-editor textarea::-webkit-scrollbar {
382
+ width: 0.5rem;
444
383
  }
445
- .tippy-box[data-placement^=bottom] .tippy-arrow:before {
446
- top: -0.4375rem;
447
- border-width: 0 0.5rem 0.5rem !important;
384
+ .json-editor-container .json-editor textarea::-webkit-scrollbar-track {
385
+ background-color: #828699;
386
+ border: none;
387
+ border-color: transparent;
388
+ border-top-left-radius: 0;
448
389
  }
449
- .tippy-box[data-placement^=left] .tippy-arrow:before {
450
- right: -0.4375rem;
451
- border-width: 0.5rem 0 0.5rem 0.5rem !important;
390
+ .json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
391
+ background-color: #d8dae5;
392
+ border: none;
393
+ border-color: transparent;
394
+ border-radius: 0;
452
395
  }
453
- .tippy-box[data-placement^=bottom-start] .tippy-arrow {
454
- transform: translate(0.937rem, 0) !important;
396
+ .json-editor-container .json-editor.invalid {
397
+ outline: 1px solid #ce2828 !important;
455
398
  }
456
- .tippy-box[data-placement^=bottom-end] .tippy-arrow {
457
- margin-left: calc(100% - 1.937rem);
399
+ .json-editor-container .error-message {
400
+ color: #ce2828;
401
+ font-size: 0.75rem;
402
+ line-height: 1.25rem;
403
+ margin-top: 0.625rem;
404
+ }
405
+ .json-editor-container.disabled .json-editor textarea {
406
+ background-color: white;
407
+ color: #12131a;
408
+ }#common-dialog.dialog-content-wrapper {
409
+ overflow: visible !important;
410
+ max-height: 100%;
411
+ width: 22.1875rem;
412
+ }
413
+ #common-dialog.dialog-content-wrapper .dialog-content-root {
414
+ overflow: visible !important;
415
+ border-radius: 0.625rem;
416
+ max-height: 100%;
417
+ }
418
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
419
+ padding: 0 1.875rem !important;
420
+ overflow: visible !important;
421
+ max-height: 100%;
422
+ }
423
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
424
+ position: relative;
425
+ }
426
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
427
+ position: absolute;
428
+ z-index: 1;
429
+ top: 1.5rem;
430
+ right: 0;
431
+ transform: translate(0.625rem, -0.625rem);
432
+ cursor: pointer;
433
+ }
434
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
435
+ display: flex;
436
+ padding-top: 0.5rem;
437
+ position: relative;
438
+ }
439
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
440
+ margin-top: 1rem;
441
+ margin-bottom: 1.5rem;
442
+ margin-inline: auto;
443
+ }
444
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
445
+ stroke: #12131a;
446
+ }
447
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
448
+ stroke: #12131a;
449
+ }
450
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
451
+ fill: #12131a;
452
+ }
453
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
454
+ stroke: #faad14;
455
+ }
456
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
457
+ stroke: #faad14;
458
+ }
459
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
460
+ stroke: #da3f3f;
461
+ }
462
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
463
+ stroke: #da3f3f;
464
+ }
465
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
466
+ fill: #da3f3f;
467
+ }
468
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
469
+ font-size: 1.5rem;
470
+ font-weight: 500;
471
+ line-height: 1.875rem;
472
+ text-align: center;
473
+ margin-bottom: 0.625rem;
474
+ }
475
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
476
+ color: #da3f3f;
477
+ }
478
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
479
+ color: #faad14;
480
+ }
481
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
482
+ display: flex;
483
+ gap: 1.25rem;
484
+ margin-top: 1.875rem;
485
+ }p.apiName {
486
+ font-size: 40px;
487
+ line-height: 30px;
488
+ font-weight: 500;
489
+ }.tooltip-custom-wrapper {
490
+ display: flex;
491
+ }
492
+
493
+ .tippy-box {
494
+ background-color: #202f5b;
495
+ font-size: 0.875rem;
496
+ border-radius: 0.3125rem;
497
+ width: max-content;
498
+ max-width: 100%;
499
+ overflow-wrap: break-word;
500
+ word-break: break-word;
501
+ position: relative;
502
+ border: 1px solid #d8dae5;
503
+ }
504
+ .tippy-box.function .tippy-content {
505
+ background-color: #fff !important;
506
+ color: #000 !important;
507
+ }
508
+ .tippy-box[data-placement] > .tippy-arrow:before {
509
+ color: #fff !important;
510
+ }
511
+ .tippy-box.info .tippy-arrow {
512
+ color: #202f5b;
513
+ }
514
+ .tippy-box.success {
515
+ border-radius: 1.875rem;
516
+ background-color: #3aaa35;
517
+ padding-inline: 0.625rem;
518
+ }
519
+ .tippy-box .tippy-content {
520
+ text-align: justify;
521
+ font-size: 0.875rem;
522
+ line-height: 1.25rem;
523
+ padding: 0.625rem;
524
+ }
525
+ .tippy-box .tippy-arrow {
526
+ position: relative;
527
+ width: 1rem;
528
+ height: 1rem;
529
+ }
530
+ .tippy-box[data-placement^=top] .tippy-arrow:before {
531
+ bottom: -0.4375rem;
532
+ border-width: 0.5rem 0.5rem 0 !important;
533
+ }
534
+ .tippy-box[data-placement^=right] .tippy-arrow:before {
535
+ left: -0.4375rem;
536
+ border-width: 0.5rem 0.5rem 0.5rem 0 !important;
537
+ }
538
+ .tippy-box[data-placement^=bottom] .tippy-arrow:before {
539
+ top: -0.4375rem;
540
+ border-width: 0 0.5rem 0.5rem !important;
541
+ }
542
+ .tippy-box[data-placement^=left] .tippy-arrow:before {
543
+ right: -0.4375rem;
544
+ border-width: 0.5rem 0 0.5rem 0.5rem !important;
545
+ }
546
+ .tippy-box[data-placement^=bottom-start] .tippy-arrow {
547
+ transform: translate(0.937rem, 0) !important;
548
+ }
549
+ .tippy-box[data-placement^=bottom-end] .tippy-arrow {
550
+ margin-left: calc(100% - 1.937rem);
458
551
  transform: translate(0, 0) !important;
459
552
  }
460
553
  .tippy-box[data-placement^=top-start] .tippy-arrow {
@@ -473,15 +566,15 @@
473
566
  height: 1px;
474
567
  }
475
568
  .tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
476
- width: 1rem;
477
- height: 1rem;
569
+ width: 0.625rem;
570
+ height: 0.625rem;
478
571
  background-color: white;
479
572
  transform: rotate(45deg);
480
573
  border: none;
481
574
  border-left: 1px solid #d8dae5 !important;
482
575
  border-top: 1px solid #d8dae5 !important;
483
576
  z-index: 20000000000;
484
- top: -0.6rem;
577
+ top: -0.45rem;
485
578
  transform-origin: center !important;
486
579
  }:root {
487
580
  --white: #fff;
@@ -565,240 +658,128 @@
565
658
  --alert-natural: #c4d3f1;
566
659
  }
567
660
 
568
- .tableSectionContainer .tableContainer {
569
- max-width: 100%;
570
- overflow-x: overlay;
661
+ .drawerItemContainer {
662
+ display: flex;
663
+ flex-direction: column;
571
664
  }
572
- .tableSectionContainer .tableContainer.tableContainer * {
573
- font-family: "Cairo";
665
+ .drawerItemContainer .title {
666
+ color: #000;
667
+ font-weight: 600;
668
+ font-size: 24px;
669
+ line-height: 35px;
670
+ margin-bottom: 3px;
671
+ margin-top: 1.5rem;
574
672
  }
575
- .tableSectionContainer .tableContainer .table {
576
- width: 100%;
577
- border-spacing: 0;
578
- border: none;
579
- border-right: 1px solid var(--border-color-neutral);
580
- border-left: 1px solid var(--border-color-neutral);
673
+ .drawerItemContainer .text {
674
+ color: #000;
675
+ font-weight: 400;
676
+ font-size: 24px;
677
+ line-height: 25px;
581
678
  }
582
- .tableSectionContainer .tableContainer .table.borderRadiusTop {
583
- border-top-left-radius: 0.625rem;
584
- border-top-right-radius: 0.625rem;
679
+ .drawerItemContainer .color-green {
680
+ color: var(--color-success);
585
681
  }
586
- .tableSectionContainer .tableContainer .table.borderRadiusBottom {
587
- border-bottom-left-radius: 0.625rem;
588
- border-bottom-right-radius: 0.625rem;
682
+ .drawerItemContainer .color-red {
683
+ color: var(--color-error);
684
+ }.apiInfoForm {
685
+ display: grid;
686
+ padding: 1.25rem 1.875rem;
687
+ gap: 1.25rem;
589
688
  }
590
- .tableSectionContainer .tableContainer .table .tableHead {
591
- border: 1px solid var(--Gray-10);
592
- margin: 0rem !important;
593
- background-color: var(--background-color-header);
594
- width: max-content;
595
- min-width: 100%;
596
- color: var(--Gray-50);
597
- font-weight: 400;
689
+ .apiInfoForm .paramsTable .paramDescContainer {
690
+ display: flex;
598
691
  }
599
- .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell {
600
- border-bottom: 1px solid var(--border-color-neutral);
601
- border-top: 1px solid var(--border-color-neutral);
602
- font-style: normal;
603
- font-size: 0.875rem;
604
- padding: 0.75rem 1.875rem;
605
- text-align: start;
606
- white-space: nowrap;
607
- color: inherit;
608
- font-weight: inherit;
692
+ .apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
693
+ height: inherit;
694
+ width: 1px;
695
+ background-color: #d8dae5;
609
696
  }
610
- .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell .sortIcon {
611
- padding: 0rem 0.25rem;
612
- height: 1.875rem;
613
- cursor: pointer;
697
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
698
+ stroke-width: 0.1;
614
699
  }
615
- .tableSectionContainer .tableContainer .table .tableHead .headContainer {
700
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
701
+ padding: 0;
702
+ margin-right: 1.25rem;
703
+ }
704
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
616
705
  display: flex;
617
- flex-direction: row;
618
706
  align-items: center;
619
- text-overflow: ellipsis;
620
- }
621
- .tableSectionContainer .tableContainer .table .tableBody tr {
622
- background-color: var(--background-color-white-secondary);
623
- overflow: visible !important;
707
+ padding: 0;
708
+ color: #12131a;
624
709
  }
625
- .tableSectionContainer .tableContainer .table .tableBody tr .tippy-content {
626
- background-color: var(--border-color-hover);
627
- color: var(--text-color-disabled);
628
- border-radius: 5px;
629
- font-size: 14px;
630
- font-weight: 400;
631
- line-height: 20px;
632
- text-align: left;
710
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
711
+ margin-block: auto;
633
712
  }
634
- .tableSectionContainer .tableContainer .table .tableBody tr .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
635
- color: var(--border-color-hover);
713
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
714
+ fill: #12131a;
636
715
  }
637
- .tableSectionContainer .tableContainer .table .tableBody tr.rowSelected {
638
- background-color: var(--background-color-gray-40);
716
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
717
+ padding: 0;
639
718
  }
640
- .tableSectionContainer .tableContainer .table .tableBody tr td {
641
- font-weight: 400;
642
- font-size: 0.875rem;
643
- text-align: start;
644
- color: var(--text-color-primary);
645
- border-bottom: 1px solid var(--border-color-gray);
646
- width: max-content;
647
- white-space: nowrap;
648
- height: 3.75rem;
649
- padding: 0.75rem 1.875rem;
650
- overflow: visible !important;
651
- }
652
- .tableSectionContainer .tableContainer .table .tableBody tr td .tableData {
653
- max-width: 100%;
654
- width: fit-content;
655
- white-space: nowrap;
656
- text-overflow: ellipsis;
657
- overflow: visible !important;
658
- }
659
- .tableSectionContainer .tableContainer .table .tableBody tr td:nth-child(2) .tableData .customBtn .btnContentWrapper .endBtnIcon svg path,
660
- .tableSectionContainer .tableContainer .table .tableBody tr td:nth-child(2) .tableData .customBtn :link .btnContentWrapper .endBtnIcon svg path,
661
- .tableSectionContainer .tableContainer .table .tableBody tr td:nth-child(2) .tableData .customBtn :visited .btnContentWrapper .endBtnIcon svg path {
662
- stroke-width: 0.1 !important;
663
- fill: #12131a !important;
719
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
720
+ margin-block: auto;
664
721
  }
665
- .tableSectionContainer .tableContainer .table .tableBody tr:hover {
666
- background-color: var(--background-color-gray-10);
722
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
723
+ width: 1.125rem;
667
724
  }
668
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow {
669
- background-color: var(--background-color-white-secondary);
670
- height: 4.375rem;
725
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) {
726
+ margin-block: auto;
671
727
  }
672
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow:hover {
673
- background-color: var(--background-color-white-secondary);
728
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg {
729
+ width: 1.125rem;
674
730
  }
675
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer {
676
- width: 100%;
677
- height: 100%;
678
- color: var(--text-color-quaternary);
731
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn):not(:global(.disabled)):global(.success) :global(.endBtnIcon) svg path {
732
+ fill: #3aaa35;
679
733
  }
680
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer {
734
+ .apiInfoForm .paramsTable .editDescTooltipContent {
681
735
  display: flex;
682
- flex-direction: row;
683
- align-items: center;
684
- justify-content: center;
685
- width: 100%;
686
- height: 100%;
736
+ flex-direction: column;
737
+ gap: 0.625rem;
738
+ padding-bottom: 0.625rem;
687
739
  }
688
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer .fallbackText {
689
- font-style: normal;
690
- font-weight: 400;
740
+ .apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
741
+ margin-inline: 0.625rem;
742
+ }
743
+ .apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
744
+ font-weight: 600;
691
745
  font-size: 0.875rem;
692
746
  line-height: 1.25rem;
747
+ padding: 0.75rem 1.25rem;
748
+ border-bottom: 1px solid #d8dae5;
693
749
  }
694
- .tableSectionContainer .tableContainer .table th,
695
- .tableSectionContainer .tableContainer .table td {
696
- text-align: left;
697
- }
698
- .tableSectionContainer .tableFooterContainer {
699
- display: flex;
700
- width: 100%;
701
- height: auto;
702
- }
703
- .tableSectionContainer .ascArrow {
704
- height: 0.8125rem;
705
- margin-bottom: 0.4375rem;
706
- cursor: pointer;
707
- }
708
- .tableSectionContainer .descArrow {
709
- height: 0.8125rem;
710
- margin-top: 0.4375rem;
711
- cursor: pointer;
712
- }
713
- .tableSectionContainer .defaultSortArrow {
714
- height: 1.25rem;
715
- cursor: pointer;
716
- }
717
- .tableSectionContainer .ascArrow path,
718
- .tableSectionContainer .descArrow path,
719
- .tableSectionContainer .defaultSortArrow path {
720
- fill: var(--Gray-50);
721
- }p.apiName {
722
- font-size: 40px;
723
- line-height: 30px;
724
- font-weight: 500;
725
- }#common-dialog.dialog-content-wrapper {
726
- overflow: visible !important;
727
- max-height: 100%;
728
- width: 22.1875rem;
729
- }
730
- #common-dialog.dialog-content-wrapper .dialog-content-root {
731
- overflow: visible !important;
732
- border-radius: 0.625rem;
733
- max-height: 100%;
734
- }
735
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
736
- padding: 0 1.875rem !important;
737
- overflow: visible !important;
738
- max-height: 100%;
750
+ .apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
751
+ content: "*";
752
+ color: red;
753
+ transform: translateX(0.125rem);
739
754
  }
740
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
741
- position: relative;
755
+ .apiInfoForm .apiDocRow {
756
+ display: grid;
757
+ grid-template-columns: 1fr 1fr;
758
+ gap: 1.25rem;
742
759
  }
743
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
744
- position: absolute;
745
- z-index: 1;
746
- top: 1.5rem;
747
- right: 0;
748
- transform: translate(0.625rem, -0.625rem);
749
- cursor: pointer;
760
+ .apiInfoForm .apiInfoForm_tagsChips {
761
+ margin-top: -1.25rem;
750
762
  }
751
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
763
+ .apiInfoForm .editDescTooltipContent {
752
764
  display: flex;
753
- padding-top: 0.5rem;
754
- position: relative;
755
- }
756
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
757
- margin-top: 1rem;
758
- margin-bottom: 1.5rem;
759
- margin-inline: auto;
760
- }
761
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
762
- stroke: #12131a;
763
- }
764
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
765
- stroke: #12131a;
766
- }
767
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
768
- fill: #12131a;
769
- }
770
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
771
- stroke: #faad14;
772
- }
773
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
774
- stroke: #faad14;
775
- }
776
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
777
- stroke: #da3f3f;
778
- }
779
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
780
- stroke: #da3f3f;
781
- }
782
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
783
- fill: #da3f3f;
784
- }
785
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
786
- font-size: 1.5rem;
787
- font-weight: 500;
788
- line-height: 1.875rem;
789
- text-align: center;
790
- margin-bottom: 0.625rem;
765
+ flex-direction: column;
766
+ gap: 0.625rem;
767
+ padding-bottom: 0.625rem;
791
768
  }
792
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
793
- color: #da3f3f;
769
+ .apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
770
+ margin-inline: 0.625rem;
794
771
  }
795
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
796
- color: #faad14;
772
+ .apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
773
+ font-weight: 600;
774
+ font-size: 0.875rem;
775
+ line-height: 1.25rem;
776
+ padding: 0.75rem 1.25rem;
777
+ border-bottom: 1px solid #d8dae5;
797
778
  }
798
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
799
- display: flex;
800
- gap: 1.25rem;
801
- margin-top: 1.875rem;
779
+ .apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
780
+ content: "*";
781
+ color: red;
782
+ transform: translateX(0.125rem);
802
783
  }:root {
803
784
  --white: #fff;
804
785
  --Gray-5: #f1f2f6;
@@ -881,138 +862,157 @@
881
862
  --alert-natural: #c4d3f1;
882
863
  }
883
864
 
884
- .drawerItemContainer {
885
- display: flex;
886
- flex-direction: column;
865
+ .tableSectionContainer .tableContainer {
866
+ max-width: 100%;
867
+ overflow-x: overlay;
887
868
  }
888
- .drawerItemContainer .title {
889
- color: #000;
890
- font-weight: 600;
891
- font-size: 24px;
892
- line-height: 35px;
893
- margin-bottom: 3px;
894
- margin-top: 1.5rem;
869
+ .tableSectionContainer .tableContainer.tableContainer * {
870
+ font-family: "Cairo";
895
871
  }
896
- .drawerItemContainer .text {
897
- color: #000;
898
- font-weight: 400;
899
- font-size: 24px;
900
- line-height: 25px;
872
+ .tableSectionContainer .tableContainer .table {
873
+ width: 100%;
874
+ border-spacing: 0;
875
+ border: none;
876
+ border-right: 1px solid var(--border-color-neutral);
877
+ border-left: 1px solid var(--border-color-neutral);
901
878
  }
902
- .drawerItemContainer .color-green {
903
- color: var(--color-success);
879
+ .tableSectionContainer .tableContainer .table.borderRadiusTop {
880
+ border-top-left-radius: 0.625rem;
881
+ border-top-right-radius: 0.625rem;
904
882
  }
905
- .drawerItemContainer .color-red {
906
- color: var(--color-error);
907
- }.json-editor-container {
908
- overflow: hidden;
909
- border-bottom-right-radius: 0.3125rem;
910
- border-bottom-left-radius: 0.3125rem;
883
+ .tableSectionContainer .tableContainer .table.borderRadiusBottom {
884
+ border-bottom-left-radius: 0.625rem;
885
+ border-bottom-right-radius: 0.625rem;
911
886
  }
912
- .json-editor-container .json-editor-label {
887
+ .tableSectionContainer .tableContainer .table .tableHead {
888
+ border: 1px solid var(--Gray-10);
889
+ margin: 0rem !important;
890
+ background-color: var(--background-color-header);
891
+ width: max-content;
892
+ min-width: 100%;
893
+ color: var(--Gray-50);
894
+ font-weight: 400;
895
+ }
896
+ .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell {
897
+ border-bottom: 1px solid var(--border-color-neutral);
898
+ border-top: 1px solid var(--border-color-neutral);
899
+ font-style: normal;
913
900
  font-size: 0.875rem;
914
- font-weight: 600;
915
- line-height: 1.25rem;
916
- margin-bottom: 0.3125rem;
901
+ padding: 0.75rem 1.875rem;
902
+ text-align: start;
903
+ white-space: nowrap;
904
+ color: inherit;
905
+ font-weight: inherit;
917
906
  }
918
- .json-editor-container .json-editor {
919
- display: flex;
920
- flex-direction: column;
921
- background-color: #142452;
922
- width: 100%;
923
- outline: 1px solid transparent;
924
- position: relative;
925
- overflow: hidden;
907
+ .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell .sortIcon {
908
+ padding: 0rem 0.25rem;
909
+ height: 1.875rem;
910
+ cursor: pointer;
926
911
  }
927
- .json-editor-container .json-editor .actions-container {
928
- width: 100%;
929
- height: 5rem;
930
- padding: 1.25rem;
931
- border-radius: 0 0 0.3125rem 0.3125rem;
932
- background: #101e47;
912
+ .tableSectionContainer .tableContainer .table .tableHead .headContainer {
933
913
  display: flex;
934
914
  flex-direction: row;
935
- gap: 1.25rem;
936
915
  align-items: center;
916
+ text-overflow: ellipsis;
937
917
  }
938
- .json-editor-container .json-editor .actions-container .validate {
939
- color: #fff;
940
- text-align: center;
941
- font-size: 1rem;
942
- font-style: normal;
943
- font-weight: 600;
944
- line-height: 1.25rem;
945
- width: 8.75rem;
946
- padding: 0.625rem 2.25rem;
947
- background-color: rgba(240, 248, 255, 0);
948
- border-radius: 0.3125rem;
949
- border: 0.0625rem solid #4d75d8;
950
- cursor: pointer;
918
+ .tableSectionContainer .tableContainer .table .tableBody tr {
919
+ background-color: var(--background-color-white-secondary);
920
+ overflow: visible !important;
951
921
  }
952
- .json-editor-container .json-editor .actions-container .validate:disabled {
953
- color: #babdcc;
954
- border-color: #a2a5b6;
922
+ .tableSectionContainer .tableContainer .table .tableBody tr .tippy-content {
923
+ background-color: var(--border-color-hover);
924
+ color: var(--text-color-disabled);
925
+ border-radius: 5px;
926
+ font-size: 14px;
927
+ font-weight: 400;
928
+ line-height: 20px;
929
+ text-align: left;
955
930
  }
956
- .json-editor-container .json-editor .actions-container .beautify {
957
- color: #fff;
958
- text-align: center;
959
- font-size: 1rem;
960
- font-style: normal;
961
- font-weight: 600;
962
- line-height: 1.25rem;
963
- width: 8.75rem;
964
- padding: 0.625rem 2.25rem;
965
- background-color: rgba(240, 248, 255, 0);
966
- border-radius: 0.3125rem;
967
- border: 1px solid #babdcc;
968
- cursor: pointer;
931
+ .tableSectionContainer .tableContainer .table .tableBody tr .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
932
+ color: var(--border-color-hover);
969
933
  }
970
- .json-editor-container .json-editor .actions-container .beautify:disabled {
971
- color: #a2a5b6;
972
- border-color: #a2a5b6;
934
+ .tableSectionContainer .tableContainer .table .tableBody tr.rowSelected {
935
+ background-color: var(--background-color-gray-40);
973
936
  }
974
- .json-editor-container .json-editor textarea {
975
- width: 100%;
976
- padding: 1.25rem;
937
+ .tableSectionContainer .tableContainer .table .tableBody tr td {
938
+ font-weight: 400;
977
939
  font-size: 0.875rem;
940
+ text-align: start;
941
+ color: var(--text-color-primary);
942
+ border-bottom: 1px solid var(--border-color-gray);
943
+ width: max-content;
944
+ white-space: nowrap;
945
+ height: 3.75rem;
946
+ padding: 0.75rem 1.875rem;
947
+ overflow: visible !important;
948
+ }
949
+ .tableSectionContainer .tableContainer .table .tableBody tr td .tableData {
950
+ max-width: 100%;
951
+ width: fit-content;
952
+ white-space: nowrap;
953
+ text-overflow: ellipsis;
954
+ overflow: visible !important;
955
+ }
956
+ .tableSectionContainer .tableContainer .table .tableBody tr td:nth-child(2) .tableData .customBtn .btnContentWrapper .endBtnIcon svg path,
957
+ .tableSectionContainer .tableContainer .table .tableBody tr td:nth-child(2) .tableData .customBtn :link .btnContentWrapper .endBtnIcon svg path,
958
+ .tableSectionContainer .tableContainer .table .tableBody tr td:nth-child(2) .tableData .customBtn :visited .btnContentWrapper .endBtnIcon svg path {
959
+ stroke-width: 0.1 !important;
960
+ fill: #12131a !important;
961
+ }
962
+ .tableSectionContainer .tableContainer .table .tableBody tr:hover {
963
+ background-color: var(--background-color-gray-10);
964
+ }
965
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow {
966
+ background-color: var(--background-color-white-secondary);
967
+ height: 4.375rem;
968
+ }
969
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow:hover {
970
+ background-color: var(--background-color-white-secondary);
971
+ }
972
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer {
973
+ width: 100%;
974
+ height: 100%;
975
+ color: var(--text-color-quaternary);
976
+ }
977
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer {
978
+ display: flex;
979
+ flex-direction: row;
980
+ align-items: center;
981
+ justify-content: center;
982
+ width: 100%;
983
+ height: 100%;
984
+ }
985
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer .fallbackText {
978
986
  font-style: normal;
979
987
  font-weight: 400;
988
+ font-size: 0.875rem;
980
989
  line-height: 1.25rem;
981
- color: white;
982
- height: 25rem;
983
- background-color: #142452;
984
- border: none;
985
- resize: none;
986
- }
987
- .json-editor-container .json-editor textarea:focus, .json-editor-container .json-editor textarea:focus-within, .json-editor-container .json-editor textarea:focus-visible .json-editor-container .json-editor textarea:active {
988
- outline: none;
989
- border: none;
990
990
  }
991
- .json-editor-container .json-editor textarea::-webkit-scrollbar {
992
- width: 0.5rem;
991
+ .tableSectionContainer .tableContainer .table th,
992
+ .tableSectionContainer .tableContainer .table td {
993
+ text-align: left;
993
994
  }
994
- .json-editor-container .json-editor textarea::-webkit-scrollbar-track {
995
- background-color: #828699;
996
- border: none;
997
- border-color: transparent;
998
- border-top-left-radius: 0;
995
+ .tableSectionContainer .tableFooterContainer {
996
+ display: flex;
997
+ width: 100%;
998
+ height: auto;
999
999
  }
1000
- .json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
1001
- background-color: #d8dae5;
1002
- border: none;
1003
- border-color: transparent;
1004
- border-radius: 0;
1000
+ .tableSectionContainer .ascArrow {
1001
+ height: 0.8125rem;
1002
+ margin-bottom: 0.4375rem;
1003
+ cursor: pointer;
1005
1004
  }
1006
- .json-editor-container .json-editor.invalid {
1007
- outline: 1px solid #ce2828 !important;
1005
+ .tableSectionContainer .descArrow {
1006
+ height: 0.8125rem;
1007
+ margin-top: 0.4375rem;
1008
+ cursor: pointer;
1008
1009
  }
1009
- .json-editor-container .error-message {
1010
- color: #ce2828;
1011
- font-size: 0.75rem;
1012
- line-height: 1.25rem;
1013
- margin-top: 0.625rem;
1010
+ .tableSectionContainer .defaultSortArrow {
1011
+ height: 1.25rem;
1012
+ cursor: pointer;
1014
1013
  }
1015
- .json-editor-container.disabled .json-editor textarea {
1016
- background-color: white;
1017
- color: #12131a;
1014
+ .tableSectionContainer .ascArrow path,
1015
+ .tableSectionContainer .descArrow path,
1016
+ .tableSectionContainer .defaultSortArrow path {
1017
+ fill: var(--Gray-50);
1018
1018
  }