@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../heading/heading';\nimport styles from './popover.styles.js';\nimport { Cre8Button } from '../button/button';\n\n/**\n * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.\n * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.\n * @slot - The component content\n */\n\nexport class Cre8Popover extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.\n   *  @attr {string | undefined}\n   */\n  @property()\n      heading?: string;\n\n  /**\n   * Positions the popover panel absolutely to the trigger\n   * - **default** positions the popover panel below the trigger\n   * - **top** positions the popover panel below the trigger\n   * - **left** positions the popover panel below the trigger\n   * - **right** positions the popover panel below the trigger\n   *  @attr {string | undefined}\n   */\n  @property()\n      position?: 'top' | 'left' | 'right';\n\n  /**\n   * Set to prevent the popover panel from hiding on scroll\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isVisibleOnScroll?: boolean;\n\n  /**\n   * The dynamic state for the popover\n   * - If true, the popover panel placement is determined by its position in the viewport\n   * - If false, the popover panel placement will be placed according to the position value\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isDynamic?: boolean;\n\n  /**\n   * The dynamic active state\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActiveDynamic?: boolean;\n\n  /**\n   * The active state for the popover\n   * - If true, the popover panel is visible\n   * - If false, the popover panel is hidden\n   *\n   * _This property is dynamically set_\n   *  @attr {boolean | undefined}\n   */\n  @property({ type: Boolean, reflect: true })\n      isActive?: boolean;\n\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover')\n      _Cre8Popover: HTMLElement;\n\n  /**\n   * Query the popover panel element\n   */\n  @query('.cre8-c-popover__panel')\n      _Cre8PopoverPanel: HTMLElement;\n\n  /**\n   * Query the assigned elements in the trigger slot\n   */\n  @queryAssignedElements({ slot: 'trigger' })\n      _Cre8PopoverTrigger: Array<HTMLElement>;\n\n  /**\n   * Query the assigned elements in the footer slot\n   */\n  @queryAssignedElements({ slot: 'footer' })\n      _Cre8PopoverFooter: Array<HTMLElement>;\n\n  /**\n   * Query the document direction value\n   * <br/><br/> _*This property is dynamically set_\n   */\n  get isRTL() {\n      return document.dir === 'rtl';\n  }\n\n  /**\n   * Connected Callback Lifecycle\n   * 1. Add window resize event listener\n   * 2. Add window scroll event listener\n   * 3. Add window orientation change event listener\n   * 4. Add mousedown event listener\n   */\n  connectedCallback() {\n      super.connectedCallback();\n      globalThis.window.addEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.addEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * Disconnected Callback Lifecycle\n   * 1. Remove window resize event listener\n   * 2. Remove window scroll event listener\n   * 3. Remove window orientation change event listener\n   * 4. Remove mousedown event listener\n   */\n  disconnectedCallback() {\n      super.disconnectedCallback();\n      globalThis.window.removeEventListener('resize', this.removeActive); /* 1 */\n      globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); /* 2 */\n      globalThis.window.removeEventListener('orientationchange', this.removeActive); /* 3 */\n      globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); /* 4 */\n  }\n\n  /**\n   * First Updated Lifecycle\n   * 1. Set attribute since aria expanded can't be passed down through the slot\n   */\n  firstUpdated() {\n      this.addAria(); /* 1 */\n  }\n\n  /**\n   * Add aria attributes on the trigger button\n   * 1. Select the element within the trigger slot\n   * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.\n   * 3 Set the type to button.\n   */\n  addAria() {\n    /* 1 */\n      let popoverTrigger;\n      if (this._Cre8PopoverTrigger[0].tagName === 'cre8-BUTTON') {\n          popoverTrigger = this._Cre8PopoverTrigger[0] as Cre8Button;\n          popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;\n      } else {\n          popoverTrigger = this._Cre8PopoverTrigger[0];\n          popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); /* 2 */\n          popoverTrigger.setAttribute('type', 'button'); /* 3 */\n      }\n  }\n\n  /**\n   * Handle all dynamic placement\n   */\n  dynamicPosition() {\n    // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n    /* eslint complexity: [\"warn\", 10] */\n      if (this.isDynamic && this._Cre8PopoverPanel) {\n          const body = document.querySelector('body').getBoundingClientRect();\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n\n      /**\n       * If popover panel breaks out the left side of the window, position it to the right\n       */\n          if (popoverPanel.left < 0) {\n              this.position = this.isRTL ? 'left' : 'right';\n          }\n\n      /**\n       * If popover panel breaks out the right side of the window, position it to the left\n       */\n          if (popoverPanel.right >= body.width) {\n              this.position = this.isRTL ? 'right' : 'left';\n          }\n\n      /**\n       * If popover panel breaks out the top side of the window only, position it to the bottom\n       */\n          if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {\n              this.position = null;\n          }\n\n      /**\n       * If popover panel breaks out the bottom side of the window only, position it to the top\n       */\n          if (\n              popoverPanel.bottom >= window.innerHeight\n        && popoverPanel.left >= 0\n        && popoverPanel.right <= body.width\n          ) {\n              this.position = 'top';\n          }\n      }\n  }\n\n  /**\n   * Set Popover Active State\n   * 1. Toggle the active state between true and false\n   * 2. Set attribute since aria expanded can't be passed down through the slot\n   * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.\n   * This accounts for both design system buttons and native HTML buttons\n   */\n  private _toggleActive() {\n      this.isActive = !this.isActive; /* 1 */\n      this.addAria(); /* 2 */\n\n      if (this.isActive) {\n          requestAnimationFrame(() => {\n              this.dynamicPosition();\n          });\n          this.dispatchEvent(\n              new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      } else {\n      /* 3 */\n          this.dispatchEvent(\n              new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n          );\n      }\n\n    /**\n     * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position\n     */\n      setTimeout(() => {\n          if (this.isActive) {\n              this.isActiveDynamic = true;\n          } else {\n              this.isActiveDynamic = false;\n          }\n      }, 2);\n  }\n\n  /**\n   * Handle Keydown\n   * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button\n   * 2. If the panel is opened, tab away closes the popover panel\n   * 3. The panel can be opened and closed by Enter or Space keys.\n   */\n  private _handleKeydown(e: KeyboardEvent) {\n      if (e.key === 'Escape' && this.isActive === true) {\n          this._toggleActive();\n      } else if (e.key === 'Tab') {\n          this._handleTabNavigation(e);\n      }\n  }\n\n  private _handleTabNavigation(e: KeyboardEvent) {\n      if (this.isActive) {\n          this._navigateInsidePopover(e);\n      }\n  }\n\n  private _navigateInsidePopover(e: KeyboardEvent) {\n      const focusableElements = this._getFocusableElements();\n      if (focusableElements.length === 0) {\n          this._closePopoverAndFocusTrigger(e);\n          return;\n      }\n\n      const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n      if (document.activeElement === lastFocusableElement) {\n          this._closePopoverAndFocusTrigger(e);\n          e.preventDefault();\n      }\n  }\n\n  private _getFocusableElements(): HTMLElement[] {\n      const panelFocusableElements = Array.from(this._Cre8PopoverFooter);\n      return [...panelFocusableElements];\n  }\n\n  private _closePopoverAndFocusTrigger(e: KeyboardEvent) {\n      this._toggleActive();\n      e.preventDefault();\n  }\n\n  /**\n   * Handle click outside the component\n   * 1. Close the show/hide popover panel on click outside\n   * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early\n   * 3. By the time a user clicks on the page the shadowRoot will almost certainly be\n   * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n   * undefined. To work around that we'll check that we have a shadowRoot (and a\n   * rendered .host) element here to appease the TypeScript compiler. This should never\n   * actually be shown or run for a human end user.\n   * 4. Check to see if we clicked inside the active panel\n   * 5. If the panel is active and we've clicked outside of the panel then it should be closed.\n   */\n  handleOnClickOutside = (e: MouseEvent) => {\n    /* 2 */\n      if (!this.isActive) {\n          return;\n      }\n\n    /* 3 */\n      if (!this.shadowRoot?.host) {\n          throw Error('Could not determine panel context during click handler');\n      }\n\n    /* 4 */\n      const didClickInside = e.composedPath().includes(this.shadowRoot.host);\n\n    /* 5 */\n      if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {\n          if (this.isActive && !didClickInside) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State on Scroll\n   * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state\n   * 2. If the popover height is less than the window height, then allow the active to remove on scroll\n   */\n  removeActiveOnScroll = () => {\n    /* 1 */\n      if (this.isActive && !this.isVisibleOnScroll) {\n      /* 2 */\n          const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n          const popoverTrigger = this._Cre8Popover;\n          const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;\n\n          if (popoverHeight < window.innerHeight) {\n              this._toggleActive();\n          }\n      }\n  };\n\n  /**\n   * Remove Active State\n   * 1. If a specific event is fired, remove the active state.\n   */\n  removeActive = () => {\n      if (this.isActive) {\n          this._toggleActive();\n      }\n  };\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-popover', {\n          'cre8-c-popover--top': this.position === 'top',\n          'cre8-c-popover--left': this.position === 'left',\n          'cre8-c-popover--right': this.position === 'right',\n          'cre8-is-active': this.isActive,\n          'cre8-is-dynamic': this.isDynamic,\n          'cre8-is-dynamic-active': this.isActiveDynamic,\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        ${this.slotNotEmpty('trigger')\n        && html` <slot name=\"trigger\" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}\n        ${this.isActive\n        ? html`\n              <div tabindex=\"0\" class=\"cre8-c-popover__panel\" @keydown=${this._handleKeydown}>\n                ${(this.slotNotEmpty('header') || this.heading)\n                && html`\n                  <div class=\"cre8-c-popover__header\">\n                    ${this.heading\n        ? html`<div class=\"cre8-c-popover__heading\">${this.heading}</div>`\n        : html`<slot name=\"header\"></slot>`}\n                  </div>\n                `}\n                <slot></slot>\n                ${this.slotNotEmpty('footer')\n                && html`\n                  <div class=\"cre8-c-popover__footer\">\n                    <slot name=\"footer\"></slot>\n                  </div>\n                `}\n              </div>\n            `\n        : nothing}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-popover') === undefined) {\n    customElements.define('cre8-popover', Cre8Popover);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-popover': Cre8Popover;\n  }\n}\n\nexport default Cre8Popover;\n"]}

package/lib/components/popover/popover.styles.d.ts

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

package/lib/components/popover/popover.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA6vBV,CAAC;AACH,eAAe,MAAM,CAAC"}