@open-pioneer/toc 0.8.0 → 0.9.0-dev.20250220091855

package/{Toc.d.ts → ui/Toc.d.ts}

@@ -8,6 +8,7 @@ import { FC } from "react";
 export interface TocProps extends CommonComponentProps, MapModelProps {
     /**
      * Defines whether the tool component is shown in the toc.
+     *
      * Defaults to `false`.
      */
     showTools?: boolean;
@@ -17,16 +18,32 @@ export interface TocProps extends CommonComponentProps, MapModelProps {
     toolsConfig?: ToolsConfig;
     /**
      * 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.
+     *
+     * Property `mapId` is not applied (the basemap switcher uses the same map as the).
      */
     basemapSwitcherProps?: Omit<BasemapSwitcherProps, "mapId">;
+    /**
+     * If `true`, groups in the toc can be collapsed and expanded.
+     * This property should only be `true` if the map actually contains layer groups.
+     *
+     * Defaults to `false`.
+     */
+    collapsibleGroups?: boolean;
+    /**
+     * If `true` groups in the toc are collapsed initially.
+     *
+     * Defaults to `false`. If {@link collapsibleGroups} is `false` this property should also be `false`. Otherwise only the top level layers will appear in the toc.
+     */
+    initiallyCollapsed?: boolean;
     /**
      * Show the parent layers when a child layer is made visible.
+     *
      * Defaults to `true`.
      */
     autoShowParents?: boolean;
@@ -37,9 +54,16 @@ export interface TocProps extends CommonComponentProps, MapModelProps {
 export interface ToolsConfig {
     /**
      * Optional property to show the `hide all layers` entry.
+     *
      * Defaults to `true`.
      */
     showHideAllLayers?: boolean;
+    /**
+     * Optional property to show the `collapse all groups` entry.
+     *
+     * Defaults to `true`. Only applicable if {@link TocProps.collapsibleGroups} is `true`.
+     */
+    showCollapseAllGroups?: boolean;
 }
 /**
  * Displays the layers of the configured map.

package/ui/Toc.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { reactive, reactiveMap } from '@conterra/reactivity-core';
+import { BasemapSwitcher } from '@open-pioneer/basemap-switcher';
+import { Text, Flex, Box, Spacer } 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, useRef, useMemo, useEffect } from 'react';
+import { TocModelProvider } from '../model/TocModel.js';
+import { TopLevelLayerList } from './LayerList/LayerList.js';
+import { Tools } from './Tools.js';
+
+const PADDING = 2;
+const Toc = (props) => {
+  const intl = useIntl();
+  const { containerProps } = useCommonComponentProps("toc", props);
+  const state = useMapModel(props);
+  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 map = state.map;
+      content = /* @__PURE__ */ jsx(TocContent, { ...props, map });
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsx(Flex, { ...containerProps, direction: "column", gap: PADDING, children: content });
+};
+function TocContent(props) {
+  const {
+    map,
+    showTools = false,
+    toolsConfig,
+    showBasemapSwitcher = true,
+    basemapSwitcherProps
+  } = props;
+  const intl = useIntl();
+  const model = useTocModel(props);
+  const basemapsHeadingId = useId();
+  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,
+        {
+          map,
+          "aria-labelledby": basemapsHeadingId,
+          ...basemapSwitcherProps
+        }
+      )
+    }
+  ) });
+  const layerList = /* @__PURE__ */ jsx(Box, { className: "toc-operational-layers", children: /* @__PURE__ */ jsx(
+    TitledSection,
+    {
+      title: /* @__PURE__ */ jsx(SectionHeading, { size: "sm", mb: 2, children: /* @__PURE__ */ jsxs(Flex, { children: [
+        /* @__PURE__ */ jsx(Text, { my: 3, children: intl.formatMessage({
+          id: "operationalLayerLabel"
+        }) }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        showTools && /* @__PURE__ */ jsx(Tools, { map, ...toolsConfig })
+      ] }) }),
+      children: /* @__PURE__ */ jsx(
+        TopLevelLayerList,
+        {
+          map,
+          "aria-label": intl.formatMessage({ id: "operationalLayerLabel" })
+        }
+      )
+    }
+  ) });
+  return /* @__PURE__ */ jsxs(TocModelProvider, { value: model, children: [
+    basemapSwitcher,
+    layerList
+  ] });
+}
+function useTocModel(props) {
+  const initialProps = useRef(props);
+  const { model, options } = useMemo(() => {
+    const options2 = reactive(
+      createOptions(
+        initialProps.current.autoShowParents,
+        initialProps.current.collapsibleGroups,
+        initialProps.current.initiallyCollapsed
+      )
+    );
+    const items = reactiveMap();
+    const model2 = {
+      get options() {
+        return options2.value;
+      },
+      getItem(layerId) {
+        return items.get(layerId);
+      },
+      getItems() {
+        return Array.from(items.values());
+      },
+      registerItem(item) {
+        if (items.has(item.layerId)) {
+          throw new Error(`Item with layerId '${item.layerId}' already registered.`);
+        }
+        items.set(item.layerId, item);
+      },
+      unregisterItem(item) {
+        if (items.get(item.layerId) !== item) {
+          throw new Error(`Item with layerId '${item.layerId}' not registered.`);
+        }
+        items.delete(item.layerId);
+      }
+    };
+    return { model: model2, options: options2 };
+  }, []);
+  useEffect(() => {
+    options.value = createOptions(
+      props.autoShowParents,
+      props.collapsibleGroups,
+      props.initiallyCollapsed
+    );
+  }, [options, props.autoShowParents, props.collapsibleGroups, props.initiallyCollapsed]);
+  return model;
+}
+function createOptions(autoShowParents, collapsibleGroups, isCollapsed) {
+  return {
+    autoShowParents: autoShowParents ?? true,
+    collapsibleGroups: collapsibleGroups ?? false,
+    initiallyCollapsed: isCollapsed ?? false
+  };
+}
+
+export { Toc };
+//# sourceMappingURL=Toc.js.map

package/ui/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 { reactive, reactiveMap } from \"@conterra/reactivity-core\";\nimport { BasemapSwitcher, BasemapSwitcherProps } from \"@open-pioneer/basemap-switcher\";\nimport { Box, Flex, Spacer, Text } from \"@open-pioneer/chakra-integration\";\nimport { MapModel, MapModelProps, 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, useEffect, useId, useMemo, useRef } from \"react\";\nimport { TocItem, TocModel, TocModelProvider, TocWidgetOptions } from \"../model/TocModel\";\nimport { TopLevelLayerList } from \"./LayerList/LayerList\";\nimport { Tools } from \"./Tools\";\n\n/**\n * Props supported by the {@link Toc} component.\n */\nexport interface TocProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Defines whether the tool component is shown in the toc.\n     *\n     * Defaults to `false`.\n     */\n    showTools?: boolean;\n\n    /**\n     * Properties for the embedded tool component.\n     */\n    toolsConfig?: ToolsConfig;\n\n    /**\n     * Defines whether the basemap switcher is shown in the toc.\n     *\n     * Defaults to `true`.\n     */\n    showBasemapSwitcher?: boolean;\n\n    /**\n     * Properties for the embedded basemap switcher.\n     *\n     * Property `mapId` is not applied (the basemap switcher uses the same map as the).\n     */\n    basemapSwitcherProps?: Omit<BasemapSwitcherProps, \"mapId\">;\n\n    /**\n     * If `true`, groups in the toc can be collapsed and expanded.\n     * This property should only be `true` if the map actually contains layer groups.\n     *\n     * Defaults to `false`.\n     */\n    collapsibleGroups?: boolean;\n\n    /**\n     * If `true` groups in the toc are collapsed initially.\n     *\n     * Defaults to `false`. If {@link collapsibleGroups} is `false` this property should also be `false`. Otherwise only the top level layers will appear in the toc.\n     */\n    initiallyCollapsed?: boolean;\n\n    /**\n     * Show the parent layers when a child layer is made visible.\n     *\n     * Defaults to `true`.\n     */\n    autoShowParents?: boolean;\n}\n\n/**\n * Props supported by the {@link Tools} component.\n */\nexport interface ToolsConfig {\n    /**\n     * Optional property to show the `hide all layers` entry.\n     *\n     * Defaults to `true`.\n     */\n    showHideAllLayers?: boolean;\n\n    /**\n     * Optional property to show the `collapse all groups` entry.\n     *\n     * Defaults to `true`. Only applicable if {@link TocProps.collapsibleGroups} is `true`.\n     */\n    showCollapseAllGroups?: boolean;\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    const { containerProps } = useCommonComponentProps(\"toc\", props);\n    const state = useMapModel(props);\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 map = state.map;\n            content = <TocContent {...props} map={map} />;\n            break;\n        }\n    }\n\n    return (\n        <Flex {...containerProps} direction=\"column\" gap={PADDING}>\n            {content}\n        </Flex>\n    );\n};\n\n/** This component is rendered once we have a reference to the loaded map model. */\nfunction TocContent(props: TocProps & { map: MapModel }) {\n    const {\n        map,\n        showTools = false,\n        toolsConfig,\n        showBasemapSwitcher = true,\n        basemapSwitcherProps\n    } = props;\n    const intl = useIntl();\n    const model = useTocModel(props);\n    const basemapsHeadingId = useId();\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                    map={map}\n                    aria-labelledby={basemapsHeadingId}\n                    {...basemapSwitcherProps}\n                />\n            </TitledSection>\n        </Box>\n    );\n\n    const layerList = (\n        <Box className=\"toc-operational-layers\">\n            <TitledSection\n                title={\n                    <SectionHeading size={\"sm\"} mb={2}>\n                        <Flex>\n                            <Text my={3}>\n                                {intl.formatMessage({\n                                    id: \"operationalLayerLabel\"\n                                })}\n                            </Text>\n                            <Spacer />\n                            {showTools && <Tools map={map} {...toolsConfig} />}\n                        </Flex>\n                    </SectionHeading>\n                }\n            >\n                <TopLevelLayerList\n                    map={map}\n                    aria-label={intl.formatMessage({ id: \"operationalLayerLabel\" })}\n                />\n            </TitledSection>\n        </Box>\n    );\n\n    return (\n        <TocModelProvider value={model}>\n            {basemapSwitcher}\n            {layerList}\n        </TocModelProvider>\n    );\n}\n\nfunction useTocModel(props: TocProps): TocModel {\n    const initialProps = useRef(props);\n    const { model, options } = useMemo(() => {\n        const options = reactive<TocWidgetOptions>(\n            createOptions(\n                initialProps.current.autoShowParents,\n                initialProps.current.collapsibleGroups,\n                initialProps.current.initiallyCollapsed\n            )\n        );\n\n        // Indexed by layerId\n        const items = reactiveMap<string, TocItem>();\n        const model: TocModel = {\n            get options() {\n                return options.value;\n            },\n            getItem(layerId: string): TocItem | undefined {\n                return items.get(layerId);\n            },\n            getItems(): TocItem[] {\n                return Array.from(items.values());\n            },\n            registerItem(item: TocItem): void {\n                if (items.has(item.layerId)) {\n                    throw new Error(`Item with layerId '${item.layerId}' already registered.`);\n                }\n                items.set(item.layerId, item);\n            },\n            unregisterItem(item: TocItem): void {\n                if (items.get(item.layerId) !== item) {\n                    throw new Error(`Item with layerId '${item.layerId}' not registered.`);\n                }\n                items.delete(item.layerId);\n            }\n        };\n        return { model, options };\n    }, []);\n\n    // Sync props to model\n    useEffect(() => {\n        options.value = createOptions(\n            props.autoShowParents,\n            props.collapsibleGroups,\n            props.initiallyCollapsed\n        );\n    }, [options, props.autoShowParents, props.collapsibleGroups, props.initiallyCollapsed]);\n\n    return model;\n}\n\nfunction createOptions(\n    autoShowParents?: boolean | undefined,\n    collapsibleGroups?: boolean | undefined,\n    isCollapsed?: boolean | undefined\n): TocWidgetOptions {\n    return {\n        autoShowParents: autoShowParents ?? true,\n        collapsibleGroups: collapsibleGroups ?? false,\n        initiallyCollapsed: isCollapsed ?? false\n    };\n}\n"],"names":["options","model"],"mappings":"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"}

package/{Tools.d.ts → ui/Tools.d.ts}

@@ -1,6 +1,7 @@
 import { MapModel } from "@open-pioneer/map";
 import { FC } from "react";
 import { ToolsConfig } from "./Toc";
-export declare const Tools: FC<{
+export interface ToolsProps extends ToolsConfig {
     map: MapModel;
-} & ToolsConfig>;
+}
+export declare const Tools: FC<ToolsProps>;

package/ui/Tools.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Menu, MenuButton, Button, Portal, MenuList, MenuItem } from '@open-pioneer/chakra-integration';
+import { useIntl } from '../_virtual/_virtual-pioneer-module_react-hooks.js';
+import { memo } from 'react';
+import { FiMoreVertical } from 'react-icons/fi';
+import { useTocModel } from '../model/TocModel.js';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
+
+const Tools = memo(function Tools2(props) {
+  const intl = useIntl();
+  const tocModel = useTocModel();
+  const collapsibleGroups = useReactiveSnapshot(
+    () => tocModel.options.collapsibleGroups,
+    [tocModel]
+  );
+  const {
+    map,
+    showHideAllLayers = true,
+    showCollapseAllGroups: showCollapseAllGroupsProp = collapsibleGroups
+  } = props;
+  const showCollapseAllGroups = collapsibleGroups && showCollapseAllGroupsProp;
+  const hasContent = showHideAllLayers || showCollapseAllGroups;
+  return hasContent && /* @__PURE__ */ jsx(Box, { className: "toc-tools", children: /* @__PURE__ */ jsxs(Menu, { placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        as: Button,
+        className: "toc-tools-button",
+        "aria-label": intl.formatMessage({ id: "toolsLabel" }),
+        borderRadius: "full",
+        iconSpacing: 0,
+        padding: 3,
+        variant: "ghost",
+        leftIcon: /* @__PURE__ */ jsx(FiMoreVertical, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(MenuList, { className: "tools-menu", children: [
+      showHideAllLayers && /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          "aria-label": intl.formatMessage({ id: "tools.hideAllLayers" }),
+          onClick: () => {
+            hideAllLayers(map);
+          },
+          children: intl.formatMessage({ id: "tools.hideAllLayers" })
+        }
+      ),
+      showCollapseAllGroups && /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          "aria-label": intl.formatMessage({
+            id: "tools.collapseAllGroups"
+          }),
+          onClick: () => {
+            collapseAllGroups(tocModel);
+          },
+          children: intl.formatMessage({ id: "tools.collapseAllGroups" })
+        }
+      )
+    ] }) })
+  ] }) });
+});
+function hideAllLayers(map) {
+  const hide = (layer) => {
+    layer.setVisible(false);
+    const children = layer.children?.getItems();
+    if (children) {
+      for (const child of children) {
+        hide(child);
+      }
+    }
+  };
+  map?.layers.getOperationalLayers().forEach((layer) => {
+    hide(layer);
+  });
+}
+function collapseAllGroups(tocModel) {
+  tocModel.getItems().forEach((item) => item.setExpanded(false));
+}
+
+export { Tools };
+//# sourceMappingURL=Tools.js.map

package/ui/Tools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tools.js","sources":["Tools.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    Menu,\n    MenuButton,\n    MenuItem,\n    MenuList,\n    Portal\n} from \"@open-pioneer/chakra-integration\";\nimport { AnyLayer, MapModel } from \"@open-pioneer/map\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, memo } from \"react\";\nimport { FiMoreVertical } from \"react-icons/fi\";\nimport { TocModel, useTocModel } from \"../model/TocModel\";\nimport { ToolsConfig } from \"./Toc\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\n\nexport interface ToolsProps extends ToolsConfig {\n    map: MapModel;\n}\n\nexport const Tools: FC<ToolsProps> = memo(function Tools(props: ToolsProps) {\n    const intl = useIntl();\n    const tocModel = useTocModel();\n    const collapsibleGroups = useReactiveSnapshot(\n        () => tocModel.options.collapsibleGroups,\n        [tocModel]\n    );\n    const {\n        map,\n        showHideAllLayers = true,\n        showCollapseAllGroups: showCollapseAllGroupsProp = collapsibleGroups\n    } = props;\n\n    // Only respected if groups are collapsible\n    const showCollapseAllGroups = collapsibleGroups && showCollapseAllGroupsProp;\n    const hasContent = showHideAllLayers || showCollapseAllGroups;\n    return (\n        hasContent && (\n            <Box className=\"toc-tools\">\n                <Menu placement=\"bottom-start\">\n                    <MenuButton\n                        as={Button}\n                        className=\"toc-tools-button\"\n                        aria-label={intl.formatMessage({ id: \"toolsLabel\" })}\n                        borderRadius=\"full\"\n                        iconSpacing={0}\n                        padding={3}\n                        variant=\"ghost\"\n                        leftIcon={<FiMoreVertical />}\n                    />\n                    <Portal>\n                        <MenuList className=\"tools-menu\">\n                            {showHideAllLayers && (\n                                <MenuItem\n                                    aria-label={intl.formatMessage({ id: \"tools.hideAllLayers\" })}\n                                    onClick={() => {\n                                        hideAllLayers(map);\n                                    }}\n                                >\n                                    {intl.formatMessage({ id: \"tools.hideAllLayers\" })}\n                                </MenuItem>\n                            )}\n                            {showCollapseAllGroups && (\n                                <MenuItem\n                                    aria-label={intl.formatMessage({\n                                        id: \"tools.collapseAllGroups\"\n                                    })}\n                                    onClick={() => {\n                                        collapseAllGroups(tocModel);\n                                    }}\n                                >\n                                    {intl.formatMessage({ id: \"tools.collapseAllGroups\" })}\n                                </MenuItem>\n                            )}\n                        </MenuList>\n                    </Portal>\n                </Menu>\n            </Box>\n        )\n    );\n});\n\nfunction hideAllLayers(map: MapModel | undefined) {\n    const hide = (layer: AnyLayer) => {\n        layer.setVisible(false);\n\n        const children = layer.children?.getItems();\n        if (children) {\n            for (const child of children) {\n                hide(child);\n            }\n        }\n    };\n\n    map?.layers.getOperationalLayers().forEach((layer) => {\n        hide(layer);\n    });\n}\n\nfunction collapseAllGroups(tocModel: TocModel) {\n    tocModel.getItems().forEach((item) => item.setExpanded(false));\n}\n"],"names":["Tools"],"mappings":"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"}

package/utils/slug.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Strips special characters from the given string, making it suitable
+ * for use in CSS classes.
+ */
+export declare function slug(id: string): string;

package/utils/slug.js

@@ -0,0 +1,6 @@
+function slug(id) {
+  return id.toLowerCase().replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
+}
+
+export { slug };
+//# sourceMappingURL=slug.js.map

package/utils/slug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slug.js","sources":["slug.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * Strips special characters from the given string, making it suitable\n * for use in CSS classes.\n */\nexport function slug(id: string): string {\n    return id\n        .toLowerCase()\n        .replace(/[^a-z0-9 -]/g, \"\")\n        .replace(/\\s+/g, \"-\")\n        .replace(/-+/g, \"-\");\n}\n"],"names":[],"mappings":"AAOO,SAAS,KAAK,EAAoB,EAAA;AACrC,EAAA,OAAO,EACF,CAAA,WAAA,EACA,CAAA,OAAA,CAAQ,cAAgB,EAAA,EAAE,CAC1B,CAAA,OAAA,CAAQ,MAAQ,EAAA,GAAG,CACnB,CAAA,OAAA,CAAQ,OAAO,GAAG,CAAA,CAAA;AAC3B;;;;"}

package/Context.d.ts

@@ -1,11 +0,0 @@
-/**
- * Toc context to pass global widget options around (to avoid props drilling).
- *
- * @internal
- */
-export interface TocWidgetOptions {
-    /** True: When showing a child, show all parents as well (`setVisible(true)`). */
-    autoShowParents: boolean;
-}
-export declare const TocWidgetOptionsProvider: React.Provider<TocWidgetOptions>;
-export declare function useTocWidgetOptions(): TocWidgetOptions;

package/Context.js

@@ -1,14 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TocWidgetOptionsContext = createContext(void 0);
-const TocWidgetOptionsProvider = TocWidgetOptionsContext.Provider;
-function useTocWidgetOptions() {
-  const context = useContext(TocWidgetOptionsContext);
-  if (!context) {
-    throw new Error("useTocWidgetOptions must be used within a TocWidgetOptionsProvider");
-  }
-  return context;
-}
-
-export { TocWidgetOptionsProvider, useTocWidgetOptions };
-//# sourceMappingURL=Context.js.map

package/Context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Context.js","sources":["Context.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, useContext } from \"react\";\n\n/**\n * Toc context to pass global widget options around (to avoid props drilling).\n *\n * @internal\n */\nexport interface TocWidgetOptions {\n    /** True: When showing a child, show all parents as well (`setVisible(true)`). */\n    autoShowParents: boolean;\n}\n\nconst TocWidgetOptionsContext = createContext<TocWidgetOptions | undefined>(undefined);\n\nexport const TocWidgetOptionsProvider =\n    TocWidgetOptionsContext.Provider as React.Provider<TocWidgetOptions>;\n\nexport function useTocWidgetOptions(): TocWidgetOptions {\n    const context = useContext(TocWidgetOptionsContext);\n    if (!context) {\n        throw new Error(\"useTocWidgetOptions must be used within a TocWidgetOptionsProvider\");\n    }\n    return context;\n}\n"],"names":[],"mappings":";;AAcA,MAAM,uBAAA,GAA0B,cAA4C,KAAS,CAAA,CAAA,CAAA;AAE9E,MAAM,2BACT,uBAAwB,CAAA,SAAA;AAErB,SAAS,mBAAwC,GAAA;AACpD,EAAM,MAAA,OAAA,GAAU,WAAW,uBAAuB,CAAA,CAAA;AAClD,EAAA,IAAI,CAAC,OAAS,EAAA;AACV,IAAM,MAAA,IAAI,MAAM,oEAAoE,CAAA,CAAA;AAAA,GACxF;AACA,EAAO,OAAA,OAAA,CAAA;AACX;;;;"}

package/LayerList.d.ts

@@ -1,10 +0,0 @@
-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-label"?: string;
-}): JSX.Element;

package/LayerList.js

@@ -1,168 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Text, List, Box, Flex, Checkbox, Tooltip, Spacer, Popover, PopoverTrigger, Button, Portal, PopoverContent, PopoverArrow, PopoverCloseButton, PopoverHeader, PopoverBody } from '@open-pioneer/chakra-integration';
-import { isSublayer } from '@open-pioneer/map';
-import { useReactiveSnapshot } from '@open-pioneer/reactivity';
-import classNames from 'classnames';
-import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
-import { FiAlertTriangle, FiMoreVertical } from 'react-icons/fi';
-import { useTocWidgetOptions } from './Context.js';
-
-function LayerList(props) {
-  const { map, "aria-label": ariaLabel } = props;
-  const intl = useIntl();
-  const layers = useLayers(map);
-  if (!layers.length) {
-    return /* @__PURE__ */ jsx(Text, { className: "toc-missing-layers", "aria-label": ariaLabel, children: intl.formatMessage({ id: "missingLayers" }) });
-  }
-  return createList(layers, {
-    "aria-label": ariaLabel
-  });
-}
-function createList(layers, listProps) {
-  const items = layers.map((layer) => /* @__PURE__ */ jsx(LayerItem, { layer }, layer.id));
-  return /* @__PURE__ */ jsx(
-    List,
-    {
-      as: "ul",
-      className: "toc-layer-list",
-      listStyleType: "none",
-      role: "group",
-      ...listProps,
-      children: items
-    }
-  );
-}
-function LayerItem(props) {
-  const { layer } = props;
-  const intl = useIntl();
-  const options = useTocWidgetOptions();
-  const { title, description, isVisible } = useReactiveSnapshot(() => {
-    return {
-      title: layer.title,
-      description: layer.description,
-      isVisible: layer.visible
-    };
-  }, [layer]);
-  const childLayers = useChildLayers(layer);
-  const isAvailable = useLoadState(layer) !== "error";
-  const notAvailableLabel = intl.formatMessage({ id: "layerNotAvailable" });
-  let nestedChildren;
-  if (childLayers?.length) {
-    nestedChildren = createList(childLayers, {
-      ml: 4,
-      "aria-label": intl.formatMessage({ id: "childgroupLabel" }, { title })
-    });
-  }
-  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,
-            {
-              "aria-label": title + (!isAvailable ? " " + notAvailableLabel : ""),
-              isChecked: isVisible,
-              isDisabled: !isAvailable,
-              onChange: (event) => updateLayerVisibility(layer, event.target.checked, options.autoShowParents),
-              children: title
-            }
-          ),
-          !isAvailable && /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              className: "toc-layer-item-content-tooltip",
-              label: notAvailableLabel,
-              placement: "right",
-              openDelay: 500,
-              children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
-                FiAlertTriangle,
-                {
-                  className: "toc-layer-item-content-icon",
-                  color: "red",
-                  "aria-label": notAvailableLabel
-                }
-              ) })
-            }
-          ),
-          /* @__PURE__ */ jsx(Spacer, {}),
-          description && /* @__PURE__ */ jsx(
-            LayerItemDescriptor,
-            {
-              layer,
-              title,
-              description,
-              intl
-            }
-          )
-        ]
-      }
-    ),
-    nestedChildren
-  ] });
-}
-function updateLayerVisibility(layer, visible, autoShowParents) {
-  layer.setVisible(visible);
-  if (visible && autoShowParents && layer.parent) {
-    updateLayerVisibility(layer.parent, true, true);
-  }
-}
-function LayerItemDescriptor(props) {
-  const { layer, title, description, intl } = props;
-  const buttonLabel = intl.formatMessage({ id: "descriptionLabel" });
-  const isAvailable = useLoadState(layer) !== "error";
-  return /* @__PURE__ */ jsxs(Popover, { placement: "bottom-start", children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        isDisabled: !isAvailable,
-        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, { mt: 1 }),
-      /* @__PURE__ */ jsx(PopoverHeader, { children: title }),
-      /* @__PURE__ */ jsx(PopoverBody, { children: description })
-    ] }) })
-  ] });
-}
-function useLayers(map) {
-  return useReactiveSnapshot(() => {
-    const layers = map.layers.getOperationalLayers({ sortByDisplayOrder: true }) ?? [];
-    layers.reverse();
-    return layers;
-  }, [map]);
-}
-function useChildLayers(layer) {
-  return useReactiveSnapshot(() => {
-    const children = layer.children?.getItems({ sortByDisplayOrder: true });
-    children?.reverse();
-    return children;
-  }, [layer]);
-}
-function useLoadState(layer) {
-  return useReactiveSnapshot(() => {
-    const target = isSublayer(layer) ? layer.parentLayer : layer;
-    return target.loadState;
-  }, [layer]);
-}
-function slug(id) {
-  return id.toLowerCase().replace(/[^a-z0-9 -]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-");
-}
-
-export { LayerList };
-//# sourceMappingURL=LayerList.js.map

package/LayerList.js.map

@@ -1 +0,0 @@
-{"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    Spacer,\n    Text,\n    Tooltip\n} from \"@open-pioneer/chakra-integration\";\nimport { AnyLayer, isSublayer, Layer, MapModel } from \"@open-pioneer/map\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport classNames from \"classnames\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FiAlertTriangle, FiMoreVertical } from \"react-icons/fi\";\nimport { useTocWidgetOptions } from \"./Context\";\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-label\"?: string }): JSX.Element {\n    const { map, \"aria-label\": ariaLabel } = props;\n    const intl = useIntl();\n    const layers = useLayers(map);\n    if (!layers.length) {\n        return (\n            <Text className=\"toc-missing-layers\" aria-label={ariaLabel}>\n                {intl.formatMessage({ id: \"missingLayers\" })}\n            </Text>\n        );\n    }\n\n    return createList(layers, {\n        \"aria-label\": ariaLabel\n    });\n}\n\nfunction createList(layers: AnyLayer[], listProps: ListProps) {\n    const items = layers.map((layer) => <LayerItem key={layer.id} layer={layer} />);\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            role=\"group\"\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: AnyLayer }): JSX.Element {\n    const { layer } = props;\n    const intl = useIntl();\n    const options = useTocWidgetOptions();\n    const { title, description, isVisible } = useReactiveSnapshot(() => {\n        return {\n            title: layer.title,\n            description: layer.description,\n            isVisible: layer.visible\n        };\n    }, [layer]);\n    const childLayers = useChildLayers(layer);\n    const isAvailable = useLoadState(layer) !== \"error\";\n    const notAvailableLabel = intl.formatMessage({ id: \"layerNotAvailable\" });\n\n    let nestedChildren;\n    if (childLayers?.length) {\n        nestedChildren = createList(childLayers, {\n            ml: 4,\n            \"aria-label\": intl.formatMessage({ id: \"childgroupLabel\" }, { title: title })\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                    // Keyboard navigation jumps only to Checkboxes and uses the texts inside this DOM node. The aria-labels of Tooltip and Icon is ignored by screenreader because they are no child element of the checkbox. To consider the notAvailableLabel, an aria-label at the checkbox is necessary.\n                    aria-label={title + (!isAvailable ? \" \" + notAvailableLabel : \"\")}\n                    isChecked={isVisible}\n                    isDisabled={!isAvailable}\n                    onChange={(event) =>\n                        updateLayerVisibility(layer, event.target.checked, options.autoShowParents)\n                    }\n                >\n                    {title}\n                </Checkbox>\n                {!isAvailable && (\n                    <Tooltip\n                        className=\"toc-layer-item-content-tooltip\"\n                        label={notAvailableLabel}\n                        placement=\"right\"\n                        openDelay={500}\n                    >\n                        <span>\n                            <FiAlertTriangle\n                                className=\"toc-layer-item-content-icon\"\n                                color={\"red\"}\n                                aria-label={notAvailableLabel}\n                            />\n                        </span>\n                    </Tooltip>\n                )}\n                <Spacer></Spacer>\n                {description && (\n                    <LayerItemDescriptor\n                        layer={layer}\n                        title={title}\n                        description={description}\n                        intl={intl}\n                    />\n                )}\n            </Flex>\n            {nestedChildren}\n        </Box>\n    );\n}\n\nfunction updateLayerVisibility(layer: AnyLayer, visible: boolean, autoShowParents: boolean) {\n    layer.setVisible(visible);\n    if (visible && autoShowParents && layer.parent) {\n        updateLayerVisibility(layer.parent, true, true);\n    }\n}\n\nfunction LayerItemDescriptor(props: {\n    layer: AnyLayer;\n    title: string;\n    description: string;\n    intl: PackageIntl;\n}): JSX.Element {\n    const { layer, title, description, intl } = props;\n    const buttonLabel = intl.formatMessage({ id: \"descriptionLabel\" });\n    const isAvailable = useLoadState(layer) !== \"error\";\n\n    return (\n        <Popover placement=\"bottom-start\">\n            <PopoverTrigger>\n                <Button\n                    isDisabled={!isAvailable}\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 mt={1} />\n                    <PopoverHeader>{title}</PopoverHeader>\n                    <PopoverBody>{description}</PopoverBody>\n                </PopoverContent>\n            </Portal>\n        </Popover>\n    );\n}\n\n/** Returns the top level operational layers in render order (topmost layer first). */\nfunction useLayers(map: MapModel): Layer[] {\n    return useReactiveSnapshot(() => {\n        const layers = map.layers.getOperationalLayers({ sortByDisplayOrder: true }) ?? [];\n        layers.reverse(); // render topmost layer first\n        return layers;\n    }, [map]);\n}\n\n/**\n * Returns the child layers (sublayers or layers contained in a group layer) of a layer.\n * Layers are returned in render order (topmost sublayer first).\n */\nfunction useChildLayers(layer: AnyLayer): AnyLayer[] | undefined {\n    return useReactiveSnapshot(() => {\n        const children = layer.children?.getItems({ sortByDisplayOrder: true });\n        children?.reverse(); // render topmost layer first\n        return children;\n    }, [layer]);\n}\n\n/** Returns the layers current state. */\nfunction useLoadState(layer: AnyLayer): string {\n    return useReactiveSnapshot(() => {\n        // for sublayers, use the state of the parent\n        const target = isSublayer(layer) ? layer.parentLayer : layer;\n        return target.loadState;\n    }, [layer]);\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":";;;;;;;;;AAkCO,SAAS,UAAU,KAA8D,EAAA;AACpF,EAAA,MAAM,EAAE,GAAA,EAAK,YAAc,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACzC,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,YAAY,EAAA,SAAA,EAC5C,QAAK,EAAA,IAAA,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,eAAgB,EAAC,CAC/C,EAAA,CAAA,CAAA;AAAA,GAER;AAEA,EAAA,OAAO,WAAW,MAAQ,EAAA;AAAA,IACtB,YAAc,EAAA,SAAA;AAAA,GACjB,CAAA,CAAA;AACL,CAAA;AAEA,SAAS,UAAA,CAAW,QAAoB,SAAsB,EAAA;AAC1D,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,GAAA,CAAI,CAAC,KAAA,yBAAW,SAAyB,EAAA,EAAA,KAAA,EAAA,EAAV,KAAM,CAAA,EAAkB,CAAE,CAAA,CAAA;AAC9E,EACI,uBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAEG,EAAG,EAAA,IAAA;AAAA,MACH,SAAU,EAAA,gBAAA;AAAA,MACV,aAAc,EAAA,MAAA;AAAA,MACd,IAAK,EAAA,OAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACL,CAAA;AAER,CAAA;AAOA,SAAS,UAAU,KAAyC,EAAA;AACxD,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAA,MAAM,OAAO,OAAQ,EAAA,CAAA;AACrB,EAAA,MAAM,UAAU,mBAAoB,EAAA,CAAA;AACpC,EAAA,MAAM,EAAE,KAAO,EAAA,WAAA,EAAa,SAAU,EAAA,GAAI,oBAAoB,MAAM;AAChE,IAAO,OAAA;AAAA,MACH,OAAO,KAAM,CAAA,KAAA;AAAA,MACb,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,WAAW,KAAM,CAAA,OAAA;AAAA,KACrB,CAAA;AAAA,GACJ,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACV,EAAM,MAAA,WAAA,GAAc,eAAe,KAAK,CAAA,CAAA;AACxC,EAAM,MAAA,WAAA,GAAc,YAAa,CAAA,KAAK,CAAM,KAAA,OAAA,CAAA;AAC5C,EAAA,MAAM,oBAAoB,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,qBAAqB,CAAA,CAAA;AAExE,EAAI,IAAA,cAAA,CAAA;AACJ,EAAA,IAAI,aAAa,MAAQ,EAAA;AACrB,IAAA,cAAA,GAAiB,WAAW,WAAa,EAAA;AAAA,MACrC,EAAI,EAAA,CAAA;AAAA,MACJ,YAAA,EAAc,KAAK,aAAc,CAAA,EAAE,IAAI,iBAAkB,EAAA,EAAG,EAAE,KAAA,EAAc,CAAA;AAAA,KAC/E,CAAA,CAAA;AAAA,GACL;AACA,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,cAEG,YAAY,EAAA,KAAA,IAAS,CAAC,WAAA,GAAc,MAAM,iBAAoB,GAAA,EAAA,CAAA;AAAA,cAC9D,SAAW,EAAA,SAAA;AAAA,cACX,YAAY,CAAC,WAAA;AAAA,cACb,QAAA,EAAU,CAAC,KACP,KAAA,qBAAA,CAAsB,OAAO,KAAM,CAAA,MAAA,CAAO,OAAS,EAAA,OAAA,CAAQ,eAAe,CAAA;AAAA,cAG7E,QAAA,EAAA,KAAA;AAAA,aAAA;AAAA,WACL;AAAA,UACC,CAAC,WACE,oBAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACG,SAAU,EAAA,gCAAA;AAAA,cACV,KAAO,EAAA,iBAAA;AAAA,cACP,SAAU,EAAA,OAAA;AAAA,cACV,SAAW,EAAA,GAAA;AAAA,cAEX,8BAAC,MACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,eAAA;AAAA,gBAAA;AAAA,kBACG,SAAU,EAAA,6BAAA;AAAA,kBACV,KAAO,EAAA,KAAA;AAAA,kBACP,YAAY,EAAA,iBAAA;AAAA,iBAAA;AAAA,eAEpB,EAAA,CAAA;AAAA,aAAA;AAAA,WACJ;AAAA,8BAEH,MAAO,EAAA,EAAA,CAAA;AAAA,UACP,WACG,oBAAA,GAAA;AAAA,YAAC,mBAAA;AAAA,YAAA;AAAA,cACG,KAAA;AAAA,cACA,KAAA;AAAA,cACA,WAAA;AAAA,cACA,IAAA;AAAA,aAAA;AAAA,WACJ;AAAA,SAAA;AAAA,OAAA;AAAA,KAER;AAAA,IACC,cAAA;AAAA,GACL,EAAA,CAAA,CAAA;AAER,CAAA;AAEA,SAAS,qBAAA,CAAsB,KAAiB,EAAA,OAAA,EAAkB,eAA0B,EAAA;AACxF,EAAA,KAAA,CAAM,WAAW,OAAO,CAAA,CAAA;AACxB,EAAI,IAAA,OAAA,IAAW,eAAmB,IAAA,KAAA,CAAM,MAAQ,EAAA;AAC5C,IAAsB,qBAAA,CAAA,KAAA,CAAM,MAAQ,EAAA,IAAA,EAAM,IAAI,CAAA,CAAA;AAAA,GAClD;AACJ,CAAA;AAEA,SAAS,oBAAoB,KAKb,EAAA;AACZ,EAAA,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,WAAA,EAAa,MAAS,GAAA,KAAA,CAAA;AAC5C,EAAA,MAAM,cAAc,IAAK,CAAA,aAAA,CAAc,EAAE,EAAA,EAAI,oBAAoB,CAAA,CAAA;AACjE,EAAM,MAAA,WAAA,GAAc,YAAa,CAAA,KAAK,CAAM,KAAA,OAAA,CAAA;AAE5C,EACI,uBAAA,IAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,cACf,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACG,YAAY,CAAC,WAAA;AAAA,QACb,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,sBACd,GAAA,CAAC,kBAAmB,EAAA,EAAA,EAAA,EAAI,CAAG,EAAA,CAAA;AAAA,sBAC3B,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;AAGA,SAAS,UAAU,GAAwB,EAAA;AACvC,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAM,MAAA,MAAA,GAAS,IAAI,MAAO,CAAA,oBAAA,CAAqB,EAAE,kBAAoB,EAAA,IAAA,EAAM,CAAA,IAAK,EAAC,CAAA;AACjF,IAAA,MAAA,CAAO,OAAQ,EAAA,CAAA;AACf,IAAO,OAAA,MAAA,CAAA;AAAA,GACX,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AACZ,CAAA;AAMA,SAAS,eAAe,KAAyC,EAAA;AAC7D,EAAA,OAAO,oBAAoB,MAAM;AAC7B,IAAA,MAAM,WAAW,KAAM,CAAA,QAAA,EAAU,SAAS,EAAE,kBAAA,EAAoB,MAAM,CAAA,CAAA;AACtE,IAAA,QAAA,EAAU,OAAQ,EAAA,CAAA;AAClB,IAAO,OAAA,QAAA,CAAA;AAAA,GACX,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACd,CAAA;AAGA,SAAS,aAAa,KAAyB,EAAA;AAC3C,EAAA,OAAO,oBAAoB,MAAM;AAE7B,IAAA,MAAM,MAAS,GAAA,UAAA,CAAW,KAAK,CAAA,GAAI,MAAM,WAAc,GAAA,KAAA,CAAA;AACvD,IAAA,OAAO,MAAO,CAAA,SAAA,CAAA;AAAA,GAClB,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACd,CAAA;AAEA,SAAS,KAAK,EAAY,EAAA;AACtB,EAAA,OAAO,EACF,CAAA,WAAA,EACA,CAAA,OAAA,CAAQ,cAAgB,EAAA,EAAE,CAC1B,CAAA,OAAA,CAAQ,MAAQ,EAAA,GAAG,CACnB,CAAA,OAAA,CAAQ,OAAO,GAAG,CAAA,CAAA;AAC3B;;;;"}