@aquera/nile-elements 0.0.63 → 0.0.65

package/dist/src/nile-toast/nile-toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-base-standard);\n    margin: inherit;\n    padding: 12px;\n    gap: 10px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    height: 26px;\n    width: 26px;\n    border-radius: 4px;\n    padding: 6px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-colors-green-500);\n    background: var(--nile-colors-green-100);\n    box-shadow: 0px 14px 28px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-colors-green-500);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-colors-blue-500);\n    background: var(--nile-colors-blue-100);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-colors-blue-500);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-colors-yellow-500);\n    background: var(--nile-colors-yellow-100);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-colors-yellow-500);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-colors-red-500);\n    background: var(--nile-colors-red-100);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    border: 1px solid var(--nile-colors-red-500);\n    background: var(--nile-colors-red-500);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    display: block;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family:var(--nile-font-family-serif);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 14px;\n    color: black;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n  }\n\n  .alert__message--content {\n    line-height: 21px;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img{\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-toast.css.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    border: solid 2px 2px;\n    border-radius: var(--nile-radius-base-standard);\n    margin: inherit;\n    padding: 12px;\n    gap: 10px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    height: 26px;\n    width: 26px;\n    border-radius: 4px;\n    padding: 6px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n  \n  .alert__message {\n    flex: 1 1 auto;\n    display: block;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 14px;\n    color: black;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n  }\n\n  .alert__message--content {\n    line-height: 21px;\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid #e5e9eb;\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid #e5e9eb;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-toast/nile-toast.d.ts

@@ -49,7 +49,7 @@ export declare class NileToast extends NileElement {
     hasSlottedIcon: boolean;
     prefixImageUrl: string;
     /** The alert's theme variant. */
-    variant: 'success' | 'info' | 'warning' | 'error';
+    variant: 'success' | 'info' | 'warning' | 'error' | 'gray' | 'black';
     /**
      * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
      * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning
@@ -69,7 +69,8 @@ export declare class NileToast extends NileElement {
     show(): Promise<void>;
     /** Hides the alert */
     hide(): Promise<void>;
-    getIconNameByVariant(): "cancel" | "tick" | "helpsupport" | "info-icon";
+    getIconNameByVariant(): "check-circle" | "info-icon";
+    getIconColorByVariant(): "var(--nile-toast-color-icon-color-success)" | "var(--nile-toast-color-icon-color-info)" | "var(--nile-toast-color-icon-color-warning)" | "var(--nile-toast-color-icon-color-error)" | "var(--nile-toast-color-icon-color-gray)" | "var(--nile-toast-color-icon-color-black)";
     handleSlotChange(e: any): void;
     /**
      * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when

package/dist/src/nile-toast/nile-toast.js

@@ -135,15 +135,33 @@ let NileToast = class NileToast extends NileElement {
     getIconNameByVariant() {
         switch (this.variant) {
             case 'success':
-                return 'tick';
+                return 'check-circle';
             case 'info':
-                return 'helpsupport';
+                return 'info-icon';
             case 'warning':
                 return 'info-icon';
             case 'error':
-                return 'cancel';
-            default:
-                return 'tick';
+                return 'info-icon';
+            case 'gray':
+                return 'info-icon';
+            case 'black':
+                return 'info-icon';
+        }
+    }
+    getIconColorByVariant() {
+        switch (this.variant) {
+            case 'success':
+                return 'var(--nile-toast-color-icon-color-success)';
+            case 'info':
+                return 'var(--nile-toast-color-icon-color-info)';
+            case 'warning':
+                return 'var(--nile-toast-color-icon-color-warning)';
+            case 'error':
+                return 'var(--nile-toast-color-icon-color-error)';
+            case 'gray':
+                return 'var(--nile-toast-color-icon-color-gray)';
+            case 'black':
+                return 'var(--nile-toast-color-icon-color-black)';
         }
     }
     handleSlotChange(e) {
@@ -206,6 +224,8 @@ let NileToast = class NileToast extends NileElement {
             'alert--info': this.variant === 'info',
             'alert--warning': this.variant === 'warning',
             'alert--error': this.variant === 'error',
+            'alert--gray': this.variant === 'gray',
+            'alert--black': this.variant === 'black',
         })}
         role="alert"
         aria-hidden=${this.open ? 'false' : 'true'}
@@ -222,17 +242,13 @@ let NileToast = class NileToast extends NileElement {
                   <nile-icon
                     name="${this.getIconNameByVariant()}"
                     size="15"
-                    color="white"
+                    color="${this.getIconColorByVariant()}"
                   ></nile-icon>
                 </div>
               `
-            : ``}
-
-          ${this.prefixImageUrl
-            ? html `
+            : html `
                 <img src="${this.prefixImageUrl}" class="alert__prefix-img" />
-              `
-            : ``}
+              `}
         </slot>
 
         <slot

package/dist/src/nile-toast/nile-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'tick';\n      case 'info':\n        return 'helpsupport';\n      case 'warning':\n        return 'info-icon';\n      case 'error':\n        return 'cancel';\n      default:\n        return 'tick';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"15\"\n                    color=\"white\"\n                  ></nile-icon>\n                </div>\n              `\n            : ``}\n\n          ${this.prefixImageUrl\n            ? html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `\n            : ``}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <div\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </div>\n          <div\n            ?hidden=\"${this.hasSlottedContent && this.content === ''}\"\n            class=\"alert__message--content ${this.title === ''\n              ? 'alert__message--content-only'\n              : ''}\"\n          >\n            ${this.content}\n          </div>\n\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"close\"\n                label=\"close\"\n                size=\"14\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"]}
+{"version":3,"file":"nile-toast.js","sourceRoot":"","sources":["../../../src/nile-toast/nile-toast.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit-element';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'check-circle';\n      case 'info':\n        return 'info-icon';\n      case 'warning':\n        return 'info-icon';\n      case 'error':\n        return 'info-icon';\n      case 'gray':\n        return 'info-icon';\n      case 'black':\n        return 'info-icon';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success)';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info)';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning)';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error)';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray)';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"15\"\n                    color=\"${this.getIconColorByVariant()}\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <div\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </div>\n          <div\n            ?hidden=\"${this.hasSlottedContent && this.content === ''}\"\n            class=\"alert__message--content ${this.title === ''\n              ? 'alert__message--content-only'\n              : ''}\"\n          >\n            ${this.content}\n          </div>\n\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"close\"\n                label=\"close\"\n                size=\"14\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"]}