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

package/components/list-item/list-item.js

@@ -2,25 +2,43 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
+import { JhElement } from '../element/element.js';
 import '../divider/divider.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
- * @cssprop --jh-list-item-color-background - The list-item container's background-color.
+ * @cssprop --jh-list-item-color-background-enabled - The list-item container's background-color.
  * Defaults to `transparent`.
- * @cssprop --jh-list-item-color-text - The default, left, text, metadata, right, primary, and secondary slot text color. Defaults to `--jh-color-content-primary-enabled`.
- * @cssprop --jh-list-item-space-padding-right - The right padding on the list-item container. Defaults to `--jh-dimension-600`.
- * @cssprop --jh-list-item-space-padding-left - The left padding on the list-item container. Defaults to `--jh-dimension-600`.
- * @cssprop --jh-list-item-size-height - The list-item's height. Defaults to `auto`.
- * @cssprop --jh-list-item-color-text-primary - The primary text color.
+ * @cssprop --jh-list-item-color-text-primary-enabled - The list-item text color for the default, left, right slots and primary text.
  * Defaults to `--jh-color-content-primary-enabled`.
- * @cssprop --jh-list-item-color-text-secondary - The secondary text color.
- * Defaults to `--jh-color-content-secondary-enabled`.
- * @cssprop --jh-list-item-metadata-color-text-primary - The primary metadata text color.
+ * @cssprop --jh-list-item-color-text-primary-focus - The list-item text color for the default, left, right slots and primary text when interactive and focused.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-color-text-primary-hover - The list-item text color for the default, left, right slots and primary text when interactive and hovered.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-color-text-primary-active - The list-item text color for the default, left, right slots and primary text when interactive and active.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-color-text-primary-selected - The list-item text color for the default, left, right slots and primary text when interactive and selected.
  * Defaults to `--jh-color-content-primary-enabled`.
- * @cssprop --jh-list-item-metadata-color-text-secondary - The secondary metadata text color.
+ * @cssprop --jh-list-item-color-text-primary-disabled - The list-item text color for the default, left, right slots and primary text when interactive and disabled.
+ * Defaults to `--jh-color-content-primary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary-enabled - The secondary text color.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary-focus - The secondary text color when interactive and focused.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary-hover - The secondary text color when interactive and hovered.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary-active - The secondary text color when interactive and active.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary-selected - The secondary text color when interactive and selected.
+ * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-color-text-secondary-disabled - The secondary text color when interactive and disabled.
  * Defaults to `--jh-color-content-secondary-enabled`.
+ * @cssprop --jh-list-item-space-padding-right - The right padding on the list-item container. Defaults to `--jh-dimension-600`.
+ * @cssprop --jh-list-item-space-padding-left - The left padding on the list-item container. Defaults to `--jh-dimension-600`.
+ * @cssprop --jh-list-item-space-padding-top - The top padding on the list-item container. Defaults to `--jh-dimension-400`.
+ * @cssprop --jh-list-item-space-padding-bottom - The bottom padding on the list-item container. Defaults to `--jh-dimension-400`.
+ * @cssprop --jh-list-item-size-height - The list-item's height. Defaults to `auto`.
  * @cssprop --jh-list-item-color-background-focus - The list-item background-color when interactive and focused.
  * Defaults to `--jh-color-container-primary-hover`.
  * @cssprop --jh-list-item-color-focus - The list-item outline when it is interactive and receives keyboard focus.
@@ -29,36 +47,33 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * Defaults to `--jh-color-container-primary-hover`.
  * @cssprop --jh-list-item-color-background-active - The list-item background-color when interactive and active.
  * Defaults to `--jh-color-container-primary-active`.
+ * @cssprop --jh-list-item-color-background-disabled - The list-item background-color when interactive and disabled.
+ * Defaults to `transparent`.
+ * @cssprop --jh-list-item-opacity-disabled - The list-item opacity when interactive and disabled.
+ * Defaults to `--jh-opacity-disabled`.
  * @cssprop --jh-list-item-color-background-selected - The list-item background-color when interactive and selected. Defaults to `--jh-color-container-primary-selected`.
  * @cssprop --jh-list-item-color-border-selected - The list-item border-left-color when interactive and selected.
  * Defaults to `--jh-border-selected-color`.
  *
- * @slot default - Use to insert fully customized content into the list-item. Cannot be used with the other slots.
+ * @slot default - Use to insert custom content into the list-item.
  * @slot jh-list-item-left - Use to insert custom content on the left the list-item. 
  * @slot jh-list-item-right - Use to insert custom content on the right the list-item.
- * @slot jh-list-item-content -  Use to insert custom content into the list-item.
- * @slot jh-list-item-metadata - Use to insert custom metadata into the list-item.
  * @customElement jh-list-item
  */
-export class JhListItem extends LitElement {
-  /** @type {ElementInternals} */
-  #internals;
-
+export class JhListItem extends JhElement {
   static get styles() {
     return css`
       :host {
-        background-color: var(--jh-list-item-color-background, transparent);
-        padding-bottom: var(--jh-dimension-400);
+        background-color: var(--jh-list-item-color-background-enabled, transparent);
+        color: var(
+          --jh-list-item-color-text-primary-enabled,
+          var(--jh-color-content-primary-enabled)
+        );
         font-family: var(--jh-font-body-medium-1-font-family);
         font-weight: var(--jh-font-body-medium-1-font-weight);
         font-size: var(--jh-font-body-medium-1-font-size);
         line-height: var(--jh-font-body-medium-1-line-height);
-        color: var(
-          --jh-list-item-color-text,
-          var(--jh-color-content-primary-enabled)
-        );
         display: block;
-        box-sizing: border-box;
       }
       /* list item height is set to auto when styling hook is not set */
       .list-item {
@@ -70,18 +85,19 @@ export class JhListItem extends LitElement {
           --jh-list-item-space-padding-left,
           var(--jh-dimension-600)
         );
-        padding-top: var(--jh-dimension-400);
+        height: var(--jh-list-item-size-height, auto);
+        padding-top: var(--jh-list-item-space-padding-top, var(--jh-dimension-400));
+        padding-bottom: var(--jh-list-item-space-padding-bottom, var(--jh-dimension-400));
+        gap: var(--jh-dimension-200);
         display: flex;
         flex-direction: row;
         align-items: center;
-        height: calc(var(--jh-list-item-size-height, auto) - var(--jh-dimension-400));
         box-sizing: border-box;
       }
-      :host([show-divider]) .list-item {
-        height: calc(var(--jh-list-item-size-height, auto) - var(--jh-dimension-400) - 1px);
-      }
       /* states for interactive list-items*/
       :host([tabindex]:focus-visible) {
+        --jh-list-item-color-text-primary-enabled: var(--jh-list-item-color-text-primary-focus);
+        --jh-list-item-color-text-secondary-enabled: var(--jh-list-item-color-text-secondary-focus);
         background-color: var(
           --jh-list-item-color-background-focus,
           var(--jh-color-container-primary-hover)
@@ -95,6 +111,8 @@ export class JhListItem extends LitElement {
         outline-offset: -2px;
       }
       :host([tabindex]:hover) {
+        --jh-list-item-color-text-primary-enabled: var(--jh-list-item-color-text-primary-hover);
+        --jh-list-item-color-text-secondary-enabled: var(--jh-list-item-color-text-secondary-hover);
         background-color: var(
           --jh-list-item-color-background-hover,
           var(--jh-color-container-primary-hover)
@@ -102,127 +120,86 @@ export class JhListItem extends LitElement {
         cursor: pointer;
       }
       :host([tabindex]:active) {
+        --jh-list-item-color-text-primary-enabled: var(--jh-list-item-color-text-primary-active);
+        --jh-list-item-color-text-secondary-enabled: var(--jh-list-item-color-text-secondary-active);
         background-color: var(
           --jh-list-item-color-background-active,
           var(--jh-color-container-primary-active)
         );
       }
+      :host([tabindex][disabled]) {
+        --jh-list-item-color-text-primary-enabled: var(--jh-list-item-color-text-primary-disabled);
+        --jh-list-item-color-text-secondary-enabled: var(--jh-list-item-color-text-secondary-disabled);
+        background-color: var(--jh-list-item-color-background-disabled, transparent);
+        cursor: default;
+        pointer-events: none;
+      }
+      :host([tabindex][disabled]) .list-item {
+        opacity: var(--jh-list-item-opacity-disabled, var(--jh-opacity-disabled));
+      }
       :host([tabindex][selected]) {
+        --jh-list-item-color-text-primary-enabled: var(--jh-list-item-color-text-primary-selected);
+        --jh-list-item-color-text-secondary-enabled: var(--jh-list-item-color-text-secondary-selected);
         background-color: var(
           --jh-list-item-color-background-selected,
           var(--jh-color-container-primary-selected)
         );
-        border-left-color: var(
-          --jh-list-item-color-border-selected,
-          var(--jh-border-selected-color)
-        );
-        border-left-style: var(--jh-border-selected-style);
-        border-left-width: var(--jh-border-selected-width);
       }
       :host([tabindex][selected]) .list-item {
         padding-left: calc(var(
           --jh-list-item-space-padding-left,
           var(--jh-dimension-600)
         ) - var(--jh-border-selected-width));
-      }
-      :host([tabindex][disabled]) {
-        opacity: var(--jh-opacity-disabled);
-        cursor: default;
-        pointer-events: none;
-      }
-
-      :host([show-divider]) {
-        padding-bottom: 0;
+        border-left-color: var(
+          --jh-list-item-color-border-selected,
+          var(--jh-border-selected-color)
+        );
+        border-left-style: var(--jh-border-selected-style);
+        border-left-width: var(--jh-border-selected-width);
       }
       jh-divider {
+        margin-top: 0;
         margin-bottom: 0;
       }
-      ::slotted([slot='jh-list-item-left']) {
-        color: var(
-          --jh-list-item-color-text,
-          var(--jh-color-content-primary-enabled)
-        );
-        margin-right: var(--jh-dimension-200);
+      slot[name="jh-list-item-left"],
+      slot[name="jh-list-item-right"] {
         flex: 0 0 auto;
+        align-items: center;
+        display: none;
       }
-      ::slotted([slot='jh-list-item-content']) {
-        color: var(
-          --jh-list-item-color-text,
-          var(--jh-color-content-primary-enabled)
-        );
+      slot:not([name]) {
         flex: 1 1 auto;
+        display: none;
+        min-width: 0; 
       }
       .text {
-        display: flex;
+        gap: var(--jh-dimension-50);
+        display: none;
         flex-direction: column;
         flex: 1 1 auto;
         min-width: 0;
       }
-      ::slotted([slot='jh-list-item-metadata']) {
-        color: var(
-          --jh-list-item-color-text,
-          var(--jh-color-content-primary-enabled)
-        );
-        margin-left: var(--jh-dimension-200);
-        flex: 0 0 auto;
-      }
-      .metadata {
-        margin-left: var(--jh-dimension-200);
-        flex: 0 0 auto;
+      .display, 
+      slot[name="jh-list-item-left"].has-content,
+      slot[name="jh-list-item-right"].has-content,
+      slot:not([name]).has-content {
         display: flex;
-        flex-direction: column;
-      }
-      ::slotted([slot='jh-list-item-right']) {
-        color: var(
-          --jh-list-item-color-text,
-          var(--jh-color-content-primary-enabled)
-        );
-        margin-left: var(--jh-dimension-200);
-        flex: 0 0 auto;
-      }
-      .primary-text {
-        color: var(
-          --jh-list-item-color-text-primary,
-          var(--jh-color-content-primary-enabled)
-        );
       }
       .secondary-text {
         color: var(
-          --jh-list-item-color-text-secondary,
+          --jh-list-item-color-text-secondary-enabled,
           var(--jh-color-content-secondary-enabled)
         );
         font-family: var(--jh-font-helper-regular-font-family);
         font-weight: var(--jh-font-helper-regular-font-weight);
         font-size: var(--jh-font-helper-regular-font-size);
         line-height: var(--jh-font-helper-regular-line-height);
-        margin-top: var(--jh-dimension-50);
       }
       .primary-text,
       .secondary-text {
         display: block;
         word-break: break-word;
       }
-      .primary-metadata {
-        color: var(
-          --jh-list-item-metadata-color-text-primary,
-          var(--jh-color-content-primary-enabled)
-        );
-        text-align: right;
-        white-space: nowrap;
-      }
-      .secondary-metadata {
-        color: var(
-          --jh-list-item-metadata-color-text-secondary,
-          var(--jh-color-content-secondary-enabled)
-        );
-        font-family: var(--jh-font-helper-regular-font-family);
-        font-weight: var(--jh-font-helper-regular-font-weight);
-        font-size: var(--jh-font-helper-regular-font-size);
-        line-height: var(--jh-font-helper-regular-line-height);
-        margin-top: var(--jh-dimension-50);
-        text-align: right;
-        white-space: nowrap;
-      }
     `;
   }
 
@@ -242,13 +219,6 @@ export class JhListItem extends LitElement {
         type: Number,
         attribute: 'divider-inset',
       },
-      /**
-       * The text to show as primary metadata.
-       */
-      primaryMetadata: {
-        type: String,
-        attribute: 'primary-metadata',
-      },
       /**
        * The text to show as primary text.
        */
@@ -256,13 +226,6 @@ export class JhListItem extends LitElement {
         type: String,
         attribute: 'primary-text',
       },
-      /**
-       * The text to show as secondary metadata.
-       */
-      secondaryMetadata: {
-        type: String,
-        attribute: 'secondary-metadata',
-      },
       /**
        * The text to show as secondary text.
        */
@@ -285,31 +248,56 @@ export class JhListItem extends LitElement {
         reflect: true,
         attribute: 'show-divider',
       },
+      _showFallback: { type: Boolean, state: true },
+      _hasLeftSlotContent: { type: Boolean, state: true },
+      _hasRightSlotContent: { type: Boolean, state: true },
     };
   }
 
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'listitem';
+    this.internals.role = 'listitem';
     /** @type {?boolean} */
     this.disabled = false;
     /** @type {null|0|8|16|24|32|40|48|56|64|72|80|88|96} */
     this.dividerInset = null;
     /** @type {?string} */
-    this.primaryMetadata = null;
-    /** @type {?string} */
     this.primaryText = null;
     /** @type {?string} */
-    this.secondaryMetadata = null;
-    /** @type {?string} */
     this.secondaryText = null;
     /** @type {?boolean} */
     this.selected = false;
     /** @type {?boolean} */
     this.showDivider = false;
+    this._showFallback = true;
+    this._hasLeftSlotContent = false;
+    this._hasRightSlotContent = false;
   }
 
+#checkSlotContent(slot) {
+  const slottedElements = slot.assignedElements({ flatten: true });
+  if (slottedElements.length > 0) return true;
+  if (slot.assignedNodes({ flatten: true }).some(
+    (node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ''
+  )) return true;
+  return false;
+}
+
+#handleSlotChange(e) {
+  const slot = e.target;
+  if (slot.name === 'jh-list-item-left') {
+    this._hasLeftSlotContent = this.#checkSlotContent(slot);
+  } else if (slot.name === 'jh-list-item-right') {
+    this._hasRightSlotContent = this.#checkSlotContent(slot);
+  } else {
+    // default slot
+    const nodes = slot.assignedNodes();
+    this._showFallback = nodes.every(
+      node => node.nodeType === Node.TEXT_NODE && !node.textContent.trim()
+    );
+  }
+}
+
   render() {
     let showDivider;
 
@@ -329,25 +317,25 @@ export class JhListItem extends LitElement {
 
     return html`
       <div class="list-item">
-        <slot></slot>
-        <slot name="jh-list-item-left"></slot>
-        <slot name="jh-list-item-content">
-          <div class="text">
-            <div class="primary-text">${this.primaryText}</div>
-            <div class="secondary-text">${this.secondaryText}</div>
-          </div>
-        </slot>
-        <slot name="jh-list-item-metadata">
-          <div class="metadata">
-            <div class="primary-metadata">${this.primaryMetadata}</div>
-            <div class="secondary-metadata">${this.secondaryMetadata}</div>
-          </div>
-        </slot>
-        <slot name="jh-list-item-right"></slot>
+        <slot
+          name="jh-list-item-left"
+          class=${this._hasLeftSlotContent ? 'has-content' : ''}
+          @slotchange=${this.#handleSlotChange}
+        ></slot>
+        <slot @slotchange=${this.#handleSlotChange} 
+          class=${this._showFallback ? '' : 'has-content'}></slot>
+        <div class=${`text ${this._showFallback ? 'display' : ''}`}>
+          ${this.primaryText ? html`<div class="primary-text">${this.primaryText}</div>` : ''}
+          ${this.secondaryText ? html`<div class="secondary-text">${this.secondaryText}</div>` : ''}
+        </div>
+        <slot
+          name="jh-list-item-right"
+          class=${this._hasRightSlotContent ? 'has-content' : ''}
+          @slotchange=${this.#handleSlotChange}
+        ></slot>
       </div>
       ${showDivider}
     `;
   }
 }
-
-customElements.define('jh-list-item', JhListItem);
+JhListItem.register('jh-list-item', JhListItem);

package/components/menu/menu.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';
 
 /**
  * @cssprop --jh-menu-z-index - The menu z-index. Defaults to `--jh-z-index-positive-1000`.
@@ -15,10 +16,7 @@ import { LitElement, css, html } from 'lit';
  * @slot default - Use to insert menu items.
  * @customElement jh-menu
  */
-export class JhMenu extends LitElement {
-  /** @type {ElementInternals} */
-  #internals;
-
+export class JhMenu extends JhElement {
   static get styles() {
     return css`
       :host {
@@ -57,8 +55,7 @@ export class JhMenu extends LitElement {
   }
   constructor() {
     super();
-    this.#internals = this.attachInternals();
-    this.#internals.role = 'menu';
+    this.internals.role = 'menu';
   }
   render() {
     return html`
@@ -68,4 +65,4 @@ export class JhMenu extends LitElement {
     `;
   }
 }
-customElements.define('jh-menu', JhMenu);
+JhMenu.register('jh-menu', JhMenu);

package/components/notification/notification.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 '../button/button.js';
 import '@jack-henry/jh-icons/icons-wc/icon-xmark.js';
 
@@ -59,7 +60,7 @@ import '@jack-henry/jh-icons/icons-wc/icon-xmark.js';
  *
  * @customElement jh-notification
  */
-export class JhNotification extends LitElement {
+export class JhNotification extends JhElement {
   static get styles() {
     return css`
     :host {
@@ -136,7 +137,7 @@ export class JhNotification extends LitElement {
     }
     /* Default slot styling */
     .display-default-slot {
-      padding: var(--jh-dimension-200) 0;
+      padding: var(--jh-dimension-100) 0;
       margin: var(--jh-dimension-50) 0;
       font: var(--jh-font-body-regular-1);
       display: flex;
@@ -149,7 +150,7 @@ export class JhNotification extends LitElement {
     }
     slot[name="jh-notification-icon"]::slotted(*) {
       margin-right: var(--jh-dimension-400);
-      padding: var(--jh-dimension-200) 0;
+      padding: var(--jh-dimension-100) 0;
     }
     :host([appearance='neutral']) slot[name="jh-notification-icon"] {
       --jh-icon-color-fill: var(--jh-notification-icon-color-fill-neutral, var(--jh-color-content-on-primary-enabled));
@@ -204,7 +205,8 @@ export class JhNotification extends LitElement {
     .stacked-container,
     .inline-container {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
+      line-height: 0;
     }
     `;
   }
@@ -252,7 +254,7 @@ export class JhNotification extends LitElement {
   }
 
   #handleDismissal() {
-    this.#dispatch('jh-dismiss');
+    this.dispatchCustomEvent('jh-dismiss');
     // if notification is wrapped by jh-toast component, do not remove notification from DOM
     if (this.parentNode.host?.nodeName === 'JH-TOAST') {
       return;
@@ -261,16 +263,6 @@ export class JhNotification extends LitElement {
     }   
   }
 
-  #dispatch(name) {
-    this.dispatchEvent(
-      new CustomEvent(name, {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    );
-  }
-
   #getActionButtons() {
     let className = this.stacked ? 'stacked-action-btn' : 'inline-action-btn';
     return html`
@@ -295,6 +287,13 @@ export class JhNotification extends LitElement {
     }
   }
 
+  #handleIconSlotChange(e) {
+    let newSlottedElement = e.target.assignedElements()[0];
+    if (newSlottedElement?.tagName.startsWith('JH-ICON')) {
+      newSlottedElement.setAttribute('size', 'medium');
+    }
+  }
+
   render() {
     let dismissBtn;
     
@@ -305,8 +304,8 @@ export class JhNotification extends LitElement {
           appearance="secondary"
           accessible-label=${this.dismissButtonAccessibleLabel}
           @click=${this.#handleDismissal}
-          ><slot name="jh-notification-dismiss-icon" slot="jh-button-icon">
-            <jh-icon-xmark slot="jh-button-icon"></jh-icon-xmark>
+          ><slot name="jh-notification-dismiss-icon" slot="jh-button-icon-left">
+            <jh-icon-xmark slot="jh-button-icon-left"></jh-icon-xmark>
           </slot>
         </jh-button>
       `;
@@ -314,7 +313,7 @@ export class JhNotification extends LitElement {
 
     return html`
       <div class=${this.stacked ? 'stacked-container' : 'inline-container'}>
-        <slot aria-hidden="true" name="jh-notification-icon"></slot>
+        <slot aria-hidden="true" name="jh-notification-icon" @slotchange=${this.#handleIconSlotChange}></slot>
         <slot @slotchange=${this.#handleSlotChange}></slot>
         ${this.stacked ? null : this.#getActionButtons()}
         ${dismissBtn}
@@ -323,5 +322,4 @@ export class JhNotification extends LitElement {
     `;
   }
 }
-
-customElements.define('jh-notification', JhNotification);
+JhNotification.register('jh-notification', JhNotification);