@gooddata/sdk-ui-dashboard 10.15.0-alpha.8 → 10.15.0-beta.1

package/esm/sdk-ui-dashboard.d.ts

@@ -158,6 +158,7 @@ import { ICatalogMeasure } from '@gooddata/sdk-model';
 import { IColorPalette } from '@gooddata/sdk-model';
 import { ICrossFiltering } from '@gooddata/sdk-model';
 import { ICrossFilteringItem as ICrossFilteringItem_2 } from './types.js';
+import { ICustomWidget as ICustomWidget_2 } from '../../index.js';
 import { IDashboard } from '@gooddata/sdk-model';
 import { IDashboardAttributeFilter } from '@gooddata/sdk-model';
 import { IDashboardAttributeFilterByDate } from '@gooddata/sdk-model';
@@ -174,6 +175,7 @@ import { IDashboardInsightProps as IDashboardInsightProps_2 } from './types.js';
 import { IDashboardKpiProps as IDashboardKpiProps_2 } from './types.js';
 import { IDashboardLayout } from '@gooddata/sdk-model';
 import { IDashboardLayoutItem } from '@gooddata/sdk-model';
+import { IDashboardLayoutProps as IDashboardLayoutProps_2 } from './types.js';
 import { IDashboardLayoutSection } from '@gooddata/sdk-model';
 import { IDashboardLayoutSectionHeader } from '@gooddata/sdk-model';
 import { IDashboardLayoutSizeByScreenSize } from '@gooddata/sdk-model';
@@ -2298,6 +2300,11 @@ export declare type CustomDashboardKpiComponent = ComponentType<IDashboardKpiPro
  */
 export declare type CustomDashboardLayoutComponent = ComponentType<IDashboardLayoutProps>;
 
+/**
+ * @alpha
+ */
+export declare type CustomDashboardNestedLayoutComponent = ComponentType<IDashboardNestedLayoutProps>;
+
 /**
  * @public
  */
@@ -4758,6 +4765,38 @@ export declare interface DashboardLayoutChangedPayload {
  */
 export declare type DashboardLayoutCommands = AddLayoutSection | MoveLayoutSection | RemoveLayoutSection | ChangeLayoutSectionHeader | AddSectionItems | MoveSectionItem | RemoveSectionItem | RemoveSectionItemByWidgetRef | ResizeHeight;
 
+/**
+ * @alpha
+ */
+export declare type DashboardLayoutComponentProvider = (widget: IDashboardLayout) => CustomDashboardNestedLayoutComponent;
+
+/**
+ * @internal
+ */
+export declare type DashboardLayoutDraggableComponent = {
+    DraggingComponent?: DashboardLayoutDraggingComponent;
+    type: "dashboardLayout";
+};
+
+/**
+ * @internal
+ */
+export declare type DashboardLayoutDraggableItem = BaseDraggableMovingItem & {
+    type: "dashboardLayout";
+};
+
+/**
+ * @internal
+ */
+export declare type DashboardLayoutDraggableListItem = BaseDraggableLayoutItem & {
+    type: "dashboardLayoutListItem";
+};
+
+/**
+ * @internal
+ */
+export declare type DashboardLayoutDraggingComponent = ComponentType<IDashboardLayoutDraggingComponentProps>;
+
 /**
  * This event is emitted when a new dashboard layout section is added.
  *
@@ -5028,6 +5067,12 @@ export declare interface DashboardLayoutSectionRemovedPayload {
     readonly stashIdentifier?: StashedDashboardItemsId;
 }
 
+/**
+ * Definition of Dashboard layout widget
+ * @internal
+ */
+export declare type DashboardLayoutWidgetComponentSet = CustomComponentBase<IDashboardNestedLayoutProps, Parameters<DashboardLayoutComponentProvider>> & DraggableComponent & Partial<CreatableByDragComponent> & Partial<CreatablePlaceholderComponent<IDashboardNestedLayoutProps>> & ConfigurableWidget<IDashboardLayout>;
+
 /**
  * @beta
  */
@@ -6135,11 +6180,23 @@ export declare const DefaultDashboardKpiPlaceholderWidget: CustomDashboardWidget
  */
 export declare const DefaultDashboardLayout: (props: IDashboardLayoutProps) => JSX.Element;
 
+/**
+ * @internal
+ */
+export declare function DefaultDashboardLayoutComponentSetFactory(dashboardLayoutComponentProvider: DashboardLayoutComponentProvider): DashboardLayoutWidgetComponentSet;
+
 /**
  * @internal
  */
 export declare const DefaultDashboardMainContent: (_: IDashboardProps) => React_2.JSX.Element;
 
+/**
+ * Default implementation of the dashboard layout widget.
+ *
+ * @public
+ */
+export declare const DefaultDashboardNestedLayout: ComponentType<IDashboardLayoutProps_2>;
+
 /**
  * Default implementation of the dashboard rich text widget.
  *
@@ -6409,18 +6466,18 @@ export declare function dispatchAndWaitFor<TCommand extends DashboardCommands, T
  * @internal
  */
 export declare type DraggableComponent = {
-    dragging: AttributeFilterDraggableComponent | DateFilterDraggableComponent | KpiDraggableComponent | InsightDraggableComponent | RichTextDraggableComponent | VisualizationSwitcherDraggableComponent | CustomDraggableComponent;
+    dragging: AttributeFilterDraggableComponent | DateFilterDraggableComponent | KpiDraggableComponent | InsightDraggableComponent | RichTextDraggableComponent | VisualizationSwitcherDraggableComponent | DashboardLayoutDraggableComponent | CustomDraggableComponent;
 };
 
 /**
  * @internal
  */
-export declare type DraggableContentItem = AttributeFilterDraggableItem | AttributeFilterPlaceholderDraggableItem | DateFilterDraggableItem | InsightDraggableItem | InsightDraggableListItem | InsightPlaceholderDraggableItem | KpiDraggableItem | KpiPlaceholderDraggableItem | RichTextDraggableItem | RichTextDraggableListItem | VisualizationSwitcherDraggableItem | VisualizationSwitcherDraggableListItem | CustomWidgetDraggableItem | CustomDraggableItem;
+export declare type DraggableContentItem = AttributeFilterDraggableItem | AttributeFilterPlaceholderDraggableItem | DateFilterDraggableItem | InsightDraggableItem | InsightDraggableListItem | InsightPlaceholderDraggableItem | KpiDraggableItem | KpiPlaceholderDraggableItem | RichTextDraggableItem | RichTextDraggableListItem | VisualizationSwitcherDraggableItem | VisualizationSwitcherDraggableListItem | DashboardLayoutDraggableItem | DashboardLayoutDraggableListItem | CustomWidgetDraggableItem | CustomDraggableItem;
 
 /**
  * @internal
  */
-export declare type DraggableContentItemType = "attributeFilter" | "dateFilter" | "attributeFilter-placeholder" | "insightListItem" | "insight" | "insight-placeholder" | "kpi" | "kpi-placeholder" | "richText" | "richTextListItem" | "visualizationSwitcher" | "visualizationSwitcherListItem" | "custom";
+export declare type DraggableContentItemType = "attributeFilter" | "dateFilter" | "attributeFilter-placeholder" | "insightListItem" | "insight" | "insight-placeholder" | "kpi" | "kpi-placeholder" | "richText" | "richTextListItem" | "visualizationSwitcher" | "visualizationSwitcherListItem" | "dashboardLayout" | "dashboardLayoutListItem" | "custom";
 
 /**
  * @internal
@@ -6458,6 +6515,8 @@ export declare type DraggableItemComponentTypeMapping = {
     richTextListItem: RichTextDraggableListItem;
     visualizationSwitcher: VisualizationSwitcherDraggableItem;
     visualizationSwitcherListItem: VisualizationSwitcherDraggableListItem;
+    dashboardLayout: DashboardLayoutDraggableItem;
+    dashboardLayoutListItem: DashboardLayoutDraggableListItem;
     custom: CustomDraggableItem;
 };
 
@@ -6482,7 +6541,7 @@ export declare type DraggableItemTypeMapping = DraggableItemComponentTypeMapping
 /**
  * @internal
  */
-export declare type DraggableLayoutItem = InsightDraggableItem | KpiDraggableItem | RichTextDraggableItem | VisualizationSwitcherDraggableItem | CustomWidgetDraggableItem;
+export declare type DraggableLayoutItem = InsightDraggableItem | KpiDraggableItem | RichTextDraggableItem | VisualizationSwitcherDraggableItem | DashboardLayoutDraggableItem | CustomWidgetDraggableItem;
 
 /**
  * @internal
@@ -8295,6 +8354,18 @@ export declare interface IDashboardCustomComponentProps {
      * @public
      */
     VisualizationSwitcherComponentProvider?: OptionalVisualizationSwitcherComponentProvider;
+    /**
+     * Specify function to obtain custom component to use for rendering a dashboard layout (nested).
+     *
+     * @remarks
+     * -  If not provided, the default implementation {@link DefaultDashboardLayout} will be used.
+     * -  If factory function is provided and it returns undefined, then the default implementation {@link DefaultDashboardLayout}.
+     *    This is useful if you want to customize just one particular nested layout and keep default rendering for
+     *    the other nested layouts.
+     *
+     * @public
+     */
+    DashboardLayoutComponentProvider?: OptionalDashboardLayoutComponentProvider;
     /**
      * Specify function to obtain custom component to use for rendering a visualization switcher toolbar.
      *
@@ -9279,6 +9350,14 @@ export declare interface IDashboardLayoutCustomizer {
     customizeFluidLayout(fun: FluidLayoutCustomizationFn): IDashboardLayoutCustomizer;
 }
 
+/**
+ * @internal
+ */
+export declare type IDashboardLayoutDraggingComponentProps = {
+    itemType: "dashboardLayout";
+    item: DashboardLayoutDraggableItem;
+};
+
 /**
  * @alpha
  */
@@ -9289,6 +9368,51 @@ export declare interface IDashboardLayoutProps {
     onError?: OnError;
 }
 
+/**
+ * @alpha
+ */
+export declare interface IDashboardNestedLayoutProps {
+    ErrorComponent?: React.ComponentType<IErrorProps>;
+    onFiltersChange?: (filters: (IDashboardFilter | FilterContextItem)[], resetOthers?: boolean) => void;
+    onDrill?: OnFiredDashboardDrillEvent;
+    onError?: OnError;
+    layout?: IDashboardLayout<ExtendedDashboardWidget>;
+    screen?: ScreenSize;
+    parentLayoutItemSize?: IDashboardLayoutSizeByScreenSize;
+    /**
+     * Backend to work with.
+     *
+     * @remarks
+     * Note: the backend must come either from this property or from BackendContext. If you do not specify
+     * backend here, then the component MUST be rendered within an existing BackendContext.
+     *
+     * @alpha
+     */
+    backend?: IAnalyticalBackend;
+    /**
+     * Workspace where the Insight widget exists.
+     *
+     * @remarks
+     * Note: the workspace must come either from this property or from WorkspaceContext. If you do not specify
+     * workspace here, then the component MUST be rendered within an existing WorkspaceContext.
+     *
+     * @alpha
+     */
+    workspace?: string;
+    /**
+     * Height of the visualization switcher widget container.
+     *
+     * @alpha
+     */
+    clientHeight?: number;
+    /**
+     * Width of the visualization switcher widget container.
+     *
+     * @alpha
+     */
+    clientWidth?: number;
+}
+
 /**
  * Raw, low-level interface that the dashboard plugins need to implement.
  *
@@ -11778,6 +11902,16 @@ export declare const isDashboardKpiWidgetMeasureChanged: (obj: unknown) => obj i
  */
 export declare const isDashboardLayoutChanged: (obj: unknown) => obj is DashboardLayoutChanged;
 
+/**
+ * @internal
+ */
+export declare function isDashboardLayoutDraggableItem(item: any): item is DashboardLayoutDraggableItem;
+
+/**
+ * @internal
+ */
+export declare function isDashboardLayoutDraggableListItem(item: any): item is DashboardLayoutDraggableListItem;
+
 /**
  * Tests whether the provided object is an instance of {@link DashboardLayoutSectionAdded}.
  *
@@ -12223,6 +12357,13 @@ export declare interface ISidebarProps {
      * @internal
      */
     VisualizationSwitcherWidgetComponentSet?: VisualizationSwitcherWidgetComponentSet;
+    /**
+     * Layout (nested) widget component set.
+     * Do not set or override this property, it's injected by the Dashboard.
+     *
+     * @internal
+     */
+    DashboardLayoutWidgetComponentSet?: DashboardLayoutWidgetComponentSet;
     /**
      * Component, that renders delete drop zone.
      * Do not set or override this property, it's injected by the Dashboard.
@@ -13440,6 +13581,11 @@ export declare type OptionalAttributeFilterComponentProvider = OptionalProvider<
  */
 export declare type OptionalDashboardContentComponentProvider = OptionalProvider<DashboardContentComponentProvider>;
 
+/**
+ * @alpha
+ */
+export declare type OptionalDashboardLayoutComponentProvider = OptionalProvider<DashboardLayoutComponentProvider>;
+
 /**
  * @public
  */
@@ -16283,6 +16429,11 @@ export declare const selectEnableClickableAttributeURL: DashboardSelector<boolea
  */
 export declare const selectEnableCompanyLogoInEmbeddedUI: DashboardSelector<boolean>;
 
+/**
+ * @alpha
+ */
+export declare const selectEnableComparisonInAlerting: DashboardSelector<boolean>;
+
 /**
  * Returns whether cross filtering should use alias titles.
  *
@@ -16512,6 +16663,17 @@ export declare const selectExecutionResult: (state: DashboardState, id: EntityId
  */
 export declare const selectExecutionResultByRef: (ref: ObjRef | undefined) => DashboardSelector<IExecutionResultEnvelope | undefined>;
 
+/**
+ * Selects filterable widget by its ref (including custom widgets).
+ * This selector will return undefined if the provided ref to non-filterable widget.
+ *
+ * @remarks
+ * To limit the scope only to analytical widgets, use {@link selectAnalyticalWidgetByRef}.
+ *
+ * @alpha
+ */
+export declare const selectFilterableWidgetByRef: (ref: ObjRef | undefined) => DashboardSelector<IWidget | ICustomWidget | undefined>;
+
 /**
  * @alpha
  */
@@ -19173,7 +19335,7 @@ export declare const useDashboardScheduledEmails: () => {
     automations: IAutomationMetadataObject[];
     automationsCount: number;
     numberOfAvailableDestinations: number;
-    widget: IWidget | undefined;
+    widget: IWidget | ICustomWidget_2 | undefined;
     insight: IInsight | undefined;
     automationsLoading: boolean;
     automationsError: GoodDataSdkError | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-dashboard",
-  "version": "10.15.0-alpha.8",
+  "version": "10.15.0-beta.1",
   "description": "GoodData SDK - Dashboard Component",
   "repository": {
     "type": "git",
@@ -57,17 +57,17 @@
     "ts-invariant": "^0.7.5",
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
-    "@gooddata/sdk-backend-base": "10.15.0-alpha.8",
-    "@gooddata/sdk-backend-spi": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui": "10.15.0-alpha.8",
-    "@gooddata/sdk-model": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui-ext": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui-filters": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui-geo": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui-kit": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui-theme-provider": "10.15.0-alpha.8",
-    "@gooddata/util": "10.15.0-alpha.8",
-    "@gooddata/sdk-ui-vis-commons": "10.15.0-alpha.8"
+    "@gooddata/sdk-backend-base": "10.15.0-beta.1",
+    "@gooddata/sdk-backend-spi": "10.15.0-beta.1",
+    "@gooddata/sdk-ui": "10.15.0-beta.1",
+    "@gooddata/sdk-ui-ext": "10.15.0-beta.1",
+    "@gooddata/sdk-model": "10.15.0-beta.1",
+    "@gooddata/sdk-ui-filters": "10.15.0-beta.1",
+    "@gooddata/sdk-ui-geo": "10.15.0-beta.1",
+    "@gooddata/sdk-ui-kit": "10.15.0-beta.1",
+    "@gooddata/sdk-ui-theme-provider": "10.15.0-beta.1",
+    "@gooddata/sdk-ui-vis-commons": "10.15.0-beta.1",
+    "@gooddata/util": "10.15.0-beta.1"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -120,9 +120,9 @@
     "typescript": "5.3.3",
     "vitest": "1.0.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/i18n-toolkit": "10.15.0-alpha.8",
-    "@gooddata/reference-workspace": "10.15.0-alpha.8",
-    "@gooddata/sdk-backend-mockingbird": "10.15.0-alpha.8"
+    "@gooddata/i18n-toolkit": "10.15.0-beta.1",
+    "@gooddata/reference-workspace": "10.15.0-beta.1",
+    "@gooddata/sdk-backend-mockingbird": "10.15.0-beta.1"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage *.log styles/css tsconfig.tsbuildinfo",

package/styles/css/alerting.css

@@ -349,19 +349,38 @@
   width: 100%;
 }
 
-.gd-alert-destination-select {
+.gd-alert-destination-select,
+.gd-alert-comparison-select {
   margin-bottom: 10px;
 }
 
-.gd-button.gd-alert-destination-select__button {
+.gd-button.gd-alert-destination-select__button,
+.gd-button.gd-alert-comparison-select__button {
   margin-top: 0;
-  width: 105px;
-}
-.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:hover, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus) {
+  padding-left: 5px;
+  width: 100% !important;
+}
+.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:hover, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:hover,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus),
+.gd-button.gd-alert-comparison-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:hover, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:hover,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus) {
   box-shadow: none;
   border-color: transparent;
 }
-.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus) {
+.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus),
+.gd-button.gd-alert-comparison-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus) {
   background: transparent;
 }
 

package/styles/css/alerting.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../node_modules/react-loading-skeleton/dist/skeleton.css","../scss/alerting.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAAA;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AC3CJ;EACI;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;AAAA;AAAA;AAAA;;;AAOR;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;EACA,OCtCmB;;;AD4CvB;EACI;EACA;EACA;EACA;;AAEA;EACI,kBCmCgB;;ADhCpB;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,kBCkBoB;EDjBpB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCzCkB;;;AD6C1B;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA,OCvFY;EDwFZ;;;AAGJ;EACI;EACA;EACA,OCrGmB;EDsGnB;EACA;;;AAMJ;EACI;EACA;EACA,OCzGY;ED0GZ;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCjIY;;ADmIZ;EACI;;;AAIR;EACI;AAEA;AAOA;;AANA;AAAA;EAEI;EACA;;AAIJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI,OCzKmB;;;AD4KvB;EACI;;AAEA;EACI;EACA;;;AAOR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC7LY;ED8LZ;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAOA;EACI;EACA;EACA;;;AAOR;AAAA;EAEI;;;AAGJ;AAAA;EAEI;;;AAEJ;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;EAEI;;AAEA;AAAA;EACI;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;;AAEA;EAEI;;AAGJ;EACI,OCrQkB;EDsQlB;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;;;AAIA;EAEI;EAEA;;AAGJ;EACI;;;AAKJ;EACI;;;AAOR;EACI;;;AAGJ;EACI;;;AAMJ;EACI;;;AAKJ;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;;AAOR;EACI;;;AAMJ;EACI;EACA;EACA;;AAEA;EAEI,kBCtQe;;ADyQnB;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EACI,OCnZY;EDoZZ,kBCnWkB","file":"alerting.css"}
+{"version":3,"sourceRoot":"","sources":["../../node_modules/react-loading-skeleton/dist/skeleton.css","../scss/alerting.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AAAA;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAMA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AC3CJ;EACI;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;AAAA;AAAA;AAAA;;;AAOR;EACI;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;EACA,OCtCmB;;;AD4CvB;EACI;EACA;EACA;EACA;;AAEA;EACI,kBCmCgB;;ADhCpB;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI,kBCkBoB;EDjBpB;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,kBCzCkB;;;AD6C1B;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA,OCvFY;EDwFZ;;;AAGJ;EACI;EACA;EACA,OCrGmB;EDsGnB;EACA;;;AAMJ;EACI;EACA;EACA,OCzGY;ED0GZ;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA,OCjIY;;ADmIZ;EACI;;;AAIR;EACI;AAEA;AAOA;;AANA;AAAA;EAEI;EACA;;AAIJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;;AAIR;EACI,OCzKmB;;;AD4KvB;EACI;;AAEA;EACI;EACA;;;AAOR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC7LY;ED8LZ;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAOA;EACI;EACA;EACA;;;AAOR;AAAA;EAEI;;;AAGJ;AAAA;EAEI;;;AAEJ;EACI;;;AAGJ;AAAA;EAEI;;;AAGJ;AAAA;EAEI;;AAEA;AAAA;EACI;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;;AAEA;EAEI;;AAGJ;EACI,OCrQkB;EDsQlB;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;;AAEA;EACI;;;AAIR;EACI;EACA;;;AAIA;EAEI;EAEA;;AAGJ;EACI;;;AAKJ;EACI;;;AAOR;EACI;;;AAGJ;EACI;;;AAMJ;AAAA;EAEI;;;AAKJ;AAAA;EAEI;EACA;EAEA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;EACA;;AAGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACI;;;AAOR;EACI;;;AAMJ;EACI;EACA;EACA;;AAEA;EAEI,kBC1Qe;;AD6QnB;EACI;EACA;EACA;EACA;EACA;;;AAKJ;EACI,OCvZY;EDwZZ,kBCvWkB","file":"alerting.css"}

package/styles/css/main.css

@@ -22916,33 +22916,28 @@ div.gd-empty-item-bubble {
   background-repeat: no-repeat;
   background-position: center;
 }
-.add-item-placeholder-rich-text {
+.add-item-placeholder.add-panel-item {
   padding: 0 10px 0 0;
 }
-.add-item-placeholder-rich-text svg {
+.add-item-placeholder.add-panel-item svg {
   margin: 0 14px;
 }
-.add-item-placeholder-rich-text::before {
+.add-item-placeholder.add-panel-item::before {
   content: none;
 }
-.add-item-placeholder-visualization-switcher {
-  padding: 0 10px 0 0;
-}
-.add-item-placeholder-visualization-switcher svg {
-  margin: 0 14px;
-}
-.add-item-placeholder-visualization-switcher:hover .gd-add-visualization-switcher {
+.add-item-placeholder.add-panel-item:hover .gd-add-item-placeholder-help-trigger {
   display: block;
   cursor: help;
 }
-.add-item-placeholder-visualization-switcher .gd-add-visualization-switcher {
+.add-item-placeholder.add-panel-item .gd-add-item-placeholder-help-trigger {
   display: none;
   flex: 0 0 auto;
-  margin-left: 20px;
+  margin-left: auto;
+  margin-right: 5px;
   font-weight: normal;
 }
-.add-item-placeholder-visualization-switcher::before {
-  content: none;
+.add-item-placeholder.add-panel-item span {
+  flex: 0 0 auto;
 }
 .add-item-placeholder span {
   flex: 1 1 auto;
@@ -24913,19 +24908,38 @@ div.gd-empty-item-bubble {
   width: 100%;
 }
 
-.gd-alert-destination-select {
+.gd-alert-destination-select,
+.gd-alert-comparison-select {
   margin-bottom: 10px;
 }
 
-.gd-button.gd-alert-destination-select__button {
+.gd-button.gd-alert-destination-select__button,
+.gd-button.gd-alert-comparison-select__button {
   margin-top: 0;
-  width: 105px;
+  padding-left: 5px;
+  width: 100% !important;
 }
-.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:hover, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus) {
+.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:hover, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:hover,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus),
+.gd-button.gd-alert-comparison-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:hover, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:hover,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus) {
   box-shadow: none;
   border-color: transparent;
 }
-.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus) {
+.gd-button.gd-alert-destination-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus),
+.gd-button.gd-alert-comparison-select__button:not(.gd-button.gd-alert-destination-select__button--open, .gd-button.gd-alert-destination-select__button:active, .gd-button.gd-alert-destination-select__button:focus,
+.gd-button.gd-alert-comparison-select__button--open,
+.gd-button.gd-alert-comparison-select__button:active,
+.gd-button.gd-alert-comparison-select__button:focus) {
   background: transparent;
 }