@adaptabletools/adaptable 10.0.0-canary.0

package/src/View/Components/ModuleSummary/ModuleHeader.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModuleHeader = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+/// <reference path="../../typings/.d.ts" />
+const ButtonNew_1 = require("../Buttons/ButtonNew");
+const SummaryRowItem_1 = require("./SummaryRowItem");
+const ModuleProfile_1 = require("../ModuleProfile");
+class ModuleHeader extends React.Component {
+    render() {
+        let summaryItems = [];
+        let newButton = this.props.newButtonDisabled ? null : (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
+        summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo })));
+        summaryItems.push(this.props.moduleSummary);
+        summaryItems.push(newButton);
+        return React.createElement(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
+    }
+}
+exports.ModuleHeader = ModuleHeader;

package/src/View/Components/ModuleSummary/SummaryRowItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SummaryRowItemProps extends React.ClassAttributes<SummaryRowItem> {
+    SummaryItems: any[];
+}
+export declare class SummaryRowItem extends React.Component<SummaryRowItemProps, {}> {
+    render(): any;
+}

package/src/View/Components/ModuleSummary/SummaryRowItem.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SummaryRowItem = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+/// <reference path="../../typings/.d.ts" />
+const AdaptableObjectRow_1 = require("../AdaptableObjectRow");
+class SummaryRowItem extends React.Component {
+    render() {
+        let colItems = [];
+        colItems.push({ Size: 3, Content: this.props.SummaryItems[0] });
+        colItems.push({ Size: 7, Content: this.props.SummaryItems[1] });
+        colItems.push({ Size: 2, Content: this.props.SummaryItems[2] });
+        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
+    }
+}
+exports.SummaryRowItem = SummaryRowItem;

package/src/View/Components/ModuleValueSelector/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ValueSelectorProps } from '../ValueSelector';
+import { AdaptableModule } from '../../../PredefinedConfig/Common/Types';
+export declare type ModuleValueSelectorProps = Omit<ValueSelectorProps<AdaptableModule, AdaptableModule>, 'allowReorder' | 'toIdentifier' | 'toLabel'>;
+export declare const ModuleValueSelector: (props: ModuleValueSelectorProps) => JSX.Element;

package/src/View/Components/ModuleValueSelector/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModuleValueSelector = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ValueSelector_1 = require("../ValueSelector");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const react_1 = require("react");
+const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
+exports.ModuleValueSelector = (props) => {
+    const { options, value, onChange, selectionBoxPosition = 'top' } = props, valueSelectorProps = tslib_1.__rest(props, ["options", "value", "onChange", "selectionBoxPosition"]);
+    const { api } = AdaptableContext_1.useAdaptable();
+    const selectedModulesMap = react_1.useMemo(() => {
+        if (!value || !value.length) {
+            return new Map();
+        }
+        return value.reduce((acc, val) => {
+            acc.set(val, true);
+            return acc;
+        }, new Map());
+    }, [value]);
+    const allowReorder = react_1.useCallback((option) => {
+        return selectedModulesMap.has(option);
+    }, [selectedModulesMap]);
+    const moduleLabelMap = react_1.useMemo(() => {
+        const labelMap = new Map();
+        options.forEach((module) => { var _a; return labelMap.set(module, (_a = api.internalApi.getModuleFriendlyName(module)) !== null && _a !== void 0 ? _a : module); });
+        return labelMap;
+    }, [options]);
+    const sortedOptions = react_1.useMemo(() => {
+        return sortWithOrder_1.sortWithOrderArray(options, value, { sortUnorderedItems: true });
+    }, [allowReorder, options, value]);
+    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition })));
+};

package/src/View/Components/NewScopeComponent.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ScopeDataType, AdaptableScope } from '../../PredefinedConfig/Common/AdaptableScope';
+import { AdaptableColumn } from '../../types';
+export declare const isScopeValid: ({ Scope }: {
+    Scope: AdaptableScope;
+}) => string | true;
+export interface NewScopeComponentProps extends React.ClassAttributes<any> {
+    scope: AdaptableScope;
+    scopeColumns?: AdaptableColumn[];
+    updateScope: (scope: AdaptableScope) => void;
+    availableDataTypes?: ScopeDataType[];
+    hideWholeRow?: boolean;
+    style?: React.CSSProperties;
+    descriptions: {
+        rowScope: string;
+        columnScope: string;
+    };
+}
+export declare const renderScopeSummary: (scope: AdaptableScope, labels: {
+    scopeWholeRow: string;
+    scopeColumns: string;
+    scopeDataTypes: string;
+}) => JSX.Element;
+export declare const NewScopeComponent: (props: NewScopeComponentProps) => JSX.Element;

package/src/View/Components/NewScopeComponent.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewScopeComponent = exports.renderScopeSummary = exports.isScopeValid = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
+const CheckBox_1 = require("../../components/CheckBox");
+const Tabs_1 = require("../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../Wizard/OnePageAdaptableWizard");
+const ColumnSelector_1 = require("./ColumnSelector");
+const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ValueSelector_1 = require("./ValueSelector");
+exports.isScopeValid = ({ Scope }) => {
+    const result = [];
+    if (!Scope) {
+        return 'No scope specified or scope is empty';
+    }
+    if (Scope && 'ColumnIds' in Scope && Scope.ColumnIds.length === 0) {
+        result.push('No columns selected for scope');
+    }
+    if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
+        result.push('No data types selected for scope');
+    }
+    return result.length ? result.join(', ') : true;
+};
+const DATA_TYPES_MAP = {
+    Date: {
+        label: 'Date',
+        value: 'Date',
+    },
+    Number: {
+        label: 'Number',
+        value: 'Number',
+    },
+    String: {
+        label: 'String',
+        value: 'String',
+    },
+    Boolean: {
+        label: 'Boolean',
+        value: 'Boolean',
+    },
+};
+const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
+exports.renderScopeSummary = (scope, labels) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const scopeApi = adaptable.api.scopeApi;
+    const columnsInScope = scopeApi.getColumnsForScope(scope);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Box, null,
+            React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
+        React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
+            React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: columnsInScope.length ? 2 : 0 }, labels.scopeColumns),
+            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.ColumnId), toLabel: (c) => c.FriendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.ColumnId })) : null)) : null),
+        React.createElement(rebass_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
+            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
+            React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
+};
+exports.NewScopeComponent = (props) => {
+    const { api } = AdaptableContext_1.useAdaptable();
+    const { scopeApi, columnApi } = api;
+    const [columnsSearchText, setColumnsSearchText] = react_1.useState('');
+    const scopeColumns = props.scopeColumns || columnApi.getColumns();
+    const getScopeChoice = (scope) => {
+        if (!scope) {
+            return undefined;
+        }
+        if (scopeApi.scopeIsAll(scope)) {
+            return 'All';
+        }
+        if (scopeApi.scopeHasColumns(props.scope)) {
+            return 'Column';
+        }
+        if (scopeApi.scopeHasDataType(props.scope)) {
+            return 'DataType';
+        }
+        return undefined;
+    };
+    const onScopeSelectChanged = (value) => {
+        let newScope;
+        if (value == 'Column') {
+            newScope = {
+                ColumnIds: [],
+            };
+        }
+        else if (value == 'DataType') {
+            newScope = {
+                DataTypes: [],
+            };
+        }
+        else {
+            newScope = {
+                All: true,
+            };
+        }
+        props.updateScope(newScope);
+    };
+    const onColumnsSelectedChanged = (cols) => {
+        const newScope = {
+            ColumnIds: cols,
+        };
+        props.updateScope(newScope);
+    };
+    const onCheckBoxDataTypeChecked = (checked, item) => {
+        let dataTypes = [].concat(scopeApi.getDataTypesInScope(props.scope));
+        if (checked) {
+            dataTypes.push(item);
+        }
+        else {
+            const index = dataTypes.indexOf(item, 0);
+            if (index > -1) {
+                dataTypes.splice(index, 1);
+            }
+        }
+        let newScope = {
+            DataTypes: dataTypes,
+        };
+        props.updateScope(newScope);
+    };
+    const scopeChoice = getScopeChoice(props.scope);
+    const dataTypesInScope = props.scope && 'DataTypes' in props.scope ? scopeApi.getDataTypesInScope(props.scope) : null;
+    let dataTypeOptions = DATA_TYPES_OPTIONS;
+    if (Array.isArray(props.availableDataTypes)) {
+        dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
+    }
+    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
+        props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
+            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "Whole Row"))),
+        React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
+            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Columns")),
+        React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
+            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "DataTypes")),
+        props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
+            React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, props.descriptions.rowScope))),
+        React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
+            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
+                React.createElement(rebass_1.Text, { fontSize: 2 }, props.descriptions.columnScope),
+                React.createElement(rebass_1.Flex, { flex: 3 }),
+                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
+            React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
+                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged }))),
+        React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { key: dataTypeOption.value, "data-name": "scope", checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))));
+};

package/src/View/Components/Panels/FilterFormPanel.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ColumnMenuTab } from '../../../PredefinedConfig/Common/Enums';
+import { PanelProps } from '../../../components/Panel';
+export interface FilterFormPanelProps extends PanelProps {
+    clearFilterButton?: React.ReactElement<any>;
+    saveButton?: React.ReactElement<any>;
+    closeButton?: React.ReactElement<any>;
+    ColumnMenuTab: ColumnMenuTab;
+    ColumnMenuTabChanged: (e: any) => void;
+    onFilterApplied: () => void;
+    IsAlwaysFilter: boolean;
+    showCloseButton: boolean;
+    useVendorStyle: boolean;
+    applyFilterButtonDisabled: boolean;
+    autoApplyFilter: boolean;
+}
+export declare class FilterFormPanel extends React.Component<FilterFormPanelProps, {}> {
+    render(): JSX.Element;
+    onApplyFilterClicked(): void;
+    onSelectMenu(): any;
+    onSelectFilter(): any;
+}

package/src/View/Components/Panels/FilterFormPanel.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterFormPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+class FilterFormPanel extends React.Component {
+    render() {
+        const header = (React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", style: { width: '100%' } },
+            this.props.IsAlwaysFilter ? (React.createElement(rebass_1.Flex, { flex: 6, marginRight: 2 }, "Filter")) : (React.createElement(rebass_1.Flex, { flex: 6, flexDirection: "column" },
+                React.createElement(rebass_1.Flex, null,
+                    React.createElement(rebass_1.Flex, { flex: 6 },
+                        React.createElement(Radio_1.default, { value: "Menu", checked: this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Menu, onChange: () => this.onSelectMenu() }, "Menu")),
+                    React.createElement(rebass_1.Flex, { flex: 6 },
+                        React.createElement(Radio_1.default, { value: "Filter", checked: this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Filter, onChange: () => this.onSelectFilter() }, "Filter"))))),
+            this.props.clearFilterButton &&
+                this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Filter &&
+                this.props.clearFilterButton,
+            this.props.saveButton &&
+                this.props.ColumnMenuTab == Enums_1.ColumnMenuTab.Filter &&
+                this.props.saveButton));
+        return (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+            React.createElement(Panel_1.default, { className: "ab-FilterFormPanel", header: header, headerProps: { padding: 1 }, style: Object.assign(Object.assign({}, this.props.style), { flex: 1 }), bodyProps: { padding: 0, style: { maxHeight: '50vh' } }, bodyScroll: true, borderRadius: 0, border: "none" }, this.props.children),
+            this.props.autoApplyFilter ? null : (React.createElement(rebass_1.Flex, { flex: "none", flexDirection: "row", padding: 1, justifyContent: "flex-end" },
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.applyFilterButtonDisabled, onClick: () => this.onApplyFilterClicked() }, "Apply Filter")))));
+    }
+    onApplyFilterClicked() {
+        this.props.onFilterApplied();
+    }
+    onSelectMenu() {
+        this.props.ColumnMenuTabChanged(Enums_1.ColumnMenuTab.Menu);
+    }
+    onSelectFilter() {
+        this.props.ColumnMenuTabChanged(Enums_1.ColumnMenuTab.Filter);
+    }
+}
+exports.FilterFormPanel = FilterFormPanel;

package/src/View/Components/Panels/PanelDashboard/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { PanelProps } from '../../../../components/Panel';
+import { AccessLevel } from '../../../../PredefinedConfig/Common/Entitlement';
+export interface PanelDashboardProps extends PanelProps {
+    headerText: string;
+    onClose: () => void;
+    onConfigure: () => void;
+    showConfigureButton?: boolean;
+    showCloseButton?: boolean;
+    accessLevel: AccessLevel;
+}
+export declare class PanelDashboard extends React.Component<PanelDashboardProps, {}> {
+    static defaultProps: PanelDashboardProps;
+    render(): JSX.Element;
+}

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelDashboard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Dashboard_1 = require("../../../../components/Dashboard");
+class PanelDashboard extends React.Component {
+    render() {
+        const { headerText, showConfigureButton, showCloseButton, onConfigure, onClose, accessLevel, children, } = this.props;
+        return (React.createElement(Dashboard_1.DashboardToolbar, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureButton, showClose: showCloseButton, onClose: onClose, accessLevel: accessLevel }, children));
+    }
+}
+exports.PanelDashboard = PanelDashboard;
+PanelDashboard.defaultProps = {
+    showConfigureButton: true,
+    showCloseButton: true,
+    headerText: 'Module',
+    onClose: null,
+    onConfigure: null,
+    accessLevel: 'Full',
+};

package/src/View/Components/Panels/PanelToolPanel/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { PanelProps } from '../../../../components/Panel';
+export interface PanelToolPanelProps extends PanelProps {
+    headerText: string;
+    onConfigure: () => void;
+    onClose: () => void;
+    onMinimiseChanged?: () => void;
+    isMinimised: boolean;
+    useDefaultPanelStyle?: boolean;
+}
+export declare class PanelToolPanel extends React.Component<PanelToolPanelProps, {}> {
+    static defaultProps: PanelToolPanelProps;
+    render(): JSX.Element;
+}

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelToolPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
+const ButtonClose_1 = require("../../Buttons/ButtonClose");
+const ButtonConfigure_1 = require("../../Buttons/ButtonConfigure");
+const ButtonMinimise_1 = require("../../Buttons/ButtonMinimise");
+const rebass_1 = require("rebass");
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const ButtonMaximise_1 = require("../../Buttons/ButtonMaximise");
+class PanelToolPanel extends React.Component {
+    render() {
+        const _a = this.props, { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure } = _a, props = tslib_1.__rest(_a, ["useDefaultPanelStyle", "isMinimised", "onMinimiseChanged", "headerText", "onClose", "onConfigure"]);
+        let header = (React.createElement(React.Fragment, null,
+            !isMinimised ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { className: "ab-ToolPanelPanel__header-minimise", onClick: () => onMinimiseChanged(), marginRight: 1 })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { className: "ab-ToolPanelPanel__header-maximise", onClick: () => onMinimiseChanged(), marginRight: 1 })),
+            React.createElement(rebass_1.Flex, { className: "ab-ToolPanelPanel__header-text", flex: 1, alignItems: "center", marginLeft: 0 }, headerText),
+            onConfigure && (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, marginLeft: 1, className: "ab-ToolPanelPanel__header-configure-button", tooltip: 'Configure ' + headerText, onClick: () => onConfigure() })),
+            onClose && (React.createElement(ButtonClose_1.ButtonClose, { marginLeft: 0, className: "ab-ToolPanelPanel__header-close-button", tooltip: 'Close ' + headerText, onClick: () => onClose(), disabled: props.disabled }))));
+        return (React.createElement(Panel_1.default, Object.assign({ border: "var(--ab-cmp-toolpanelpanel__border)" }, props, { className: join_1.default('ab-ToolPanelPanel', props.className), header: header, style: Object.assign({ color: 'var(--ab-cmp-toolpanelpanel__color)', fill: 'var(--ab-cmp-toolpanelpanel__fill)' }, props.style), headerProps: Object.assign(Object.assign({}, props.headerProps), { alignItems: 'stretch', style: Object.assign({ padding: 'var(--ab-cmp-toolpanelpanel_header__padding)', background: 'var(--ab-cmp-toolpanelpanel_header__background)', color: 'var(--ab-cmp-toolpanelpanel_header__color)', fill: 'var(--ab-cmp-toolpanelpanel_header__fill)' }, (props.headerProps ? props.headerProps.style : null)) }), bodyProps: Object.assign(Object.assign({}, props.bodyProps), { style: Object.assign(Object.assign({ padding: 'var(--ab-cmp-dashboardpanel_body__padding)', background: 'var(--ab-cmp-dashboardpanel_body__background)' }, (props.bodyProps ? props.bodyProps.style : null)), { display: 'flex', flexDirection: 'column' }) }) })));
+    }
+}
+exports.PanelToolPanel = PanelToolPanel;
+PanelToolPanel.defaultProps = {
+    headerText: '',
+    onClose: null,
+    onConfigure: null,
+    onMinimiseChanged: null,
+    isMinimised: true,
+};

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { PanelProps } from '../../../components/Panel';
+import { BoxProps } from 'rebass';
+export interface PanelWithButtonProps extends PanelProps {
+    buttonContent?: React.ReactNode;
+    buttonClick?: () => void;
+    button?: React.ReactElement<any>;
+    headerText: string;
+    bodyProps?: BoxProps;
+    headerProps?: BoxProps & {
+        'data-name': string;
+    };
+    glyphicon?: string;
+    buttonDisabled?: boolean;
+    buttonStyle?: string;
+    borderRadius?: string;
+    infoLink?: string;
+    infoLinkDisabled?: boolean;
+}
+export declare class PanelWithButton extends React.Component<PanelWithButtonProps & PanelProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Panels/PanelWithButton.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelWithButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const rebass_1 = require("rebass");
+const icons_1 = tslib_1.__importDefault(require("../../../components/icons"));
+const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+//We cannot destructure this.props using the react way in typescript which is a real pain as you
+//need to transfer props individually as a consequence
+//let { buttonContent, ...other } = this.props
+class PanelWithButton extends React.Component {
+    render() {
+        let { buttonContent } = this.props;
+        const IconCmp = icons_1.default[this.props.glyphicon];
+        let header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+            React.createElement(rebass_1.Flex, { alignItems: "center" },
+                this.props.glyphicon != null && (IconCmp ? React.createElement(IconCmp, null) : null),
+                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-before" }),
+                this.props.headerText,
+                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+                this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
+                        color: 'var(--ab-color-text-on-add)',
+                        fill: 'var(--ab-color-text-on-add)',
+                        background: 'var(--ab-color-action-add)',
+                    }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    ) }))),
+            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+            buttonContent ? (React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", disabled: this.props.buttonDisabled, onClick: () => (this.props.buttonClick ? this.props.buttonClick() : null) }, buttonContent)) : null,
+            this.props.button ? React.cloneElement(this.props.button) : null));
+        return (React.createElement(Panel_1.default, { flex: 1, className: this.props.className, bodyScroll: this.props.bodyScroll != null ? this.props.bodyScroll : true, bodyProps: this.props.bodyProps, variant: this.props.variant || 'primary', header: header, headerProps: this.props.headerProps, style: this.props.style, borderRadius: (this.props.borderRadius || 'none'), border: (this.props.border || 'none') }, this.props.children));
+    }
+}
+exports.PanelWithButton = PanelWithButton;

package/src/View/Components/Panels/PanelWithIImageThreeButtons.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PanelProps } from '../../../components/Panel';
+export interface PanelWithImageThreeButtonsProps extends PanelProps {
+    firstButton?: React.ReactElement<any>;
+    secondButton?: React.ReactElement<any>;
+    thirdButton?: React.ReactElement<any>;
+    infoBody?: any[];
+}
+export declare class PanelWithImageThreeButtons extends React.Component<PanelWithImageThreeButtonsProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Panels/PanelWithIImageThreeButtons.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelWithImageThreeButtons = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
+const icons_1 = tslib_1.__importDefault(require("../../../components/icons"));
+const rebass_1 = require("rebass");
+const ChartIcon = icons_1.default['chart'];
+//We cannot destructure this.props using the react way in typescript which is a real pain as you
+//need to transfer props individually as a consequence
+//let { buttonContent, ...other } = this.props
+class PanelWithImageThreeButtons extends React.Component {
+    render() {
+        let _a = this.props, { firstButton, secondButton, thirdButton, infoBody, header } = _a, panelProps = tslib_1.__rest(_a, ["firstButton", "secondButton", "thirdButton", "infoBody", "header"]);
+        header = (React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
+            React.createElement(ChartIcon, null),
+            React.createElement(rebass_1.Text, { mx: 2 }, header),
+            infoBody != null && React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: "", bodyText: infoBody }),
+            React.createElement("div", { style: { flex: 1 } }),
+            firstButton,
+            secondButton,
+            thirdButton));
+        return React.createElement(WizardPanel_1.default, Object.assign({}, panelProps, { header: header }));
+    }
+}
+exports.PanelWithImageThreeButtons = PanelWithImageThreeButtons;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { PanelProps } from '../../../components/Panel';
+import { BoxProps } from 'rebass';
+export interface PanelWithImageProps extends PanelProps {
+    glyphicon?: string;
+    icon?: string;
+    infoLink?: string;
+    infoLinkDisabled?: boolean;
+    borderRadius?: string;
+    bodyProps?: BoxProps;
+    theme: any;
+    headerColor?: string;
+    button?: React.ReactElement<any>;
+}
+declare class PanelWithImageCmp extends React.Component<PanelWithImageProps, {}> {
+    render(): JSX.Element;
+}
+export declare const PanelWithImage: React.ForwardRefExoticComponent<Pick<Pick<PanelWithImageProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "button" | "cite" | "data" | "dir" | "form" | "header" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "icon" | "border" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "borderRadius" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "theme" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "variant" | "headerProps" | "bodyScroll" | "bodyProps" | "glyphicon" | "infoLink" | "infoLinkDisabled" | "headerColor"> & React.RefAttributes<PanelWithImageCmp>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "button" | "cite" | "data" | "dir" | "form" | "header" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "icon" | "border" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "borderRadius" | "margin" | "ref" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "variant" | "headerProps" | "bodyScroll" | "bodyProps" | "glyphicon" | "infoLink" | "infoLinkDisabled" | "headerColor"> & {
+    theme?: any;
+}>;
+export {};

package/src/View/Components/Panels/PanelWithImage.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelWithImage = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const rebass_1 = require("rebass");
+const icons_1 = tslib_1.__importDefault(require("../../../components/icons"));
+const ButtonInfo_1 = require("../Buttons/ButtonInfo");
+//We cannot destructure this.props using the react way in typescript which is a real pain as you
+//need to transfer props individually as a consequence
+//let { buttonContent, ...other } = this.props
+class PanelWithImageCmp extends React.Component {
+    render() {
+        const IconCmp = icons_1.default[(this.props.icon || this.props.glyphicon)];
+        const headerStyle = {};
+        if (this.props.headerColor) {
+            headerStyle.color = this.props.headerColor;
+            headerStyle.fill = this.props.headerColor;
+        }
+        let headerRow = (React.createElement(rebass_1.Flex, { style: { flex: 1 } },
+            React.createElement(rebass_1.Flex, { alignItems: "center" },
+                React.createElement(rebass_1.Flex, { alignItems: "center", style: headerStyle },
+                    IconCmp ? React.createElement(IconCmp, null) : null,
+                    React.createElement(rebass_1.Box, { marginRight: 2 }),
+                    this.props.header,
+                    React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+                    this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { style: {
+                            color: 'var(--ab-color-text-on-add)',
+                            fill: 'var(--ab-color-text-on-add)',
+                            background: 'var(--ab-color-action-add)',
+                        }, onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                        ) }))),
+                React.createElement(rebass_1.Box, { flex: 1 }),
+                this.props.button && React.cloneElement(this.props.button))));
+        return (React.createElement(Panel_1.default, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
+    }
+}
+exports.PanelWithImage = styled_components_1.withTheme(PanelWithImageCmp);