@itwin/appui-react 4.8.3 → 4.9.0

package/lib/esm/appui-react/layout/footer/Footer.scss

@@ -0,0 +1,61 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "../safearea";
+@import "../widgetopacity";
+@import "variables";
+
+.nz-footer-footer {
+  position: relative;
+
+  > div {
+    background-color: var(--iui-color-background);
+
+    border: {
+      width: 0;
+      top-width: 1px;
+      color: var(--iui-color-border);
+      style: solid;
+    }
+
+    box-sizing: border-box;
+    bottom: 0;
+    width: 100%;
+    pointer-events: auto;
+
+    > .nz-messages {
+      position: absolute;
+      top: -10px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-100%);
+
+      @include uicore-z-index(status-message);
+    }
+
+    > .nz-indicators {
+      display: flex;
+      flex-direction: row;
+      height: $footer-height;
+    }
+  }
+
+  &.nz-safe-area-left {
+    > div {
+      @include nz-safe-area-left;
+    }
+  }
+
+  &.nz-safe-area-right {
+    > div {
+      @include nz-safe-area-right;
+    }
+  }
+
+  &.nz-safe-area-bottom {
+    > div {
+      @include nz-safe-area-bottom;
+    }
+  }
+}

package/lib/esm/appui-react/layout/footer/Indicator.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Indicator.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[FooterIndicator]] component.
+ * @internal
+ */
+export interface FooterIndicatorProps extends CommonProps {
+    /** Indicator content. */
+    children?: React.ReactNode;
+    /** Title for the indicator */
+    title?: string;
+    /** Function called when the indicator is clicked */
+    onClick?: (event: React.MouseEvent) => void;
+}
+/** Indicator used in [[Footer]] component.
+ * @note Use [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+export declare const FooterIndicator: React.ForwardRefExoticComponent<FooterIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Indicator.d.ts.map

package/lib/esm/appui-react/layout/footer/Indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Indicator.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,oBAAqB,SAAQ,WAAW;IACvD,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC7C;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,6FAa1B,CAAC"}

package/lib/esm/appui-react/layout/footer/Indicator.js

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Indicator.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Indicator used in [[Footer]] component.
+ * @note Use [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+export const FooterIndicator = React.forwardRef(function FooterIndicator(props, ref) {
+    const { children, ...attributes } = props;
+    const className = classnames("nz-footer-indicator", props.className);
+    return (React.createElement("div", { ref: ref, ...{ ...attributes, className } }, children));
+});
+//# sourceMappingURL=Indicator.js.map

package/lib/esm/appui-react/layout/footer/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Indicator.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,SAAS,eAAe,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE1C,MAAM,SAAS,GAAG,UAAU,CAAC,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAErE,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,KAAM,EAAE,GAAG,UAAU,EAAE,SAAS,EAAE,IAC5C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Footer\n */\n\nimport \"./Indicator.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[FooterIndicator]] component.\n * @internal\n */\nexport interface FooterIndicatorProps extends CommonProps {\n  /** Indicator content. */\n  children?: React.ReactNode;\n  /** Title for the indicator */\n  title?: string;\n  /** Function called when the indicator is clicked */\n  onClick?: (event: React.MouseEvent) => void;\n}\n\n/** Indicator used in [[Footer]] component.\n * @note Use [StatusBarIndicator]($appui-react) instead\n * @internal\n */\nexport const FooterIndicator = React.forwardRef<\n  HTMLDivElement,\n  FooterIndicatorProps\n>(function FooterIndicator(props, ref) {\n  const { children, ...attributes } = props;\n\n  const className = classnames(\"nz-footer-indicator\", props.className);\n\n  return (\n    <div ref={ref} {...{ ...attributes, className }}>\n      {children}\n    </div>\n  );\n});\n"]}

package/lib/esm/appui-react/layout/footer/Indicator.scss

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/index";
+@import "variables";
+
+.nz-footer-indicator {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--iui-color-text);
+  font-size: $text-font-size;
+  box-sizing: border-box;
+
+  /* Desktop */
+  @include for-medium-desktop-up {
+    padding-left: $nz-footer-indicator-horizontal-padding;
+    padding-right: $nz-footer-indicator-horizontal-padding;
+  }
+
+  /* Medium devices */
+  @include for-small-desktop-down {
+    padding-left: $nz-footer-indicator-horizontal-padding-medium;
+    padding-right: $nz-footer-indicator-horizontal-padding-medium;
+  }
+
+  @include for-tablet-portrait-down {
+    font-size: $text-font-size-medium;
+  }
+
+  /* Small devices */
+  @include for-phone-only {
+    font-size: $text-font-size-small;
+
+    padding-left: $nz-footer-indicator-horizontal-padding-small;
+    padding-right: $nz-footer-indicator-horizontal-padding-small;
+  }
+}

package/lib/esm/appui-react/layout/footer/Popup.d.ts

@@ -0,0 +1,12 @@
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Popup.scss";
+import * as React from "react";
+import type { PopupProps } from "@itwin/core-react";
+/** Popup component used in [[Footer]] component.
+ * @note Use `popup` prop of [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+export declare function FooterPopup(props: Partial<PopupProps>): React.JSX.Element;
+//# sourceMappingURL=Popup.d.ts.map

package/lib/esm/appui-react/layout/footer/Popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Popup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,qBAWrD"}

package/lib/esm/appui-react/layout/footer/Popup.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Footer
+ */
+import "./Popup.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Popup } from "@itwin/core-react";
+/** Popup component used in [[Footer]] component.
+ * @note Use `popup` prop of [StatusBarIndicator]($appui-react) instead
+ * @internal
+ */
+export function FooterPopup(props) {
+    const { className, ...other } = props;
+    return (React.createElement(Popup, { className: classnames("nz-footer-popup", className), position: RelativePosition.Top, showArrow: true, showShadow: true, ...other }));
+}
+//# sourceMappingURL=Popup.js.map

package/lib/esm/appui-react/layout/footer/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../../src/appui-react/layout/footer/Popup.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAA0B;IACpD,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACtC,OAAO,CACL,oBAAC,KAAK,IACJ,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,EACnD,QAAQ,EAAE,gBAAgB,CAAC,GAAG,EAC9B,SAAS,QACT,UAAU,EAAE,IAAI,KACZ,KAAK,GACT,CACH,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Footer\n */\n\nimport \"./Popup.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { PopupProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\n\n/** Popup component used in [[Footer]] component.\n * @note Use `popup` prop of [StatusBarIndicator]($appui-react) instead\n * @internal\n */\nexport function FooterPopup(props: Partial<PopupProps>) {\n  const { className, ...other } = props;\n  return (\n    <Popup\n      className={classnames(\"nz-footer-popup\", className)}\n      position={RelativePosition.Top}\n      showArrow\n      showShadow={true}\n      {...other}\n    />\n  );\n}\n"]}

package/lib/esm/appui-react/layout/footer/Popup.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/index";
+@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@import "variables";
+
+.nz-footer-popup {
+  font-size: var(--iui-font-size-1);
+  background-color: var(--iui-color-background);
+
+  &.core-popup.arrow::after,
+  &.core-popup.arrow::before {
+    color: var(--iui-color-background);
+  }
+
+  @include uicore-z-index(status-popup);
+}

package/lib/esm/appui-react/layout/footer/_variables.scss

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+$footer-height: 40px;
+
+$text-font-size: 14px;
+$text-font-size-medium: 12px;
+$text-font-size-small: 12px;
+
+$icon-size: 16px;
+$icon-size-medium: 14px;
+$icon-size-small: 14px;
+$icon-color: var(--iui-color-icon);
+$icon-shadow: drop-shadow(0 1px $buic-icon-color-reverse);
+
+$space-between-text-and-icon: 12px;
+$space-between-icons: 20px;
+
+$balloon-padding: 3px;
+$min-balloon-height: $icon-size - 2 * $balloon-padding;
+$min-balloon-width: $min-balloon-height;
+$balloon-arrow-width: 10px;
+$balloon-arrow-height: 10px;
+
+$nz-footer-popup-min-width: 300px;
+$nz-footer-popup-max-width: 600px;
+
+// Footer indicator
+$nz-footer-indicator-horizontal-padding: 15px;
+$nz-footer-indicator-horizontal-padding-medium: 10px;
+$nz-footer-indicator-horizontal-padding-small: 5px;
+
+$nz-footer-indicator-vertical-padding: 3px;
+
+// Footer indicator in widget mode
+$nz-footer-widget-indicator-horizontal-padding: 5px;
+$nz-footer-widget-indicator-horizontal-padding-medium: 3px;
+$nz-footer-widget-indicator-horizontal-padding-small: 2px;
+
+$nz-footer-indicator-space-between-text-and-icon: 4px;

package/lib/esm/appui-react/layout/footer/dialog/Button.d.ts

@@ -0,0 +1,23 @@
+/** @packageDocumentation
+ * @module Message
+ */
+import "./Button.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[TitleBarButton]] component.
+ * @internal
+ */
+export interface TitleBarButtonProps extends CommonProps {
+    /** Button content. */
+    children?: React.ReactNode;
+    /** Function called when button is clicked. */
+    onClick?: () => void;
+    /** Button title. */
+    title?: string;
+}
+/** Button used in [[TitleBar]] component.
+ * @note Use [StatusBarDialog.TitleBarButton]($appui-react) instead
+ * @internal
+ */
+export declare function TitleBarButton(props: TitleBarButtonProps): React.JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/lib/esm/appui-react/layout/footer/dialog/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Button.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,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAgBxD"}

package/lib/esm/appui-react/layout/footer/dialog/Button.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Button.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Button used in [[TitleBar]] component.
+ * @note Use [StatusBarDialog.TitleBarButton]($appui-react) instead
+ * @internal
+ */
+export function TitleBarButton(props) {
+    const className = classnames("nz-footer-dialog-button", props.className);
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { className: className, onClick: props.onClick, style: props.style, title: props.title, role: "button", tabIndex: -1 }, props.children));
+}
+//# sourceMappingURL=Button.js.map

package/lib/esm/appui-react/layout/footer/dialog/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Button.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEzE,OAAO;IACL,iEAAiE;IACjE,6BACE,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,IAEX,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Message\n */\n\nimport \"./Button.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[TitleBarButton]] component.\n * @internal\n */\nexport interface TitleBarButtonProps extends CommonProps {\n  /** Button content. */\n  children?: React.ReactNode;\n  /** Function called when button is clicked. */\n  onClick?: () => void;\n  /** Button title. */\n  title?: string;\n}\n\n/** Button used in [[TitleBar]] component.\n * @note Use [StatusBarDialog.TitleBarButton]($appui-react) instead\n * @internal\n */\nexport function TitleBarButton(props: TitleBarButtonProps) {\n  const className = classnames(\"nz-footer-dialog-button\", props.className);\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <div\n      className={className}\n      onClick={props.onClick}\n      style={props.style}\n      title={props.title}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      {props.children}\n    </div>\n  );\n}\n"]}

package/lib/esm/appui-react/layout/footer/dialog/Button.scss

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-dialog-button {
+  color: var(--iui-color-text-muted);
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    color: var(--iui-color-text-hover);
+  }
+
+  &:active {
+    color: var(--iui-color-text-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/esm/appui-react/layout/footer/dialog/Dialog.d.ts

@@ -0,0 +1,22 @@
+/** @packageDocumentation
+ * @module Message
+ */
+import "./Dialog.scss";
+import * as React from "react";
+import type { CommonProps } from "@itwin/core-react";
+/** Properties of [[Dialog]] component.
+ * @internal
+ */
+export interface DialogProps extends CommonProps {
+    /** Dialog content.  */
+    children?: React.ReactNode;
+    /** Dialog title bar. See [[TitleBar]] */
+    titleBar?: React.ReactNode;
+}
+/** Dialog used in footer indicators.
+ * @note See [[MessageCenter]], [[ToolAssistance]]
+ * @note Use [StatusBarDialog]($appui-react) instead
+ * @internal
+ */
+export declare function Dialog(props: DialogProps): React.JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/esm/appui-react/layout/footer/dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/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;AAErD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBASxC"}

package/lib/esm/appui-react/layout/footer/dialog/Dialog.js

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Dialog.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Dialog used in footer indicators.
+ * @note See [[MessageCenter]], [[ToolAssistance]]
+ * @note Use [StatusBarDialog]($appui-react) instead
+ * @internal
+ */
+export function Dialog(props) {
+    const className = classnames("nz-footer-dialog-dialog", props.className);
+    return (React.createElement("div", { className: className, style: props.style },
+        React.createElement("div", null, props.titleBar),
+        React.createElement("div", null, props.children)));
+}
+//# sourceMappingURL=Dialog.js.map

package/lib/esm/appui-react/layout/footer/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../../src/appui-react/layout/footer/dialog/Dialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;;GAIG;AACH,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,SAAS,GAAG,UAAU,CAAC,yBAAyB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QAC3C,iCAAM,KAAK,CAAC,QAAQ,CAAO;QAC3B,iCAAM,KAAK,CAAC,QAAQ,CAAO,CACvB,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Message\n */\n\nimport \"./Dialog.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\n\n/** Properties of [[Dialog]] component.\n * @internal\n */\nexport interface DialogProps extends CommonProps {\n  /** Dialog content.  */\n  children?: React.ReactNode;\n  /** Dialog title bar. See [[TitleBar]] */\n  titleBar?: React.ReactNode;\n}\n\n/** Dialog used in footer indicators.\n * @note See [[MessageCenter]], [[ToolAssistance]]\n * @note Use [StatusBarDialog]($appui-react) instead\n * @internal\n */\nexport function Dialog(props: DialogProps) {\n  const className = classnames(\"nz-footer-dialog-dialog\", props.className);\n\n  return (\n    <div className={className} style={props.style}>\n      <div>{props.titleBar}</div>\n      <div>{props.children}</div>\n    </div>\n  );\n}\n"]}

package/lib/esm/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/esm/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/esm/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/esm/appui-react/layout/footer/dialog/TitleBar.js

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./TitleBar.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** Title bar of [[Dialog]] component.
+ * @note Use [StatusBarDialog.TitleBar]($appui-react) instead
+ * @internal
+ */
+export function TitleBar(props) {
+    const className = classnames("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));
+}
+//# sourceMappingURL=TitleBar.js.map

package/lib/esm/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,OAAO,iBAAiB,CAAC;AACzB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,SAAS,GAAG,UAAU,CAAC,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","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/esm/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/esm/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/esm/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/esm/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/esm/appui-react/layout/footer/message-center/Dialog.js

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ * 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
+ */
+import "./Dialog.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Dialog } from "../dialog/Dialog";
+import { TitleBar } from "../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
+ */
+export class MessageCenterDialog extends React.PureComponent {
+    render() {
+        const className = classnames("nz-footer-messageCenter-dialog", this.props.className);
+        return (React.createElement(Dialog, { className: className, style: this.props.style, titleBar: React.createElement(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" })));
+    }
+}
+//# sourceMappingURL=Dialog.js.map

package/lib/esm/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,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAkB9C;;;;GAIG;AACH,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,aAAuC;IACpE,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAC1B,gCAAgC,EAChC,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EACN,oBAAC,QAAQ,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","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"]}