@open-pioneer/toc 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @open-pioneer/toc
+
+## 0.1.0
+
+### Minor Changes
+
+-   cafb66b: Initial release.
+
+### Patch Changes
+
+-   Updated dependencies [bb2f27a]
+-   Updated dependencies [1e7545c]
+-   Updated dependencies [182da1c]
+    -   @open-pioneer/map@0.1.0
+    -   @open-pioneer/basemap-switcher@0.1.0
+    -   @open-pioneer/react-utils@0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/LayerList.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MapModel } from "@open-pioneer/map";
+/**
+ * Lists the (top level) operational layers in the map.
+ *
+ * Layer Groups are skipped in the current implementation.
+ */
+export declare function LayerList(props: {
+    map: MapModel;
+    "aria-labelledby"?: string;
+}): JSX.Element;

package/LayerList.js

@@ -0,0 +1,204 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Text, List, Box, Flex, Checkbox, Popover, PopoverTrigger, Button, Portal, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody } from '@open-pioneer/chakra-integration';
+import classNames from 'classnames';
+import LayerGroup from 'ol/layer/Group';
+import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { useCallback, useSyncExternalStore, useRef } from 'react';
+import { FiMoreVertical } from 'react-icons/fi';
+
+function LayerList(props) {
+  const { map, "aria-labelledby": ariaLabelledBy } = props;
+  const intl = useIntl();
+  const layers = useLayers(map);
+  if (!layers.length) {
+    return /* @__PURE__ */ jsx(Text, { className: "toc-missing-layers", "aria-labelledby": ariaLabelledBy, children: intl.formatMessage({ id: "missingLayers" }) });
+  }
+  return createList(layers, intl, {
+    "aria-labelledby": ariaLabelledBy
+  });
+}
+function createList(layers, intl, listProps) {
+  const items = layers.map((layer) => /* @__PURE__ */ jsx(LayerItem, { layer, intl }, layer.id));
+  return /* @__PURE__ */ jsx(
+    List,
+    {
+      as: "ul",
+      className: "toc-layer-list",
+      listStyleType: "none",
+      ...listProps,
+      children: items
+    }
+  );
+}
+function LayerItem(props) {
+  const { layer, intl } = props;
+  const title = useTitle(layer);
+  const { isVisible, setVisible } = useVisibility(layer);
+  const sublayers = useSublayers(layer);
+  let nestedChildren;
+  if (sublayers?.length) {
+    nestedChildren = createList(sublayers, intl, { ml: 4 });
+  }
+  return /* @__PURE__ */ jsxs(Box, { as: "li", className: classNames("toc-layer-item", `layer-${slug(layer.id)}`), children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        className: "toc-layer-item-content",
+        width: "100%",
+        flexDirection: "row",
+        align: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        minHeight: 10,
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              isChecked: isVisible,
+              onChange: (event) => setVisible(event.target.checked),
+              children: title
+            }
+          ),
+          layer.description && /* @__PURE__ */ jsx(LayerItemDescriptor, { layer, title, intl })
+        ]
+      }
+    ),
+    nestedChildren
+  ] });
+}
+function LayerItemDescriptor(props) {
+  const { layer, title, intl } = props;
+  const buttonLabel = intl.formatMessage({ id: "descriptionLabel" });
+  const description = useLayerDescription(layer);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "toc-layer-item-details-button",
+        "aria-label": buttonLabel,
+        borderRadius: "full",
+        iconSpacing: 0,
+        padding: 0,
+        variant: "ghost",
+        leftIcon: /* @__PURE__ */ jsx(FiMoreVertical, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(PopoverContent, { className: "toc-layer-item-details", overflowY: "auto", maxHeight: "400", children: [
+      /* @__PURE__ */ jsx(PopoverArrow, {}),
+      /* @__PURE__ */ jsx(PopoverCloseButton, {}),
+      /* @__PURE__ */ jsx(PopoverHeader, { children: title }),
+      /* @__PURE__ */ jsx(PopoverBody, { children: description })
+    ] }) })
+  ] });
+}
+function useLayerDescription(layer) {
+  const getSnapshot = useCallback(() => layer.description, [layer]);
+  const subscribe = useCallback(
+    (cb) => {
+      const resource = layer.on("changed:description", cb);
+      return () => resource.destroy();
+    },
+    [layer]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot);
+}
+function useTitle(layer) {
+  const getSnapshot = useCallback(() => layer.title, [layer]);
+  const subscribe = useCallback(
+    (cb) => {
+      const resource = layer.on("changed:title", cb);
+      return () => resource.destroy();
+    },
+    [layer]
+  );
+  return useSyncExternalStore(subscribe, getSnapshot);
+}
+function useVisibility(layer) {
+  const getSnapshot = useCallback(() => layer.visible, [layer]);
+  const subscribe = useCallback(
+    (cb) => {
+      const resource = layer.on("changed:visible", cb);
+      return () => resource.destroy();
+    },
+    [layer]
+  );
+  const isVisible = useSyncExternalStore(subscribe, getSnapshot);
+  const setVisible = useCallback(
+    (visible) => {
+      layer.setVisible(visible);
+    },
+    [layer]
+  );
+  return {
+    isVisible,
+    setVisible
+  };
+}
+function useLayers(map) {
+  const subscribe = useCallback(
+    (cb) => {
+      const resource = map.layers.on("changed", cb);
+      return () => resource.destroy();
+    },
+    [map]
+  );
+  const getValue = useCallback(() => {
+    let layers = map.layers.getOperationalLayers({ sortByDisplayOrder: true }) ?? [];
+    layers = layers.reverse().filter(canShowOperationalLayer);
+    return layers;
+  }, [map]);
+  return useCachedExternalStore(subscribe, getValue);
+}
+function useSublayers(layer) {
+  const subscribe = useCallback(
+    (cb) => {
+      const resource = layer.sublayers?.on("changed", cb);
+      return () => resource?.destroy();
+    },
+    [layer]
+  );
+  const getValue = useCallback(() => {
+    const sublayers = layer.sublayers;
+    if (!sublayers) {
+      return void 0;
+    }
+    let layers = layer.sublayers?.getSublayers({ sortByDisplayOrder: true });
+    layers = layers.reverse();
+    return layers;
+  }, [layer]);
+  return useCachedExternalStore(subscribe, getValue);
+}
+function useCachedExternalStore(subscribe, getValue) {
+  const cachedValue = useRef();
+  const cachedSubscribe = useCallback(
+    (cb) => {
+      const cleanup = subscribe(() => {
+        cachedValue.current = void 0;
+        cb();
+      });
+      return () => {
+        cachedValue.current = void 0;
+        cleanup();
+      };
+    },
+    [subscribe]
+  );
+  const cachedGetSnapshot = useCallback(() => {
+    if (cachedValue.current) {
+      return cachedValue.current.value;
+    }
+    const value = getValue();
+    cachedValue.current = { value };
+    return value;
+  }, [getValue]);
+  return useSyncExternalStore(cachedSubscribe, cachedGetSnapshot);
+}
+function canShowOperationalLayer(layer) {
+  return !(layer.olLayer instanceof LayerGroup);
+}
+function slug(id) {
+  return id.replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+
+export { LayerList };
+//# sourceMappingURL=LayerList.js.map

package/LayerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerList.js","sources":["LayerList.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport {\n    Box,\n    Button,\n    Checkbox,\n    Flex,\n    List,\n    ListProps,\n    Popover,\n    PopoverArrow,\n    PopoverBody,\n    PopoverCloseButton,\n    PopoverContent,\n    PopoverHeader,\n    PopoverTrigger,\n    Portal,\n    Text\n} from \"@open-pioneer/chakra-integration\";\nimport { Layer, LayerBase, MapModel, Sublayer } from \"@open-pioneer/map\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport LayerGroup from \"ol/layer/Group\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback, useRef, useSyncExternalStore } from \"react\";\nimport { FiMoreVertical } from \"react-icons/fi\";\n\n/**\n * Lists the (top level) operational layers in the map.\n *\n * Layer Groups are skipped in the current implementation.\n */\nexport function LayerList(props: { map: MapModel; \"aria-labelledby\"?: string }): JSX.Element {\n    const { map, \"aria-labelledby\": ariaLabelledBy } = props;\n    const intl = useIntl();\n    const layers = useLayers(map);\n    if (!layers.length) {\n        return (\n            <Text className=\"toc-missing-layers\" aria-labelledby={ariaLabelledBy}>\n                {intl.formatMessage({ id: \"missingLayers\" })}\n            </Text>\n        );\n    }\n\n    return createList(layers, intl, {\n        \"aria-labelledby\": ariaLabelledBy\n    });\n}\n\nfunction createList(layers: LayerBase[], intl: PackageIntl, listProps: ListProps) {\n    const items = layers.map((layer) => <LayerItem key={layer.id} layer={layer} intl={intl} />);\n    return (\n        <List\n            // Note: not using UnorderedList because it adds default margins\n            as=\"ul\"\n            className=\"toc-layer-list\"\n            listStyleType=\"none\"\n            {...listProps}\n        >\n            {items}\n        </List>\n    );\n}\n\n/**\n * Renders a single layer as a list item.\n *\n * The item may have further nested list items if there are sublayers present.\n */\nfunction LayerItem(props: { layer: LayerBase; intl: PackageIntl }): JSX.Element {\n    const { layer, intl } = props;\n    const title = useTitle(layer);\n    const { isVisible, setVisible } = useVisibility(layer);\n    const sublayers = useSublayers(layer);\n\n    let nestedChildren;\n    if (sublayers?.length) {\n        nestedChildren = createList(sublayers, intl, { ml: 4 });\n    }\n\n    return (\n        <Box as=\"li\" className={classNames(\"toc-layer-item\", `layer-${slug(layer.id)}`)}>\n            <Flex\n                className=\"toc-layer-item-content\"\n                width=\"100%\"\n                flexDirection=\"row\"\n                align=\"center\"\n                justifyContent=\"space-between\"\n                /** Gap to prevent bleeding of the buttons hover style into the layer title */\n                gap={2}\n                /** Aligned to the size of the (potential) menu button in LayerItemDescriptor */\n                minHeight={10}\n            >\n                <Checkbox\n                    isChecked={isVisible}\n                    onChange={(event) => setVisible(event.target.checked)}\n                >\n                    {title}\n                </Checkbox>\n                {layer.description && (\n                    <LayerItemDescriptor layer={layer} title={title} intl={intl} />\n                )}\n            </Flex>\n            {nestedChildren}\n        </Box>\n    );\n}\n\nfunction LayerItemDescriptor(props: {\n    layer: LayerBase;\n    title: string;\n    intl: PackageIntl;\n}): JSX.Element {\n    const { layer, title, intl } = props;\n    const buttonLabel = intl.formatMessage({ id: \"descriptionLabel\" });\n    const description = useLayerDescription(layer);\n\n    return (\n        <Popover>\n            <PopoverTrigger>\n                <Button\n                    className=\"toc-layer-item-details-button\"\n                    aria-label={buttonLabel}\n                    borderRadius=\"full\"\n                    iconSpacing={0}\n                    padding={0}\n                    variant=\"ghost\"\n                    leftIcon={<FiMoreVertical />}\n                />\n            </PopoverTrigger>\n            <Portal>\n                <PopoverContent className=\"toc-layer-item-details\" overflowY=\"auto\" maxHeight=\"400\">\n                    <PopoverArrow />\n                    <PopoverCloseButton />\n                    <PopoverHeader>{title}</PopoverHeader>\n                    <PopoverBody>{description}</PopoverBody>\n                </PopoverContent>\n            </Portal>\n        </Popover>\n    );\n}\n\nfunction useLayerDescription(layer: LayerBase): string {\n    const getSnapshot = useCallback(() => layer.description, [layer]);\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            const resource = layer.on(\"changed:description\", cb);\n            return () => resource.destroy();\n        },\n        [layer]\n    );\n    return useSyncExternalStore(subscribe, getSnapshot);\n}\n\n/** Returns the layers current title. */\nfunction useTitle(layer: LayerBase): string {\n    const getSnapshot = useCallback(() => layer.title, [layer]);\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            const resource = layer.on(\"changed:title\", cb);\n            return () => resource.destroy();\n        },\n        [layer]\n    );\n\n    return useSyncExternalStore(subscribe, getSnapshot);\n}\n\n/** Returns the layer's current visibility and a function to change it. */\nfunction useVisibility(layer: LayerBase): {\n    isVisible: boolean;\n    setVisible(visible: boolean): void;\n} {\n    const getSnapshot = useCallback(() => layer.visible, [layer]);\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            const resource = layer.on(\"changed:visible\", cb);\n            return () => resource.destroy();\n        },\n        [layer]\n    );\n    const isVisible = useSyncExternalStore(subscribe, getSnapshot);\n    const setVisible = useCallback(\n        (visible: boolean) => {\n            layer.setVisible(visible);\n        },\n        [layer]\n    );\n\n    return {\n        isVisible,\n        setVisible\n    };\n}\n\n/** Returns the top level operation layers (without LayerGroups). */\nfunction useLayers(map: MapModel): LayerBase[] {\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            const resource = map.layers.on(\"changed\", cb);\n            return () => resource.destroy();\n        },\n        [map]\n    );\n    const getValue = useCallback(() => {\n        let layers = map.layers.getOperationalLayers({ sortByDisplayOrder: true }) ?? [];\n        layers = layers.reverse().filter(canShowOperationalLayer);\n        return layers;\n    }, [map]);\n    return useCachedExternalStore(subscribe, getValue);\n}\n\n/** Returns the sublayers of the given layer (or undefined, if the sublayer cannot have any). */\nfunction useSublayers(layer: LayerBase): Sublayer[] | undefined {\n    const subscribe = useCallback(\n        (cb: () => void) => {\n            const resource = layer.sublayers?.on(\"changed\", cb);\n            return () => resource?.destroy();\n        },\n        [layer]\n    );\n    const getValue = useCallback((): Sublayer[] | undefined => {\n        const sublayers = layer.sublayers;\n        if (!sublayers) {\n            return undefined;\n        }\n\n        let layers = layer.sublayers?.getSublayers({ sortByDisplayOrder: true });\n        layers = layers.reverse();\n        return layers;\n    }, [layer]);\n    return useCachedExternalStore(subscribe, getValue);\n}\n\n/**\n * This hooks wraps an external store that does not cache its own values, i.e.\n * it may return a different value each time from `getValue()`.\n *\n * The results returned from `getValue()` are cached locally; the cache\n * is only invalidated on re-subscription or if a change event has been observed.\n */\nfunction useCachedExternalStore<T>(\n    subscribe: (onStoreChanged: () => void) => () => void,\n    getValue: () => T\n): T {\n    const cachedValue = useRef<{ value: T } | undefined>();\n\n    const cachedSubscribe = useCallback(\n        (cb: () => void) => {\n            const cleanup = subscribe(() => {\n                // Reset cache on change\n                cachedValue.current = undefined;\n                cb();\n            });\n            return () => {\n                // Reset cache when (re-) subscribing\n                cachedValue.current = undefined;\n                cleanup();\n            };\n        },\n        [subscribe]\n    );\n    const cachedGetSnapshot = useCallback(() => {\n        // Return cached values if still up to date (see resets above).\n        if (cachedValue.current) {\n            return cachedValue.current.value;\n        }\n\n        // Compute values and cache the result.\n        const value = getValue();\n        cachedValue.current = { value };\n        return value;\n    }, [getValue]);\n    return useSyncExternalStore(cachedSubscribe, cachedGetSnapshot);\n}\n\nfunction canShowOperationalLayer(layer: Layer) {\n    return !(layer.olLayer instanceof LayerGroup);\n}\n\nfunction slug(id: string) {\n    return id\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":";;;;;;;;AAgCO,SAAS,UAAU,KAAmE,EAAA;AACzF,EAAA,MAAM,EAAE,GAAA,EAAK,iBAAmB,EAAA,cAAA,EAAmB,GAAA,KAAA,CAAA;AACnD,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAM,MAAA,MAAA,GAAS,UAAU,GAAG,CAAA,CAAA;AAC5B,EAAI,IAAA,CAAC,OAAO,MAAQ,EAAA;AAChB,IAAA,uBACK,GAAA,CAAA,IAAA,EAAA,EAAK,SAAU,EAAA,oBAAA,EAAqB,iBAAiB,EAAA,cAAA,EACjD,QAAK,EAAA,IAAA,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,eAAgB,EAAC,CAC/C,EAAA,CAAA,CAAA;AAAA,GAER;AAEA,EAAO,OAAA,UAAA,CAAW,QAAQ,IAAM,EAAA;AAAA,IAC5B,iBAAmB,EAAA,cAAA;AAAA,GACtB,CAAA,CAAA;AACL,CAAA;AAEA,SAAS,UAAA,CAAW,MAAqB,EAAA,IAAA,EAAmB,SAAsB,EAAA;AAC9E,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,GAAA,CAAI,CAAC,KAAA,qBAAW,GAAA,CAAA,SAAA,EAAA,EAAyB,KAAc,EAAA,IAAA,EAAA,EAAxB,KAAM,CAAA,EAA8B,CAAE,CAAA,CAAA;AAC1F,EACI,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAEG,EAAG,EAAA,IAAA;AAAA,MACH,SAAU,EAAA,gBAAA;AAAA,MACV,aAAc,EAAA,MAAA;AAAA,MACb,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACL,CAAA;AAER,CAAA;AAOA,SAAS,UAAU,KAA6D,EAAA;AAC5E,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACxB,EAAM,MAAA,KAAA,GAAQ,SAAS,KAAK,CAAA,CAAA;AAC5B,EAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAI,cAAc,KAAK,CAAA,CAAA;AACrD,EAAM,MAAA,SAAA,GAAY,aAAa,KAAK,CAAA,CAAA;AAEpC,EAAI,IAAA,cAAA,CAAA;AACJ,EAAA,IAAI,WAAW,MAAQ,EAAA;AACnB,IAAA,cAAA,GAAiB,WAAW,SAAW,EAAA,IAAA,EAAM,EAAE,EAAA,EAAI,GAAG,CAAA,CAAA;AAAA,GAC1D;AAEA,EAAA,uBACK,IAAA,CAAA,GAAA,EAAA,EAAI,EAAG,EAAA,IAAA,EAAK,SAAW,EAAA,UAAA,CAAW,gBAAkB,EAAA,CAAA,MAAA,EAAS,IAAK,CAAA,KAAA,CAAM,EAAE,CAAC,EAAE,CAC1E,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,wBAAA;AAAA,QACV,KAAM,EAAA,MAAA;AAAA,QACN,aAAc,EAAA,KAAA;AAAA,QACd,KAAM,EAAA,QAAA;AAAA,QACN,cAAe,EAAA,eAAA;AAAA,QAEf,GAAK,EAAA,CAAA;AAAA,QAEL,SAAW,EAAA,EAAA;AAAA,QAEX,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACG,SAAW,EAAA,SAAA;AAAA,cACX,UAAU,CAAC,KAAA,KAAU,UAAW,CAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,cAEnD,QAAA,EAAA,KAAA;AAAA,aAAA;AAAA,WACL;AAAA,UACC,MAAM,WACH,oBAAA,GAAA,CAAC,mBAAoB,EAAA,EAAA,KAAA,EAAc,OAAc,IAAY,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAErE;AAAA,IACC,cAAA;AAAA,GACL,EAAA,CAAA,CAAA;AAER,CAAA;AAEA,SAAS,oBAAoB,KAIb,EAAA;AACZ,EAAA,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC/B,EAAA,MAAM,cAAc,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,oBAAoB,CAAA,CAAA;AACjE,EAAM,MAAA,WAAA,GAAc,oBAAoB,KAAK,CAAA,CAAA;AAE7C,EAAA,4BACK,OACG,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,+BAAA;AAAA,QACV,YAAY,EAAA,WAAA;AAAA,QACZ,YAAa,EAAA,MAAA;AAAA,QACb,WAAa,EAAA,CAAA;AAAA,QACb,OAAS,EAAA,CAAA;AAAA,QACT,OAAQ,EAAA,OAAA;AAAA,QACR,QAAA,sBAAW,cAAe,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAElC,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,UACG,QAAC,kBAAA,IAAA,CAAA,cAAA,EAAA,EAAe,WAAU,wBAAyB,EAAA,SAAA,EAAU,MAAO,EAAA,SAAA,EAAU,KAC1E,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,CAAA;AAAA,0BACb,kBAAmB,EAAA,EAAA,CAAA;AAAA,sBACpB,GAAA,CAAC,iBAAe,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBACtB,GAAA,CAAC,eAAa,QAAY,EAAA,WAAA,EAAA,CAAA;AAAA,KAAA,EAC9B,CACJ,EAAA,CAAA;AAAA,GACJ,EAAA,CAAA,CAAA;AAER,CAAA;AAEA,SAAS,oBAAoB,KAA0B,EAAA;AACnD,EAAA,MAAM,cAAc,WAAY,CAAA,MAAM,MAAM,WAAa,EAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AAChE,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IACd,CAAC,EAAmB,KAAA;AAChB,MAAA,MAAM,QAAW,GAAA,KAAA,CAAM,EAAG,CAAA,qBAAA,EAAuB,EAAE,CAAA,CAAA;AACnD,MAAO,OAAA,MAAM,SAAS,OAAQ,EAAA,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACV,CAAA;AACA,EAAO,OAAA,oBAAA,CAAqB,WAAW,WAAW,CAAA,CAAA;AACtD,CAAA;AAGA,SAAS,SAAS,KAA0B,EAAA;AACxC,EAAA,MAAM,cAAc,WAAY,CAAA,MAAM,MAAM,KAAO,EAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IACd,CAAC,EAAmB,KAAA;AAChB,MAAA,MAAM,QAAW,GAAA,KAAA,CAAM,EAAG,CAAA,eAAA,EAAiB,EAAE,CAAA,CAAA;AAC7C,MAAO,OAAA,MAAM,SAAS,OAAQ,EAAA,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACV,CAAA;AAEA,EAAO,OAAA,oBAAA,CAAqB,WAAW,WAAW,CAAA,CAAA;AACtD,CAAA;AAGA,SAAS,cAAc,KAGrB,EAAA;AACE,EAAA,MAAM,cAAc,WAAY,CAAA,MAAM,MAAM,OAAS,EAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AAC5D,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IACd,CAAC,EAAmB,KAAA;AAChB,MAAA,MAAM,QAAW,GAAA,KAAA,CAAM,EAAG,CAAA,iBAAA,EAAmB,EAAE,CAAA,CAAA;AAC/C,MAAO,OAAA,MAAM,SAAS,OAAQ,EAAA,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACV,CAAA;AACA,EAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,SAAA,EAAW,WAAW,CAAA,CAAA;AAC7D,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACf,CAAC,OAAqB,KAAA;AAClB,MAAA,KAAA,CAAM,WAAW,OAAO,CAAA,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACV,CAAA;AAEA,EAAO,OAAA;AAAA,IACH,SAAA;AAAA,IACA,UAAA;AAAA,GACJ,CAAA;AACJ,CAAA;AAGA,SAAS,UAAU,GAA4B,EAAA;AAC3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IACd,CAAC,EAAmB,KAAA;AAChB,MAAA,MAAM,QAAW,GAAA,GAAA,CAAI,MAAO,CAAA,EAAA,CAAG,WAAW,EAAE,CAAA,CAAA;AAC5C,MAAO,OAAA,MAAM,SAAS,OAAQ,EAAA,CAAA;AAAA,KAClC;AAAA,IACA,CAAC,GAAG,CAAA;AAAA,GACR,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AAC/B,IAAI,IAAA,MAAA,GAAS,IAAI,MAAO,CAAA,oBAAA,CAAqB,EAAE,kBAAoB,EAAA,IAAA,EAAM,CAAA,IAAK,EAAC,CAAA;AAC/E,IAAA,MAAA,GAAS,MAAO,CAAA,OAAA,EAAU,CAAA,MAAA,CAAO,uBAAuB,CAAA,CAAA;AACxD,IAAO,OAAA,MAAA,CAAA;AAAA,GACX,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AACR,EAAO,OAAA,sBAAA,CAAuB,WAAW,QAAQ,CAAA,CAAA;AACrD,CAAA;AAGA,SAAS,aAAa,KAA0C,EAAA;AAC5D,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IACd,CAAC,EAAmB,KAAA;AAChB,MAAA,MAAM,QAAW,GAAA,KAAA,CAAM,SAAW,EAAA,EAAA,CAAG,WAAW,EAAE,CAAA,CAAA;AAClD,MAAO,OAAA,MAAM,UAAU,OAAQ,EAAA,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACV,CAAA;AACA,EAAM,MAAA,QAAA,GAAW,YAAY,MAA8B;AACvD,IAAA,MAAM,YAAY,KAAM,CAAA,SAAA,CAAA;AACxB,IAAA,IAAI,CAAC,SAAW,EAAA;AACZ,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAA,IAAI,SAAS,KAAM,CAAA,SAAA,EAAW,aAAa,EAAE,kBAAA,EAAoB,MAAM,CAAA,CAAA;AACvE,IAAA,MAAA,GAAS,OAAO,OAAQ,EAAA,CAAA;AACxB,IAAO,OAAA,MAAA,CAAA;AAAA,GACX,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACV,EAAO,OAAA,sBAAA,CAAuB,WAAW,QAAQ,CAAA,CAAA;AACrD,CAAA;AASA,SAAS,sBAAA,CACL,WACA,QACC,EAAA;AACD,EAAA,MAAM,cAAc,MAAiC,EAAA,CAAA;AAErD,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACpB,CAAC,EAAmB,KAAA;AAChB,MAAM,MAAA,OAAA,GAAU,UAAU,MAAM;AAE5B,QAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA,CAAA;AACtB,QAAG,EAAA,EAAA,CAAA;AAAA,OACN,CAAA,CAAA;AACD,MAAA,OAAO,MAAM;AAET,QAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA,CAAA;AACtB,QAAQ,OAAA,EAAA,CAAA;AAAA,OACZ,CAAA;AAAA,KACJ;AAAA,IACA,CAAC,SAAS,CAAA;AAAA,GACd,CAAA;AACA,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAExC,IAAA,IAAI,YAAY,OAAS,EAAA;AACrB,MAAA,OAAO,YAAY,OAAQ,CAAA,KAAA,CAAA;AAAA,KAC/B;AAGA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,IAAY,WAAA,CAAA,OAAA,GAAU,EAAE,KAAM,EAAA,CAAA;AAC9B,IAAO,OAAA,KAAA,CAAA;AAAA,GACX,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACb,EAAO,OAAA,oBAAA,CAAqB,iBAAiB,iBAAiB,CAAA,CAAA;AAClE,CAAA;AAEA,SAAS,wBAAwB,KAAc,EAAA;AAC3C,EAAO,OAAA,EAAE,MAAM,OAAmB,YAAA,UAAA,CAAA,CAAA;AACtC,CAAA;AAEA,SAAS,KAAK,EAAY,EAAA;AACtB,EAAO,OAAA,EAAA,CACF,OAAQ,CAAA,cAAA,EAAgB,EAAE,CAAA,CAC1B,OAAQ,CAAA,MAAA,EAAQ,GAAG,CAAA,CACnB,OAAQ,CAAA,KAAA,EAAO,GAAG,CAAA,CAAA;AAC3B;;;;"}

package/README.md

@@ -0,0 +1,52 @@
+# @open-pioneer/toc
+
+This package provides a UI component that displays the map content to the user and allows them to control it.
+
+## Usage
+
+To integrate the TOC (table of contents) in your app, insert the following snippet and reference a map ID:
+
+```tsx
+<Toc mapId="map_id" />
+```
+
+### Basemaps
+
+By default, the TOC shows the basemap switcher as an embedded element.
+
+To hide the basemap switcher, set the `showBasemapSwitcher` property to `false`:
+
+```tsx
+<Toc mapId="map_id" showBasemapSwitcher={false} />
+```
+
+To configure the embedded basemap switcher, use the `basemapSwitcherProps` property:
+
+```tsx
+<Toc
+    mapId="map_id"
+    basemapSwitcherProps={{
+        allowSelectingEmptyBasemap: true
+    }}
+/>
+```
+
+### Layer IDs as CSS classes on list items
+
+List items for individual operational layers receive the layer's `id` as an additional CSS class (`layer-${id}`).
+
+For example, given a layer with the ID `test-geojson`, the TOC's list item for that layer is rendered as:
+
+```html
+<li class="toc-layer-item layer-test-geojson ...">
+    <!-- -->
+</li>
+```
+
+> NOTE: Non-alphanumeric characters present in the layer's ID are removed from the class name. Whitespace is replaced with a single `-`.
+
+> NOTE: List items are not guaranteed to be rendered as `li`. Only the CSS class name is guaranteed.
+
+## License
+
+Apache-2.0 (see `LICENSE` file)

package/Toc.d.ts

@@ -0,0 +1,26 @@
+import { BasemapSwitcherProps } from "@open-pioneer/basemap-switcher";
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC } from "react";
+/**
+ * Props supported by the {@link Toc} component.
+ */
+export interface TocProps extends CommonComponentProps {
+    /**
+     * The id of the map.
+     */
+    mapId: string;
+    /**
+     * Defines whether the basemap switcher is shown in the toc.
+     * Defaults to true.
+     */
+    showBasemapSwitcher?: boolean;
+    /**
+     * Properties for the embedded basemap switcher.
+     * Property "mapId" is not applied.
+     */
+    basemapSwitcherProps?: Omit<BasemapSwitcherProps, "mapId">;
+}
+/**
+ * Displays the layers of the configured map.
+ */
+export declare const Toc: FC<TocProps>;

package/Toc.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { BasemapSwitcher } from '@open-pioneer/basemap-switcher';
+import { Box, Text, Flex } from '@open-pioneer/chakra-integration';
+import { useMapModel } from '@open-pioneer/map';
+import { useCommonComponentProps, TitledSection, SectionHeading } from '@open-pioneer/react-utils';
+import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { useId } from 'react';
+import { LayerList } from './LayerList.js';
+
+const PADDING = 2;
+const Toc = (props) => {
+  const intl = useIntl();
+  const { mapId, showBasemapSwitcher = true, basemapSwitcherProps } = props;
+  const { containerProps } = useCommonComponentProps("toc", props);
+  const basemapsHeadingId = useId();
+  const operationalLayersHeadingId = useId();
+  const state = useMapModel(mapId);
+  let content;
+  switch (state.kind) {
+    case "loading":
+      content = null;
+      break;
+    case "rejected":
+      content = /* @__PURE__ */ jsx(Text, { className: "toc-error", children: intl.formatMessage({ id: "error" }) });
+      break;
+    case "resolved": {
+      const basemapSwitcher = showBasemapSwitcher && /* @__PURE__ */ jsx(Box, { className: "toc-basemap-switcher", children: /* @__PURE__ */ jsx(
+        TitledSection,
+        {
+          title: /* @__PURE__ */ jsx(SectionHeading, { id: basemapsHeadingId, size: "sm", mb: PADDING, children: intl.formatMessage({ id: "basemapsLabel" }) }),
+          children: /* @__PURE__ */ jsx(
+            BasemapSwitcher,
+            {
+              mapId,
+              "aria-labelledby": basemapsHeadingId,
+              ...basemapSwitcherProps
+            }
+          )
+        }
+      ) });
+      const layerList = /* @__PURE__ */ jsx(Box, { className: "toc-operational-layers", children: /* @__PURE__ */ jsx(
+        TitledSection,
+        {
+          title: /* @__PURE__ */ jsx(
+            SectionHeading,
+            {
+              id: operationalLayersHeadingId,
+              size: "sm",
+              mb: PADDING,
+              children: intl.formatMessage({ id: "operationalLayerLabel" })
+            }
+          ),
+          children: /* @__PURE__ */ jsx(LayerList, { map: state.map, "aria-labelledby": operationalLayersHeadingId })
+        }
+      ) });
+      content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        basemapSwitcher,
+        layerList
+      ] });
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsx(Flex, { ...containerProps, direction: "column", gap: PADDING, children: content });
+};
+
+export { Toc };
+//# sourceMappingURL=Toc.js.map

package/Toc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toc.js","sources":["Toc.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { BasemapSwitcher, BasemapSwitcherProps } from \"@open-pioneer/basemap-switcher\";\nimport { Box, Flex, Text } from \"@open-pioneer/chakra-integration\";\nimport { useMapModel } from \"@open-pioneer/map\";\nimport {\n    CommonComponentProps,\n    SectionHeading,\n    TitledSection,\n    useCommonComponentProps\n} from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useId } from \"react\";\nimport { LayerList } from \"./LayerList\";\n\n/**\n * Props supported by the {@link Toc} component.\n */\nexport interface TocProps extends CommonComponentProps {\n    /**\n     * The id of the map.\n     */\n    mapId: string;\n\n    /**\n     * Defines whether the basemap switcher is shown in the toc.\n     * Defaults to true.\n     */\n    showBasemapSwitcher?: boolean;\n\n    /**\n     * Properties for the embedded basemap switcher.\n     * Property \"mapId\" is not applied.\n     */\n    basemapSwitcherProps?: Omit<BasemapSwitcherProps, \"mapId\">;\n}\n\nconst PADDING = 2;\n\n/**\n * Displays the layers of the configured map.\n */\nexport const Toc: FC<TocProps> = (props: TocProps) => {\n    const intl = useIntl();\n\n    const { mapId, showBasemapSwitcher = true, basemapSwitcherProps } = props;\n    const { containerProps } = useCommonComponentProps(\"toc\", props);\n    const basemapsHeadingId = useId();\n    const operationalLayersHeadingId = useId();\n    const state = useMapModel(mapId);\n\n    let content: JSX.Element | null;\n    switch (state.kind) {\n        case \"loading\":\n            content = null;\n            break;\n        case \"rejected\":\n            content = <Text className=\"toc-error\">{intl.formatMessage({ id: \"error\" })}</Text>;\n            break;\n        case \"resolved\": {\n            const basemapSwitcher = showBasemapSwitcher && (\n                <Box className=\"toc-basemap-switcher\">\n                    <TitledSection\n                        title={\n                            <SectionHeading id={basemapsHeadingId} size={\"sm\"} mb={PADDING}>\n                                {intl.formatMessage({ id: \"basemapsLabel\" })}\n                            </SectionHeading>\n                        }\n                    >\n                        <BasemapSwitcher\n                            mapId={mapId}\n                            aria-labelledby={basemapsHeadingId}\n                            {...basemapSwitcherProps}\n                        />\n                    </TitledSection>\n                </Box>\n            );\n            const layerList = (\n                <Box className=\"toc-operational-layers\">\n                    <TitledSection\n                        title={\n                            <SectionHeading\n                                id={operationalLayersHeadingId}\n                                size={\"sm\"}\n                                mb={PADDING}\n                            >\n                                {intl.formatMessage({ id: \"operationalLayerLabel\" })}\n                            </SectionHeading>\n                        }\n                    >\n                        <LayerList map={state.map!} aria-labelledby={operationalLayersHeadingId} />\n                    </TitledSection>\n                </Box>\n            );\n\n            content = (\n                <>\n                    {basemapSwitcher}\n                    {layerList}\n                </>\n            );\n            break;\n        }\n    }\n\n    return (\n        <Flex {...containerProps} direction=\"column\" gap={PADDING}>\n            {content}\n        </Flex>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,OAAU,GAAA,CAAA,CAAA;AAKH,MAAA,GAAA,GAAoB,CAAC,KAAoB,KAAA;AAClD,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AAErB,EAAA,MAAM,EAAE,KAAA,EAAO,mBAAsB,GAAA,IAAA,EAAM,sBAAyB,GAAA,KAAA,CAAA;AACpE,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,OAAO,KAAK,CAAA,CAAA;AAC/D,EAAA,MAAM,oBAAoB,KAAM,EAAA,CAAA;AAChC,EAAA,MAAM,6BAA6B,KAAM,EAAA,CAAA;AACzC,EAAM,MAAA,KAAA,GAAQ,YAAY,KAAK,CAAA,CAAA;AAE/B,EAAI,IAAA,OAAA,CAAA;AACJ,EAAA,QAAQ,MAAM,IAAM;AAAA,IAChB,KAAK,SAAA;AACD,MAAU,OAAA,GAAA,IAAA,CAAA;AACV,MAAA,MAAA;AAAA,IACJ,KAAK,UAAA;AACD,MAAU,OAAA,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,WAAa,EAAA,QAAA,EAAA,IAAA,CAAK,cAAc,EAAE,EAAA,EAAI,OAAQ,EAAC,CAAE,EAAA,CAAA,CAAA;AAC3E,MAAA,MAAA;AAAA,IACJ,KAAK,UAAY,EAAA;AACb,MAAA,MAAM,eAAkB,GAAA,mBAAA,oBACnB,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,sBACX,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACG,KACI,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,EAAA,EAAI,mBAAmB,IAAM,EAAA,IAAA,EAAM,EAAI,EAAA,OAAA,EAClD,eAAK,aAAc,CAAA,EAAE,EAAI,EAAA,eAAA,EAAiB,CAC/C,EAAA,CAAA;AAAA,UAGJ,QAAA,kBAAA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACG,KAAA;AAAA,cACA,iBAAiB,EAAA,iBAAA;AAAA,cAChB,GAAG,oBAAA;AAAA,aAAA;AAAA,WACR;AAAA,SAAA;AAAA,OAER,EAAA,CAAA,CAAA;AAEJ,MAAA,MAAM,SACF,mBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,wBACX,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACG,KACI,kBAAA,GAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACG,EAAI,EAAA,0BAAA;AAAA,cACJ,IAAM,EAAA,IAAA;AAAA,cACN,EAAI,EAAA,OAAA;AAAA,cAEH,QAAK,EAAA,IAAA,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,yBAAyB,CAAA;AAAA,aAAA;AAAA,WACvD;AAAA,UAGJ,8BAAC,SAAU,EAAA,EAAA,GAAA,EAAK,KAAM,CAAA,GAAA,EAAM,mBAAiB,0BAA4B,EAAA,CAAA;AAAA,SAAA;AAAA,OAEjF,EAAA,CAAA,CAAA;AAGJ,MAAA,OAAA,mBAES,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,eAAA;AAAA,QACA,SAAA;AAAA,OACL,EAAA,CAAA,CAAA;AAEJ,MAAA,MAAA;AAAA,KACJ;AAAA,GACJ;AAEA,EACI,uBAAA,GAAA,CAAC,QAAM,GAAG,cAAA,EAAgB,WAAU,QAAS,EAAA,GAAA,EAAK,SAC7C,QACL,EAAA,OAAA,EAAA,CAAA,CAAA;AAER;;;;"}

package/_virtual/_virtual-pioneer-module_react-hooks.js

@@ -0,0 +1,7 @@
+import { useIntlInternal } from '@open-pioneer/runtime/react-integration';
+
+const PACKAGE_NAME = "@open-pioneer/toc";
+const useIntl = /*@__PURE__*/ useIntlInternal.bind(undefined, PACKAGE_NAME);
+
+export { useIntl };
+//# sourceMappingURL=_virtual-pioneer-module_react-hooks.js.map

package/_virtual/_virtual-pioneer-module_react-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_virtual-pioneer-module_react-hooks.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/i18n/de.yaml

@@ -0,0 +1,6 @@
+messages:
+  basemapsLabel: "Hintergrundkarten"
+  descriptionLabel: "Layer Beschreibung"
+  operationalLayerLabel: "Layer"
+  missingLayers: "Es sind keine Layer vorhanden."
+  error: "Beim Erstellen des Karteninhalts ist ein Fehler aufgetreten."

package/i18n/en.yaml

@@ -0,0 +1,6 @@
+messages:
+  basemapsLabel: "Basemaps"
+  descriptionLabel: "Layer description"
+  operationalLayerLabel: "Operational layers"
+  missingLayers: "There are no layers to display."
+  error: "Error while creating map content."

package/index.d.ts

@@ -0,0 +1 @@
+export { Toc, type TocProps } from "./Toc";

package/index.js

@@ -0,0 +1,2 @@
+export { Toc } from './Toc.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "type": "module",
+  "name": "@open-pioneer/toc",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@open-pioneer/chakra-integration": "^1.1.0",
+    "@open-pioneer/runtime": "^1.1.0",
+    "ol": "^8.2.0",
+    "react": "^18.2.0",
+    "classnames": "^2.3.2",
+    "react-icons": "^4.11.0",
+    "@open-pioneer/map": "^0.1.0",
+    "@open-pioneer/basemap-switcher": "^0.1.0",
+    "@open-pioneer/react-utils": "^0.1.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "openPioneerFramework": {
+    "services": [],
+    "i18n": {
+      "languages": [
+        "en",
+        "de"
+      ]
+    },
+    "ui": {
+      "references": []
+    },
+    "properties": [],
+    "packageFormatVersion": "1.0.0"
+  }
+}