{"version":3,"sources":["components/notification/inline-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAuB,UAAU,EAAiB,MAAM,aAAa,CAAC;AAO7E;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;;OAGG;IACH,MAAM,WAAW;IAEjB;;;OAGG;IACH,KAAK,UAAU;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYD;;;;;;;;;GASG;AACH,cACM,oBAAqB,SAAQ,yBAAsB;IACvD;;OAEG;IACH,SAAS,CAAC,KAAK,oBAA4B;IAE3C;;;OAGG;IACH,SAAS,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,EAAE,UAAU;IAIxD;;;OAGG;IACH,SAAS,CAAC,yBAAyB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAiBnE;;OAEG;IACH,SAAS,CAAC,aAAa;IAiBvB;;OAEG;IACH,SAAS,CAAC,WAAW;IAWrB;;OAEG;IACH,SAAS,CAAC,WAAW;IAWrB;;OAEG;IAEH,gBAAgB,EAAG,MAAM,CAAC;IAE1B;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,IAAI,oBAA6B;IAEjC;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,MAAM;IAUN;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC","file":"inline-notification.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport ErrorFilled20 from '@carbon/icons/lib/error--filled/20';\nimport WarningFilled20 from '@carbon/icons/lib/warning--filled/20';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { customElement, html, LitElement, property, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './inline-notification.scss';\n\nconst { prefix } = settings;\n\n/**\n * Notification kinds.\n */\nexport enum NOTIFICATION_KIND {\n  /**\n   * Notification to represent success state.\n   */\n  SUCCESS = 'success',\n\n  /**\n   * Informational notification.\n   */\n  INFO = 'info',\n\n  /**\n   * Warning notification.\n   */\n  WARNING = 'warning',\n\n  /**\n   * Error notification.\n   */\n  ERROR = 'error',\n}\n\n/**\n * Notification types.\n */\nexport enum NOTIFICATION_TYPE {\n  /**\n   * Inline notification, which show up in task flows, to notify users of the status of an action.\n   * They usually appear at the top of the primary content area.\n   */\n  INLINE = 'inline',\n\n  /**\n   * Toast notification, which is a non-modal, time-based window elements used to display short messages.\n   * They usually appear at the bottom of the screen and disappear after a few seconds.\n   */\n  TOAST = 'toast',\n}\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: undefined,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n * @element bx-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires bx-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass BXInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Handles `click` event on the close button.\n   * @param event The event.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated close request of this modal.\n   * @param triggeredBy The element that triggered this close request.\n   */\n  protected _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (this.dispatchEvent(new CustomEvent((this.constructor as typeof BXInlineNotification).eventBeforeClose, init))) {\n        this.open = false;\n        this.dispatchEvent(new CustomEvent((this.constructor as typeof BXInlineNotification).eventClose, init));\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const { closeButtonLabel, _type: type, _handleClickCloseButton: handleClickCloseButton } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(closeButtonLabel)}\n        title=${ifDefined(closeButtonLabel)}\n        @click=\"${handleClickCloseButton}\"\n      >\n        ${Close20({\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">${title}<slot name=\"title\"></slot></p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">${subtitle}<slot name=\"subtitle\"></slot></div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { iconLabel, kind, _type: type } = this;\n    const { [kind]: icon } = iconsForKinds;\n    return !icon\n      ? undefined\n      : icon({\n          class: `${prefix}--${type}-notification__icon`,\n          children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n        });\n  }\n\n  /**\n   * The a11y text for the close button.\n   */\n  @property({ attribute: 'close-button-label' })\n  closeButtonLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * The a11y text for the icon.\n   */\n  @property({ attribute: 'icon-label' })\n  iconLabel!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineNotification;\n"]}