@aurodesignsystem/auro-dialog 1.0.0

package/dist/componentBase.js

@@ -0,0 +1,278 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, lit-a11y/click-events-have-key-events, jsdoc/require-description-complete-sentence */
+
+import { LitElement, html } from "lit";
+import { classMap } from 'lit/directives/class-map.js';
+
+import styleCss from "./style-css.js";
+import styleCssFixed from './style-fixed-css.js';
+import styleUnformattedCss from './style-unformatted-css.js';
+import styleUnformattedCssFixed from './style-unformatted-fixed-css.js';
+import closeIcon from '@alaskaairux/icons/dist/icons/interface/x-lg_es6.js';
+
+/* eslint-disable one-var, prefer-destructuring */
+
+const ESCAPE_KEYCODE = 27,
+  FOCUS_TIMEOUT = 50;
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * auro-dialog appear above the page and require the user's attention.
+ *
+ * @attr {Boolean} modal - Modal dialog restricts the user to take an action (no default close actions)
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {Boolean} unformatted - Unformatted dialog window, edge-to-edge fill for content
+ * @attr {Boolean} sm - Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile.
+ * @attr {Boolean} md - Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile.
+ * @attr {Boolean} onDark - Sets close icon to white for dark backgrounds
+ * @attr {Boolean} open - Sets state of dialog to open
+ * @prop {HTMLElement} triggerElement - The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened.
+ * @slot header - Text to display as the header of the modal
+ * @slot content - Injects content into the body of the modal
+ * @slot footer - Used for action options, e.g. buttons
+ * @function toggleViewable - toggles the 'open' property on the element
+ * @event toggle - Event fires when the element is closed
+ * @csspart close-button - adjust position of the close X icon in the dialog window
+ * @csspart dialog-overlay - apply CSS on the overlay of the dialog
+ * @csspart dialog - apply CSS to the entire dialog
+ * @csspart dialog-header - apply CSS to the header of the dialog
+ * @csspart dialog-content - apply CSS to the content of the dialog
+ * @csspart dialog-footer - apply CSS to the footer of the dialog
+ */
+
+export default class ComponentBase extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * @private
+     */
+    this.dom = new DOMParser().parseFromString(closeIcon.svg, 'text/html');
+
+    /**
+     * @private
+     */
+    this.svg = this.dom.body.firstChild;
+
+    this.modal = false;
+    this.unformatted = false;
+  }
+
+  static get properties() {
+    return {
+      modal: { type: Boolean },
+      unformatted: {
+        type: Boolean,
+        reflect: true
+      },
+      open: {
+        type: Boolean,
+        reflect: true
+      },
+      triggerElement: {
+        attribute: false
+      }
+    };
+  }
+
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector("#footer"),
+      slotWrapper = this.shadowRoot.querySelector("#footerWrapper");
+
+    this.dialog = this.shadowRoot.getElementById('dialog');
+
+    if (!this.unformatted && slot.assignedNodes().length === 0) {
+      slotWrapper.classList.remove("dialog-footer");
+    }
+  }
+
+  /**
+   * LitElement lifecycle method. Called after the DOM has been updated.
+   * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
+   * @returns {void}
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.openDialog();
+      } else {
+        this.closeDialog();
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.keydownEventHandler = this.handleKeydown.bind(this);
+    window.addEventListener('keydown', this.keydownEventHandler);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('keydown', this.keydownEventHandler);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  openDialog() {
+    this.defaultTrigger = document.activeElement;
+
+    setTimeout(() => {
+      this.focus();
+
+      this.handleFocusLoss();
+    }, FOCUS_TIMEOUT);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  closeDialog() {
+    this.dispatchToggleEvent();
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  dispatchToggleEvent() {
+    // replace with Event constructor once IE support dropped
+    const toggleEvent = document.createEvent("HTMLEvents");
+
+    toggleEvent.initEvent("toggle", true, false);
+    this.dispatchEvent(toggleEvent);
+  }
+
+  /**
+   * @private
+   * @returns {void} Determines if dropdown bib should be closed on focus change.
+   */
+  handleFocusLoss() {
+    const focusable = [...this.querySelectorAll('button, auro-button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')];
+
+    const firstFocusableElement = focusable[0];
+    const lastFocusableElement = focusable[focusable.length - 1];
+
+    const closeButton = this.shadowRoot.getElementById('dialog-close');
+
+    lastFocusableElement.addEventListener('focusout', () => {
+      if (closeButton !== null) { // eslint-disable-line no-negated-condition
+        closeButton.focus();
+      } else {
+        firstFocusableElement.focus();
+      }
+    });
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleOverlayClick() {
+    if (this.open && !this.modal) {
+      this.handleCloseButtonClick();
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  handleCloseButtonClick() {
+    this.open = false;
+  }
+
+  /**
+   * @private
+   * @param {KeyboardEvent} event - The keyboard event containing the key and keyCode.
+   * @returns {void}
+   */
+  handleKeydown({ key, keyCode }) {
+    if (this.open && !this.modal && (key === 'Escape' || keyCode === ESCAPE_KEYCODE)) {
+      this.open = false;
+    }
+  }
+
+  /**
+   * Focus the dialog.
+   * @private
+   * @returns {void}
+   */
+  focus() {
+    if (this.open) {
+      this.dialog.focus();
+    }
+  }
+
+  static get styles() {
+    return [
+      styleCss,
+      styleCssFixed,
+      styleUnformattedCss,
+      styleUnformattedCssFixed
+    ];
+  }
+
+  /**
+   * @private
+   * @returns {TemplateResult} - The close button template.
+   */
+  getCloseButton() {
+    return this.modal
+      ? html``
+      : html`
+        <button class="dialog-header--action" id="dialog-close" @click="${this.handleCloseButtonClick}" part="close-button">
+          <span>${this.svg}</span>
+          <span class="util_displayHiddenVisually">Close</span>
+        </button>
+      `;
+  }
+
+  render() {
+    const classes = {
+        'dialogOverlay': true,
+        'dialogOverlay--modal': this.modal && this.open,
+        'dialogOverlay--open': this.open,
+        'util_displayHidden': !this.open
+      },
+
+      contentClasses = {
+        'dialog': true,
+        'dialog--open': this.open
+      };
+
+    return html`
+      <div class="${classMap(classes)}" id="dialog-overlay" part="dialog-overlay" @click=${this.handleOverlayClick}></div>
+
+      <div role="dialog" id="dialog" class="${classMap(contentClasses)}" part="dialog" aria-labelledby="dialog-header" tabindex="-1">
+        ${this.unformatted
+        ? html`
+          <slot name="content"></slot>
+          ${this.getCloseButton()}
+        `
+        : html`
+          <div class="dialog-header" part="dialog-header">
+            <h1 class="heading heading--700 util_stackMarginNone--top" id="dialog-header">
+              <slot name="header">Default header ...</slot>
+            </h1>
+            ${this.getCloseButton()}
+          </div>
+          <div class="dialog-content" part="dialog-content">
+            <slot name="content"></slot>
+          </div>
+          <div class="dialog-footer" id="footerWrapper" part="dialog-footer">
+            <slot name="footer" id="footer"></slot>
+          </div>
+        `
+      }
+      </div>
+    `;
+  }
+}

package/dist/style-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=style-css.d.ts.map

package/dist/style-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-css.d.ts","sourceRoot":"","sources":["../src/style-css.js"],"names":[],"mappings":""}

package/dist/style-fixed-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=style-fixed-css.d.ts.map

package/dist/style-fixed-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-fixed-css.d.ts","sourceRoot":"","sources":["../src/style-fixed-css.js"],"names":[],"mappings":""}

package/dist/style-fixed-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`:host([fixed]) *,:host([fixed]) *:before,:host([fixed]) *:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){:host([fixed]) *,:host([fixed]) *:before,:host([fixed]) *:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}:host([fixed]) *:focus-visible{outline:0}:host([fixed]) *:focus-visible{outline:0}:host([fixed]) :focus:not(:focus-visible){outline:3px solid transparent}:host([fixed]) .heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}:host([fixed]) .heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}:host([fixed]) .heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}:host([fixed]) .heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}:host([fixed]) .heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}:host([fixed]) .heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){:host([fixed]) .heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){:host([fixed]) .heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}:host([fixed]) .heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}:host([fixed]) .heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([fixed]) .util_displayInline{display:inline}:host([fixed]) .util_displayInlineBlock{display:inline-block}:host([fixed]) .util_displayBlock{display:block}:host([fixed]) .util_displayFlex{display:flex}:host([fixed]) .util_displayHidden{display:none}:host([fixed]) .util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([fixed]) .util_inlinePaddingNone--left{padding-left:0}:host([fixed]) .util_inlinePaddingNone--right{padding-right:0}:host([fixed]) .util_inlineMarginNone--left{margin-left:0}:host([fixed]) .util_inlineMarginNone--right{margin-right:0}:host([fixed]) .util_inlinePadding25--left{padding-left:.125rem}:host([fixed]) .util_inlinePadding25--right{padding-right:.125rem}:host([fixed]) .util_inlineMargin25--left{margin-left:.125rem}:host([fixed]) .util_inlineMargin25--right{margin-right:.125rem}:host([fixed]) .util_inlinePadding50--left{padding-left:.25rem}:host([fixed]) .util_inlinePadding50--right{padding-right:.25rem}:host([fixed]) .util_inlineMargin50--left{margin-left:.25rem}:host([fixed]) .util_inlineMargin50--right{margin-right:.25rem}:host([fixed]) .util_inlinePadding100--left{padding-left:.5rem}:host([fixed]) .util_inlinePadding100--right{padding-right:.5rem}:host([fixed]) .util_inlineMargin100--left{margin-left:.5rem}:host([fixed]) .util_inlineMargin100--right{margin-right:.5rem}:host([fixed]) .util_inlinePadding200--left{padding-left:1rem}:host([fixed]) .util_inlinePadding200--right{padding-right:1rem}:host([fixed]) .util_inlineMargin200--left{margin-left:1rem}:host([fixed]) .util_inlineMargin200--right{margin-right:1rem}:host([fixed]) .util_inlinePadding300--left{padding-left:1.5rem}:host([fixed]) .util_inlinePadding300--right{padding-right:1.5rem}:host([fixed]) .util_inlineMargin300--left{margin-left:1.5rem}:host([fixed]) .util_inlineMargin300--right{margin-right:1.5rem}:host([fixed]) .util_inlinePadding400--left{padding-left:2rem}:host([fixed]) .util_inlinePadding400--right{padding-right:2rem}:host([fixed]) .util_inlineMargin400--left{margin-left:2rem}:host([fixed]) .util_inlineMargin400--right{margin-right:2rem}:host([fixed]) .util_inlinePadding500--left{padding-left:2.5rem}:host([fixed]) .util_inlinePadding500--right{padding-right:2.5rem}:host([fixed]) .util_inlineMargin500--left{margin-left:2.5rem}:host([fixed]) .util_inlineMargin500--right{margin-right:2.5rem}:host([fixed]) .util_inlinePadding600--left{padding-left:3rem}:host([fixed]) .util_inlinePadding600--right{padding-right:3rem}:host([fixed]) .util_inlineMargin600--left{margin-left:3rem}:host([fixed]) .util_inlineMargin600--right{margin-right:3rem}:host([fixed]) .util_inlinePadding700--left{padding-left:3.5rem}:host([fixed]) .util_inlinePadding700--right{padding-right:3.5rem}:host([fixed]) .util_inlineMargin700--left{margin-left:3.5rem}:host([fixed]) .util_inlineMargin700--right{margin-right:3.5rem}:host([fixed]) .util_inlinePadding800--left{padding-left:4rem}:host([fixed]) .util_inlinePadding800--right{padding-right:4rem}:host([fixed]) .util_inlineMargin800--left{margin-left:4rem}:host([fixed]) .util_inlineMargin800--right{margin-right:4rem}:host([fixed]) .util_inlinePadding900--left{padding-left:4.5rem}:host([fixed]) .util_inlinePadding900--right{padding-right:4.5rem}:host([fixed]) .util_inlineMargin900--left{margin-left:4.5rem}:host([fixed]) .util_inlineMargin900--right{margin-right:4.5rem}:host([fixed]) .util_inlinePadding1000--left{padding-left:5rem}:host([fixed]) .util_inlinePadding1000--right{padding-right:5rem}:host([fixed]) .util_inlineMargin1000--left{margin-left:5rem}:host([fixed]) .util_inlineMargin1000--right{margin-right:5rem}:host([fixed]) .util_stackPaddingNone--top{padding-top:0}:host([fixed]) .util_stackPaddingNone--bottom{padding-bottom:0}:host([fixed]) .util_stackMarginNone--top{margin-top:0}:host([fixed]) .util_stackMarginNone--bottom{margin-bottom:0}:host([fixed]) .util_stackPadding25--top{padding-top:.125rem}:host([fixed]) .util_stackPadding25--bottom{padding-bottom:.125rem}:host([fixed]) .util_stackMargin25--top{margin-top:.125rem}:host([fixed]) .util_stackMargin25--bottom{margin-bottom:.125rem}:host([fixed]) .util_stackPadding50--top{padding-top:.25rem}:host([fixed]) .util_stackPadding50--bottom{padding-bottom:.25rem}:host([fixed]) .util_stackMargin50--top{margin-top:.25rem}:host([fixed]) .util_stackMargin50--bottom{margin-bottom:.25rem}:host([fixed]) .util_stackPadding100--top{padding-top:.5rem}:host([fixed]) .util_stackPadding100--bottom{padding-bottom:.5rem}:host([fixed]) .util_stackMargin100--top{margin-top:.5rem}:host([fixed]) .util_stackMargin100--bottom{margin-bottom:.5rem}:host([fixed]) .util_stackPadding200--top{padding-top:1rem}:host([fixed]) .util_stackPadding200--bottom{padding-bottom:1rem}:host([fixed]) .util_stackMargin200--top{margin-top:1rem}:host([fixed]) .util_stackMargin200--bottom{margin-bottom:1rem}:host([fixed]) .util_stackPadding300--top{padding-top:1.5rem}:host([fixed]) .util_stackPadding300--bottom{padding-bottom:1.5rem}:host([fixed]) .util_stackMargin300--top{margin-top:1.5rem}:host([fixed]) .util_stackMargin300--bottom{margin-bottom:1.5rem}:host([fixed]) .util_stackPadding400--top{padding-top:2rem}:host([fixed]) .util_stackPadding400--bottom{padding-bottom:2rem}:host([fixed]) .util_stackMargin400--top{margin-top:2rem}:host([fixed]) .util_stackMargin400--bottom{margin-bottom:2rem}:host([fixed]) .util_stackPadding500--top{padding-top:2.5rem}:host([fixed]) .util_stackPadding500--bottom{padding-bottom:2.5rem}:host([fixed]) .util_stackMargin500--top{margin-top:2.5rem}:host([fixed]) .util_stackMargin500--bottom{margin-bottom:2.5rem}:host([fixed]) .util_stackPadding600--top{padding-top:3rem}:host([fixed]) .util_stackPadding600--bottom{padding-bottom:3rem}:host([fixed]) .util_stackMargin600--top{margin-top:3rem}:host([fixed]) .util_stackMargin600--bottom{margin-bottom:3rem}:host([fixed]) .util_stackPadding700--top{padding-top:3.5rem}:host([fixed]) .util_stackPadding700--bottom{padding-bottom:3.5rem}:host([fixed]) .util_stackMargin700--top{margin-top:3.5rem}:host([fixed]) .util_stackMargin700--bottom{margin-bottom:3.5rem}:host([fixed]) .util_stackPadding800--top{padding-top:4rem}:host([fixed]) .util_stackPadding800--bottom{padding-bottom:4rem}:host([fixed]) .util_stackMargin800--top{margin-top:4rem}:host([fixed]) .util_stackMargin800--bottom{margin-bottom:4rem}:host([fixed]) .util_stackPadding900--top{padding-top:4.5rem}:host([fixed]) .util_stackPadding900--bottom{padding-bottom:4.5rem}:host([fixed]) .util_stackMargin900--top{margin-top:4.5rem}:host([fixed]) .util_stackMargin900--bottom{margin-bottom:4.5rem}:host([fixed]) .util_stackPadding1000--top{padding-top:5rem}:host([fixed]) .util_stackPadding1000--bottom{padding-bottom:5rem}:host([fixed]) .util_stackMargin1000--top{margin-top:5rem}:host([fixed]) .util_stackMargin1000--bottom{margin-bottom:5rem}:host([fixed]) :host{--insetPaddingXl:0 var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400) var(--ds-size-400, $ds-size-400);--insetPaddingXxl:0 var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600) var(--ds-size-600, $ds-size-600);--insetPaddingXxxl:0 var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800) var(--ds-size-800, $ds-size-800)}:host([fixed]) .dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%}:host([fixed]) .dialogOverlay--open{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.2, 0);background:rgba(0, 0, 0, 0.2)}:host([fixed]) .dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(0.4, 0, 0.5, 0);background:rgba(0, 0, 0, 0.5)}:host([fixed]) .dialog{position:fixed;z-index:-1;right:0;bottom:0;left:0;display:block;visibility:hidden;overflow:visible;width:100%;max-height:90%;padding:var(--insetPaddingXl);transform:translateY(100%);opacity:0;border:0;background:var(--ds-color-background-lightest, #ffffff);color:var(--ds-color-text-primary-default, #222222);transition:all .3s ease-in-out}@media screen and (min-width: 768px){:host([fixed]) .dialog{top:10%;bottom:unset;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);transform:scale(0);box-shadow:0 10px 20px 0 rgba(0, 0, 0, 0.12),0 1px 10px 0 rgba(0, 0, 0, 0.1)}:host([fixed]) .dialog--open{transform:scale(1)}}@media screen and (min-width: 1024px){:host([fixed]) .dialog{max-width:986px}}:host([fixed]) .dialog--open{z-index:var(--ds-depth-modal, 400);visibility:visible;transform:translateY(0%);opacity:1}:host([fixed]) .dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([fixed]) .dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}:host([fixed]) .dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem)}:host([fixed]) .dialog-header svg{fill:var(--ds-color-text-secondary-default, #626b79)}:host([fixed]) .dialog-header--action{margin:0;padding:0;border:none;border:2px solid transparent;border-radius:var(--ds-border-radius, 0.375rem);background-color:transparent}:host([fixed]) .dialog-header--action:hover{cursor:pointer}:host([fixed]) ::slotted([slot=content]){position:relative}:host([fixed]) :host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([fixed]) :host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);right:var(--ds-size-800, 4rem)}}:host([fixed]) :host([unformatted][onDark]) .dialog-header--action{color:var(--ds-color-base-white, #ffffff)}:host([fixed]) :host([sm]) .dialog{max-height:30%}@media screen and (min-width: 768px){:host([fixed]) :host([sm]) .dialog{top:10%;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width: 1024px){:host([fixed]) :host([sm]) .dialog{max-width:740px}}:host([fixed]) :host([md]) .dialog{max-height:50%}@media screen and (min-width: 768px){:host([fixed]) :host([md]) .dialog{top:10%;max-width:70%;max-height:80%}}@media screen and (min-width: 1024px){:host([fixed]) :host([md]) .dialog{top:10%;max-width:986px}}@media screen and (min-width: 768px){:host([fixed]) :host([sm][lg]) .dialog,:host([fixed]) :host([md][lg]) .dialog{max-height:80%}}:host([fixed]) :host([sm][lg]) .dialog,:host([fixed]) :host([md][lg]) .dialog{max-height:90%}:host([fixed]) :host([unformatted]) .dialog{padding:0}`;

package/dist/style-unformatted-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=style-unformatted-css.d.ts.map

package/dist/style-unformatted-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-unformatted-css.d.ts","sourceRoot":"","sources":["../src/style-unformatted-css.js"],"names":[],"mappings":""}

package/dist/style-unformatted-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;

package/dist/style-unformatted-fixed-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit-element").CSSResult;
+export default _default;
+//# sourceMappingURL=style-unformatted-fixed-css.d.ts.map

package/dist/style-unformatted-fixed-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-unformatted-fixed-css.d.ts","sourceRoot":"","sources":["../src/style-unformatted-fixed-css.js"],"names":[],"mappings":""}

package/dist/style-unformatted-fixed-css.js

@@ -0,0 +1,2 @@
+import {css} from 'lit-element';
+export default css`:host([fixed]) [unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 768px){:host([fixed]) [unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}`;

package/index.js

@@ -0,0 +1,15 @@
+import { AuroDialog } from './src/auro-dialog';
+
+/**
+ * Register Custom Element.
+ * @param {Object} name - Name to use for custom element.
+ * @returns {void}
+ */
+ const registerComponent = (name = 'custom-dialog') => {
+  // alias definition
+  if (!customElements.get(name)) {
+    customElements.define(name, class extends AuroDialog {});
+  }
+}
+
+export { registerComponent }

package/package.json

@@ -0,0 +1,160 @@
+{
+  "//": [
+    "================================================================================",
+    "# To work within the development environment, run the following tasks",
+    "  1. $ npm run dev",
+    "  2. Go to http://localhost:8000",
+    "================================================================================"
+  ],
+  "name": "@aurodesignsystem/auro-dialog",
+  "version": "1.0.0",
+  "description": "auro-dialog HTML custom element",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AlaskaAirlines/auro-dialog"
+  },
+  "type": "module",
+  "main": "index.js",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": "^18.x || ^20.x"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "lit": "^3.1.1"
+  },
+  "peerDependencies": {
+    "@aurodesignsystem/design-tokens": "^4.3.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.5"
+  },
+  "devDependencies": {
+    "@alaskaairux/icons": "^4.32.0",
+    "@aurodesignsystem/auro-library": "^2.2.6",
+    "@aurodesignsystem/design-tokens": "^4.3.0",
+    "@aurodesignsystem/eslint-config": "^1.3.0",
+    "@aurodesignsystem/webcorestylesheets": "^5.0.5",
+    "@commitlint/cli": "^18.5.0",
+    "@commitlint/config-conventional": "^18.5.0",
+    "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^11.0.2",
+    "@web/dev-server": "^0.4.1",
+    "@web/test-runner": "^0.18.0",
+    "autoprefixer": "^10.4.17",
+    "compression": "^1.7.4",
+    "concat": "^1.0.3",
+    "concurrently": "^8.2.2",
+    "copyfiles": "^2.4.1",
+    "core-js": "^3.35.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jsdoc": "^48.0.2",
+    "husky": "^8.0.0",
+    "lodash": "^4.17.21",
+    "markdown-magic": "^2.6.1",
+    "nodemon": "^3.0.3",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.33",
+    "postcss-discard-comments": "^6.0.1",
+    "postcss-selector-replace": "^1.0.2",
+    "rollup": "^4.9.6",
+    "rollup-plugin-serve": "^1.1.1",
+    "sass": "^1.70.0",
+    "semantic-release": "^23.0.0",
+    "stylelint": "^16.2.0",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.1.0",
+    "typescript": "^5.3.3",
+    "wc-sass-render": "^1.4.0",
+    "web-component-analyzer": "^2.0.0",
+    "whatwg-fetch": "^3.6.20",
+    "yaml-lint": "^1.7.0"
+  },
+  "overrides": {
+    "wc-sass-render": {
+      "sass": "$sass"
+    }
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 iOS major versions",
+    "last 2 Firefox versions",
+    "last 2 Edge versions",
+    "last 2 Safari major versions"
+  ],
+  "nodemonConfig": {
+    "ignore": [
+      "*-css.js",
+      "*.css"
+    ]
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/changelog",
+        {
+          "changelogFile": "./CHANGELOG.md",
+          "changelogTitle": "# Semantic Release Automated Changelog"
+        }
+      ],
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "./package.json",
+            "./CHANGELOG.md",
+            "./README.md",
+            "./docs/api.md"
+          ]
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "alaska airlines",
+    "auro",
+    "design system",
+    "web components"
+  ],
+  "scripts": {
+    "build": "npm-run-all build:sass sass:render scssLint dist:js bundler build:api build:docs postinstall types",
+    "build:ci": "npm-run-all sweep build",
+    "build:api": "wca analyze 'src/auro-dialog.js' --outFiles docs/api.md",
+    "build:dev:assets": "npm-run-all build:sass:component postCss:component sass:render build:docs",
+    "build:docs": "node scripts/generateDocs.mjs",
+    "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
+    "build:sass:component": "sass --no-source-map src:src",
+    "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
+    "bundler": "rollup -c",
+    "bundler:test": "rollup -c -w",
+    "scssLint": "stylelint \"./src/**/*.scss\"",
+    "dev": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
+    "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "linters": "npm-run-all scssLint esLint",
+    "preCommit": "node scripts/pre-commit.mjs",
+    "postCss:component": "node scripts/postCss.mjs",
+    "postinstall": "node packageScripts/postinstall.mjs",
+    "sass:render": "sass-render src/*.css -t ./scripts/staticStyles-template.js",
+    "serve": "web-dev-server --open demo/ --node-resolve --watch",
+    "sweep": "rm -rf ./demo/css ./dist | rm ./src/*.css ./src/*-css.js",
+    "test": "wtr --coverage",
+    "test:watch": "wtr --watch",
+    "types": "tsc",
+    "prepare": "husky install"
+  }
+}

package/packageScripts/postinstall.mjs

@@ -0,0 +1,28 @@
+'use strict';
+
+import chalk from 'chalk';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+const pjson = require('../package.json');
+
+console.log(chalk.hex('#f26135')(`
+
+ _______                   __           __ __
+|     __|.---.-.--.--.    |  |--.-----.|  |  |.-----.
+|__     ||  _  |  |  |    |     |  -__||  |  ||  _  |
+|_______||___._|___  |    |__|__|_____||__|__||_____|
+               |_____|
+ __              _______                    __
+|  |_.-----.    |   _   |.--.--.----.-----.|  |
+|   _|  _  |    |       ||  |  |   _|  _  ||__|
+|____|_____|    |___|___||_____|__| |_____||__|
+
+
+╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮
+
+        Thanks for installing the latest version
+        of `) + chalk.hex('#ffd200').bold(`${pjson.name} v${pjson.version}.`) + chalk.hex('#f26135')(`
+
+╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
+`)
+);

package/src/auro-dialog.js

@@ -0,0 +1,36 @@
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import ComponentBase from './componentBase';
+
+// build the component class
+export class AuroDialog extends ComponentBase {
+  // constructor() {
+  //   super();
+  // }
+
+  // function to define props used within the scope of this component
+  static get properties() {
+    return {
+      ...super.properties,
+      // use custom accessors on base class
+      open: {
+        ...super.properties.open,
+        noAccessor: true
+      }
+    };
+  }
+
+  static get styles() {
+    return [super.styles];
+  }
+}
+
+/* istanbul ignore else */
+// define the name of the custom component
+if (!customElements.get("auro-dialog")) {
+  customElements.define("auro-dialog", AuroDialog);
+}
+