@itwin/appui-react 3.0.0-dev.100

package/lib/cjs/appui-react/accudraw/AccuDrawInputField.js

@@ -0,0 +1,123 @@
+"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 AccuDraw
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccuDrawInputField = void 0;
+require("./AccuDrawInputField.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const KeyboardShortcut_1 = require("../keyboardshortcut/KeyboardShortcut");
+const FrameworkAccuDraw_1 = require("./FrameworkAccuDraw");
+const ForwardRefAccuDrawInput = React.forwardRef(function ForwardRefAccuDrawInputField(props, ref) {
+    const { className, style, id, label, iconSpec, labelClassName, labelStyle, labelCentered, field, isLocked, onValueChanged, valueChangedDelay, onEnterPressed, onEscPressed, ...inputProps } = props;
+    const [stringValue, setStringValue] = React.useState("");
+    const timeoutId = React.useRef(0);
+    const [needValueChanged, setNeedValueChanged] = React.useState(false);
+    const [needSelection, setNeedSelection] = React.useState(false);
+    const [isFocusField, setIsFocusField] = React.useState(false);
+    const inputElementRef = React.useRef();
+    const refs = (0, core_react_1.useRefs)(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
+    React.useEffect(() => {
+        const formattedValue = FrameworkAccuDraw_1.FrameworkAccuDraw.getFieldDisplayValue(field);
+        setStringValue(formattedValue);
+    }, [field]);
+    const handleChange = React.useCallback((event) => {
+        const value = event.currentTarget.value;
+        // istanbul ignore next
+        if (value === undefined)
+            return;
+        // istanbul ignore else
+        if (stringValue !== value) {
+            setStringValue(value);
+            setNeedValueChanged(true);
+        }
+    }, [stringValue]);
+    const unsetTimeout = () => {
+        // istanbul ignore else
+        if (timeoutId) {
+            window.clearTimeout(timeoutId.current);
+            timeoutId.current = 0;
+        }
+    };
+    React.useEffect(() => {
+        // After setStringValue & re-render
+        // istanbul ignore else
+        if (needValueChanged) {
+            if (valueChangedDelay) {
+                unsetTimeout();
+                timeoutId.current = window.setTimeout(() => {
+                    onValueChanged(stringValue);
+                }, valueChangedDelay);
+            }
+            else {
+                onValueChanged(stringValue);
+            }
+            setNeedValueChanged(false);
+        }
+    }, [onValueChanged, valueChangedDelay, stringValue, needValueChanged]);
+    React.useEffect(() => {
+        // On unmount
+        return () => unsetTimeout();
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        switch (e.key) {
+            case appui_abstract_1.SpecialKey.Escape:
+                onEscPressed && onEscPressed();
+                return;
+            case appui_abstract_1.SpecialKey.Enter:
+                onEnterPressed && onEnterPressed();
+                return;
+        }
+        if ((0, appui_abstract_1.isLetter)(e.key)) {
+            e.preventDefault();
+            KeyboardShortcut_1.KeyboardShortcutManager.processKey(e.key);
+            return;
+        }
+    }, [onEscPressed, onEnterPressed]);
+    React.useEffect(() => {
+        const handleSetFieldValueToUi = (args) => {
+            if (args.field === field && stringValue !== args.formattedValue) {
+                setStringValue(args.formattedValue);
+                // istanbul ignore else
+                if (isFocusField)
+                    setNeedSelection(true);
+            }
+        };
+        return FrameworkAccuDraw_1.FrameworkAccuDraw.onAccuDrawSetFieldValueToUiEvent.addListener(handleSetFieldValueToUi);
+    }, [field, isFocusField, stringValue]);
+    React.useEffect(() => {
+        if (needSelection) {
+            // istanbul ignore else
+            if (inputElementRef.current)
+                inputElementRef.current.select();
+            setNeedSelection(false);
+        }
+    }, [needSelection]);
+    React.useEffect(() => {
+        const handleSetFieldFocus = (args) => {
+            setIsFocusField(args.field === field);
+        };
+        return FrameworkAccuDraw_1.FrameworkAccuDraw.onAccuDrawSetFieldFocusEvent.addListener(handleSetFieldFocus);
+    }, [field]);
+    const inputClassNames = (0, classnames_1.default)("uifw-accudraw-input-field", className);
+    const labelClassNames = (0, classnames_1.default)("uifw-accudraw-input-label", labelCentered && "uifw-label-centered", labelClassName);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { htmlFor: id, className: labelClassNames, style: labelStyle },
+            label,
+            iconSpec && React.createElement(core_react_1.Icon, { iconSpec: iconSpec })),
+        React.createElement(itwinui_react_1.Input, { ...inputProps, ref: refs, id: id, value: stringValue, className: inputClassNames, style: style, autoComplete: "off", onChange: handleChange, onKeyDown: handleKeyDown }),
+        React.createElement("span", { className: "uifw-accudraw-lock" }, isLocked && React.createElement(core_react_1.Icon, { iconSpec: "icon-lock" }))));
+});
+/** Input field for AccuDraw Ui
+ * @beta
+ */
+exports.AccuDrawInputField = ForwardRefAccuDrawInput;
+//# sourceMappingURL=AccuDrawInputField.js.map

package/lib/cjs/appui-react/accudraw/AccuDrawInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawInputField.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawInputField.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,qCAAmC;AACnC,2CAAoC;AACpC,+BAA+B;AAE/B,kDAAyE;AACzE,0DAA6D;AAC7D,wDAA6C;AAC7C,2EAA+E;AAC/E,2DAA4H;AAkC5H,MAAM,uBAAuB,GAAG,KAAK,CAAC,UAAU,CAC9C,SAAS,4BAA4B,CAAC,KAA8B,EAAE,GAAG;IACvE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EACvG,cAAc,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAC3F,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;IACzD,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAEpJ,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,qCAAiB,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QACrE,cAAc,CAAC,cAAc,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAQ,EAAE;QAC1F,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;QAExC,uBAAuB;QACvB,IAAI,KAAK,KAAK,SAAS;YACrB,OAAO;QAET,uBAAuB;QACvB,IAAI,WAAW,KAAK,KAAK,EAAE;YACzB,cAAc,CAAC,KAAK,CAAC,CAAC;YACtB,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,YAAY,GAAG,GAAS,EAAE;QAC9B,uBAAuB;QACvB,IAAI,SAAS,EAAE;YACb,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACvC,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC;SACvB;IACH,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,mCAAmC;QACnC,uBAAuB;QACvB,IAAI,gBAAgB,EAAE;YACpB,IAAI,iBAAiB,EAAE;gBACrB,YAAY,EAAE,CAAC;gBACf,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBACzC,cAAc,CAAC,WAAW,CAAC,CAAC;gBAC9B,CAAC,EAAE,iBAAiB,CAAC,CAAC;aACvB;iBAAM;gBACL,cAAc,CAAC,WAAW,CAAC,CAAC;aAC7B;YACD,mBAAmB,CAAC,KAAK,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,iBAAiB,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa;QACb,OAAO,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAsB,EAAE,EAAE;QACjE,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,2BAAU,CAAC,MAAM;gBACpB,YAAY,IAAI,YAAY,EAAE,CAAC;gBAC/B,OAAO;YACT,KAAK,2BAAU,CAAC,KAAK;gBACnB,cAAc,IAAI,cAAc,EAAE,CAAC;gBACnC,OAAO;SACV;QAED,IAAI,IAAA,yBAAQ,EAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,0CAAuB,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC1C,OAAO;SACR;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,CAAC,IAAwC,EAAE,EAAE;YAC3E,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,IAAI,WAAW,KAAK,IAAI,CAAC,cAAc,EAAE;gBAC/D,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBACpC,uBAAuB;gBACvB,IAAI,YAAY;oBACd,gBAAgB,CAAC,IAAI,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC;QACF,OAAO,qCAAiB,CAAC,gCAAgC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;IACjG,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;IAEvC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,aAAa,EAAE;YACjB,uBAAuB;YACvB,IAAI,eAAe,CAAC,OAAO;gBACzB,eAAe,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACnC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,mBAAmB,GAAG,CAAC,IAAoC,EAAE,EAAE;YACnE,eAAe,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QACxC,CAAC,CAAC;QACF,OAAO,qCAAiB,CAAC,4BAA4B,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACzF,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC;IAC3E,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,2BAA2B,EAC5D,aAAa,IAAI,qBAAqB,EACtC,cAAc,CACf,CAAC;IAEF,OAAO,CACL;QACE,+BAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU;YAC9D,KAAK;YACL,QAAQ,IAAI,oBAAC,iBAAI,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACnC;QACR,oBAAC,qBAAK,OAAK,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAC1D,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAC,KAAK,EAC5D,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,GAAI;QACtD,8BAAM,SAAS,EAAC,oBAAoB,IACjC,QAAQ,IAAI,oBAAC,iBAAI,IAAC,QAAQ,EAAC,WAAW,GAAG,CACrC,CACN,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;GAEG;AACU,QAAA,kBAAkB,GAA2D,uBAAuB,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 AccuDraw\r\n */\r\n\r\nimport \"./AccuDrawInputField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ItemField } from \"@itwin/core-frontend\";\r\nimport { CommonProps, Icon, IconSpec, useRefs } from \"@itwin/core-react\";\r\nimport { isLetter, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { KeyboardShortcutManager } from \"../keyboardshortcut/KeyboardShortcut\";\r\nimport { AccuDrawSetFieldFocusEventArgs, AccuDrawSetFieldValueToUiEventArgs, FrameworkAccuDraw } from \"./FrameworkAccuDraw\";\r\n\r\n/** Properties for [[AccuDrawInputField]] component\r\n * @beta\r\n */\r\nexport interface AccuDrawInputFieldProps extends CommonProps {\r\n  /** Which AccuDraw field this represents */\r\n  field: ItemField;\r\n  /** id for the input element */\r\n  id: string;\r\n  /** Indicates whether field is locked */\r\n  isLocked?: boolean;\r\n  /** label for the input element */\r\n  label?: string;\r\n  /** icon for the input element */\r\n  iconSpec?: IconSpec;\r\n  /** Custom CSS class name for the label */\r\n  labelClassName?: string;\r\n  /** Custom CSS Style for the label */\r\n  labelStyle?: React.CSSProperties;\r\n  /** Center justified label */\r\n  labelCentered?: boolean;\r\n  /** Triggered when the content is changed */\r\n  onValueChanged: (stringValue: string) => void;\r\n  /** Frequency to poll for changes in value, in milliseconds */\r\n  valueChangedDelay?: number;\r\n  /** Listens for <Enter> keypress */\r\n  onEnterPressed?: () => void;\r\n  /** Listens for <Esc> keypress */\r\n  onEscPressed?: () => void;\r\n  /** Provides ability to return reference to HTMLInputElement */\r\n  ref?: React.Ref<HTMLInputElement>;\r\n}\r\n\r\nconst ForwardRefAccuDrawInput = React.forwardRef<HTMLInputElement, AccuDrawInputFieldProps>(\r\n  function ForwardRefAccuDrawInputField(props: AccuDrawInputFieldProps, ref) {\r\n    const { className, style, id, label, iconSpec, labelClassName, labelStyle, labelCentered, field, isLocked,\r\n      onValueChanged, valueChangedDelay, onEnterPressed, onEscPressed, ...inputProps } = props;\r\n    const [stringValue, setStringValue] = React.useState(\"\");\r\n    const timeoutId = React.useRef(0);\r\n    const [needValueChanged, setNeedValueChanged] = React.useState(false);\r\n    const [needSelection, setNeedSelection] = React.useState(false);\r\n    const [isFocusField, setIsFocusField] = React.useState(false);\r\n    const inputElementRef = React.useRef<HTMLInputElement>();\r\n    const refs = useRefs(inputElementRef, ref);  // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n\r\n    React.useEffect(() => {\r\n      const formattedValue = FrameworkAccuDraw.getFieldDisplayValue(field);\r\n      setStringValue(formattedValue);\r\n    }, [field]);\r\n\r\n    const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>): void => {\r\n      const value = event.currentTarget.value;\r\n\r\n      // istanbul ignore next\r\n      if (value === undefined)\r\n        return;\r\n\r\n      // istanbul ignore else\r\n      if (stringValue !== value) {\r\n        setStringValue(value);\r\n        setNeedValueChanged(true);\r\n      }\r\n    }, [stringValue]);\r\n\r\n    const unsetTimeout = (): void => {\r\n      // istanbul ignore else\r\n      if (timeoutId) {\r\n        window.clearTimeout(timeoutId.current);\r\n        timeoutId.current = 0;\r\n      }\r\n    };\r\n\r\n    React.useEffect(() => {\r\n      // After setStringValue & re-render\r\n      // istanbul ignore else\r\n      if (needValueChanged) {\r\n        if (valueChangedDelay) {\r\n          unsetTimeout();\r\n          timeoutId.current = window.setTimeout(() => {\r\n            onValueChanged(stringValue);\r\n          }, valueChangedDelay);\r\n        } else {\r\n          onValueChanged(stringValue);\r\n        }\r\n        setNeedValueChanged(false);\r\n      }\r\n    }, [onValueChanged, valueChangedDelay, stringValue, needValueChanged]);\r\n\r\n    React.useEffect(() => {\r\n      // On unmount\r\n      return () => unsetTimeout();\r\n    }, []);\r\n\r\n    const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\r\n      switch (e.key) {\r\n        case SpecialKey.Escape:\r\n          onEscPressed && onEscPressed();\r\n          return;\r\n        case SpecialKey.Enter:\r\n          onEnterPressed && onEnterPressed();\r\n          return;\r\n      }\r\n\r\n      if (isLetter(e.key)) {\r\n        e.preventDefault();\r\n        KeyboardShortcutManager.processKey(e.key);\r\n        return;\r\n      }\r\n    }, [onEscPressed, onEnterPressed]);\r\n\r\n    React.useEffect(() => {\r\n      const handleSetFieldValueToUi = (args: AccuDrawSetFieldValueToUiEventArgs) => {\r\n        if (args.field === field && stringValue !== args.formattedValue) {\r\n          setStringValue(args.formattedValue);\r\n          // istanbul ignore else\r\n          if (isFocusField)\r\n            setNeedSelection(true);\r\n        }\r\n      };\r\n      return FrameworkAccuDraw.onAccuDrawSetFieldValueToUiEvent.addListener(handleSetFieldValueToUi);\r\n    }, [field, isFocusField, stringValue]);\r\n\r\n    React.useEffect(() => {\r\n      if (needSelection) {\r\n        // istanbul ignore else\r\n        if (inputElementRef.current)\r\n          inputElementRef.current.select();\r\n        setNeedSelection(false);\r\n      }\r\n    }, [needSelection]);\r\n\r\n    React.useEffect(() => {\r\n      const handleSetFieldFocus = (args: AccuDrawSetFieldFocusEventArgs) => {\r\n        setIsFocusField(args.field === field);\r\n      };\r\n      return FrameworkAccuDraw.onAccuDrawSetFieldFocusEvent.addListener(handleSetFieldFocus);\r\n    }, [field]);\r\n\r\n    const inputClassNames = classnames(\"uifw-accudraw-input-field\", className);\r\n    const labelClassNames = classnames(\"uifw-accudraw-input-label\",\r\n      labelCentered && \"uifw-label-centered\",\r\n      labelClassName\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <label htmlFor={id} className={labelClassNames} style={labelStyle}>\r\n          {label}\r\n          {iconSpec && <Icon iconSpec={iconSpec} />}\r\n        </label>\r\n        <Input {...inputProps} ref={refs} id={id} value={stringValue}\r\n          className={inputClassNames} style={style} autoComplete=\"off\"\r\n          onChange={handleChange} onKeyDown={handleKeyDown} />\r\n        <span className=\"uifw-accudraw-lock\" >\r\n          {isLocked && <Icon iconSpec=\"icon-lock\" />}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n);\r\n\r\n/** Input field for AccuDraw Ui\r\n * @beta\r\n */\r\nexport const AccuDrawInputField: (props: AccuDrawInputFieldProps) => JSX.Element | null = ForwardRefAccuDrawInput;\r\n"]}

package/lib/cjs/appui-react/accudraw/AccuDrawInputField.scss

@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+* 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/base/base";
+@import "~@itwin/core-react/lib/cjs/core-react/text/mixins";
+
+.uifw-accudraw-input-label {
+  min-width: 16px;
+  margin-right: 4px;
+
+  display: flex;
+  align-items: center;
+
+  @include uicore-text(leading-2);
+
+  &.uifw-label-centered {
+    justify-content: center;
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+
+    margin-top: 2px;
+    @include uicore-centered;
+  }
+}
+
+.uifw-accudraw-input-field {
+  flex: 1;
+}
+
+.uifw-accudraw-lock {
+  width: 22px;
+  @include uicore-centered;
+}
+
+.uifw-accudraw-x-value {
+  background-color: $buic-accessory-alert;
+  color: $buic-accessory-hollow;
+}
+
+.uifw-accudraw-y-value {
+  background-color: $buic-accessory-success;
+  color: $buic-accessory-hollow;
+}
+
+.uifw-accudraw-z-value {
+  background-color: $buic-accessory-primary;
+  color: $buic-accessory-hollow;
+}
+
+.uifw-accudraw-angle-value {}
+
+.uifw-accudraw-distance-value {}

package/lib/cjs/appui-react/accudraw/AccuDrawKeyboardShortcuts.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import { KeyboardShortcutProps } from "../keyboardshortcut/KeyboardShortcut";
+/** Default AccuDraw Keyboard Shortcuts
+ * @beta
+ */
+export declare class AccuDrawKeyboardShortcuts {
+    /** Get default AccuDraw Keyboard Shortcuts list.
+     */
+    static getDefaultShortcuts(): KeyboardShortcutProps[];
+}
+//# sourceMappingURL=AccuDrawKeyboardShortcuts.d.ts.map

package/lib/cjs/appui-react/accudraw/AccuDrawKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawKeyboardShortcuts.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAI7E;;GAEG;AACH,qBAAa,yBAAyB;IACpC;OACG;WACW,mBAAmB,IAAI,qBAAqB,EAAE;CA2F7D"}

package/lib/cjs/appui-react/accudraw/AccuDrawKeyboardShortcuts.js

@@ -0,0 +1,111 @@
+"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 AccuDraw
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccuDrawKeyboardShortcuts = void 0;
+const AccuDrawCommandItems_1 = require("./AccuDrawCommandItems");
+const FrameworkAccuDraw_1 = require("./FrameworkAccuDraw");
+/** Default AccuDraw Keyboard Shortcuts
+ * @beta
+ */
+class AccuDrawKeyboardShortcuts {
+    /** Get default AccuDraw Keyboard Shortcuts list.
+     */
+    static getDefaultShortcuts() {
+        const keyboardShortcutList = [
+            {
+                key: "a",
+                labelKey: "UiFramework:accuDraw.subMenu",
+                shortcuts: [
+                    {
+                        key: "s",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.lockSmart,
+                    },
+                    {
+                        key: "r",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.setOrigin,
+                    },
+                    {
+                        key: "t",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.changeCompassMode,
+                    },
+                    {
+                        key: "x",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.lockX,
+                        isHidden: FrameworkAccuDraw_1.FrameworkAccuDraw.isPolarModeConditional,
+                    },
+                    {
+                        key: "y",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.lockY,
+                        isHidden: FrameworkAccuDraw_1.FrameworkAccuDraw.isPolarModeConditional,
+                    },
+                    {
+                        key: "z",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.lockZ,
+                        isHidden: FrameworkAccuDraw_1.FrameworkAccuDraw.isPolarModeConditional,
+                    },
+                    {
+                        key: "a",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.lockAngle,
+                        isHidden: FrameworkAccuDraw_1.FrameworkAccuDraw.isRectangularModeConditional,
+                    },
+                    {
+                        key: "d",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.lockDistance,
+                        isHidden: FrameworkAccuDraw_1.FrameworkAccuDraw.isRectangularModeConditional,
+                    },
+                    {
+                        key: "b",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.bumpToolSetting,
+                    },
+                ],
+            },
+            {
+                key: "r",
+                labelKey: "UiFramework:accuDraw.rotateSubMenu",
+                shortcuts: [
+                    {
+                        key: "t",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateTop,
+                        isDisabled: FrameworkAccuDraw_1.FrameworkAccuDraw.isTopRotationConditional,
+                    },
+                    {
+                        key: "s",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateSide,
+                        isDisabled: FrameworkAccuDraw_1.FrameworkAccuDraw.isSideRotationConditional,
+                    },
+                    {
+                        key: "f",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateFront,
+                        isDisabled: FrameworkAccuDraw_1.FrameworkAccuDraw.isFrontRotationConditional,
+                    },
+                    {
+                        key: "v",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateView,
+                        isDisabled: FrameworkAccuDraw_1.FrameworkAccuDraw.isViewRotationConditional,
+                    },
+                    {
+                        key: "c",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateCycle,
+                    },
+                    {
+                        key: "a",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateAxes,
+                    },
+                    {
+                        key: "e",
+                        item: AccuDrawCommandItems_1.AccuDrawCommandItems.rotateToElement,
+                    },
+                ],
+            },
+        ];
+        return keyboardShortcutList;
+    }
+}
+exports.AccuDrawKeyboardShortcuts = AccuDrawKeyboardShortcuts;
+//# sourceMappingURL=AccuDrawKeyboardShortcuts.js.map

package/lib/cjs/appui-react/accudraw/AccuDrawKeyboardShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawKeyboardShortcuts.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawKeyboardShortcuts.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAGH,iEAA8D;AAC9D,2DAAwD;AAExD;;GAEG;AACH,MAAa,yBAAyB;IACpC;OACG;IACI,MAAM,CAAC,mBAAmB;QAC/B,MAAM,oBAAoB,GAA4B;YACpD;gBACE,GAAG,EAAE,GAAG;gBACR,QAAQ,EAAE,8BAA8B;gBACxC,SAAS,EAAE;oBACT;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,SAAS;qBACrC;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,SAAS;qBACrC;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,iBAAiB;qBAC7C;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,KAAK;wBAChC,QAAQ,EAAE,qCAAiB,CAAC,sBAAsB;qBACnD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,KAAK;wBAChC,QAAQ,EAAE,qCAAiB,CAAC,sBAAsB;qBACnD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,KAAK;wBAChC,QAAQ,EAAE,qCAAiB,CAAC,sBAAsB;qBACnD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,SAAS;wBACpC,QAAQ,EAAE,qCAAiB,CAAC,4BAA4B;qBACzD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,YAAY;wBACvC,QAAQ,EAAE,qCAAiB,CAAC,4BAA4B;qBACzD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,eAAe;qBAC3C;iBACF;aACF;YACD;gBACE,GAAG,EAAE,GAAG;gBACR,QAAQ,EAAE,oCAAoC;gBAC9C,SAAS,EAAE;oBACT;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,SAAS;wBACpC,UAAU,EAAE,qCAAiB,CAAC,wBAAwB;qBACvD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,UAAU;wBACrC,UAAU,EAAE,qCAAiB,CAAC,yBAAyB;qBACxD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,WAAW;wBACtC,UAAU,EAAE,qCAAiB,CAAC,0BAA0B;qBACzD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,UAAU;wBACrC,UAAU,EAAE,qCAAiB,CAAC,yBAAyB;qBACxD;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,WAAW;qBACvC;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,UAAU;qBACtC;oBACD;wBACE,GAAG,EAAE,GAAG;wBACR,IAAI,EAAE,2CAAoB,CAAC,eAAe;qBAC3C;iBACF;aACF;SACF,CAAC;QAEF,OAAO,oBAAoB,CAAC;IAC9B,CAAC;CACF;AA9FD,8DA8FC","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 AccuDraw\r\n */\r\n\r\nimport { KeyboardShortcutProps } from \"../keyboardshortcut/KeyboardShortcut\";\r\nimport { AccuDrawCommandItems } from \"./AccuDrawCommandItems\";\r\nimport { FrameworkAccuDraw } from \"./FrameworkAccuDraw\";\r\n\r\n/** Default AccuDraw Keyboard Shortcuts\r\n * @beta\r\n */\r\nexport class AccuDrawKeyboardShortcuts {\r\n  /** Get default AccuDraw Keyboard Shortcuts list.\r\n   */\r\n  public static getDefaultShortcuts(): KeyboardShortcutProps[] {\r\n    const keyboardShortcutList: KeyboardShortcutProps[] = [\r\n      {\r\n        key: \"a\",\r\n        labelKey: \"UiFramework:accuDraw.subMenu\",\r\n        shortcuts: [\r\n          {\r\n            key: \"s\",\r\n            item: AccuDrawCommandItems.lockSmart,\r\n          },\r\n          {\r\n            key: \"r\",\r\n            item: AccuDrawCommandItems.setOrigin,\r\n          },\r\n          {\r\n            key: \"t\",\r\n            item: AccuDrawCommandItems.changeCompassMode,\r\n          },\r\n          {\r\n            key: \"x\",\r\n            item: AccuDrawCommandItems.lockX,\r\n            isHidden: FrameworkAccuDraw.isPolarModeConditional,\r\n          },\r\n          {\r\n            key: \"y\",\r\n            item: AccuDrawCommandItems.lockY,\r\n            isHidden: FrameworkAccuDraw.isPolarModeConditional,\r\n          },\r\n          {\r\n            key: \"z\",\r\n            item: AccuDrawCommandItems.lockZ,\r\n            isHidden: FrameworkAccuDraw.isPolarModeConditional,\r\n          },\r\n          {\r\n            key: \"a\",\r\n            item: AccuDrawCommandItems.lockAngle,\r\n            isHidden: FrameworkAccuDraw.isRectangularModeConditional,\r\n          },\r\n          {\r\n            key: \"d\",\r\n            item: AccuDrawCommandItems.lockDistance,\r\n            isHidden: FrameworkAccuDraw.isRectangularModeConditional,\r\n          },\r\n          {\r\n            key: \"b\",\r\n            item: AccuDrawCommandItems.bumpToolSetting,\r\n          },\r\n        ],\r\n      },\r\n      {\r\n        key: \"r\",\r\n        labelKey: \"UiFramework:accuDraw.rotateSubMenu\",\r\n        shortcuts: [\r\n          {\r\n            key: \"t\",\r\n            item: AccuDrawCommandItems.rotateTop,\r\n            isDisabled: FrameworkAccuDraw.isTopRotationConditional,\r\n          },\r\n          {\r\n            key: \"s\",\r\n            item: AccuDrawCommandItems.rotateSide,\r\n            isDisabled: FrameworkAccuDraw.isSideRotationConditional,\r\n          },\r\n          {\r\n            key: \"f\",\r\n            item: AccuDrawCommandItems.rotateFront,\r\n            isDisabled: FrameworkAccuDraw.isFrontRotationConditional,\r\n          },\r\n          {\r\n            key: \"v\",\r\n            item: AccuDrawCommandItems.rotateView,\r\n            isDisabled: FrameworkAccuDraw.isViewRotationConditional,\r\n          },\r\n          {\r\n            key: \"c\",\r\n            item: AccuDrawCommandItems.rotateCycle,\r\n          },\r\n          {\r\n            key: \"a\",\r\n            item: AccuDrawCommandItems.rotateAxes,\r\n          },\r\n          {\r\n            key: \"e\",\r\n            item: AccuDrawCommandItems.rotateToElement,\r\n          },\r\n        ],\r\n      },\r\n    ];\r\n\r\n    return keyboardShortcutList;\r\n  }\r\n}\r\n"]}

package/lib/cjs/appui-react/accudraw/AccuDrawPopupManager.d.ts

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+import { XAndY } from "@itwin/core-geometry";
+import { AbstractMenuItemProps, OnCancelFunc, OnNumberCommitFunc } from "@itwin/appui-abstract";
+/** AccuDraw Popup Manager class
+ * @alpha
+ */
+export declare class AccuDrawPopupManager {
+    private static _calculatorId;
+    static showMenuButton(id: string, el: HTMLElement, pt: XAndY, menuItemsProps: AbstractMenuItemProps[]): boolean;
+    static hideMenuButton(id: string): boolean;
+    static showCalculator(el: HTMLElement, pt: XAndY, initialValue: number, resultIcon: string, onOk: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+    static hideCalculator(): boolean;
+    static showAngleEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+    static showLengthEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+    static showHeightEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean;
+}
+//# sourceMappingURL=AccuDrawPopupManager.d.ts.map

package/lib/cjs/appui-react/accudraw/AccuDrawPopupManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawPopupManager.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawPopupManager.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAE,qBAAqB,EAAqB,YAAY,EAAE,kBAAkB,EAAqB,MAAM,uBAAuB,CAAC;AAWtI;;GAEG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,MAAM,CAAC,aAAa,CAAgB;WAE9B,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,GAAG,OAAO;WAiBxG,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;WAInC,cAAc,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,GAAG,OAAO;WAe/I,cAAc,IAAI,OAAO;WAIzB,eAAe,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,GAAG,OAAO;WAKzH,gBAAgB,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,GAAG,OAAO;WAK1H,gBAAgB,CAAC,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,YAAY,GAAG,OAAO;CAIzI"}

package/lib/cjs/appui-react/accudraw/AccuDrawPopupManager.js

@@ -0,0 +1,65 @@
+"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 AccuDraw
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccuDrawPopupManager = void 0;
+const React = require("react");
+const core_frontend_1 = require("@itwin/core-frontend");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const PopupManager_1 = require("../popup/PopupManager");
+const MenuItem_1 = require("../shared/MenuItem");
+const CalculatorPopup_1 = require("./CalculatorPopup");
+const MenuButtonPopup_1 = require("./MenuButtonPopup");
+const angle_svg_sprite_1 = require("./angle.svg?sprite");
+const distance_svg_sprite_1 = require("./distance.svg?sprite");
+const height_2_svg_sprite_1 = require("./height-2.svg?sprite");
+/** AccuDraw Popup Manager class
+ * @alpha
+ */
+class AccuDrawPopupManager {
+    static showMenuButton(id, el, pt, menuItemsProps) {
+        const menuItems = MenuItem_1.MenuItemHelpers.createMenuItems(menuItemsProps);
+        const menuContent = MenuItem_1.MenuItemHelpers.createMenuItemNodes(menuItems);
+        const component = (React.createElement(MenuButtonPopup_1.MenuButtonPopup, { id: id, el: el, pt: pt, offset: PopupManager_1.PopupManager.defaultOffset, content: menuContent }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager_1.PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideMenuButton(id) {
+        return PopupManager_1.PopupManager.removePopup(id);
+    }
+    static showCalculator(el, pt, initialValue, resultIcon, onOk, onCancel) {
+        const id = AccuDrawPopupManager._calculatorId;
+        const component = (React.createElement(CalculatorPopup_1.CalculatorPopup, { id: id, el: el, pt: pt, offset: PopupManager_1.PopupManager.defaultOffset, initialValue: initialValue, resultIcon: resultIcon, onOk: onOk, onCancel: onCancel }));
+        const popupInfo = {
+            id, pt, component, parentDocument: el.ownerDocument,
+        };
+        PopupManager_1.PopupManager.addOrUpdatePopup(popupInfo);
+        return true;
+    }
+    static hideCalculator() {
+        return PopupManager_1.PopupManager.removePopup(AccuDrawPopupManager._calculatorId);
+    }
+    static showAngleEditor(el, pt, value, onCommit, onCancel) {
+        const propertyDescription = new core_frontend_1.AngleDescription(undefined, undefined, appui_abstract_1.IconSpecUtilities.createSvgIconSpec(angle_svg_sprite_1.default));
+        return PopupManager_1.PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
+    }
+    static showLengthEditor(el, pt, value, onCommit, onCancel) {
+        const propertyDescription = new core_frontend_1.LengthDescription(undefined, undefined, appui_abstract_1.IconSpecUtilities.createSvgIconSpec(distance_svg_sprite_1.default));
+        return PopupManager_1.PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
+    }
+    static showHeightEditor(el, pt, value, onCommit, onCancel) {
+        const propertyDescription = new core_frontend_1.LengthDescription(undefined, undefined, appui_abstract_1.IconSpecUtilities.createSvgIconSpec(height_2_svg_sprite_1.default));
+        return PopupManager_1.PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit, onCancel);
+    }
+}
+exports.AccuDrawPopupManager = AccuDrawPopupManager;
+AccuDrawPopupManager._calculatorId = "Calculator";
+//# sourceMappingURL=AccuDrawPopupManager.js.map

package/lib/cjs/appui-react/accudraw/AccuDrawPopupManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawPopupManager.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawPopupManager.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 AccuDraw\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { XAndY } from \"@itwin/core-geometry\";\r\nimport { AngleDescription, LengthDescription } from \"@itwin/core-frontend\";\r\nimport { AbstractMenuItemProps, IconSpecUtilities, OnCancelFunc, OnNumberCommitFunc, OnValueCommitFunc } from \"@itwin/appui-abstract\";\r\n\r\nimport { PopupInfo, PopupManager } from \"../popup/PopupManager\";\r\nimport { MenuItemHelpers } from \"../shared/MenuItem\";\r\nimport { CalculatorPopup } from \"./CalculatorPopup\";\r\nimport { MenuButtonPopup } from \"./MenuButtonPopup\";\r\n\r\nimport angleIcon from \"./angle.svg?sprite\";\r\nimport lengthIcon from \"./distance.svg?sprite\";\r\nimport heightIcon from \"./height-2.svg?sprite\";\r\n\r\n/** AccuDraw Popup Manager class\r\n * @alpha\r\n */\r\nexport class AccuDrawPopupManager {\r\n  private static _calculatorId = \"Calculator\";\r\n\r\n  public static showMenuButton(id: string, el: HTMLElement, pt: XAndY, menuItemsProps: AbstractMenuItemProps[]): boolean {\r\n    const menuItems = MenuItemHelpers.createMenuItems(menuItemsProps);\r\n    const menuContent = MenuItemHelpers.createMenuItemNodes(menuItems);\r\n\r\n    const component = (\r\n      <MenuButtonPopup id={id} el={el} pt={pt} offset={PopupManager.defaultOffset}\r\n        content={menuContent} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideMenuButton(id: string): boolean {\r\n    return PopupManager.removePopup(id);\r\n  }\r\n\r\n  public static showCalculator(el: HTMLElement, pt: XAndY, initialValue: number, resultIcon: string, onOk: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean {\r\n    const id = AccuDrawPopupManager._calculatorId;\r\n    const component = (\r\n      <CalculatorPopup id={id} el={el} pt={pt} offset={PopupManager.defaultOffset}\r\n        initialValue={initialValue} resultIcon={resultIcon} onOk={onOk} onCancel={onCancel} />\r\n    );\r\n\r\n    const popupInfo: PopupInfo = {\r\n      id, pt, component, parentDocument: el.ownerDocument,\r\n    };\r\n    PopupManager.addOrUpdatePopup(popupInfo);\r\n\r\n    return true;\r\n  }\r\n\r\n  public static hideCalculator(): boolean {\r\n    return PopupManager.removePopup(AccuDrawPopupManager._calculatorId);\r\n  }\r\n\r\n  public static showAngleEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean {\r\n    const propertyDescription = new AngleDescription(undefined, undefined, IconSpecUtilities.createSvgIconSpec(angleIcon));\r\n    return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit as OnValueCommitFunc, onCancel);\r\n  }\r\n\r\n  public static showLengthEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean {\r\n    const propertyDescription = new LengthDescription(undefined, undefined, IconSpecUtilities.createSvgIconSpec(lengthIcon));\r\n    return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit as OnValueCommitFunc, onCancel);\r\n  }\r\n\r\n  public static showHeightEditor(el: HTMLElement, pt: XAndY, value: number, onCommit: OnNumberCommitFunc, onCancel: OnCancelFunc): boolean {\r\n    const propertyDescription = new LengthDescription(undefined, undefined, IconSpecUtilities.createSvgIconSpec(heightIcon));\r\n    return PopupManager.showInputEditor(el, pt, value, propertyDescription, onCommit as OnValueCommitFunc, onCancel);\r\n  }\r\n}\r\n"]}

package/lib/cjs/appui-react/accudraw/AccuDrawUiSettings.d.ts

@@ -0,0 +1,62 @@
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+/// <reference types="react" />
+import { ColorDef } from "@itwin/core-common";
+import { IconSpec } from "@itwin/core-react";
+/** AccuDraw User Interface Settings
+ * @beta
+ */
+export interface AccuDrawUiSettings {
+    /** X field style */
+    xStyle?: React.CSSProperties;
+    /** Y field style */
+    yStyle?: React.CSSProperties;
+    /** Z field style */
+    zStyle?: React.CSSProperties;
+    /** Angle field style */
+    angleStyle?: React.CSSProperties;
+    /** Distance field style */
+    distanceStyle?: React.CSSProperties;
+    /** X field background color */
+    xBackgroundColor?: ColorDef | string;
+    /** Y field background color */
+    yBackgroundColor?: ColorDef | string;
+    /** Z field background color */
+    zBackgroundColor?: ColorDef | string;
+    /** Angle field background color */
+    angleBackgroundColor?: ColorDef | string;
+    /** Distance field background color */
+    distanceBackgroundColor?: ColorDef | string;
+    /** X field foreground color */
+    xForegroundColor?: ColorDef | string;
+    /** Y field foreground color */
+    yForegroundColor?: ColorDef | string;
+    /** Z field foreground color */
+    zForegroundColor?: ColorDef | string;
+    /** Angle field foreground color */
+    angleForegroundColor?: ColorDef | string;
+    /** Distance field foreground color */
+    distanceForegroundColor?: ColorDef | string;
+    /** X field label */
+    xLabel?: string;
+    /** Y field label */
+    yLabel?: string;
+    /** Z field label */
+    zLabel?: string;
+    /** Angle field label */
+    angleLabel?: string;
+    /** Distance field label */
+    distanceLabel?: string;
+    /** X field icon */
+    xIcon?: IconSpec;
+    /** Y field icon */
+    yIcon?: IconSpec;
+    /** Z field icon */
+    zIcon?: IconSpec;
+    /** Angle field icon */
+    angleIcon?: IconSpec;
+    /** Distance field icon */
+    distanceIcon?: IconSpec;
+}
+//# sourceMappingURL=AccuDrawUiSettings.d.ts.map

package/lib/cjs/appui-react/accudraw/AccuDrawUiSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawUiSettings.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawUiSettings.ts"],"names":[],"mappings":"AAIA;;GAEG;;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oBAAoB;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,oBAAoB;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,oBAAoB;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,wBAAwB;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,2BAA2B;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzC,sCAAsC;IACtC,uBAAuB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE5C,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,mCAAmC;IACnC,oBAAoB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzC,sCAAsC;IACtC,uBAAuB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE5C,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,mBAAmB;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,uBAAuB;IACvB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB"}

package/lib/cjs/appui-react/accudraw/AccuDrawUiSettings.js

@@ -0,0 +1,10 @@
+"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 AccuDraw
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=AccuDrawUiSettings.js.map

package/lib/cjs/appui-react/accudraw/AccuDrawUiSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawUiSettings.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawUiSettings.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG","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 AccuDraw\r\n */\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { IconSpec } from \"@itwin/core-react\";\r\n\r\n/** AccuDraw User Interface Settings\r\n * @beta\r\n */\r\nexport interface AccuDrawUiSettings {\r\n  /** X field style */\r\n  xStyle?: React.CSSProperties;\r\n  /** Y field style */\r\n  yStyle?: React.CSSProperties;\r\n  /** Z field style */\r\n  zStyle?: React.CSSProperties;\r\n  /** Angle field style */\r\n  angleStyle?: React.CSSProperties;\r\n  /** Distance field style */\r\n  distanceStyle?: React.CSSProperties;\r\n\r\n  /** X field background color */\r\n  xBackgroundColor?: ColorDef | string;\r\n  /** Y field background color */\r\n  yBackgroundColor?: ColorDef | string;\r\n  /** Z field background color */\r\n  zBackgroundColor?: ColorDef | string;\r\n  /** Angle field background color */\r\n  angleBackgroundColor?: ColorDef | string;\r\n  /** Distance field background color */\r\n  distanceBackgroundColor?: ColorDef | string;\r\n\r\n  /** X field foreground color */\r\n  xForegroundColor?: ColorDef | string;\r\n  /** Y field foreground color */\r\n  yForegroundColor?: ColorDef | string;\r\n  /** Z field foreground color */\r\n  zForegroundColor?: ColorDef | string;\r\n  /** Angle field foreground color */\r\n  angleForegroundColor?: ColorDef | string;\r\n  /** Distance field foreground color */\r\n  distanceForegroundColor?: ColorDef | string;\r\n\r\n  /** X field label */\r\n  xLabel?: string;\r\n  /** Y field label */\r\n  yLabel?: string;\r\n  /** Z field label */\r\n  zLabel?: string;\r\n  /** Angle field label */\r\n  angleLabel?: string;\r\n  /** Distance field label */\r\n  distanceLabel?: string;\r\n\r\n  /** X field icon */\r\n  xIcon?: IconSpec;\r\n  /** Y field icon */\r\n  yIcon?: IconSpec;\r\n  /** Z field icon */\r\n  zIcon?: IconSpec;\r\n  /** Angle field icon */\r\n  angleIcon?: IconSpec;\r\n  /** Distance field icon */\r\n  distanceIcon?: IconSpec;\r\n}\r\n"]}

package/lib/cjs/appui-react/accudraw/AccuDrawWidget.d.ts

@@ -0,0 +1,19 @@
+/** @packageDocumentation
+ * @module AccuDraw
+ */
+/// <reference types="react" />
+import { ConfigurableCreateInfo } from "../configurableui/ConfigurableUiControl";
+import { WidgetControl } from "../widgets/WidgetControl";
+/** AccuDraw Widget Control
+ * @beta
+ */
+export declare class AccuDrawWidgetControl extends WidgetControl {
+    static id: string;
+    static get label(): string;
+    constructor(info: ConfigurableCreateInfo, options: any);
+}
+/** AccuDraw Widget displays [[AccuDrawFieldContainer]] for AccuDraw Ui
+ * @beta
+ */
+export declare function AccuDrawWidget(): JSX.Element;
+//# sourceMappingURL=AccuDrawWidget.d.ts.map

package/lib/cjs/appui-react/accudraw/AccuDrawWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawWidget.d.ts","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawWidget.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAMH,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGzD;;GAEG;AACH,qBAAa,qBAAsB,SAAQ,aAAa;IAEtD,OAAc,EAAE,SAAoB;IAEpC,WAAkB,KAAK,IAAI,MAAM,CAEhC;gBAEW,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG;CAKvD;AAED;;GAEG;AACH,wBAAgB,cAAc,gBAgB7B"}

package/lib/cjs/appui-react/accudraw/AccuDrawWidget.js

@@ -0,0 +1,45 @@
+"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 AccuDraw
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccuDrawWidget = exports.AccuDrawWidgetControl = void 0;
+const React = require("react");
+const core_react_1 = require("@itwin/core-react");
+const AccuDrawFieldContainer_1 = require("./AccuDrawFieldContainer");
+const WidgetControl_1 = require("../widgets/WidgetControl");
+const UiFramework_1 = require("../UiFramework");
+/** AccuDraw Widget Control
+ * @beta
+ */
+class AccuDrawWidgetControl extends WidgetControl_1.WidgetControl {
+    constructor(info, options) {
+        super(info, options);
+        this.reactNode = React.createElement(AccuDrawWidget, null);
+    }
+    static get label() {
+        return UiFramework_1.UiFramework.translate("accuDraw.dialogTitle");
+    }
+}
+exports.AccuDrawWidgetControl = AccuDrawWidgetControl;
+AccuDrawWidgetControl.id = "AccuDrawWidget";
+/** AccuDraw Widget displays [[AccuDrawFieldContainer]] for AccuDraw Ui
+ * @beta
+ */
+function AccuDrawWidget() {
+    const [orientation, setOrientation] = React.useState(core_react_1.Orientation.Vertical);
+    const breakpoint = 400;
+    // istanbul ignore next - currently unable to replicate resizing in unit test
+    const handleResize = React.useCallback((w, _h) => {
+        setOrientation(w <= breakpoint ? core_react_1.Orientation.Vertical : core_react_1.Orientation.Horizontal);
+    }, []);
+    const ref = (0, core_react_1.useResizeObserver)(handleResize);
+    return (React.createElement("div", { ref: ref },
+        React.createElement(AccuDrawFieldContainer_1.AccuDrawFieldContainer, { orientation: orientation })));
+}
+exports.AccuDrawWidget = AccuDrawWidget;
+//# sourceMappingURL=AccuDrawWidget.js.map

package/lib/cjs/appui-react/accudraw/AccuDrawWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccuDrawWidget.js","sourceRoot":"","sources":["../../../../src/appui-react/accudraw/AccuDrawWidget.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,kDAAmE;AAEnE,qEAAkE;AAElE,4DAAyD;AACzD,gDAA6C;AAE7C;;GAEG;AACH,MAAa,qBAAsB,SAAQ,6BAAa;IAQtD,YAAY,IAA4B,EAAE,OAAY;QACpD,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAErB,IAAI,CAAC,SAAS,GAAG,oBAAC,cAAc,OAAG,CAAC;IACtC,CAAC;IARM,MAAM,KAAK,KAAK;QACrB,OAAO,yBAAW,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;IACvD,CAAC;;AANH,sDAaC;AAXe,wBAAE,GAAG,gBAAgB,CAAC;AAatC;;GAEG;AACH,SAAgB,cAAc;IAC5B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,wBAAW,CAAC,QAAQ,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,GAAG,CAAC;IAEvB,6EAA6E;IAC7E,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAS,EAAE,EAAU,EAAE,EAAE;QAC/D,cAAc,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,wBAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAW,CAAC,UAAU,CAAC,CAAC;IAClF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,GAAG,GAAG,IAAA,8BAAiB,EAAiB,YAAY,CAAC,CAAC;IAE5D,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG;QACX,oBAAC,+CAAsB,IAAC,WAAW,EAAE,WAAW,GAAI,CAChD,CACP,CAAC;AACJ,CAAC;AAhBD,wCAgBC","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 AccuDraw\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Orientation, useResizeObserver } from \"@itwin/core-react\";\r\n\r\nimport { AccuDrawFieldContainer } from \"./AccuDrawFieldContainer\";\r\nimport { ConfigurableCreateInfo } from \"../configurableui/ConfigurableUiControl\";\r\nimport { WidgetControl } from \"../widgets/WidgetControl\";\r\nimport { UiFramework } from \"../UiFramework\";\r\n\r\n/** AccuDraw Widget Control\r\n * @beta\r\n */\r\nexport class AccuDrawWidgetControl extends WidgetControl {\r\n\r\n  public static id = \"AccuDrawWidget\";\r\n\r\n  public static get label(): string {\r\n    return UiFramework.translate(\"accuDraw.dialogTitle\");\r\n  }\r\n\r\n  constructor(info: ConfigurableCreateInfo, options: any) {\r\n    super(info, options);\r\n\r\n    this.reactNode = <AccuDrawWidget />;\r\n  }\r\n}\r\n\r\n/** AccuDraw Widget displays [[AccuDrawFieldContainer]] for AccuDraw Ui\r\n * @beta\r\n */\r\nexport function AccuDrawWidget() {\r\n  const [orientation, setOrientation] = React.useState(Orientation.Vertical);\r\n  const breakpoint = 400;\r\n\r\n  // istanbul ignore next - currently unable to replicate resizing in unit test\r\n  const handleResize = React.useCallback((w: number, _h: number) => {\r\n    setOrientation(w <= breakpoint ? Orientation.Vertical : Orientation.Horizontal);\r\n  }, []);\r\n\r\n  const ref = useResizeObserver<HTMLDivElement>(handleResize);\r\n\r\n  return (\r\n    <div ref={ref}>\r\n      <AccuDrawFieldContainer orientation={orientation} />\r\n    </div>\r\n  );\r\n}\r\n"]}