@gooddata/sdk-ui-kit 11.33.0-alpha.4 → 11.33.0-alpha.5

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 (36) hide show
  1. package/esm/@ui/UiCombobox/UiComboboxList.js +1 -1
  2. package/esm/@ui/UiCombobox/UiComboboxList.js.map +1 -1
  3. package/esm/@ui/UiCombobox/UiComboboxPopup.js +1 -1
  4. package/esm/@ui/UiCombobox/UiComboboxPopup.js.map +1 -1
  5. package/esm/@ui/UiControlButton/UiControlButton.d.ts +39 -0
  6. package/esm/@ui/UiControlButton/UiControlButton.d.ts.map +1 -0
  7. package/esm/@ui/UiControlButton/UiControlButton.js +52 -0
  8. package/esm/@ui/UiControlButton/UiControlButton.js.map +1 -0
  9. package/esm/ParameterControl/ParameterControlButton.d.ts +16 -0
  10. package/esm/ParameterControl/ParameterControlButton.d.ts.map +1 -0
  11. package/esm/ParameterControl/ParameterControlButton.js +17 -0
  12. package/esm/ParameterControl/ParameterControlButton.js.map +1 -0
  13. package/esm/ParameterControl/ParameterControlDropdown.d.ts +28 -0
  14. package/esm/ParameterControl/ParameterControlDropdown.d.ts.map +1 -0
  15. package/esm/ParameterControl/ParameterControlDropdown.js +58 -0
  16. package/esm/ParameterControl/ParameterControlDropdown.js.map +1 -0
  17. package/esm/ParameterPicker/ParameterPicker.d.ts +23 -0
  18. package/esm/ParameterPicker/ParameterPicker.d.ts.map +1 -0
  19. package/esm/ParameterPicker/ParameterPicker.js +121 -0
  20. package/esm/ParameterPicker/ParameterPicker.js.map +1 -0
  21. package/esm/index.d.ts +4 -0
  22. package/esm/index.d.ts.map +1 -1
  23. package/esm/index.js +4 -0
  24. package/esm/index.js.map +1 -1
  25. package/esm/sdk-ui-kit.d.ts +109 -0
  26. package/package.json +11 -11
  27. package/src/@ui/UiControlButton/UiControlButton.scss +179 -0
  28. package/src/@ui/index.scss +1 -0
  29. package/src/ParameterControl/ParameterControl.scss +78 -0
  30. package/src/ParameterPicker/ParameterPicker.scss +98 -0
  31. package/styles/css/UiControlButton.css +141 -0
  32. package/styles/css/UiControlButton.css.map +1 -0
  33. package/styles/css/main.css +285 -0
  34. package/styles/css/main.css.map +1 -1
  35. package/styles/scss/UiControlButton.scss +2 -0
  36. package/styles/scss/main.scss +2 -0
package/styles/css/UiControlButton.css ADDED
@@ -0,0 +1,141 @@
1
+ .gd-ui-kit-control-button {
2
+ position: relative;
3
+ max-width: 230px;
4
+ padding: 5px 10px;
5
+ font-family: var(--gd-font-family), gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif;
6
+ font-size: 12px;
7
+ font-weight: 400;
8
+ line-height: 16px;
9
+ cursor: pointer;
10
+ user-select: none;
11
+ border-radius: 3px;
12
+ }
13
+ .gd-ui-kit-control-button--isDraggable {
14
+ padding-left: 23px;
15
+ }
16
+ .gd-ui-kit-control-button::before, .gd-ui-kit-control-button::after {
17
+ content: "";
18
+ position: absolute;
19
+ transition: all 0.2s ease;
20
+ }
21
+ .gd-ui-kit-control-button::before {
22
+ z-index: 1;
23
+ top: 8px;
24
+ left: 9px;
25
+ width: 7px;
26
+ height: 26px;
27
+ background: url("data:image/svg+xml,%3Csvg width='7' height='26' viewBox='0 0 7 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4h2v2H0V4zm0-4h2v2H0V0zm5 4h2v2H5V4zm0-4h2v2H5V0zm0 8h2v2H5V8zM0 8h2v2H0V8zm0 4h2v2H0v-2zm5 4h2v2H5v-2zm-5 0h2v2H0v-2zm5 4h2v2H5v-2zm-5 0h2v2H0v-2zm5 4h2v2H5v-2zm-5 0h2v2H0v-2zm5-12h2v2H5v-2z' fill='%23B0BECA' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
28
+ opacity: 0;
29
+ }
30
+ .gd-ui-kit-control-button::after {
31
+ top: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ left: 0;
35
+ border: 1px solid transparent;
36
+ background: transparent;
37
+ transform: translateZ(-1px);
38
+ border-radius: 3px;
39
+ }
40
+ .gd-ui-kit-control-button:hover::after {
41
+ border-color: var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2));
42
+ }
43
+ .gd-ui-kit-control-button:hover.gd-ui-kit-control-button--isDraggable {
44
+ box-shadow: 0 1px 3px 0 rgba(20, 56, 93, 0.1), 0 2px 9px 0 rgba(20, 56, 93, 0.15);
45
+ }
46
+ .gd-ui-kit-control-button:hover.gd-ui-kit-control-button--isDraggable::before {
47
+ opacity: 1;
48
+ }
49
+ .gd-ui-kit-control-button--isOpen::after {
50
+ box-shadow: inset 0 1px 0 0 rgba(20, 56, 93, 0.1);
51
+ border-color: var(--gd-palette-complementary-5-from-theme, var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2)));
52
+ }
53
+ .gd-ui-kit-control-button--isOpen.gd-ui-kit-control-button--isDraggable::before {
54
+ opacity: 1;
55
+ }
56
+ .gd-ui-kit-control-button--isOpen .gd-ui-kit-control-button__subtitle-row::after {
57
+ content: "\e613";
58
+ }
59
+ .gd-ui-kit-control-button--isError {
60
+ font-size: 12px;
61
+ color: var(--gd-palette-error-base, #e54d42);
62
+ }
63
+ .gd-ui-kit-control-button--disabled {
64
+ cursor: default;
65
+ }
66
+ .gd-ui-kit-control-button--disabled:hover, .gd-ui-kit-control-button--disabled:focus, .gd-ui-kit-control-button--disabled:active {
67
+ user-select: auto;
68
+ box-shadow: none;
69
+ background: transparent;
70
+ border-color: transparent;
71
+ text-decoration: none;
72
+ }
73
+ .gd-ui-kit-control-button__icon {
74
+ position: relative;
75
+ z-index: 1;
76
+ float: left;
77
+ padding-right: 5px;
78
+ }
79
+ .gd-ui-kit-control-button__content {
80
+ position: relative;
81
+ z-index: 1;
82
+ display: flex;
83
+ justify-content: center;
84
+ height: 100%;
85
+ flex-direction: column;
86
+ min-width: 0;
87
+ flex: 1 1 auto;
88
+ }
89
+ .gd-ui-kit-control-button__title-row {
90
+ display: flex;
91
+ justify-content: space-between;
92
+ max-width: 100%;
93
+ white-space: nowrap;
94
+ }
95
+ .gd-ui-kit-control-button__title {
96
+ overflow: hidden;
97
+ color: var(--gd-palette-complementary-7, #6d7680);
98
+ margin-right: auto;
99
+ max-width: 100%;
100
+ white-space: nowrap;
101
+ text-overflow: ellipsis;
102
+ }
103
+ .gd-ui-kit-control-button__title .gd-bubble-trigger,
104
+ .gd-ui-kit-control-button__title .shortened {
105
+ display: inline-flex;
106
+ }
107
+ .gd-ui-kit-control-button__title .shortened {
108
+ max-width: 100%;
109
+ }
110
+ .gd-ui-kit-control-button__subtitle-row {
111
+ display: inline-flex;
112
+ flex-wrap: nowrap;
113
+ max-width: 100%;
114
+ overflow: hidden;
115
+ white-space: nowrap;
116
+ text-overflow: ellipsis;
117
+ font-weight: bold;
118
+ color: var(--gd-palette-complementary-9, #000);
119
+ }
120
+ .gd-ui-kit-control-button__subtitle-row::after {
121
+ content: "\e612";
122
+ display: inline-block;
123
+ margin-left: 0.5em;
124
+ font-family: "Indigo", sans-serif;
125
+ font-weight: normal;
126
+ font-size: inherit;
127
+ vertical-align: top;
128
+ color: var(--gd-palette-complementary-6, #94a1ad);
129
+ transition: all 0.2s ease;
130
+ }
131
+ .gd-ui-kit-control-button__subtitle {
132
+ display: inline-block;
133
+ flex: 0 1 auto;
134
+ min-width: 0;
135
+ max-width: 120px;
136
+ overflow: hidden;
137
+ text-overflow: ellipsis;
138
+ vertical-align: bottom;
139
+ }
140
+
141
+ /*# sourceMappingURL=UiControlButton.css.map */
package/styles/css/UiControlButton.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../src/@ui/UiControlButton/UiControlButton.scss"],"names":[],"mappings":"AAIA;EAGI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EAEI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;;AAGJ;EACI,YACI;;AAGJ;EACI;;AAMR;EACI;EACA;;AAMJ;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;;AAGJ;EACI;;AAEA;EAGI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA","file":"UiControlButton.css"}
package/styles/css/main.css CHANGED
@@ -1273,6 +1273,146 @@
1273
1273
  transition: var(--gd-transition-all);
1274
1274
  }
1275
1275
 
1276
+ .gd-ui-kit-control-button {
1277
+ position: relative;
1278
+ max-width: 230px;
1279
+ padding: 5px 10px;
1280
+ font-family: var(--gd-font-family), gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif;
1281
+ font-size: 12px;
1282
+ font-weight: 400;
1283
+ line-height: 16px;
1284
+ cursor: pointer;
1285
+ user-select: none;
1286
+ border-radius: 3px;
1287
+ }
1288
+ .gd-ui-kit-control-button--isDraggable {
1289
+ padding-left: 23px;
1290
+ }
1291
+ .gd-ui-kit-control-button::before, .gd-ui-kit-control-button::after {
1292
+ content: "";
1293
+ position: absolute;
1294
+ transition: all 0.2s ease;
1295
+ }
1296
+ .gd-ui-kit-control-button::before {
1297
+ z-index: 1;
1298
+ top: 8px;
1299
+ left: 9px;
1300
+ width: 7px;
1301
+ height: 26px;
1302
+ background: url("data:image/svg+xml,%3Csvg width='7' height='26' viewBox='0 0 7 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4h2v2H0V4zm0-4h2v2H0V0zm5 4h2v2H5V4zm0-4h2v2H5V0zm0 8h2v2H5V8zM0 8h2v2H0V8zm0 4h2v2H0v-2zm5 4h2v2H5v-2zm-5 0h2v2H0v-2zm5 4h2v2H5v-2zm-5 0h2v2H0v-2zm5 4h2v2H5v-2zm-5 0h2v2H0v-2zm5-12h2v2H5v-2z' fill='%23B0BECA' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
1303
+ opacity: 0;
1304
+ }
1305
+ .gd-ui-kit-control-button::after {
1306
+ top: 0;
1307
+ right: 0;
1308
+ bottom: 0;
1309
+ left: 0;
1310
+ border: 1px solid transparent;
1311
+ background: transparent;
1312
+ transform: translateZ(-1px);
1313
+ border-radius: 3px;
1314
+ }
1315
+ .gd-ui-kit-control-button:hover::after {
1316
+ border-color: var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2));
1317
+ }
1318
+ .gd-ui-kit-control-button:hover.gd-ui-kit-control-button--isDraggable {
1319
+ box-shadow: 0 1px 3px 0 rgba(20, 56, 93, 0.1), 0 2px 9px 0 rgba(20, 56, 93, 0.15);
1320
+ }
1321
+ .gd-ui-kit-control-button:hover.gd-ui-kit-control-button--isDraggable::before {
1322
+ opacity: 1;
1323
+ }
1324
+ .gd-ui-kit-control-button--isOpen::after {
1325
+ box-shadow: inset 0 1px 0 0 rgba(20, 56, 93, 0.1);
1326
+ border-color: var(--gd-palette-complementary-5-from-theme, var(--gd-palette-complementary-4-from-theme, rgba(31, 52, 73, 0.2)));
1327
+ }
1328
+ .gd-ui-kit-control-button--isOpen.gd-ui-kit-control-button--isDraggable::before {
1329
+ opacity: 1;
1330
+ }
1331
+ .gd-ui-kit-control-button--isOpen .gd-ui-kit-control-button__subtitle-row::after {
1332
+ content: "\e613";
1333
+ }
1334
+ .gd-ui-kit-control-button--isError {
1335
+ font-size: 12px;
1336
+ color: var(--gd-palette-error-base, #e54d42);
1337
+ }
1338
+ .gd-ui-kit-control-button--disabled {
1339
+ cursor: default;
1340
+ }
1341
+ .gd-ui-kit-control-button--disabled:hover, .gd-ui-kit-control-button--disabled:focus, .gd-ui-kit-control-button--disabled:active {
1342
+ user-select: auto;
1343
+ box-shadow: none;
1344
+ background: transparent;
1345
+ border-color: transparent;
1346
+ text-decoration: none;
1347
+ }
1348
+ .gd-ui-kit-control-button__icon {
1349
+ position: relative;
1350
+ z-index: 1;
1351
+ float: left;
1352
+ padding-right: 5px;
1353
+ }
1354
+ .gd-ui-kit-control-button__content {
1355
+ position: relative;
1356
+ z-index: 1;
1357
+ display: flex;
1358
+ justify-content: center;
1359
+ height: 100%;
1360
+ flex-direction: column;
1361
+ min-width: 0;
1362
+ flex: 1 1 auto;
1363
+ }
1364
+ .gd-ui-kit-control-button__title-row {
1365
+ display: flex;
1366
+ justify-content: space-between;
1367
+ max-width: 100%;
1368
+ white-space: nowrap;
1369
+ }
1370
+ .gd-ui-kit-control-button__title {
1371
+ overflow: hidden;
1372
+ color: var(--gd-palette-complementary-7, #6d7680);
1373
+ margin-right: auto;
1374
+ max-width: 100%;
1375
+ white-space: nowrap;
1376
+ text-overflow: ellipsis;
1377
+ }
1378
+ .gd-ui-kit-control-button__title .gd-bubble-trigger,
1379
+ .gd-ui-kit-control-button__title .shortened {
1380
+ display: inline-flex;
1381
+ }
1382
+ .gd-ui-kit-control-button__title .shortened {
1383
+ max-width: 100%;
1384
+ }
1385
+ .gd-ui-kit-control-button__subtitle-row {
1386
+ display: inline-flex;
1387
+ flex-wrap: nowrap;
1388
+ max-width: 100%;
1389
+ overflow: hidden;
1390
+ white-space: nowrap;
1391
+ text-overflow: ellipsis;
1392
+ font-weight: bold;
1393
+ color: var(--gd-palette-complementary-9, #000);
1394
+ }
1395
+ .gd-ui-kit-control-button__subtitle-row::after {
1396
+ content: "\e612";
1397
+ display: inline-block;
1398
+ margin-left: 0.5em;
1399
+ font-family: "Indigo", sans-serif;
1400
+ font-weight: normal;
1401
+ font-size: inherit;
1402
+ vertical-align: top;
1403
+ color: var(--gd-palette-complementary-6, #94a1ad);
1404
+ transition: all 0.2s ease;
1405
+ }
1406
+ .gd-ui-kit-control-button__subtitle {
1407
+ display: inline-block;
1408
+ flex: 0 1 auto;
1409
+ min-width: 0;
1410
+ max-width: 120px;
1411
+ overflow: hidden;
1412
+ text-overflow: ellipsis;
1413
+ vertical-align: bottom;
1414
+ }
1415
+
1276
1416
  /* ==========================================================================
1277
1417
  Mixins, silent classes etc.
1278
1418
  ========================================================================== */
@@ -13596,6 +13736,151 @@ input[type=search]::-webkit-search-cancel-button {
13596
13736
  overflow: hidden;
13597
13737
  }
13598
13738
 
13739
+ .gd-ui-kit-parameter-picker {
13740
+ display: flex;
13741
+ flex-direction: column;
13742
+ width: 250px;
13743
+ background: var(--gd-palette-complementary-0);
13744
+ }
13745
+ .gd-ui-kit-parameter-picker__search {
13746
+ padding: 10px 10px 10px;
13747
+ }
13748
+ .gd-ui-kit-parameter-picker__search .gd-input-field {
13749
+ width: 100%;
13750
+ }
13751
+ .gd-ui-kit-parameter-picker__loading {
13752
+ display: flex;
13753
+ align-items: center;
13754
+ justify-content: center;
13755
+ flex: 1 1 auto;
13756
+ padding: 40px 12px;
13757
+ }
13758
+ .gd-ui-kit-parameter-picker__empty {
13759
+ padding: 10px 15px;
13760
+ color: var(--gd-palette-complementary-6);
13761
+ font-size: 12px;
13762
+ }
13763
+ .gd-ui-kit-parameter-picker__list {
13764
+ flex: 1;
13765
+ min-height: 0;
13766
+ overflow-y: auto;
13767
+ overscroll-behavior: contain;
13768
+ padding-bottom: 5px;
13769
+ }
13770
+ .gd-ui-kit-parameter-picker__group + .gd-ui-kit-parameter-picker__group {
13771
+ margin-top: 5px;
13772
+ }
13773
+ .gd-ui-kit-parameter-picker__group-header {
13774
+ padding: 5px 15px;
13775
+ color: var(--gd-palette-complementary-6);
13776
+ font-size: 10px;
13777
+ font-weight: bold;
13778
+ letter-spacing: 0.5px;
13779
+ text-transform: uppercase;
13780
+ }
13781
+ .gd-ui-kit-parameter-picker__items {
13782
+ list-style: none;
13783
+ padding: 0;
13784
+ margin: 0;
13785
+ }
13786
+ .gd-ui-kit-parameter-picker__item {
13787
+ display: flex;
13788
+ align-items: center;
13789
+ padding: 4px 15px;
13790
+ font-size: 12px;
13791
+ }
13792
+ .gd-ui-kit-parameter-picker__item:hover {
13793
+ background-color: var(--gd-palette-complementary-2);
13794
+ }
13795
+ .gd-ui-kit-parameter-picker__item-label {
13796
+ display: flex;
13797
+ align-items: center;
13798
+ gap: 8px;
13799
+ width: 100%;
13800
+ cursor: pointer;
13801
+ }
13802
+ .gd-ui-kit-parameter-picker__item-icon {
13803
+ display: inline-flex;
13804
+ align-items: center;
13805
+ justify-content: center;
13806
+ color: var(--gd-palette-complementary-6);
13807
+ }
13808
+ .gd-ui-kit-parameter-picker__item-title {
13809
+ flex: 1;
13810
+ overflow: hidden;
13811
+ text-overflow: ellipsis;
13812
+ white-space: nowrap;
13813
+ }
13814
+ .gd-ui-kit-parameter-picker__footer {
13815
+ display: flex;
13816
+ justify-content: flex-end;
13817
+ gap: 10px;
13818
+ padding: 10px;
13819
+ border-top: 1px solid var(--gd-palette-complementary-3);
13820
+ }
13821
+
13822
+ .gd-ui-kit-parameter-control--dropdown {
13823
+ display: flex;
13824
+ flex-direction: column;
13825
+ width: 240px;
13826
+ background: var(--gd-palette-complementary-0);
13827
+ border-radius: 4px;
13828
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.1);
13829
+ }
13830
+ .gd-ui-kit-parameter-control__dropdown-field {
13831
+ padding: 10px 10px 0;
13832
+ }
13833
+ .gd-ui-kit-parameter-control__dropdown-field-header {
13834
+ display: flex;
13835
+ align-items: center;
13836
+ justify-content: space-between;
13837
+ padding-bottom: 5px;
13838
+ }
13839
+ .gd-ui-kit-parameter-control__dropdown-label {
13840
+ color: var(--gd-palette-complementary-8);
13841
+ font-size: 12px;
13842
+ font-weight: 400;
13843
+ }
13844
+ .gd-ui-kit-parameter-control__dropdown-reset {
13845
+ padding: 0;
13846
+ background: none;
13847
+ border: none;
13848
+ color: var(--gd-palette-primary-base);
13849
+ font-size: 12px;
13850
+ cursor: pointer;
13851
+ }
13852
+ .gd-ui-kit-parameter-control__dropdown-reset:hover {
13853
+ text-decoration: underline;
13854
+ }
13855
+ .gd-ui-kit-parameter-control__dropdown-divider {
13856
+ height: 1px;
13857
+ margin: 10px 0;
13858
+ background-color: var(--gd-palette-complementary-3);
13859
+ }
13860
+ .gd-ui-kit-parameter-control__dropdown-preview {
13861
+ display: flex;
13862
+ flex-direction: column;
13863
+ gap: 2px;
13864
+ padding: 0 10px 10px;
13865
+ font-size: 12px;
13866
+ }
13867
+ .gd-ui-kit-parameter-control__dropdown-preview-label {
13868
+ color: var(--gd-palette-complementary-6);
13869
+ }
13870
+ .gd-ui-kit-parameter-control__dropdown-preview-text {
13871
+ color: var(--gd-palette-complementary-8);
13872
+ }
13873
+ .gd-ui-kit-parameter-control__dropdown-preview-text strong {
13874
+ font-weight: 700;
13875
+ }
13876
+ .gd-ui-kit-parameter-control__dropdown-footer {
13877
+ display: flex;
13878
+ justify-content: flex-end;
13879
+ gap: 10px;
13880
+ padding: 10px;
13881
+ border-top: 1px solid var(--gd-palette-complementary-3);
13882
+ }
13883
+
13599
13884
  .gd-file-dropzone {
13600
13885
  flex-grow: 1;
13601
13886
  box-sizing: border-box;