{"version":3,"sources":["components/notification/inline-notification.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH,OAAO,EAAuB,UAAU,EAAiB,MAAM,aAAa,CAAC;AAG7E,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAG9D,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAchD;;;;;;;;;GASG;AACH,cACM,oBAAqB,SAAQ,yBAAsB;IACvD;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;OAEG;IACH,SAAS,CAAC,KAAK,oBAA4B;IAE3C;;;OAGG;IACH,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM;IAK1C;;;OAGG;IACH,SAAS,CAAC,kBAAkB,CAAC,OAAO,EAAE,MAAM;IAO5C;;;OAGG;IACH,SAAS,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,EAAE,UAAU;IAIxD;;;OAGG;IACH,SAAS,CAAC,gCAAgC,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAiB1E;;OAEG;IACH,SAAS,CAAC,aAAa;IAgBvB;;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,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9B;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,KAAK,SAAM;IAEX,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAazB,MAAM;IAQN;;;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, 2021\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 { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\nconst { prefix } = settings;\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   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(this._handleUserOrTimerInitiatedClose.bind(this, null), timeout) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   * @param event The event.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(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        ${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   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Notification time in ms until gets closed.\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\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  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">${this._renderIcon()}${this._renderText()}</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"]}