@itwin/map-layers 5.4.4 → 5.5.0

package/lib/cjs/ui/widget/BasemapPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasemapPanel.js","sourceRoot":"","sources":["../../../../src/ui/widget/BasemapPanel.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*--------------------------------------------------------------------------------------------*/\n/* eslint-disable deprecation/deprecation */\n// cSpell:ignore droppable Sublayer Basemap\n\nimport \"./BasemapPanel.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport {\n  BackgroundMapType, BaseLayerSettings, BaseMapLayerSettings, ColorByName, ColorDef, ImageMapLayerSettings, MapImagerySettings, MapLayerProps,\n} from \"@itwin/core-common\";\nimport { Viewport } from \"@itwin/core-frontend\";\nimport { WebFontIcon } from \"@itwin/core-react\";\nimport { ColorPickerDialog, ColorSwatch } from \"@itwin/imodel-components-react\";\nimport { Button, Select, SelectOption } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { useSourceMapContext } from \"./MapLayerManager\";\nimport { TransparencyPopupButton } from \"./TransparencyPopupButton\";\n\nconst customBaseMapValue = \"customBaseMap\";\nconst getSelectKeyFromProvider = (base: BaseMapLayerSettings) => `${base.provider ? `${base.provider.name}.${BackgroundMapType[base.provider.type]}` : `${base.name}`}`;\n\ninterface BasemapPanelProps {\n  disabled?: boolean;\n}\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function BasemapPanel(props: BasemapPanelProps) {\n  const [useColorLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.ColorFill\"));\n  const { activeViewport, bases } = useSourceMapContext();\n  const [selectedBaseMap, setSelectedBaseMap] = React.useState<BaseLayerSettings | undefined>(()=> {\n    return activeViewport?.displayStyle.settings.mapImagery.backgroundBase;\n  });\n  const [baseMapTransparencyValue, setBaseMapTransparencyValue] = React.useState(() => {\n    if (activeViewport) {\n      const mapImagery = activeViewport.displayStyle.settings.mapImagery;\n      if (mapImagery.backgroundBase instanceof ImageMapLayerSettings) {\n        return mapImagery.backgroundBase.transparency;\n      } else if (mapImagery.backgroundBase instanceof ColorDef ) {\n        return mapImagery.backgroundBase.getAlpha()/255;\n      } else {\n        return 0;\n      }\n    } else {\n      return 0;\n    }\n  });\n  const [customBaseMap, setCustomBaseMap] = React.useState<BaseMapLayerSettings|undefined>();\n  const [baseMapVisible, setBaseMapVisible] = React.useState(() => {\n    if (activeViewport && activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings) {\n      return activeViewport.displayStyle.backgroundMapBase.visible;\n    }\n    return false;\n  });\n\n  const getBaseMapOptions = React.useCallback((baseMap: BaseLayerSettings|undefined) => {\n    const baseOptions: SelectOption<string>[] = [];\n\n    baseOptions.push({ value: useColorLabel, label: useColorLabel });\n\n    if (bases) {\n      baseOptions.push(...bases.map((bgProvider) => {\n        const value = getSelectKeyFromProvider(bgProvider);\n        const label = MapLayersUI.translate(`WellKnownBaseMaps.${value}`);\n        return { value, label };\n      } ));\n    }\n\n    // Add new custom base map definition (avoid adding duplicate entry)\n    if (baseMap instanceof BaseMapLayerSettings && !baseMap.provider) {\n      // Add new option only if not created duplicate (Support of base map definition without provider)\n      if (undefined === baseOptions.find((opt)=>opt.label === baseMap.name)) {\n        baseOptions.push({value: customBaseMapValue, label: baseMap.name});\n      }\n    } else if (customBaseMap) {\n      // Add previously defined custom map definition\n      baseOptions.push({value: customBaseMapValue, label: customBaseMap.name});\n    }\n    return  baseOptions;\n\n  }, [bases, customBaseMap, useColorLabel]);\n\n  const [baseMapOptions, setBaseMapOptions] = React.useState<SelectOption<string>[]>(()=>getBaseMapOptions(selectedBaseMap));\n\n  const updateBaseMapOptions = React.useCallback((baseMap: BaseLayerSettings|undefined) => {\n    setBaseMapOptions(getBaseMapOptions(baseMap));\n  }, [getBaseMapOptions]);\n\n  const handleMapImageryChanged = React.useCallback((args: Readonly<MapImagerySettings>) => {\n\n    const baseMap = args.backgroundBase;\n\n    // Optimization:  If serialized 'backgroundBase' objects are identical, skip refresh\n    if (JSON.stringify(baseMap.toJSON()) === JSON.stringify(selectedBaseMap?.toJSON()))\n      return;\n\n    setSelectedBaseMap(baseMap);  // cache current base map objects\n    updateBaseMapOptions(baseMap);\n\n    if (baseMap instanceof ImageMapLayerSettings) {\n      if (baseMap.transparency !== baseMapTransparencyValue)\n        setBaseMapTransparencyValue(baseMap.transparency);\n\n      if (baseMap.visible !== baseMapVisible)\n        setBaseMapVisible(baseMap.visible);\n\n    } else if (baseMap instanceof ColorDef) {\n      if (baseMap.getAlpha() !== baseMapTransparencyValue ) {\n        setBaseMapTransparencyValue(baseMap.getAlpha()/255);\n      }\n    }\n  }, [baseMapTransparencyValue, baseMapVisible, selectedBaseMap, updateBaseMapOptions]);\n\n  React.useEffect(() => {\n    const handleDisplayStyleChange = (vp: Viewport) => {\n      handleMapImageryChanged(vp.displayStyle.settings.mapImagery);\n    };\n    return activeViewport?.onDisplayStyleChanged.addListener(handleDisplayStyleChange);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor display style's onMapImageryChanged event\n  React.useEffect(() => {\n    return activeViewport?.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor viewport updates, and refresh the widget accordingly .\n  // Note: This is needed for multiple viewport applications.\n  React.useEffect(() => {\n    if (activeViewport) {\n      handleMapImageryChanged(activeViewport.displayStyle.settings.mapImagery);\n    }\n  }, [activeViewport, handleMapImageryChanged]);\n\n  const handleBasemapTransparencyChange = React.useCallback((transparency: number) => {\n    if (activeViewport) {\n      activeViewport.displayStyle.changeBaseMapTransparency(transparency);\n      setBaseMapTransparencyValue(transparency);\n    }\n  }, [activeViewport]);\n\n  // This effect is only to keep a custom base map option when a 'default' base map is picked.\n  React.useEffect(() => {\n    if (selectedBaseMap instanceof BaseMapLayerSettings\n       && !selectedBaseMap.provider\n       && undefined === baseMapOptions.find((opt)=>opt.label === selectedBaseMap.name)) {\n      setCustomBaseMap(selectedBaseMap);\n    }\n  }, [baseMapOptions, selectedBaseMap]);\n\n  const [presetColors] = React.useState([\n    ColorDef.create(ColorByName.grey),\n    ColorDef.create(ColorByName.lightGrey),\n    ColorDef.create(ColorByName.darkGrey),\n    ColorDef.create(ColorByName.lightBlue),\n    ColorDef.create(ColorByName.lightGreen),\n    ColorDef.create(ColorByName.darkGreen),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.darkBrown),\n  ]);\n\n  const baseIsColor = React.useMemo(() => selectedBaseMap instanceof ColorDef, [selectedBaseMap]);\n  const baseIsMap = React.useMemo(() => !baseIsColor && (selectedBaseMap !== undefined), [baseIsColor, selectedBaseMap]);\n  const bgColor = React.useMemo(() => baseIsColor ? (selectedBaseMap as ColorDef).toJSON(): presetColors[0].toJSON(),\n    [baseIsColor, selectedBaseMap, presetColors]);\n  const [colorDialogTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:ColorDialog.Title\"));\n  const [selectedBaseMapValue, setSelectedBaseMapValue] = React.useState<SelectOption<string>>({value: \"\", label: \"\"});\n\n  React.useEffect(() => {\n    if (baseIsMap) {\n      if (selectedBaseMap instanceof BaseMapLayerSettings && selectedBaseMap.provider) {\n        const mapName = getSelectKeyFromProvider(selectedBaseMap);\n        const foundItem = baseMapOptions.find((value) => value.value === mapName);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      } else if (selectedBaseMap instanceof BaseMapLayerSettings) {\n        // We got a custom base map\n\n        // First check if the name matches a label of existing base map.\n        // If it matches, we assume it's a legacy base map definition missing the provider information.\n        let foundItem = baseMapOptions.find((opt) => opt.value !== customBaseMapValue && opt.label === selectedBaseMap.name);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n\n        // Use custom base map entry\n        foundItem = baseMapOptions.find((opt) => opt.value === customBaseMapValue);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n\n      }\n    } else if (baseIsColor) {\n      setSelectedBaseMapValue(baseMapOptions[0]);\n      return;\n    }\n    setSelectedBaseMapValue({value: \"\", label: \"\"});\n  }, [baseIsColor, baseIsMap, baseMapOptions, selectedBaseMap]);\n\n  const handleBackgroundColorDialogOk = React.useCallback((bgColorDef: ColorDef) => {\n    UiFramework.dialogs.modal.close();\n    if (activeViewport) {\n      // change color and make sure previously set transparency is not lost.\n      const curTransparency = activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n      activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n\n      setSelectedBaseMap(bgColorDef);\n    }\n  }, [activeViewport]);\n\n  const handleBackgroundColorDialogCancel = React.useCallback(() => {\n    UiFramework.dialogs.modal.close();\n  }, []);\n\n  const handleBgColorClick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\n    e.preventDefault();\n    UiFramework.dialogs.modal.open(<ColorPickerDialog dialogTitle={colorDialogTitle} color={newColor} colorPresets={presetColors} colorInputType={\"rgb\"}\n      onOkResult={handleBackgroundColorDialogOk} onCancelResult={handleBackgroundColorDialogCancel} />);\n  }, [presetColors, handleBackgroundColorDialogOk]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleBaseMapSelection = React.useCallback((value: string) => {\n    if (activeViewport && value) {\n      if (value === customBaseMapValue && customBaseMap) {\n        activeViewport.displayStyle.backgroundMapBase = customBaseMap;\n      } else if (bases) {\n        const baseMap = bases.find((provider) => getSelectKeyFromProvider(provider) === value);\n        if (baseMap) {\n          const baseProps: MapLayerProps = baseMap.toJSON();\n          if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n            activeViewport.displayStyle.backgroundMapBase = activeViewport.displayStyle.backgroundMapBase.clone({...baseProps, visible: baseMapVisible});\n          } else {\n            activeViewport.displayStyle.backgroundMapBase = BaseMapLayerSettings.fromJSON({...baseProps, visible: baseMapVisible});\n          }\n        } else {\n          const bgColorDef = ColorDef.fromJSON(bgColor);\n          const curTransparency = activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n          activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n        }\n      }\n    }\n  }, [activeViewport, customBaseMap, bases, baseMapVisible, bgColor]);\n\n  const handleVisibilityChange = React.useCallback(() => {\n    if (activeViewport) {\n      const newState = !baseMapVisible;\n      // BaseMap visibility is only support when backgroundBase is an instance of BaseMapLayerSettings (i.e not a color)...\n      if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n        activeViewport.displayStyle.backgroundMapBase = activeViewport.displayStyle.backgroundMapBase.clone({ visible: newState });\n      }\n      setBaseMapVisible(newState);\n    }\n  }, [baseMapVisible, activeViewport]);\n\n  const [baseLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.BaseLayer\"));\n  const [selectBaseMapLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.SelectBaseMap\"));\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n\n  return (\n    <>\n      <span className=\"map-manager-base-label\">{baseLayerLabel}</span>\n      <div className=\"map-manager-base-item\" >\n        <Button className=\"map-manager-basemap-visibility map-manager-visibility-icon\" size=\"small\" styleType=\"borderless\" title={toggleVisibility} onClick={handleVisibilityChange} disabled={props.disabled || !activeViewport || !(activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings)}>\n          <WebFontIcon iconName={baseMapVisible ? \"icon-visibility\" : \"icon-visibility-hide-2\"} />\n        </Button>\n        <Select className=\"map-manager-base-item-select\"\n          options={baseMapOptions}\n          placeholder={selectBaseMapLabel}\n          value={selectedBaseMapValue.value}\n          onChange={handleBaseMapSelection} size=\"small\"\n          disabled={props.disabled}\n        />\n        {\n          baseIsColor &&\n          <ColorSwatch className=\"map-manager-base-item-color\" colorDef={ColorDef.fromJSON(bgColor)} round={false} onColorPick={handleBgColorClick} />\n        }\n        <TransparencyPopupButton disabled={props.disabled} transparency={baseMapTransparencyValue} onTransparencyChange={handleBasemapTransparencyChange} />\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"BasemapPanel.js","sourceRoot":"","sources":["../../../../src/ui/widget/BasemapPanel.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 *--------------------------------------------------------------------------------------------*/\n/* eslint-disable deprecation/deprecation */\n// cSpell:ignore droppable Sublayer Basemap\n\nimport \"./BasemapPanel.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { BackgroundMapType, BaseMapLayerSettings, ColorByName, ColorDef, ImageMapLayerSettings } from \"@itwin/core-common\";\nimport { WebFontIcon } from \"@itwin/core-react\";\nimport { ColorPickerDialog, ColorSwatch } from \"@itwin/imodel-components-react\";\nimport { Button, Select } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { useSourceMapContext } from \"./MapLayerManager\";\nimport { TransparencyPopupButton } from \"./TransparencyPopupButton\";\n\nimport type { BaseLayerSettings, MapImagerySettings, MapLayerProps } from \"@itwin/core-common\";\nimport type { Viewport } from \"@itwin/core-frontend\";\nimport type { SelectOption } from \"@itwin/itwinui-react\";\nconst customBaseMapValue = \"customBaseMap\";\nconst getSelectKeyFromProvider = (base: BaseMapLayerSettings) =>\n  `${base.provider ? `${base.provider.name}.${BackgroundMapType[base.provider.type]}` : `${base.name}`}`;\n\ninterface BasemapPanelProps {\n  disabled?: boolean;\n}\n\n/** @internal */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function BasemapPanel(props: BasemapPanelProps) {\n  const [useColorLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.ColorFill\"));\n  const { activeViewport, bases } = useSourceMapContext();\n  const [selectedBaseMap, setSelectedBaseMap] = React.useState<BaseLayerSettings | undefined>(() => {\n    return activeViewport?.displayStyle.settings.mapImagery.backgroundBase;\n  });\n  const [baseMapTransparencyValue, setBaseMapTransparencyValue] = React.useState(() => {\n    if (activeViewport) {\n      const mapImagery = activeViewport.displayStyle.settings.mapImagery;\n      if (mapImagery.backgroundBase instanceof ImageMapLayerSettings) {\n        return mapImagery.backgroundBase.transparency;\n      } else if (mapImagery.backgroundBase instanceof ColorDef) {\n        return mapImagery.backgroundBase.getAlpha() / 255;\n      } else {\n        return 0;\n      }\n    } else {\n      return 0;\n    }\n  });\n  const [customBaseMap, setCustomBaseMap] = React.useState<BaseMapLayerSettings | undefined>();\n  const [baseMapVisible, setBaseMapVisible] = React.useState(() => {\n    if (activeViewport && activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings) {\n      return activeViewport.displayStyle.backgroundMapBase.visible;\n    }\n    return false;\n  });\n\n  const getBaseMapOptions = React.useCallback(\n    (baseMap: BaseLayerSettings | undefined) => {\n      const baseOptions: SelectOption<string>[] = [];\n\n      baseOptions.push({ value: useColorLabel, label: useColorLabel });\n\n      if (bases) {\n        baseOptions.push(\n          ...bases.map((bgProvider) => {\n            const value = getSelectKeyFromProvider(bgProvider);\n            const label = MapLayersUI.translate(`WellKnownBaseMaps.${value}`);\n            return { value, label };\n          }),\n        );\n      }\n\n      // Add new custom base map definition (avoid adding duplicate entry)\n      if (baseMap instanceof BaseMapLayerSettings && !baseMap.provider) {\n        // Add new option only if not created duplicate (Support of base map definition without provider)\n        if (undefined === baseOptions.find((opt) => opt.label === baseMap.name)) {\n          baseOptions.push({ value: customBaseMapValue, label: baseMap.name });\n        }\n      } else if (customBaseMap) {\n        // Add previously defined custom map definition\n        baseOptions.push({ value: customBaseMapValue, label: customBaseMap.name });\n      }\n      return baseOptions;\n    },\n    [bases, customBaseMap, useColorLabel],\n  );\n\n  const [baseMapOptions, setBaseMapOptions] = React.useState<SelectOption<string>[]>(() => getBaseMapOptions(selectedBaseMap));\n\n  const updateBaseMapOptions = React.useCallback(\n    (baseMap: BaseLayerSettings | undefined) => {\n      setBaseMapOptions(getBaseMapOptions(baseMap));\n    },\n    [getBaseMapOptions],\n  );\n\n  const handleMapImageryChanged = React.useCallback(\n    (args: Readonly<MapImagerySettings>) => {\n      const baseMap = args.backgroundBase;\n\n      // Optimization:  If serialized 'backgroundBase' objects are identical, skip refresh\n      if (JSON.stringify(baseMap.toJSON()) === JSON.stringify(selectedBaseMap?.toJSON())) {\n        return;\n      }\n\n      setSelectedBaseMap(baseMap); // cache current base map objects\n      updateBaseMapOptions(baseMap);\n\n      if (baseMap instanceof ImageMapLayerSettings) {\n        if (baseMap.transparency !== baseMapTransparencyValue) {\n          setBaseMapTransparencyValue(baseMap.transparency);\n        }\n\n        if (baseMap.visible !== baseMapVisible) {\n          setBaseMapVisible(baseMap.visible);\n        }\n      } else if (baseMap instanceof ColorDef) {\n        if (baseMap.getAlpha() !== baseMapTransparencyValue) {\n          setBaseMapTransparencyValue(baseMap.getAlpha() / 255);\n        }\n      }\n    },\n    [baseMapTransparencyValue, baseMapVisible, selectedBaseMap, updateBaseMapOptions],\n  );\n\n  React.useEffect(() => {\n    const handleDisplayStyleChange = (vp: Viewport) => {\n      handleMapImageryChanged(vp.displayStyle.settings.mapImagery);\n    };\n    return activeViewport?.onDisplayStyleChanged.addListener(handleDisplayStyleChange);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor display style's onMapImageryChanged event\n  React.useEffect(() => {\n    return activeViewport?.displayStyle.settings.onMapImageryChanged.addListener(handleMapImageryChanged);\n  }, [activeViewport, handleMapImageryChanged]);\n\n  // Monitor viewport updates, and refresh the widget accordingly .\n  // Note: This is needed for multiple viewport applications.\n  React.useEffect(() => {\n    if (activeViewport) {\n      handleMapImageryChanged(activeViewport.displayStyle.settings.mapImagery);\n    }\n  }, [activeViewport, handleMapImageryChanged]);\n\n  const handleBasemapTransparencyChange = React.useCallback(\n    (transparency: number) => {\n      if (activeViewport) {\n        activeViewport.displayStyle.changeBaseMapTransparency(transparency);\n        setBaseMapTransparencyValue(transparency);\n      }\n    },\n    [activeViewport],\n  );\n\n  // This effect is only to keep a custom base map option when a 'default' base map is picked.\n  React.useEffect(() => {\n    if (\n      selectedBaseMap instanceof BaseMapLayerSettings &&\n      !selectedBaseMap.provider &&\n      undefined === baseMapOptions.find((opt) => opt.label === selectedBaseMap.name)\n    ) {\n      setCustomBaseMap(selectedBaseMap);\n    }\n  }, [baseMapOptions, selectedBaseMap]);\n\n  const [presetColors] = React.useState([\n    ColorDef.create(ColorByName.grey),\n    ColorDef.create(ColorByName.lightGrey),\n    ColorDef.create(ColorByName.darkGrey),\n    ColorDef.create(ColorByName.lightBlue),\n    ColorDef.create(ColorByName.lightGreen),\n    ColorDef.create(ColorByName.darkGreen),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.darkBrown),\n  ]);\n\n  const baseIsColor = React.useMemo(() => selectedBaseMap instanceof ColorDef, [selectedBaseMap]);\n  const baseIsMap = React.useMemo(() => !baseIsColor && selectedBaseMap !== undefined, [baseIsColor, selectedBaseMap]);\n  const bgColor = React.useMemo(\n    () => (baseIsColor ? (selectedBaseMap as ColorDef).toJSON() : presetColors[0].toJSON()),\n    [baseIsColor, selectedBaseMap, presetColors],\n  );\n  const [colorDialogTitle] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:ColorDialog.Title\"));\n  const [selectedBaseMapValue, setSelectedBaseMapValue] = React.useState<SelectOption<string>>({ value: \"\", label: \"\" });\n\n  React.useEffect(() => {\n    if (baseIsMap) {\n      if (selectedBaseMap instanceof BaseMapLayerSettings && selectedBaseMap.provider) {\n        const mapName = getSelectKeyFromProvider(selectedBaseMap);\n        const foundItem = baseMapOptions.find((value) => value.value === mapName);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      } else if (selectedBaseMap instanceof BaseMapLayerSettings) {\n        // We got a custom base map\n\n        // First check if the name matches a label of existing base map.\n        // If it matches, we assume it's a legacy base map definition missing the provider information.\n        let foundItem = baseMapOptions.find((opt) => opt.value !== customBaseMapValue && opt.label === selectedBaseMap.name);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n\n        // Use custom base map entry\n        foundItem = baseMapOptions.find((opt) => opt.value === customBaseMapValue);\n        if (foundItem) {\n          setSelectedBaseMapValue(foundItem);\n          return;\n        }\n      }\n    } else if (baseIsColor) {\n      setSelectedBaseMapValue(baseMapOptions[0]);\n      return;\n    }\n    setSelectedBaseMapValue({ value: \"\", label: \"\" });\n  }, [baseIsColor, baseIsMap, baseMapOptions, selectedBaseMap]);\n\n  const handleBackgroundColorDialogOk = React.useCallback(\n    (bgColorDef: ColorDef) => {\n      UiFramework.dialogs.modal.close();\n      if (activeViewport) {\n        // change color and make sure previously set transparency is not lost.\n        const curTransparency =\n          activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n        activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n\n        setSelectedBaseMap(bgColorDef);\n      }\n    },\n    [activeViewport],\n  );\n\n  const handleBackgroundColorDialogCancel = React.useCallback(() => {\n    UiFramework.dialogs.modal.close();\n  }, []);\n\n  const handleBgColorClick = React.useCallback(\n    (newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\n      e.preventDefault();\n      UiFramework.dialogs.modal.open(\n        <ColorPickerDialog\n          dialogTitle={colorDialogTitle}\n          color={newColor}\n          colorPresets={presetColors}\n          colorInputType={\"rgb\"}\n          onOkResult={handleBackgroundColorDialogOk}\n          onCancelResult={handleBackgroundColorDialogCancel}\n        />,\n      );\n    },\n    [colorDialogTitle, presetColors, handleBackgroundColorDialogOk, handleBackgroundColorDialogCancel],\n  ); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleBaseMapSelection = React.useCallback(\n    (value: string) => {\n      if (activeViewport && value) {\n        if (value === customBaseMapValue && customBaseMap) {\n          activeViewport.displayStyle.backgroundMapBase = customBaseMap;\n        } else if (bases) {\n          const baseMap = bases.find((provider) => getSelectKeyFromProvider(provider) === value);\n          if (baseMap) {\n            const baseProps: MapLayerProps = baseMap.toJSON();\n            if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n              activeViewport.displayStyle.backgroundMapBase = activeViewport.displayStyle.backgroundMapBase.clone({ ...baseProps, visible: baseMapVisible });\n            } else {\n              activeViewport.displayStyle.backgroundMapBase = BaseMapLayerSettings.fromJSON({ ...baseProps, visible: baseMapVisible });\n            }\n          } else {\n            const bgColorDef = ColorDef.fromJSON(bgColor);\n            const curTransparency =\n              activeViewport.displayStyle.backgroundMapBase instanceof ColorDef ? activeViewport.displayStyle.backgroundMapBase.getTransparency() : 0;\n            activeViewport.displayStyle.backgroundMapBase = bgColorDef.withTransparency(curTransparency);\n          }\n        }\n      }\n    },\n    [activeViewport, customBaseMap, bases, baseMapVisible, bgColor],\n  );\n\n  const handleVisibilityChange = React.useCallback(() => {\n    if (activeViewport) {\n      const newState = !baseMapVisible;\n      // BaseMap visibility is only support when backgroundBase is an instance of BaseMapLayerSettings (i.e not a color)...\n      if (activeViewport.displayStyle.backgroundMapBase instanceof BaseMapLayerSettings) {\n        activeViewport.displayStyle.backgroundMapBase = activeViewport.displayStyle.backgroundMapBase.clone({ visible: newState });\n      }\n      setBaseMapVisible(newState);\n    }\n  }, [baseMapVisible, activeViewport]);\n\n  const [baseLayerLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.BaseLayer\"));\n  const [selectBaseMapLabel] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Basemap.SelectBaseMap\"));\n  const [toggleVisibility] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:Widget.ToggleVisibility\"));\n\n  return (\n    <>\n      <span className=\"map-manager-base-label\">{baseLayerLabel}</span>\n      <div className=\"map-manager-base-item\">\n        <Button\n          className=\"map-manager-basemap-visibility map-manager-visibility-icon\"\n          size=\"small\"\n          styleType=\"borderless\"\n          title={toggleVisibility}\n          onClick={handleVisibilityChange}\n          disabled={props.disabled || !activeViewport || !(activeViewport.displayStyle.backgroundMapBase instanceof ImageMapLayerSettings)}\n        >\n          <WebFontIcon iconName={baseMapVisible ? \"icon-visibility\" : \"icon-visibility-hide-2\"} />\n        </Button>\n        <Select\n          className=\"map-manager-base-item-select\"\n          options={baseMapOptions}\n          placeholder={selectBaseMapLabel}\n          value={selectedBaseMapValue.value}\n          onChange={handleBaseMapSelection}\n          size=\"small\"\n          disabled={props.disabled}\n        />\n        {baseIsColor && (\n          <ColorSwatch className=\"map-manager-base-item-color\" colorDef={ColorDef.fromJSON(bgColor)} round={false} onColorPick={handleBgColorClick} />\n        )}\n        <TransparencyPopupButton disabled={props.disabled} transparency={baseMapTransparencyValue} onTransparencyChange={handleBasemapTransparencyChange} />\n      </div>\n    </>\n  );\n}\n"]}

package/lib/cjs/ui/widget/BasemapPanel.scss

@@ -23,7 +23,6 @@ $hovered-icon-color: $buic-foreground-primary;
     align-items: center;
     width: 100%;
     margin-top: 5px;
-
   }
 
   .map-manager-base-label {
@@ -41,9 +40,8 @@ $hovered-icon-color: $buic-foreground-primary;
       overflow: hidden;
     }
 
-
     .map-manager-base-item-select {
-      width: 100%;  // makes the Select control fill empty space on the right
+      width: 100%; // makes the Select control fill empty space on the right
     }
 
     button.map-manager-base-settings-button {
@@ -64,7 +62,7 @@ $hovered-icon-color: $buic-foreground-primary;
     }
 
     .map-manager-base-item-select {
-      height: 2.0em;
+      height: 2em;
       width: 100%;
       min-width: 100px;
       margin-right: 6px;

package/lib/cjs/ui/widget/ConfirmMessageDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommonProps } from "@itwin/core-react";
+import type { CommonProps } from "@itwin/core-react";
 import "./MapUrlDialog.scss";
 interface ConfirmMessageDialogProps extends CommonProps {
     /** Title to show in title bar of dialog */

package/lib/cjs/ui/widget/ConfirmMessageDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmMessageDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/ConfirmMessageDialog.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAU,MAAM,mBAAmB,CAAC;AAExD,OAAO,qBAAqB,CAAC;AAG7B,UAAU,yBAA0B,SAAQ,WAAW;IAErD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yJAAyJ;IACzJ,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yIAAyI;IACzI,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,0IAA0I;IAC1I,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAGD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eA2BpE"}
+{"version":3,"file":"ConfirmMessageDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/ConfirmMessageDialog.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,qBAAqB,CAAC;AAG7B,UAAU,yBAA0B,SAAQ,WAAW;IACrD,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yJAAyJ;IACzJ,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yIAAyI;IACzI,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,0IAA0I;IAC1I,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAGD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eA6BpE"}

package/lib/cjs/ui/widget/ConfirmMessageDialog.js

@@ -1,12 +1,36 @@
 "use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-// cSpell:ignore Modeless WMTS
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmMessageDialog = void 0;
-const React = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+// cSpell:ignore Modeless WMTS
+const React = __importStar(require("react"));
 const core_react_1 = require("@itwin/core-react");
 require("./MapUrlDialog.scss");
 const appui_abstract_1 = require("@itwin/appui-abstract");
@@ -16,8 +40,7 @@ function ConfirmMessageDialog(props) {
         { type: appui_abstract_1.DialogButtonType.Yes, onClick: props.onYesResult ?? (() => { }) },
         { type: appui_abstract_1.DialogButtonType.No, onClick: props.onNoResult ?? (() => { }) },
     ], [props.onYesResult, props.onNoResult]);
-    return (React.createElement(core_react_1.Dialog, { className: props.className, title: props.title, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: props.onClose, onEscape: props.onEscape, minHeight: props.minHeight, maxHeight: props.maxHeight, minWidth: props.minWidth, maxWidth: props.maxWidth, trapFocus: false },
-        React.createElement("div", null, props.message)));
+    return ((0, jsx_runtime_1.jsx)(core_react_1.Dialog, { className: props.className, title: props.title, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: props.onClose, onEscape: props.onEscape, minHeight: props.minHeight, maxHeight: props.maxHeight, minWidth: props.minWidth, maxWidth: props.maxWidth, trapFocus: false, children: (0, jsx_runtime_1.jsx)("div", { children: props.message }) }));
 }
 exports.ConfirmMessageDialog = ConfirmMessageDialog;
 //# sourceMappingURL=ConfirmMessageDialog.js.map

package/lib/cjs/ui/widget/ConfirmMessageDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmMessageDialog.js","sourceRoot":"","sources":["../../../../src/ui/widget/ConfirmMessageDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,8BAA8B;;;AAE9B,+BAA+B;AAC/B,kDAAwD;AAExD,+BAA6B;AAC7B,0DAAyD;AAoBzD,gEAAgE;AAChE,SAAgB,oBAAoB,CAAC,KAAgC;IAEnE,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE;QACzE,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,UAAU,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE;KACxE,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,oBAAC,mBAAM,IACL,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK;QAEhB,iCAAM,KAAK,CAAC,OAAO,CAAO,CACnB,CACV,CAAC;AACJ,CAAC;AA3BD,oDA2BC","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// cSpell:ignore Modeless WMTS\n\nimport * as React from \"react\";\nimport { CommonProps, Dialog } from \"@itwin/core-react\";\n\nimport \"./MapUrlDialog.scss\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\n\ninterface ConfirmMessageDialogProps extends CommonProps {\n\n  /** Title to show in title bar of dialog */\n  title?: string | JSX.Element;\n  message?: string | JSX.Element;\n  onYesResult?: () => void;\n  onNoResult?: () => void;\n  onClose?: () => void;\n  onEscape?: () => void;\n  minWidth?: string | number;\n  /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */\n  minHeight?: string | number;\n  /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  maxWidth?: string | number;\n  /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  maxHeight?: string | number;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function ConfirmMessageDialog(props: ConfirmMessageDialogProps) {\n\n  const buttonCluster = React.useMemo(() => [\n    { type: DialogButtonType.Yes, onClick: props.onYesResult ?? (() => { }) },\n    { type: DialogButtonType.No, onClick: props.onNoResult ?? (() => { }) },\n  ], [props.onYesResult, props.onNoResult]);\n\n  return (\n    <Dialog\n      className={props.className}\n      title={props.title}\n      opened={true}\n      resizable={false}\n      movable={true}\n      modal={true}\n      buttonCluster={buttonCluster}\n      onClose={props.onClose}\n      onEscape={props.onEscape}\n      minHeight={props.minHeight}\n      maxHeight={props.maxHeight}\n      minWidth={props.minWidth}\n      maxWidth={props.maxWidth}\n      trapFocus={false}\n    >\n      <div>{props.message}</div>\n    </Dialog>\n  );\n}\n"]}
+{"version":3,"file":"ConfirmMessageDialog.js","sourceRoot":"","sources":["../../../../src/ui/widget/ConfirmMessageDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;gGAGgG;AAChG,8BAA8B;AAE9B,6CAA+B;AAE/B,kDAA2C;AAE3C,+BAA6B;AAC7B,0DAAyD;AAmBzD,gEAAgE;AAChE,SAAgB,oBAAoB,CAAC,KAAgC;IACnE,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC;QACJ,EAAE,IAAI,EAAE,iCAAgB,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE;QACxE,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,UAAU,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAAE;KACvE,EACD,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CACtC,CAAC;IAEF,OAAO,CACL,uBAAC,mBAAM,IACL,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,KAAK,YAEhB,0CAAM,KAAK,CAAC,OAAO,GAAO,GACnB,CACV,CAAC;AACJ,CAAC;AA7BD,oDA6BC","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// cSpell:ignore Modeless WMTS\n\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Dialog } from \"@itwin/core-react\";\n\nimport \"./MapUrlDialog.scss\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\n\ninterface ConfirmMessageDialogProps extends CommonProps {\n  /** Title to show in title bar of dialog */\n  title?: string | JSX.Element;\n  message?: string | JSX.Element;\n  onYesResult?: () => void;\n  onNoResult?: () => void;\n  onClose?: () => void;\n  onEscape?: () => void;\n  minWidth?: string | number;\n  /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */\n  minHeight?: string | number;\n  /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  maxWidth?: string | number;\n  /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n  maxHeight?: string | number;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function ConfirmMessageDialog(props: ConfirmMessageDialogProps) {\n  const buttonCluster = React.useMemo(\n    () => [\n      { type: DialogButtonType.Yes, onClick: props.onYesResult ?? (() => {}) },\n      { type: DialogButtonType.No, onClick: props.onNoResult ?? (() => {}) },\n    ],\n    [props.onYesResult, props.onNoResult],\n  );\n\n  return (\n    <Dialog\n      className={props.className}\n      title={props.title}\n      opened={true}\n      resizable={false}\n      movable={true}\n      modal={true}\n      buttonCluster={buttonCluster}\n      onClose={props.onClose}\n      onEscape={props.onEscape}\n      minHeight={props.minHeight}\n      maxHeight={props.maxHeight}\n      minWidth={props.minWidth}\n      maxWidth={props.maxWidth}\n      trapFocus={false}\n    >\n      <div>{props.message}</div>\n    </Dialog>\n  );\n}\n"]}

package/lib/cjs/ui/widget/CustomParamEditDialog.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./CustomParamEditDialog.scss";
-import { CustomParamItem } from "../Interfaces";
+import type { CustomParamItem } from "../Interfaces";
 interface CustomParamEditDialogProps {
     item?: CustomParamItem;
     onOkResult?: (newItem: CustomParamItem, oldIem?: CustomParamItem) => void;

package/lib/cjs/ui/widget/CustomParamEditDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomParamEditDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamEditDialog.tsx"],"names":[],"mappings":";AAKA,OAAO,8BAA8B,CAAC;AAOtC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1E,cAAc,CAAC,EAAE,MAAM,IAAI,CAC1B;CACF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA8EtE"}
+{"version":3,"file":"CustomParamEditDialog.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamEditDialog.tsx"],"names":[],"mappings":";AAKA,OAAO,8BAA8B,CAAC;AAOtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,UAAU,0BAA0B;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1E,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA8FtE"}

package/lib/cjs/ui/widget/CustomParamEditDialog.js

@@ -1,12 +1,36 @@
 "use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomParamEditDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 require("./CustomParamEditDialog.scss");
-const React = require("react");
+const React = __importStar(require("react"));
 const appui_react_1 = require("@itwin/appui-react");
 const core_react_1 = require("@itwin/core-react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
@@ -14,7 +38,7 @@ const CustomParamsStorage_1 = require("../../CustomParamsStorage");
 const mapLayers_1 = require("../../mapLayers");
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function CustomParamEditDialog(props) {
-    const [originalItemName] = React.useState(() => props.item ? props.item.name : undefined);
+    const [originalItemName] = React.useState(() => (props.item ? props.item.name : undefined));
     const [item, setItem] = React.useState(() => props.item ?? { name: "", key: "", value: "", secret: true });
     const [cpStorage] = React.useState(() => new CustomParamsStorage_1.CustomParamsStorage());
     const handleCancel = React.useCallback(() => {
@@ -32,26 +56,16 @@ function CustomParamEditDialog(props) {
         appui_react_1.UiFramework.dialogs.modal.close();
     }, [item, props]);
     const nameAlreadyExists = React.useMemo(() => {
-        const itemExistInStorage = () => item.name ? !!cpStorage.get(item.name) : false;
+        const itemExistInStorage = () => (item.name ? !!cpStorage.get(item.name) : false);
         return originalItemName ? originalItemName !== item.name && itemExistInStorage() : itemExistInStorage();
     }, [cpStorage, item.name, originalItemName]);
     const readyToSave = React.useCallback(() => {
-        return ((item.name.trim().length > 0) && (item.key.trim().length > 0) && (item.value.trim().length > 0) && !nameAlreadyExists);
+        return item.name.trim().length > 0 && item.key.trim().length > 0 && item.value.trim().length > 0 && !nameAlreadyExists;
     }, [item.key, item.name, item.value, nameAlreadyExists]);
     function renderFooter() {
-        return (React.createElement("div", { className: "custom-param-edit-dialog-footer" },
-            React.createElement("div", { className: "custom-param-edit-dialog-footer-buttons" },
-                React.createElement(itwinui_react_1.Button, { className: "custom-param-edit-dialog-footer-button", styleType: 'high-visibility', onClick: handleOk, disabled: !readyToSave() }, props.item ? mapLayers_1.MapLayersUI.translate("Dialog.Edit") : mapLayers_1.MapLayersUI.translate("Dialog.Add")),
-                React.createElement(itwinui_react_1.Button, { className: "custom-param-edit-dialog-footer-button", styleType: 'default', onClick: handleCancel }, mapLayers_1.MapLayersUI.translate("Dialog.Cancel")))));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "custom-param-edit-dialog-footer", children: (0, jsx_runtime_1.jsxs)("div", { className: "custom-param-edit-dialog-footer-buttons", children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { className: "custom-param-edit-dialog-footer-button", styleType: "high-visibility", onClick: handleOk, disabled: !readyToSave(), children: props.item ? mapLayers_1.MapLayersUI.translate("Dialog.Edit") : mapLayers_1.MapLayersUI.translate("Dialog.Add") }), (0, jsx_runtime_1.jsx)(itwinui_react_1.Button, { className: "custom-param-edit-dialog-footer-button", styleType: "default", onClick: handleCancel, children: mapLayers_1.MapLayersUI.translate("Dialog.Cancel") })] }) }));
     }
-    return (React.createElement(core_react_1.Dialog, { title: mapLayers_1.MapLayersUI.translate(props.item ? "CustomParamEditDialog.DialogTitleEdit" : "CustomParamEditDialog.DialogTitleAdd"), opened: true, resizable: true, movable: true, modal: true, onClose: handleCancel, onEscape: handleCancel, minHeight: 120, maxWidth: 120, trapFocus: false },
-        React.createElement(React.Fragment, null,
-            React.createElement(itwinui_react_1.LabeledInput, { className: "custom-param-edit-dialog-input", label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamNameLabel"), value: item.name, onChange: (event) => setItem({ ...item, name: event.target.value }), status: nameAlreadyExists ? "warning" : undefined, message: nameAlreadyExists ? mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.NameExists") : undefined }),
-            React.createElement(itwinui_react_1.LabeledInput, { className: "custom-param-edit-dialog-input", label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamKeyLabel"), value: item.key, onChange: (event) => setItem({ ...item, key: event.target.value }) }),
-            React.createElement(itwinui_react_1.LabeledInput, { className: "custom-param-edit-dialog-input", label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamValueLabel"), type: item.secret ? "password" : "", value: item.value, onChange: (event) => setItem({ ...item, value: event.target.value }), message: !item.secret ? mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamValueNonPrivateMessage") : undefined }),
-            React.createElement("div", { className: "custom-param-edit-dialog-secret custom-param-edit-dialog-input", title: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.PrivateToggleTooltip") },
-                React.createElement(itwinui_react_1.ToggleSwitch, { checked: item.secret, label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.PrivateToggleLabel"), onChange: (event) => setItem({ ...item, secret: event.target.checked }) })),
-            renderFooter())));
+    return ((0, jsx_runtime_1.jsx)(core_react_1.Dialog, { title: mapLayers_1.MapLayersUI.translate(props.item ? "CustomParamEditDialog.DialogTitleEdit" : "CustomParamEditDialog.DialogTitleAdd"), opened: true, resizable: true, movable: true, modal: true, onClose: handleCancel, onEscape: handleCancel, minHeight: 120, maxWidth: 120, trapFocus: false, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.LabeledInput, { className: "custom-param-edit-dialog-input", label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamNameLabel"), value: item.name, onChange: (event) => setItem({ ...item, name: event.target.value }), status: nameAlreadyExists ? "warning" : undefined, message: nameAlreadyExists ? mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.NameExists") : undefined }), (0, jsx_runtime_1.jsx)(itwinui_react_1.LabeledInput, { className: "custom-param-edit-dialog-input", label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamKeyLabel"), value: item.key, onChange: (event) => setItem({ ...item, key: event.target.value }) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.LabeledInput, { className: "custom-param-edit-dialog-input", label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamValueLabel"), type: item.secret ? "password" : "", value: item.value, onChange: (event) => setItem({ ...item, value: event.target.value }), message: !item.secret ? mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.ParamValueNonPrivateMessage") : undefined }), (0, jsx_runtime_1.jsx)("div", { className: "custom-param-edit-dialog-secret custom-param-edit-dialog-input", title: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.PrivateToggleTooltip"), children: (0, jsx_runtime_1.jsx)(itwinui_react_1.ToggleSwitch, { checked: item.secret, label: mapLayers_1.MapLayersUI.translate("CustomParamEditDialog.PrivateToggleLabel"), onChange: (event) => setItem({ ...item, secret: event.target.checked }) }) }), renderFooter()] }) }));
 }
 exports.CustomParamEditDialog = CustomParamEditDialog;
 //# sourceMappingURL=CustomParamEditDialog.js.map

package/lib/cjs/ui/widget/CustomParamEditDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomParamEditDialog.js","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamEditDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;;;AAE/F,wCAAsC;AACtC,+BAA+B;AAC/B,oDAAiD;AACjD,kDAA2C;AAC3C,wDAA0E;AAC1E,mEAAgE;AAChE,+CAA8C;AAS9C,gEAAgE;AAChE,SAAgB,qBAAqB,CAAC,KAAiC;IACrE,MAAM,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAmB,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC5G,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAkB,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,EAAC,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC,CAAC;IAC1H,MAAM,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,yCAAmB,EAAE,CAAC,CAAC;IAEpE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,KAAK,CAAC,cAAc,EAAE;YACxB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACR;QACD,yBAAW,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;YACnC,OAAO;SACR;QACD,yBAAW,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAU,GAAG,EAAE;QACpD,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAChF,OAAO,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,KAAK,IAAI,CAAC,IAAI,IAAI,kBAAkB,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC1G,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,IAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAG,CAAC;IACpI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEzD,SAAS,YAAY;QAEnB,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;YAC9C,6BAAK,SAAS,EAAC,yCAAyC;gBACtD,oBAAC,sBAAM,IACL,SAAS,EAAC,wCAAwC,EAClD,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,CAAC,WAAW,EAAE,IAEvB,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAW,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,uBAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CACjF;gBACT,oBAAC,sBAAM,IACL,SAAS,EAAC,wCAAwC,EAClD,SAAS,EAAC,SAAS,EACnB,OAAO,EAAE,YAAY,IAEpB,uBAAW,CAAC,SAAS,CAAC,eAAe,CAAC,CAChC,CACL,CACF,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,oBAAC,mBAAM,IACL,KAAK,EAAE,uBAAW,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,uCAAuC,CAAA,CAAC,CAAC,sCAAsC,CAAC,EAC1H,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG,EACb,SAAS,EAAE,KAAK;QAEhB;YACE,oBAAC,4BAAY,IAAC,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,uBAAW,CAAC,SAAS,CAAC,sCAAsC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAC,EAAE,CAAA,OAAO,CAAC,EAAC,GAAG,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,EAAE,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,uBAAW,CAAC,SAAS,CAAC,kCAAkC,CAAC,CAAA,CAAC,CAAC,SAAS,GAAG;YACzW,oBAAC,4BAAY,IAAC,SAAS,EAAC,gCAAgC,EAAC,KAAK,EAAE,uBAAW,CAAC,SAAS,CAAC,qCAAqC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAC,EAAE,CAAA,OAAO,CAAC,EAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,GAAK;YAClN,oBAAC,4BAAY,IAAC,SAAS,EAAC,gCAAgC,EAAA,KAAK,EAAE,uBAAW,CAAC,SAAS,CAAC,uCAAuC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAC,EAAE,CAAA,OAAO,CAAC,EAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,EAAG,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,uBAAW,CAAC,SAAS,CAAC,mDAAmD,CAAC,CAAA,CAAC,CAAC,SAAS,GAAG;YAC1W,6BAAK,SAAS,EAAC,gEAAgE,EAAC,KAAK,EAAE,uBAAW,CAAC,SAAS,CAAC,4CAA4C,CAAC;gBACxJ,oBAAC,4BAAY,IAAC,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,uBAAW,CAAC,SAAS,CAAC,0CAA0C,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAC,EAAE,CAAA,OAAO,CAAC,EAAC,GAAG,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAC,CAAC,GAAI,CACjL;YACL,YAAY,EAAE,CACd,CACI,CACV,CAAC;AACJ,CAAC;AA9ED,sDA8EC","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 \"./CustomParamEditDialog.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { Button, LabeledInput, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { CustomParamItem } from \"../Interfaces\";\n\ninterface CustomParamEditDialogProps {\n  item?: CustomParamItem;\n  onOkResult?: (newItem: CustomParamItem, oldIem?: CustomParamItem) => void;\n  onCancelResult?: () => void\n  ;\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function CustomParamEditDialog(props: CustomParamEditDialogProps) {\n  const [originalItemName] = React.useState<string|undefined>(() => props.item ? props.item.name : undefined);\n  const [item, setItem] = React.useState<CustomParamItem>(() => props.item ?? {name: \"\", key: \"\", value: \"\", secret: true});\n  const [cpStorage] = React.useState(() => new CustomParamsStorage());\n\n  const handleCancel = React.useCallback(() => {\n    if (props.onCancelResult) {\n      props.onCancelResult();\n      return;\n    }\n    UiFramework.dialogs.modal.close();\n  }, [props]);\n\n  const handleOk = React.useCallback(() => {\n    if (props.onOkResult) {\n      props.onOkResult(item, props.item);\n      return;\n    }\n    UiFramework.dialogs.modal.close();\n  }, [item, props]);\n\n  const nameAlreadyExists = React.useMemo<boolean>(() => {\n    const itemExistInStorage = () => item.name ? !!cpStorage.get(item.name) : false;\n    return originalItemName ? originalItemName !== item.name && itemExistInStorage() : itemExistInStorage();\n  }, [cpStorage, item.name, originalItemName]);\n\n  const readyToSave = React.useCallback(() => {\n    return ((item.name.trim().length > 0) && (item.key.trim().length > 0)  && (item.value.trim().length > 0) && !nameAlreadyExists  );\n  }, [item.key, item.name, item.value, nameAlreadyExists]);\n\n  function renderFooter() {\n\n    return (\n      <div className=\"custom-param-edit-dialog-footer\">\n        <div className=\"custom-param-edit-dialog-footer-buttons\">\n          <Button\n            className=\"custom-param-edit-dialog-footer-button\"\n            styleType='high-visibility'\n            onClick={handleOk}\n            disabled={!readyToSave()}\n          >\n            {props.item ? MapLayersUI.translate(\"Dialog.Edit\") : MapLayersUI.translate(\"Dialog.Add\")}\n          </Button>\n          <Button\n            className=\"custom-param-edit-dialog-footer-button\"\n            styleType='default'\n            onClick={handleCancel}\n          >\n            {MapLayersUI.translate(\"Dialog.Cancel\")}\n          </Button>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <Dialog\n      title={MapLayersUI.translate(props.item ? \"CustomParamEditDialog.DialogTitleEdit\": \"CustomParamEditDialog.DialogTitleAdd\")}\n      opened={true}\n      resizable={true}\n      movable={true}\n      modal={true}\n      onClose={handleCancel}\n      onEscape={handleCancel}\n      minHeight={120}\n      maxWidth={120}\n      trapFocus={false}\n    >\n      <>\n        <LabeledInput className=\"custom-param-edit-dialog-input\" label={MapLayersUI.translate(\"CustomParamEditDialog.ParamNameLabel\")} value={item.name} onChange={(event)=>setItem({...item, name: event.target.value})} status={nameAlreadyExists ? \"warning\" : undefined} message={nameAlreadyExists ? MapLayersUI.translate(\"CustomParamEditDialog.NameExists\"): undefined}/>\n        <LabeledInput className=\"custom-param-edit-dialog-input\" label={MapLayersUI.translate(\"CustomParamEditDialog.ParamKeyLabel\")} value={item.key} onChange={(event)=>setItem({...item, key: event.target.value})}  />\n        <LabeledInput className=\"custom-param-edit-dialog-input\"label={MapLayersUI.translate(\"CustomParamEditDialog.ParamValueLabel\")} type={item.secret ? \"password\" : \"\"} value={item.value} onChange={(event)=>setItem({...item, value: event.target.value}) } message={!item.secret ? MapLayersUI.translate(\"CustomParamEditDialog.ParamValueNonPrivateMessage\"): undefined}/>\n        <div className=\"custom-param-edit-dialog-secret custom-param-edit-dialog-input\" title={MapLayersUI.translate(\"CustomParamEditDialog.PrivateToggleTooltip\")}>\n          <ToggleSwitch checked={item.secret} label={MapLayersUI.translate(\"CustomParamEditDialog.PrivateToggleLabel\")} onChange={(event)=>setItem({...item, secret: event.target.checked})} />\n        </div>\n        {renderFooter()}\n      </>\n    </Dialog>\n  );\n}\n"]}
+{"version":3,"file":"CustomParamEditDialog.js","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamEditDialog.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 *--------------------------------------------------------------------------------------------*/\n\nimport \"./CustomParamEditDialog.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { Button, LabeledInput, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport type { CustomParamItem } from \"../Interfaces\";\n\ninterface CustomParamEditDialogProps {\n  item?: CustomParamItem;\n  onOkResult?: (newItem: CustomParamItem, oldIem?: CustomParamItem) => void;\n  onCancelResult?: () => void;\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function CustomParamEditDialog(props: CustomParamEditDialogProps) {\n  const [originalItemName] = React.useState<string | undefined>(() => (props.item ? props.item.name : undefined));\n  const [item, setItem] = React.useState<CustomParamItem>(() => props.item ?? { name: \"\", key: \"\", value: \"\", secret: true });\n  const [cpStorage] = React.useState(() => new CustomParamsStorage());\n\n  const handleCancel = React.useCallback(() => {\n    if (props.onCancelResult) {\n      props.onCancelResult();\n      return;\n    }\n    UiFramework.dialogs.modal.close();\n  }, [props]);\n\n  const handleOk = React.useCallback(() => {\n    if (props.onOkResult) {\n      props.onOkResult(item, props.item);\n      return;\n    }\n    UiFramework.dialogs.modal.close();\n  }, [item, props]);\n\n  const nameAlreadyExists = React.useMemo<boolean>(() => {\n    const itemExistInStorage = () => (item.name ? !!cpStorage.get(item.name) : false);\n    return originalItemName ? originalItemName !== item.name && itemExistInStorage() : itemExistInStorage();\n  }, [cpStorage, item.name, originalItemName]);\n\n  const readyToSave = React.useCallback(() => {\n    return item.name.trim().length > 0 && item.key.trim().length > 0 && item.value.trim().length > 0 && !nameAlreadyExists;\n  }, [item.key, item.name, item.value, nameAlreadyExists]);\n\n  function renderFooter() {\n    return (\n      <div className=\"custom-param-edit-dialog-footer\">\n        <div className=\"custom-param-edit-dialog-footer-buttons\">\n          <Button className=\"custom-param-edit-dialog-footer-button\" styleType=\"high-visibility\" onClick={handleOk} disabled={!readyToSave()}>\n            {props.item ? MapLayersUI.translate(\"Dialog.Edit\") : MapLayersUI.translate(\"Dialog.Add\")}\n          </Button>\n          <Button className=\"custom-param-edit-dialog-footer-button\" styleType=\"default\" onClick={handleCancel}>\n            {MapLayersUI.translate(\"Dialog.Cancel\")}\n          </Button>\n        </div>\n      </div>\n    );\n  }\n  return (\n    <Dialog\n      title={MapLayersUI.translate(props.item ? \"CustomParamEditDialog.DialogTitleEdit\" : \"CustomParamEditDialog.DialogTitleAdd\")}\n      opened={true}\n      resizable={true}\n      movable={true}\n      modal={true}\n      onClose={handleCancel}\n      onEscape={handleCancel}\n      minHeight={120}\n      maxWidth={120}\n      trapFocus={false}\n    >\n      <>\n        <LabeledInput\n          className=\"custom-param-edit-dialog-input\"\n          label={MapLayersUI.translate(\"CustomParamEditDialog.ParamNameLabel\")}\n          value={item.name}\n          onChange={(event) => setItem({ ...item, name: event.target.value })}\n          status={nameAlreadyExists ? \"warning\" : undefined}\n          message={nameAlreadyExists ? MapLayersUI.translate(\"CustomParamEditDialog.NameExists\") : undefined}\n        />\n        <LabeledInput\n          className=\"custom-param-edit-dialog-input\"\n          label={MapLayersUI.translate(\"CustomParamEditDialog.ParamKeyLabel\")}\n          value={item.key}\n          onChange={(event) => setItem({ ...item, key: event.target.value })}\n        />\n        <LabeledInput\n          className=\"custom-param-edit-dialog-input\"\n          label={MapLayersUI.translate(\"CustomParamEditDialog.ParamValueLabel\")}\n          type={item.secret ? \"password\" : \"\"}\n          value={item.value}\n          onChange={(event) => setItem({ ...item, value: event.target.value })}\n          message={!item.secret ? MapLayersUI.translate(\"CustomParamEditDialog.ParamValueNonPrivateMessage\") : undefined}\n        />\n        <div\n          className=\"custom-param-edit-dialog-secret custom-param-edit-dialog-input\"\n          title={MapLayersUI.translate(\"CustomParamEditDialog.PrivateToggleTooltip\")}\n        >\n          <ToggleSwitch\n            checked={item.secret}\n            label={MapLayersUI.translate(\"CustomParamEditDialog.PrivateToggleLabel\")}\n            onChange={(event) => setItem({ ...item, secret: event.target.checked })}\n          />\n        </div>\n        {renderFooter()}\n      </>\n    </Dialog>\n  );\n}\n"]}

package/lib/cjs/ui/widget/CustomParamEditDialog.scss

@@ -3,7 +3,6 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 
-
 .custom-param-edit-dialog-secret {
   margin-top: 10px;
 }
@@ -23,4 +22,4 @@
 
 .custom-param-edit-dialog-input {
   margin-bottom: 5px;
-}
+}

package/lib/cjs/ui/widget/CustomParamsSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomParamsSettings.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamsSettings.tsx"],"names":[],"mappings":";AAKA,OAAO,6BAA6B,CAAC;AAiBrC,wBAAgB,yBAAyB,gBAuJxC"}
+{"version":3,"file":"CustomParamsSettings.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamsSettings.tsx"],"names":[],"mappings":";AAKA,OAAO,6BAA6B,CAAC;AAkBrC,wBAAgB,yBAAyB,gBAuKxC"}

package/lib/cjs/ui/widget/CustomParamsSettings.js

@@ -1,12 +1,36 @@
 "use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomParamsSettingsPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 require("./CustomParamsSettings.scss");
-const React = require("react");
+const React = __importStar(require("react"));
 const appui_react_1 = require("@itwin/appui-react");
 const core_react_1 = require("@itwin/core-react");
 const itwinui_icons_color_react_1 = require("@itwin/itwinui-icons-color-react");
@@ -24,8 +48,9 @@ function CustomParamsSettingsPanel() {
         const paramsMap = {};
         const paramsList = storage.get(undefined);
         if (Array.isArray(paramsList)) {
-            for (const param of paramsList)
+            for (const param of paramsList) {
                 paramsMap[param.name] = param;
+            }
         }
         return paramsMap;
     });
@@ -83,34 +108,24 @@ function CustomParamsSettingsPanel() {
         setSelectedValue(undefined); // clear listbox focus
     }, [mappingStorage, params, storage]);
     const handleAddClick = React.useCallback(() => {
-        appui_react_1.UiFramework.dialogs.modal.open(React.createElement(CustomParamEditDialog_1.CustomParamEditDialog, { onOkResult: onOkEdit, onCancelResult: onCancelEdit }));
+        appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(CustomParamEditDialog_1.CustomParamEditDialog, { onOkResult: onOkEdit, onCancelResult: onCancelEdit }));
         return;
     }, [onCancelEdit, onOkEdit]);
     const onListboxValueChange = React.useCallback((newValue, _isControlOrCommandPressed) => {
         const item = params[newValue];
-        if (item)
-            appui_react_1.UiFramework.dialogs.modal.open(React.createElement(CustomParamEditDialog_1.CustomParamEditDialog, { item: item, onOkResult: onOkEdit, onCancelResult: onCancelEdit }));
+        if (item) {
+            appui_react_1.UiFramework.dialogs.modal.open((0, jsx_runtime_1.jsx)(CustomParamEditDialog_1.CustomParamEditDialog, { item: item, onOkResult: onOkEdit, onCancelResult: onCancelEdit }));
+        }
         setSelectedValue(newValue);
         return;
     }, [params, onCancelEdit, onOkEdit]);
-    return (React.createElement("div", { className: "customParamsSettings-container" },
-        React.createElement("div", { className: "customParamsSettings-header" },
-            React.createElement("span", { className: "customParamsSettings-header-label" },
-                mapLayers_1.MapLayersUI.translate("CustomParamSettings.SectionLabel"),
-                React.createElement("div", { title: mapLayers_1.MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "customParamsSettings-previewBadge" },
-                    React.createElement(itwinui_react_1.Icon, { size: "small" },
-                        React.createElement(itwinui_icons_color_react_1.SvgTechnicalPreviewMini, null)))),
-            React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "customParamsSettings-header-add-button", onClick: handleAddClick },
-                React.createElement(itwinui_icons_react_1.SvgAdd, null))),
-        React.createElement("div", { className: "customParamsSettings-content" },
-            React.createElement(core_react_1.Listbox, { selectedValue: selectedValue, onListboxValueChange: onListboxValueChange, className: "customParamsSettings-content-listbox" }, Object.keys(params).map((keyName) => React.createElement(core_react_1.ListboxItem, { key: keyName, className: "customParamsSettings-content-entry", value: keyName, onMouseEnter: () => setListItemUnderCursor(keyName), onMouseLeave: () => setListItemUnderCursor(undefined) },
-                React.createElement("span", { className: "customParamsSettings-content-entry-name", title: keyName }, keyName),
-                (listItemUnderCursor && listItemUnderCursor === keyName) &&
-                    React.createElement(React.Fragment, null,
-                        React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: mapLayers_1.MapLayersUI.translate("CustomParamSettings.EditButtonTitle") },
-                            React.createElement(itwinui_icons_react_1.SvgEdit, null)),
-                        React.createElement(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "customParamsSettings-content-entry-button", title: mapLayers_1.MapLayersUI.translate("CustomParamSettings.DeleteButtonTitle"), onClick: (event) => { onItemRemoveButtonClicked(keyName, event); } },
-                            React.createElement(itwinui_icons_react_1.SvgDelete, null)))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "customParamsSettings-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "customParamsSettings-header", children: [(0, jsx_runtime_1.jsxs)("span", { className: "customParamsSettings-header-label", children: [mapLayers_1.MapLayersUI.translate("CustomParamSettings.SectionLabel"), (0, jsx_runtime_1.jsx)("div", { title: mapLayers_1.MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "customParamsSettings-previewBadge", children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Icon, { size: "small", children: (0, jsx_runtime_1.jsx)(itwinui_icons_color_react_1.SvgTechnicalPreviewMini, {}) }) })] }), (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "customParamsSettings-header-add-button", onClick: handleAddClick, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgAdd, {}) })] }), (0, jsx_runtime_1.jsx)("div", { className: "customParamsSettings-content", children: (0, jsx_runtime_1.jsx)(core_react_1.Listbox, { selectedValue: selectedValue, onListboxValueChange: onListboxValueChange, className: "customParamsSettings-content-listbox", children: Object.keys(params).map((keyName) => (
+                    // eslint-disable-next-line @itwin/no-internal
+                    (0, jsx_runtime_1.jsxs)(core_react_1.ListboxItem, { className: "customParamsSettings-content-entry", value: keyName, onMouseEnter: () => setListItemUnderCursor(keyName), onMouseLeave: () => setListItemUnderCursor(undefined), children: [(0, jsx_runtime_1.jsx)("span", { className: "customParamsSettings-content-entry-name", title: keyName, children: keyName }), 
+                            // Display the delete icon only when the mouse over a specific item otherwise list feels cluttered.
+                            listItemUnderCursor && listItemUnderCursor === keyName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "map-source-list-entry-button", title: mapLayers_1.MapLayersUI.translate("CustomParamSettings.EditButtonTitle"), children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgEdit, {}) }), (0, jsx_runtime_1.jsx)(itwinui_react_1.IconButton, { size: "small", styleType: "borderless", className: "customParamsSettings-content-entry-button", title: mapLayers_1.MapLayersUI.translate("CustomParamSettings.DeleteButtonTitle"), onClick: (event) => {
+                                            onItemRemoveButtonClicked(keyName, event);
+                                        }, children: (0, jsx_runtime_1.jsx)(itwinui_icons_react_1.SvgDelete, {}) })] }))] }, keyName))) }) })] }));
 }
 exports.CustomParamsSettingsPanel = CustomParamsSettingsPanel;
 //# sourceMappingURL=CustomParamsSettings.js.map

package/lib/cjs/ui/widget/CustomParamsSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomParamsSettings.js","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamsSettings.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*--------------------------------------------------------------------------------------------*/\n\nimport \"./CustomParamsSettings.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { Listbox, ListboxItem, ListboxValue } from \"@itwin/core-react\";\nimport { SvgTechnicalPreviewMini } from \"@itwin/itwinui-icons-color-react\";\nimport { SvgAdd, SvgDelete, SvgEdit } from \"@itwin/itwinui-icons-react\";\nimport { Icon, IconButton } from \"@itwin/itwinui-react\";\nimport { CustomParamsMappingStorage } from \"../../CustomParamsMappingStorage\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { CustomParamItem } from \"../Interfaces\";\nimport { CustomParamEditDialog } from \"./CustomParamEditDialog\";\n\ninterface CustomParamsMap {\n  [paramName: string]: CustomParamItem;\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function CustomParamsSettingsPanel() {\n\n  const [storage] = React.useState(() => new CustomParamsStorage());\n  const [mappingStorage] = React.useState(() => new CustomParamsMappingStorage());\n\n  const [params, setParams] = React.useState<CustomParamsMap>(() => {\n    const paramsMap: CustomParamsMap ={};\n    const paramsList = storage.get(undefined);\n    if (Array.isArray(paramsList)) {\n      for (const param of paramsList)\n        paramsMap[param.name] = param;\n    }\n    return paramsMap;\n  });\n\n  const [listItemUnderCursor, setListItemUnderCursor] = React.useState<string | undefined>();\n  const [selectedValue, setSelectedValue] = React.useState<string | undefined>();\n\n  const deleteMapping = React.useCallback((name: string) => {\n    const tmpParams = {...params};\n    delete tmpParams[name];\n    setParams(tmpParams);\n    storage.delete(name);\n\n    // Cascade delete to api key mapping\n    const mappingContent = mappingStorage.getContent();\n    if (mappingContent) {\n      for (const itemKey of Object.keys(mappingContent)) {\n        if (mappingContent[itemKey].customParamNames.includes(name)) {\n          const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== name);\n          newParamNames.length > 0 ?  mappingStorage.save(itemKey, {customParamNames: newParamNames}) : mappingStorage.delete(itemKey);\n        }\n      }\n    }\n  }, [mappingStorage, params, storage]);\n\n  /*\n   Handle Remove layer button clicked\n   */\n  const onItemRemoveButtonClicked = React.useCallback((name: string, event) => {\n    event.stopPropagation();  // We don't want the owning ListBox to react on mouse click.\n    deleteMapping(name);\n  }, [deleteMapping]);\n\n  const onCancelEdit = React.useCallback(() => {\n    UiFramework.dialogs.modal.close();\n    setSelectedValue(undefined); // clear listbox focus\n  }, []);\n\n  const onOkEdit = React.useCallback((newItem: CustomParamItem, oldItem?: CustomParamItem) => {\n\n    UiFramework.dialogs.modal.close();\n\n    // If the edited item has a new name, delete the entry first.\n    const tmpParams = {...params};\n    if (oldItem && oldItem.name !== newItem.name) {\n      delete tmpParams[oldItem.name];\n      setParams(tmpParams);\n      storage.delete(oldItem.name);\n\n      const mappingContent = mappingStorage.getContent();\n      if (mappingContent) {\n        for (const itemKey of Object.keys(mappingContent)) {\n          if (mappingContent[itemKey].customParamNames.includes(oldItem.name )) {\n            const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== oldItem.name);\n            newParamNames.push(newItem.name);\n            mappingStorage.save(itemKey, {customParamNames: newParamNames});\n          }\n        }\n      }\n    }\n    storage.save(newItem.name, newItem);\n\n    tmpParams[newItem.name] = newItem;\n    setParams(tmpParams);\n    setSelectedValue(undefined); // clear listbox focus\n  }, [mappingStorage, params, storage]);\n\n  const handleAddClick = React.useCallback(() => {\n    UiFramework.dialogs.modal.open(\n      <CustomParamEditDialog\n        onOkResult={onOkEdit}\n        onCancelResult={onCancelEdit}\n      />);\n    return;\n  }, [onCancelEdit, onOkEdit]);\n\n  const onListboxValueChange = React.useCallback((newValue: ListboxValue, _isControlOrCommandPressed?: boolean)=> {\n    const item = params[newValue];\n    if (item)\n      UiFramework.dialogs.modal.open(<CustomParamEditDialog item={item} onOkResult={onOkEdit} onCancelResult={onCancelEdit}/>);\n\n    setSelectedValue(newValue);\n    return;\n  }, [params, onCancelEdit, onOkEdit]);\n\n  return (\n    <div className=\"customParamsSettings-container\">\n      <div className=\"customParamsSettings-header\">\n        <span className=\"customParamsSettings-header-label\">\n          {MapLayersUI.translate(\"CustomParamSettings.SectionLabel\")}\n          <div title={MapLayersUI.translate(\"Labels.TechPreviewBadgeTooltip\")} className=\"customParamsSettings-previewBadge\">\n            <Icon size=\"small\"><SvgTechnicalPreviewMini /></Icon>\n          </div>\n        </span>\n\n        <IconButton size=\"small\" styleType=\"borderless\" className=\"customParamsSettings-header-add-button\" onClick={handleAddClick}>\n          <SvgAdd/>\n        </IconButton>\n      </div>\n      <div className=\"customParamsSettings-content\">\n        <Listbox\n          selectedValue={selectedValue}\n          onListboxValueChange={onListboxValueChange}\n          className=\"customParamsSettings-content-listbox\" >\n          {\n            Object.keys(params).map((keyName) =>\n              <ListboxItem\n                key={keyName}\n                className=\"customParamsSettings-content-entry\"\n                value={keyName}\n                onMouseEnter={() => setListItemUnderCursor(keyName)}\n                onMouseLeave={() => setListItemUnderCursor(undefined)}\n              >\n                <span className=\"customParamsSettings-content-entry-name\" title={keyName}>{keyName}</span>\n                { // Display the delete icon only when the mouse over a specific item otherwise list feels cluttered.\n                  (listItemUnderCursor && listItemUnderCursor === keyName) &&\n                  <>\n                    <IconButton\n                      size=\"small\"\n                      styleType=\"borderless\"\n                      className=\"map-source-list-entry-button\"\n                      title={MapLayersUI.translate(\"CustomParamSettings.EditButtonTitle\")}>\n                      <SvgEdit/>\n                    </IconButton>\n                    <IconButton\n                      size=\"small\"\n                      styleType=\"borderless\"\n                      className=\"customParamsSettings-content-entry-button\"\n                      title={MapLayersUI.translate(\"CustomParamSettings.DeleteButtonTitle\")}\n                      onClick={(event) => {onItemRemoveButtonClicked(keyName, event);}}>\n                      <SvgDelete/>\n                    </IconButton>\n                  </>}\n              </ListboxItem>\n            )\n          }\n        </Listbox>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"CustomParamsSettings.js","sourceRoot":"","sources":["../../../../src/ui/widget/CustomParamsSettings.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 *--------------------------------------------------------------------------------------------*/\n\nimport \"./CustomParamsSettings.scss\";\nimport * as React from \"react\";\nimport { UiFramework } from \"@itwin/appui-react\";\nimport { Listbox, ListboxItem } from \"@itwin/core-react\";\nimport { SvgTechnicalPreviewMini } from \"@itwin/itwinui-icons-color-react\";\nimport { SvgAdd, SvgDelete, SvgEdit } from \"@itwin/itwinui-icons-react\";\nimport { Icon, IconButton } from \"@itwin/itwinui-react\";\nimport { CustomParamsMappingStorage } from \"../../CustomParamsMappingStorage\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { CustomParamEditDialog } from \"./CustomParamEditDialog\";\n\nimport type { ListboxValue } from \"@itwin/core-react\";\nimport type { CustomParamItem } from \"../Interfaces\";\ninterface CustomParamsMap {\n  [paramName: string]: CustomParamItem;\n}\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function CustomParamsSettingsPanel() {\n  const [storage] = React.useState(() => new CustomParamsStorage());\n  const [mappingStorage] = React.useState(() => new CustomParamsMappingStorage());\n\n  const [params, setParams] = React.useState<CustomParamsMap>(() => {\n    const paramsMap: CustomParamsMap = {};\n    const paramsList = storage.get(undefined);\n    if (Array.isArray(paramsList)) {\n      for (const param of paramsList) {\n        paramsMap[param.name] = param;\n      }\n    }\n    return paramsMap;\n  });\n\n  const [listItemUnderCursor, setListItemUnderCursor] = React.useState<string | undefined>();\n  const [selectedValue, setSelectedValue] = React.useState<string | undefined>();\n\n  const deleteMapping = React.useCallback(\n    (name: string) => {\n      const tmpParams = { ...params };\n      delete tmpParams[name];\n      setParams(tmpParams);\n      storage.delete(name);\n\n      // Cascade delete to api key mapping\n      const mappingContent = mappingStorage.getContent();\n      if (mappingContent) {\n        for (const itemKey of Object.keys(mappingContent)) {\n          if (mappingContent[itemKey].customParamNames.includes(name)) {\n            const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== name);\n            newParamNames.length > 0 ? mappingStorage.save(itemKey, { customParamNames: newParamNames }) : mappingStorage.delete(itemKey);\n          }\n        }\n      }\n    },\n    [mappingStorage, params, storage],\n  );\n\n  /*\n   Handle Remove layer button clicked\n   */\n  const onItemRemoveButtonClicked = React.useCallback(\n    (name: string, event) => {\n      event.stopPropagation(); // We don't want the owning ListBox to react on mouse click.\n      deleteMapping(name);\n    },\n    [deleteMapping],\n  );\n\n  const onCancelEdit = React.useCallback(() => {\n    UiFramework.dialogs.modal.close();\n    setSelectedValue(undefined); // clear listbox focus\n  }, []);\n\n  const onOkEdit = React.useCallback(\n    (newItem: CustomParamItem, oldItem?: CustomParamItem) => {\n      UiFramework.dialogs.modal.close();\n\n      // If the edited item has a new name, delete the entry first.\n      const tmpParams = { ...params };\n      if (oldItem && oldItem.name !== newItem.name) {\n        delete tmpParams[oldItem.name];\n        setParams(tmpParams);\n        storage.delete(oldItem.name);\n\n        const mappingContent = mappingStorage.getContent();\n        if (mappingContent) {\n          for (const itemKey of Object.keys(mappingContent)) {\n            if (mappingContent[itemKey].customParamNames.includes(oldItem.name)) {\n              const newParamNames = mappingContent[itemKey].customParamNames.filter((value) => value !== oldItem.name);\n              newParamNames.push(newItem.name);\n              mappingStorage.save(itemKey, { customParamNames: newParamNames });\n            }\n          }\n        }\n      }\n      storage.save(newItem.name, newItem);\n\n      tmpParams[newItem.name] = newItem;\n      setParams(tmpParams);\n      setSelectedValue(undefined); // clear listbox focus\n    },\n    [mappingStorage, params, storage],\n  );\n\n  const handleAddClick = React.useCallback(() => {\n    UiFramework.dialogs.modal.open(<CustomParamEditDialog onOkResult={onOkEdit} onCancelResult={onCancelEdit} />);\n    return;\n  }, [onCancelEdit, onOkEdit]);\n\n  const onListboxValueChange = React.useCallback(\n    (newValue: ListboxValue, _isControlOrCommandPressed?: boolean) => {\n      const item = params[newValue];\n      if (item) {\n        UiFramework.dialogs.modal.open(<CustomParamEditDialog item={item} onOkResult={onOkEdit} onCancelResult={onCancelEdit} />);\n      }\n\n      setSelectedValue(newValue);\n      return;\n    },\n    [params, onCancelEdit, onOkEdit],\n  );\n\n  return (\n    <div className=\"customParamsSettings-container\">\n      <div className=\"customParamsSettings-header\">\n        <span className=\"customParamsSettings-header-label\">\n          {MapLayersUI.translate(\"CustomParamSettings.SectionLabel\")}\n          <div title={MapLayersUI.translate(\"Labels.TechPreviewBadgeTooltip\")} className=\"customParamsSettings-previewBadge\">\n            <Icon size=\"small\">\n              <SvgTechnicalPreviewMini />\n            </Icon>\n          </div>\n        </span>\n\n        <IconButton size=\"small\" styleType=\"borderless\" className=\"customParamsSettings-header-add-button\" onClick={handleAddClick}>\n          <SvgAdd />\n        </IconButton>\n      </div>\n      <div className=\"customParamsSettings-content\">\n      {/* eslint-disable-next-line @itwin/no-internal */}\n        <Listbox selectedValue={selectedValue} onListboxValueChange={onListboxValueChange} className=\"customParamsSettings-content-listbox\">\n          {Object.keys(params).map((keyName) => (\n            // eslint-disable-next-line @itwin/no-internal\n            <ListboxItem\n              key={keyName}\n              className=\"customParamsSettings-content-entry\"\n              value={keyName}\n              onMouseEnter={() => setListItemUnderCursor(keyName)}\n              onMouseLeave={() => setListItemUnderCursor(undefined)}\n            >\n              <span className=\"customParamsSettings-content-entry-name\" title={keyName}>\n                {keyName}\n              </span>\n              {\n                // Display the delete icon only when the mouse over a specific item otherwise list feels cluttered.\n                listItemUnderCursor && listItemUnderCursor === keyName && (\n                  <>\n                    <IconButton\n                      size=\"small\"\n                      styleType=\"borderless\"\n                      className=\"map-source-list-entry-button\"\n                      title={MapLayersUI.translate(\"CustomParamSettings.EditButtonTitle\")}\n                    >\n                      <SvgEdit />\n                    </IconButton>\n                    <IconButton\n                      size=\"small\"\n                      styleType=\"borderless\"\n                      className=\"customParamsSettings-content-entry-button\"\n                      title={MapLayersUI.translate(\"CustomParamSettings.DeleteButtonTitle\")}\n                      onClick={(event) => {\n                        onItemRemoveButtonClicked(keyName, event);\n                      }}\n                    >\n                      <SvgDelete />\n                    </IconButton>\n                  </>\n                )\n              }\n            </ListboxItem>\n          ))}\n        </Listbox>\n      </div>\n    </div>\n  );\n}\n"]}