@jack-henry/jh-elements 2.0.0-beta.13 → 2.0.0-beta.15

package/components/switch/switch.js

@@ -2,10 +2,9 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-
-let id = 0;
+import { JhElement } from '../element/element.js';
 
 /**
  * @cssprop --jh-switch-opacity-disabled - The switch opacity when disabled. Defaults to `--jh-opacity-disabled`.
@@ -28,9 +27,7 @@ let id = 0;
  *
  * @customElement jh-switch
  */
-export class JhSwitch extends LitElement {
-  /** @type {?Number} */
-  #id;
+export class JhSwitch extends JhElement {
 
   static get styles() {
     return css`
@@ -253,20 +250,10 @@ export class JhSwitch extends LitElement {
     this.label = null;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
-  }
-
   #handleClick() {
     if (!this.disabled && this.accessibleDisabled !== 'true') {
       this.checked = !this.checked;
-      const options = {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-      };
-      this.dispatchEvent(new CustomEvent('jh-change', options));
+      this.dispatchCustomEvent('jh-change');
     }
   }
 
@@ -276,7 +263,7 @@ export class JhSwitch extends LitElement {
 
     if (this.helperText) {
       helperText = html`
-        <p class="helper-text" id="switch-helper-text-${this.#id}">
+        <p class="helper-text" id="switch-helper-text-${this.uniqueId}">
           ${this.helperText}
         </p>
       `;
@@ -285,7 +272,7 @@ export class JhSwitch extends LitElement {
     if (this.label) {
       label = html`
         <div class="label-container">
-          <label class="label-text" for="switch-label-${this.#id}">
+          <label class="label-text" for="switch-label-${this.uniqueId}">
             ${this.label}
           </label>
           ${helperText}
@@ -300,11 +287,11 @@ export class JhSwitch extends LitElement {
         aria-label="${ifDefined(this.accessibleLabel)}"
         aria-disabled="${ifDefined(this.accessibleDisabled)}"
         type="button"
-        aria-describedby=${this.helperText ? `switch-helper-text-${this.#id}` : null}
+        aria-describedby=${this.helperText ? `switch-helper-text-${this.uniqueId}` : null}
         ?checked=${this.checked}
         ?disabled=${this.disabled}
         aria-pressed="${this.checked}"
-        id="switch-label-${this.#id}"
+        id="switch-label-${this.uniqueId}"
       ></button>
       <span aria-hidden="true"></span>
       ${label}
@@ -312,4 +299,4 @@ export class JhSwitch extends LitElement {
   }
 }
 
-customElements.define('jh-switch', JhSwitch);
+JhSwitch.register('jh-switch', JhSwitch);

package/components/table/table.js

@@ -2,14 +2,13 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../table-header-cell/table-header-cell.js';
 import '../table-data-cell/table-data-cell.js';
 import '../table-row/table-row.js';
 
-let id = 0;
-
 /**
  * Table
  * @cssprop --jh-table-color-text-striped-enabled - The striped row text color. Defaults to `--jh-color-content-primary-enabled`.
@@ -29,9 +28,7 @@ let id = 0;
  * @slot jh-table-toolbar - Use to insert toolbar.
  * @customElement jh-table
  */
-export class JhTable extends LitElement {
-  /** @type {?Number} */
-  #id;
+export class JhTable extends JhElement {
 
   static get styles() {
     return css`
@@ -174,8 +171,8 @@ export class JhTable extends LitElement {
       :host([scrollable]) .table-wrapper {
         position: relative;
         overflow-x: hidden;
-        flex: 1 1 auto;
-        /* display grid makes sticky work and shadows go till bottom. */
+        flex: 1 1 auto;        
+        /* display grid makes sticky work and shows horizontal scrollbar on top. */
         display: grid;
       }
 
@@ -187,9 +184,10 @@ export class JhTable extends LitElement {
         /* removes bouncy scroll behavior in Safari and FF */
         /* overscroll-behavior: none; */
       }
-      :host([scrollable]) .scrollable {
+      :host([scrollable]) .table {
         width: auto;
         position: relative;
+        min-width: 100%;
       }
       .table-wrapper:has(.table-container:focus-visible) {
         outline-color: var(
@@ -199,7 +197,7 @@ export class JhTable extends LitElement {
         outline-width: var(--jh-border-focus-width);
         outline-style: var(--jh-border-focus-style);
       }
-      .table-wrapper:focus-visible {
+      .table-container:focus-visible, :host([scrollable]) .table-wrapper:focus-visible {
         outline: none;
       }
     `;
@@ -289,34 +287,28 @@ export class JhTable extends LitElement {
     this.addEventListener('jh-sort', this.#handleSort);
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.#id = id++;
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   async firstUpdated() {
     if (!this.scrollable) return;
 
-    let scrollTable = this.shadowRoot.querySelector('.table');
-    await scrollTable.updateComplete;
-    let originalTableWidth = scrollTable.getBoundingClientRect().width;
-
     this.observer = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
         let table = entry.target.shadowRoot.querySelector('.table');
         let tableContainer =
           entry.target.shadowRoot.querySelector('.table-container');
+        if (!table || !tableContainer) return;
         if (table.scrollWidth > tableContainer.clientWidth) {
-          table.classList.add('scrollable');
-        } else {
-          if (table.scrollWidth >= originalTableWidth) {
-            table.classList.remove('scrollable');
+          tableContainer.setAttribute('tabindex', '0');
+         }
+        else {
             tableContainer.removeAttribute('tabindex');
-          } else {
-            table.classList.add('scrollable');
-            tableContainer.setAttribute('tabindex', '0');
           }
-        }
       });
     });
 
@@ -350,12 +342,12 @@ export class JhTable extends LitElement {
 
   render() {
     return html`
-      <slot name="jh-table-caption" id="table-caption-${this.#id}" @slotchange=${this.#handleSlot}></slot>
+      <slot name="jh-table-caption" id="table-caption-${this.uniqueId}" @slotchange=${this.#handleSlot}></slot>
       <slot name="jh-table-toolbar" @slotchange=${this.#handleSlot}></slot>
       <div class="table-wrapper">
         <div class="table-container" tabindex="${ifDefined(this.scrollable ? '0' : null)}">
-          <div class="table ${this.scrollable ? 'scrollable' : ''}" role="table" 
-          aria-labelledby="table-caption-${this.#id}" aria-label=${ifDefined(this.accessibleLabel === '' ? null : this.accessibleLabel)}>
+          <div class="table" role="table" 
+          aria-labelledby="table-caption-${this.uniqueId}" aria-label=${ifDefined(this.accessibleLabel === '' ? null : this.accessibleLabel)}>
             <slot name="jh-table-header" class="header" role="rowgroup"></slot>
             <slot class="body" role="rowgroup"></slot>
             <slot name="jh-table-footer" class="footer" role="rowgroup"></slot>
@@ -367,4 +359,4 @@ export class JhTable extends LitElement {
   }
 }
 
-customElements.define('jh-table', JhTable);
+JhTable.register('jh-table', JhTable);

package/components/table-data-cell/table-data-cell.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 
 /**
  * Table Cell
@@ -30,10 +31,7 @@ import { LitElement, css, html } from 'lit';
  * 
  * @customElement jh-table-cell
  */
-export class JhTableDataCell extends LitElement {
-
-  /** @type {ElementInternals} */
-  #internals;
+export class JhTableDataCell extends JhElement {
 
   static get styles() {
     return css`
@@ -62,7 +60,8 @@ export class JhTableDataCell extends LitElement {
         font-size: var(--footer-font-size, var(--jh-font-body-regular-1-font-size));      
         font-family: var(--footer-font-family, var(--jh-font-body-regular-1-font-family));
         display: table-cell;
-        width: 100%;
+        width: auto;
+        box-sizing: border-box;
       }
       :host([horizontal-align="left"]) {
         text-align: left;
@@ -88,8 +87,7 @@ export class JhTableDataCell extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'cell';
+    this.internals.role = 'cell';
     /** 
      * Sets the horizontal alignment of the content.
      * @attr horizontal-align
@@ -104,4 +102,4 @@ export class JhTableDataCell extends LitElement {
   }
 }
 
-customElements.define('jh-table-data-cell', JhTableDataCell);
+JhTableDataCell.register('jh-table-data-cell', JhTableDataCell);

package/components/table-header-cell/table-header-cell.js

@@ -2,13 +2,12 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 import '@jack-henry/jh-icons/icons-wc/icon-arrow-up-arrow-down.js';
 import '@jack-henry/jh-icons/icons-wc/icon-arrow-up-small.js';
 import '@jack-henry/jh-icons/icons-wc/icon-arrow-down-small.js';
 
-let id = 0;
-
 /**
  * Table Header Cell
  * 
@@ -66,13 +65,10 @@ let id = 0;
  * @slot jh-table-sorted-none - Use to insert a custom icon for no sort.
  * @slot default - Use to insert table header text.
  * 
- * @event jh-sort - Dispatched when a sortable header cell is activated. Event payload includes the column, sorted state, and id of the header cell and can be accessed via `e.detail.column`, `e.detail.sorted`, and ` e.detail.id`.  
+ * @event jh-sort - Dispatched when a sortable header cell is activated. Event payload includes the column, sorted state, and id of the header cell and can be accessed via `e.detail.reference.column`, `e.detail.reference.sorted`, and `e.detail.reference.id`.  
  * @customElement jh-table-header-cell
  */
-export class JhTableHeaderCell extends LitElement {
-
-  /** @type {ElementInternals} */
-  #internals;
+export class JhTableHeaderCell extends JhElement {
 
   static get styles() {
     return css`
@@ -99,7 +95,7 @@ export class JhTableHeaderCell extends LitElement {
         vertical-align: var(--vertical-align, top);
         display: table-cell;
         box-sizing: border-box;
-        width: 100%;
+        width: auto;
       }
       :host([sortable]:hover) {
         border-bottom-color: var(--jh-table-header-cell-color-border-bottom-hover, var(--jh-border-decorative-color));
@@ -208,8 +204,7 @@ export class JhTableHeaderCell extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'columnheader';
+    this.internals.role = 'columnheader';
     /** 
      * Sets the horizontal alignment of the content.
      * @attr horizontal-align
@@ -233,7 +228,7 @@ export class JhTableHeaderCell extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     /** @ignore */
-    this.id = `table-header-${id++}`;
+    this.id = `table-header-${this.uniqueId}`;
     if (this.sortable) {
     this.setAttribute('tabindex', '0');
     this.setAttribute('aria-sort', this.sorted);
@@ -261,18 +256,13 @@ export class JhTableHeaderCell extends LitElement {
     
     this.setAttribute('aria-sort', this.sorted);
 
-    this.dispatchEvent(
-      new CustomEvent('jh-sort', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: {
-          column: this,
-          sorted: this.sorted,
-          id: this.id,
-        },
-      })
-    );
+    this.dispatchCustomEvent('jh-sort', {
+      reference: {
+        sorted: this.sorted,
+        column: this,
+        id: this.id,
+      },
+    });
   }
 
   #getSortingIcon() {
@@ -318,4 +308,4 @@ export class JhTableHeaderCell extends LitElement {
     }
 }
 
-customElements.define('jh-table-header-cell', JhTableHeaderCell);
+JhTableHeaderCell.register('jh-table-header-cell', JhTableHeaderCell);

package/components/table-row/table-row.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 
 /**
  * Table Row
@@ -17,10 +18,7 @@ import { LitElement, css, html } from 'lit';
  * @slot default - Use to insert `<jh-table-data-cell>`s or `<jh-table-header-cell>`s.
  * @customElement jh-table-row
  */
-export class JhTableRow extends LitElement {
-
-  /** @type {ElementInternals} */
-  #internals;
+export class JhTableRow extends JhElement {
 
   static get styles() {
     return css`
@@ -40,8 +38,7 @@ export class JhTableRow extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'row';
+    this.internals.role = 'row';
   }
 
   render() {
@@ -49,4 +46,4 @@ export class JhTableRow extends LitElement {
   }
 }
 
-customElements.define('jh-table-row', JhTableRow);
+JhTableRow.register('jh-table-row', JhTableRow);

package/components/tag/tag.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 import '@jack-henry/jh-icons/icons-wc/icon-xmark.js';
 import '../button/button.js';
 import '../tooltip/tooltip.js';
@@ -42,7 +43,7 @@ import '../tooltip/tooltip.js';
  * @event jh-dismiss - Dispatched when the tag is dismissed.
  * @customElement jh-tag
  */
-export class JhTag extends LitElement {
+export class JhTag extends JhElement {
 
   static get styles() {
     return css`
@@ -357,13 +358,7 @@ export class JhTag extends LitElement {
 
   #handleDismissal(e) {
     e.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent('jh-dismiss', {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    );
+    this.dispatchCustomEvent('jh-dismiss');
 
     if (this.removeOnDismiss) {
       this.remove();
@@ -376,19 +371,22 @@ export class JhTag extends LitElement {
     if (this.dismissible) {
       dismissBtn = html`
       <jh-button
-        size="medium"
+        size="x-small"
         appearance="secondary"
         accessible-label=${this.dismissButtonAccessibleLabel}
         @click=${this.#handleDismissal}>
-        <slot name="jh-tag-dismiss-icon" slot="jh-button-icon">
-          <jh-icon-xmark slot="jh-button-icon"></jh-icon-xmark>
+        <slot name="jh-tag-dismiss-icon" slot="jh-button-icon-left">
+          <jh-icon-xmark slot="jh-button-icon-left"></jh-icon-xmark>
         </slot>
       </jh-button>
       `;
     }
 
     if (this.dismissible && this.tooltipLabel) {
-      dismissBtn = html`<jh-tooltip label=${this.tooltipLabel}>${dismissBtn}</jh-tooltip>`;
+      dismissBtn = html`<jh-tooltip>
+        ${dismissBtn}
+        <div slot="jh-tooltip-content">${this.tooltipLabel}</div>
+      </jh-tooltip>`;
     }
     return dismissBtn;
   }
@@ -419,4 +417,4 @@ export class JhTag extends LitElement {
   }
 }
 
-customElements.define('jh-tag', JhTag);
+JhTag.register('jh-tag', JhTag);

package/components/tag-group/tag-group.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 
 /**
  * Tag Group
@@ -10,9 +11,7 @@ import { LitElement, css, html } from 'lit';
  * @slot default - Use to insert `<jh-tag>` component(s).
  * @customElement jh-tag-group
  */
-export class JhTagGroup extends LitElement {
-  /** @type {ElementInternals} */
-  #internals;
+export class JhTagGroup extends JhElement {
 
   static get styles() {
     return css`
@@ -43,8 +42,7 @@ export class JhTagGroup extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'group';
+    this.internals.role = 'group';
     /** @type {'start'| 'end'} */
     this.alignment = 'start';
   }
@@ -54,4 +52,4 @@ export class JhTagGroup extends LitElement {
   }
 }
 
-customElements.define('jh-tag-group', JhTagGroup);
+JhTagGroup.register('jh-tag-group', JhTagGroup);

package/components/toast/toast.js

@@ -2,7 +2,8 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 import '../notification/notification.js';
 
 /**
@@ -15,7 +16,7 @@ import '../notification/notification.js';
  * @event jh-dismiss - Dispatched when the toast is dismissed.
  * @customElement jh-toast
  */
-export class JhToast extends LitElement {
+export class JhToast extends JhElement {
   static get styles() {
     return css`
       @keyframes fadeInUp  {
@@ -114,17 +115,7 @@ export class JhToast extends LitElement {
   }
 
   #removeToast() {
-    this.#dispatch('jh-dismiss');
-  }
-
-  #dispatch(name) {
-    this.dispatchEvent(
-      new CustomEvent(name, {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    );
+    this.dispatchCustomEvent('jh-dismiss');
   }
 
   #handleDismiss() {
@@ -165,4 +156,4 @@ export class JhToast extends LitElement {
   }
 }
 
-customElements.define('jh-toast', JhToast);
+JhToast.register('jh-toast', JhToast);

package/components/tooltip/tooltip.js

@@ -2,8 +2,9 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { JhElement } from '../element/element.js';
 
 let id = 0;
 const openAttr = 'open';
@@ -11,15 +12,14 @@ const openAttr = 'open';
 /**
  * @cssprop --jh-tooltip-color-background - The tooltip and arrow background-color. Defaults to `--jh-color-content-primary-enabled`.
  * @cssprop --jh-tooltip-color-text - The tooltip text color. Defaults to `--jh-color-content-on-primary-enabled`.
+ * @cssprop --jh-tooltip-size-max-width - The maximum width of the tooltip. Defaults to `160px`.
  *
  * @slot default - Use to insert the element that triggers the tooltip.
  * @slot jh-tooltip-content - Use to insert the content of the tooltip.
  *
  * @customElement jh-tooltip
  */
-export class JhTooltip extends LitElement {
-  /** @type {ElementInternals} */
-  #internals;
+export class JhTooltip extends JhElement {
 
   static get styles() {
     return css`
@@ -36,13 +36,13 @@ export class JhTooltip extends LitElement {
           --jh-tooltip-color-text,
           var(--jh-color-content-on-primary-enabled)
         );
+        max-width: var(--jh-tooltip-size-max-width, 160px);
         border-radius: var(--jh-border-radius-100);
         padding: var(--jh-dimension-200);
         font-family: var(--jh-font-helper-bold-font-family);
         font-weight: var(--jh-font-helper-bold-font-weight);
         font-size: var(--jh-font-helper-bold-font-size);
         line-height: var(--jh-font-helper-bold-line-height);
-        max-width: 160px;
         width: max-content;
         position: absolute;
         box-sizing: border-box;
@@ -224,7 +224,6 @@ export class JhTooltip extends LitElement {
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
     /**@type {?Boolean} */
     this.flipDisabled = false;
     /**@type {?Boolean} */
@@ -253,14 +252,14 @@ export class JhTooltip extends LitElement {
     const hasContent = slot.assignedNodes().length > 0;
 
     if (hasContent) {
-      this.#internals.role = 'tooltip';
+      this.internals.role = 'tooltip';
       this.addEventListener('focus', this.#handleOpenTooltip, true);
       this.addEventListener('mouseenter', this.#handleOpenTooltip);
       this.addEventListener('blur', this.#handleCloseTooltip, true);
       this.addEventListener('mouseleave', this.#handleCloseTooltip);
       this.addEventListener('keydown', this.#handleKeyDown);
     } else {
-      this.#internals.role = '';
+      this.internals.role = '';
       this.#handleCloseTooltip();
       this.removeEventListener('focus', this.#handleOpenTooltip);
       this.removeEventListener('mouseenter', this.#handleOpenTooltip);
@@ -476,4 +475,4 @@ export class JhTooltip extends LitElement {
   }
 }
 
-customElements.define('jh-tooltip', JhTooltip);
+JhTooltip.register('jh-tooltip', JhTooltip);