d2aura 23.0.0

package/coreui/components/select/abstractSelectModalDialog.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import Entity from "../../../api/types/entity";
+import { DataGridColDef } from "d2coreui/components/grid/dataGrid";
+import { SelectionChangedEvent } from "ag-grid-community";
+import AbstractEntityApi from "../../../api/abstractEntityApi";
+import AdvancedFilteredGrid, { AdvancedFilteredGridProps, AdvancedFilteredGridState } from "../advancedFilter/advancedFilteredGrid";
+export interface AbstractSelectModalDialogProps<T extends Entity> extends AdvancedFilteredGridProps<T> {
+    api: AbstractEntityApi<T>;
+    multiSelect?: boolean;
+    visible: boolean;
+    initialWidth?: number;
+    initialHeight?: number;
+    onItemsSelected(selectedItems: T[]): void;
+    onCancel(): void;
+}
+export interface AbstractSelectModalDialogState<T extends Entity> extends AdvancedFilteredGridState<T> {
+    totalNumberOfRows?: number;
+}
+export default abstract class AbstractSelectModalDialog<T extends Entity, P extends AbstractSelectModalDialogProps<T>, S extends AbstractSelectModalDialogState<T> = AbstractSelectModalDialogState<T>> extends AdvancedFilteredGrid<T, P, S> {
+    private static MAX_ROWS_TO_SHOW;
+    protected initialState: AbstractSelectModalDialogState<T>;
+    protected constructor(props: Readonly<P>);
+    abstract getIdColumnName(): string;
+    abstract getTitle(): string;
+    protected getCodeColumnDefinition(): DataGridColDef;
+    protected getNameColumnDefinition(): DataGridColDef;
+    protected getExtraColumnDefinition(): DataGridColDef | undefined;
+    getOnlyValidRecords(): boolean;
+    protected getInitialColumnDefs(): DataGridColDef[];
+    protected renderToolbarButtons(): React.ReactElement | undefined;
+    onSelectionChanged(event: SelectionChangedEvent): void;
+    render(): React.JSX.Element;
+}

package/coreui/components/select/abstractSelectModalDialog.js

@@ -0,0 +1,110 @@
+import React from "react";
+import ExtendedDataGrid from "d2coreui/components/grid/extendedDataGrid";
+import { ModalDialog } from "d2coreui/components/modal/modalDialog";
+import AdvancedFilteredGrid from "../advancedFilter/advancedFilteredGrid";
+import AdvancedFilterButton from "../advancedFilter/advancedFilterButton";
+import { WarningOutlined } from "@ant-design/icons";
+import i18n from "d2core/i18n/i18n";
+import ColorTag from "../colorTag/colorTag";
+class AbstractSelectModalDialog extends AdvancedFilteredGrid {
+    constructor(props) {
+        super(props);
+        this.initialState = {
+            loading: false,
+            columnDefs: this.getInitialColumnDefs(),
+            datasource: {
+                getRows: async (params) => {
+                    if (this.firstLoadedPage) {
+                        let pageableList;
+                        if (this.manualReload && params.startRow === 0 && params.endRow === 100) {
+                            this.manualReload = false;
+                            pageableList = this.firstLoadedPage;
+                        }
+                        else {
+                            pageableList = await this.getRecords(params.startRow, params.endRow);
+                        }
+                        this.setState({ totalNumberOfRows: pageableList.totalNumberOfRows });
+                        let totalNumberOfRows = pageableList.totalNumberOfRows;
+                        if (totalNumberOfRows > AbstractSelectModalDialog.MAX_ROWS_TO_SHOW) {
+                            totalNumberOfRows = AbstractSelectModalDialog.MAX_ROWS_TO_SHOW;
+                        }
+                        params.successCallback(pageableList.data, totalNumberOfRows);
+                    }
+                    else {
+                        params.successCallback([], 0);
+                    }
+                }
+            },
+            selectedData: [],
+            filterConditions: [],
+        };
+        this.onSelectionChanged = this.onSelectionChanged.bind(this);
+    }
+    getCodeColumnDefinition() {
+        return this.getCodeColumn({ flex: 0.5 });
+    }
+    getNameColumnDefinition() {
+        return this.getNameColumn({ flex: 0.5 });
+    }
+    getExtraColumnDefinition() {
+        return undefined;
+    }
+    getOnlyValidRecords() {
+        return true;
+    }
+    getInitialColumnDefs() {
+        if (!this.initialColumnDefs) {
+            this.initialColumnDefs = [
+                this.getIdColumn(this.getIdColumnName()),
+                this.getCodeColumnDefinition(),
+                this.getNameColumnDefinition(),
+            ];
+            const extraColumnDefinition = this.getExtraColumnDefinition();
+            if (extraColumnDefinition) {
+                this.initialColumnDefs.push(extraColumnDefinition);
+            }
+        }
+        return this.initialColumnDefs;
+    }
+    renderToolbarButtons() {
+        const advancedFilterListName = this.getAdvancedFilterListName();
+        if (advancedFilterListName) {
+            return (React.createElement(AdvancedFilterButton, { advancedFilterApi: this.props.advancedFilterApi, listName: advancedFilterListName, columnDefinitions: this.getAdvancedFilterColumnDefinitions(), filterConditions: this.state.filterConditions, onApplyFilter: this.onApplyFilter }));
+        }
+        return undefined;
+    }
+    onSelectionChanged(event) {
+        const selectedRows = event.api.getSelectedRows();
+        this.setState({ selectedData: selectedRows });
+    }
+    render() {
+        const { visible, initialWidth, initialHeight } = this.props;
+        return (React.createElement(ModalDialog, { mode: "OK_CANCEL", title: React.createElement(React.Fragment, null,
+                this.getTitle(),
+                !!this.state.totalNumberOfRows && this.state.totalNumberOfRows > AbstractSelectModalDialog.MAX_ROWS_TO_SHOW &&
+                    React.createElement("div", { style: { display: "inline" } },
+                        React.createElement(ColorTag, { style: { whiteSpace: "break-spaces", marginLeft: 8 }, color: "warning", icon: React.createElement(WarningOutlined, null) },
+                            React.createElement("span", null, i18n("Displaying first %{count} records", { count: AbstractSelectModalDialog.MAX_ROWS_TO_SHOW + "" }))))), onOk: () => {
+                if (this.state.selectedData.length > 0) {
+                    this.props.onItemsSelected(this.state.selectedData);
+                }
+            }, onCancel: this.props.onCancel, initialWidth: initialWidth ?? 800, initialHeight: initialHeight ?? window.innerHeight * 0.9, maskClosable: false, open: visible, okButtonProps: { disabled: this.state.selectedData.length === 0 } },
+            React.createElement(ExtendedDataGrid, { ref: (dataGrid) => {
+                    this.dataGrid = dataGrid;
+                }, defaultGridConfiguration: { pageSize: -1, columnSearchVisible: true }, onGridReady: (params) => {
+                    this.gridApi = params.api;
+                }, columnDefs: this.state.columnDefs, onLoadData: this.onLoadData, rowModelType: "infinite", datasource: this.state.datasource, rowSelection: this.props.multiSelect ? "multiple" : "single", onSelectionChanged: this.onSelectionChanged, onRowDoubleClicked: event => {
+                    const item = event.data;
+                    this.props.onItemsSelected([item]);
+                }, toolbar: {
+                    toolbarButtons: this.renderToolbarButtons(),
+                }, search: {
+                    hidden: true,
+                }, onSortChanged: _event => {
+                    this.dataGrid?.loadData();
+                }, panelStyle: { padding: 0 }, noRecordsOverlayRenderer: () => React.createElement("div", null) })));
+    }
+}
+AbstractSelectModalDialog.MAX_ROWS_TO_SHOW = 1000;
+export default AbstractSelectModalDialog;
+//# sourceMappingURL=abstractSelectModalDialog.js.map

package/coreui/components/select/abstractSelectModalDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"abstractSelectModalDialog.js","sourceRoot":"","sources":["../../../../../coreui/components/select/abstractSelectModalDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport Entity from \"../../../api/types/entity\";\r\nimport {DataGridColDef} from \"d2coreui/components/grid/dataGrid\";\r\nimport ExtendedDataGrid from \"d2coreui/components/grid/extendedDataGrid\";\r\nimport {GridReadyEvent, IGetRowsParams, SelectionChangedEvent} from \"ag-grid-community\";\r\nimport {ModalDialog, ModalDialogMode} from \"d2coreui/components/modal/modalDialog\";\r\nimport AbstractEntityApi, {PageableList} from \"../../../api/abstractEntityApi\";\r\nimport AdvancedFilteredGrid, {\r\n    AdvancedFilteredGridProps,\r\n    AdvancedFilteredGridState\r\n} from \"../advancedFilter/advancedFilteredGrid\";\r\nimport AdvancedFilterButton from \"../advancedFilter/advancedFilterButton\";\r\nimport {WarningOutlined} from \"@ant-design/icons\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport ColorTag from \"../colorTag/colorTag\";\r\n\r\nexport interface AbstractSelectModalDialogProps<T extends Entity> extends AdvancedFilteredGridProps<T> {\r\n    api: AbstractEntityApi<T>\r\n\r\n    multiSelect?: boolean\r\n    visible: boolean\r\n    initialWidth?: number\r\n    initialHeight?: number\r\n\r\n    onItemsSelected(selectedItems: T[]): void\r\n\r\n    onCancel(): void\r\n}\r\n\r\nexport interface AbstractSelectModalDialogState<T extends Entity> extends AdvancedFilteredGridState<T> {\r\n    totalNumberOfRows?: number\r\n}\r\n\r\nexport default abstract class AbstractSelectModalDialog<T extends Entity,\r\n    P extends AbstractSelectModalDialogProps<T>,\r\n    S extends AbstractSelectModalDialogState<T> = AbstractSelectModalDialogState<T>>\r\n    extends AdvancedFilteredGrid<T, P, S> {\r\n\r\n    private static MAX_ROWS_TO_SHOW = 1_000;\r\n\r\n    protected initialState: AbstractSelectModalDialogState<T> = {\r\n        loading: false,\r\n        columnDefs: this.getInitialColumnDefs(),\r\n        datasource: {\r\n            getRows: async (params: IGetRowsParams) => {\r\n                if (this.firstLoadedPage) {\r\n                    let pageableList: PageableList<T>;\r\n                    if (this.manualReload && params.startRow === 0 && params.endRow === 100) {\r\n                        this.manualReload = false;\r\n                        pageableList = this.firstLoadedPage;\r\n                    } else {\r\n                        pageableList = await this.getRecords(params.startRow, params.endRow);\r\n                    }\r\n                    this.setState({totalNumberOfRows: pageableList.totalNumberOfRows});\r\n                    let totalNumberOfRows = pageableList.totalNumberOfRows;\r\n                    if (totalNumberOfRows > AbstractSelectModalDialog.MAX_ROWS_TO_SHOW) {\r\n                        totalNumberOfRows = AbstractSelectModalDialog.MAX_ROWS_TO_SHOW;\r\n                    }\r\n                    params.successCallback(pageableList.data, totalNumberOfRows);\r\n                } else {\r\n                    params.successCallback([], 0);\r\n                }\r\n            }\r\n        },\r\n        selectedData: [],\r\n\r\n        filterConditions: [],\r\n    }\r\n\r\n    protected constructor(props: Readonly<P>) {\r\n        super(props);\r\n\r\n        this.onSelectionChanged = this.onSelectionChanged.bind(this);\r\n    }\r\n\r\n    abstract getIdColumnName(): string;\r\n\r\n    abstract getTitle(): string;\r\n\r\n    protected getCodeColumnDefinition(): DataGridColDef {\r\n        return this.getCodeColumn({flex: 0.5});\r\n    }\r\n\r\n    protected getNameColumnDefinition(): DataGridColDef {\r\n        return this.getNameColumn({flex: 0.5});\r\n    }\r\n\r\n    protected getExtraColumnDefinition(): DataGridColDef | undefined {\r\n        return undefined;\r\n    }\r\n\r\n    getOnlyValidRecords(): boolean {\r\n        return true;\r\n    }\r\n\r\n    protected getInitialColumnDefs(): DataGridColDef[] {\r\n        if (!this.initialColumnDefs) {\r\n            this.initialColumnDefs = [\r\n                this.getIdColumn(this.getIdColumnName()),\r\n                this.getCodeColumnDefinition(),\r\n                this.getNameColumnDefinition(),\r\n            ]\r\n            const extraColumnDefinition = this.getExtraColumnDefinition();\r\n            if (extraColumnDefinition) {\r\n                this.initialColumnDefs.push(extraColumnDefinition);\r\n            }\r\n        }\r\n        return this.initialColumnDefs;\r\n    }\r\n\r\n    protected renderToolbarButtons(): React.ReactElement | undefined {\r\n        const advancedFilterListName = this.getAdvancedFilterListName();\r\n\r\n        if (advancedFilterListName) {\r\n            return (\r\n                <AdvancedFilterButton\r\n                    advancedFilterApi={this.props.advancedFilterApi}\r\n                    listName={advancedFilterListName}\r\n                    columnDefinitions={this.getAdvancedFilterColumnDefinitions()}\r\n                    filterConditions={this.state.filterConditions}\r\n                    onApplyFilter={this.onApplyFilter}\r\n                />\r\n            );\r\n        }\r\n\r\n        return undefined;\r\n    }\r\n\r\n    onSelectionChanged(event: SelectionChangedEvent): void {\r\n        const selectedRows = event.api.getSelectedRows();\r\n        this.setState({selectedData: selectedRows});\r\n    }\r\n\r\n    render() {\r\n        const {visible, initialWidth, initialHeight} = this.props;\r\n\r\n        return (\r\n            <ModalDialog\r\n                mode={ModalDialogMode.OK_CANCEL}\r\n                title={\r\n                    <>\r\n                        {this.getTitle()}\r\n                        {!!this.state.totalNumberOfRows && this.state.totalNumberOfRows > AbstractSelectModalDialog.MAX_ROWS_TO_SHOW &&\r\n                            <div style={{display: \"inline\"}}>\r\n                                <ColorTag\r\n                                    style={{whiteSpace: \"break-spaces\", marginLeft: 8}}\r\n                                    color=\"warning\"\r\n                                    icon={<WarningOutlined/>}\r\n                                >\r\n                                    <span>{i18n(\"Displaying first %{count} records\", {count: AbstractSelectModalDialog.MAX_ROWS_TO_SHOW+\"\"})}</span>\r\n                                </ColorTag>\r\n                            </div>\r\n                        }\r\n                    </>\r\n                }\r\n                onOk={() => {\r\n                    if (this.state.selectedData.length > 0) {\r\n                        this.props.onItemsSelected(this.state.selectedData);\r\n                    }\r\n                }}\r\n                onCancel={this.props.onCancel}\r\n                initialWidth={initialWidth ?? 800}\r\n                initialHeight={initialHeight ?? window.innerHeight * 0.9}\r\n                maskClosable={false}\r\n                open={visible}\r\n                okButtonProps={{disabled: this.state.selectedData.length === 0}}\r\n            >\r\n                <ExtendedDataGrid<T>\r\n                    ref={(dataGrid) => {\r\n                        this.dataGrid = dataGrid;\r\n                    }}\r\n                    defaultGridConfiguration={{pageSize: -1, columnSearchVisible: true}}\r\n                    onGridReady={(params: GridReadyEvent) => {\r\n                        this.gridApi = params.api;\r\n                    }}\r\n                    columnDefs={this.state.columnDefs}\r\n                    onLoadData={this.onLoadData}\r\n                    rowModelType=\"infinite\"\r\n                    datasource={this.state.datasource}\r\n                    rowSelection={this.props.multiSelect ? \"multiple\" : \"single\"}\r\n                    onSelectionChanged={this.onSelectionChanged}\r\n                    onRowDoubleClicked={event => {\r\n                        const item = event.data as T;\r\n                        this.props.onItemsSelected([item]);\r\n                    }}\r\n                    toolbar={{\r\n                        toolbarButtons: this.renderToolbarButtons(),\r\n                    }}\r\n                    search={{\r\n                        hidden: true,\r\n                    }}\r\n                    onSortChanged={_event => {\r\n                        this.dataGrid?.loadData();\r\n                    }}\r\n                    panelStyle={{padding: 0}}\r\n                    noRecordsOverlayRenderer={() => <div/>}\r\n                />\r\n            </ModalDialog>\r\n        )\r\n    }\r\n\r\n}"]}

package/coreui/components/select/selectUtils.d.ts

@@ -0,0 +1,4 @@
+import { SelectedEntity } from "./abstractSelect";
+export default class SelectUtils {
+    static toSelectedEntity(id: number | null, code: string | null, name: string | null, extra?: string): SelectedEntity | undefined;
+}

package/coreui/components/select/selectUtils.js

@@ -0,0 +1,14 @@
+export default class SelectUtils {
+    static toSelectedEntity(id, code, name, extra) {
+        if (id) {
+            return {
+                id: id,
+                code: code,
+                name: name,
+                extra: extra,
+            };
+        }
+        return undefined;
+    }
+}
+//# sourceMappingURL=selectUtils.js.map

package/coreui/components/select/selectUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectUtils.js","sourceRoot":"","sources":["../../../../../coreui/components/select/selectUtils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,WAAW;IAE5B,MAAM,CAAC,gBAAgB,CAAC,EAAiB,EAAE,IAAmB,EAAE,IAAmB,EAAE,KAAc;QAC/F,IAAI,EAAE,EAAE,CAAC;YACL,OAAO;gBACH,EAAE,EAAE,EAAE;gBACN,IAAI,EAAE,IAAI;gBACV,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,KAAK;aACf,CAAA;QACL,CAAC;QAED,OAAO,SAAS,CAAC;IACrB,CAAC;CAEJ","sourcesContent":["import {SelectedEntity} from \"./abstractSelect\";\r\n\r\nexport default class SelectUtils {\r\n\r\n    static toSelectedEntity(id: number | null, code: string | null, name: string | null, extra?: string): SelectedEntity | undefined {\r\n        if (id) {\r\n            return {\r\n                id: id,\r\n                code: code,\r\n                name: name,\r\n                extra: extra,\r\n            }\r\n        }\r\n\r\n        return undefined;\r\n    }\r\n\r\n}"]}

package/coreui/components/titleWithCodePanel/titleWithCodePanel.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface Props {
+    title: React.ReactNode;
+    code: string;
+}
+export default class TitleWithCodePanel extends React.Component<Props> {
+    constructor(props: Readonly<Props>);
+    render(): React.JSX.Element;
+}
+export {};

package/coreui/components/titleWithCodePanel/titleWithCodePanel.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Col, Row } from "antd";
+import Paragraph from "antd/es/typography/Paragraph";
+export default class TitleWithCodePanel extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { title, code } = this.props;
+        return (React.createElement(Row, { gutter: 8, wrap: false, style: { display: "inline-flex", width: "calc(100% - 28px)" } },
+            React.createElement(Col, { flex: "none" },
+                React.createElement("span", null, title)),
+            code &&
+                React.createElement(Col, { flex: "auto" },
+                    React.createElement(Paragraph, { style: { margin: 0 }, code: true, ellipsis: {
+                            rows: 1,
+                        }, title: code }, code))));
+    }
+}
+//# sourceMappingURL=titleWithCodePanel.js.map

package/coreui/components/titleWithCodePanel/titleWithCodePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"titleWithCodePanel.js","sourceRoot":"","sources":["../../../../../coreui/components/titleWithCodePanel/titleWithCodePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,GAAG,EAAE,GAAG,EAAC,MAAM,MAAM,CAAC;AAC9B,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAOrD,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAAgB;IAClE,YAAY,KAAsB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,MAAM,EAAC,KAAK,EAAE,IAAI,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAEjC,OAAO,CACH,oBAAC,GAAG,IAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAC;YACpF,oBAAC,GAAG,IAAC,IAAI,EAAC,MAAM;gBACZ,kCAAO,KAAK,CAAQ,CAClB;YACL,IAAI;gBACD,oBAAC,GAAG,IAAC,IAAI,EAAC,MAAM;oBACZ,oBAAC,SAAS,IACN,KAAK,EAAE,EAAC,MAAM,EAAE,CAAC,EAAC,EAClB,IAAI,QACJ,QAAQ,EAAE;4BACN,IAAI,EAAE,CAAC;yBACV,EACD,KAAK,EAAE,IAAI,IAEV,IAAI,CACG,CACV,CAER,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import React from \"react\";\r\nimport {Col, Row} from \"antd\";\r\nimport Paragraph from \"antd/es/typography/Paragraph\";\r\n\r\ninterface Props {\r\n    title: React.ReactNode\r\n    code: string\r\n}\r\n\r\nexport default class TitleWithCodePanel extends React.Component<Props> {\r\n    constructor(props: Readonly<Props>) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        const {title, code} = this.props;\r\n\r\n        return (\r\n            <Row gutter={8} wrap={false} style={{display: \"inline-flex\", width: \"calc(100% - 28px)\"}}>\r\n                <Col flex=\"none\">\r\n                    <span>{title}</span>\r\n                </Col>\r\n                {code &&\r\n                    <Col flex=\"auto\">\r\n                        <Paragraph\r\n                            style={{margin: 0}}\r\n                            code\r\n                            ellipsis={{\r\n                                rows: 1,\r\n                            }}\r\n                            title={code}\r\n                        >\r\n                            {code}\r\n                        </Paragraph>\r\n                    </Col>\r\n                }\r\n            </Row>\r\n        );\r\n    }\r\n}"]}

package/coreui/icons/icons.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const AutoReloadIcon: (props: any) => React.JSX.Element;
+export { AutoReloadIcon };

package/coreui/icons/icons.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Icon from "@ant-design/icons";
+const AutoReloadIcon = (props) => (React.createElement(Icon, { component: () => React.createElement("svg", { className: "icon", viewBox: "64 64 896 896", version: "1.1", width: "1em", height: "1em", ...props },
+        React.createElement("path", { d: "M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z", id: "path843", style: { fill: "currentcolor" } }),
+        React.createElement("text", { xmlSpace: "preserve", id: "text857", style: {
+                fill: "currentcolor",
+                fontStyle: "normal",
+                fontVariant: "normal",
+                fontWeight: "normal",
+                fontStretch: "normal",
+                fontSize: 332,
+                lineHeight: 1.25,
+                fontFamily: "sans-serif"
+            }, transform: "matrix(1.7314076,0,0,1.7314076,-288.12301,-449.11258)" },
+            React.createElement("tspan", { x: "355.05078", y: "663.89301" },
+                React.createElement("tspan", null, "A")))) }));
+export { AutoReloadIcon };
+//# sourceMappingURL=icons.js.map

package/coreui/icons/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../../coreui/icons/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,MAAM,cAAc,GAAG,CAAC,KAAU,EAAE,EAAE,CAAC,CACnC,oBAAC,IAAI,IAAC,SAAS,EAAE,GAAG,EAAE,CAClB,6BACI,SAAS,EAAC,MAAM,EAChB,OAAO,EAAC,eAAe,EACvB,OAAO,EAAC,KAAK,EACb,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,KACR,KAAK;QAET,8BACI,CAAC,EAAC,krBAAkrB,EACprB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,EAAC,IAAI,EAAE,cAAc,EAAC,GAC/B;QACF,8BACI,QAAQ,EAAC,UAAU,EACnB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE;gBACH,IAAI,EAAE,cAAc;gBACpB,SAAS,EAAE,QAAQ;gBACnB,WAAW,EAAE,QAAQ;gBACrB,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,QAAQ;gBACrB,QAAQ,EAAE,GAAG;gBACb,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,YAAY;aAC3B,EACD,SAAS,EAAC,uDAAuD;YACjE,+BAAO,CAAC,EAAC,WAAW,EAAC,CAAC,EAAC,WAAW;gBAC9B,uCAAgB,CACZ,CACL,CACL,GACP,CACN,CAAC;AAEF,OAAO,EACH,cAAc,EACjB,CAAA","sourcesContent":["import React from \"react\";\r\nimport Icon from \"@ant-design/icons\";\r\n\r\nconst AutoReloadIcon = (props: any) => (\r\n    <Icon component={() =>\r\n        <svg\r\n            className=\"icon\"\r\n            viewBox=\"64 64 896 896\"\r\n            version=\"1.1\"\r\n            width=\"1em\"\r\n            height=\"1em\"\r\n            {...props}\r\n        >\r\n            <path\r\n                d=\"M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z\"\r\n                id=\"path843\"\r\n                style={{fill: \"currentcolor\"}}\r\n            />\r\n            <text\r\n                xmlSpace=\"preserve\"\r\n                id=\"text857\"\r\n                style={{\r\n                    fill: \"currentcolor\",\r\n                    fontStyle: \"normal\",\r\n                    fontVariant: \"normal\",\r\n                    fontWeight: \"normal\",\r\n                    fontStretch: \"normal\",\r\n                    fontSize: 332,\r\n                    lineHeight: 1.25,\r\n                    fontFamily: \"sans-serif\"\r\n                }}\r\n                transform=\"matrix(1.7314076,0,0,1.7314076,-288.12301,-449.11258)\">\r\n                <tspan x=\"355.05078\" y=\"663.89301\">\r\n                    <tspan>A</tspan>\r\n                </tspan>\r\n            </text>\r\n        </svg>\r\n    }/>\r\n);\r\n\r\nexport {\r\n    AutoReloadIcon\r\n}"]}

package/coreui/layout/contextToolbar.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { D2WebApi, D2WebApiConnection } from "d2jsapi";
+interface Props {
+    d2: D2WebApi;
+    connection: D2WebApiConnection;
+}
+interface State {
+    changePasswordModalDialogOpen: boolean;
+}
+export default class ContextToolbar extends React.Component<Props, State> {
+    constructor(props: Props);
+    private renderChangePasswordModalDialog;
+    render(): React.JSX.Element;
+}
+export {};

package/coreui/layout/contextToolbar.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Spin from "antd/lib/spin/index";
+import Dropdown from "antd/lib/dropdown/index";
+import { UserOutlined } from "@ant-design/icons";
+import LogoutButton from "../auth/logoutButton";
+import i18n from "d2core/i18n/i18n";
+import ChangePasswordModalDialog from "../components/changePasswordModalDialog/changePasswordModalDialog";
+export default class ContextToolbar extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            changePasswordModalDialogOpen: false,
+        };
+    }
+    renderChangePasswordModalDialog() {
+        return (React.createElement(ChangePasswordModalDialog, { open: this.state.changePasswordModalDialogOpen, d2api: this.props.d2, onCancel: () => {
+                this.setState({ changePasswordModalDialogOpen: false });
+            } }));
+    }
+    render() {
+        const currentUser = this.props.connection.user.fullName;
+        return (React.createElement("div", { style: { whiteSpace: "nowrap" } },
+            this.renderChangePasswordModalDialog(),
+            currentUser ? (React.createElement(Dropdown, { menu: {
+                    items: [
+                        {
+                            key: "changePassword",
+                            label: i18n("Change Password"),
+                            onClick: () => {
+                                this.setState({ changePasswordModalDialogOpen: true });
+                            }
+                        }
+                    ]
+                }, trigger: ["click"], placement: "bottomRight" },
+                React.createElement("span", { style: { paddingRight: 12, cursor: "pointer" } },
+                    React.createElement(UserOutlined, { style: { paddingRight: 4 } }),
+                    React.createElement("span", null, currentUser)))) : (React.createElement(Spin, { size: "small", style: { marginLeft: 8, marginRight: 8 } })),
+            React.createElement(LogoutButton, null)));
+    }
+}
+//# sourceMappingURL=contextToolbar.js.map

package/coreui/layout/contextToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contextToolbar.js","sourceRoot":"","sources":["../../../../coreui/layout/contextToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,qBAAqB,CAAA;AACtC,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAE9C,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,yBAAyB,MAAM,mEAAmE,CAAC;AAW1G,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,KAAK,CAAC,SAAuB;IACrE,YAAY,KAAY;QACpB,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG;YACT,6BAA6B,EAAE,KAAK;SACvC,CAAA;IACL,CAAC;IAEO,+BAA+B;QACnC,OAAO,CACH,oBAAC,yBAAyB,IACtB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,6BAA6B,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACpB,QAAQ,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,QAAQ,CAAC,EAAC,6BAA6B,EAAE,KAAK,EAAC,CAAC,CAAA;YACzD,CAAC,GACH,CACL,CAAA;IACL,CAAC;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC;QAExD,OAAO,CACH,6BAAK,KAAK,EAAE,EAAC,UAAU,EAAE,QAAQ,EAAC;YAC7B,IAAI,CAAC,+BAA+B,EAAE;YACtC,WAAW,CAAC,CAAC,CAAC,CACX,oBAAC,QAAQ,IACL,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH;4BACI,GAAG,EAAE,gBAAgB;4BACrB,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;4BAC9B,OAAO,EAAE,GAAG,EAAE;gCACV,IAAI,CAAC,QAAQ,CAAC,EAAC,6BAA6B,EAAE,IAAI,EAAC,CAAC,CAAA;4BACxD,CAAC;yBACJ;qBACJ;iBACJ,EACD,OAAO,EAAE,CAAC,OAAO,CAAC,EAClB,SAAS,EAAC,aAAa;gBAEvB,8BAAM,KAAK,EAAE,EAAC,YAAY,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC;oBAC9C,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,CAAC,EAAC,GAAG;oBACzC,kCAAO,WAAW,CAAQ,CACvB,CACA,CACd,CAAC,CAAC,CAAC,CACA,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAC,UAAU,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAC,GAAG,CAC/D;YACD,oBAAC,YAAY,OAAE,CACb,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import React from \"react\";\r\nimport Spin from \"antd/lib/spin/index\"\r\nimport Dropdown from \"antd/lib/dropdown/index\"\r\nimport {D2WebApi, D2WebApiConnection} from \"d2jsapi\";\r\nimport {UserOutlined} from \"@ant-design/icons\";\r\nimport LogoutButton from \"../auth/logoutButton\";\r\nimport i18n from \"d2core/i18n/i18n\";\r\nimport ChangePasswordModalDialog from \"../components/changePasswordModalDialog/changePasswordModalDialog\";\r\n\r\ninterface Props {\r\n    d2: D2WebApi\r\n    connection: D2WebApiConnection\r\n}\r\n\r\ninterface State {\r\n    changePasswordModalDialogOpen: boolean\r\n}\r\n\r\nexport default class ContextToolbar extends React.Component<Props, State> {\r\n    constructor(props: Props) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            changePasswordModalDialogOpen: false,\r\n        }\r\n    }\r\n\r\n    private renderChangePasswordModalDialog() {\r\n        return (\r\n            <ChangePasswordModalDialog\r\n                open={this.state.changePasswordModalDialogOpen}\r\n                d2api={this.props.d2}\r\n                onCancel={() => {\r\n                    this.setState({changePasswordModalDialogOpen: false})\r\n                }}\r\n            />\r\n        )\r\n    }\r\n\r\n    render() {\r\n        const currentUser = this.props.connection.user.fullName;\r\n\r\n        return (\r\n            <div style={{whiteSpace: \"nowrap\"}}>\r\n                {this.renderChangePasswordModalDialog()}\r\n                {currentUser ? (\r\n                    <Dropdown\r\n                        menu={{\r\n                            items: [\r\n                                {\r\n                                    key: \"changePassword\",\r\n                                    label: i18n(\"Change Password\"),\r\n                                    onClick: () => {\r\n                                        this.setState({changePasswordModalDialogOpen: true})\r\n                                    }\r\n                                }\r\n                            ]\r\n                        }}\r\n                        trigger={[\"click\"]}\r\n                        placement=\"bottomRight\"\r\n                    >\r\n                        <span style={{paddingRight: 12, cursor: \"pointer\"}}>\r\n                            <UserOutlined style={{paddingRight: 4}}/>\r\n                            <span>{currentUser}</span>\r\n                        </span>\r\n                    </Dropdown>\r\n                ) : (\r\n                    <Spin size=\"small\" style={{marginLeft: 8, marginRight: 8}}/>\r\n                )}\r\n                <LogoutButton/>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/coreui/style/index.less

@@ -0,0 +1,165 @@
+@label-font-size: 11px;
+@label-color: rgba(0, 0, 0, 0.65);
+@label-font-weight: 600;
+@warning-color: #faad14;
+@error-color: #ff4d4f;
+
+.ant-input-status-warning,
+.ant-input-affix-wrapper-status-warning,
+.ant-select-status-warning .ant-select-selector,
+.ant-input-number-status-warning,
+.ant-form-item-has-warning .ant-input-number,
+.ant-form-item-has-warning .ant-input,
+.ant-form-item-has-warning .ant-radio-button-wrapper,
+.highlighted-ag-grid-wrapper .ag-root-wrapper {
+  border-color: @warning-color !important;
+}
+
+.highlighted-color-picker {
+  border: 1px solid @warning-color;
+  padding: 1px !important;
+}
+
+.highlighted-checkbox {
+  border: 1px solid @warning-color;
+  padding: 0 !important;
+}
+
+.record-config-form .ant-checkbox-wrapper:not(.highlighted-checkbox) {
+  padding: 1px !important;
+}
+
+.color-picker:not(.highlighted-color-picker) {
+  padding: 2px !important;
+}
+
+.highlighted-button {
+  border: 1px solid @warning-color !important;
+}
+
+.highlighted-tag {
+  border: 1px solid @warning-color !important;
+}
+
+.record-config-form .ant-form-item {
+  margin-bottom: 0 !important;
+}
+
+.record-config-form .ant-col-sm-24.ant-form-item-label {
+  height: 24px;
+  padding: 0;
+}
+
+.record-config-form .ant-form-item-explain-error {
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.record-config-form .ant-col-sm-24.ant-form-item-label label {
+  font-size: @label-font-size;
+  color: @label-color;
+  font-weight: @label-font-weight;
+}
+
+.compact-label {
+  font-size: @label-font-size;
+  color: @label-color;
+  font-weight: @label-font-weight;
+}
+
+.compact-dragger.ant-upload.ant-upload-drag .ant-upload {
+  padding: 0 !important;
+}
+
+.compact-steps .ant-steps-item-icon {
+  width: 18px !important;
+  height: 18px !important;
+  line-height: 18px !important;
+  font-size: 10px !important;
+}
+
+.compact-steps .ant-steps-item-title {
+  font-size: @label-font-size !important;
+  color: @label-color !important;
+  font-weight: @label-font-weight !important;
+  line-height: 18px !important;
+}
+
+.compact-steps .ant-steps-item-container {
+  padding-bottom: 4px !important;
+}
+
+.compact-steps .ant-steps-item::after {
+  width: 8px !important;
+  height: 8px !important;
+  margin-top: 4px !important;
+}
+
+.modal-no-header .ant-modal-header {
+  display: none;
+}
+
+.modal-no-header .ant-modal-close-x {
+  width: 44px;
+  height: 44px;
+  line-height: 44px !important;
+}
+
+.full-screen-modal {
+  width: 100% !important;
+  height: 100% !important;
+  top: 0 !important;
+}
+
+.full-screen-modal .ant-modal-content {
+  width: 100%;
+}
+
+.ant-divider.compact-divider {
+  margin: 10px 0 -4px !important;
+  font-size: 12px !important;
+}
+
+.current-tab-error .ant-tabs-ink-bar {
+  background: @error-color;
+}
+
+.hoverable-shortcut-container {
+  padding: 12px;
+  display: flex;
+  gap: 12px;
+}
+
+.hoverable-shortcut {
+  cursor: pointer;
+  color: @label-color;
+  width: 160px;
+  height: 160px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 18px;
+  font-weight: 500;
+  border-radius: 4px;
+  transition: 0.4s;
+  text-align: center;
+}
+
+.hoverable-shortcut span[role="img"] {
+  font-size: 32px;
+}
+
+.hoverable-shortcut:hover {
+  background-color: rgba(32, 33, 36, .1);
+}
+
+.compact-collapse .ant-collapse-header {
+  padding: 10px 16px !important;
+}
+
+.form-item-full-width-label label {
+  width: 100%;
+}