@itwin/appui-react 4.0.0-dev.9 → 4.0.1

package/lib/cjs/appui-react/statusfields/SectionsField.js

@@ -1,78 +1,81 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionsStatusField = void 0;
-require("./SectionsField.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const core_frontend_1 = require("@itwin/core-frontend");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const useActiveViewport_1 = require("../hooks/useActiveViewport");
-const UiFramework_1 = require("../UiFramework");
-const LabelIndicator_1 = require("../statusbar/LabelIndicator");
-/** Status Field for showing section extra tools for clearing and showing manipulators
- * @beta
- */
-function SectionsStatusField(props) {
-    const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [
-        UiFramework_1.UiFramework.translate("tools.sectionTools"),
-        UiFramework_1.UiFramework.translate("tools.sectionClear"),
-        UiFramework_1.UiFramework.translate("tools.sectionShowHandles")
-    ], []);
-    const activeViewport = (0, useActiveViewport_1.useActiveViewport)();
-    const [showIndicator, setShowIndicator] = React.useState(false);
-    const [isPopupOpen, setPopupOpen] = React.useState(false);
-    const targetDiv = React.useRef(null);
-    const classes = (showIndicator) ? "uifw-indicator-fade-in" : "uifw-indicator-fade-out";
-    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
-    React.useEffect(() => {
-        // istanbul ignore next
-        const onClipChanged = (viewport, _eventType, _provider) => {
-            if (viewport !== activeViewport)
-                return;
-            setHasManipulatorsShown(!!core_frontend_1.ViewClipDecoration.get(activeViewport));
-            const isClipActive = !!activeViewport.view.getViewClip();
-            setShowIndicator(isClipActive || !props.hideWhenUnused);
-        };
-        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
-        setShowIndicator(clipActive || !props.hideWhenUnused);
-        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!core_frontend_1.ViewClipDecoration.get(activeViewport));
-        core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
-        return () => {
-            // Get or create static ViewClipDecorationProvider
-            core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
-        };
-    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
-    // istanbul ignore next
-    const toggleManipulators = async (e) => {
-        if (activeViewport) {
-            setHasManipulatorsShown(e.target.checked);
-            await core_frontend_1.ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
-        }
-    };
-    // istanbul ignore next
-    const handleClear = async () => {
-        await core_frontend_1.IModelApp.tools.run(core_frontend_1.ViewClipClearTool.toolId, core_frontend_1.ViewClipDecorationProvider.create());
-        setPopupOpen(false);
-    };
-    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
-        React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: targetDiv, title: toolTip },
-                React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { className: classes, iconSpec: "icon-section-tool", onClick: () => setPopupOpen(!isPopupOpen) })),
-            React.createElement(appui_layout_react_1.FooterPopup, { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
-                React.createElement(appui_layout_react_1.Dialog, { titleBar: React.createElement(appui_layout_react_1.TitleBar, { title: toolTip }) },
-                    React.createElement("div", { className: "uifw-sections-footer-contents" },
-                        React.createElement(itwinui_react_1.Button, { onClick: handleClear }, clearLabel),
-                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
-                            React.createElement("div", { className: (0, classnames_1.default)("uifw-sections-label") }, showHandlesLabel),
-                            React.createElement(itwinui_react_1.ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
-}
-exports.SectionsStatusField = SectionsStatusField;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionsStatusField = void 0;
+require("./SectionsField.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const useActiveViewport_1 = require("../hooks/useActiveViewport");
+const UiFramework_1 = require("../UiFramework");
+const LabelIndicator_1 = require("../statusbar/LabelIndicator");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const section_tool_svg_1 = require("@bentley/icons-generic/icons/section-tool.svg");
+/** Status Field for showing section extra tools for clearing and showing manipulators
+ * @beta
+ */
+function SectionsStatusField(props) {
+    const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [
+        UiFramework_1.UiFramework.translate("tools.sectionTools"),
+        UiFramework_1.UiFramework.translate("tools.sectionClear"),
+        UiFramework_1.UiFramework.translate("tools.sectionShowHandles")
+    ], []);
+    const activeViewport = (0, useActiveViewport_1.useActiveViewport)();
+    const [showIndicator, setShowIndicator] = React.useState(false);
+    const [isPopupOpen, setPopupOpen] = React.useState(false);
+    const targetDiv = React.useRef(null);
+    const classes = (showIndicator) ? "uifw-field-fade-in" : "uifw-field-fade-out";
+    const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);
+    React.useEffect(() => {
+        // istanbul ignore next
+        const onClipChanged = (viewport, _eventType, _provider) => {
+            if (viewport !== activeViewport)
+                return;
+            setHasManipulatorsShown(!!core_frontend_1.ViewClipDecoration.get(activeViewport));
+            const isClipActive = !!activeViewport.view.getViewClip();
+            setShowIndicator(isClipActive || !props.hideWhenUnused);
+        };
+        const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();
+        setShowIndicator(clipActive || !props.hideWhenUnused);
+        setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!core_frontend_1.ViewClipDecoration.get(activeViewport));
+        core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);
+        return () => {
+            // Get or create static ViewClipDecorationProvider
+            core_frontend_1.ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);
+        };
+    }, [activeViewport, props.hideWhenUnused, isPopupOpen]);
+    // istanbul ignore next
+    const toggleManipulators = async (e) => {
+        if (activeViewport) {
+            setHasManipulatorsShown(e.target.checked);
+            await core_frontend_1.ViewClipDecorationProvider.create().toggleDecoration(activeViewport);
+        }
+    };
+    // istanbul ignore next
+    const handleClear = async () => {
+        await core_frontend_1.IModelApp.tools.run(core_frontend_1.ViewClipClearTool.toolId, core_frontend_1.ViewClipDecorationProvider.create());
+        setPopupOpen(false);
+    };
+    const iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(section_tool_svg_1.default);
+    return (React.createElement("div", { className: "uifw-section-footer-popup-container" }, showIndicator &&
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: targetDiv, title: toolTip },
+                React.createElement(LabelIndicator_1.StatusBarLabelIndicator, { className: classes, iconSpec: iconSpec, onClick: () => setPopupOpen(!isPopupOpen) })),
+            React.createElement(appui_layout_react_1.FooterPopup, { target: targetDiv.current, onClose: () => setPopupOpen(false), isOpen: isPopupOpen },
+                React.createElement(appui_layout_react_1.Dialog, { titleBar: React.createElement(appui_layout_react_1.TitleBar, { title: toolTip }) },
+                    React.createElement("div", { className: "uifw-sections-footer-contents" },
+                        React.createElement(itwinui_react_1.Button, { onClick: handleClear }, clearLabel),
+                        React.createElement("div", { className: "uifw-uifw-sections-toggle-container" },
+                            React.createElement("div", { className: (0, classnames_1.default)("uifw-sections-label") }, showHandlesLabel),
+                            React.createElement(itwinui_react_1.ToggleSwitch, { className: "uifw-sections-toggle", onChange: toggleManipulators, checked: hasManipulatorsShown }))))))));
+}
+exports.SectionsStatusField = SectionsStatusField;
 //# sourceMappingURL=SectionsField.js.map

package/lib/cjs/appui-react/statusfields/SectionsField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport \"./SectionsField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Dialog, FooterPopup, TitleBar } from \"@itwin/appui-layout-react\";\r\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\r\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\r\nimport { UiFramework } from \"../UiFramework\";\r\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\r\n\r\n/** Sections Status Field Props\r\n * @beta\r\n */\r\nexport interface SectionsStatusFieldProps extends CommonProps {\r\n  hideWhenUnused?: boolean;\r\n}\r\n\r\n/** Status Field for showing section extra tools for clearing and showing manipulators\r\n * @beta\r\n */\r\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\r\n  const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [\r\n    UiFramework.translate(\"tools.sectionTools\"),\r\n    UiFramework.translate(\"tools.sectionClear\"),\r\n    UiFramework.translate(\"tools.sectionShowHandles\")], []);\r\n  const activeViewport = useActiveViewport();\r\n  const [showIndicator, setShowIndicator] = React.useState(false);\r\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\r\n  const targetDiv = React.useRef<HTMLDivElement>(null);\r\n  const classes = (showIndicator) ? \"uifw-indicator-fade-in\" : \"uifw-indicator-fade-out\";\r\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\r\n\r\n  React.useEffect(() => {\r\n    // istanbul ignore next\r\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\r\n      if (viewport !== activeViewport)\r\n        return;\r\n\r\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\r\n      const isClipActive = !!activeViewport.view.getViewClip();\r\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\r\n    };\r\n\r\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\r\n    setShowIndicator(clipActive || !props.hideWhenUnused);\r\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\r\n\r\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\r\n    return () => {\r\n      // Get or create static ViewClipDecorationProvider\r\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\r\n    };\r\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\r\n\r\n  // istanbul ignore next\r\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (activeViewport) {\r\n      setHasManipulatorsShown(e.target.checked);\r\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\r\n    }\r\n  };\r\n\r\n  // istanbul ignore next\r\n  const handleClear = async () => {\r\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\r\n    setPopupOpen(false);\r\n  };\r\n\r\n  return (\r\n    <div className=\"uifw-section-footer-popup-container\">\r\n      {showIndicator &&\r\n        <>\r\n          <div ref={targetDiv} title={toolTip}>\r\n            <StatusBarLabelIndicator\r\n              className={classes}\r\n              iconSpec=\"icon-section-tool\"\r\n              onClick={() => setPopupOpen(!isPopupOpen)}\r\n            />\r\n          </div>\r\n          <FooterPopup\r\n            target={targetDiv.current}\r\n            onClose={() => setPopupOpen(false)}\r\n            isOpen={isPopupOpen}>\r\n            <Dialog\r\n              titleBar={\r\n                <TitleBar title={toolTip} />\r\n              }>\r\n              <div className=\"uifw-sections-footer-contents\">\r\n                <Button onClick={handleClear}>{clearLabel}</Button>\r\n                <div className=\"uifw-uifw-sections-toggle-container\">\r\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\r\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\r\n                </div>\r\n              </div>\r\n            </Dialog>\r\n          </FooterPopup>\r\n        </>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"SectionsField.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SectionsField.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/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SectionsField.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Dialog, FooterPopup, TitleBar } from \"@itwin/appui-layout-react\";\nimport { ClipEventType, IModelApp, ViewClipClearTool, ViewClipDecoration, ViewClipDecorationProvider, Viewport } from \"@itwin/core-frontend\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Button, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport { useActiveViewport } from \"../hooks/useActiveViewport\";\nimport { UiFramework } from \"../UiFramework\";\nimport { StatusBarLabelIndicator } from \"../statusbar/LabelIndicator\";\nimport { IconSpecUtilities } from \"@itwin/appui-abstract\";\nimport svgSectionTool from \"@bentley/icons-generic/icons/section-tool.svg\";\n\n/** Sections Status Field Props\n * @beta\n */\nexport interface SectionsStatusFieldProps extends CommonProps {\n  hideWhenUnused?: boolean;\n}\n\n/** Status Field for showing section extra tools for clearing and showing manipulators\n * @beta\n */\nexport function SectionsStatusField(props: SectionsStatusFieldProps) {\n  const [toolTip, clearLabel, showHandlesLabel] = React.useMemo(() => [\n    UiFramework.translate(\"tools.sectionTools\"),\n    UiFramework.translate(\"tools.sectionClear\"),\n    UiFramework.translate(\"tools.sectionShowHandles\")], []);\n  const activeViewport = useActiveViewport();\n  const [showIndicator, setShowIndicator] = React.useState(false);\n  const [isPopupOpen, setPopupOpen] = React.useState(false);\n  const targetDiv = React.useRef<HTMLDivElement>(null);\n  const classes = (showIndicator) ? \"uifw-field-fade-in\" : \"uifw-field-fade-out\";\n  const [hasManipulatorsShown, setHasManipulatorsShown] = React.useState(false);\n\n  React.useEffect(() => {\n    // istanbul ignore next\n    const onClipChanged = (viewport: Viewport, _eventType: ClipEventType, _provider: ViewClipDecorationProvider) => {\n      if (viewport !== activeViewport)\n        return;\n\n      setHasManipulatorsShown(!!ViewClipDecoration.get(activeViewport));\n      const isClipActive = !!activeViewport.view.getViewClip();\n      setShowIndicator(isClipActive || !props.hideWhenUnused);\n    };\n\n    const clipActive = !!activeViewport && /* istanbul ignore next */ !!activeViewport.view.getViewClip();\n    setShowIndicator(clipActive || !props.hideWhenUnused);\n    setHasManipulatorsShown(clipActive && /* istanbul ignore next */ !!activeViewport && /* istanbul ignore next */ !!ViewClipDecoration.get(activeViewport));\n\n    ViewClipDecorationProvider.create().onActiveClipChanged.addListener(onClipChanged);\n    return () => {\n      // Get or create static ViewClipDecorationProvider\n      ViewClipDecorationProvider.create().onActiveClipChanged.removeListener(onClipChanged);\n    };\n  }, [activeViewport, props.hideWhenUnused, isPopupOpen]);\n\n  // istanbul ignore next\n  const toggleManipulators = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (activeViewport) {\n      setHasManipulatorsShown(e.target.checked);\n      await ViewClipDecorationProvider.create().toggleDecoration(activeViewport);\n    }\n  };\n\n  // istanbul ignore next\n  const handleClear = async () => {\n    await IModelApp.tools.run(ViewClipClearTool.toolId, ViewClipDecorationProvider.create());\n    setPopupOpen(false);\n  };\n  const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgSectionTool);\n\n  return (\n    <div className=\"uifw-section-footer-popup-container\">\n      {showIndicator &&\n        <>\n          <div ref={targetDiv} title={toolTip}>\n            <StatusBarLabelIndicator\n              className={classes}\n              iconSpec={iconSpec}\n              onClick={() => setPopupOpen(!isPopupOpen)}\n            />\n          </div>\n          <FooterPopup\n            target={targetDiv.current}\n            onClose={() => setPopupOpen(false)}\n            isOpen={isPopupOpen}>\n            <Dialog\n              titleBar={\n                <TitleBar title={toolTip} />\n              }>\n              <div className=\"uifw-sections-footer-contents\">\n                <Button onClick={handleClear}>{clearLabel}</Button>\n                <div className=\"uifw-uifw-sections-toggle-container\">\n                  <div className={classnames(\"uifw-sections-label\")}>{showHandlesLabel}</div>\n                  <ToggleSwitch className=\"uifw-sections-toggle\" onChange={toggleManipulators} checked={hasManipulatorsShown} />\n                </div>\n              </div>\n            </Dialog>\n          </FooterPopup>\n        </>\n      }\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/statusfields/SectionsField.scss

@@ -1,36 +1,35 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-.uifw-sections-footer-contents {
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  padding: 8px;
-}
-
-.uifw-uifw-sections-toggle-container {
-  display: flex;
-  margin: var(--iui-size-2xs);
-  justify-content: center;
-}
-
-.uifw-sections-toggle {
-  align-self: center;
-  margin-right: var(--iui-size-xs);
-}
-
-.uifw-sections-label {
-  @include iui-font-family;
-  color: $buic-text-color;
-  font-size: var(--iui-font-size-1);
-  align-self: center;
-  margin: var(--iui-size-xs);
-
-  &.disabled {
-    color: $buic-text-color-disabled;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.uifw-sections-footer-contents {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  padding: 8px;
+}
+
+.uifw-uifw-sections-toggle-container {
+  display: flex;
+  margin: var(--iui-size-2xs);
+  justify-content: center;
+}
+
+.uifw-sections-toggle {
+  align-self: center;
+  margin-right: var(--iui-size-xs);
+}
+
+.uifw-sections-label {
+  font-family: var(--iui-font-sans);
+  color: var(--iui-color-text);
+  font-size: var(--iui-font-size-1);
+  align-self: center;
+  margin: var(--iui-size-xs);
+
+  &.disabled {
+    color: var(--iui-color-text-disabled);
+  }
+}

package/lib/cjs/appui-react/statusfields/SelectionInfo.d.ts

@@ -1,27 +1,27 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SelectionInfo.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Defines properties supported by the SelectionInfo Field Component.
- */
-interface SelectionInfoFieldProps extends CommonProps {
-    selectionCount: number;
-}
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- */
-declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
-    constructor(props: SelectionInfoFieldProps);
-    render(): React.ReactNode;
-}
-/**
- * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * This React component is Redux connected.
- * @public
- */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+import "./SelectionInfo.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Defines properties supported by the SelectionInfo Field Component.
+ */
+interface SelectionInfoFieldProps extends CommonProps {
+    selectionCount: number;
+}
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+declare class SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {
+    constructor(props: SelectionInfoFieldProps);
+    render(): React.ReactNode;
+}
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ export declare const SelectionInfoField: import("react-redux").ConnectedComponent<typeof SelectionInfoFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionInfoFieldComponent> & SelectionInfoFieldProps, "selectionCount">>;
+export {};
 //# sourceMappingURL=SelectionInfo.d.ts.map

package/lib/cjs/appui-react/statusfields/SelectionInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionInfo.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAItD;GACG;AACH,UAAU,uBAAwB,SAAQ,WAAW;IACnD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,cAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;gBAEpE,KAAK,EAAE,uBAAuB;IAI1B,MAAM,IAAI,KAAK,CAAC,SAAS;CAW1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,kBAAkB,0MAAwD,CAAC"}
+{"version":3,"file":"SelectionInfo.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAKtD;GACG;AACH,UAAU,uBAAwB,SAAQ,WAAW;IACnD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,cAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;gBAEpE,KAAK,EAAE,uBAAuB;IAI1B,MAAM,IAAI,KAAK,CAAC,SAAS;CAW1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,kBAAkB,0MAAwD,CAAC"}

package/lib/cjs/appui-react/statusfields/SelectionInfo.js

@@ -1,48 +1,49 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module StatusBar
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectionInfoField = void 0;
-require("./SelectionInfo.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const react_redux_1 = require("react-redux");
-const core_react_1 = require("@itwin/core-react");
-const appui_layout_react_1 = require("@itwin/appui-layout-react");
-const UiFramework_1 = require("../UiFramework");
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- */
-class SelectionInfoFieldComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (React.createElement(appui_layout_react_1.FooterIndicator, { className: (0, classnames_1.default)("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style },
-            React.createElement(core_react_1.Icon, { iconSpec: "icon-cursor" }),
-            this.props.selectionCount.toString()));
-    }
-}
-/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
-function mapStateToProps(state) {
-    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
-    /* istanbul ignore next */
-    if (!frameworkState)
-        return undefined;
-    return { selectionCount: frameworkState.sessionState.numItemsSelected };
-}
-// we declare the variable and export that rather than using export default.
-/**
- * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * This React component is Redux connected.
- * @public
- */ // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.SelectionInfoField = (0, react_redux_1.connect)(mapStateToProps)(SelectionInfoFieldComponent);
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module StatusBar
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionInfoField = void 0;
+require("./SelectionInfo.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const react_redux_1 = require("react-redux");
+const core_react_1 = require("@itwin/core-react");
+const appui_layout_react_1 = require("@itwin/appui-layout-react");
+const UiFramework_1 = require("../UiFramework");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ */
+class SelectionInfoFieldComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement(appui_layout_react_1.FooterIndicator, { className: (0, classnames_1.default)("uifw-statusFields-selectionInfo", this.props.className), style: this.props.style },
+            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCursor, null) }),
+            this.props.selectionCount.toString()));
+    }
+}
+/** Function used by Redux to map state data in Redux store to props that are used to render this component. */
+function mapStateToProps(state) {
+    const frameworkState = state[UiFramework_1.UiFramework.frameworkStateKey]; // since app sets up key, don't hard-code name
+    /* istanbul ignore next */
+    if (!frameworkState)
+        return undefined;
+    return { selectionCount: frameworkState.sessionState.numItemsSelected };
+}
+// we declare the variable and export that rather than using export default.
+/**
+ * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * This React component is Redux connected.
+ * @public
+ */ // eslint-disable-next-line @typescript-eslint/naming-convention
+exports.SelectionInfoField = (0, react_redux_1.connect)(mapStateToProps)(SelectionInfoFieldComponent);
 //# sourceMappingURL=SelectionInfo.js.map

package/lib/cjs/appui-react/statusfields/SelectionInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kDAAsD;AACtD,kEAA4D;AAC5D,gDAA6C;AAQ7C;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEtB,oBAAC,iBAAI,IAAC,QAAQ,EAAE,aAAa,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,kBAAkB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,2BAA2B,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module StatusBar\r\n */\r\n\r\nimport \"./SelectionInfo.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/** Defines properties supported by the SelectionInfo Field Component.\r\n */\r\ninterface SelectionInfoFieldProps extends CommonProps {\r\n  selectionCount: number;\r\n}\r\n\r\n/**\r\n * Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n */\r\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\r\n\r\n  constructor(props: SelectionInfoFieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  public override render(): React.ReactNode {\r\n    return (\r\n      <FooterIndicator\r\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\r\n        style={this.props.style}\r\n      >\r\n        {<Icon iconSpec={\"icon-cursor\"} />}\r\n        {this.props.selectionCount.toString()}\r\n      </FooterIndicator>\r\n    );\r\n  }\r\n}\r\n\r\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\r\nfunction mapStateToProps(state: any) {\r\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\r\n  /* istanbul ignore next */\r\n  if (!frameworkState)\r\n    return undefined;\r\n\r\n  return { selectionCount: frameworkState.sessionState.numItemsSelected };\r\n}\r\n\r\n// we declare the variable and export that rather than using export default.\r\n/**\r\n * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.\r\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\r\n * This React component is Redux connected.\r\n * @public\r\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\r\n"]}
+{"version":3,"file":"SelectionInfo.js","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionInfo.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,gCAA8B;AAC9B,2CAAoC;AACpC,+BAA+B;AAC/B,6CAAsC;AACtC,kDAAsD;AACtD,kEAA4D;AAC5D,gDAA6C;AAC7C,oEAAuD;AAQvD;;;GAGG;AACH,MAAM,2BAA4B,SAAQ,KAAK,CAAC,SAAkC;IAEhF,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,oBAAC,oCAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAC9E,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEtB,oBAAC,iBAAI,IAAC,QAAQ,EAAE,oBAAC,+BAAS,OAAG,GAAI;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CACrB,CACnB,CAAC;IACJ,CAAC;CACF;AAED,+GAA+G;AAC/G,SAAS,eAAe,CAAC,KAAU;IACjC,MAAM,cAAc,GAAG,KAAK,CAAC,yBAAW,CAAC,iBAAiB,CAAC,CAAC,CAAE,8CAA8C;IAC5G,0BAA0B;IAC1B,IAAI,CAAC,cAAc;QACjB,OAAO,SAAS,CAAC;IAEnB,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC;AAC1E,CAAC;AAED,4EAA4E;AAC5E;;;;;GAKG,CAAC,gEAAgE;AACvD,QAAA,kBAAkB,GAAG,IAAA,qBAAO,EAAC,eAAe,CAAC,CAAC,2BAA2B,CAAC,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/** @packageDocumentation\n * @module StatusBar\n */\n\nimport \"./SelectionInfo.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { connect } from \"react-redux\";\nimport { CommonProps, Icon } from \"@itwin/core-react\";\nimport { FooterIndicator } from \"@itwin/appui-layout-react\";\nimport { UiFramework } from \"../UiFramework\";\nimport { SvgCursor } from \"@itwin/itwinui-icons-react\";\n\n/** Defines properties supported by the SelectionInfo Field Component.\n */\ninterface SelectionInfoFieldProps extends CommonProps {\n  selectionCount: number;\n}\n\n/**\n * Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n */\nclass SelectionInfoFieldComponent extends React.Component<SelectionInfoFieldProps> {\n\n  constructor(props: SelectionInfoFieldProps) {\n    super(props);\n  }\n\n  public override render(): React.ReactNode {\n    return (\n      <FooterIndicator\n        className={classnames(\"uifw-statusFields-selectionInfo\", this.props.className)}\n        style={this.props.style}\n      >\n        {<Icon iconSpec={<SvgCursor />} />}\n        {this.props.selectionCount.toString()}\n      </FooterIndicator>\n    );\n  }\n}\n\n/** Function used by Redux to map state data in Redux store to props that are used to render this component. */\nfunction mapStateToProps(state: any) {\n  const frameworkState = state[UiFramework.frameworkStateKey];  // since app sets up key, don't hard-code name\n  /* istanbul ignore next */\n  if (!frameworkState)\n    return undefined;\n\n  return { selectionCount: frameworkState.sessionState.numItemsSelected };\n}\n\n// we declare the variable and export that rather than using export default.\n/**\n * SelectionInfo Status Field React component. This component is designed to be specified in a status bar definition.\n * It is used to display the number of selected items based on the Presentation Rules Selection Manager.\n * This React component is Redux connected.\n * @public\n */ // eslint-disable-next-line @typescript-eslint/naming-convention\nexport const SelectionInfoField = connect(mapStateToProps)(SelectionInfoFieldComponent);\n"]}

package/lib/cjs/appui-react/statusfields/SelectionInfo.scss

@@ -1,15 +1,15 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/_variables";
-
-.uifw-statusFields-selectionInfo {
-  .icon {
-    color: $icon-color;
-    font-size: $icon-size;
-    padding-right: 4px;
-  }
-
-  min-width: 6em;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/appui-layout-react/lib/cjs/appui-layout-react/footer/_variables";
+
+.uifw-statusFields-selectionInfo {
+  .icon {
+    color: $icon-color;
+    font-size: $icon-size;
+    padding-right: 4px;
+  }
+
+  min-width: 6em;
 }

package/lib/cjs/appui-react/statusfields/SelectionScope.d.ts

@@ -1,38 +1,31 @@
-/** @packageDocumentation
- * @module StatusBar
- */
-import "./SelectionScope.scss";
-import * as React from "react";
-import { PresentationSelectionScope } from "../redux/SessionState";
-import { CommonProps } from "@itwin/core-react";
-/** Defines properties supported by the SelectionScopeField Component.
- * @public
- */
-interface SelectionScopeFieldProps extends CommonProps {
-    activeSelectionScope: string;
-    availableSelectionScopes: PresentationSelectionScope[];
-}
-/**
- * Status Field React component. This component is designed to be specified in a status bar definition.
- * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
- * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
- * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
- * in the Redux state.
- * @public
- */
-declare class SelectionScopeFieldComponent extends React.Component<SelectionScopeFieldProps> {
-    private _label;
-    private _toolTip;
-    private _scopeOptions;
-    constructor(props: SelectionScopeFieldProps);
-    private _updateSelectValue;
-    render(): React.ReactNode;
-}
-/**
- * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will
- * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.
- * This React component is Redux connected.
- * @public
- */ export declare const SelectionScopeField: import("react-redux").ConnectedComponent<typeof SelectionScopeFieldComponent, import("react-redux").Omit<React.ClassAttributes<SelectionScopeFieldComponent> & SelectionScopeFieldProps, "availableSelectionScopes" | "activeSelectionScope">>;
-export {};
+/** @packageDocumentation
+ * @module StatusBar
+ */
+/// <reference types="react" />
+import "./SelectionScope.scss";
+import { PresentationSelectionScope } from "../redux/SessionState";
+import { CommonProps } from "@itwin/core-react";
+/** Defines properties supported by the SelectionScopeField Component.
+ * @public
+ */
+interface SelectionScopeFieldProps extends CommonProps {
+    activeSelectionScope: string;
+    availableSelectionScopes: PresentationSelectionScope[];
+}
+/**
+ * Status Field React component. This component is designed to be specified in a status bar definition.
+ * It is used to display the number of selected items based on the Presentation Rules Selection Manager.
+ * The IModelApp should call either UiFramework.setIModelConnection or SyncUiEventDispatcher.initializeConnectionEvents
+ * with the active iModelConnection each time a new iModel is opened so the selection scope data is properly updated
+ * in the Redux state.
+ * @public
+ */
+declare function SelectionScopeFieldComponent(props: SelectionScopeFieldProps): JSX.Element;
+/**
+ * SelectionScopeField React component. This component is designed to be specified in a status bar definition. It will
+ * display the active selection scope that is used by the PresentationManager to determine what elements are added to the selection nap mode.
+ * This React component is Redux connected.
+ * @public
+ */ export declare const SelectionScopeField: import("react-redux").ConnectedComponent<typeof SelectionScopeFieldComponent, import("react-redux").Omit<SelectionScopeFieldProps, "availableSelectionScopes" | "activeSelectionScope">>;
+export {};
 //# sourceMappingURL=SelectionScope.d.ts.map

package/lib/cjs/appui-react/statusfields/SelectionScope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionScope.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,WAAW;IAEpD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;CACxD;AAED;;;;;;;GAOG;AACH,cAAM,4BAA6B,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC;IAClF,OAAO,CAAC,MAAM,CAAsD;IACpE,OAAO,CAAC,QAAQ,CAAwD;IACxE,OAAO,CAAC,aAAa,CAA8B;gBAEvC,KAAK,EAAE,wBAAwB;IAQ3C,OAAO,CAAC,kBAAkB,CAKxB;IAEc,MAAM,IAAI,KAAK,CAAC,SAAS;CAqB1C;AAaD;;;;;GAKG,CACH,eAAO,MAAM,mBAAmB,gPAAyD,CAAC"}
+{"version":3,"file":"SelectionScope.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/statusfields/SelectionScope.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,uBAAuB,CAAC;AAM/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,UAAU,wBAAyB,SAAQ,WAAW;IACpD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,wBAAwB,EAAE,0BAA0B,EAAE,CAAC;CACxD;AAED;;;;;;;GAOG;AACH,iBAAS,4BAA4B,CAAC,KAAK,EAAE,wBAAwB,eAiCpE;AAaD;;;;;GAKG,CACH,eAAO,MAAM,mBAAmB,0LAAyD,CAAC"}