@itwin/appui-react 4.8.3 → 4.9.0

package/lib/cjs/appui-react/layout/footer/tool-assistance/Instruction.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Instruction.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceInstruction]] component.
+ * @internal
+ */
+export interface ToolAssistanceInstructionProps extends CommonProps {
+    /** Image for instruction */
+    image: React.ReactNode;
+    /** Indicates whether instruction is new */
+    isNew?: boolean;
+    /** Text for instruction */
+    text: string;
+}
+/** Tool assistance instruction used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistanceInstruction extends React.PureComponent<ToolAssistanceInstructionProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Instruction.d.ts.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/Instruction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Instruction.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Instruction.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AACH,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IACjE,4BAA4B;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,yBAA0B,SAAQ,KAAK,CAAC,aAAa,CAAC,8BAA8B,CAAC;IAChF,MAAM;CAiBvB"}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Instruction.js

@@ -0,0 +1,31 @@
+"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 ToolAssistance
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolAssistanceInstruction = void 0;
+require("./Instruction.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Item_1 = require("./Item");
+const NewDot_1 = require("./NewDot");
+/** Tool assistance instruction used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+class ToolAssistanceInstruction extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-toolAssistance-instruction", this.props.className);
+        const textClassName = this.props.isNew ? "nz-text-new" : undefined;
+        return (React.createElement(Item_1.ToolAssistanceItem, { className: className, style: this.props.style },
+            React.createElement("span", { className: "nz-image" },
+                this.props.isNew && React.createElement(NewDot_1.NewDot, null),
+                this.props.image),
+            React.createElement("span", { className: textClassName }, this.props.text)));
+    }
+}
+exports.ToolAssistanceInstruction = ToolAssistanceInstruction;
+//# sourceMappingURL=Instruction.js.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/Instruction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Instruction.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Instruction.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,8BAA4B;AAC5B,2CAAoC;AACpC,+BAA+B;AAE/B,iCAA4C;AAC5C,qCAAkC;AAclC;;GAEG;AACH,MAAa,yBAA0B,SAAQ,KAAK,CAAC,aAA6C;IAChF,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,sCAAsC,EACtC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnE,OAAO,CACL,oBAAC,yBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC/D,8BAAM,SAAS,EAAC,UAAU;gBACvB,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,oBAAC,eAAM,OAAG;gBAC9B,IAAI,CAAC,KAAK,CAAC,KAAK,CACZ;YACP,8BAAM,SAAS,EAAE,aAAa,IAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAQ,CACrC,CACtB,CAAC;IACJ,CAAC;CACF;AAlBD,8DAkBC","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 ToolAssistance\n */\n\nimport \"./Instruction.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { ToolAssistanceItem } from \"./Item\";\nimport { NewDot } from \"./NewDot\";\n\n/** Properties of [[ToolAssistanceInstruction]] component.\n * @internal\n */\nexport interface ToolAssistanceInstructionProps extends CommonProps {\n  /** Image for instruction */\n  image: React.ReactNode;\n  /** Indicates whether instruction is new */\n  isNew?: boolean;\n  /** Text for instruction */\n  text: string;\n}\n\n/** Tool assistance instruction used in [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport class ToolAssistanceInstruction extends React.PureComponent<ToolAssistanceInstructionProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-instruction\",\n      this.props.className\n    );\n    const textClassName = this.props.isNew ? \"nz-text-new\" : undefined;\n\n    return (\n      <ToolAssistanceItem className={className} style={this.props.style}>\n        <span className=\"nz-image\">\n          {this.props.isNew && <NewDot />}\n          {this.props.image}\n        </span>\n        <span className={textClassName}>{this.props.text}</span>\n      </ToolAssistanceItem>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Instruction.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "../variables";
+
+.nz-footer-toolAssistance-instruction {
+  display: grid;
+  align-items: center;
+  grid-gap: 6px;
+  grid-auto-flow: column;
+  grid-template-columns: 48px 1fr;
+  line-height: 16px;
+  font-size: $text-font-size;
+  position: relative;
+
+  > .nz-image {
+    margin: auto;
+
+    > .nz-footer-toolAssistance-newDot {
+      position: absolute;
+      top: 12px;
+      left: -2px;
+    }
+  }
+
+  > .nz-text-new {
+    font-weight: bold;
+  }
+}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Item.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Item.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceItem]] component.
+ * @internal
+ */
+export interface ToolAssistanceItemProps extends CommonProps {
+    /** Assistance instructions or components */
+    children?: React.ReactNode;
+}
+/** Tool assistance item used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistanceItem extends React.PureComponent<ToolAssistanceItemProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Item.d.ts.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Item.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC;IAClE,MAAM;CAYvB"}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Item.js

@@ -0,0 +1,24 @@
+"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 ToolAssistance
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolAssistanceItem = void 0;
+require("./Item.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Tool assistance item used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+class ToolAssistanceItem extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-toolAssistance-item", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style }, this.props.children));
+    }
+}
+exports.ToolAssistanceItem = ToolAssistanceItem;
+//# sourceMappingURL=Item.js.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Item.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,uBAAqB;AACrB,2CAAoC;AACpC,+BAA+B;AAW/B;;GAEG;AACH,MAAa,kBAAmB,SAAQ,KAAK,CAAC,aAAsC;IAClE,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,+BAA+B,EAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC/C,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;CACF;AAbD,gDAaC","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 ToolAssistance\n */\n\nimport \"./Item.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[ToolAssistanceItem]] component.\n * @internal\n */\nexport interface ToolAssistanceItemProps extends CommonProps {\n  /** Assistance instructions or components */\n  children?: React.ReactNode;\n}\n\n/** Tool assistance item used in [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport class ToolAssistanceItem extends React.PureComponent<ToolAssistanceItemProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-item\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Item.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-footer-toolAssistance-item {
+  min-height: 27px;
+  padding-left: 5px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+
+  display: grid;
+  align-items: center;
+}

package/lib/cjs/appui-react/layout/footer/tool-assistance/NewDot.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./NewDot.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** 'New' dot used in Tool assistance instruction component.
+ * @internal
+ */
+export declare class NewDot extends React.PureComponent<CommonProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=NewDot.d.ts.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/NewDot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewDot.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/NewDot.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,qBAAa,MAAO,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;IAC1C,MAAM;CAQvB"}

package/lib/cjs/appui-react/layout/footer/tool-assistance/NewDot.js

@@ -0,0 +1,24 @@
+"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 ToolAssistance
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewDot = void 0;
+require("./NewDot.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** 'New' dot used in Tool assistance instruction component.
+ * @internal
+ */
+class NewDot extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-toolAssistance-newDot", this.props.className);
+        return React.createElement("span", { className: className, style: this.props.style });
+    }
+}
+exports.NewDot = NewDot;
+//# sourceMappingURL=NewDot.js.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/NewDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewDot.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/NewDot.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAG/B;;GAEG;AACH,MAAa,MAAO,SAAQ,KAAK,CAAC,aAA0B;IAC1C,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,iCAAiC,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,8BAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IACjE,CAAC;CACF;AATD,wBASC","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 ToolAssistance\n */\n\nimport \"./NewDot.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** 'New' dot used in Tool assistance instruction component.\n * @internal\n */\nexport class NewDot extends React.PureComponent<CommonProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-newDot\",\n      this.props.className\n    );\n\n    return <span className={className} style={this.props.style} />;\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/tool-assistance/NewDot.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+.nz-footer-toolAssistance-newDot {
+  height: 5px;
+  width: 5px;
+  background-color: $buic-foreground-success;
+  border-radius: 50%;
+  display: inline-block;
+}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Separator.d.ts

@@ -0,0 +1,20 @@
+/** @packageDocumentation
+ * @module ToolAssistance
+ */
+import "./Separator.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[ToolAssistanceSeparator]] component.
+ * @internal
+ */
+export interface ToolAssistanceSeparatorProps extends CommonProps {
+    /** Separator label. */
+    children?: string;
+}
+/** Tool assistance item separator used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+export declare class ToolAssistanceSeparator extends React.PureComponent<ToolAssistanceSeparatorProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Separator.d.ts.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Separator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,4BAA6B,SAAQ,WAAW;IAC/D,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,uBAAwB,SAAQ,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC;IAC5E,MAAM;CAavB"}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Separator.js

@@ -0,0 +1,26 @@
+"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 ToolAssistance
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolAssistanceSeparator = void 0;
+require("./Separator.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Tool assistance item separator used in [[ToolAssistanceDialog]] component.
+ * @internal
+ */
+class ToolAssistanceSeparator extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-toolAssistance-separator", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            React.createElement("div", { className: "nz-label" }, this.props.children),
+            React.createElement("div", { className: "nz-separator" })));
+    }
+}
+exports.ToolAssistanceSeparator = ToolAssistanceSeparator;
+//# sourceMappingURL=Separator.js.map

package/lib/cjs/appui-react/layout/footer/tool-assistance/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/tool-assistance/Separator.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAW/B;;GAEG;AACH,MAAa,uBAAwB,SAAQ,KAAK,CAAC,aAA2C;IAC5E,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,oCAAoC,EACpC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAChD,6BAAK,SAAS,EAAC,UAAU,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO;YACrD,6BAAK,SAAS,EAAC,cAAc,GAAG,CAC5B,CACP,CAAC;IACJ,CAAC;CACF;AAdD,0DAcC","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 ToolAssistance\n */\n\nimport \"./Separator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[ToolAssistanceSeparator]] component.\n * @internal\n */\nexport interface ToolAssistanceSeparatorProps extends CommonProps {\n  /** Separator label. */\n  children?: string;\n}\n\n/** Tool assistance item separator used in [[ToolAssistanceDialog]] component.\n * @internal\n */\nexport class ToolAssistanceSeparator extends React.PureComponent<ToolAssistanceSeparatorProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-toolAssistance-separator\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        <div className=\"nz-label\">{this.props.children}</div>\n        <div className=\"nz-separator\" />\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Separator.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/typography";
+
+.nz-footer-toolAssistance-separator {
+  margin-top: 18px;
+  margin-bottom: 8px;
+
+  > .nz-label {
+    @include title;
+  }
+
+  > .nz-separator {
+    height: 1px;
+    width: 100%;
+    background-color: var(--iui-color-border-subtle);
+  }
+}

package/lib/cjs/appui-react/layout/outline/PanelOutline.d.ts

@@ -0,0 +1,10 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./PanelOutline.scss";
+import * as React from "react";
+/** @internal */
+export declare function PanelOutline(): React.JSX.Element;
+/** @internal */
+export declare function useHidden(): boolean;
+//# sourceMappingURL=PanelOutline.d.ts.map

package/lib/cjs/appui-react/layout/outline/PanelOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelOutline.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/PanelOutline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,gBAAgB;AAChB,wBAAgB,YAAY,sBAyB3B;AAED,gBAAgB;AAChB,wBAAgB,SAAS,YAuBxB"}

package/lib/cjs/appui-react/layout/outline/PanelOutline.js

@@ -0,0 +1,69 @@
+"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 WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHidden = exports.PanelOutline = void 0;
+require("./PanelOutline.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const DragManager_1 = require("../base/DragManager");
+const Panel_1 = require("../widget-panels/Panel");
+const PanelState_1 = require("../state/PanelState");
+const DropTargetState_1 = require("../state/DropTargetState");
+const LayoutStore_1 = require("../base/LayoutStore");
+const SendBack_1 = require("../widget/SendBack");
+/** @internal */
+function PanelOutline() {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const isHorizontal = (0, Panel_1.isHorizontalPanelSide)(side);
+    const span = (0, LayoutStore_1.useLayout)((state) => {
+        const panel = state.panels[side];
+        return (0, PanelState_1.isHorizontalPanelState)(panel) ? panel.span : false;
+    });
+    const hidden = useHidden();
+    const className = (0, classnames_1.default)("nz-outline-panelOutline", hidden && "nz-hidden", `nz-${side}`, span && "nz-span");
+    const size = useSize();
+    return (React.createElement("div", { className: className, style: {
+            width: isHorizontal ? undefined : size,
+            height: isHorizontal ? size : undefined,
+        } }));
+}
+exports.PanelOutline = PanelOutline;
+/** @internal */
+function useHidden() {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const targeted = (0, DragManager_1.useTargeted)();
+    const activeHomeState = (0, SendBack_1.useSendBackHomeState)();
+    return React.useMemo(() => {
+        if (activeHomeState) {
+            if (activeHomeState.side === side &&
+                activeHomeState.widgetId === undefined &&
+                activeHomeState.sectionIndex === undefined)
+                return false;
+        }
+        if (!targeted)
+            return true;
+        if (!(0, DropTargetState_1.isPanelDropTargetState)(targeted))
+            return true;
+        if (targeted.side !== side)
+            return true;
+        return false;
+    }, [side, targeted, activeHomeState]);
+}
+exports.useHidden = useHidden;
+function useSize() {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    return (0, LayoutStore_1.useLayout)((state) => {
+        const panel = state.panels[side];
+        return panel.size !== undefined ? panel.size : panel.minSize;
+    });
+}
+//# sourceMappingURL=PanelOutline.js.map

package/lib/cjs/appui-react/layout/outline/PanelOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelOutline.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/PanelOutline.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA6B;AAC7B,2CAAoC;AACpC,+BAA+B;AAC/B,sDAA6C;AAC7C,qDAAkD;AAClD,kDAGgC;AAChC,oDAA6D;AAC7D,8DAAkE;AAClE,qDAAgD;AAChD,iDAA0D;AAE1D,gBAAgB;AAChB,SAAgB,YAAY;IAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,IAAA,qBAAM,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACf,MAAM,YAAY,GAAG,IAAA,6BAAqB,EAAC,IAAI,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,OAAO,IAAA,mCAAsB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5D,CAAC,CAAC,CAAC;IACH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,yBAAyB,EACzB,MAAM,IAAI,WAAW,EACrB,MAAM,IAAI,EAAE,EACZ,IAAI,IAAI,SAAS,CAClB,CAAC;IACF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,OAAO,CACL,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YACtC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SACxC,GACD,CACH,CAAC;AACJ,CAAC;AAzBD,oCAyBC;AAED,gBAAgB;AAChB,SAAgB,SAAS;IACvB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,IAAA,yBAAW,GAAE,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAA,+BAAoB,GAAE,CAAC;IAE/C,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,eAAe,EAAE;YACnB,IACE,eAAe,CAAC,IAAI,KAAK,IAAI;gBAC7B,eAAe,CAAC,QAAQ,KAAK,SAAS;gBACtC,eAAe,CAAC,YAAY,KAAK,SAAS;gBAE1C,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC;QAE3B,IAAI,CAAC,IAAA,wCAAsB,EAAC,QAAQ,CAAC;YAAE,OAAO,IAAI,CAAC;QAEnD,IAAI,QAAQ,CAAC,IAAI,KAAK,IAAI;YAAE,OAAO,IAAI,CAAC;QAExC,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;AACxC,CAAC;AAvBD,8BAuBC;AAED,SAAS,OAAO;IACd,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAgB,CAAC,CAAC;IAChD,IAAA,qBAAM,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACf,OAAO,IAAA,uBAAS,EAAC,CAAC,KAAK,EAAE,EAAE;QACzB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,OAAO,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;IAC/D,CAAC,CAAC,CAAC;AACL,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 WidgetPanels\n */\n\nimport \"./PanelOutline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport { useTargeted } from \"../base/DragManager\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { isHorizontalPanelState } from \"../state/PanelState\";\nimport { isPanelDropTargetState } from \"../state/DropTargetState\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { useSendBackHomeState } from \"../widget/SendBack\";\n\n/** @internal */\nexport function PanelOutline() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const isHorizontal = isHorizontalPanelSide(side);\n  const span = useLayout((state) => {\n    const panel = state.panels[side];\n    return isHorizontalPanelState(panel) ? panel.span : false;\n  });\n  const hidden = useHidden();\n  const className = classnames(\n    \"nz-outline-panelOutline\",\n    hidden && \"nz-hidden\",\n    `nz-${side}`,\n    span && \"nz-span\"\n  );\n  const size = useSize();\n  return (\n    <div\n      className={className}\n      style={{\n        width: isHorizontal ? undefined : size,\n        height: isHorizontal ? size : undefined,\n      }}\n    />\n  );\n}\n\n/** @internal */\nexport function useHidden() {\n  const side = React.useContext(PanelSideContext);\n  const targeted = useTargeted();\n  const activeHomeState = useSendBackHomeState();\n\n  return React.useMemo(() => {\n    if (activeHomeState) {\n      if (\n        activeHomeState.side === side &&\n        activeHomeState.widgetId === undefined &&\n        activeHomeState.sectionIndex === undefined\n      )\n        return false;\n    }\n\n    if (!targeted) return true;\n\n    if (!isPanelDropTargetState(targeted)) return true;\n\n    if (targeted.side !== side) return true;\n\n    return false;\n  }, [side, targeted, activeHomeState]);\n}\n\nfunction useSize() {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  return useLayout((state) => {\n    const panel = state.panels[side];\n    return panel.size !== undefined ? panel.size : panel.minSize;\n  });\n}\n"]}

package/lib/cjs/appui-react/layout/outline/PanelOutline.scss

@@ -0,0 +1,72 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-outline-panelOutline {
+  background-color: $nz-outline-color;
+  position: absolute;
+  transform: scale(1);
+  transition: transform var(--iui-duration-1) ease-in;
+  width: 100%;
+  height: 100%;
+
+  &.nz-hidden {
+    transition: none;
+  }
+
+  &.nz-left,
+  &.nz-right {
+    grid-row: 2/3;
+    height: 100%;
+  }
+
+  &.nz-left {
+    grid-column: 1;
+    transform-origin: left;
+
+    &.nz-hidden {
+      transform: scale(0, 1);
+    }
+  }
+
+  &.nz-right {
+    grid-column: 3;
+    right: 0;
+    transform-origin: right;
+
+    &.nz-hidden {
+      transform: scale(0, 1);
+    }
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    grid-column: 2/3;
+    width: 100%;
+
+    &.nz-span {
+      grid-column: 1/4;
+    }
+  }
+
+  &.nz-top {
+    grid-row: 1;
+    transform-origin: top;
+
+    &.nz-hidden {
+      transform: scale(1, 0);
+    }
+  }
+
+  &.nz-bottom {
+    grid-row: 3;
+    bottom: 0;
+    transform-origin: bottom;
+
+    &.nz-hidden {
+      transform: scale(1, 0);
+    }
+  }
+}

package/lib/cjs/appui-react/layout/outline/SectionOutline.d.ts

@@ -0,0 +1,13 @@
+/** @packageDocumentation
+ * @module WidgetPanels
+ */
+import "./SectionOutline.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** @internal */
+export interface SectionOutlineProps extends CommonProps {
+    sectionIndex: 0 | 1;
+}
+/** @internal */
+export declare function SectionOutline(props: SectionOutlineProps): React.JSX.Element;
+//# sourceMappingURL=SectionOutline.d.ts.map

package/lib/cjs/appui-react/layout/outline/SectionOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionOutline.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/SectionOutline.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWrD,gBAAgB;AAChB,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC;CACrB;AAED,gBAAgB;AAChB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAoBxD"}

package/lib/cjs/appui-react/layout/outline/SectionOutline.js

@@ -0,0 +1,73 @@
+"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 WidgetPanels
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionOutline = void 0;
+require("./SectionOutline.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const core_bentley_1 = require("@itwin/core-bentley");
+const DragManager_1 = require("../base/DragManager");
+const Panel_1 = require("../widget-panels/Panel");
+const SectionTarget_1 = require("../target/SectionTarget");
+const DropTargetState_1 = require("../state/DropTargetState");
+const LayoutStore_1 = require("../base/LayoutStore");
+const SendBack_1 = require("../widget/SendBack");
+/** @internal */
+function SectionOutline(props) {
+    const hidden = useHidden(props.sectionIndex);
+    const direction = (0, SectionTarget_1.useTargetDirection)();
+    const style = useSize(props.sectionIndex);
+    const className = (0, classnames_1.default)("nz-outline-sectionOutline", `nz-${props.sectionIndex}`, `nz-${direction}`, hidden && "nz-hidden", props.className);
+    return (React.createElement("div", { className: className, style: {
+            ...(hidden ? {} : style),
+            ...props.style,
+        } }));
+}
+exports.SectionOutline = SectionOutline;
+// istanbul ignore next
+function useHidden(sectionIndex) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    const targeted = (0, DragManager_1.useTargeted)();
+    const activeHomeState = (0, SendBack_1.useSendBackHomeState)();
+    return React.useMemo(() => {
+        if (activeHomeState &&
+            activeHomeState.side === side &&
+            activeHomeState.sectionIndex === sectionIndex)
+            return false;
+        if (!targeted)
+            return true;
+        if (!(0, DropTargetState_1.isSectionDropTargetState)(targeted))
+            return true;
+        if (targeted.sectionIndex !== sectionIndex)
+            return true;
+        if (targeted.side !== side)
+            return true;
+        return false;
+    }, [targeted, side, sectionIndex, activeHomeState]);
+}
+// istanbul ignore next
+function useSize(sectionIndex) {
+    const side = React.useContext(Panel_1.PanelSideContext);
+    (0, core_bentley_1.assert)(!!side);
+    const splitterPercent = (0, LayoutStore_1.useLayout)((state) => state.panels[side].splitterPercent);
+    return React.useMemo(() => {
+        let size = splitterPercent;
+        if (!size)
+            return undefined;
+        if (sectionIndex === 1)
+            size = 100 - size;
+        const style = {};
+        if ((0, Panel_1.isHorizontalPanelSide)(side))
+            style.width = `${size}%`;
+        else
+            style.height = `${size}%`;
+        return style;
+    }, [side, splitterPercent, sectionIndex]);
+}
+//# sourceMappingURL=SectionOutline.js.map

package/lib/cjs/appui-react/layout/outline/SectionOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionOutline.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/outline/SectionOutline.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 WidgetPanels\n */\n\nimport \"./SectionOutline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { assert } from \"@itwin/core-bentley\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { useTargeted } from \"../base/DragManager\";\nimport {\n  isHorizontalPanelSide,\n  PanelSideContext,\n} from \"../widget-panels/Panel\";\nimport { useTargetDirection } from \"../target/SectionTarget\";\nimport { isSectionDropTargetState } from \"../state/DropTargetState\";\nimport { useLayout } from \"../base/LayoutStore\";\nimport { useSendBackHomeState } from \"../widget/SendBack\";\n\n/** @internal */\nexport interface SectionOutlineProps extends CommonProps {\n  sectionIndex: 0 | 1;\n}\n\n/** @internal */\nexport function SectionOutline(props: SectionOutlineProps) {\n  const hidden = useHidden(props.sectionIndex);\n  const direction = useTargetDirection();\n  const style = useSize(props.sectionIndex);\n  const className = classnames(\n    \"nz-outline-sectionOutline\",\n    `nz-${props.sectionIndex}`,\n    `nz-${direction}`,\n    hidden && \"nz-hidden\",\n    props.className\n  );\n  return (\n    <div\n      className={className}\n      style={{\n        ...(hidden ? {} : style),\n        ...props.style,\n      }}\n    />\n  );\n}\n\n// istanbul ignore next\nfunction useHidden(sectionIndex: SectionOutlineProps[\"sectionIndex\"]) {\n  const side = React.useContext(PanelSideContext);\n  const targeted = useTargeted();\n  const activeHomeState = useSendBackHomeState();\n\n  return React.useMemo(() => {\n    if (\n      activeHomeState &&\n      activeHomeState.side === side &&\n      activeHomeState.sectionIndex === sectionIndex\n    )\n      return false;\n\n    if (!targeted) return true;\n\n    if (!isSectionDropTargetState(targeted)) return true;\n\n    if (targeted.sectionIndex !== sectionIndex) return true;\n    if (targeted.side !== side) return true;\n\n    return false;\n  }, [targeted, side, sectionIndex, activeHomeState]);\n}\n\n// istanbul ignore next\nfunction useSize(sectionIndex: SectionOutlineProps[\"sectionIndex\"]) {\n  const side = React.useContext(PanelSideContext);\n  assert(!!side);\n  const splitterPercent = useLayout(\n    (state) => state.panels[side].splitterPercent\n  );\n  return React.useMemo<React.CSSProperties | undefined>(() => {\n    let size = splitterPercent;\n    if (!size) return undefined;\n    if (sectionIndex === 1) size = 100 - size;\n    const style: React.CSSProperties = {};\n    if (isHorizontalPanelSide(side)) style.width = `${size}%`;\n    else style.height = `${size}%`;\n    return style;\n  }, [side, splitterPercent, sectionIndex]);\n}\n"]}

package/lib/cjs/appui-react/layout/outline/SectionOutline.scss

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "variables";
+
+.nz-outline-sectionOutline {
+  background-color: $nz-outline-color;
+
+  &.nz-horizontal {
+    transition: width var(--iui-duration-1) ease-in;
+    height: 100%;
+    width: 50%;
+    top: 0;
+
+    &.nz-0 {
+      left: 0;
+    }
+
+    &.nz-1 {
+      right: 0;
+    }
+
+    &.nz-hidden {
+      width: 0;
+    }
+  }
+
+  &.nz-vertical {
+    transition: height var(--iui-duration-1) ease-in;
+    width: 100%;
+    height: 50%;
+    left: 0;
+
+    &.nz-0 {
+      top: 0;
+    }
+
+    &.nz-1 {
+      bottom: 0;
+    }
+
+    &.nz-hidden {
+      height: 0;
+    }
+  }
+}