@digi-frontend/dgate-api-documentation 1.0.7 → 1.0.8

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/_virtual/index5.js +1 -1
  2. package/dist/_virtual/index6.js +1 -1
  3. package/dist/node_modules/js-yaml/dist/js-yaml.mjs.js +3 -0
  4. package/dist/node_modules/js-yaml/dist/js-yaml.mjs.js.map +1 -0
  5. package/dist/node_modules/yup/index.esm.js +1 -1
  6. package/dist/src/components/InfoForm/InfoForm.js +1 -1
  7. package/dist/src/components/InfoForm/InfoForm.js.map +1 -1
  8. package/dist/src/components/JsonInput/JsonInput.js +2 -0
  9. package/dist/src/components/JsonInput/JsonInput.js.map +1 -0
  10. package/dist/src/components/JsonInput/style.module.scss.js +2 -0
  11. package/dist/src/components/JsonInput/style.module.scss.js.map +1 -0
  12. package/dist/src/components/MethodAccordion/MethodAccordion.js +1 -1
  13. package/dist/src/components/MethodAccordion/MethodAccordion.js.map +1 -1
  14. package/dist/src/components/table/table.js +1 -1
  15. package/dist/src/components/table/table.js.map +1 -1
  16. package/dist/src/components/table/tags-table.js +2 -0
  17. package/dist/src/components/table/tags-table.js.map +1 -0
  18. package/dist/src/constants/index.js +1 -1
  19. package/dist/src/constants/index.js.map +1 -1
  20. package/dist/src/helpers/layout.helper.js +1 -1
  21. package/dist/src/helpers/layout.helper.js.map +1 -1
  22. package/dist/src/layout/layout.js +1 -1
  23. package/dist/src/layout/layout.js.map +1 -1
  24. package/dist/src/layout/layout.module.css.js +1 -1
  25. package/dist/styles.css +543 -362
  26. package/dist/types/components/InfoForm/InfoForm.d.ts +3 -1
  27. package/dist/types/components/JsonInput/JsonInput.d.ts +13 -0
  28. package/dist/types/components/MethodAccordion/MethodAccordion.d.ts +1 -2
  29. package/dist/types/components/table/tags-table.d.ts +11 -0
  30. package/dist/types/constants/index.d.ts +18 -4
  31. package/dist/types/layout/layout.d.ts +1 -0
  32. package/dist/types/types/layout.type.d.ts +9 -1
  33. package/dist/types/types/openApi.d.ts +13 -1
  34. package/package.json +2 -2
  35. package/src/components/table/table.tsx +3 -3
package/dist/styles.css CHANGED
@@ -1,103 +1,322 @@
1
- #common-dialog.dialog-content-wrapper {
2
- overflow: visible !important;
3
- max-height: 100%;
4
- width: 22.1875rem;
1
+ .apiInfoForm {
2
+ display: grid;
3
+ padding: 1.25rem 1.875rem;
4
+ gap: 1.25rem;
5
5
  }
6
- #common-dialog.dialog-content-wrapper .dialog-content-root {
7
- overflow: visible !important;
8
- border-radius: 0.625rem;
9
- max-height: 100%;
6
+ .apiInfoForm .paramsTable .paramDescContainer {
7
+ display: flex;
10
8
  }
11
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
12
- padding: 0 1.875rem !important;
13
- overflow: visible !important;
14
- max-height: 100%;
9
+ .apiInfoForm .paramsTable .paramDescContainer .paramDescContainer_separator {
10
+ height: inherit;
11
+ width: 1px;
12
+ background-color: #d8dae5;
15
13
  }
16
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
17
- position: relative;
14
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn) svg path {
15
+ stroke-width: 0.1;
18
16
  }
19
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
20
- position: absolute;
21
- z-index: 1;
22
- top: 1.5rem;
23
- right: 0;
24
- transform: translate(0.625rem, -0.625rem);
25
- cursor: pointer;
17
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn {
18
+ padding: 0;
19
+ margin-right: 1.25rem;
26
20
  }
27
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
21
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) {
28
22
  display: flex;
29
- padding-top: 0.5rem;
30
- position: relative;
23
+ align-items: center;
24
+ padding: 0;
25
+ color: #12131a;
31
26
  }
32
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
33
- margin-top: 1rem;
34
- margin-bottom: 1.5rem;
35
- margin-inline: auto;
27
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
28
+ margin-block: auto;
36
29
  }
37
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
38
- stroke: #12131a;
30
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).editDescBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg path {
31
+ fill: #12131a;
39
32
  }
40
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
41
- stroke: #12131a;
33
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn {
34
+ padding: 0;
42
35
  }
43
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
44
- fill: #12131a;
36
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) {
37
+ margin-block: auto;
45
38
  }
46
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
47
- stroke: #faad14;
39
+ .apiInfoForm .paramsTable .paramDescContainer :global(.customBtn).deleteParamBtn :global(.btnContentWrapper) :global(.endBtnIcon) svg {
40
+ width: 1.125rem;
48
41
  }
49
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
50
- stroke: #faad14;
42
+ .apiInfoForm .paramsTable .editDescTooltipContent {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 0.625rem;
46
+ padding-bottom: 0.625rem;
51
47
  }
52
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
53
- stroke: #da3f3f;
48
+ .apiInfoForm .paramsTable .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
49
+ margin-inline: 0.625rem;
54
50
  }
55
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
56
- stroke: #da3f3f;
51
+ .apiInfoForm .paramsTable .editDescTooltipContent .editDescTooltipContent_header {
52
+ font-weight: 600;
53
+ font-size: 0.875rem;
54
+ line-height: 1.25rem;
55
+ padding: 0.75rem 1.25rem;
56
+ border-bottom: 1px solid #d8dae5;
57
57
  }
58
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
59
- fill: #da3f3f;
58
+ .apiInfoForm .paramsTable :global(.requiredParam) :global(.headContainer)::after {
59
+ content: "*";
60
+ color: red;
61
+ transform: translateX(0.125rem);
60
62
  }
61
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
62
- font-size: 1.5rem;
63
- font-weight: 500;
64
- line-height: 1.875rem;
65
- text-align: center;
66
- margin-bottom: 0.625rem;
63
+ .apiInfoForm .apiDocRow {
64
+ display: grid;
65
+ grid-template-columns: 1fr 1fr;
66
+ gap: 1.25rem;
67
67
  }
68
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
69
- color: #da3f3f;
68
+ .apiInfoForm .apiInfoForm_tagsChips {
69
+ margin-top: -1.25rem;
70
70
  }
71
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
72
- color: #faad14;
71
+ .apiInfoForm .editDescTooltipContent {
72
+ display: flex;
73
+ flex-direction: column;
74
+ gap: 0.625rem;
75
+ padding-bottom: 0.625rem;
73
76
  }
74
- #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
77
+ .apiInfoForm .editDescTooltipContent > *:not(.editDescTooltipContent_header) {
78
+ margin-inline: 0.625rem;
79
+ }
80
+ .apiInfoForm .editDescTooltipContent .editDescTooltipContent_header {
81
+ font-weight: 600;
82
+ font-size: 0.875rem;
83
+ line-height: 1.25rem;
84
+ padding: 0.75rem 1.25rem;
85
+ border-bottom: 1px solid #d8dae5;
86
+ }
87
+ .apiInfoForm :global(.requiredParam) :global(.headContainer)::after {
88
+ content: "*";
89
+ color: red;
90
+ transform: translateX(0.125rem);
91
+ }:root {
92
+ --white: #fff;
93
+ --Gray-5: #f1f2f6;
94
+ --Gray-10: #ebecf2;
95
+ --Gray-20: #d8dae5;
96
+ --Gray-30: #babdcc;
97
+ --Gray-40: #9a9eb2;
98
+ --Gray-50: #828699;
99
+ --Gray-60: #696c80;
100
+ --Gray-100: #12131a;
101
+ --black: #000;
102
+ --primary-static: #4d75d8;
103
+ --primary-hover: #7c9bea;
104
+ --primary-active: #2c4fa4;
105
+ --primary-disabled: #9a9eb2;
106
+ --secondary-static: #40e0d0;
107
+ --secondary-hover: #9efcf2;
108
+ --secondary-active: #2fa599;
109
+ --error-static: #da3f3f;
110
+ --error-hover: #e75d5d;
111
+ --error-active: #bb3232;
112
+ --success-static: #3aaa35;
113
+ --success-hover: #5cda56;
114
+ --success-active: #2a8a25;
115
+ --info-static: #c6c6c6;
116
+ --info-hover: #e4e4e4;
117
+ --info-active: #979797;
118
+ --warning-static: #faad14;
119
+ --warning-hover: #f9be4a;
120
+ --warning-active: #db9711;
121
+ --action-static: #142452;
122
+ --action-hover: #21387d;
123
+ --action-active: #000000;
124
+ --color-info-primary: #3a6cd1;
125
+ --primary-font-color: #142452;
126
+ --placeholder-font-color: #babdcc;
127
+ --warning-font-color: #ce2828;
128
+ --alert-error: #da3f3f;
129
+ --alert-light-error: #f4c5c5;
130
+ --alert-success: #3aaa35;
131
+ --alert-light-success: #c4e5c2;
132
+ --alert-info: #8eaaf1;
133
+ --alert-light-info: #c4d3f1;
134
+ --alert-warning: #faad14;
135
+ --alert-light-warning: #fde6b8;
136
+ --border-focus: #3a6cd1;
137
+ --tooltip-background-color: #202f5b;
138
+ --text-color-primary: #142452;
139
+ --text-color-secondary: #ffff;
140
+ --text-color-neutral: #828699;
141
+ --text-color-tertiary: #808080;
142
+ --text-color-note: #242424;
143
+ --text-color-quaternary: #142452;
144
+ --text-color-disabled: #ffff;
145
+ --background-color-white-primary: #fff;
146
+ --background-color-light-primary: #8eaaf1;
147
+ --background-color-white-secondary: #fff;
148
+ --background-color-primary-dark: #142452;
149
+ --background-color-gray-5: #f1f2f6;
150
+ --background-color-gray-30: #ebecf2;
151
+ --background-color-tertiary-light: #2c4fa4;
152
+ --background-color-gray-10: #f1f2f6;
153
+ --background-color-gray-40: #ebecf2;
154
+ --background-color-light-blue: #dfe7f8;
155
+ --border-color-primary: #babdcc;
156
+ --border-color-secondary: #d8dae5;
157
+ --border-color-neutral: #ebecf2;
158
+ --border-color-tertiary: #ebecf2;
159
+ --border-color-gray: #ebecf2;
160
+ --border-color-hover: #142452;
161
+ --border-color-active: #3a6cd1;
162
+ --icon-color-main: #142452;
163
+ --icon-color-secondary: #000;
164
+ --icon-color-quaternary: #babdcc;
165
+ --icon-color-disabled: #9a9eb2;
166
+ --link-btn-primary-color: #3a6cd1;
167
+ --button-color-static: #4d75d8;
168
+ --button-color-hover: #7c9bea;
169
+ --button-color-active: #2c4fa4;
170
+ --alert-natural: #c4d3f1;
171
+ }
172
+
173
+ .tableSectionContainer .tableContainer {
174
+ max-width: 100%;
175
+ overflow-x: overlay;
176
+ }
177
+ .tableSectionContainer .tableContainer.tableContainer * {
178
+ font-family: "Cairo";
179
+ }
180
+ .tableSectionContainer .tableContainer .table {
181
+ width: 100%;
182
+ border-spacing: 0;
183
+ border: none;
184
+ border-right: 1px solid var(--border-color-neutral);
185
+ border-left: 1px solid var(--border-color-neutral);
186
+ }
187
+ .tableSectionContainer .tableContainer .table.borderRadiusTop {
188
+ border-top-left-radius: 0.625rem;
189
+ border-top-right-radius: 0.625rem;
190
+ }
191
+ .tableSectionContainer .tableContainer .table.borderRadiusBottom {
192
+ border-bottom-left-radius: 0.625rem;
193
+ border-bottom-right-radius: 0.625rem;
194
+ }
195
+ .tableSectionContainer .tableContainer .table .tableHead {
196
+ border: 1px solid var(--Gray-10);
197
+ margin: 0rem !important;
198
+ background-color: var(--background-color-header);
199
+ width: max-content;
200
+ min-width: 100%;
201
+ color: var(--Gray-50);
202
+ font-weight: 400;
203
+ }
204
+ .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell {
205
+ border-bottom: 1px solid var(--border-color-neutral);
206
+ border-top: 1px solid var(--border-color-neutral);
207
+ font-style: normal;
208
+ font-size: 0.875rem;
209
+ padding: 0.75rem 1.875rem;
210
+ text-align: start;
211
+ white-space: nowrap;
212
+ color: inherit;
213
+ font-weight: inherit;
214
+ }
215
+ .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell .sortIcon {
216
+ padding: 0rem 0.25rem;
217
+ height: 1.875rem;
218
+ cursor: pointer;
219
+ }
220
+ .tableSectionContainer .tableContainer .table .tableHead .headContainer {
75
221
  display: flex;
76
- gap: 1.25rem;
77
- margin-top: 1.875rem;
78
- }.containerTitleDrawer {
79
- height: 64px;
80
- min-height: 64px;
222
+ flex-direction: row;
223
+ align-items: center;
224
+ text-overflow: ellipsis;
225
+ }
226
+ .tableSectionContainer .tableContainer .table .tableBody tr {
227
+ background-color: var(--background-color-white-secondary);
228
+ overflow: visible !important;
229
+ }
230
+ .tableSectionContainer .tableContainer .table .tableBody tr .tippy-content {
231
+ background-color: var(--border-color-hover);
232
+ color: var(--text-color-disabled);
233
+ border-radius: 5px;
234
+ font-size: 14px;
235
+ font-weight: 400;
236
+ line-height: 20px;
237
+ text-align: left;
238
+ }
239
+ .tableSectionContainer .tableContainer .table .tableBody tr .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
240
+ color: var(--border-color-hover);
241
+ }
242
+ .tableSectionContainer .tableContainer .table .tableBody tr.rowSelected {
243
+ background-color: var(--background-color-gray-40);
244
+ }
245
+ .tableSectionContainer .tableContainer .table .tableBody tr td {
246
+ font-weight: 400;
247
+ font-size: 0.875rem;
248
+ text-align: start;
249
+ color: var(--text-color-primary);
250
+ border-bottom: 1px solid var(--border-color-gray);
251
+ width: max-content;
252
+ white-space: nowrap;
253
+ height: 3.75rem;
254
+ padding: 0.75rem 1.875rem;
255
+ overflow: visible !important;
256
+ }
257
+ .tableSectionContainer .tableContainer .table .tableBody tr td .tableData {
258
+ max-width: 100%;
259
+ width: fit-content;
260
+ white-space: nowrap;
261
+ text-overflow: ellipsis;
262
+ overflow: visible !important;
263
+ }
264
+ .tableSectionContainer .tableContainer .table .tableBody tr:hover {
265
+ background-color: var(--background-color-gray-10);
266
+ }
267
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow {
268
+ background-color: var(--background-color-white-secondary);
269
+ height: 4.375rem;
270
+ }
271
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow:hover {
272
+ background-color: var(--background-color-white-secondary);
273
+ }
274
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer {
275
+ width: 100%;
276
+ height: 100%;
277
+ color: var(--text-color-quaternary);
278
+ }
279
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer {
280
+ display: flex;
281
+ flex-direction: row;
282
+ align-items: center;
283
+ justify-content: center;
284
+ width: 100%;
285
+ height: 100%;
286
+ }
287
+ .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer .fallbackText {
288
+ font-style: normal;
289
+ font-weight: 400;
290
+ font-size: 0.875rem;
291
+ line-height: 1.25rem;
292
+ }
293
+ .tableSectionContainer .tableContainer .table th,
294
+ .tableSectionContainer .tableContainer .table td {
295
+ text-align: left;
296
+ }
297
+ .tableSectionContainer .tableFooterContainer {
81
298
  display: flex;
82
- flex-direction: row;
83
- justify-content: space-between;
84
- align-items: center;
85
- background-color: #f1f2f6;
86
- padding: 0 30px 0 30px;
87
299
  width: 100%;
300
+ height: auto;
88
301
  }
89
- .containerTitleDrawer span {
90
- color: #12131a;
91
- font-weight: 600;
92
- font-size: 18px;
93
- line-height: 25px;
94
- letter-spacing: 0em;
302
+ .tableSectionContainer .ascArrow {
303
+ height: 0.8125rem;
304
+ margin-bottom: 0.4375rem;
305
+ cursor: pointer;
95
306
  }
96
- .containerTitleDrawer svg path {
97
- stroke: #000 !important;
307
+ .tableSectionContainer .descArrow {
308
+ height: 0.8125rem;
309
+ margin-top: 0.4375rem;
310
+ cursor: pointer;
98
311
  }
99
- .containerTitleDrawer .closeIcon {
312
+ .tableSectionContainer .defaultSortArrow {
313
+ height: 1.25rem;
100
314
  cursor: pointer;
315
+ }
316
+ .tableSectionContainer .ascArrow path,
317
+ .tableSectionContainer .descArrow path,
318
+ .tableSectionContainer .defaultSortArrow path {
319
+ fill: var(--Gray-50);
101
320
  }.methodAccordion {
102
321
  border: none !important;
103
322
  box-shadow: none !important;
@@ -247,6 +466,12 @@
247
466
  padding: 1.25rem !important;
248
467
  padding: 0 !important;
249
468
  }
469
+ .methodAccordion .methodAccordionContent .requestAccordion :global(.details.show) :global(.jsonField) div textarea,
470
+ .methodAccordion .methodAccordionContent .responseAccordion :global(.details.show) :global(.jsonField) div textarea {
471
+ border-top-right-radius: 0;
472
+ border-top-left-radius: 0;
473
+ height: 10rem;
474
+ }
250
475
  .methodAccordion .methodAccordionContent .requestAccordion :global(.details.show .textArea .containerTextArea),
251
476
  .methodAccordion .methodAccordionContent .responseAccordion :global(.details.show .textArea .containerTextArea) {
252
477
  display: flex;
@@ -332,10 +557,10 @@
332
557
  width: 0.625rem;
333
558
  aspect-ratio: 1/1;
334
559
  border-radius: 100%;
335
- }
336
- .methodAccordion .methodAccordionContent .methodForm_submitBtn {
337
- height: 1.25rem !important;
338
- width: 4.25rem;
560
+ }p.apiName {
561
+ font-size: 40px;
562
+ line-height: 30px;
563
+ font-weight: 500;
339
564
  }.tooltip-custom-wrapper {
340
565
  display: flex;
341
566
  }
@@ -373,304 +598,82 @@
373
598
  padding: 0.625rem;
374
599
  }
375
600
  .tippy-box .tippy-arrow {
376
- position: relative;
377
- width: 1rem;
378
- height: 1rem;
379
- }
380
- .tippy-box[data-placement^=top] .tippy-arrow:before {
381
- bottom: -0.4375rem;
382
- border-width: 0.5rem 0.5rem 0 !important;
383
- }
384
- .tippy-box[data-placement^=right] .tippy-arrow:before {
385
- left: -0.4375rem;
386
- border-width: 0.5rem 0.5rem 0.5rem 0 !important;
387
- }
388
- .tippy-box[data-placement^=bottom] .tippy-arrow:before {
389
- top: -0.4375rem;
390
- border-width: 0 0.5rem 0.5rem !important;
391
- }
392
- .tippy-box[data-placement^=left] .tippy-arrow:before {
393
- right: -0.4375rem;
394
- border-width: 0.5rem 0 0.5rem 0.5rem !important;
395
- }
396
- .tippy-box[data-placement^=bottom-start] .tippy-arrow {
397
- transform: translate(0.937rem, 0) !important;
398
- }
399
- .tippy-box[data-placement^=bottom-end] .tippy-arrow {
400
- margin-left: calc(100% - 1.937rem);
401
- transform: translate(0, 0) !important;
402
- }
403
- .tippy-box[data-placement^=top-start] .tippy-arrow {
404
- transform: translate(0.937rem, 0) !important;
405
- }
406
- .tippy-box[data-placement^=top-end] .tippy-arrow {
407
- transform: translate(0.937rem, 0) !important;
408
- }
409
- .tippy-box.arrow-with-border {
410
- border: 1px solid #d8dae5;
411
- }
412
- .tippy-box.arrow-with-border[data-placement] .tippy-arrow {
413
- top: 1px;
414
- background-color: white;
415
- z-index: 9999;
416
- height: 1px;
417
- }
418
- .tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
419
- width: 1rem;
420
- height: 1rem;
421
- background-color: white;
422
- transform: rotate(45deg);
423
- border: none;
424
- border-left: 1px solid #d8dae5 !important;
425
- border-top: 1px solid #d8dae5 !important;
426
- z-index: 20000000000;
427
- top: -0.6rem;
428
- transform-origin: center !important;
429
- }.apiInfoForm {
430
- display: grid;
431
- padding: 1.25rem 1.875rem;
432
- gap: 1.25rem;
433
- }
434
- .apiInfoForm .apiDocRow {
435
- display: grid;
436
- grid-template-columns: 1fr 1fr;
437
- gap: 1.25rem;
438
- }
439
- .apiInfoForm .apiInfoForm_tagsChips {
440
- margin-top: -1.25rem;
441
- }
442
- .apiInfoForm .apiInfoForm_submitBtn {
443
- height: 1.25rem !important;
444
- width: 4.25rem;
445
- }:root {
446
- --white: #fff;
447
- --Gray-5: #f1f2f6;
448
- --Gray-10: #ebecf2;
449
- --Gray-20: #d8dae5;
450
- --Gray-30: #babdcc;
451
- --Gray-40: #9a9eb2;
452
- --Gray-50: #828699;
453
- --Gray-60: #696c80;
454
- --Gray-100: #12131a;
455
- --black: #000;
456
- --primary-static: #4d75d8;
457
- --primary-hover: #7c9bea;
458
- --primary-active: #2c4fa4;
459
- --primary-disabled: #9a9eb2;
460
- --secondary-static: #40e0d0;
461
- --secondary-hover: #9efcf2;
462
- --secondary-active: #2fa599;
463
- --error-static: #da3f3f;
464
- --error-hover: #e75d5d;
465
- --error-active: #bb3232;
466
- --success-static: #3aaa35;
467
- --success-hover: #5cda56;
468
- --success-active: #2a8a25;
469
- --info-static: #c6c6c6;
470
- --info-hover: #e4e4e4;
471
- --info-active: #979797;
472
- --warning-static: #faad14;
473
- --warning-hover: #f9be4a;
474
- --warning-active: #db9711;
475
- --action-static: #142452;
476
- --action-hover: #21387d;
477
- --action-active: #000000;
478
- --color-info-primary: #3a6cd1;
479
- --primary-font-color: #142452;
480
- --placeholder-font-color: #babdcc;
481
- --warning-font-color: #ce2828;
482
- --alert-error: #da3f3f;
483
- --alert-light-error: #f4c5c5;
484
- --alert-success: #3aaa35;
485
- --alert-light-success: #c4e5c2;
486
- --alert-info: #8eaaf1;
487
- --alert-light-info: #c4d3f1;
488
- --alert-warning: #faad14;
489
- --alert-light-warning: #fde6b8;
490
- --border-focus: #3a6cd1;
491
- --tooltip-background-color: #202f5b;
492
- --text-color-primary: #142452;
493
- --text-color-secondary: #ffff;
494
- --text-color-neutral: #828699;
495
- --text-color-tertiary: #808080;
496
- --text-color-note: #242424;
497
- --text-color-quaternary: #142452;
498
- --text-color-disabled: #ffff;
499
- --background-color-white-primary: #fff;
500
- --background-color-light-primary: #8eaaf1;
501
- --background-color-white-secondary: #fff;
502
- --background-color-primary-dark: #142452;
503
- --background-color-gray-5: #f1f2f6;
504
- --background-color-gray-30: #ebecf2;
505
- --background-color-tertiary-light: #2c4fa4;
506
- --background-color-gray-10: #f1f2f6;
507
- --background-color-gray-40: #ebecf2;
508
- --background-color-light-blue: #dfe7f8;
509
- --border-color-primary: #babdcc;
510
- --border-color-secondary: #d8dae5;
511
- --border-color-neutral: #ebecf2;
512
- --border-color-tertiary: #ebecf2;
513
- --border-color-gray: #ebecf2;
514
- --border-color-hover: #142452;
515
- --border-color-active: #3a6cd1;
516
- --icon-color-main: #142452;
517
- --icon-color-secondary: #000;
518
- --icon-color-quaternary: #babdcc;
519
- --icon-color-disabled: #9a9eb2;
520
- --link-btn-primary-color: #3a6cd1;
521
- --button-color-static: #4d75d8;
522
- --button-color-hover: #7c9bea;
523
- --button-color-active: #2c4fa4;
524
- --alert-natural: #c4d3f1;
525
- }
526
-
527
- .tableSectionContainer .tableContainer {
528
- max-width: 100%;
529
- overflow-x: overlay;
530
- }
531
- .tableSectionContainer .tableContainer.tableContainer * {
532
- font-family: "Cairo";
533
- }
534
- .tableSectionContainer .tableContainer .table {
535
- width: 100%;
536
- border-spacing: 0;
537
- border: none;
538
- border-right: 1px solid var(--border-color-neutral);
539
- border-left: 1px solid var(--border-color-neutral);
540
- }
541
- .tableSectionContainer .tableContainer .table.borderRadiusTop {
542
- border-top-left-radius: 0.625rem;
543
- border-top-right-radius: 0.625rem;
544
- }
545
- .tableSectionContainer .tableContainer .table.borderRadiusBottom {
546
- border-bottom-left-radius: 0.625rem;
547
- border-bottom-right-radius: 0.625rem;
548
- }
549
- .tableSectionContainer .tableContainer .table .tableHead {
550
- border: 1px solid var(--Gray-10);
551
- margin: 0rem !important;
552
- background-color: var(--background-color-header);
553
- width: max-content;
554
- min-width: 100%;
555
- color: var(--Gray-50);
556
- font-weight: 400;
557
- }
558
- .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell {
559
- border-bottom: 1px solid var(--border-color-neutral);
560
- border-top: 1px solid var(--border-color-neutral);
561
- font-style: normal;
562
- font-size: 0.875rem;
563
- padding: 0.75rem 1.875rem;
564
- text-align: start;
565
- white-space: nowrap;
566
- color: inherit;
567
- font-weight: inherit;
568
- }
569
- .tableSectionContainer .tableContainer .table .tableHead .tableHeadCell .sortIcon {
570
- padding: 0rem 0.25rem;
571
- height: 1.875rem;
572
- cursor: pointer;
573
- }
574
- .tableSectionContainer .tableContainer .table .tableHead .headContainer {
575
- display: flex;
576
- flex-direction: row;
577
- align-items: center;
578
- text-overflow: ellipsis;
579
- }
580
- .tableSectionContainer .tableContainer .table .tableBody tr {
581
- background-color: var(--background-color-white-secondary);
582
- overflow: visible !important;
583
- }
584
- .tableSectionContainer .tableContainer .table .tableBody tr .tippy-content {
585
- background-color: var(--border-color-hover);
586
- color: var(--text-color-disabled);
587
- border-radius: 5px;
588
- font-size: 14px;
589
- font-weight: 400;
590
- line-height: 20px;
591
- text-align: left;
592
- }
593
- .tableSectionContainer .tableContainer .table .tableBody tr .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
594
- color: var(--border-color-hover);
601
+ position: relative;
602
+ width: 1rem;
603
+ height: 1rem;
595
604
  }
596
- .tableSectionContainer .tableContainer .table .tableBody tr.rowSelected {
597
- background-color: var(--background-color-gray-40);
605
+ .tippy-box[data-placement^=top] .tippy-arrow:before {
606
+ bottom: -0.4375rem;
607
+ border-width: 0.5rem 0.5rem 0 !important;
598
608
  }
599
- .tableSectionContainer .tableContainer .table .tableBody tr td {
600
- font-weight: 400;
601
- font-size: 0.875rem;
602
- text-align: start;
603
- color: var(--text-color-primary);
604
- border-bottom: 1px solid var(--border-color-gray);
605
- width: max-content;
606
- white-space: nowrap;
607
- height: 3.75rem;
608
- padding: 0.75rem 1.875rem;
609
- overflow: visible !important;
609
+ .tippy-box[data-placement^=right] .tippy-arrow:before {
610
+ left: -0.4375rem;
611
+ border-width: 0.5rem 0.5rem 0.5rem 0 !important;
610
612
  }
611
- .tableSectionContainer .tableContainer .table .tableBody tr td .tableData {
612
- max-width: 100%;
613
- width: fit-content;
614
- white-space: nowrap;
615
- text-overflow: ellipsis;
616
- overflow: visible !important;
613
+ .tippy-box[data-placement^=bottom] .tippy-arrow:before {
614
+ top: -0.4375rem;
615
+ border-width: 0 0.5rem 0.5rem !important;
617
616
  }
618
- .tableSectionContainer .tableContainer .table .tableBody tr:hover {
619
- background-color: var(--background-color-gray-10);
617
+ .tippy-box[data-placement^=left] .tippy-arrow:before {
618
+ right: -0.4375rem;
619
+ border-width: 0.5rem 0 0.5rem 0.5rem !important;
620
620
  }
621
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow {
622
- background-color: var(--background-color-white-secondary);
623
- height: 4.375rem;
621
+ .tippy-box[data-placement^=bottom-start] .tippy-arrow {
622
+ transform: translate(0.937rem, 0) !important;
624
623
  }
625
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow:hover {
626
- background-color: var(--background-color-white-secondary);
624
+ .tippy-box[data-placement^=bottom-end] .tippy-arrow {
625
+ margin-left: calc(100% - 1.937rem);
626
+ transform: translate(0, 0) !important;
627
627
  }
628
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer {
629
- width: 100%;
630
- height: 100%;
631
- color: var(--text-color-quaternary);
628
+ .tippy-box[data-placement^=top-start] .tippy-arrow {
629
+ transform: translate(0.937rem, 0) !important;
632
630
  }
633
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer {
634
- display: flex;
635
- flex-direction: row;
636
- align-items: center;
637
- justify-content: center;
638
- width: 100%;
639
- height: 100%;
631
+ .tippy-box[data-placement^=top-end] .tippy-arrow {
632
+ transform: translate(0.937rem, 0) !important;
640
633
  }
641
- .tableSectionContainer .tableContainer .table .tableBody .fallbackTableRow .fallbackContainer .fallbackTextContainer .fallbackText {
642
- font-style: normal;
643
- font-weight: 400;
644
- font-size: 0.875rem;
645
- line-height: 1.25rem;
634
+ .tippy-box.arrow-with-border {
635
+ border: 1px solid #d8dae5;
646
636
  }
647
- .tableSectionContainer .tableContainer .table th,
648
- .tableSectionContainer .tableContainer .table td {
649
- text-align: left;
637
+ .tippy-box.arrow-with-border[data-placement] .tippy-arrow {
638
+ top: 1px;
639
+ background-color: white;
640
+ z-index: 9999;
641
+ height: 1px;
650
642
  }
651
- .tableSectionContainer .tableFooterContainer {
643
+ .tippy-box.arrow-with-border[data-placement] .tippy-arrow:before {
644
+ width: 1rem;
645
+ height: 1rem;
646
+ background-color: white;
647
+ transform: rotate(45deg);
648
+ border: none;
649
+ border-left: 1px solid #d8dae5 !important;
650
+ border-top: 1px solid #d8dae5 !important;
651
+ z-index: 20000000000;
652
+ top: -0.6rem;
653
+ transform-origin: center !important;
654
+ }.containerTitleDrawer {
655
+ height: 64px;
656
+ min-height: 64px;
652
657
  display: flex;
658
+ flex-direction: row;
659
+ justify-content: space-between;
660
+ align-items: center;
661
+ background-color: #f1f2f6;
662
+ padding: 0 30px 0 30px;
653
663
  width: 100%;
654
- height: auto;
655
664
  }
656
- .tableSectionContainer .ascArrow {
657
- height: 0.8125rem;
658
- margin-bottom: 0.4375rem;
659
- cursor: pointer;
665
+ .containerTitleDrawer span {
666
+ color: #12131a;
667
+ font-weight: 600;
668
+ font-size: 18px;
669
+ line-height: 25px;
670
+ letter-spacing: 0em;
660
671
  }
661
- .tableSectionContainer .descArrow {
662
- height: 0.8125rem;
663
- margin-top: 0.4375rem;
664
- cursor: pointer;
672
+ .containerTitleDrawer svg path {
673
+ stroke: #000 !important;
665
674
  }
666
- .tableSectionContainer .defaultSortArrow {
667
- height: 1.25rem;
675
+ .containerTitleDrawer .closeIcon {
668
676
  cursor: pointer;
669
- }
670
- .tableSectionContainer .ascArrow path,
671
- .tableSectionContainer .descArrow path,
672
- .tableSectionContainer .defaultSortArrow path {
673
- fill: var(--Gray-50);
674
677
  }:root {
675
678
  --white: #fff;
676
679
  --Gray-5: #f1f2f6;
@@ -891,8 +894,186 @@
891
894
  }
892
895
  .chips-container .show-btn:active .show-btn-icon-container .show-btn-icon path {
893
896
  fill: #2c4fa4;
894
- }p.apiName {
895
- font-size: 40px;
896
- line-height: 30px;
897
+ }.json-editor-container .json-editor-label {
898
+ font-size: 0.875rem;
899
+ font-weight: 600;
900
+ line-height: 1.25rem;
901
+ margin-bottom: 0.3125rem;
902
+ }
903
+ .json-editor-container .json-editor {
904
+ display: flex;
905
+ flex-direction: column;
906
+ background-color: #142452;
907
+ width: 100%;
908
+ border-radius: 0.3125rem;
909
+ margin-bottom: -0.5rem;
910
+ outline: 1px solid transparent;
911
+ position: relative;
912
+ }
913
+ .json-editor-container .json-editor .actions-container {
914
+ width: 100%;
915
+ height: 5rem;
916
+ padding: 1.25rem;
917
+ border-radius: 0 0 0.3125rem 0.3125rem;
918
+ background: #101e47;
919
+ display: flex;
920
+ flex-direction: row;
921
+ gap: 1.25rem;
922
+ align-items: center;
923
+ }
924
+ .json-editor-container .json-editor .actions-container .validate {
925
+ color: #fff;
926
+ text-align: center;
927
+ font-size: 1rem;
928
+ font-style: normal;
929
+ font-weight: 600;
930
+ line-height: 1.25rem;
931
+ width: 8.75rem;
932
+ padding: 0.625rem 2.25rem;
933
+ background-color: rgba(240, 248, 255, 0);
934
+ border-radius: 0.3125rem;
935
+ border: 0.0625rem solid #4d75d8;
936
+ cursor: pointer;
937
+ }
938
+ .json-editor-container .json-editor .actions-container .validate:disabled {
939
+ color: #babdcc;
940
+ border-color: #a2a5b6;
941
+ }
942
+ .json-editor-container .json-editor .actions-container .beautify {
943
+ color: #fff;
944
+ text-align: center;
945
+ font-size: 1rem;
946
+ font-style: normal;
947
+ font-weight: 600;
948
+ line-height: 1.25rem;
949
+ width: 8.75rem;
950
+ padding: 0.625rem 2.25rem;
951
+ background-color: rgba(240, 248, 255, 0);
952
+ border-radius: 0.3125rem;
953
+ border: 1px solid #babdcc;
954
+ cursor: pointer;
955
+ }
956
+ .json-editor-container .json-editor .actions-container .beautify:disabled {
957
+ color: #a2a5b6;
958
+ border-color: #a2a5b6;
959
+ }
960
+ .json-editor-container .json-editor textarea {
961
+ width: 100%;
962
+ padding: 1.25rem;
963
+ font-size: 0.875rem;
964
+ font-style: normal;
965
+ font-weight: 400;
966
+ line-height: 1.25rem;
967
+ color: white;
968
+ height: 25rem;
969
+ background-color: #142452;
970
+ border: none;
971
+ resize: none;
972
+ border-radius: 0.3125rem;
973
+ }
974
+ .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 {
975
+ outline: none;
976
+ border: none;
977
+ }
978
+ .json-editor-container .json-editor textarea::-webkit-scrollbar {
979
+ width: 0.5rem;
980
+ }
981
+ .json-editor-container .json-editor textarea::-webkit-scrollbar-track {
982
+ background-color: #828699;
983
+ border: none;
984
+ border-color: transparent;
985
+ border-top-right-radius: 0.25rem;
986
+ border-top-left-radius: 0;
987
+ }
988
+ .json-editor-container .json-editor textarea::-webkit-scrollbar-thumb {
989
+ background-color: #d8dae5;
990
+ border: none;
991
+ border-color: transparent;
992
+ border-radius: 0;
993
+ }
994
+ .json-editor-container .json-editor.invalid {
995
+ outline: 1px solid #ce2828 !important;
996
+ }
997
+ .json-editor-container .error-message {
998
+ color: #ce2828;
999
+ font-size: 0.75rem;
1000
+ line-height: 1.25rem;
1001
+ margin-top: 0.625rem;
1002
+ }#common-dialog.dialog-content-wrapper {
1003
+ overflow: visible !important;
1004
+ max-height: 100%;
1005
+ width: 22.1875rem;
1006
+ }
1007
+ #common-dialog.dialog-content-wrapper .dialog-content-root {
1008
+ overflow: visible !important;
1009
+ border-radius: 0.625rem;
1010
+ max-height: 100%;
1011
+ }
1012
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
1013
+ padding: 0 1.875rem !important;
1014
+ overflow: visible !important;
1015
+ max-height: 100%;
1016
+ }
1017
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
1018
+ position: relative;
1019
+ }
1020
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
1021
+ position: absolute;
1022
+ z-index: 1;
1023
+ top: 1.5rem;
1024
+ right: 0;
1025
+ transform: translate(0.625rem, -0.625rem);
1026
+ cursor: pointer;
1027
+ }
1028
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
1029
+ display: flex;
1030
+ padding-top: 0.5rem;
1031
+ position: relative;
1032
+ }
1033
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
1034
+ margin-top: 1rem;
1035
+ margin-bottom: 1.5rem;
1036
+ margin-inline: auto;
1037
+ }
1038
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
1039
+ stroke: #12131a;
1040
+ }
1041
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
1042
+ stroke: #12131a;
1043
+ }
1044
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
1045
+ fill: #12131a;
1046
+ }
1047
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
1048
+ stroke: #faad14;
1049
+ }
1050
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
1051
+ stroke: #faad14;
1052
+ }
1053
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
1054
+ stroke: #da3f3f;
1055
+ }
1056
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
1057
+ stroke: #da3f3f;
1058
+ }
1059
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
1060
+ fill: #da3f3f;
1061
+ }
1062
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
1063
+ font-size: 1.5rem;
897
1064
  font-weight: 500;
1065
+ line-height: 1.875rem;
1066
+ text-align: center;
1067
+ margin-bottom: 0.625rem;
1068
+ }
1069
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
1070
+ color: #da3f3f;
1071
+ }
1072
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
1073
+ color: #faad14;
1074
+ }
1075
+ #common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
1076
+ display: flex;
1077
+ gap: 1.25rem;
1078
+ margin-top: 1.875rem;
898
1079
  }