{"size": 2969, "ext": "js", "max_stars_repo_path": "src/auro-toaster.js", "max_stars_repo_name": "Izook/auro-toast", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/auro-toaster.js", "max_issues_repo_name": "Izook/auro-toast", "max_issues_repo_issues_event_min_datetime": "2021-06-28T20:47:19.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-14T03:00:48.000Z", "max_forks_repo_path": "src/auro-toaster.js", "max_forks_repo_name": "Izook/auro-toast", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 26.5089285714, "max_line_length": 124, "alphanum_fraction": 0.6284944426}
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

// If use litElement base class
import { LitElement, html, css } from "lit-element";

// Import touch detection lib
import "focus-visible/dist/focus-visible.min.js";
import styleCss from "./style-css.js";

/**
 * auro-toast provides users with an optional container to position and display auro-toasts.
 *
 * @attr {String} position - Sets corner position of toaster. ["top-left", "top-right", "bottom-left", "bottom-right"]
 */

class AuroToaster extends LitElement {
  constructor() {
    super();

    // default properties
    this.position = "bottom-left";
  }

  // function to define props used within the scope of this component
  static get properties() {
    return {
      ...super.properties,
      position: { type: String },
    };
  }

  static get styles() {
    return css`
      ${styleCss}
    `;
  }

  /**
   * @private function to update the position of the toast based on attributes
   * @returns {void}
   */
  updatePosition() {
    const positions = [
      "top-left",
      "top-right",
      "bottom-left",
      "bottom-right"
    ];

    if (!positions.includes(this.position)) {
      this.position = "bottom-left";
    }
  }

  /**
   * @public function to dismiss all of the toast children
   * @returns {void}
   */
  clearChildren() {
    this.childNodes.forEach((node) => {
      node.setAttribute("dismiss", "true");
    });
  }

  /**
   * @public function to add a generic toast notification to the toaster
   * @param {HTMLElement} toastContent - The message to attach to the toast
   * @param {string} type - the type of toast notification to add (optional)
   * @param {object} attributes - attributes that you want to override in the toast, e.g. duration or persistent. (optional)
   * @returns {void}
   */
  addToast(toastContent, type = "success", attributes = {}) {
    const auroToast = document.createElement("auro-toast"),
      toastPosition = this.position.includes("left") ? "left" : "right";

    auroToast.setAttribute(type, "true");
    auroToast.setAttribute("position", toastPosition);

    Object.keys(attributes).forEach((key) => {
      auroToast.setAttribute(key, attributes[key]);
    });

    auroToast.appendChild(toastContent);
    this.insertBefore(auroToast, this.firstChild);
  }

  // function that renders the HTML and CSS into  the scope of the component
  render() {
    this.updatePosition();

    return html`
      <div
        id="toaster"
        class="toaster-${this.position}"
        role="region"
        aria-live="polite"
      >
        <slot></slot>
      </div>
    `;
  }
}

/* istanbul ignore else */
// define the name of the custom component(s)
if (!customElements.get("auro-toaster")) {
  customElements.define("auro-toaster", AuroToaster);
}
