@itwin/appui-react 4.0.0-dev.2 → 4.0.0-dev.3

package/lib/esm/appui-react/messages/InputField.js

@@ -1,88 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Notification
- */
-import "./InputField.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { OutputMessagePriority } from "@itwin/core-frontend";
-import { RelativePosition } from "@itwin/appui-abstract";
-import { Popup } from "@itwin/core-react";
-import { MessageManager } from "../messages/MessageManager";
-import { MessageDiv } from "./MessageSpan";
-/** InputField message pops up near pointer when attempting an invalid interaction.
- * @public
- */
-export class InputFieldMessage extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            message: "",
-            isVisible: false,
-            priority: OutputMessagePriority.None,
-            showCloseButton: !!this.props.showCloseButton,
-        };
-        this._onInputMessageClose = () => {
-            this.setState({ isVisible: false });
-        };
-        this._handleInputFieldMessageAddedEvent = (args) => {
-            this.setState({
-                inputFieldElement: args.target,
-                message: args.messageText,
-                isVisible: true,
-                priority: args.priority,
-                detailedMessage: args.detailedMessage,
-            });
-        };
-        this._handleInputFieldMessageRemovedEvent = () => {
-            this.setState({ isVisible: false });
-        };
-    }
-    render() {
-        const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;
-        if (!inputFieldElement || !message) {
-            return null;
-        }
-        let iconClassName = "";
-        switch (priority) {
-            case OutputMessagePriority.Warning:
-                iconClassName = "icon-status-warning";
-                break;
-            case OutputMessagePriority.Error:
-                iconClassName = "icon-status-error";
-                break;
-            case OutputMessagePriority.Info:
-                iconClassName = "icon-info";
-                break;
-        }
-        return (React.createElement(Popup, { isOpen: isVisible, position: RelativePosition.BottomLeft, onClose: this._onInputMessageClose, target: inputFieldElement },
-            React.createElement("div", { className: "uifw-popup-message-inputField" },
-                React.createElement("div", { className: "uifw-popup-message-inputField-content" },
-                    React.createElement("div", { className: "uifw-popup-message-inputField-primary" },
-                        iconClassName &&
-                            React.createElement("span", { className: "uifw-popup-message-icon" },
-                                " ",
-                                React.createElement("i", { className: classnames("icon", iconClassName) }),
-                                " "),
-                        React.createElement("span", { className: "uifw-popup-message-text" },
-                            React.createElement(MessageDiv, { className: "uifw-popup-message-brief", message: message }),
-                            detailedMessage &&
-                                React.createElement(MessageDiv, { className: "uifw-popup-message-detailed", message: detailedMessage })))),
-                showCloseButton &&
-                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                    React.createElement("div", { className: "uifw-popup-message-close", onClick: this._onInputMessageClose, role: "button", tabIndex: -1 },
-                        React.createElement("i", { className: "icon icon-close" })))));
-    }
-    componentDidMount() {
-        MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
-        MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
-    }
-    componentWillUnmount() {
-        MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
-        MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import "./InputField.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { OutputMessagePriority } from "@itwin/core-frontend";
+import { RelativePosition } from "@itwin/appui-abstract";
+import { Popup } from "@itwin/core-react";
+import { MessageManager } from "../messages/MessageManager";
+import { MessageDiv } from "./MessageSpan";
+/** InputField message pops up near pointer when attempting an invalid interaction.
+ * @public
+ */
+export class InputFieldMessage extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            message: "",
+            isVisible: false,
+            priority: OutputMessagePriority.None,
+            showCloseButton: !!this.props.showCloseButton,
+        };
+        this._onInputMessageClose = () => {
+            this.setState({ isVisible: false });
+        };
+        this._handleInputFieldMessageAddedEvent = (args) => {
+            this.setState({
+                inputFieldElement: args.target,
+                message: args.messageText,
+                isVisible: true,
+                priority: args.priority,
+                detailedMessage: args.detailedMessage,
+            });
+        };
+        this._handleInputFieldMessageRemovedEvent = () => {
+            this.setState({ isVisible: false });
+        };
+    }
+    render() {
+        const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;
+        if (!inputFieldElement || !message) {
+            return null;
+        }
+        let iconClassName = "";
+        switch (priority) {
+            case OutputMessagePriority.Warning:
+                iconClassName = "icon-status-warning";
+                break;
+            case OutputMessagePriority.Error:
+                iconClassName = "icon-status-error";
+                break;
+            case OutputMessagePriority.Info:
+                iconClassName = "icon-info";
+                break;
+        }
+        return (React.createElement(Popup, { isOpen: isVisible, position: RelativePosition.BottomLeft, onClose: this._onInputMessageClose, target: inputFieldElement },
+            React.createElement("div", { className: "uifw-popup-message-inputField" },
+                React.createElement("div", { className: "uifw-popup-message-inputField-content" },
+                    React.createElement("div", { className: "uifw-popup-message-inputField-primary" },
+                        iconClassName &&
+                            React.createElement("span", { className: "uifw-popup-message-icon" },
+                                " ",
+                                React.createElement("i", { className: classnames("icon", iconClassName) }),
+                                " "),
+                        React.createElement("span", { className: "uifw-popup-message-text" },
+                            React.createElement(MessageDiv, { className: "uifw-popup-message-brief", message: message }),
+                            detailedMessage &&
+                                React.createElement(MessageDiv, { className: "uifw-popup-message-detailed", message: detailedMessage })))),
+                showCloseButton &&
+                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                    React.createElement("div", { className: "uifw-popup-message-close", onClick: this._onInputMessageClose, role: "button", tabIndex: -1 },
+                        React.createElement("i", { className: "icon icon-close" })))));
+    }
+    componentDidMount() {
+        MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);
+        MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);
+    }
+    componentWillUnmount() {
+        MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);
+        MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);
+    }
+}
 //# sourceMappingURL=InputField.js.map

package/lib/esm/appui-react/messages/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.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 Notification\n */\n\nimport \"./InputField.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport { Popup } from \"@itwin/core-react\";\nimport { InputFieldMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\nimport { MessageDiv } from \"./MessageSpan\";\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\n\n/** Properties of [[InputFieldMessage]] component.\n * @public\n */\ninterface InputFieldMessageProps {\n  showCloseButton?: boolean;\n}\n\n/** [[InputFieldMessage]] state.\n * @internal\n */\ninterface InputFieldMessageState {\n  isVisible: boolean;\n  priority: OutputMessagePriority;\n  message: NotifyMessageType;\n  detailedMessage?: NotifyMessageType;\n  inputFieldElement?: HTMLElement;\n  showCloseButton?: boolean;\n}\n\n/** InputField message pops up near pointer when attempting an invalid interaction.\n * @public\n */\nexport class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {\n  public override readonly state: Readonly<InputFieldMessageState> = {\n    message: \"\",\n    isVisible: false,\n    priority: OutputMessagePriority.None,\n    showCloseButton: !!this.props.showCloseButton,\n  };\n\n  public override render(): React.ReactNode {\n    const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;\n\n    if (!inputFieldElement || !message) {\n      return null;\n    }\n\n    let iconClassName = \"\";\n    switch (priority) {\n      case OutputMessagePriority.Warning:\n        iconClassName = \"icon-status-warning\";\n        break;\n      case OutputMessagePriority.Error:\n        iconClassName = \"icon-status-error\";\n        break;\n      case OutputMessagePriority.Info:\n        iconClassName = \"icon-info\";\n        break;\n    }\n\n    return (\n      <Popup\n        isOpen={isVisible}\n        position={RelativePosition.BottomLeft}\n        onClose={this._onInputMessageClose}\n        target={inputFieldElement}>\n        <div className=\"uifw-popup-message-inputField\">\n          <div className=\"uifw-popup-message-inputField-content\">\n            <div className=\"uifw-popup-message-inputField-primary\">\n              {iconClassName &&\n                <span className=\"uifw-popup-message-icon\"> <i className={classnames(\"icon\", iconClassName)} /> </span>\n              }\n              <span className=\"uifw-popup-message-text\">\n                <MessageDiv className=\"uifw-popup-message-brief\" message={message} />\n                {detailedMessage &&\n                  <MessageDiv className=\"uifw-popup-message-detailed\" message={detailedMessage} />\n                }\n              </span>\n            </div>\n          </div>\n          {showCloseButton &&\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n            <div className=\"uifw-popup-message-close\" onClick={this._onInputMessageClose} role=\"button\" tabIndex={-1}>\n              <i className=\"icon icon-close\" />\n            </div>\n          }\n        </div>\n      </Popup>);\n  }\n\n  public override componentDidMount(): void {\n    MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);\n  }\n\n  public override componentWillUnmount(): void {\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);\n  }\n\n  private _onInputMessageClose = () => {\n    this.setState({ isVisible: false });\n  };\n\n  private _handleInputFieldMessageAddedEvent = (args: InputFieldMessageEventArgs) => {\n    this.setState({\n      inputFieldElement: args.target as HTMLElement,\n      message: args.messageText,\n      isVisible: true,\n      priority: args.priority,\n      detailedMessage: args.detailedMessage,\n    });\n  };\n\n  private _handleInputFieldMessageRemovedEvent = () => {\n    this.setState({ isVisible: false });\n  };\n}\n"]}
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/InputField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport \"./InputField.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { OutputMessagePriority } from \"@itwin/core-frontend\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { Popup } from \"@itwin/core-react\";\r\nimport { InputFieldMessageEventArgs, MessageManager } from \"../messages/MessageManager\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n/** Properties of [[InputFieldMessage]] component.\r\n * @public\r\n */\r\ninterface InputFieldMessageProps {\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** [[InputFieldMessage]] state.\r\n * @internal\r\n */\r\ninterface InputFieldMessageState {\r\n  isVisible: boolean;\r\n  priority: OutputMessagePriority;\r\n  message: NotifyMessageType;\r\n  detailedMessage?: NotifyMessageType;\r\n  inputFieldElement?: HTMLElement;\r\n  showCloseButton?: boolean;\r\n}\r\n\r\n/** InputField message pops up near pointer when attempting an invalid interaction.\r\n * @public\r\n */\r\nexport class InputFieldMessage extends React.PureComponent<InputFieldMessageProps, InputFieldMessageState> {\r\n  public override readonly state: Readonly<InputFieldMessageState> = {\r\n    message: \"\",\r\n    isVisible: false,\r\n    priority: OutputMessagePriority.None,\r\n    showCloseButton: !!this.props.showCloseButton,\r\n  };\r\n\r\n  public override render(): React.ReactNode {\r\n    const { isVisible, inputFieldElement, message, priority, detailedMessage, showCloseButton } = this.state;\r\n\r\n    if (!inputFieldElement || !message) {\r\n      return null;\r\n    }\r\n\r\n    let iconClassName = \"\";\r\n    switch (priority) {\r\n      case OutputMessagePriority.Warning:\r\n        iconClassName = \"icon-status-warning\";\r\n        break;\r\n      case OutputMessagePriority.Error:\r\n        iconClassName = \"icon-status-error\";\r\n        break;\r\n      case OutputMessagePriority.Info:\r\n        iconClassName = \"icon-info\";\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <Popup\r\n        isOpen={isVisible}\r\n        position={RelativePosition.BottomLeft}\r\n        onClose={this._onInputMessageClose}\r\n        target={inputFieldElement}>\r\n        <div className=\"uifw-popup-message-inputField\">\r\n          <div className=\"uifw-popup-message-inputField-content\">\r\n            <div className=\"uifw-popup-message-inputField-primary\">\r\n              {iconClassName &&\r\n                <span className=\"uifw-popup-message-icon\"> <i className={classnames(\"icon\", iconClassName)} /> </span>\r\n              }\r\n              <span className=\"uifw-popup-message-text\">\r\n                <MessageDiv className=\"uifw-popup-message-brief\" message={message} />\r\n                {detailedMessage &&\r\n                  <MessageDiv className=\"uifw-popup-message-detailed\" message={detailedMessage} />\r\n                }\r\n              </span>\r\n            </div>\r\n          </div>\r\n          {showCloseButton &&\r\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events\r\n            <div className=\"uifw-popup-message-close\" onClick={this._onInputMessageClose} role=\"button\" tabIndex={-1}>\r\n              <i className=\"icon icon-close\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </Popup>);\r\n  }\r\n\r\n  public override componentDidMount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.addListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.addListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  public override componentWillUnmount(): void {\r\n    MessageManager.onInputFieldMessageAddedEvent.removeListener(this._handleInputFieldMessageAddedEvent);\r\n    MessageManager.onInputFieldMessageRemovedEvent.removeListener(this._handleInputFieldMessageRemovedEvent);\r\n  }\r\n\r\n  private _onInputMessageClose = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n\r\n  private _handleInputFieldMessageAddedEvent = (args: InputFieldMessageEventArgs) => {\r\n    this.setState({\r\n      inputFieldElement: args.target as HTMLElement,\r\n      message: args.messageText,\r\n      isVisible: true,\r\n      priority: args.priority,\r\n      detailedMessage: args.detailedMessage,\r\n    });\r\n  };\r\n\r\n  private _handleInputFieldMessageRemovedEvent = () => {\r\n    this.setState({ isVisible: false });\r\n  };\r\n}\r\n"]}

package/lib/esm/appui-react/messages/InputField.scss

@@ -1,83 +1,83 @@
-/*---------------------------------------------------------------------------------------------
-* 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 "~@itwin/core-react/lib/cjs/core-react/text/mixins";
-
-.uifw-popup-message-inputField {
-  background-color: $buic-background-control;
-  padding: 3px 3px 3px 6px;
-  border-radius: 5px;
-  color: $buic-text-color;
-  margin: 0px;
-  transition: all 3s ease;
-  display: flex;
-  align-items: center;
-
-  .uifw-popup-message-inputField-content {
-    min-width: 180px;
-    max-width: 360px;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    .uifw-popup-message-inputField-primary {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-
-      >.uifw-popup-message-icon {
-        padding-left: 3px;
-        padding-right: 3px;
-
-        .icon-status-warning {
-          color: $buic-foreground-warning;
-        }
-
-        .icon-status-warning {
-          color: $buic-foreground-warning;
-        }
-
-        .icon-status-error {
-          color: $buic-foreground-alert;
-        }
-      }
-
-      .uifw-popup-message-text {
-        color: $buic-foreground-body;
-        padding-left: 3px;
-        padding-right: 3px;
-
-        .uifw-popup-message-brief {
-          @include uicore-text(body);
-        }
-
-        .uifw-popup-message-detailed {
-          @include uicore-text(small);
-        }
-      }
-    }
-  }
-
-  .uifw-popup-message-close {
-    display: flex;
-    align-items: center;
-    color: $buic-foreground-muted;
-    cursor: pointer;
-
-    &:active,
-    &:hover {
-      color: $buic-foreground-activehover;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .icon {
-      margin: 0 3px 0 10px;
-    }
-  }
-
+/*---------------------------------------------------------------------------------------------
+* 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 "~@itwin/core-react/lib/cjs/core-react/text/mixins";
+
+.uifw-popup-message-inputField {
+  background-color: $buic-background-control;
+  padding: 3px 3px 3px 6px;
+  border-radius: 5px;
+  color: $buic-text-color;
+  margin: 0px;
+  transition: all 3s ease;
+  display: flex;
+  align-items: center;
+
+  .uifw-popup-message-inputField-content {
+    min-width: 180px;
+    max-width: 360px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    .uifw-popup-message-inputField-primary {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+
+      >.uifw-popup-message-icon {
+        padding-left: 3px;
+        padding-right: 3px;
+
+        .icon-status-warning {
+          color: $buic-foreground-warning;
+        }
+
+        .icon-status-warning {
+          color: $buic-foreground-warning;
+        }
+
+        .icon-status-error {
+          color: $buic-foreground-alert;
+        }
+      }
+
+      .uifw-popup-message-text {
+        color: $buic-foreground-body;
+        padding-left: 3px;
+        padding-right: 3px;
+
+        .uifw-popup-message-brief {
+          @include uicore-text(body);
+        }
+
+        .uifw-popup-message-detailed {
+          @include uicore-text(small);
+        }
+      }
+    }
+  }
+
+  .uifw-popup-message-close {
+    display: flex;
+    align-items: center;
+    color: $buic-foreground-muted;
+    cursor: pointer;
+
+    &:active,
+    &:hover {
+      color: $buic-foreground-activehover;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .icon {
+      margin: 0 3px 0 10px;
+    }
+  }
+
 }

package/lib/esm/appui-react/messages/MessageLabel.d.ts

@@ -1,13 +1,13 @@
-/** @packageDocumentation
- * @module Notification
- */
-/// <reference types="react" />
-import { NotifyMessageType } from "./ReactNotifyMessageDetails";
-/** Message String/Label
- * @internal
- */
-export declare function MessageLabel(props: {
-    message: NotifyMessageType;
-    className: string;
-}): JSX.Element;
+/** @packageDocumentation
+ * @module Notification
+ */
+/// <reference types="react" />
+import { NotifyMessageType } from "./ReactNotifyMessageDetails";
+/** Message String/Label
+ * @internal
+ */
+export declare function MessageLabel(props: {
+    message: NotifyMessageType;
+    className: string;
+}): JSX.Element;
 //# sourceMappingURL=MessageLabel.d.ts.map

package/lib/esm/appui-react/messages/MessageLabel.js

@@ -1,18 +1,18 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Notification
- */
-import * as React from "react";
-import classnames from "classnames";
-import { MessageDiv } from "./MessageSpan";
-/** Message String/Label
- * @internal
- */
-export function MessageLabel(props) {
-    const classNames = classnames("uifw-statusbar-message-label", props.className);
-    return React.createElement(MessageDiv, { className: classNames, message: props.message });
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Notification
+ */
+import * as React from "react";
+import classnames from "classnames";
+import { MessageDiv } from "./MessageSpan";
+/** Message String/Label
+ * @internal
+ */
+export function MessageLabel(props) {
+    const classNames = classnames("uifw-statusbar-message-label", props.className);
+    return React.createElement(MessageDiv, { className: classNames, message: props.message });
+}
 //# sourceMappingURL=MessageLabel.js.map

package/lib/esm/appui-react/messages/MessageLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageLabel.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/MessageLabel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwD;IACnF,MAAM,UAAU,GAAG,UAAU,CAAC,8BAA8B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC/E,OAAO,oBAAC,UAAU,IAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;AACvE,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 Notification\n */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { MessageDiv } from \"./MessageSpan\";\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\n\n/** Message String/Label\n * @internal\n */\nexport function MessageLabel(props: { message: NotifyMessageType, className: string }) {\n  const classNames = classnames(\"uifw-statusbar-message-label\", props.className);\n  return <MessageDiv className={classNames} message={props.message} />;\n}\n"]}
+{"version":3,"file":"MessageLabel.js","sourceRoot":"","sources":["../../../../src/appui-react/messages/MessageLabel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwD;IACnF,MAAM,UAAU,GAAG,UAAU,CAAC,8BAA8B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC/E,OAAO,oBAAC,UAAU,IAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAC;AACvE,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Notification\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { MessageDiv } from \"./MessageSpan\";\r\nimport { NotifyMessageType } from \"./ReactNotifyMessageDetails\";\r\n\r\n/** Message String/Label\r\n * @internal\r\n */\r\nexport function MessageLabel(props: { message: NotifyMessageType, className: string }) {\r\n  const classNames = classnames(\"uifw-statusbar-message-label\", props.className);\r\n  return <MessageDiv className={classNames} message={props.message} />;\r\n}\r\n"]}