@itwin/appui-react 4.9.0-dev.1 → 4.9.0

package/lib/cjs/appui-react/layout/footer/dialog/Dialog.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-dialog-dialog {
+  border-radius: var(--iui-border-radius-1);
+  background-color: var(--iui-color-background);
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  position: relative;
+}

package/lib/cjs/appui-react/layout/footer/dialog/TitleBar.d.ts

@@ -0,0 +1,21 @@
+/** @packageDocumentation
+ * @module Message
+ */
+import "./TitleBar.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[TitleBar]] component.
+ * @internal
+ */
+export interface TitleBarProps extends CommonProps {
+    /** Title bar buttons. I.e. [[TitleBarButton]] */
+    children?: React.ReactNode;
+    /** Title bar title. */
+    title?: string;
+}
+/** Title bar of [[Dialog]] component.
+ * @note Use [StatusBarDialog.TitleBar]($appui-react) instead
+ * @internal
+ */
+export declare function TitleBar(props: TitleBarProps): React.JSX.Element;
+//# sourceMappingURL=TitleBar.d.ts.map

package/lib/cjs/appui-react/layout/footer/dialog/TitleBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/TitleBar.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAS5C"}

package/lib/cjs/appui-react/layout/footer/dialog/TitleBar.js

@@ -0,0 +1,25 @@
+"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 Message
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleBar = void 0;
+require("./TitleBar.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Title bar of [[Dialog]] component.
+ * @note Use [StatusBarDialog.TitleBar]($appui-react) instead
+ * @internal
+ */
+function TitleBar(props) {
+    const className = (0, classnames_1.default)("nz-footer-dialog-titleBar", props.className);
+    return (React.createElement("div", { className: className, style: props.style },
+        React.createElement("span", { className: "nz-title" }, props.title),
+        props.children));
+}
+exports.TitleBar = TitleBar;
+//# sourceMappingURL=TitleBar.js.map

package/lib/cjs/appui-react/layout/footer/dialog/TitleBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/TitleBar.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,2BAAyB;AACzB,2CAAoC;AACpC,+BAA+B;AAa/B;;;GAGG;AACH,SAAgB,QAAQ,CAAC,KAAoB;IAC3C,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,2BAA2B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE3E,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAC,KAAK,CAAQ;QAC9C,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AATD,4BASC","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 Message\n */\n\nimport \"./TitleBar.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[TitleBar]] component.\n * @internal\n */\nexport interface TitleBarProps extends CommonProps {\n  /** Title bar buttons. I.e. [[TitleBarButton]] */\n  children?: React.ReactNode;\n  /** Title bar title. */\n  title?: string;\n}\n\n/** Title bar of [[Dialog]] component.\n * @note Use [StatusBarDialog.TitleBar]($appui-react) instead\n * @internal\n */\nexport function TitleBar(props: TitleBarProps) {\n  const className = classnames(\"nz-footer-dialog-titleBar\", props.className);\n\n  return (\n    <div className={className} style={props.style}>\n      <span className=\"nz-title\">{props.title}</span>\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/cjs/appui-react/layout/footer/dialog/TitleBar.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";
+@import "~@itwin/core-react/lib/cjs/core-react/typography";
+
+.nz-footer-dialog-titleBar {
+  $horizontal-padding: $nz-dialog-padding;
+  $vertical-padding: 12px;
+
+  background-color: var(--iui-color-background-backdrop);
+  border-bottom: 1px solid var(--iui-color-border-subtle);
+  min-height: $nz-footer-title-bar-height;
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  grid-gap: $horizontal-padding;
+  padding-left: $horizontal-padding;
+  padding-right: $horizontal-padding;
+
+  > .nz-title {
+    @include title;
+    color: var(--iui-color-text);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}

package/lib/cjs/appui-react/layout/footer/dialog/_variables.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$nz-dialog-padding: 16px;
+$nz-dialog-border-width: 1px;
+
+$nz-footer-title-bar-height: 36px;

package/lib/cjs/appui-react/layout/footer/message-center/Dialog.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Dialog.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[MessageCenterDialog]] component.
+ * @internal
+ */
+export interface MessageCenterDialogProps extends CommonProps {
+    /** Title bar buttons. I.e. [[TitleBarButton]] */
+    buttons?: React.ReactNode;
+    /** Messages of message center. I.e. [[MessageCenterMessage]] */
+    children?: React.ReactNode;
+    prompt?: string;
+    /** Tabs of message center. See [[MessageCenterTab]] */
+    tabs?: React.ReactNode;
+    /** Title of title bar. */
+    title?: string;
+}
+/** Message center dialog used with [[MessageCenter]] component.
+ * @note This is a presentational component and should be aligned with [[MessageCenter]] component.
+ * I.e. use [[FooterPopup]] to handle alignment.
+ * @internal
+ */
+export declare class MessageCenterDialog extends React.PureComponent<MessageCenterDialogProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/cjs/appui-react/layout/footer/message-center/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Dialog.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;AAIrD;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,WAAW;IAC3D,iDAAiD;IACjD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC;IACpE,MAAM;CAsBvB"}

package/lib/cjs/appui-react/layout/footer/message-center/Dialog.js

@@ -0,0 +1,32 @@
+"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 MessageCenter
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageCenterDialog = void 0;
+require("./Dialog.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Dialog_1 = require("../dialog/Dialog");
+const TitleBar_1 = require("../dialog/TitleBar");
+/** Message center dialog used with [[MessageCenter]] component.
+ * @note This is a presentational component and should be aligned with [[MessageCenter]] component.
+ * I.e. use [[FooterPopup]] to handle alignment.
+ * @internal
+ */
+class MessageCenterDialog extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-messageCenter-dialog", this.props.className);
+        return (React.createElement(Dialog_1.Dialog, { className: className, style: this.props.style, titleBar: React.createElement(TitleBar_1.TitleBar, { title: this.props.title }, this.props.buttons) },
+            React.createElement("div", { className: "nz-tabs", role: "tablist" }, this.props.tabs),
+            React.createElement("div", { className: "nz-messages" }, this.props.children),
+            React.createElement("span", { className: "nz-message-prompt" }, this.props.prompt),
+            React.createElement("div", { className: "nz-gradient" })));
+    }
+}
+exports.MessageCenterDialog = MessageCenterDialog;
+//# sourceMappingURL=Dialog.js.map

package/lib/cjs/appui-react/layout/footer/message-center/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Dialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,2CAAoC;AACpC,+BAA+B;AAE/B,6CAA0C;AAC1C,iDAA8C;AAkB9C;;;;GAIG;AACH,MAAa,mBAAoB,SAAQ,KAAK,CAAC,aAAuC;IACpE,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,gCAAgC,EAChC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL,oBAAC,eAAM,IACL,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EACN,oBAAC,mBAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAY;YAGpE,6BAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IACpC,IAAI,CAAC,KAAK,CAAC,IAAI,CACZ;YACN,6BAAK,SAAS,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO;YACxD,8BAAM,SAAS,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ;YAC9D,6BAAK,SAAS,EAAC,aAAa,GAAG,CACxB,CACV,CAAC;IACJ,CAAC;CACF;AAvBD,kDAuBC","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 MessageCenter\n */\n\nimport \"./Dialog.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Dialog } from \"../dialog/Dialog\";\nimport { TitleBar } from \"../dialog/TitleBar\";\n\n/** Properties of [[MessageCenterDialog]] component.\n * @internal\n */\nexport interface MessageCenterDialogProps extends CommonProps {\n  /** Title bar buttons. I.e. [[TitleBarButton]] */\n  buttons?: React.ReactNode;\n  /** Messages of message center. I.e. [[MessageCenterMessage]] */\n  children?: React.ReactNode;\n  /* Prompt showed when no messages are present. */\n  prompt?: string;\n  /** Tabs of message center. See [[MessageCenterTab]] */\n  tabs?: React.ReactNode;\n  /** Title of title bar. */\n  title?: string;\n}\n\n/** Message center dialog used with [[MessageCenter]] component.\n * @note This is a presentational component and should be aligned with [[MessageCenter]] component.\n * I.e. use [[FooterPopup]] to handle alignment.\n * @internal\n */\nexport class MessageCenterDialog extends React.PureComponent<MessageCenterDialogProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-messageCenter-dialog\",\n      this.props.className\n    );\n    return (\n      <Dialog\n        className={className}\n        style={this.props.style}\n        titleBar={\n          <TitleBar title={this.props.title}>{this.props.buttons}</TitleBar>\n        }\n      >\n        <div className=\"nz-tabs\" role=\"tablist\">\n          {this.props.tabs}\n        </div>\n        <div className=\"nz-messages\">{this.props.children}</div>\n        <span className=\"nz-message-prompt\">{this.props.prompt}</span>\n        <div className=\"nz-gradient\" />\n      </Dialog>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/message-center/Dialog.scss

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index";
+@import "../../scrollbar";
+@import "../variables";
+@import "variables";
+
+.nz-footer-messageCenter-dialog {
+  width: 16vw;
+  min-width: $nz-footer-popup-min-width;
+  max-width: $nz-footer-popup-max-width;
+
+  > div:last-child {
+    > .nz-tabs {
+      min-width: 100%;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+    }
+
+    > .nz-messages {
+      max-height: 280px;
+      min-height: $nz-message-horizontal-padding;
+      overflow: auto;
+
+      @include nz-scrollbar();
+    }
+
+    > .nz-gradient {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 8px;
+      padding-right: $nz-scrollbar-width;
+      box-sizing: border-box;
+
+      &:after {
+        content: "";
+        display: block;
+        background: linear-gradient(
+          hsl(var(--iui-color-background-hsl) / 0),
+          hsl(var(--iui-color-background-hsl) / 1)
+        );
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    > .nz-message-prompt {
+      display: none;
+      text-align: center;
+      margin: 30px 15px;
+      font-style: italic;
+      color: var(--iui-color-text-muted);
+    }
+
+    & .nz-messages:empty ~ .nz-message-prompt {
+      display: block;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/footer/message-center/Indicator.d.ts

@@ -0,0 +1,29 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import type { FooterIndicatorProps } from "../Indicator";
+/** Properties of [[MessageCenter]] component.
+ * @internal
+ */
+export interface MessageCenterProps extends FooterIndicatorProps {
+    /** Message center balloon content. */
+    children?: string;
+    /** Clickable part of the indicator. */
+    indicatorRef?: React.Ref<HTMLDivElement>;
+    /** Message center label. */
+    label?: string;
+    /** Function called when indicator is clicked. */
+    onClick?: () => void;
+    /** Message center dialog target. */
+    targetRef?: React.Ref<HTMLDivElement>;
+}
+/** Message center indicator used in [[Footer]] component.
+ * @note Used with [[MessageCenterDialog]] component.
+ * @internal
+ */
+export declare class MessageCenter extends React.PureComponent<MessageCenterProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Indicator.d.ts.map

package/lib/cjs/appui-react/layout/footer/message-center/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Indicator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGzD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACvC;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxD,MAAM;CAkCvB"}

package/lib/cjs/appui-react/layout/footer/message-center/Indicator.js

@@ -0,0 +1,33 @@
+"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 MessageCenter
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageCenter = void 0;
+require("./Indicator.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const Indicator_1 = require("../Indicator");
+/** Message center indicator used in [[Footer]] component.
+ * @note Used with [[MessageCenterDialog]] component.
+ * @internal
+ */
+class MessageCenter extends React.PureComponent {
+    render() {
+        const { children, className, indicatorRef, label, onClick, targetRef, ...props } = this.props;
+        return (React.createElement(Indicator_1.FooterIndicator, { className: (0, classnames_1.default)("nz-footer-messageCenter-indicator", className), ...props },
+            React.createElement("div", { className: "nz-indicator", onClick: onClick, ref: indicatorRef, role: "button", tabIndex: -1 },
+                label !== undefined && React.createElement("span", { className: "nz-label" }, label),
+                React.createElement("div", { className: "nz-container" },
+                    React.createElement("div", { className: "nz-balloon" },
+                        React.createElement("div", { className: "nz-arrow" }),
+                        React.createElement("div", { className: "nz-content" }, children)),
+                    React.createElement("div", { className: "nz-target", ref: targetRef })))));
+    }
+}
+exports.MessageCenter = MessageCenter;
+//# sourceMappingURL=Indicator.js.map

package/lib/cjs/appui-react/layout/footer/message-center/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Indicator.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAE/B,4CAA+C;AAkB/C;;;GAGG;AACH,MAAa,aAAc,SAAQ,KAAK,CAAC,aAAiC;IACxD,MAAM;QACpB,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QACf,OAAO,CACL,oBAAC,2BAAe,IACd,SAAS,EAAE,IAAA,oBAAU,EAAC,mCAAmC,EAAE,SAAS,CAAC,KACjE,KAAK;YAET,6BACE,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC;gBAEX,KAAK,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAC,UAAU,IAAE,KAAK,CAAQ;gBACjE,6BAAK,SAAS,EAAC,cAAc;oBAC3B,6BAAK,SAAS,EAAC,YAAY;wBACzB,6BAAK,SAAS,EAAC,UAAU,GAAG;wBAC5B,6BAAK,SAAS,EAAC,YAAY,IAAE,QAAQ,CAAO,CACxC;oBACN,6BAAK,SAAS,EAAC,WAAW,EAAC,GAAG,EAAE,SAAS,GAAI,CACzC,CACF,CACU,CACnB,CAAC;IACJ,CAAC;CACF;AAnCD,sCAmCC","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 MessageCenter\n */\n\nimport \"./Indicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { FooterIndicatorProps } from \"../Indicator\";\nimport { FooterIndicator } from \"../Indicator\";\n\n/** Properties of [[MessageCenter]] component.\n * @internal\n */\nexport interface MessageCenterProps extends FooterIndicatorProps {\n  /** Message center balloon content. */\n  children?: string;\n  /** Clickable part of the indicator. */\n  indicatorRef?: React.Ref<HTMLDivElement>;\n  /** Message center label. */\n  label?: string;\n  /** Function called when indicator is clicked. */\n  onClick?: () => void;\n  /** Message center dialog target. */\n  targetRef?: React.Ref<HTMLDivElement>;\n}\n\n/** Message center indicator used in [[Footer]] component.\n * @note Used with [[MessageCenterDialog]] component.\n * @internal\n */\nexport class MessageCenter extends React.PureComponent<MessageCenterProps> {\n  public override render() {\n    const {\n      children,\n      className,\n      indicatorRef,\n      label,\n      onClick,\n      targetRef,\n      ...props\n    } = this.props;\n    return (\n      <FooterIndicator\n        className={classnames(\"nz-footer-messageCenter-indicator\", className)}\n        {...props}\n      >\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events\n          className=\"nz-indicator\"\n          onClick={onClick}\n          ref={indicatorRef}\n          role=\"button\"\n          tabIndex={-1}\n        >\n          {label !== undefined && <span className=\"nz-label\">{label}</span>}\n          <div className=\"nz-container\">\n            <div className=\"nz-balloon\">\n              <div className=\"nz-arrow\" />\n              <div className=\"nz-content\">{children}</div>\n            </div>\n            <div className=\"nz-target\" ref={targetRef} />\n          </div>\n        </div>\n      </FooterIndicator>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/message-center/Indicator.scss

@@ -0,0 +1,106 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/breakpoints";
+@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+@import "../variables";
+
+.nz-footer-messageCenter-indicator {
+  height: 100%;
+  color: var(--iui-color-text);
+
+  padding: {
+    top: 0;
+    bottom: 0;
+  }
+
+  box-sizing: border-box;
+
+  > .nz-indicator {
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+
+    > .nz-label {
+      font-size: $text-font-size;
+      font-size: $text-font-size;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @include for-tablet-portrait-down {
+        font-size: $text-font-size-medium;
+      }
+
+      @include for-phone-only {
+        display: none;
+      }
+    }
+
+    > .nz-container {
+      height: 100%;
+      position: relative;
+      display: grid;
+      align-items: center;
+      margin-left: 8px;
+
+      > .nz-balloon {
+        background-color: var(--iui-color-icon);
+        text-align: center;
+        min-width: $min-balloon-width;
+        min-height: $min-balloon-height;
+        border-radius: 50%;
+        padding: $balloon-padding;
+        position: relative;
+
+        > .nz-arrow {
+          position: absolute;
+          width: 0;
+          bottom: -3px;
+          left: 0;
+          display: block;
+          border-width: 0;
+          border-bottom-width: $balloon-arrow-height;
+          border-left-width: $balloon-arrow-width;
+          border-style: solid;
+          border-color: transparent var(--iui-color-icon);
+          transform: rotate(25deg);
+        }
+
+        > .nz-content {
+          position: relative;
+          color: var(--iui-color-background);
+          line-height: $min-balloon-height;
+          font-size: 11px;
+        }
+      }
+
+      > .nz-target {
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+    }
+
+    &:hover {
+      color: var(--iui-color-text-accent);
+
+      > .nz-container > .nz-balloon {
+        background-color: var(--iui-color-text-accent);
+
+        > .nz-arrow {
+          border-color: transparent var(--iui-color-text-accent);
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/footer/message-center/Message.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Message.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[MessageCenterMessage]] component.
+ * @internal
+ */
+export interface MessageCenterMessageProps extends CommonProps {
+    /** Message content. */
+    children?: React.ReactNode;
+    /** Message icon. */
+    icon?: React.ReactNode;
+}
+/** Message entry in [[MessageCenterDialog]] component.
+ * @internal
+ */
+export declare class MessageCenterMessage extends React.PureComponent<MessageCenterMessageProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Message.d.ts.map

package/lib/cjs/appui-react/layout/footer/message-center/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Message.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC;IACtE,MAAM;CAevB"}

package/lib/cjs/appui-react/layout/footer/message-center/Message.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 MessageCenter
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageCenterMessage = void 0;
+require("./Message.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Message entry in [[MessageCenterDialog]] component.
+ * @internal
+ */
+class MessageCenterMessage extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-messageCenter-message", this.props.className);
+        return (React.createElement("div", { className: className, style: this.props.style },
+            this.props.icon && React.createElement("div", { className: "nz-icon" }, this.props.icon),
+            this.props.children && (React.createElement("div", { className: "nz-content" }, this.props.children))));
+    }
+}
+exports.MessageCenterMessage = MessageCenterMessage;
+//# sourceMappingURL=Message.js.map

package/lib/cjs/appui-react/layout/footer/message-center/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Message.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,0BAAwB;AACxB,2CAAoC;AACpC,+BAA+B;AAa/B;;GAEG;AACH,MAAa,oBAAqB,SAAQ,KAAK,CAAC,aAAwC;IACtE,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,iCAAiC,EACjC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC/C,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,6BAAK,SAAS,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAO;YACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACtB,6BAAK,SAAS,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CACxD,CACG,CACP,CAAC;IACJ,CAAC;CACF;AAhBD,oDAgBC","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 MessageCenter\n */\n\nimport \"./Message.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[MessageCenterMessage]] component.\n * @internal\n */\nexport interface MessageCenterMessageProps extends CommonProps {\n  /** Message content. */\n  children?: React.ReactNode;\n  /** Message icon. */\n  icon?: React.ReactNode;\n}\n\n/** Message entry in [[MessageCenterDialog]] component.\n * @internal\n */\nexport class MessageCenterMessage extends React.PureComponent<MessageCenterMessageProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-messageCenter-message\",\n      this.props.className\n    );\n\n    return (\n      <div className={className} style={this.props.style}>\n        {this.props.icon && <div className=\"nz-icon\">{this.props.icon}</div>}\n        {this.props.children && (\n          <div className=\"nz-content\">{this.props.children}</div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/lib/cjs/appui-react/layout/footer/message-center/Message.scss

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+@import "variables";
+@import "../variables";
+
+.nz-footer-messageCenter-message {
+  $vertical-padding: $nz-message-horizontal-padding;
+
+  min-height: 48px;
+  box-sizing: border-box;
+  margin-left: $nz-message-horizontal-padding;
+  margin-right: $nz-message-horizontal-padding;
+  padding-left: $nz-message-horizontal-padding;
+  padding-right: $nz-message-horizontal-padding;
+  padding-top: $vertical-padding;
+  padding-bottom: $vertical-padding;
+  display: grid;
+  grid-gap: 12px;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  line-height: 16px;
+  color: var(--iui-color-text);
+  font-size: $text-font-size;
+
+  &:not(:first-child) {
+    border-top: 1px solid $buic-background-4;
+  }
+
+  > .nz-icon {
+    min-width: 20px;
+  }
+
+  > .nz-content {
+    overflow: hidden;
+    overflow-wrap: break-word;
+  }
+}

package/lib/cjs/appui-react/layout/footer/message-center/Tab.d.ts

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module MessageCenter
+ */
+import "./Tab.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[MessageCenterTab]] component.
+ * @internal
+ */
+export interface MessageCenterTabProps extends CommonProps {
+    /** Tab content. */
+    children?: React.ReactNode;
+    /** Describes if the tab is active. */
+    isActive?: boolean;
+    /** Function called when the tab is clicked. */
+    onClick?: () => void;
+}
+/** Message center tab used in [[MessageCenterDialog]] component.
+ * @internal
+ */
+export declare class MessageCenterTab extends React.PureComponent<MessageCenterTabProps> {
+    render(): React.JSX.Element;
+}
+//# sourceMappingURL=Tab.d.ts.map

package/lib/cjs/appui-react/layout/footer/message-center/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Tab.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,mBAAmB;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;CAoBvB"}

package/lib/cjs/appui-react/layout/footer/message-center/Tab.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 MessageCenter
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageCenterTab = void 0;
+require("./Tab.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+/** Message center tab used in [[MessageCenterDialog]] component.
+ * @internal
+ */
+class MessageCenterTab extends React.PureComponent {
+    render() {
+        const className = (0, classnames_1.default)("nz-footer-messageCenter-tab", this.props.isActive && "nz-active", this.props.className);
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: className, style: this.props.style, onClick: this.props.onClick, role: "tab", tabIndex: -1 }, this.props.children));
+    }
+}
+exports.MessageCenterTab = MessageCenterTab;
+//# sourceMappingURL=Tab.js.map

package/lib/cjs/appui-react/layout/footer/message-center/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/message-center/Tab.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,sBAAoB;AACpB,2CAAoC;AACpC,+BAA+B;AAe/B;;GAEG;AACH,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,6BAA6B,EAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,WAAW,EAClC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO;QACL,iEAAiE;QACjE,6BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,IAEX,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACP,CAAC;IACJ,CAAC;CACF;AArBD,4CAqBC","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 MessageCenter\n */\n\nimport \"./Tab.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[MessageCenterTab]] component.\n * @internal\n */\nexport interface MessageCenterTabProps extends CommonProps {\n  /** Tab content. */\n  children?: React.ReactNode;\n  /** Describes if the tab is active. */\n  isActive?: boolean;\n  /** Function called when the tab is clicked. */\n  onClick?: () => void;\n}\n\n/** Message center tab used in [[MessageCenterDialog]] component.\n * @internal\n */\nexport class MessageCenterTab extends React.PureComponent<MessageCenterTabProps> {\n  public override render() {\n    const className = classnames(\n      \"nz-footer-messageCenter-tab\",\n      this.props.isActive && \"nz-active\",\n      this.props.className\n    );\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n      <div\n        className={className}\n        style={this.props.style}\n        onClick={this.props.onClick}\n        role=\"tab\"\n        tabIndex={-1}\n      >\n        {this.props.children}\n      </div>\n    );\n  }\n}\n"]}