feat(api): add register static method

demo/api.html

@@ -36,9 +36,8 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script type="module">
+    <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();
     </script>

demo/api.js

@@ -2,6 +2,7 @@ import { initVisibleExample } from "../apiExamples/visible";
 import { initVariantToastsExample } from "../apiExamples/variant";
 import { initNoIconExample } from "../apiExamples/noIcon";
 
+import '../index.js';
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 export function initExamples(initCount) {

demo/api.min.js

@@ -1,3 +1,14 @@
+import { css, LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg.mjs';
+import successIcon from '@alaskaairux/icons/dist/icons/interface/check-stroke.mjs';
+import errorIcon from '@alaskaairux/icons/dist/icons/alert/error-stroke.mjs';
+import infoIcon from '@alaskaairux/icons/dist/icons/alert/information-stroke.mjs';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+
 /* eslint-disable jsdoc/require-jsdoc */
 
 function initVisibleExample() {
@@ -55,6 +66,253 @@ function initNoIconExample() {
   });
 }
 
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([visible]){display:inline-flex;min-width:100%;padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem);border-radius:var(--ds-size-100, 0.5rem);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));gap:var(--ds-size-200, 1rem);pointer-events:auto}@media(576px <= width < 1024px){:host([visible]){min-width:33%;max-width:50%}}@media(width >= 1024px){:host([visible]){min-width:200px;max-width:500px}}:host([visible]) .toastContainer{display:flex;width:100%;flex-direction:row;align-items:center;gap:var(--ds-size-200, 1rem)}:host([visible]) .closeButton{width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding-right:0;padding-left:0;border:var(--ds-size-25, 0.125rem) solid transparent;margin-left:auto}:host([visible]) .closeButton:hover{border-radius:50%;cursor:pointer}:host([visible]) .closeButtonIcon{width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([visible]) .hidden{opacity:0;transition:visibility 0s 300ms,opacity 300ms ease-out;visibility:hidden}:host([visible]) [auro-icon]{width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([visible]) .message{flex:1;align-self:center}`;
+
+var colorCss = css`:host([visible]){background-color:var(--ds-auro-toast-container-color);color:var(--ds-auro-toast-text-color)}:host([visible]) .closeButton:hover{background-color:var(--ds-auro-toast-close-button-hover-container-color)}:host([variant=error]){--ds-auro-toast-container-color: var(--ds-color-container-error-default, #fff4f4);--ds-auro-toast-text-color: var(--ds-color-text-primary-default, #2a2a2a)}:host([variant=success]){--ds-auro-toast-container-color: var(--ds-color-container-success-default, #eef8f5);--ds-auro-toast-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
+
+var tokensCss = css`:host{--ds-auro-toast-container-color: var(--ds-color-container-subtle-inverse, #393d43);--ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-toast-close-button-hover-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}`;
+
+var buttonVersion = '8.0.1';
+
+var iconVersion = '5.0.2';
+
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+const TIME_TIL_FADE_OUT = 5000;
+const FADE_OUT_DURATION = 300;
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-toast element provides users a way to display short, temporary messages.
+ *
+ * @attr {Boolean} visible - Sets state of toast to visible
+ * @attr {String} variant - Component will render visually based on which variant value is set; currently supports `error`, `success`
+ * @attr {Boolean} noIcon - Removes icon from the toast UI
+ * @fires onToastClose - Notifies that the toast has been closed
+ */
+
+// build the component class
+class AuroToast extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.closeDom = new DOMParser().parseFromString(closeIcon.svg, 'text/html');
+
+    /**
+     * @private
+     */
+    this.closeSvg = this.closeDom.body.firstChild;
+    this.closeSvg.setAttribute('slot', 'svg');
+
+    /**
+     * @private
+     */
+    this.successDom = new DOMParser().parseFromString(successIcon.svg, 'text/html');
+
+    /**
+     * @private
+     */
+    this.successSvg = this.successDom.body.firstChild;
+
+    this.successSvg.setAttribute('slot', 'svg');
+
+    /**
+     * @private
+     */
+    this.errorDom = new DOMParser().parseFromString(errorIcon.svg, 'text/html');
+
+    /**
+     * @private
+     */
+    this.errorSvg = this.errorDom.body.firstChild;
+    this.errorSvg.setAttribute('slot', 'svg');
+
+    /**
+     * @private
+     */
+    this.infoDom = new DOMParser().parseFromString(infoIcon.svg, 'text/html');
+
+    /**
+     * @private
+     */
+    this.infoSvg = this.infoDom.body.firstChild;
+    this.infoSvg.setAttribute('slot', 'svg');
+
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.fadeOutTimer = undefined;
+  }
+
+  // This function is to define props used within the scope of this component
+  // Be sure to review  https://lit.dev/docs/components/properties/
+  // to understand how to use reflected attributes with your property settings.
+  static get properties() {
+    return {
+      ...super.properties,
+      visible: {
+        type: Boolean,
+        reflect: true
+      },
+      variant: {
+        type: String,
+        reflect: true
+      },
+      noIcon: {
+        type: Boolean
+      }
+    };
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      colorCss,
+      tokensCss
+    ];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-toast"] - The name of element that you want to register to.
+   *
+   * @example
+   * AuroToast.register("custom-toast") // this will register this element to <custom-toast/>
+   *
+   */
+  static register(name = "auro-toast") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroToast);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, 'auro-toast');
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleOnClose() {
+    this.fadeOutToast();
+    clearTimeout(this.fadeOutTimer);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  fadeOutToast() {
+    const toastContainer = this.shadowRoot.querySelector('.toastContainer');
+    toastContainer.classList.add('hidden');
+
+    setTimeout(() => {
+      this.closeToast();
+    }, FADE_OUT_DURATION);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  closeToast() {
+    clearTimeout(this.fadeOutTimer);
+    this.visible = false;
+
+    /**
+     * Emits closed toast event.
+     *
+     * @event onToastClose
+     * @type {object}
+     * @property {boolean} false - Sets visibility value for the toast element.
+     */
+    this.dispatchEvent(new CustomEvent('onToastClose', {
+      bubbles: true,
+      composed: true,
+      detail: this
+    }));
+  }
+
+  /**
+   * For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.
+   * @private
+   * @returns {void}
+   */
+  setOnClick() {
+    const mobileBreakPoint = 767;
+    if (window.innerWidth < mobileBreakPoint) {
+      this.onclick = () => {
+        this.fadeOutToast();
+      };
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setOnClick();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('variant')) {
+      clearTimeout(this.fadeOutTimer);
+    }
+    // do not auto dismiss for error toasts
+    if (this.visible && this.variant !== 'error') {
+      this.fadeOutTimer = setTimeout(() => {
+        this.fadeOutToast();
+      }, TIME_TIL_FADE_OUT);
+    }
+  }
+
+  render() {
+    return this.visible ? html`
+      <div aria-live="polite" class="toastContainer">
+        ${this.noIcon ? undefined : html`
+          <${this.iconTag} customSize customColor customSvg class="typeIcon">
+            ${this.variant === 'success' ? this.successSvg : undefined}
+            ${this.variant === 'error' ? this.errorSvg : undefined}
+            ${this.variant !== 'success' && this.variant !== 'error' ? this.infoSvg : undefined}
+          </${this.iconTag}>
+        `}
+        <div class="message"><slot></slot></div>
+        <${this.buttonTag}
+          variant="flat"
+          ?onDark=${this.getAttribute('variant') !== 'error' && this.getAttribute('variant') !== 'success'}
+          @click="${this.handleOnClose}" part="close-button">
+          <${this.iconTag} customSize customColor customSvg>
+            ${this.closeSvg}
+          </${this.iconTag}>
+          <span class="util_displayHiddenVisually">Close</span>
+        </${this.buttonTag}>
+      </div>
+    ` : undefined;
+  }
+}
+
+AuroToast.register();
+
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 function initExamples(initCount) {
@@ -75,3 +333,4 @@ function initExamples(initCount) {
   }
 }
 
+export { initExamples };

demo/index.html

@@ -43,15 +43,8 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script type="module" src="../index.js"></script>
-    <script type="module">
-      import { AuroToast } from '../src/auro-toast.js';
-      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-      RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
-    </script>
-    <script type="module" src="../src/auro-toaster.js"></script>
-    <script type="module">
+    <script type="module" data-demo-script="true">
       import { initExamples } from "./index.min.js"
       initExamples();
     </script>

demo/index.js

@@ -5,6 +5,11 @@ import { initErrorExample } from '../apiExamples/error';
 import { initSuccessExample } from '../apiExamples/success';
 import { initMultipleToastsExample } from '../apiExamples/multipleToasts';
 
+import { AuroToast } from '../src/auro-toast.js';
+
+AuroToast.register(); // registering to `auro-toast`
+AuroToast.register('custom-toast');
+
 export function initExamples(initCount) {
   initCount = initCount || 0;
 

demo/index.md

@@ -234,15 +234,14 @@ The following example is for the HTML template.
 
 ## Recommended Use and Version Control
 
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-toast` custom element is defined automatically.
+There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-toast` custom element is defined automatically.
 
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroToast.register(name)` method and pass in a unique name.
 
 ```js
 import { AuroToast } from './src/auro-toast.js';
-import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
+AuroToast.register('custom-toast');
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-toast` element.