@itwin/map-layers 3.0.0-dev.78 → 3.0.0-dev.82

package/lib/esm/ui/widget/MapLayerManager.scss

@@ -0,0 +1,525 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/index";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$divider-color: $buic-background-toolbutton-stroke;
+$hovered-icon-color: $buic-foreground-primary-tone;
+
+button.map-manager-item-visibility {
+  background-color: transparent;
+  border: none;
+  color: $buic-foreground-body;
+  background-color: transparent;
+
+  &:hover {
+    color: $hovered-icon-color;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: $uicore-button-focus-boxshadow;
+  }
+}
+
+.map-manager-layer-host {
+  margin: 0 6px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .map-expandable-blocks-block {
+    width: 100%;
+    border: none;
+  }
+}
+
+.map-manager-top-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-top: 5px;
+  padding-bottom: 4px;
+  margin-bottom: 15px;
+  border-bottom-color: #ccc;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+
+  .map-manager-header-label {
+    font-size: $iui-font-size;
+    width: auto;
+    white-space: nowrap;
+    flex: 1 1 auto;
+    padding-left: 10px;
+  }
+
+  button.map-manager-item-requireAuthIcon {
+    color: $buic-foreground-warning;
+  }
+
+  .map-manager-header-buttons-group {
+    margin-left: auto;
+    border: none;
+    display: flex;
+    padding-right: 5px;
+  }
+
+  .map-manager-toggle {
+    height: 24px;
+  }
+}
+
+.map-manager-container {
+  margin: 10px 6px 0px 6px;
+  //border: 1px solid #ccc;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  map-manager-settings-container {
+    display: flex;
+    margin-top: 8px;
+    width: 100%;
+  }
+
+  .map-manager-layer-wrapper {
+    border: 1px solid #ccc;
+    margin-bottom: 15px;
+  }
+
+  .map-manager-underlays,
+  .map-manager-overlays {
+    display: flex;
+    align-content: center;
+    margin-top: 8px;
+    padding-left: 10px;
+
+    .map-manager-attach-layer-button {
+      background-color: transparent;
+      margin-left: auto;
+      width: 40px;
+      border: none;
+      color: $buic-foreground-body;
+      margin-right: 2px;
+
+      &:hover {
+        color: $hovered-icon-color;
+      }
+
+      &:focus {
+        box-shadow: $uicore-button-focus-boxshadow;
+        outline: none;
+      }
+    }
+  }
+
+  .core-ls {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    padding: 4px, 0;
+    transform: translate(-50%, -50%);
+  }
+
+  .map-manager-source-listbox-header {
+    margin-bottom: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 6px;
+  }
+
+  .map-manager-source-list-filter {
+    padding-top: 3.3px;
+    padding-bottom: 3.3px;
+    width: calc(100% - 40px);
+  }
+
+  .map-manager-source-list {
+    margin-top: 0;
+  }
+
+  .map-manager-overlays-label {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .map-manager-underlays-label {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .map-manager-no-layers-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+    border-color: $uicore-gray-a;
+    background-color: $buic-background-1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    color: $buic-foreground-muted;
+    font-style: italic;
+    border-style: dotted;
+    border-width: 2px;
+    margin: 6px;
+    width: auto;
+    height: 6.5em; // Avoid container resize when dragging layer the first time.
+  }
+
+  .map-manager-no-layers-label {
+    margin-bottom: 10px;
+  }
+
+  .map-manager-item-divider {
+    width: 100%;
+    height: 2px;
+    background: $divider-color;
+    margin: 1em 0 1em 0;
+  }
+
+  .map-manager-header {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    width: 100%;
+    align-items: center;
+    margin-top: 8px;
+
+    .map-manager-add-source-button {
+      margin-left: 4px;
+    }
+
+    .map-manager-select {
+      height: 2em;
+      flex: auto;
+      width: 100%;
+      min-width: 100px;
+    }
+
+    .map-manager-add {
+      height: 2em;
+      flex: initial;
+      width: fit-content;
+      margin-left: 6px;
+    }
+
+    .core-split-button-label {
+      line-height: inherit;
+    }
+
+    .core-split-button {
+      height: 2em;
+    }
+
+    .core-split-button>.core-split-button-arrow>.core-split-button-arrow-icon {
+      line-height: 16px;
+    }
+  }
+
+  .map-manager-attachments {
+    height: auto;
+    max-height: 30%;
+
+    &.is-dragging-map-over {
+      background-color: $buic-background-5;
+    }
+  }
+}
+
+.map-manager-source-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2em;
+  width: 100%;
+  padding-left: 10px;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: $uicore-gray-a;
+
+  .map-manager-item-label {
+    width: 465px;
+    min-width: 3em;
+  }
+
+  .map-manager-item-visibility {
+    width: 40px;
+    margin-right: 20px;
+  }
+
+  .map-manager-item-transparency {
+    max-width: 160px;
+    width: 160px;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.map-manager-source-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 2.5em;
+  width: 100%;
+  padding-right: 4px;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: $uicore-gray-a;
+  background-color: $buic-background-1;
+
+  .map-manager-item-label {
+    flex: 1 1;
+    text-overflow: ellipsis;
+    /* Required for text-overflow to do anything */
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .map-manager-item-settings-button {
+    background-color: $buic-background-1;
+    color: $buic-foreground-body;
+    border: none;
+
+    &:hover {
+      color: $hovered-icon-color;
+    }
+
+    &:focus {
+      box-shadow: $uicore-button-focus-boxshadow;
+      outline: none;
+    }
+
+    .core-context-menu-container {
+      .core-context-menu-item {
+        >.core-context-menu-icon {
+          flex-shrink: 1;
+          flex-grow: 0;
+          width: 0;
+        }
+
+        .core-slider.core-slider-minMax {
+          min-width: 100px;
+        }
+      }
+    }
+  }
+
+  .map-manager-item-transparency {
+    margin-right: 6px;
+  }
+
+  button.map-manager-item-visibility {
+    border: none;
+    margin: 0 2px;
+    background-color: $buic-background-1;
+    color: $buic-foreground-body;
+
+    &:hover {
+      color: $hovered-icon-color;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: $uicore-button-focus-boxshadow;
+    }
+  }
+
+  button.map-manager-item-requireAuth {
+    background-color: transparent;
+    border: none;
+    color: $buic-foreground-warning;
+    background-color: transparent;
+
+    &:hover {
+      color: $hovered-icon-color;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: $uicore-button-focus-boxshadow;
+    }
+  }
+}
+
+.map-layer-settings {
+  border: none;
+  background-color: $buic-background-1;
+  color: $buic-foreground-body;
+  margin-left: 2px;
+
+  &:hover {
+    color: $hovered-icon-color;
+  }
+
+  &:focus {
+    box-shadow: $uicore-button-focus-boxshadow;
+    outline: none;
+  }
+}
+
+.map-manager-item-sub-layer-button {
+  border: none;
+  background-color: $buic-background-1;
+  color: $buic-foreground-body;
+
+  &:hover {
+    color: $hovered-icon-color;
+  }
+
+  &:focus {
+    box-shadow: $uicore-button-focus-boxshadow;
+    outline: none;
+  }
+}
+
+.map-manager-item-sub-layer-container {
+  @include uicore-z-index(dialog-popup);
+}
+
+.map-manager-sublayer-panel {
+  width: 400px;
+  height: 400px;
+  color: $buic-foreground-body;
+  font-size: $iui-font-size;
+  padding: 4px;
+  display: block;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid $buic-background-panel-stroke;
+  background: $buic-background-panel;
+  color: $buic-text-color;
+  cursor: default;
+  @include uicore-z-index(dialog-popup);
+}
+
+.map-manager-sublayer-label {
+  width: 100%;
+  min-width: 100px;
+  text-overflow: ellipsis;
+  /* Required for text-overflow to do anything */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.map-layer-settings-popup-panel {
+  color: $buic-foreground-body;
+  font-size: $iui-font-size;
+  display: grid;
+  grid-row-gap: 4px;
+  padding: 4px;
+
+  &:hover {
+    color: $buic-foreground-activehover;
+    cursor: auto;
+  }
+
+  .core-context-menu-item {
+    display: flex;
+    cursor: default;
+    align-items: center;
+    position: relative;
+
+    &:hover {
+      background-color: $buic-row-hover;
+    }
+  }
+
+  .map-manager-no-layers-label {
+    display: block;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    padding-left: 4px;
+    padding-right: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $uicore-gray-a;
+    border-radius: 3px;
+    background-color: $buic-background-1;
+    overflow: hidden;
+    color: $buic-foreground-muted;
+    font-style: italic;
+  }
+}
+
+.map-manager-not-geo-located-text {
+  width: 90%;
+  color: $buic-foreground-muted;
+  font-style: italic;
+  text-align: center;
+}
+
+.map-sources-delete-confirmation {
+  @include uicore-z-index(status-popup);
+}
+
+.map-sources-popup-panel {
+  padding: 4px;
+  width: 400px;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .map-manager-source-listbox-header {
+    display: flex;
+    margin-left: 1px;
+    column-gap: 4px;
+  }
+
+  ul.core-listbox {
+    background-color: $buic-background-1;
+  }
+
+  .map-manager-sources {
+    height: 250px;
+    min-height: 60px;
+
+    .map-source-list-entry {
+      button.map-source-list-entry-button {
+        padding: 0 4px 0 4px;
+        margin: 0;
+        background-color: transparent;
+        border: none;
+        color: $buic-foreground-body;
+
+        &:hover {
+          color: $hovered-icon-color;
+        }
+
+        &:focus {
+          outline: none;
+          box-shadow: $uicore-button-focus-boxshadow;
+        }
+      }
+
+      .map-source-list-entry-name {
+        flex: 1 1 auto;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        margin-right: 4px;
+      }
+
+      .map-source-list-entry-attach {
+        margin-right: 10px;
+        display: none;
+        width: auto;
+      }
+
+      &[aria-selected="true"] {
+        .map-source-list-entry-attach {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

package/lib/esm/ui/widget/MapLayerSettingsMenu.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ScreenViewport } from "@itwin/core-frontend";
+import "./MapLayerManager.scss";
+import { StyleMapLayerSettings } from "../Interfaces";
+export declare function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport }: {
+    mapLayerSettings: StyleMapLayerSettings;
+    onMenuItemSelection: (action: string, mapLayerSettings: StyleMapLayerSettings) => void;
+    activeViewport: ScreenViewport;
+}): JSX.Element;
+//# sourceMappingURL=MapLayerSettingsMenu.d.ts.map

package/lib/esm/ui/widget/MapLayerSettingsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayerSettingsMenu.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsMenu.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAItD,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,wBAAgB,oBAAoB,CAAC,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,cAAc,EAAE,EAAE;IAAE,gBAAgB,EAAE,qBAAqB,CAAC;IAAC,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAAC,cAAc,EAAE,cAAc,CAAA;CAAE,eAgFlQ"}

package/lib/esm/ui/widget/MapLayerSettingsMenu.js

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { ContextMenu, ContextMenuItem } from "@itwin/core-react";
+import { Slider } from "@itwin/itwinui-react";
+import { MapLayersUiItemsProvider } from "../MapLayersUiItemsProvider";
+import "./MapLayerManager.scss";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport }) {
+    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+    const settingsRef = React.useRef(null);
+    const [labelDetach] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:LayerMenu.Detach"));
+    const [labelZoomToLayer] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:LayerMenu.ZoomToLayer"));
+    const [hasRangeData, setHasRangeData] = React.useState();
+    const [transparency, setTransparency] = React.useState(mapLayerSettings.transparency);
+    React.useEffect(() => {
+        async function fetchRangeData() {
+            let hasRange = false;
+            const indexInDisplayStyle = activeViewport === null || activeViewport === void 0 ? void 0 : activeViewport.displayStyle.findMapLayerIndexByNameAndUrl(mapLayerSettings.name, mapLayerSettings.url, mapLayerSettings.isOverlay);
+            if (undefined !== indexInDisplayStyle) {
+                hasRange = (undefined !== await activeViewport.displayStyle.getMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay));
+            }
+            setHasRangeData(hasRange);
+        }
+        fetchRangeData(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }, [activeViewport, mapLayerSettings]);
+    const onSettingsClick = React.useCallback(() => {
+        setIsSettingsOpen((prev) => !prev);
+    }, [setIsSettingsOpen]);
+    const handleCloseSetting = React.useCallback(() => {
+        setIsSettingsOpen(false);
+    }, [setIsSettingsOpen]);
+    const handleRemoveLayer = React.useCallback(() => {
+        setIsSettingsOpen(false);
+        onMenuItemSelection("delete", mapLayerSettings);
+    }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);
+    const handleZoomToLayer = React.useCallback(() => {
+        setIsSettingsOpen(false);
+        onMenuItemSelection("zoom-to-layer", mapLayerSettings);
+    }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);
+    const applyTransparencyChange = React.useCallback((value) => {
+        var _a;
+        if (activeViewport) {
+            const newTransparency = value;
+            const displayStyle = activeViewport.displayStyle;
+            const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndUrl(mapLayerSettings.name, mapLayerSettings.url, mapLayerSettings.isOverlay);
+            if (-1 !== indexInDisplayStyle) {
+                const styleTransparency = (_a = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayerSettings.isOverlay)) === null || _a === void 0 ? void 0 : _a.transparency;
+                const styleTransparencyValue = styleTransparency ? styleTransparency : 0;
+                if (Math.abs(styleTransparencyValue - newTransparency) > 0.01) {
+                    // update the display style
+                    displayStyle.changeMapLayerProps({ transparency: newTransparency }, indexInDisplayStyle, mapLayerSettings.isOverlay);
+                    activeViewport.invalidateRenderPlan();
+                    // force UI to update
+                    // loadMapLayerSettingsFromStyle(activeViewport.displayStyle);
+                }
+            }
+        }
+    }, [activeViewport, mapLayerSettings]);
+    const handleTransparencyChange = React.useCallback((values) => {
+        if (values.length) {
+            const newTransparency = values[0] / 100.0;
+            if (newTransparency !== transparency) {
+                setTransparency(newTransparency);
+                applyTransparencyChange(newTransparency);
+            }
+        }
+    }, [transparency, applyTransparencyChange]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { "data-testid": "map-layer-settings", className: "map-layer-settings icon icon-more-vertical-2", ref: settingsRef, onClick: onSettingsClick }),
+        React.createElement(ContextMenu, { opened: isSettingsOpen && (undefined !== hasRangeData), onOutsideClick: handleCloseSetting },
+            React.createElement(ContextMenuItem, { hideIconContainer: true, key: 0, className: hasRangeData ? "" : "core-context-menu-disabled", onSelect: handleZoomToLayer }, labelZoomToLayer),
+            React.createElement(ContextMenuItem, { hideIconContainer: true, key: 1, onSelect: handleRemoveLayer }, labelDetach),
+            React.createElement(ContextMenuItem, { hideIconContainer: true, key: 2 },
+                React.createElement(Slider, { min: 0, max: 100, values: [transparency * 100], step: 1, onChange: handleTransparencyChange })))));
+}
+//# sourceMappingURL=MapLayerSettingsMenu.js.map

package/lib/esm/ui/widget/MapLayerSettingsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayerSettingsMenu.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport * as React from \"react\";\nimport { ScreenViewport } from \"@itwin/core-frontend\";\nimport { ContextMenu, ContextMenuItem } from \"@itwin/core-react\";\nimport { Slider } from \"@itwin/itwinui-react\";\nimport { MapLayersUiItemsProvider } from \"../MapLayersUiItemsProvider\";\nimport \"./MapLayerManager.scss\";\nimport { StyleMapLayerSettings } from \"../Interfaces\";\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerSettingsMenu({ mapLayerSettings, onMenuItemSelection, activeViewport }: { mapLayerSettings: StyleMapLayerSettings, onMenuItemSelection: (action: string, mapLayerSettings: StyleMapLayerSettings) => void, activeViewport: ScreenViewport }) {\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const settingsRef = React.useRef<HTMLButtonElement>(null);\n  const [labelDetach] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString(\"mapLayers:LayerMenu.Detach\"));\n  const [labelZoomToLayer] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString(\"mapLayers:LayerMenu.ZoomToLayer\"));\n  const [hasRangeData, setHasRangeData] = React.useState<boolean | undefined>();\n  const [transparency, setTransparency] = React.useState(mapLayerSettings.transparency);\n\n  React.useEffect(() => {\n    async function fetchRangeData() {\n      let hasRange = false;\n      const indexInDisplayStyle = activeViewport?.displayStyle.findMapLayerIndexByNameAndUrl(mapLayerSettings.name, mapLayerSettings.url, mapLayerSettings.isOverlay);\n      if (undefined !== indexInDisplayStyle) {\n        hasRange = (undefined !== await activeViewport.displayStyle.getMapLayerRange(indexInDisplayStyle, mapLayerSettings.isOverlay));\n      }\n      setHasRangeData(hasRange);\n    }\n    fetchRangeData(); // eslint-disable-line @typescript-eslint/no-floating-promises\n  }, [activeViewport, mapLayerSettings]);\n\n  const onSettingsClick = React.useCallback(() => {\n    setIsSettingsOpen((prev) => !prev);\n  }, [setIsSettingsOpen]);\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const handleRemoveLayer = React.useCallback(() => {\n    setIsSettingsOpen(false);\n    onMenuItemSelection(\"delete\", mapLayerSettings);\n  }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);\n\n  const handleZoomToLayer = React.useCallback(() => {\n    setIsSettingsOpen(false);\n    onMenuItemSelection(\"zoom-to-layer\", mapLayerSettings);\n  }, [setIsSettingsOpen, onMenuItemSelection, mapLayerSettings]);\n\n  const applyTransparencyChange = React.useCallback((value: number) => {\n    if (activeViewport) {\n      const newTransparency = value;\n      const displayStyle = activeViewport.displayStyle;\n      const indexInDisplayStyle = displayStyle.findMapLayerIndexByNameAndUrl(mapLayerSettings.name, mapLayerSettings.url, mapLayerSettings.isOverlay);\n      if (-1 !== indexInDisplayStyle) {\n        const styleTransparency = displayStyle.mapLayerAtIndex(indexInDisplayStyle, mapLayerSettings.isOverlay)?.transparency;\n        const styleTransparencyValue = styleTransparency ? styleTransparency : 0;\n        if (Math.abs(styleTransparencyValue - newTransparency) > 0.01) {\n          // update the display style\n          displayStyle.changeMapLayerProps({ transparency: newTransparency }, indexInDisplayStyle, mapLayerSettings.isOverlay);\n          activeViewport.invalidateRenderPlan();\n\n          // force UI to update\n          // loadMapLayerSettingsFromStyle(activeViewport.displayStyle);\n        }\n      }\n    }\n  }, [activeViewport, mapLayerSettings]);\n\n  const handleTransparencyChange = React.useCallback((values: readonly number[]) => {\n    if (values.length) {\n      const newTransparency = values[0] / 100.0;\n      if (newTransparency !== transparency) {\n        setTransparency(newTransparency);\n        applyTransparencyChange(newTransparency);\n      }\n    }\n  }, [transparency, applyTransparencyChange]);\n\n  return (\n    <>\n      <button data-testid=\"map-layer-settings\" className=\"map-layer-settings icon icon-more-vertical-2\" ref={settingsRef} onClick={onSettingsClick} ></button>\n      <ContextMenu opened={isSettingsOpen && (undefined !== hasRangeData)} onOutsideClick={handleCloseSetting} >\n        <ContextMenuItem hideIconContainer={true} key={0} className={hasRangeData ? \"\" : \"core-context-menu-disabled\"} onSelect={handleZoomToLayer}>{labelZoomToLayer}</ContextMenuItem>\n        <ContextMenuItem hideIconContainer={true} key={1} onSelect={handleRemoveLayer}>{labelDetach}</ContextMenuItem>\n        <ContextMenuItem hideIconContainer={true} key={2} >\n          <Slider min={0} max={100} values={[transparency * 100]} step={1} onChange={handleTransparencyChange} />\n        </ContextMenuItem>\n      </ContextMenu>\n    </>\n  );\n}\n"]}

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./MapLayerSettingsPopupButton.scss";
+/** @alpha */
+export declare function MapLayerSettingsPopupButton(): JSX.Element;
+//# sourceMappingURL=MapLayerSettingsPopupButton.d.ts.map

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayerSettingsPopupButton.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsPopupButton.tsx"],"names":[],"mappings":";AAWA,OAAO,oCAAoC,CAAC;AAE5C,aAAa;AAEb,wBAAgB,2BAA2B,gBA+B1C"}

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.js

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Popup, WebFontIcon } from "@itwin/core-react";
+import { MapLayersUiItemsProvider } from "../MapLayersUiItemsProvider";
+import { MapManagerSettings } from "./MapManagerSettings";
+import "./MapLayerSettingsPopupButton.scss";
+/** @alpha */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function MapLayerSettingsPopupButton() {
+    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+    const [buttonTooltip] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString("mapLayers:Widget.SettingsButtonTooltip"));
+    const buttonRef = React.useRef(null);
+    const togglePopupDisplay = React.useCallback((event) => {
+        event.preventDefault();
+        setIsSettingsOpen((prev) => !prev);
+    }, [setIsSettingsOpen]);
+    const handleCloseSetting = React.useCallback(() => {
+        setIsSettingsOpen(false);
+    }, [setIsSettingsOpen]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { title: buttonTooltip, className: "maplayers-settings-popup-button", onClick: togglePopupDisplay, ref: buttonRef },
+            React.createElement(WebFontIcon, { iconName: "icon-settings" })),
+        React.createElement(Popup, { isOpen: isSettingsOpen, position: RelativePosition.BottomRight, onClose: handleCloseSetting, target: buttonRef.current },
+            React.createElement("div", { className: "maplayers-settings-popup-panel" },
+                React.createElement(MapManagerSettings, null)))));
+}
+//# sourceMappingURL=MapLayerSettingsPopupButton.js.map

package/lib/esm/ui/widget/MapLayerSettingsPopupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayerSettingsPopupButton.js","sourceRoot":"","sources":["../../../../src/ui/widget/MapLayerSettingsPopupButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,OAAO,oCAAoC,CAAC;AAE5C,aAAa;AACb,gEAAgE;AAChE,MAAM,UAAU,2BAA2B;IACzC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,wBAAwB,CAAC,YAAY,CAAC,kBAAkB,CAAC,wCAAwC,CAAC,CAAC,CAAC;IAE3I,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAsD,EAAE,EAAE;QACtG,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAChD,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO,CACL;QACE,gCAAQ,KAAK,EAAE,aAAa,EAAE,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,SAAS;YACnH,oBAAC,WAAW,IAAC,QAAQ,EAAC,eAAe,GAAG,CACjC;QACT,oBAAC,KAAK,IACJ,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,gBAAgB,CAAC,WAAW,EACtC,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,SAAS,CAAC,OAAO;YAEzB,6BAAK,SAAS,EAAC,gCAAgC;gBAC7C,oBAAC,kBAAkB,OAAG,CAClB,CACC,CACP,CACL,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup, WebFontIcon } from \"@itwin/core-react\";\nimport { MapLayersUiItemsProvider } from \"../MapLayersUiItemsProvider\";\nimport { MapManagerSettings } from \"./MapManagerSettings\";\n\nimport \"./MapLayerSettingsPopupButton.scss\";\n\n/** @alpha */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function MapLayerSettingsPopupButton() {\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const [buttonTooltip] = React.useState(MapLayersUiItemsProvider.localization.getLocalizedString(\"mapLayers:Widget.SettingsButtonTooltip\"));\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    event.preventDefault();\n    setIsSettingsOpen((prev) => !prev);\n  }, [setIsSettingsOpen]);\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  return (\n    <>\n      <button title={buttonTooltip} className=\"maplayers-settings-popup-button\" onClick={togglePopupDisplay} ref={buttonRef}>\n        <WebFontIcon iconName=\"icon-settings\" />\n      </button>\n      <Popup\n        isOpen={isSettingsOpen}\n        position={RelativePosition.BottomRight}\n        onClose={handleCloseSetting}\n        target={buttonRef.current}\n      >\n        <div className=\"maplayers-settings-popup-panel\">\n          <MapManagerSettings />\n        </div>\n      </Popup >\n    </ >\n  );\n}\n"]}