@gooddata/sdk-ui-dashboard 11.47.0 → 11.48.0-alpha.1

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 (101) hide show
  1. package/NOTICE +1 -1
  2. package/esm/__version.d.ts +1 -1
  3. package/esm/__version.d.ts.map +1 -1
  4. package/esm/__version.js +1 -1
  5. package/esm/_staging/dateFilterConfig/validation.d.ts.map +1 -1
  6. package/esm/_staging/dateFilterConfig/validation.js +6 -5
  7. package/esm/index.d.ts +1 -1
  8. package/esm/index.d.ts.map +1 -1
  9. package/esm/index.js +1 -1
  10. package/esm/kdaDialog/components/KdaFooter.js +1 -1
  11. package/esm/kdaDialog/components/columns/driverColumn.js +1 -1
  12. package/esm/kdaDialog/composition/KeyDriversPanel.d.ts.map +1 -1
  13. package/esm/kdaDialog/composition/KeyDriversPanel.js +5 -1
  14. package/esm/kdaDialog/dialog/hooks/useChangeAnalysis.d.ts.map +1 -1
  15. package/esm/kdaDialog/dialog/hooks/useChangeAnalysis.js +2 -1
  16. package/esm/model/store/config/configSelectors.d.ts +0 -12
  17. package/esm/model/store/config/configSelectors.d.ts.map +1 -1
  18. package/esm/model/store/config/configSelectors.js +0 -16
  19. package/esm/presentation/automations/connectors/hooks/useBuildAutomationsContext.d.ts.map +1 -1
  20. package/esm/presentation/automations/connectors/hooks/useBuildAutomationsContext.js +1 -7
  21. package/esm/presentation/automations/connectors/hooks/useBuildAutomationsContext.test.js +0 -2
  22. package/esm/presentation/automations/contexts/AutomationsContext.d.ts +0 -2
  23. package/esm/presentation/automations/contexts/AutomationsContext.d.ts.map +1 -1
  24. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/DefaultScheduledEmailDialog.d.ts.map +1 -1
  25. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/DefaultScheduledEmailDialog.js +3 -6
  26. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/components/Attachments/AttachmentsList.d.ts +1 -2
  27. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/components/Attachments/AttachmentsList.d.ts.map +1 -1
  28. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/components/Attachments/AttachmentsList.js +2 -5
  29. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/components/Attachments/WidgetAttachments.d.ts +1 -2
  30. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/components/Attachments/WidgetAttachments.d.ts.map +1 -1
  31. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/components/Attachments/WidgetAttachments.js +2 -2
  32. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/hooks/useEditScheduledEmail.d.ts +2 -3
  33. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/hooks/useEditScheduledEmail.d.ts.map +1 -1
  34. package/esm/presentation/automations/scheduledEmail/DefaultScheduledEmailDialog/hooks/useEditScheduledEmail.js +12 -21
  35. package/esm/presentation/automations/shared/automationFilters/components/AutomationDateFilter.test.js +0 -2
  36. package/esm/presentation/automations/shared/automationFilters/components/AutomationFiltersSelect.d.ts +1 -1
  37. package/esm/presentation/automations/shared/automationFilters/components/AutomationFiltersSelect.d.ts.map +1 -1
  38. package/esm/presentation/automations/shared/automationFilters/useAutomationFilters.d.ts +1 -1
  39. package/esm/presentation/automations/shared/automationFilters/useAutomationFilters.d.ts.map +1 -1
  40. package/esm/presentation/automations/shared/automationFilters/useAutomationFilters.js +4 -4
  41. package/esm/presentation/dashboard/components/DashboardInner.d.ts.map +1 -1
  42. package/esm/presentation/dashboard/components/DashboardInner.js +1 -0
  43. package/esm/presentation/filterBar/measureValueFilter/MeasureValueFilterConfiguration.d.ts.map +1 -1
  44. package/esm/presentation/filterBar/measureValueFilter/MeasureValueFilterConfiguration.js +3 -1
  45. package/esm/presentation/widget/common/useInsightExport.d.ts.map +1 -1
  46. package/esm/presentation/widget/common/useInsightExport.js +24 -44
  47. package/esm/presentation/widget/description/DescriptionClickTrigger.d.ts.map +1 -1
  48. package/esm/presentation/widget/description/DescriptionClickTrigger.js +6 -5
  49. package/esm/presentation/widget/insightMenu/DefaultDashboardInsightMenu/DashboardInsightMenuButton.js +2 -2
  50. package/esm/presentation/widget/showAsTableButton/DefaultShowAsTableButton/ShowAsTableButton.d.ts.map +1 -1
  51. package/esm/presentation/widget/showAsTableButton/DefaultShowAsTableButton/ShowAsTableButton.js +2 -2
  52. package/esm/sdk-ui-dashboard.d.ts +0 -7
  53. package/package.json +21 -21
  54. package/styles/css/alerting.css.map +1 -1
  55. package/styles/css/configurationPanel.css.map +1 -1
  56. package/styles/css/dashboard.css +94 -394
  57. package/styles/css/dashboard.css.map +1 -1
  58. package/styles/css/dashboardNestedLayoutToolbar.css.map +1 -1
  59. package/styles/css/dragAndDrop.css.map +1 -1
  60. package/styles/css/drillConfigPanel.css.map +1 -1
  61. package/styles/css/drillDialog.css.map +1 -1
  62. package/styles/css/drillSelect.css.map +1 -1
  63. package/styles/css/export.css +5 -0
  64. package/styles/css/export.css.map +1 -1
  65. package/styles/css/filterBar.css +4 -12
  66. package/styles/css/filterBar.css.map +1 -1
  67. package/styles/css/floatingToolbar.css.map +1 -1
  68. package/styles/css/grouped-navigation.css.map +1 -1
  69. package/styles/css/kdaDialog.css +2 -1
  70. package/styles/css/kdaDialog.css.map +1 -1
  71. package/styles/css/kpi.css.map +1 -1
  72. package/styles/css/kpi_alert_dialog.css.map +1 -1
  73. package/styles/css/layout.css +42 -24
  74. package/styles/css/layout.css.map +1 -1
  75. package/styles/css/main.css +108 -407
  76. package/styles/css/main.css.map +1 -1
  77. package/styles/css/notifications_channels_dialog.css.map +1 -1
  78. package/styles/css/resizing.css.map +1 -1
  79. package/styles/css/richTextWidget.css.map +1 -1
  80. package/styles/css/sidebar.css.map +1 -1
  81. package/styles/css/toolbar.css.map +1 -1
  82. package/styles/css/topBar.css.map +1 -1
  83. package/styles/css/visualization.css.map +1 -1
  84. package/styles/css/visualizationSwitcherHeader.css.map +1 -1
  85. package/styles/css/visualizationSwitcherToolbar.css.map +1 -1
  86. package/styles/css/visualizationSwitcherWidget.css.map +1 -1
  87. package/styles/scss/_variables.scss +1 -0
  88. package/styles/scss/_zIndexes.scss +0 -1
  89. package/styles/scss/dashboard.scss +78 -354
  90. package/styles/scss/export.scss +7 -0
  91. package/styles/scss/filterBar.scss +4 -11
  92. package/styles/scss/kdaDialog.scss +3 -1
  93. package/styles/scss/layout.scss +49 -34
  94. package/esm/assets/alert-bell-na.svg +0 -1
  95. package/esm/assets/trash.svg +0 -1
  96. package/styles/css/item-states-mixin.css +0 -3
  97. package/styles/css/item-states-mixin.css.map +0 -1
  98. package/styles/css/item-states.css +0 -106
  99. package/styles/css/item-states.css.map +0 -1
  100. package/styles/scss/item-states-mixin.scss +0 -54
  101. package/styles/scss/item-states.scss +0 -65
package/styles/css/dashboard.css CHANGED
@@ -135,9 +135,9 @@
135
135
  .gd-fluidlayout-column-container::after {
136
136
  content: "";
137
137
  position: absolute;
138
- right: 10px;
139
- bottom: 5px;
140
- left: 10px;
138
+ right: 0;
139
+ bottom: -5px;
140
+ left: 0;
141
141
  height: 0;
142
142
  border-bottom: 1px dashed var(--gd-palette-complementary-5, #b0beca);
143
143
  }
@@ -167,30 +167,29 @@
167
167
  }
168
168
 
169
169
  .gd-fluid-layout-row-header {
170
- padding-right: 20px;
171
- padding-left: 20px;
172
170
  text-align: center;
173
171
  }
174
- .gd-fluid-layout-row-header .gd-fluid-layout-row-header-container {
175
- margin-top: 16px;
176
- }
177
172
  @media only screen and (min-width:641px) {
178
173
  .gd-fluid-layout-row-header {
179
- padding-right: 0;
180
- padding-left: 0;
181
174
  text-align: left;
182
175
  }
183
176
  }
177
+ .gd-fluid-layout-row-header .gd-row-header-view {
178
+ display: flex;
179
+ flex-direction: column;
180
+ gap: 4px;
181
+ }
184
182
  .gd-fluid-layout-row-header .gd-row-header-view .title {
185
- padding: 3px 5px;
183
+ padding: 0 5px 3px;
186
184
  white-space: pre-wrap;
187
185
  overflow-wrap: break-word;
188
186
  }
189
187
  .gd-fluid-layout-row-header .gd-row-header-view .description {
190
- padding: 4px 5px 2px;
188
+ padding: 0 5px 7px;
191
189
  }
192
190
  .gd-fluid-layout-row-header .gd-row-header-title-wrapper {
193
191
  display: flex;
192
+ align-items: center;
194
193
  }
195
194
  .gd-fluid-layout-row-header .gd-row-header-title-wrapper h2,
196
195
  .gd-fluid-layout-row-header .gd-row-header-title-wrapper h3 {
@@ -198,12 +197,14 @@
198
197
  }
199
198
  .gd-fluid-layout-row-header .gd-row-header-title-wrapper::before, .gd-fluid-layout-row-header .gd-row-header-title-wrapper::after {
200
199
  content: "";
201
- position: relative;
202
- top: 16px;
203
200
  flex: 1 1 auto;
204
201
  height: 0;
205
202
  border-top: 1px solid var(--gd-dashboards-section-title-lineColor, var(--gd-palette-complementary-3, #dde4eb));
206
203
  }
204
+ .gd-fluid-layout-row-header .gd-row-header-title-wrapper.gd-editable-label-container::before, .gd-fluid-layout-row-header .gd-row-header-title-wrapper.gd-editable-label-container::after {
205
+ position: relative;
206
+ top: 2px;
207
+ }
207
208
  .gd-fluid-layout-row-header .gd-row-header-title-wrapper::before {
208
209
  margin-right: 20px;
209
210
  }
@@ -453,14 +454,8 @@
453
454
  .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-edit--nested .placeholder {
454
455
  color: var(--gd-palette-complementary-6, #94a1ad);
455
456
  }
456
- .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view .description {
457
- padding: 4px 5px 15px;
458
- }
459
457
  .gd-grid-layout .gd-fluid-layout-row-header-container--with-headers {
460
- margin-top: 16px;
461
- }
462
- .gd-grid-layout .gd-dashboard-nested-layout-content:not(.is-dragging-widget) .gd-fluid-layout-row-header-container--no-headers {
463
- margin-top: 0;
458
+ margin-top: 4px;
464
459
  }
465
460
  .gd-grid-layout .gd-fluidlayout-column-container {
466
461
  display: flex;
@@ -472,6 +467,13 @@
472
467
  column-gap: 20px;
473
468
  grid-auto-rows: min-content;
474
469
  flex-grow: 1;
470
+ /**
471
+ * Row separators (by default invisible) in edit mode already create spaces between items so no need to enlarge it even more there.
472
+ * Use :where selector to not mess up with specificity.
473
+ */
474
+ }
475
+ :where(.sdk-view-mode-on) .gd-grid-layout__container--root {
476
+ row-gap: 20px;
475
477
  }
476
478
 
477
479
  .gd-grid-layout__container--nested {
@@ -483,6 +485,16 @@
483
485
  position: relative;
484
486
  display: grid;
485
487
  grid-template-columns: subgrid;
488
+ /**
489
+ * Doing grid gaps in edit mode is problematical because there are lots of exceptions (such as row separators, width/height resizers) where the gaps shouldn't be,
490
+ * so scope it only to view mode. Use :where selector to not mess up with specificity.
491
+ */
492
+ }
493
+ :where(.sdk-view-mode-on) .gd-grid-layout__section {
494
+ row-gap: 20px;
495
+ }
496
+ :where(.sdk-view-mode-on) .gd-grid-layout__section .gd-fluid-layout-row-header {
497
+ margin-bottom: -20px;
486
498
  }
487
499
 
488
500
  .gd-grid-layout__item {
@@ -494,6 +506,9 @@
494
506
  max-height: inherit;
495
507
  overflow: hidden;
496
508
  }
509
+ .gd-grid-layout__item:empty {
510
+ display: none;
511
+ }
497
512
 
498
513
  .gd-grid-layout__item--span-1 {
499
514
  grid-column: span 1;
@@ -607,8 +622,8 @@
607
622
  column-gap: 6px;
608
623
  row-gap: 6px;
609
624
  }
610
- .gd-dash-content--density-compact .gd-grid-layout__item:empty {
611
- display: none;
625
+ .gd-dash-content--density-compact .gd-grid-layout__section .gd-fluid-layout-row-header {
626
+ margin-bottom: -6px;
612
627
  }
613
628
  .gd-dash-content--density-compact .gd-nested-layout-widget-renderer {
614
629
  min-height: 0 !important;
@@ -622,8 +637,11 @@
622
637
  .gd-dash-content--density-compact .gd-fluid-layout-row-header .gd-row-header-title-wrapper .gd-typography--h2 {
623
638
  font-size: 16px;
624
639
  }
640
+ .gd-dash-content--density-compact .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view {
641
+ gap: 0;
642
+ }
625
643
  .gd-dash-content--density-compact .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view .description {
626
- padding: 0;
644
+ padding: 0 0 4px 0;
627
645
  font-size: 12px;
628
646
  }
629
647
  .gd-dash-content--density-compact .gd-grid-layout .gd-fluid-layout-row-header .gd-row-header-view .description .gd-rich-text-content p {
@@ -2595,110 +2613,6 @@
2595
2613
  width: 100%;
2596
2614
  }
2597
2615
 
2598
- .dash-item:hover .has-set-alert .dash-item-action-alert {
2599
- color: var(--gd-palette-primary-base, #14b2e2);
2600
- background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
2601
- }
2602
- .dash-item .has-set-alert .dash-item-action-alert {
2603
- color: var(--gd-palette-primary-base, #14b2e2);
2604
- background-color: transparent;
2605
- }
2606
- .dash-item .has-set-alert .dash-item-action-alert:hover:not(.disabled) {
2607
- color: var(--gd-palette-complementary-0, #fff);
2608
- background-color: var(--gd-palette-primary-base, #14b2e2);
2609
- }
2610
- .dash-item .has-set-alert.is-alert-dialog {
2611
- border-color: var(--gd-palette-primary-base, #14b2e2);
2612
- }
2613
- .dash-item .has-set-alert.is-alert-dialog .dash-item-action-alert, .dash-item .has-set-alert.is-alert-dialog .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-dialog:hover .dash-item-action-alert, .dash-item .has-set-alert.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-highlighted .dash-item-action-alert, .dash-item .has-set-alert.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .has-set-alert.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .has-set-alert.is-alert-highlighted:hover .dash-item-action-alert:hover {
2614
- color: var(--gd-palette-complementary-0, #fff);
2615
- background-color: var(--gd-palette-primary-base, #14b2e2);
2616
- }
2617
-
2618
- .dash-item:hover .is-alert-dialog .dash-item-action-alert {
2619
- color: var(--gd-palette-complementary-0, #fff);
2620
- background-color: var(--gd-palette-primary-base, #14b2e2);
2621
- }
2622
- .dash-item .is-alert-dialog .dash-item-action-alert {
2623
- color: transparent;
2624
- background-color: transparent;
2625
- }
2626
- .dash-item .is-alert-dialog .dash-item-action-alert:hover:not(.disabled) {
2627
- color: var(--gd-palette-complementary-0, #fff);
2628
- background-color: var(--gd-palette-primary-base, #14b2e2);
2629
- }
2630
- .dash-item .is-alert-dialog.is-alert-dialog {
2631
- border-color: var(--gd-palette-primary-base, #14b2e2);
2632
- }
2633
- .dash-item .is-alert-dialog.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-dialog.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-dialog.is-alert-highlighted:hover .dash-item-action-alert:hover {
2634
- color: var(--gd-palette-complementary-0, #fff);
2635
- background-color: var(--gd-palette-primary-base, #14b2e2);
2636
- }
2637
-
2638
- .dash-item:hover .is-alert-highlighted .dash-item-action-alert {
2639
- color: var(--gd-palette-complementary-0, #fff);
2640
- background-color: var(--gd-palette-primary-base, #14b2e2);
2641
- }
2642
- .dash-item .is-alert-highlighted .dash-item-action-alert {
2643
- color: var(--gd-palette-complementary-0, #fff);
2644
- background-color: var(--gd-palette-primary-base, #14b2e2);
2645
- }
2646
- .dash-item .is-alert-highlighted .dash-item-action-alert:hover:not(.disabled) {
2647
- color: var(--gd-palette-complementary-0, #fff);
2648
- background-color: var(--gd-palette-primary-base, #14b2e2);
2649
- }
2650
- .dash-item .is-alert-highlighted.is-alert-dialog {
2651
- border-color: var(--gd-palette-primary-base, #14b2e2);
2652
- }
2653
- .dash-item .is-alert-highlighted.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-highlighted.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-highlighted.is-alert-highlighted:hover .dash-item-action-alert:hover {
2654
- color: var(--gd-palette-complementary-0, #fff);
2655
- background-color: var(--gd-palette-primary-base, #14b2e2);
2656
- }
2657
-
2658
- .dash-item:hover .is-alert-triggered .dash-item-action-alert {
2659
- color: var(--gd-palette-warning-dimmed40, #8a6434);
2660
- background-color: var(--gd-palette-warning-base-t50, rgba(241, 134, 0, 0.5));
2661
- }
2662
- .dash-item .is-alert-triggered .dash-item-action-alert {
2663
- color: var(--gd-palette-warning-dimmed40, #8a6434);
2664
- background-color: var(--gd-palette-warning-base-t50, rgba(241, 134, 0, 0.5));
2665
- }
2666
- .dash-item .is-alert-triggered .dash-item-action-alert:hover:not(.disabled) {
2667
- color: var(--gd-palette-warning-text-dimmed, #685945);
2668
- background-color: var(--gd-palette-warning-base, #f18600);
2669
- }
2670
- .dash-item .is-alert-triggered.is-alert-dialog {
2671
- border-color: var(--gd-palette-warning-base, #f18600);
2672
- }
2673
- .dash-item .is-alert-triggered.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-triggered.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-triggered.is-alert-highlighted:hover .dash-item-action-alert:hover {
2674
- color: var(--gd-palette-warning-text-dimmed, #685945);
2675
- background-color: var(--gd-palette-warning-base, #f18600);
2676
- }
2677
-
2678
- .dash-item:hover .is-alert-broken .dash-item-action-alert {
2679
- color: var(--gd-palette-error-base, #e54d42);
2680
- background-color: var(--gd-palette-error-dimmed, #fcedec);
2681
- }
2682
- .dash-item .is-alert-broken .dash-item-action-alert {
2683
- color: var(--gd-palette-error-base, #e54d42);
2684
- background-color: transparent;
2685
- }
2686
- .dash-item .is-alert-broken .dash-item-action-alert:hover:not(.disabled) {
2687
- color: var(--gd-palette-complementary-0, #fff);
2688
- background-color: var(--gd-palette-error-base, #e54d42);
2689
- }
2690
- .dash-item .is-alert-broken.is-alert-dialog {
2691
- border-color: var(--gd-palette-error-base, #e54d42);
2692
- }
2693
- .dash-item .is-alert-broken.is-alert-dialog .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-dialog .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-dialog:hover .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-dialog:hover .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-highlighted .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-highlighted .dash-item-action-alert:hover, .dash-item .is-alert-broken.is-alert-highlighted:hover .dash-item-action-alert, .dash-item .is-alert-broken.is-alert-highlighted:hover .dash-item-action-alert:hover {
2694
- color: var(--gd-palette-complementary-0, #fff);
2695
- background-color: var(--gd-palette-error-base, #e54d42);
2696
- }
2697
-
2698
- .dash-item .is-alert-evaluating .dash-item-action-alert {
2699
- color: var(--gd-palette-complementary-5, #b0beca);
2700
- background-color: var(--gd-palette-complementary-0, #fff);
2701
- }
2702
2616
  .gd-dashboards-root {
2703
2617
  background: var(--gd-dashboards-content-backgroundColor, var(--gd-palette-complementary-0, #fff));
2704
2618
  font-family: var(--gd-font-family, gdcustomfont, Avenir, "Helvetica Neue", arial, sans-serif);
@@ -2873,19 +2787,6 @@
2873
2787
  .dash-item:hover a.kpi-link .kpi-value.is-empty-value {
2874
2788
  color: var(--gd-dashboards-content-kpiWidget-kpi-secondaryInfoColor-from-theme, var(--gd-palette-complementary-6-from-theme, inherit));
2875
2789
  }
2876
- .dash-item .is-alert-highlighted::before, .dash-item .is-alert-highlighted:hover::before {
2877
- top: 0;
2878
- right: 0;
2879
- bottom: 0;
2880
- left: 0;
2881
- background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
2882
- animation-name: alert-highlighted;
2883
- animation-duration: 0.3s;
2884
- animation-iteration-count: 1;
2885
- }
2886
- .dash-item .is-alert-highlighted.is-alert-triggered::before, .dash-item .is-alert-highlighted.is-alert-triggered:hover::before, .dash-item .is-alert-highlighted.is-alert-broken::before, .dash-item .is-alert-highlighted.is-alert-broken:hover::before {
2887
- background-color: var(--gd-palette-warning-dimmed, #fce7cc);
2888
- }
2889
2790
  .dash-item .is-selectable {
2890
2791
  cursor: pointer;
2891
2792
  }
@@ -2901,39 +2802,7 @@
2901
2802
  .dash-item.gd-highlighted > .dash-item-content-wrapper > .dash-item-content {
2902
2803
  border-color: var(--gd-palette-primary-base, #14b2e2);
2903
2804
  }
2904
- .dash-item.is-selected .dash-item-action-lw-options {
2905
- display: block;
2906
- background-color: var(--gd-palette-complementary-7-from-theme, #b4c0cf);
2907
- }
2908
- .dash-item.is-selected .dash-item-action-lw-options::before {
2909
- color: var(--gd-palette-complementary-0, #fff);
2910
- }
2911
- .dash-item:focus-visible .dash-item-action-options {
2912
- display: block;
2913
- }
2914
- .dash-item:focus-visible .dash-item-action-options.dash-item-action-as-table {
2915
- display: flex;
2916
- }
2917
- .dash-item:focus-visible .dash-item-action-description .dash-item-action-description-trigger {
2918
- display: flex;
2919
- }
2920
2805
 
2921
- @keyframes alert-highlighted {
2922
- 0% {
2923
- top: 50%;
2924
- right: 50%;
2925
- bottom: 50%;
2926
- left: 50%;
2927
- opacity: 0;
2928
- }
2929
- 100% {
2930
- top: 0;
2931
- right: 0;
2932
- bottom: 0;
2933
- left: 0;
2934
- opacity: 1;
2935
- }
2936
- }
2937
2806
  .dash-item-content-wrapper,
2938
2807
  .dash-item-content {
2939
2808
  display: flex;
@@ -2991,9 +2860,7 @@
2991
2860
  background-color: transparent;
2992
2861
  }
2993
2862
 
2994
- .type-kpi .dash-item-action-alert,
2995
2863
  .type-kpi .dash-item-action-placeholder,
2996
- .viz-type-headline .dash-item-action-alert,
2997
2864
  .viz-type-headline .dash-item-action-placeholder {
2998
2865
  top: calc(-10px - var(--gd-dashboards-content-kpiWidget-borderWidth, var(--gd-dashboards-content-widget-borderWidth, 2px)));
2999
2866
  right: calc(-10px - var(--gd-dashboards-content-kpiWidget-borderWidth, var(--gd-dashboards-content-widget-borderWidth, 2px)));
@@ -3096,7 +2963,6 @@
3096
2963
  justify-content: center;
3097
2964
  gap: 10px;
3098
2965
  }
3099
- .gd-absolute-row .dash-item-action,
3100
2966
  .gd-absolute-row .dash-item-action-placeholder {
3101
2967
  position: relative;
3102
2968
  top: auto;
@@ -3106,245 +2972,58 @@
3106
2972
  display: none;
3107
2973
  }
3108
2974
 
3109
- .dash-item-action {
3110
- position: absolute;
3111
- z-index: 2;
3112
- top: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
3113
- right: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
3114
- width: 36px;
3115
- height: 36px;
3116
- line-height: 36px;
3117
- color: var(--gd-palette-complementary-0, #fff);
3118
- cursor: pointer;
3119
- border-radius: 20px;
3120
- font-size: 18px;
3121
- text-align: center;
3122
- }
3123
- .dash-item-action.disabled {
3124
- cursor: auto;
3125
- }
3126
-
3127
- .dash-item-action-as-table {
3128
- display: flex;
3129
- align-items: center;
3130
- justify-content: center;
3131
- }
3132
- .dash-item-action-as-table:hover path {
3133
- fill: var(--gd-palette-complementary-0, #fff);
3134
- }
3135
-
3136
- .is-desktop .dash-item-action-alert:not(.disabled):hover,
3137
- .is-desktop .dash-item-action-options:not(.disabled):hover,
3138
- .is-desktop .dash-item-action-widget-options-active {
3139
- color: var(--gd-palette-complementary-0, #fff);
3140
- background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
3141
- }
3142
-
3143
- .is-mobile .dash-item-action-alert:not(.disabled),
3144
- .is-mobile .dash-item-action-options:not(.disabled) {
3145
- color: var(--gd-palette-complementary-7, #6d7680);
3146
- background: none;
3147
- }
3148
- .is-mobile .dash-item-action-alert.disabled,
3149
- .is-mobile .dash-item-action-options.disabled {
3150
- background-color: transparent;
3151
- }
3152
- .is-mobile .dash-item-action-widget-options:not(.disabled) {
3153
- color: var(--gd-palette-complementary-7, #6d7680);
3154
- background-color: var(--gd-palette-complementary-2, #ebeff4);
3155
- }
3156
- .is-mobile .dash-item-action-widget-options-active:not(.disabled) {
3157
- background-color: var(--gd-palette-complementary-5, #b0beca);
3158
- }
3159
-
3160
- .dash-item-action.dash-item-action-alert,
3161
- .dash-item-action.dash-item-action-options {
3162
- display: none;
3163
- color: var(--gd-palette-complementary-7, #6d7680);
3164
- background-color: var(--gd-palette-complementary-2, #ebeff4);
3165
- transition: 0.2s;
3166
- }
3167
- .is-mobile .dash-item-action.dash-item-action-alert,
3168
- .is-mobile .dash-item-action.dash-item-action-options {
3169
- display: block;
3170
- }
3171
- .dash-item-action.dash-item-action-alert:hover:not(.disabled),
3172
- .dash-item-action.dash-item-action-options:hover:not(.disabled) {
3173
- color: var(--gd-palette-complementary-0-from-theme, inherit);
3174
- background-color: var(--gd-palette-complementary-7-from-theme, inherit);
3175
- }
3176
-
3177
- .dash-item-action.dash-item-action-alert.disabled {
3178
- background-image: url("@gooddata/sdk-ui-dashboard/esm/assets/alert-bell-na.svg");
3179
- background-repeat: no-repeat;
3180
- background-position: center;
3181
- background-size: 16px;
3182
- }
3183
- .has-set-alert .dash-item-action.dash-item-action-alert, .is-alert-dialog .dash-item-action.dash-item-action-alert, .dash-item-content:hover .dash-item-action.dash-item-action-alert {
3184
- display: block;
3185
- }
3186
-
3187
- .dash-item-action,
3188
2975
  .dash-item-action-placeholder {
3189
2976
  position: absolute;
3190
2977
  z-index: 2;
3191
2978
  top: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
3192
2979
  right: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px));
3193
- }
3194
-
3195
- .dash-item-action-placeholder {
3196
2980
  width: 36px;
3197
2981
  height: 36px;
3198
2982
  }
3199
- .dash-item-action-placeholder:focus-visible .dash-item-action-options {
3200
- display: block;
3201
- }
3202
- .dash-item-action-placeholder:focus-visible .dash-item-action-options.dash-item-action-as-table {
3203
- display: flex;
3204
- }
3205
-
3206
- .dash-item-action-placeholder-headline {
3207
- right: calc(-10px - var(--gd-dashboards-content-widget-borderWidth, 2px) + 36px + 5px);
3208
- }
3209
2983
 
3210
- .dash-item-action-description .dash-item-action-description-trigger:not(.is-mobile) {
2984
+ .dash-item-action-button {
3211
2985
  display: none;
3212
- }
3213
- .dash-item-action-description:focus-visible .dash-item-action-description-trigger {
3214
- display: flex;
3215
- }
3216
-
3217
- .dash-item-action-description-trigger {
3218
- display: flex;
3219
2986
  align-items: center;
3220
2987
  justify-content: center;
3221
- border-radius: 50%;
3222
2988
  width: 36px;
3223
2989
  height: 36px;
2990
+ border-radius: 50%;
2991
+ color: var(--gd-palette-complementary-7, #6d7680);
3224
2992
  background-color: var(--gd-palette-complementary-2, #ebeff4);
3225
2993
  cursor: pointer;
3226
2994
  transition: 0.2s;
3227
- font-size: 18px;
3228
- line-height: 18px;
3229
- }
3230
- .dash-item-action-description-trigger .gd-icon-circle-question {
3231
- margin-top: 2px;
3232
- color: var(--gd-palette-complementary-7, #6d7680);
3233
- }
3234
- .dash-item-action-description-trigger:hover {
3235
- background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
3236
- }
3237
- .dash-item-action-description-trigger:hover .gd-icon-circle-question {
3238
- color: var(--gd-palette-complementary-0, #fff);
3239
2995
  }
3240
2996
 
3241
- .dash-item-action-description-active .dash-item-action-description-trigger {
3242
- background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
3243
- }
3244
- .dash-item-action-description-active .dash-item-action-description-trigger .gd-icon-circle-question {
3245
- color: var(--gd-palette-complementary-0, #fff);
3246
- }
3247
-
3248
- .type-kpi .dash-item-action-description {
3249
- position: absolute;
3250
- }
3251
-
3252
- .dash-item-content:hover .dash-item-action-description-trigger:not(.is-mobile),
3253
- .dash-item-action-description-active .dash-item-action-description-trigger:not(.is-mobile) {
2997
+ .dash-item-content:hover .dash-item-action-button,
2998
+ .dash-item:focus-visible .dash-item-action-button,
2999
+ .dash-item-action-placeholder:focus-visible .dash-item-action-button,
3000
+ .dash-item-action-button--active {
3254
3001
  display: flex;
3255
3002
  }
3256
3003
 
3257
- .dash-item-action,
3258
- .dash-item-action-options {
3259
- width: 36px;
3260
- height: 36px;
3261
- border-radius: 20px;
3262
- font-size: 18px;
3263
- line-height: 36px;
3264
- text-align: center;
3265
- color: var(--gd-palette-complementary-0, #fff);
3266
- cursor: pointer;
3267
- }
3268
- .dash-item-action.disabled,
3269
- .dash-item-action-options.disabled {
3270
- cursor: auto;
3271
- }
3272
-
3273
- .dash-item-action-delete {
3274
- z-index: 2;
3275
- top: 0;
3276
- right: 0;
3277
- padding-top: 1px;
3278
- background-color: var(--gd-palette-primary-base, #14b2e2);
3279
- }
3280
- .dash-item-action-delete.gd-icon-trash::before {
3281
- content: url("@gooddata/sdk-ui-dashboard/esm/assets/trash.svg");
3282
- display: inline-block;
3283
- width: 20px;
3284
- height: 20px;
3285
- }
3286
- .dash-item-action-delete::before {
3287
- z-index: 2;
3288
- }
3289
- .dash-item-action-delete:hover {
3290
- background-color: var(--gd-palette-error-base, #e54d42);
3291
- }
3292
-
3293
- .dash-item-action-options {
3294
- display: none;
3295
- color: var(--gd-palette-complementary-7, #6d7680);
3296
- background-color: var(--gd-palette-complementary-2, #ebeff4);
3297
- transition: 0.2s;
3298
- }
3299
- .is-mobile .dash-item-action-options {
3300
- display: block;
3301
- }
3302
-
3303
- .dash-item-content:not(.is-alert-dialog):hover .dash-item-action-options {
3304
- display: block;
3305
- }
3306
-
3307
- .dash-item-content:not(.is-alert-dialog):hover .dash-item-action-options.dash-item-action-as-table {
3308
- display: flex;
3004
+ @media only screen and (max-width: 640px), (hover: none) {
3005
+ .dash-item-action-button {
3006
+ display: flex;
3007
+ }
3309
3008
  }
3310
-
3311
- .dash-item-action-options-active,
3312
- .dash-item-action-widget-options-active {
3313
- display: block;
3009
+ .dash-item-action-button:hover,
3010
+ .dash-item-action-button--active {
3011
+ color: var(--gd-palette-complementary-0, #fff);
3012
+ background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
3314
3013
  }
3315
3014
 
3316
3015
  .dash-item-action-widget-options::before {
3317
3016
  content: "...";
3318
- align-self: center;
3319
3017
  position: relative;
3320
3018
  top: -5px;
3321
- color: var(--gd-palette-complementary-7, #6d7680);
3322
3019
  font-size: 22px;
3323
3020
  }
3324
- .dash-item-action-widget-options:hover, .dash-item-action-widget-options.dash-item-action-widget-options-active {
3325
- background-color: var(--gd-palette-complementary-7-from-theme, var(--gd-palette-complementary-5, #b0beca));
3326
- }
3327
- .dash-item-action-widget-options:hover::before, .dash-item-action-widget-options.dash-item-action-widget-options-active::before {
3328
- color: var(--gd-palette-complementary-0, #fff);
3329
- }
3330
3021
 
3331
- .dash-item-action-lw-options {
3332
- top: 30px;
3333
- right: 30px;
3334
- display: none;
3335
- border-radius: 50%;
3336
- background-color: var(--gd-palette-complementary-2-from-theme, #eceff3);
3337
- width: 36px;
3338
- height: 36px;
3339
- transition: 0.2s;
3022
+ .dash-item-action-description-trigger {
3023
+ font-size: 18px;
3340
3024
  }
3341
- .dash-item-action-lw-options::before {
3342
- content: "...";
3343
- font-size: 22px;
3344
- position: relative;
3345
- top: -5px;
3346
- display: inline;
3347
- color: var(--gd-palette-complementary-7-from-theme, #b4c0cf);
3025
+ .dash-item-action-description-trigger .gd-icon-circle-question {
3026
+ margin-top: 2px;
3348
3027
  }
3349
3028
 
3350
3029
  .dash-section {
@@ -3363,9 +3042,6 @@
3363
3042
  @media only screen and (max-width: 320px), only screen and (max-width: 640px) {
3364
3043
  .dash-section-kpis {
3365
3044
  margin: 0;
3366
- padding-left: 5px;
3367
- padding-right: 5px;
3368
- padding-bottom: 5px;
3369
3045
  }
3370
3046
  }
3371
3047
 
@@ -3494,22 +3170,23 @@
3494
3170
  padding: 0;
3495
3171
  flex: unset;
3496
3172
  max-width: unset;
3173
+ /**
3174
+ * View mode now uses grid gap. Keep spacing with padding in edit mode only, where using grid gap is problematic.
3175
+ * Use :where selector to not mess up with specificity.
3176
+ */
3497
3177
  }
3498
3178
  .gd-grid-layout .dash-item .is-dragging-widget.dash-item-content {
3499
3179
  border-color: var(--gd-palette-complementary-2, #ebeff4);
3500
3180
  }
3501
- .gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
3181
+ :where(.sdk-edit-mode-on) .gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
3502
3182
  padding: 10px 0 0 0;
3503
3183
  }
3504
- .gd-grid-layout .dash-item:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(.drag-info-placeholder) {
3184
+ :where(.sdk-edit-mode-on) .gd-grid-layout .dash-item:not(.gd-dashboard-nested-layout-widget):not(.gd-first-container-row-widget):not(.drag-info-placeholder) {
3505
3185
  padding: 10px 0;
3506
3186
  }
3507
- .gd-grid-layout .dash-item.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
3187
+ :where(.sdk-edit-mode-on) .gd-grid-layout .dash-item.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
3508
3188
  padding: 0 0 10px 0;
3509
3189
  }
3510
- .gd-grid-layout .gd-empty-nested-layout {
3511
- padding: 10px 0;
3512
- }
3513
3190
  .gd-grid-layout .gd-fluidlayout-column-container {
3514
3191
  display: flex;
3515
3192
  }
@@ -3532,6 +3209,32 @@
3532
3209
  font-size: 12px;
3533
3210
  font-weight: 800;
3534
3211
  }
3212
+ .gd-dash-content--density-compact .gd-absolute-row {
3213
+ gap: 5px;
3214
+ top: 10px;
3215
+ right: 15px;
3216
+ height: 24px;
3217
+ }
3218
+ .gd-dash-content--density-compact .gd-absolute-row .dash-item-action-placeholder {
3219
+ top: auto;
3220
+ right: auto;
3221
+ }
3222
+ .gd-dash-content--density-compact .dash-item-action-placeholder {
3223
+ top: 10px;
3224
+ right: 15px;
3225
+ width: 24px;
3226
+ height: 24px;
3227
+ }
3228
+ .gd-dash-content--density-compact .dash-item-action-button {
3229
+ width: 24px;
3230
+ height: 24px;
3231
+ }
3232
+ .gd-dash-content--density-compact .dash-item-action-widget-options::before {
3233
+ font-size: 14px;
3234
+ }
3235
+ .gd-dash-content--density-compact .dash-item-action-description-trigger {
3236
+ font-size: 12px;
3237
+ }
3535
3238
  .gd-dash-content--density-compact .gd-grid-layout .dash-item.gd-dashboard-nested-layout-widget .gd-dashboard-nested-layout-widget {
3536
3239
  padding: 0;
3537
3240
  }
@@ -3541,8 +3244,5 @@
3541
3244
  .gd-dash-content--density-compact .gd-grid-layout .dash-item.gd-first-container-row-widget:not(.gd-dashboard-nested-layout-widget) {
3542
3245
  padding: 0;
3543
3246
  }
3544
- .gd-dash-content--density-compact .gd-grid-layout .gd-empty-nested-layout {
3545
- padding: 0;
3546
- }
3547
3247
 
3548
3248
  /*# sourceMappingURL=dashboard.css.map */