@open-pioneer/result-list 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @open-pioneer/result-list
+
+## 0.1.0
+
+### Minor Changes
+
+-   ca6c2fd: Added formatting support of result list table cells depending on the type of value including support of cell render functions.
+-   6f0fc0c: add changeevent for selection
+-   13ea342: Initial release
+-   9334e81: Update to OpenLayers 9
+
+### Patch Changes
+
+-   ca6c2fd: Don't remove uppercase characters in slugs
+-   1a8ad89: Update package.json metadata
+-   87f6bda: Export selection change event type.
+-   6162979: Update versions of core packages
+-   Updated dependencies [1a8ad89]
+-   Updated dependencies [a11bf72]
+-   Updated dependencies [fc6bf82]
+-   Updated dependencies [a0d8882]
+-   Updated dependencies [6162979]
+-   Updated dependencies [9334e81]
+-   Updated dependencies [ac7fdd1]
+-   Updated dependencies [13ea342]
+    -   @open-pioneer/react-utils@0.2.2
+    -   @open-pioneer/map@0.4.0

package/DataTable/ColumnResizer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare function ColumnResizer(props: {
+    onDoubleClick: React.MouseEventHandler<HTMLElement>;
+    onMouseDown: React.MouseEventHandler<HTMLElement>;
+    onTouchStart: React.TouchEventHandler<HTMLElement>;
+    isResizing: boolean;
+}): JSX.Element;

package/DataTable/ColumnResizer.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { chakra } from '@open-pioneer/chakra-integration';
+import classNames from 'classnames';
+
+function ColumnResizer(props) {
+  const { onDoubleClick, onMouseDown, onTouchStart, isResizing } = props;
+  return /* @__PURE__ */ jsx(
+    chakra.span,
+    {
+      className: classNames(
+        "result-list-resizer",
+        isResizing && "result-list-resizer--is-resizing"
+      ),
+      onDoubleClick,
+      onMouseDown,
+      onTouchStart,
+      onClick: (e) => e.stopPropagation()
+    }
+  );
+}
+
+export { ColumnResizer };
+//# sourceMappingURL=ColumnResizer.js.map

package/DataTable/ColumnResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.js","sources":["ColumnResizer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport classNames from \"classnames\";\n\nexport function ColumnResizer(props: {\n    onDoubleClick: React.MouseEventHandler<HTMLElement>;\n    onMouseDown: React.MouseEventHandler<HTMLElement>;\n    onTouchStart: React.TouchEventHandler<HTMLElement>;\n    isResizing: boolean;\n}): JSX.Element {\n    const { onDoubleClick, onMouseDown, onTouchStart, isResizing } = props;\n    return (\n        <chakra.span\n            className={classNames(\n                \"result-list-resizer\",\n                isResizing && \"result-list-resizer--is-resizing\"\n            )}\n            onDoubleClick={onDoubleClick}\n            onMouseDown={onMouseDown}\n            onTouchStart={onTouchStart}\n            onClick={(e) => e.stopPropagation()}\n        />\n    );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,cAAc,KAKd,EAAA;AACZ,EAAA,MAAM,EAAE,aAAA,EAAe,WAAa,EAAA,YAAA,EAAc,YAAe,GAAA,KAAA,CAAA;AACjE,EACI,uBAAA,GAAA;AAAA,IAAC,MAAO,CAAA,IAAA;AAAA,IAAP;AAAA,MACG,SAAW,EAAA,UAAA;AAAA,QACP,qBAAA;AAAA,QACA,UAAc,IAAA,kCAAA;AAAA,OAClB;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAS,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,eAAgB,EAAA;AAAA,KAAA;AAAA,GACtC,CAAA;AAER;;;;"}

package/DataTable/ColumnSortIndicator.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SortDirection } from "@tanstack/react-table";
+export declare function ColumnSortIndicator(props: {
+    isSorted: false | SortDirection;
+}): JSX.Element;

package/DataTable/ColumnSortIndicator.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { TriangleDownIcon, TriangleUpIcon } from '@chakra-ui/icons';
+import { chakra } from '@open-pioneer/chakra-integration';
+
+function ColumnSortIndicator(props) {
+  const { isSorted } = props;
+  return /* @__PURE__ */ jsx(chakra.span, { ml: "4", className: "result-list-sort-indicator", children: isSorted ? isSorted === "desc" ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : /* @__PURE__ */ jsx(TriangleUpIcon, {}) : null });
+}
+
+export { ColumnSortIndicator };
+//# sourceMappingURL=ColumnSortIndicator.js.map

package/DataTable/ColumnSortIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSortIndicator.js","sources":["ColumnSortIndicator.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { TriangleDownIcon, TriangleUpIcon } from \"@chakra-ui/icons\";\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { SortDirection } from \"@tanstack/react-table\";\n\nexport function ColumnSortIndicator(props: { isSorted: false | SortDirection }): JSX.Element {\n    const { isSorted } = props;\n    return (\n        <chakra.span ml=\"4\" className=\"result-list-sort-indicator\">\n            {isSorted ? isSorted === \"desc\" ? <TriangleDownIcon /> : <TriangleUpIcon /> : null}\n        </chakra.span>\n    );\n}\n"],"names":[],"mappings":";;;;AAMO,SAAS,oBAAoB,KAAyD,EAAA;AACzF,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AACrB,EAAA,2BACK,MAAO,CAAA,IAAA,EAAP,EAAY,EAAA,EAAG,KAAI,SAAU,EAAA,4BAAA,EACzB,QAAW,EAAA,QAAA,GAAA,QAAA,KAAa,yBAAU,GAAA,CAAA,gBAAA,EAAA,EAAiB,oBAAM,GAAA,CAAA,cAAA,EAAA,EAAe,IAAK,IAClF,EAAA,CAAA,CAAA;AAER;;;;"}

package/DataTable/DataTable.d.ts

@@ -0,0 +1,9 @@
+import { BaseFeature } from "@open-pioneer/map";
+import { ColumnDef } from "@tanstack/react-table";
+import { ResultListSelectionChangeEvent } from "../ResultList";
+export interface DataTableProps<Data extends BaseFeature> {
+    data: Data[];
+    columns: ColumnDef<Data>[];
+    onSelectionChange?(event: ResultListSelectionChangeEvent): void;
+}
+export declare function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>): import("react/jsx-runtime").JSX.Element;

package/DataTable/DataTable.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tbody, Tr, Td, chakra, Table, Thead, useToken, Th } from '@open-pioneer/chakra-integration';
+import { createLogger } from '@open-pioneer/core';
+import { flexRender } from '@tanstack/react-table';
+import classNames from 'classnames';
+import { useIntl } from '../_virtual/_virtual-pioneer-module_react-hooks.js';
+import React, { useState, useEffect, useMemo } from 'react';
+import { ColumnResizer } from './ColumnResizer.js';
+import { ColumnSortIndicator } from './ColumnSortIndicator.js';
+import { useSetupTable } from './useSetupTable.js';
+
+const LOG = createLogger("result-list:DataTable");
+function DataTable(props) {
+  const intl = useIntl();
+  const { table } = useSetupTable(props);
+  const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;
+  const columnSizeVars = useColumnSizeVars(table);
+  const [isClickBlocked, setIsClickBlocked] = useState(false);
+  useEffect(() => {
+    setIsClickBlocked(isResizing);
+  }, [isResizing]);
+  if (!table.getRowModel().rows.length) {
+    return /* @__PURE__ */ jsx(chakra.div, { className: "result-list-no-data-message", children: intl.formatMessage({ id: "noDataMessage" }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      className: classNames("result-list-table", {
+        "result-list-table--is-resizing": isResizing
+      }),
+      style: columnSizeVars,
+      width: "99.9%",
+      onClickCapture: (e) => {
+        if (isClickBlocked) {
+          LOG.debug("Blocking click event because resizing is active");
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderGroup, { headerGroup }, headerGroup.id)) }),
+        isResizing ? /* @__PURE__ */ jsx(MemoizedTableBody, { table }) : /* @__PURE__ */ jsx(TableBody, { table })
+      ]
+    }
+  );
+}
+function TableHeaderGroup(props) {
+  const { headerGroup } = props;
+  const borderColor = useToken("colors", "trails.100");
+  return /* @__PURE__ */ jsx(Tr, { className: "result-list-headers", children: headerGroup.headers.map((header, index) => {
+    return /* @__PURE__ */ jsx(
+      TableHeader,
+      {
+        header,
+        index,
+        borderColor
+      },
+      header.id
+    );
+  }) }, headerGroup.id);
+}
+function TableHeader(props) {
+  const { header, index, borderColor } = props;
+  const width = `calc(var(--header-${header.id}-size) * 1px)`;
+  return /* @__PURE__ */ jsxs(
+    Th,
+    {
+      className: "result-list-header",
+      tabIndex: 0,
+      "aria-sort": mapAriaSorting(header.column.getIsSorted()),
+      onClick: () => header.column.getCanSort() && header.column.toggleSorting(),
+      cursor: header.column.getCanSort() ? "pointer" : "unset",
+      style: { width: index === 0 ? "50px" : width },
+      onKeyDown: (evt) => {
+        if (evt.key === "Enter" && header.column.getCanSort()) {
+          header.column.toggleSorting(void 0);
+        }
+      },
+      border: "none",
+      boxShadow: `inset 0 -2px 0 0 ${borderColor}`,
+      _focusVisible: { textDecorationLine: "underline" },
+      _focus: { outline: "none" },
+      children: [
+        flexRender(header.column.columnDef.header, header.getContext()),
+        header.column.getCanSort() && /* @__PURE__ */ jsx(ColumnSortIndicator, { isSorted: header.column.getIsSorted() }),
+        /* @__PURE__ */ jsx(
+          ColumnResizer,
+          {
+            onDoubleClick: () => header.column.resetSize(),
+            onMouseDown: header.getResizeHandler(),
+            onTouchStart: header.getResizeHandler(),
+            isResizing: header.column.getIsResizing()
+          }
+        )
+      ]
+    }
+  );
+}
+function TableBody({ table }) {
+  return /* @__PURE__ */ jsx(Tbody, { className: "result-list-table-body", children: table.getRowModel().rows.map((row) => {
+    return /* @__PURE__ */ jsx(Tr, { className: "result-list-table-row", children: row.getVisibleCells().map((cell) => {
+      const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;
+      return /* @__PURE__ */ jsx(
+        Td,
+        {
+          style: { width },
+          className: "result-list-table-row",
+          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+        },
+        cell.id
+      );
+    }) }, row.id);
+  }) });
+}
+const MemoizedTableBody = React.memo(
+  TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data
+);
+function useColumnSizeVars(table) {
+  const columnSizingInfo = table.getState().columnSizingInfo;
+  const columnSizing = table.getState().columnSizing;
+  const tableHeaders = table.getFlatHeaders();
+  return useMemo(() => {
+    const colSizes = {};
+    for (let i = 0; i < tableHeaders.length; i++) {
+      const header = tableHeaders[i];
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  }, [tableHeaders, columnSizingInfo, columnSizing]);
+}
+function mapAriaSorting(sortState) {
+  switch (sortState) {
+    case "asc":
+      return "ascending";
+    case "desc":
+      return "descending";
+    default:
+      return "none";
+  }
+}
+
+export { DataTable };
+//# sourceMappingURL=DataTable.js.map

package/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["DataTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Table,\n    Tbody,\n    Td,\n    Th,\n    Thead,\n    Tr,\n    chakra,\n    useToken\n} from \"@open-pioneer/chakra-integration\";\nimport { createLogger } from \"@open-pioneer/core\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport {\n    ColumnDef,\n    Header,\n    HeaderGroup,\n    SortDirection,\n    Table as TanstackTable,\n    flexRender\n} from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { ColumnResizer } from \"./ColumnResizer\";\nimport { ColumnSortIndicator } from \"./ColumnSortIndicator\";\nimport { useSetupTable } from \"./useSetupTable\";\nimport { ResultListSelectionChangeEvent } from \"../ResultList\";\nconst LOG = createLogger(\"result-list:DataTable\");\n\nexport interface DataTableProps<Data extends BaseFeature> {\n    data: Data[];\n    columns: ColumnDef<Data>[];\n    onSelectionChange?(event: ResultListSelectionChangeEvent): void;\n}\n\nexport function DataTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const intl = useIntl();\n    const { table } = useSetupTable(props);\n    const isResizing = !!table.getState().columnSizingInfo.isResizingColumn;\n    const columnSizeVars = useColumnSizeVars(table);\n    const [isClickBlocked, setIsClickBlocked] = useState(false);\n\n    useEffect(() => {\n        setIsClickBlocked(isResizing);\n    }, [isResizing]);\n\n    if (!table.getRowModel().rows.length) {\n        return (\n            <chakra.div className={\"result-list-no-data-message\"}>\n                {intl.formatMessage({ id: \"noDataMessage\" })}\n            </chakra.div>\n        );\n    }\n\n    return (\n        <Table\n            className={classNames(\"result-list-table\", {\n                \"result-list-table--is-resizing\": isResizing\n            })}\n            style={columnSizeVars}\n            width=\"99.9%\"\n            // An attempt to block click events while dragging the resize handle.\n            // If the click event gets through, the user may accidentally trigger column sorting on mouse release\n            onClickCapture={(e) => {\n                if (isClickBlocked) {\n                    LOG.debug(\"Blocking click event because resizing is active\");\n                    e.stopPropagation();\n                    e.preventDefault();\n                }\n            }}\n        >\n            <Thead>\n                {table.getHeaderGroups().map((headerGroup) => (\n                    <TableHeaderGroup key={headerGroup.id} headerGroup={headerGroup} />\n                ))}\n            </Thead>\n            {isResizing ? <MemoizedTableBody table={table} /> : <TableBody table={table} />}\n        </Table>\n    );\n}\n\nfunction TableHeaderGroup<Data>(props: { headerGroup: HeaderGroup<Data> }) {\n    const { headerGroup } = props;\n    const borderColor = useToken(\"colors\", \"trails.100\");\n    return (\n        <Tr key={headerGroup.id} className=\"result-list-headers\">\n            {headerGroup.headers.map((header, index) => {\n                return (\n                    <TableHeader\n                        key={header.id}\n                        header={header}\n                        index={index}\n                        borderColor={borderColor}\n                    />\n                );\n            })}\n        </Tr>\n    );\n}\n\nfunction TableHeader<Data>(props: {\n    header: Header<Data, unknown>;\n    index: number;\n    borderColor: string;\n}) {\n    const { header, index, borderColor } = props;\n    const width = `calc(var(--header-${header.id}-size) * 1px)`;\n    return (\n        <Th\n            className=\"result-list-header\"\n            tabIndex={0}\n            aria-sort={mapAriaSorting(header.column.getIsSorted())}\n            onClick={() => header.column.getCanSort() && header.column.toggleSorting()}\n            cursor={header.column.getCanSort() ? \"pointer\" : \"unset\"}\n            style={{ width: index === 0 ? \"50px\" : width }}\n            onKeyDown={(evt) => {\n                if (evt.key === \"Enter\" && header.column.getCanSort()) {\n                    header.column.toggleSorting(undefined);\n                }\n            }}\n            /* use box shadow instead of border because it works better with position: sticky */\n            border=\"none\"\n            boxShadow={`inset 0 -2px 0 0 ${borderColor}`}\n            _focusVisible={{ textDecorationLine: \"underline\" }}\n            _focus={{ outline: \"none\" }}\n        >\n            {flexRender(header.column.columnDef.header, header.getContext())}\n            {header.column.getCanSort() && (\n                <ColumnSortIndicator isSorted={header.column.getIsSorted()} />\n            )}\n            <ColumnResizer\n                onDoubleClick={() => header.column.resetSize()}\n                onMouseDown={header.getResizeHandler()}\n                onTouchStart={header.getResizeHandler()}\n                isResizing={header.column.getIsResizing()}\n            />\n        </Th>\n    );\n}\n\n//un-memoized normal table body component - see memoized version below\nfunction TableBody<Data extends object>({ table }: { table: TanstackTable<Data> }) {\n    return (\n        <Tbody className=\"result-list-table-body\">\n            {table.getRowModel().rows.map((row) => {\n                return (\n                    <Tr key={row.id} className=\"result-list-table-row\">\n                        {row.getVisibleCells().map((cell) => {\n                            const width = `calc(var(--header-${cell.column.id}-size) * 1px)`;\n                            return (\n                                <Td\n                                    key={cell.id}\n                                    style={{ width: width }}\n                                    className=\"result-list-table-row\"\n                                >\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Td>\n                            );\n                        })}\n                    </Tr>\n                );\n            })}\n        </Tbody>\n    );\n}\n\n// Special memoized wrapper for our table body that we will use during column resizing.\n// See https://tanstack.com/table/v8/docs/framework/react/examples/column-resizing-performant\nconst MemoizedTableBody = React.memo(\n    TableBody,\n    (prev, next) => prev.table.options.data === next.table.options.data\n) as typeof TableBody;\n\n/**\n * Instead of calling `column.getSize()` on every render for every header\n * and especially every data cell (very expensive),\n * we will calculate all column sizes at once at the root table level in a useMemo\n * and pass the column sizes down as CSS variables to the <table> element.\n */\nfunction useColumnSizeVars<Data>(table: TanstackTable<Data>) {\n    const columnSizingInfo = table.getState().columnSizingInfo;\n    const columnSizing = table.getState().columnSizing;\n    const tableHeaders = table.getFlatHeaders();\n\n    // Needs to be useMemo, not useEffect, to avoid multiple render calls?\n    // Need to add columnSizingInfo to the dependency array to make resizing work\n    return useMemo(() => {\n        // Not used directly, but the memo must re-execute whenever this changes.\n        // Not: columnSizing seems to be needed as well, because otherwise resetting the column size (header.column.resetSize())\n        // won't to anything.\n        void columnSizingInfo, columnSizing;\n        const colSizes: { [key: string]: number } = {};\n        for (let i = 0; i < tableHeaders.length; i++) {\n            const header = tableHeaders[i]!;\n            colSizes[`--header-${header.id}-size`] = header.getSize();\n            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n        }\n        return colSizes;\n    }, [tableHeaders, columnSizingInfo, columnSizing]);\n}\n\ntype SortState = SortDirection | false;\nfunction mapAriaSorting(sortState: SortState) {\n    switch (sortState) {\n        case \"asc\":\n            return \"ascending\";\n        case \"desc\":\n            return \"descending\";\n        default:\n            return \"none\";\n    }\n}\n"],"names":[],"mappings":"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"}

package/DataTable/SelectCheckbox.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+export interface SelectCheckboxProps {
+    className?: string;
+    ariaLabel?: string;
+    toolTipLabel?: string;
+    isIndeterminate?: boolean;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function SelectCheckbox({ isIndeterminate, className, toolTipLabel, ariaLabel, isChecked, onChange, isDisabled }: SelectCheckboxProps): import("react/jsx-runtime").JSX.Element;

package/DataTable/SelectCheckbox.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip, chakra, Checkbox } from '@open-pioneer/chakra-integration';
+
+function SelectCheckbox({
+  isIndeterminate,
+  className,
+  toolTipLabel,
+  ariaLabel,
+  isChecked,
+  onChange,
+  isDisabled
+}) {
+  const checkboxComponent = /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      "aria-label": ariaLabel,
+      className,
+      isChecked,
+      onChange,
+      isIndeterminate,
+      isDisabled
+    }
+  );
+  return toolTipLabel ? /* @__PURE__ */ jsx(Tooltip, { label: toolTipLabel, placement: "right", closeOnClick: false, children: /* @__PURE__ */ jsx(
+    chakra.span,
+    {
+      children: checkboxComponent
+    }
+  ) }) : checkboxComponent;
+}
+
+export { SelectCheckbox };
+//# sourceMappingURL=SelectCheckbox.js.map

package/DataTable/SelectCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCheckbox.js","sources":["SelectCheckbox.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Checkbox, Tooltip, chakra } from \"@open-pioneer/chakra-integration\";\nimport { ChangeEvent } from \"react\";\n\nexport interface SelectCheckboxProps {\n    className?: string;\n    ariaLabel?: string;\n    toolTipLabel?: string;\n    isIndeterminate?: boolean;\n    isChecked?: boolean;\n    isDisabled?: boolean;\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function SelectCheckbox({\n    isIndeterminate,\n    className,\n    toolTipLabel,\n    ariaLabel,\n    isChecked,\n    onChange,\n    isDisabled\n}: SelectCheckboxProps) {\n    const checkboxComponent = (\n        <Checkbox\n            aria-label={ariaLabel}\n            className={className}\n            isChecked={isChecked}\n            onChange={onChange}\n            isIndeterminate={isIndeterminate}\n            isDisabled={isDisabled}\n        />\n    );\n    return toolTipLabel ? (\n        <Tooltip label={toolTipLabel} placement=\"right\" closeOnClick={false}>\n            <chakra.span\n            /* \n               wrap into span to fix tooltip around checkbox, see https://github.com/chakra-ui/chakra-ui/issues/6353\n               not using \"shouldWrapChildren\" because that also introduces a _focusable_ span (we only want the checkbox)\n            */\n            >\n                {checkboxComponent}\n            </chakra.span>\n        </Tooltip>\n    ) : (\n        checkboxComponent\n    );\n}\n"],"names":[],"mappings":";;;AAeO,SAAS,cAAe,CAAA;AAAA,EAC3B,eAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AACJ,CAAwB,EAAA;AACpB,EAAA,MAAM,iBACF,mBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACG,YAAY,EAAA,SAAA;AAAA,MACZ,SAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAEJ,EAAO,OAAA,YAAA,uBACF,OAAQ,EAAA,EAAA,KAAA,EAAO,cAAc,SAAU,EAAA,OAAA,EAAQ,cAAc,KAC1D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAO,CAAA,IAAA;AAAA,IAAP;AAAA,MAMI,QAAA,EAAA,iBAAA;AAAA,KAAA;AAAA,KAET,CAEA,GAAA,iBAAA,CAAA;AAER;;;;"}

package/DataTable/createColumns.d.ts

@@ -0,0 +1,11 @@
+import { BaseFeature } from "@open-pioneer/map";
+import { PackageIntl } from "@open-pioneer/runtime";
+import { FormatOptions, ResultColumn } from "../ResultList";
+export declare const SELECT_COLUMN_SIZE = 70;
+export interface CreateColumnsOptions {
+    columns: ResultColumn[];
+    intl: PackageIntl;
+    tableWidth?: number;
+    formatOptions?: FormatOptions;
+}
+export declare function createColumns(options: CreateColumnsOptions): import("@tanstack/react-table").ColumnDef<BaseFeature, unknown>[];

package/DataTable/createColumns.js

@@ -0,0 +1,161 @@
+import { jsx } from 'react/jsx-runtime';
+import { chakra } from '@open-pioneer/chakra-integration';
+import { createColumnHelper } from '@tanstack/react-table';
+import { SelectCheckbox } from './SelectCheckbox.js';
+
+const SELECT_COLUMN_SIZE = 70;
+const columnHelper = createColumnHelper();
+function createColumns(options) {
+  const { columns, intl, tableWidth, formatOptions } = options;
+  const remainingColumnWidth = tableWidth === void 0 ? void 0 : calcRemainingColumnWidth(columns, tableWidth);
+  const selectionColumn = createSelectionColumn(intl);
+  const columnDefs = columns.map((column, index) => {
+    const columnWidth = column.width || remainingColumnWidth;
+    const configuredId = column.id || column.propertyName && slug(column.propertyName) || String(index);
+    return createColumn({
+      id: "result-list-col_" + configuredId,
+      column,
+      intl,
+      columnWidth,
+      formatOptions
+    });
+  });
+  return [selectionColumn, ...columnDefs];
+}
+function createColumn(options) {
+  const { id, column, columnWidth, formatOptions, intl } = options;
+  const { propertyName, getPropertyValue } = column;
+  const hasPropertyValue = getPropertyValue != null || propertyName != null;
+  if (!hasPropertyValue) {
+    throw new Error(
+      "Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'."
+    );
+  }
+  return columnHelper.accessor(
+    (feature) => {
+      return getPropertyValue?.(feature) ?? feature.properties?.[propertyName];
+    },
+    {
+      id,
+      cell: (info) => {
+        const cellValue = info.getValue();
+        if (column.renderCell) {
+          return column.renderCell({
+            feature: info.row.original,
+            value: cellValue
+          });
+        }
+        return renderFunc(cellValue, intl, formatOptions);
+      },
+      header: column.displayName ?? column.propertyName,
+      size: columnWidth
+    }
+  );
+}
+function renderFunc(cellValue, intl, formatOptions) {
+  if (cellValue === null || cellValue === void 0)
+    return "";
+  const type = typeof cellValue;
+  const formatNumber = (num) => {
+    if (Number.isNaN(num))
+      return "";
+    return intl.formatNumber(num, formatOptions?.numberOptions);
+  };
+  switch (type) {
+    case "number": {
+      return formatNumber(cellValue);
+    }
+    case "bigint": {
+      return formatNumber(cellValue);
+    }
+    case "boolean": {
+      return intl.formatMessage({ id: `displayBoolean.${cellValue}` });
+    }
+    case "string": {
+      return cellValue;
+    }
+    case "object": {
+      if (cellValue instanceof Date)
+        return intl.formatDate(cellValue, formatOptions?.dateOptions);
+      return cellValue.toString();
+    }
+    default:
+      return String(cellValue);
+  }
+}
+function createSelectionColumn(intl) {
+  return columnHelper.display({
+    id: "selection-buttons",
+    size: SELECT_COLUMN_SIZE,
+    enableSorting: false,
+    header: ({ table }) => {
+      return /* @__PURE__ */ jsx(
+        chakra.div,
+        {
+          display: "inline-block",
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          className: "result-list-select-all-checkbox-container",
+          children: /* @__PURE__ */ jsx(
+            SelectCheckbox,
+            {
+              className: "result-list-select-all-checkbox",
+              isChecked: table.getIsAllRowsSelected(),
+              isIndeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler(),
+              toolTipLabel: getCheckboxToolTip(table, intl)
+            }
+          )
+        }
+      );
+    },
+    cell: ({ row }) => {
+      return /* @__PURE__ */ jsx(
+        chakra.div,
+        {
+          display: "inline-block",
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          className: "result-list-select-row-checkbox-container",
+          children: /* @__PURE__ */ jsx(
+            SelectCheckbox,
+            {
+              className: "result-list-select-row-checkbox",
+              isChecked: row.getIsSelected(),
+              isDisabled: !row.getCanSelect(),
+              isIndeterminate: row.getIsSomeSelected(),
+              onChange: row.getToggleSelectedHandler(),
+              ariaLabel: intl.formatMessage({
+                id: "ariaLabel.selectSingle"
+              })
+            }
+          )
+        }
+      );
+    }
+  });
+}
+function calcRemainingColumnWidth(columns, tableWidth, selectColumnWidth = SELECT_COLUMN_SIZE) {
+  const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);
+  const undefinedWidthCount = columns.reduce(
+    (sum, column) => column.width === void 0 ? sum + 1 : sum,
+    0
+  );
+  const remainingWidth = tableWidth - selectColumnWidth - fullWidth;
+  return remainingWidth / undefinedWidthCount;
+}
+function getCheckboxToolTip(table, intl) {
+  if (table.getIsAllRowsSelected()) {
+    return intl.formatMessage({ id: "deSelectAllTooltip" });
+  } else {
+    return intl.formatMessage({ id: "selectAllTooltip" });
+  }
+}
+function slug(id) {
+  return id.toLowerCase().replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+
+export { SELECT_COLUMN_SIZE, createColumns };
+//# sourceMappingURL=createColumns.js.map

package/DataTable/createColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createColumns.js","sources":["createColumns.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { chakra } from \"@open-pioneer/chakra-integration\";\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport { createColumnHelper } from \"@tanstack/react-table\";\nimport { Table as TanstackTable } from \"@tanstack/table-core/build/lib/types\";\nimport { FormatOptions, ResultColumn } from \"../ResultList\";\nimport { SelectCheckbox } from \"./SelectCheckbox\";\n\nexport const SELECT_COLUMN_SIZE = 70;\n\nconst columnHelper = createColumnHelper<BaseFeature>();\n\nexport interface CreateColumnsOptions {\n    columns: ResultColumn[];\n    intl: PackageIntl;\n    tableWidth?: number;\n    formatOptions?: FormatOptions;\n}\n\nexport function createColumns(options: CreateColumnsOptions) {\n    const { columns, intl, tableWidth, formatOptions } = options;\n    const remainingColumnWidth: number | undefined =\n        tableWidth === undefined ? undefined : calcRemainingColumnWidth(columns, tableWidth);\n    const selectionColumn = createSelectionColumn(intl);\n    const columnDefs = columns.map((column, index) => {\n        const columnWidth = column.width || remainingColumnWidth;\n        const configuredId =\n            column.id || (column.propertyName && slug(column.propertyName)) || String(index);\n        return createColumn({\n            id: \"result-list-col_\" + configuredId,\n            column: column,\n            intl: intl,\n            columnWidth: columnWidth,\n            formatOptions: formatOptions\n        });\n    });\n    return [selectionColumn, ...columnDefs];\n}\n\ninterface CreateColumnOptions {\n    id: string;\n    column: ResultColumn;\n    intl: PackageIntl;\n    columnWidth?: number;\n    formatOptions?: FormatOptions;\n}\n\nfunction createColumn(options: CreateColumnOptions) {\n    const { id, column, columnWidth, formatOptions, intl } = options;\n    const { propertyName, getPropertyValue } = column;\n    const hasPropertyValue = getPropertyValue != null || propertyName != null;\n\n    // TODO: Another issue\n    if (!hasPropertyValue) {\n        throw new Error(\n            \"Display columns are not yet implemented. You must either specify 'propertyName' or 'getPropertyValue'.\"\n        );\n    }\n\n    return columnHelper.accessor(\n        (feature: BaseFeature) => {\n            return getPropertyValue?.(feature) ?? feature.properties?.[propertyName!];\n        },\n        {\n            id: id,\n            cell: (info) => {\n                const cellValue = info.getValue();\n                if (column.renderCell) {\n                    return column.renderCell({\n                        feature: info.row.original,\n                        value: cellValue\n                    });\n                }\n                return renderFunc(cellValue, intl, formatOptions);\n            },\n            header: column.displayName ?? column.propertyName,\n            size: columnWidth\n        }\n    );\n}\n\nfunction renderFunc(cellValue: unknown, intl: PackageIntl, formatOptions?: FormatOptions) {\n    if (cellValue === null || cellValue === undefined) return \"\";\n    const type = typeof cellValue;\n    const formatNumber = (num: number | bigint) => {\n        if (Number.isNaN(num)) return \"\";\n        return intl.formatNumber(num, formatOptions?.numberOptions);\n    };\n\n    switch (type) {\n        case \"number\": {\n            return formatNumber(cellValue as number);\n        }\n        case \"bigint\": {\n            return formatNumber(cellValue as bigint);\n        }\n        case \"boolean\": {\n            return intl.formatMessage({ id: `displayBoolean.${cellValue}` });\n        }\n        case \"string\": {\n            return cellValue as string;\n        }\n        case \"object\": {\n            if (cellValue instanceof Date)\n                return intl.formatDate(cellValue, formatOptions?.dateOptions);\n            return cellValue.toString();\n        }\n        default:\n            return String(cellValue);\n    }\n}\n\nfunction createSelectionColumn(intl: PackageIntl) {\n    return columnHelper.display({\n        id: \"selection-buttons\",\n        size: SELECT_COLUMN_SIZE,\n        enableSorting: false,\n        header: ({ table }) => {\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-all-checkbox-container\"\n                >\n                    <SelectCheckbox\n                        className=\"result-list-select-all-checkbox\"\n                        isChecked={table.getIsAllRowsSelected()}\n                        isIndeterminate={table.getIsSomeRowsSelected()}\n                        onChange={table.getToggleAllRowsSelectedHandler()}\n                        toolTipLabel={getCheckboxToolTip(table, intl)}\n                    />\n                </chakra.div>\n            );\n        },\n        cell: ({ row }) => {\n            return (\n                <chakra.div\n                    display=\"inline-block\"\n                    onClick={(e) => {\n                        e.stopPropagation();\n                    }}\n                    className=\"result-list-select-row-checkbox-container\"\n                >\n                    <SelectCheckbox\n                        className=\"result-list-select-row-checkbox\"\n                        isChecked={row.getIsSelected()}\n                        isDisabled={!row.getCanSelect()}\n                        isIndeterminate={row.getIsSomeSelected()}\n                        onChange={row.getToggleSelectedHandler()}\n                        ariaLabel={intl.formatMessage({\n                            id: \"ariaLabel.selectSingle\"\n                        })}\n                    />\n                </chakra.div>\n            );\n        }\n    });\n}\n\nfunction calcRemainingColumnWidth(\n    columns: ResultColumn[],\n    tableWidth: number,\n    selectColumnWidth: number = SELECT_COLUMN_SIZE\n) {\n    const fullWidth = columns.reduce((sum, column) => (column.width ?? 0) + sum, 0);\n    const undefinedWidthCount = columns.reduce(\n        (sum, column) => (column.width === undefined ? sum + 1 : sum),\n        0\n    );\n    const remainingWidth = tableWidth - selectColumnWidth - fullWidth;\n    return remainingWidth / undefinedWidthCount;\n}\n\nfunction getCheckboxToolTip<Data>(table: TanstackTable<Data>, intl: PackageIntl) {\n    if (table.getIsAllRowsSelected()) {\n        return intl.formatMessage({ id: \"deSelectAllTooltip\" });\n    } else {\n        return intl.formatMessage({ id: \"selectAllTooltip\" });\n    }\n}\n\nfunction slug(id: string) {\n    return id\n        .toLowerCase()\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"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"}

package/DataTable/useSetupTable.d.ts

@@ -0,0 +1,8 @@
+import { BaseFeature } from "@open-pioneer/map";
+import { RowSelectionState, SortingState } from "@tanstack/react-table";
+import { DataTableProps } from "./DataTable";
+export declare function useSetupTable<Data extends BaseFeature>(props: DataTableProps<Data>): {
+    table: import("@tanstack/react-table").Table<Data>;
+    sorting: SortingState;
+    rowSelection: RowSelectionState;
+};

package/DataTable/useSetupTable.js

@@ -0,0 +1,66 @@
+import { useEvent } from '@open-pioneer/react-utils';
+import { useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { useState, useMemo } from 'react';
+
+function useSetupTable(props) {
+  const { data, columns, onSelectionChange } = props;
+  const [sorting, setSorting] = useState([]);
+  const [rowSelection, setRowSelection] = useState({});
+  const actualSort = useMemo(() => {
+    return sorting.filter((sort) => columns.some((c) => c.id === sort.id));
+  }, [sorting, columns]);
+  const updateSelection = useEvent((updaterOrValue) => {
+    const newSelection = applyUpdate(rowSelection, updaterOrValue);
+    if (newSelection === rowSelection) {
+      return;
+    }
+    setRowSelection(newSelection);
+    if (onSelectionChange) {
+      const rowsById = table.getCoreRowModel().rowsById;
+      const selectedFeatures = [];
+      for (const rowId of Object.keys(newSelection)) {
+        if (!newSelection[rowId]) {
+          continue;
+        }
+        const row = rowsById[rowId];
+        if (!row) {
+          continue;
+        }
+        selectedFeatures.push(row.original);
+      }
+      onSelectionChange({
+        features: selectedFeatures,
+        getFeatureIds: () => {
+          return selectedFeatures.map((feature) => feature.id);
+        }
+      });
+    }
+  });
+  const table = useReactTable({
+    columns,
+    data,
+    getRowId(feature) {
+      return String(feature.id);
+    },
+    columnResizeMode: "onChange",
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true,
+    onRowSelectionChange: updateSelection,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting: actualSort,
+      rowSelection
+    }
+  });
+  return { table, sorting, rowSelection };
+}
+function applyUpdate(current, updaterOrValue) {
+  if (typeof updaterOrValue === "function") {
+    return updaterOrValue(current);
+  }
+  return updaterOrValue;
+}
+
+export { useSetupTable };
+//# sourceMappingURL=useSetupTable.js.map

package/DataTable/useSetupTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSetupTable.js","sources":["useSetupTable.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseFeature } from \"@open-pioneer/map\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport {\n    RowSelectionState,\n    SortingState,\n    Updater,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { DataTableProps } from \"./DataTable\";\n\nexport function useSetupTable<Data extends BaseFeature>(props: DataTableProps<Data>) {\n    const { data, columns, onSelectionChange: onSelectionChange } = props;\n    const [sorting, setSorting] = useState<SortingState>([]);\n    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});\n\n    // Only sort by columns which actually exist\n    const actualSort = useMemo(() => {\n        return sorting.filter((sort) => columns.some((c) => c.id === sort.id));\n    }, [sorting, columns]);\n\n    const updateSelection = useEvent((updaterOrValue: Updater<RowSelectionState>) => {\n        const newSelection = applyUpdate(rowSelection, updaterOrValue);\n        if (newSelection === rowSelection) {\n            return;\n        }\n\n        setRowSelection(newSelection);\n        if (onSelectionChange) {\n            const rowsById = table.getCoreRowModel().rowsById;\n            const selectedFeatures: BaseFeature[] = [];\n            for (const rowId of Object.keys(newSelection)) {\n                if (!newSelection[rowId]) {\n                    continue;\n                }\n\n                const row = rowsById[rowId];\n                if (!row) {\n                    continue;\n                }\n\n                selectedFeatures.push(row.original);\n            }\n\n            onSelectionChange({\n                features: selectedFeatures,\n                getFeatureIds: () => {\n                    return selectedFeatures.map((feature: BaseFeature) => feature.id);\n                }\n            });\n        }\n    });\n\n    const table = useReactTable({\n        columns: columns,\n        data,\n        getRowId(feature) {\n            return String(feature.id);\n        },\n        columnResizeMode: \"onChange\",\n        getCoreRowModel: getCoreRowModel(),\n        enableRowSelection: true,\n        onRowSelectionChange: updateSelection,\n        onSortingChange: setSorting,\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            sorting: actualSort,\n            rowSelection\n        }\n    });\n\n    return { table, sorting, rowSelection };\n}\n\nfunction applyUpdate<T>(current: T, updaterOrValue: Updater<T>): T {\n    if (typeof updaterOrValue === \"function\") {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return (updaterOrValue as any)(current);\n    }\n    return updaterOrValue;\n}\n"],"names":[],"mappings":";;;;AAeO,SAAS,cAAwC,KAA6B,EAAA;AACjF,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,iBAAA,EAAyC,GAAA,KAAA,CAAA;AAChE,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,QAAA,CAAuB,EAAE,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAA4B,EAAE,CAAA,CAAA;AAGtE,EAAM,MAAA,UAAA,GAAa,QAAQ,MAAM;AAC7B,IAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,EAAA,KAAO,IAAK,CAAA,EAAE,CAAC,CAAA,CAAA;AAAA,GACtE,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,eAAA,GAAkB,QAAS,CAAA,CAAC,cAA+C,KAAA;AAC7E,IAAM,MAAA,YAAA,GAAe,WAAY,CAAA,YAAA,EAAc,cAAc,CAAA,CAAA;AAC7D,IAAA,IAAI,iBAAiB,YAAc,EAAA;AAC/B,MAAA,OAAA;AAAA,KACJ;AAEA,IAAA,eAAA,CAAgB,YAAY,CAAA,CAAA;AAC5B,IAAA,IAAI,iBAAmB,EAAA;AACnB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,eAAA,EAAkB,CAAA,QAAA,CAAA;AACzC,MAAA,MAAM,mBAAkC,EAAC,CAAA;AACzC,MAAA,KAAA,MAAW,KAAS,IAAA,MAAA,CAAO,IAAK,CAAA,YAAY,CAAG,EAAA;AAC3C,QAAI,IAAA,CAAC,YAAa,CAAA,KAAK,CAAG,EAAA;AACtB,UAAA,SAAA;AAAA,SACJ;AAEA,QAAM,MAAA,GAAA,GAAM,SAAS,KAAK,CAAA,CAAA;AAC1B,QAAA,IAAI,CAAC,GAAK,EAAA;AACN,UAAA,SAAA;AAAA,SACJ;AAEA,QAAiB,gBAAA,CAAA,IAAA,CAAK,IAAI,QAAQ,CAAA,CAAA;AAAA,OACtC;AAEA,MAAkB,iBAAA,CAAA;AAAA,QACd,QAAU,EAAA,gBAAA;AAAA,QACV,eAAe,MAAM;AACjB,UAAA,OAAO,gBAAiB,CAAA,GAAA,CAAI,CAAC,OAAA,KAAyB,QAAQ,EAAE,CAAA,CAAA;AAAA,SACpE;AAAA,OACH,CAAA,CAAA;AAAA,KACL;AAAA,GACH,CAAA,CAAA;AAED,EAAA,MAAM,QAAQ,aAAc,CAAA;AAAA,IACxB,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAS,OAAS,EAAA;AACd,MAAO,OAAA,MAAA,CAAO,QAAQ,EAAE,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,gBAAkB,EAAA,UAAA;AAAA,IAClB,iBAAiB,eAAgB,EAAA;AAAA,IACjC,kBAAoB,EAAA,IAAA;AAAA,IACpB,oBAAsB,EAAA,eAAA;AAAA,IACtB,eAAiB,EAAA,UAAA;AAAA,IACjB,mBAAmB,iBAAkB,EAAA;AAAA,IACrC,KAAO,EAAA;AAAA,MACH,OAAS,EAAA,UAAA;AAAA,MACT,YAAA;AAAA,KACJ;AAAA,GACH,CAAA,CAAA;AAED,EAAO,OAAA,EAAE,KAAO,EAAA,OAAA,EAAS,YAAa,EAAA,CAAA;AAC1C,CAAA;AAEA,SAAS,WAAA,CAAe,SAAY,cAA+B,EAAA;AAC/D,EAAI,IAAA,OAAO,mBAAmB,UAAY,EAAA;AAEtC,IAAA,OAAQ,eAAuB,OAAO,CAAA,CAAA;AAAA,GAC1C;AACA,EAAO,OAAA,cAAA,CAAA;AACX;;;;"}