@aurodesignsystem-dev/auro-popover 0.0.0-pr102.3 → 0.0.0-pr106.0

package/src/auro-popover.js

@@ -1,165 +0,0 @@
-// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable */
-
-import { html } from "lit/static-html.js";
-import { LitElement, css } from "lit";
-import { createRef, ref } from 'lit/directives/ref.js';
-
-import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-import {AuroLayover} from "@aurodesignsystem/auro-layover/class";
-import layoverVersion from './layoverVersion.js';
-
-// Import touch detection lib
-import styleCss from "./style-css.js";
-import colorCss from "./color-css.js";
-import tokensCss from "./tokens-css.js";
-
-const DEFAULTS = {
-  placement: 'top',
-}
-
-/** The amount of extra spacing to add when the user passes "addSpace" */
-const ADD_SPACE_AMOUNT = 22;
-
-/**
- * Popover attaches to an element and displays on hover/blur.
- *
- * @attr {boolean} disabled - If true, will disable the popover from showing on hover and focus
- * @attr {boolean} addSpace - If true, will add additional top and bottom space around the appearance of the popover in relation to the trigger
- * @attr {boolean} removeSpace - If true, will remove top and bottom space around the appearance of the popover in relation to the trigger
- * @attr {"top"|"bottom"} placement - position for popover in relation to the element
- * @slot - Default unnamed slot for the use of popover content
- * @slot trigger - The element in this slot triggers hiding and showing the popover.
- */
-export class AuroPopover extends LitElement {
-  constructor() {
-    super();
-    this._privateDefaults();
-    this._setDefaults(DEFAULTS);
-    this._createRefs();
-  }
-
-  /**
-   * Internal Defaults.
-   * @private
-   * @returns {void}
-   */
-  _setDefaults(defaults) {
-    Object.keys(defaults).forEach((key) => {
-      if (this[key] === undefined) {
-        this[key] = defaults[key];
-      }
-    });
-  };
-
-  /**
-   * Creates references for the layover and arrow elements.
-   * @returns {void}
-   */
-  _createRefs() {
-    this._layoverRef = createRef();
-    this._arrowRef = createRef();
-  }
-
-  /**
-   * Creates versioned tags for internal use.
-   * @returns {void}
-   */
-  _privateDefaults() {
-    const versioning = new AuroDependencyVersioning();
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-    this.layoverTag = versioning.generateTag("auro-popover-layover", layoverVersion, AuroLayover);
-  }
-
-  // function to define props used within the scope of this component
-  static get properties() {
-    return {
-      placement:  { type: String },
-      disabled:   { type: Boolean },
-      boundary:   { type: String },
-      addSpace:   { type: Boolean, reflect: true }
-    };
-  }
-
-  static get styles() {
-    return [
-      css`${styleCss}`,
-      css`${colorCss}`,
-      css`${tokensCss}`
-    ];
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-popover"] - The name of element that you want to register to.
-   *
-   * @example
-   * AuroPopover.register("custom-popover") // this will register this element to <custom-popover/>
-   *
-   */
-  static register(name = "auro-popover") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroPopover);
-  }
-
-  get _layover () {
-    return this._layoverRef.value;
-  }
-
-  /**
-   * Toggles the display of the popover content.
-   * @private
-   * @returns {void} Fires an update lifecycle.
-   */
-  toggle() {
-    this._layover.toggle();
-  }
-
-  /**
-   * Hides the popover.
-   * @private
-   * @returns {void} Fires an update lifecycle.
-   */
-  toggleHide() {
-    this._layover.hide();
-  }
-
-  /**
-   * Shows the popover.
-   * @private
-   * @returns {void} Fires an update lifecycle.
-   */
-  toggleShow() {
-    this._layover.show();
-  }
-
-  get _popoverOffset() {
-    // If addSpace is true, we add extra space to the offset
-    return this.addSpace ? 12 + ADD_SPACE_AMOUNT : 12;
-  }
-
-  // function that renders the HTML and CSS into  the scope of the component
-  render() {
-    return html`
-      <${this.layoverTag}
-        ${ref(this._layoverRef)}
-        behavior="tooltip"
-        .placement="${this.placement}"
-        inline="true"
-        offset="${this._popoverOffset}"
-        ?disabled="${this.disabled}"
-      >
-        <div slot="arrow" ${ref(this._arrowRef)} data-placement="${this.placement}" id="arrow" class="arrow"></div>
-        <slot name="trigger" slot="trigger"></slot>
-        <div id="popover" class="popover util_insetLg body-default" aria-live="polite" part="popover">
-          <slot></slot>
-        </div>
-      </${this.layoverTag}>
-    `;
-  }
-}

package/src/color-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`::slotted(*){color:var(--ds-auro-popover-text-color)}.popover{background-color:var(--ds-auro-popover-container-color);box-shadow:var(--ds-auro-popover-boxshadow-color)}.arrow{box-shadow:2px 2px 1px 0 var(--ds-auro-popover-boxshadow-color)}`;

package/src/layoverVersion.js

@@ -1 +0,0 @@
-export default '0.0.0-pr1.17'

package/src/style-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(*){white-space:normal}::slotted(*:hover){cursor:pointer}:host([removeSpace]) .popover{margin:calc(-1*(var(--ds-size-50, 0.25rem) + 1px)) 0 !important}.arrow{width:0;height:0;position:relative;border-style:solid}.arrow[data-placement=top]{border-width:var(--ds-size-150, 0.75rem) calc(var(--ds-size-150, 0.75rem)/2 + .5px) 0 calc(var(--ds-size-150, 0.75rem)/2 + .5px);border-color:var(--ds-auro-popover-container-color) transparent transparent transparent}.arrow[data-placement=bottom]{border-width:0 calc(var(--ds-size-150, 0.75rem)/2 + .5px) var(--ds-size-150, 0.75rem) calc(var(--ds-size-150, 0.75rem)/2 + .5px);border-color:transparent transparent var(--ds-auro-popover-container-color) transparent}.arrow[data-placement=left]{border-width:calc(var(--ds-size-150, 0.75rem)/2 + .5px) 0 calc(var(--ds-size-150, 0.75rem)/2 + .5px) var(--ds-size-150, 0.75rem);border-color:transparent transparent transparent var(--ds-auro-popover-container-color)}.arrow[data-placement=right]{border-width:calc(var(--ds-size-150, 0.75rem)/2 + .5px) var(--ds-size-150, 0.75rem) calc(var(--ds-size-150, 0.75rem)/2 + .5px) 0;border-color:transparent var(--ds-auro-popover-container-color) transparent transparent}.popover{display:inline-block;max-width:calc(100% - var(--ds-size-400, 2rem));border-radius:var(--ds-border-radius, 0.375rem)}@media screen and (min-width: 576px){.popover{max-width:50%}}@media screen and (min-width: 768px){.popover{max-width:40%}}@media screen and (min-width: 1024px){.popover{max-width:27rem}}`;

package/src/tokens-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--ds-auro-popover-boxshadow-color:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-popover-container-color:var(--ds-basic-color-surface-default, #ffffff);--ds-auro-popover-text-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;