@itwin/map-layers 5.3.0 → 5.4.0

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

@@ -17,6 +17,11 @@ $default-font-size: --iui-font-size-1;
   padding-left: 5px;
 }
 
+.map-layer-source-previewBadge-icon {
+  margin-left: 4px;
+  display:inline;
+  vertical-align: middle;
+}
 .map-layer-source-select-previewBadge {
   margin-right: 10px;
 }
@@ -126,4 +131,10 @@ display: flex;
     color: var(--iui-color-icon-warning);
     background-color: transparent;
   }
-}
+}
+
+.map-layer-custom-param-select {
+  .map-layer-custom-param-select-add-button {
+    margin-bottom: 0.5rem;
+  }
+}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./MapUrlDialog.scss";
+interface SelectApiKeyProps {
+    value?: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+}
+export declare function SelectApiKey(props: SelectApiKeyProps): JSX.Element;
+export {};
+//# sourceMappingURL=SelectApiKey.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectApiKey.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SelectApiKey.tsx"],"names":[],"mappings":";AASA,OAAO,qBAAqB,CAAC;AAC7B,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAGD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAyCpD"}

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

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+import { Select } from "@itwin/itwinui-react";
+import * as React from "react";
+import { CustomParamsStorage } from "../../CustomParamsStorage";
+import "./MapUrlDialog.scss";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SelectApiKey(props) {
+    const [keyValue, setKeyValue] = React.useState(props.value);
+    const [apiKeys] = React.useState(() => {
+        const storage = new CustomParamsStorage();
+        const keys = storage.get(undefined);
+        if (keys)
+            return keys.map((keyItem) => { return { value: keyItem.name, label: keyItem.name }; });
+        return [];
+    });
+    React.useEffect(() => {
+        setKeyValue(props.value);
+    }, [props.value]);
+    const handleOnChange = React.useCallback((value) => {
+        setKeyValue(value);
+        if (props.onChange)
+            props.onChange(value);
+    }, [props]);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.code === "Delete" || e.key === "Backspace") {
+            setKeyValue(undefined);
+        }
+    }, []);
+    return (React.createElement(Select, { className: "map-layer-source-select", options: apiKeys, value: keyValue, disabled: props.disabled, onChange: handleOnChange, size: "small", onKeyDown: handleKeyDown }));
+}
+//# sourceMappingURL=SelectApiKey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectApiKey.js","sourceRoot":"","sources":["../../../../src/ui/widget/SelectApiKey.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,8BAA8B;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,qBAAqB,CAAC;AAO7B,gEAAgE;AAChE,MAAM,UAAU,YAAY,CAAC,KAAwB;IAEnD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAmB,KAAK,CAAC,KAAK,CAAC,CAAC;IAE9E,MAAM,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QACpC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,MAAM,IAAI,GAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACrC,IAAI,IAAI;YACN,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,GAAE,OAAO,EAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,EAAC,CAAC,CAAA,CAAC,CAAC,CAAC;QACrF,OAAO,EAAE,CAAC;IACZ,CAAC,CACA,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACzD,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,IAAI,KAAK,CAAC,QAAQ;YAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE;QAC5C,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAK,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACjD,WAAW,CAAC,SAAS,CAAC,CAAC;SACxB;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CAEL,oBAAC,MAAM,IACL,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,aAAa,GACxB,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n// cSpell:ignore Modeless WMTS\n\nimport { Select } from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport \"./MapUrlDialog.scss\";\ninterface SelectApiKeyProps {\n  value?: string;\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SelectApiKey(props: SelectApiKeyProps) {\n\n  const [keyValue, setKeyValue] = React.useState<string|undefined>(props.value);\n\n  const [apiKeys] = React.useState(() => {\n    const storage = new CustomParamsStorage();\n    const keys  = storage.get(undefined);\n    if (keys)\n      return keys.map((keyItem) => {return {value: keyItem.name, label: keyItem.name};});\n    return [];\n  }\n  );\n\n  React.useEffect(() => {\n    setKeyValue(props.value);\n  }, [props.value]);\n\n  const handleOnChange = React.useCallback((value: string) => {\n    setKeyValue(value);\n    if (props.onChange)\n      props.onChange(value);\n  }, [props]);\n\n  const handleKeyDown = React.useCallback((e) => {\n    if (e.code === \"Delete\" ||  e.key === \"Backspace\") {\n      setKeyValue(undefined);\n    }\n  }, []);\n\n  return (\n\n    <Select\n      className=\"map-layer-source-select\"\n      options={apiKeys}\n      value={keyValue}\n      disabled={props.disabled}\n      onChange={handleOnChange}\n      size=\"small\"\n      onKeyDown={handleKeyDown}\n    />\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./MapUrlDialog.scss";
+interface SelectCustomParamProps {
+    value?: string[];
+    disabled?: boolean;
+    onChange?: (value: string[]) => void;
+}
+export declare function SelectCustomParam(props: SelectCustomParamProps): JSX.Element;
+export {};
+//# sourceMappingURL=SelectCustomParam.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCustomParam.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SelectCustomParam.tsx"],"names":[],"mappings":";AASA,OAAO,qBAAqB,CAAC;AAE7B,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAGD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAuD9D"}

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

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+import { Select } from "@itwin/itwinui-react";
+import * as React from "react";
+import { CustomParamsStorage } from "../../CustomParamsStorage";
+import "./MapUrlDialog.scss";
+import { MapLayersUI } from "../../mapLayers";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function SelectCustomParam(props) {
+    const [storage] = React.useState(() => new CustomParamsStorage());
+    const [paramValues, setParamValues] = React.useState(props.value);
+    const getCustomParamsFromStorage = React.useCallback(() => {
+        const params = storage.get(undefined);
+        return (params ? params.map((item) => { return { value: item.name, label: item.name }; }) : []);
+    }, [storage]);
+    const [customParams] = React.useState(() => getCustomParamsFromStorage());
+    React.useEffect(() => {
+        setParamValues(props.value);
+    }, [props.value]);
+    const handleOnChange = React.useCallback((val, event) => {
+        const stateSetter = (prev) => {
+            const getValue = () => {
+                if (!prev)
+                    return [val];
+                return event === "removed" ? prev.filter((v) => val !== v) : [...prev, val];
+            };
+            const value = getValue();
+            if (props.onChange)
+                props.onChange(value);
+            return value;
+        };
+        setParamValues(stateSetter);
+    }, [props]);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.code === "Delete" || e.key === "Backspace") {
+            setParamValues(undefined);
+        }
+    }, []);
+    return (React.createElement("div", { className: "map-layer-custom-param-select", title: customParams.length === 0 ? MapLayersUI.translate("CustomParamSelect.DisabledTitle") : undefined },
+        React.createElement(Select, { className: "map-layer-source-select", options: customParams, value: paramValues, disabled: props.disabled || customParams.length === 0, onChange: handleOnChange, size: "small", onKeyDown: handleKeyDown, multiple: true })));
+}
+//# sourceMappingURL=SelectCustomParam.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCustomParam.js","sourceRoot":"","sources":["../../../../src/ui/widget/SelectCustomParam.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// cSpell:ignore Modeless WMTS\n\nimport { Select } from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { CustomParamsStorage } from \"../../CustomParamsStorage\";\nimport \"./MapUrlDialog.scss\";\nimport { MapLayersUI } from \"../../mapLayers\";\ninterface SelectCustomParamProps {\n  value?: string[];\n  disabled?: boolean;\n  onChange?: (value: string[]) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SelectCustomParam(props: SelectCustomParamProps) {\n  const [storage] = React.useState(() => new CustomParamsStorage());\n\n  const [paramValues, setParamValues] = React.useState<string[]|undefined>(props.value);\n\n  const getCustomParamsFromStorage = React.useCallback(() => {\n    const params = storage.get(undefined);\n    return (params ? params.map((item) => {return {value: item.name, label: item.name};}) : []);\n  }, [storage]);\n\n  const [customParams] = React.useState(() => getCustomParamsFromStorage());\n\n  React.useEffect(() => {\n    setParamValues(props.value);\n  }, [props.value]);\n\n  const handleOnChange = React.useCallback((val, event) => {\n    const stateSetter = (prev: string[] | undefined) => {\n      const getValue = (): string[] => {\n        if (!prev)\n          return [val];\n\n        return event === \"removed\" ? prev.filter((v) => val !== v) : [...prev, val];\n      };\n      const value = getValue();\n      if (props.onChange)\n        props.onChange(value);\n      return value;\n\n    };\n    setParamValues(stateSetter);\n\n  }, [props]);\n\n  const handleKeyDown = React.useCallback((e) => {\n    if (e.code === \"Delete\" ||  e.key === \"Backspace\") {\n      setParamValues(undefined);\n    }\n  }, []);\n\n  return (\n    <div className=\"map-layer-custom-param-select\" title={customParams.length === 0 ? MapLayersUI.translate(\"CustomParamSelect.DisabledTitle\") : undefined}>\n      <Select<string>\n        className=\"map-layer-source-select\"\n        options={customParams}\n        value={paramValues}\n        disabled={props.disabled || customParams.length === 0 }\n        onChange={handleOnChange}\n        size=\"small\"\n        onKeyDown={handleKeyDown}\n        multiple\n      >\n      </Select>\n    </div>\n  );\n}\n"]}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { MapTypesOptions } from "../Interfaces";
 import "./MapUrlDialog.scss";
+import * as React from "react";
+import { MapTypesOptions } from "../Interfaces";
 export declare const MAP_TYPES: {
     wms: string;
     arcGis: string;
@@ -13,6 +13,15 @@ interface SelectMapFormatProps {
     disabled?: boolean;
     mapTypesOptions?: MapTypesOptions;
     onChange?: (mapType: string) => void;
+    /**
+       * Message below the select. Does not apply to 'inline' select.
+       */
+    message?: React.ReactNode;
+    /**
+     * Status of the select.
+     * @default ''
+     */
+    status?: "positive" | "warning" | "negative";
 }
 export declare function SelectMapFormat(props: SelectMapFormatProps): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMapFormat.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SelectMapFormat.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,qBAAqB,CAAC;AAS7B,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAgD1D"}
+{"version":3,"file":"SelectMapFormat.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/SelectMapFormat.tsx"],"names":[],"mappings":"AAMA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAMhD,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;SAEK;IACL,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;CAC9C;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA+C1D"}

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

@@ -3,12 +3,12 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 // cSpell:ignore Modeless WMTS
-import { Icon, MenuItem, Select } from "@itwin/itwinui-react";
-import * as React from "react";
 import "./MapUrlDialog.scss";
+import * as React from "react";
+import { IModelApp } from "@itwin/core-frontend";
 import { SvgTechnicalPreviewMini } from "@itwin/itwinui-icons-color-react";
+import { Icon, LabeledSelect, MenuItem } from "@itwin/itwinui-react";
 import { MapLayersUI } from "../../mapLayers";
-import { IModelApp } from "@itwin/core-frontend";
 // TODO:
 // Remove this structure and iterate over the registry's active formats.
 // Still need a proper way to exclude some format, like we currently do with
@@ -23,7 +23,6 @@ export const MAP_TYPES = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function SelectMapFormat(props) {
     const [mapFormat, setMapFormat] = React.useState(props.value ?? MAP_TYPES.arcGis);
-    const [techPreviewTooltip] = React.useState(MapLayersUI.localization.getLocalizedString("mapLayers:CustomAttach.TechPreviewBadgeTooltip"));
     const [mapFormats] = React.useState(() => {
         const formats = [
             { value: MAP_TYPES.arcGis, label: MAP_TYPES.arcGis },
@@ -42,8 +41,8 @@ export function SelectMapFormat(props) {
             props.onChange(value);
         }
     }, [props]);
-    return (React.createElement(Select, { className: "map-layer-source-select", options: mapFormats, value: mapFormat, disabled: props.disabled, onChange: handleOnChange, size: "small", itemRenderer: (option) => (React.createElement(MenuItem, { badge: option.id?.includes("techPreview") ?
-                React.createElement("div", { title: techPreviewTooltip, className: "map-layer-source-select-previewBadge" },
+    return (React.createElement(LabeledSelect, { className: "map-layer-source-select", options: mapFormats, value: mapFormat, disabled: props.disabled, onChange: handleOnChange, size: "small", itemRenderer: (option) => (React.createElement(MenuItem, { badge: option.id?.includes("techPreview") ?
+                React.createElement("div", { title: MapLayersUI.translate("Labels.TechPreviewBadgeTooltip"), className: "map-layer-source-select-previewBadge" },
                     React.createElement(Icon, { size: "small" },
                         React.createElement(SvgTechnicalPreviewMini, null)))
                 : undefined }, option.label)) }));

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMapFormat.js","sourceRoot":"","sources":["../../../../src/ui/widget/SelectMapFormat.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,8BAA8B;AAE9B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAC5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAC,uBAAuB,EAAC,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,QAAQ;AACR,wEAAwE;AACxE,4EAA4E;AAC5E,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,eAAe;CAC/B,CAAC;AASF,gEAAgE;AAChE,MAAM,UAAU,eAAe,CAAC,KAA2B;IAEzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC;IAClF,MAAM,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,kBAAkB,CAAC,gDAAgD,CAAC,CAAC,CAAC;IAE3I,MAAM,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAA2B,EAAE;QAC/D,MAAM,OAAO,GAA2B;YACtC,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,EAAS,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE;YAC3D,EAAE,KAAK,EAAE,SAAS,CAAC,GAAG,EAAY,KAAK,EAAE,SAAS,CAAC,GAAG,EAAE;YACxD,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,EAAW,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE;SAC1D,CAAC;QACF,IAAI,KAAK,CAAC,eAAe,EAAE,cAAc;YACvC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC;QAEvE,IAAI,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,SAAS,CAAC,aAAa,CAAC;YACxE,OAAO,CAAC,IAAI,CAAE,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,EAAE,EAAC,aAAa,EAAE,CAAC,CAAC;QAEtG,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CAEL,oBAAC,MAAM,IACL,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,OAAO,EACZ,YAAY,EACV,CAAC,MAAM,EAAE,EAAE,CAAC,CACV,oBAAC,QAAQ,IACP,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;gBACzC,6BAAK,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAC,sCAAsC;oBAC9E,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO;wBAAC,oBAAC,uBAAuB,OAAG,CAAO,CACjD;gBACN,CAAC,CAAC,SAAS,IACZ,MAAM,CAAC,KAAK,CACJ,CAAC,GAChB,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n// cSpell:ignore Modeless WMTS\n\nimport { Icon, MenuItem, Select, SelectOption } from \"@itwin/itwinui-react\";\nimport * as React from \"react\";\nimport { MapTypesOptions } from \"../Interfaces\";\nimport \"./MapUrlDialog.scss\";\nimport {SvgTechnicalPreviewMini} from \"@itwin/itwinui-icons-color-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { IModelApp } from \"@itwin/core-frontend\";\n\n// TODO:\n// Remove this structure and iterate over the registry's active formats.\n// Still need a proper way to exclude some format, like we currently do with\n// 'TileUrl' without the need to hardcode any format Id.\nexport const MAP_TYPES = {\n  wms: \"WMS\",\n  arcGis: \"ArcGIS\",\n  wmts: \"WMTS\",\n  tileUrl: \"TileURL\",\n  arcGisFeature: \"ArcGISFeature\",\n};\n\ninterface SelectMapFormatProps {\n  value?: string;\n  disabled?: boolean;\n  mapTypesOptions?: MapTypesOptions;\n  onChange?: (mapType: string) => void;\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SelectMapFormat(props: SelectMapFormatProps) {\n\n  const [mapFormat, setMapFormat] = React.useState(props.value ?? MAP_TYPES.arcGis);\n  const [techPreviewTooltip] = React.useState(MapLayersUI.localization.getLocalizedString(\"mapLayers:CustomAttach.TechPreviewBadgeTooltip\"));\n\n  const [mapFormats] = React.useState((): SelectOption<string>[] => {\n    const formats: SelectOption<string>[] = [\n      { value: MAP_TYPES.arcGis,        label: MAP_TYPES.arcGis },\n      { value: MAP_TYPES.wms,           label: MAP_TYPES.wms },\n      { value: MAP_TYPES.wmts,          label: MAP_TYPES.wmts },\n    ];\n    if (props.mapTypesOptions?.supportTileUrl)\n      formats.push({ value: MAP_TYPES.tileUrl, label: MAP_TYPES.tileUrl });\n\n    if (IModelApp.mapLayerFormatRegistry.isRegistered(MAP_TYPES.arcGisFeature))\n      formats.push( { value: MAP_TYPES.arcGisFeature, label: MAP_TYPES.arcGisFeature, id:\"techPreview\" });\n\n    return formats;\n  });\n\n  const handleOnChange = React.useCallback((value: string) => {\n    setMapFormat(value);\n    if (props.onChange) {\n      props.onChange(value);\n    }\n  }, [props]);\n\n  return (\n\n    <Select\n      className=\"map-layer-source-select\"\n      options={mapFormats}\n      value={mapFormat}\n      disabled={props.disabled}\n      onChange={handleOnChange}\n      size=\"small\"\n      itemRenderer={\n        (option) => (\n          <MenuItem\n            badge={option.id?.includes(\"techPreview\") ?\n              <div title={techPreviewTooltip} className=\"map-layer-source-select-previewBadge\">\n                <Icon size=\"small\"><SvgTechnicalPreviewMini /></Icon>\n              </div>\n              : undefined}>\n            {option.label}\n          </MenuItem>) }\n    />\n  );\n}\n"]}
+{"version":3,"file":"SelectMapFormat.js","sourceRoot":"","sources":["../../../../src/ui/widget/SelectMapFormat.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// cSpell:ignore Modeless WMTS\n\nimport \"./MapUrlDialog.scss\";\nimport * as React from \"react\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { SvgTechnicalPreviewMini } from \"@itwin/itwinui-icons-color-react\";\nimport { Icon, LabeledSelect, MenuItem, SelectOption } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\nimport { MapTypesOptions } from \"../Interfaces\";\n\n// TODO:\n// Remove this structure and iterate over the registry's active formats.\n// Still need a proper way to exclude some format, like we currently do with\n// 'TileUrl' without the need to hardcode any format Id.\nexport const MAP_TYPES = {\n  wms: \"WMS\",\n  arcGis: \"ArcGIS\",\n  wmts: \"WMTS\",\n  tileUrl: \"TileURL\",\n  arcGisFeature: \"ArcGISFeature\",\n};\n\ninterface SelectMapFormatProps {\n  value?: string;\n  disabled?: boolean;\n  mapTypesOptions?: MapTypesOptions;\n  onChange?: (mapType: string) => void;\n  /**\n     * Message below the select. Does not apply to 'inline' select.\n     */\n  message?: React.ReactNode;\n  /**\n   * Status of the select.\n   * @default ''\n   */\n  status?: \"positive\" | \"warning\" | \"negative\";\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function SelectMapFormat(props: SelectMapFormatProps) {\n\n  const [mapFormat, setMapFormat] = React.useState(props.value ?? MAP_TYPES.arcGis);\n\n  const [mapFormats] = React.useState((): SelectOption<string>[] => {\n    const formats: SelectOption<string>[] = [\n      { value: MAP_TYPES.arcGis,        label: MAP_TYPES.arcGis },\n      { value: MAP_TYPES.wms,           label: MAP_TYPES.wms },\n      { value: MAP_TYPES.wmts,          label: MAP_TYPES.wmts },\n    ];\n    if (props.mapTypesOptions?.supportTileUrl)\n      formats.push({ value: MAP_TYPES.tileUrl, label: MAP_TYPES.tileUrl });\n\n    if (IModelApp.mapLayerFormatRegistry.isRegistered(MAP_TYPES.arcGisFeature))\n      formats.push( { value: MAP_TYPES.arcGisFeature, label: MAP_TYPES.arcGisFeature, id:\"techPreview\" });\n\n    return formats;\n  });\n\n  const handleOnChange = React.useCallback((value: string) => {\n    setMapFormat(value);\n    if (props.onChange) {\n      props.onChange(value);\n    }\n  }, [props]);\n\n  return (\n\n    <LabeledSelect\n      className=\"map-layer-source-select\"\n      options={mapFormats}\n      value={mapFormat}\n      disabled={props.disabled}\n      onChange={handleOnChange}\n      size=\"small\"\n      itemRenderer={\n        (option) => (\n          <MenuItem\n            badge={option.id?.includes(\"techPreview\") ?\n              <div title={MapLayersUI.translate(\"Labels.TechPreviewBadgeTooltip\")} className=\"map-layer-source-select-previewBadge\">\n                <Icon size=\"small\"><SvgTechnicalPreviewMini /></Icon>\n              </div>\n              : undefined}>\n            {option.label}\n          </MenuItem>) }\n    />\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface UserPreferencesStorageOptionsProps {
+    disabled?: boolean;
+    itwinChecked?: boolean;
+    modelChecked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function UserPreferencesStorageOptions(props: UserPreferencesStorageOptionsProps): JSX.Element;
+export {};
+//# sourceMappingURL=UserPreferencesStorageOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserPreferencesStorageOptions.d.ts","sourceRoot":"","sources":["../../../../src/ui/widget/UserPreferencesStorageOptions.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,kCAAkC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,kCAAkC,eAqBtF"}

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

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Radio } from "@itwin/itwinui-react";
+import { MapLayersUI } from "../../mapLayers";
+export function UserPreferencesStorageOptions(props) {
+    return (React.createElement("div", null,
+        React.createElement(Radio, { disabled: props.disabled, name: "settingsStorage", value: "iTwin", label: MapLayersUI.translate("CustomAttach.StoreOnITwinSettings"), checked: props.itwinChecked, onChange: props.onChange }),
+        React.createElement(Radio, { disabled: props.disabled, name: "settingsStorage", value: "Model", label: MapLayersUI.translate("CustomAttach.StoreOnModelSettings"), checked: props.modelChecked, onChange: props.onChange })));
+}
+//# sourceMappingURL=UserPreferencesStorageOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserPreferencesStorageOptions.js","sourceRoot":"","sources":["../../../../src/ui/widget/UserPreferencesStorageOptions.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAS9C,MAAM,UAAU,6BAA6B,CAAC,KAAyC;IACrF,OAAO,CACL;QACE,oBAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,mCAAmC,CAAC,EACjE,OAAO,EAAE,KAAK,CAAC,YAAY,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB;QACF,oBAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,mCAAmC,CAAC,EACjE,OAAO,EAAE,KAAK,CAAC,YAAY,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,GACxB,CACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Radio } from \"@itwin/itwinui-react\";\nimport { MapLayersUI } from \"../../mapLayers\";\n\ninterface UserPreferencesStorageOptionsProps {\n  disabled?: boolean;\n  itwinChecked?: boolean;\n  modelChecked?: boolean;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function UserPreferencesStorageOptions(props: UserPreferencesStorageOptionsProps) {\n  return (\n    <div>\n      <Radio\n        disabled={props.disabled}\n        name=\"settingsStorage\"\n        value=\"iTwin\"\n        label={MapLayersUI.translate(\"CustomAttach.StoreOnITwinSettings\")}\n        checked={props.itwinChecked}\n        onChange={props.onChange}\n      />\n      <Radio\n        disabled={props.disabled}\n        name=\"settingsStorage\"\n        value=\"Model\"\n        label={MapLayersUI.translate(\"CustomAttach.StoreOnModelSettings\")}\n        checked={props.modelChecked}\n        onChange={props.onChange}\n      />\n    </div>\n  );\n}\n"]}

package/lib/public/locales/en/mapLayers.json

@@ -23,6 +23,28 @@
     "AllOn": "Select All",
     "AllOff": "Select None"
   },
+  "CustomParamEditDialog":
+  {
+    "DialogTitleAdd": "Add custom query parameter",
+    "DialogTitleEdit": "Edit custom query parameter",
+    "NameExists": "Name already exists",
+    "ParamKeyLabel": "Key",
+    "ParamNameLabel": "Name",
+    "ParamValueLabel": "Value",
+    "ParamValueNonPrivateMessage": "Value should not contain sensitive data",
+    "PrivateToggleTooltip": "Private query parameters won't be saved part of the iTwin",
+    "PrivateToggleLabel": "Keep query parameter private"
+  },
+  "CustomParamSelect":
+  {
+    "DisabledTitle": "Custom query parameter can be configured in the advanced settings"
+  },
+  "CustomParamSettings":
+  {
+    "DeleteButtonTitle": "Delete custom parameter",
+    "EditButtonTitle": "Edit custom parameter",
+    "SectionLabel": "Custom parameters"
+  },
   "MapLayerActionButtons": {
     "ShowAllLabel": "Show all",
     "HideAllLabel": "Hide all",
@@ -38,9 +60,10 @@
     "AttachCustomLayer": "Add New Layer",
     "AttacheInfo": "Map layer attached from URL:",
     "Custom": "New",
+    "CustomParamsLabel": "Custom Query Parameters",
     "LoadingMapSources": "Loading Map Sources",
     "EditCustomLayer": "Edit Layer",
-    "EditLayerDefButtonTitle": "Edit Layer Definition",
+    "EditLayerDefButtonTitle": "Edit layer definition",
     "ErrorLoadingLayers": "Error retrieving map layers stored in the settings service",
     "ErrorRetrieveUserModel": "Could not get saved Map Layers for user by model: {{errorMessage}}",
     "ErrorRetrieveUserITwin": "Could not get saved Map Layers for user by iTwin: {{errorMessage}}",
@@ -53,6 +76,7 @@
     "ExternalLoginWaiting": "Waiting for external login process to complete...",
     "InvalidCredentials": "Invalid credentials provided",
     "InvalidCoordinateSystem": "Map layer geographic coordinate system is not supported",
+    "InvalidType": "Invalid Type",
     "MissingCredentials": "This layer requires credentials to be provided",
     "Name": "Name",
     "NameInputPlaceHolder": "Enter Map Name",
@@ -66,7 +90,6 @@
     "SelectLayersToCreate": "Select Layers To Add",
     "StoreOnModelSettings": "Store on Model Settings",
     "StoreOnITwinSettings": "Store on iTwin Settings",
-    "TechPreviewBadgeTooltip": "Technology preview",
     "TooManyLayersSelected": "{{layerCount}} layers selected; performance may be affected.",
     "Type": "Type",
     "URL": "URL",
@@ -80,6 +103,9 @@
     "Username": "Username",
     "UsernameRequired": "Username required"
   },
+  "Labels" : {
+    "TechPreviewBadgeTooltip": "Technology preview"
+  },
   "Messages": {
     "NotSupported": "No active viewport or geo-located iModel available.",
     "NoRangeDefined": "No range is defined for Map Layer",
@@ -155,4 +181,4 @@
       "Street" : "Bing Maps: Streets"
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/map-layers",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Extension that adds a Map Layers Widget",
   "main": "lib/cjs/map-layers.js",
   "module": "lib/esm/map-layers.js",
@@ -38,6 +38,7 @@
   "dependencies": {
     "@itwin/itwinui-icons-color-react": "^2.1.0",
     "@itwin/itwinui-icons-react": "^2.6.0",
+    "@itwin/itwinui-react": "^2.11.2",
     "classnames": "^2.3.1",
     "react-beautiful-dnd": "^13.1.1"
   },
@@ -58,7 +59,6 @@
     "@itwin/eslint-plugin": "^4.0.0-dev.38",
     "@itwin/imodel-components-react": "^4.0.1",
     "@itwin/itwinui-variables": "^2.0.0",
-    "@itwin/itwinui-react": "^2.11.2",
     "@itwin/map-layers-formats": "^4.3.0",
     "@itwin/webgl-compatibility": "^4.3.0",
     "@testing-library/dom": "^8.12.0",
@@ -115,10 +115,10 @@
     "@itwin/appui-layout-react": "^4.0.0",
     "@itwin/appui-react": "^4.0.0",
     "@itwin/components-react": "^4.0.0",
-    "@itwin/core-bentley": "^4.0.0",
-    "@itwin/core-common": "^4.0.0",
-    "@itwin/core-frontend": "^4.1.2",
-    "@itwin/core-react": "^4.0.0",
+    "@itwin/core-bentley": "^4.3.0",
+    "@itwin/core-common": "^4.3.0",
+    "@itwin/core-frontend": "^4.3.0",
+    "@itwin/core-react": "^4.3.0",
     "@itwin/imodel-components-react": "^4.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"