@jack-henry/jh-elements 2.0.0-beta.12 → 2.0.0-beta.14

package/components/input-password/input-password.js

@@ -2,48 +2,23 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { html, render, css } from 'lit';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { JhInput } from '../input/input.js';
 import '@jack-henry/jh-icons/icons-wc/icon-eye-slash.js';
 import '@jack-henry/jh-icons/icons-wc/icon-eye.js';
 
+let id = 0;
+
 /**
  * @slot jh-input-password-hidden - Use to insert a custom icon within the toggle password button when the input value is masked. 
  * @slot jh-input-password-visible - Use to insert a custom icon within the toggle password button when the input value is unmasked.
  * @customElement jh-input-password
  */
 export class JhInputPassword extends JhInput {
-  #inputEl;
-
-  static get styles() {
-    return [
-      super.styles,
-      css`
-        .password-toggle-btn {
-          position: absolute;
-          right: var(--jh-dimension-400);
-        }
-        .clear-button {
-          right: var(--jh-dimension-1400);
-        }
-        .display-clear-button input {
-          padding-right: var(--jh-dimension-2400);
-        }
-        input {
-          padding-right: var(--jh-dimension-1400);
-        }
-        :host([size='small']) .password-toggle-btn {
-          top: 4px;
-        }
-        :host([size='medium']) .password-toggle-btn {
-          top: 8px;
-        }
-        :host([size='large']) .password-toggle-btn {
-          top: 12px;
-        }
-      `
-    ];
-  }
+
+  /** @type {?number} */
+  #id;
 
   static get properties() {
     return {
@@ -69,39 +44,74 @@ export class JhInputPassword extends JhInput {
     /** @type {?string} */
     this.accessibleLabelShowPassword = null;
     /** @type {boolean} */
-    this.hideRightSlot = true;
-    /** @type {boolean} */
     this.passwordVisible = false;
   }
 
-  firstUpdated() {
-    super.firstUpdated();
-    this.#inputEl = this.shadowRoot.querySelector('input');
+  connectedCallback() {
+    super.connectedCallback();
+    this.#id = id++;
   }
 
-  updated(changedProperties) {
-    super.updated(changedProperties);
+renderInput() {
+    let describedby;
 
-    if (changedProperties.has('passwordVisible')) {
-      if (this.passwordVisible) {
-        this.#inputEl.setAttribute('type', 'text');
-      } else {
-        this.#inputEl.setAttribute('type', 'password');
-      }
+    if (this.helperText || (this.errorText && this.invalid)) {
+      describedby = this._getDescribedby();
     }
-    this.#insertTogglePasswordBtn();
+
+    const leftSlot = this.readonly ? null : this.renderLeftSlot();
+    const rightSlot = this.readonly ? null : this.renderRightSlot();
+    const clearButton = this.readonly ? null : this.renderClearButton();
+
+    return html`
+      <div class="input-container">
+        <div class="input-wrapper">
+          ${leftSlot}
+          <input
+            id="jh-input-${this.#id}"
+            aria-describedby=${describedby}
+            aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
+            aria-label=${ifDefined(
+              this.accessibleLabel === '' ? null : this.accessibleLabel
+            )}
+            autocomplete=${ifDefined(
+              this.autocomplete === '' ? null : this.autocomplete
+            )}
+            ?disabled=${this.disabled}
+            enterkeyhint=${ifDefined(
+              this.enterkeyhint === '' ? null : this.enterkeyhint
+            )}
+            inputmode=${ifDefined(this.inputmode === '' ? null : this.inputmode)}
+            maxlength=${ifDefined(this.maxlength === '' ? null : this.maxlength)}
+            minlength=${ifDefined(this.minlength === '' ? null : this.minlength)}
+            name=${ifDefined(this.name === '' ? null : this.name)}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            type=${this.passwordVisible ? 'text' : 'password'}
+            .value=${this.value}
+            @keydown=${this.inputMask ? this._handleKeydown : null}
+            @change=${this._handleChange}
+            @input=${this._handleInput}
+            @select=${this._handleSelect}
+          />
+          ${clearButton}
+          ${rightSlot}
+        </div>
+      </div>
+    `;
   }
 
-  #insertTogglePasswordBtn() {
-    let inputContainerEl = this.shadowRoot.querySelector('.input-container');
-    let togglePasswordButton = this.#createTogglePasswordBtn();
-    render(togglePasswordButton, inputContainerEl);
+  renderRightSlot() {
+    if (this.hideRightSlot) return;
+    
+    return html`
+      <slot name="jh-input-right" @slotchange=${this._handleSlotChange}>${this.#renderTogglePasswordBtn()}</slot>
+      
+    `;
   }
 
-  #createTogglePasswordBtn() {
-    if (this.readonly) {
-      return;
-    }
+  #renderTogglePasswordBtn() {
+    if (this.readonly) return;
 
     let accessibleLabel = this.passwordVisible
       ? this.accessibleLabelHidePassword
@@ -110,7 +120,7 @@ export class JhInputPassword extends JhInput {
     let passwordBtn = html`
         <jh-button
           class="password-toggle-btn"
-          size="small"
+          size="x-small"
           appearance="tertiary"
           ?disabled=${this.disabled}
           accessible-label=${accessibleLabel}
@@ -120,24 +130,24 @@ export class JhInputPassword extends JhInput {
             ? html`
                 <slot
                   name="jh-input-password-visible"
-                  slot="jh-button-icon"
+                  slot="jh-button-icon-left"
                 >
                   <jh-icon-eye-slash
-                    slot="jh-button-icon"
+                    slot="jh-button-icon-left"
                     aria-hidden="true"
-                    size="medium"
+                    size="x-small"
                   ></jh-icon-eye-slash>
                 </slot>
               `
             : html`
                 <slot
                   name="jh-input-password-hidden"
-                  slot="jh-button-icon"
+                  slot="jh-button-icon-left"
                 >
                   <jh-icon-eye
-                    slot="jh-button-icon"
+                    slot="jh-button-icon-left"
                     aria-hidden="true"
-                    size="medium"
+                    size="x-small"
                   ></jh-icon-eye>
                 </slot>
               `}

package/components/input-search/input-search.js

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { css } from 'lit';
+import { css, html } from 'lit';
 import { JhInput } from '../input/input.js';
 import '@jack-henry/jh-icons/icons-wc/icon-magnifying-glass.js';
 
@@ -25,17 +25,20 @@ export class JhInputSearch extends JhInput {
 
   firstUpdated() {
     super.firstUpdated();
-    let leftSlot = this.shadowRoot.querySelector('slot[name="jh-input-left"]');
-
-    // insert fallback content in left slot if empty
-    if (leftSlot && leftSlot.assignedElements().length === 0) {
-      this.innerHTML +=
-        '<jh-icon-magnifying-glass slot="jh-input-left" aria-hidden="true"></jh-icon-magnifying-glass>';
-    }
 
     // set input type to search
     let inputEl = this.shadowRoot.querySelector('input');
     inputEl.setAttribute('type', 'search');
   }
+
+  renderLeftSlot() {
+    if (this.hideLeftSlot) return null;
+    
+    return html`
+      <slot name="jh-input-left" @slotchange=${this._handleSlotChange}>
+        <jh-icon-magnifying-glass aria-hidden="true" size="x-small"></jh-icon-magnifying-glass>
+      </slot>
+    `;
+  }
 }
 customElements.define('jh-input-search', JhInputSearch);

package/components/input-textarea/input-textarea.js

@@ -18,6 +18,16 @@ let id = 0;
 export class JhInputTextarea extends JhInput {
   /** @type {?number} */
   #id;
+  /** @type {?ResizeObserver} */
+  #resizeObserver;
+
+  get #textareaEl() {
+    return this.renderRoot?.querySelector('textarea');
+  }
+
+  get #footerContent() {
+    return this.renderRoot?.querySelector('.footer-content');
+  }
 
   static get styles() {
     return [
@@ -118,6 +128,7 @@ export class JhInputTextarea extends JhInput {
         );
       }
       :host([readonly]) textarea {
+        background-color: transparent;
         height: auto;
         border: none;
         padding-left: 0;
@@ -153,14 +164,14 @@ export class JhInputTextarea extends JhInput {
         attribute: 'auto-grow',
       },
       /** Sets the width of the input field. */
-      cols: { type: String },
+      cols: { type: Number },
       /** Removes native resize capability of the input field. */
       noResize: {
         type: Boolean,
         attribute: 'no-resize',
       },
       /** Sets the height of the input field. */
-      rows: { type: String },
+      rows: { type: Number },
       /** Specifies how text should be wrapped when submitted in a form. The `cols` property must be set for `wrap='hard'` to take effect. */
       wrap: { type: String },
       /** Prevents users from changing the input value. */
@@ -171,12 +182,12 @@ export class JhInputTextarea extends JhInput {
   constructor() {
     super();
     /** @type {boolean} */
-    this.autoGrow = null;
-    /** @type {?string} */
+    this.autoGrow = false;
+    /** @type {?number} */
     this.cols = null;
     /** @type {boolean} */
     this.noResize = true;
-    /** @type {?string} */
+    /** @type {?number} */
     this.rows = null;
     /** @type {'small'|'medium'|'large'} */
     this.size = 'medium';
@@ -189,191 +200,72 @@ export class JhInputTextarea extends JhInput {
     this.#id = id++;
   }
 
-  firstUpdated() {
-    // add resize observer to update width of footer when textarea width changes
-    let footerContent = this.shadowRoot.querySelector('.footer-content');
-    let textareaEl = this.shadowRoot.querySelector('textarea');
-
-    if (footerContent) {
-      new ResizeObserver(() => {
-        this.#updateFooterWidth(footerContent, textareaEl);
-      }).observe(textareaEl);
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#resizeObserver) {
+      this.#resizeObserver.unobserve(this.#textareaEl);
+      this.#resizeObserver.disconnect();
+      this.#resizeObserver = null;
     }
   }
 
-  #updateFooterWidth(footerContent, textareaEl) {
-    footerContent.style.width = textareaEl.offsetWidth + 'px';
+  firstUpdated() {
+    // add resize observer to update width of footer when textarea width changes
+    if (this.#footerContent) {
+      this.#resizeObserver = new ResizeObserver(() => {
+        this.#updateFooterWidth();
+      });
+      this.#resizeObserver.observe(this.#textareaEl);
+    }
   }
 
-  #dispatch(eventName, details) {
-    this.dispatchEvent(
-      new CustomEvent(eventName, {
-        detail: details,
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-      })
-    );
+  #updateFooterWidth() {
+    if (this.#footerContent) {
+      this.#footerContent.style.width = this.#textareaEl.offsetWidth + 'px';
+    }
   }
 
-  #handleInput(e) {
-    this.value = e.target.value;
-
-    this.#dispatch('jh-input', { value: this.value } );
-
+  _handleInput(e) {
+    super._handleInput(e);
+    
+    // add textarea specific autogrow
     if (this.autoGrow) {
       this.#autoGrowTextarea();
     }
   }
 
   #autoGrowTextarea() {
-    let textareaEl = this.shadowRoot.querySelector('textarea');
-    textareaEl.style.height = 'auto';
-    textareaEl.style.height = textareaEl.scrollHeight + 'px';
-  }
-
-  #handleChange() {
-    let payload = {
-      'value': this.value,
-    };
-    this.#dispatch('jh-change', payload);
+    // Reset height to auto to get the correct scrollHeight
+    this.#textareaEl.style.height = 'auto';
+    // Set height to scrollHeight to accommodate content
+    this.#textareaEl.style.height = `${this.#textareaEl.scrollHeight}px`;
   }
 
-  #handleSelect(e) {
-    const selectedString = e.target.value.substring(
-      e.target.selectionStart,
-      e.target.selectionEnd
-    );
-
-    if (selectedString) {
-      this.#dispatch('jh-select', {
-        selected: selectedString,
-        selectionStart: e.target.selectionStart,
-        selectionEnd: e.target.selectionEnd,
-      });
-    }
-  }
-
-  #handleMaxlength() {
-    this.#dispatch('jh-maxlength');
-  }
-
-  #getDescribedby() {
-    let describedbyString = '';
-
-    if (this.errorText) {
-      describedbyString += `jh-input-error-${this.#id}`;
-    }
-    if (this.helperText) {
-      describedbyString += ` jh-input-helper-${this.#id}`;
-    }
-    if (this.showCharCount) {
-      describedbyString += ` jh-input-counter-${this.#id}`;
-    }
-    return describedbyString;
-  }
-
-  render() {
-    let label;
-    let indicator;
-    let helperText;
-    let input;
-    let footer;
-    let errorText;
-    let charCount;
-    let describedby;
-
-    if (this.label) {
-      if (this.showIndicator) {
-        if (this.required) {
-          indicator = html`<span class="indicator" aria-hidden="true"> *</span>`;
-        } else {
-          indicator = html`<span class="indicator"> (optional)</span>`;
-        }
-      }
-
-      if (this.helperText) {
-        helperText = html`
-          <p id="jh-input-helper-${this.#id}" class="helper-text">
-            ${this.helperText}
-          </p>
-        `;
-      }
-
-      label = html`
-        <label for="jh-input-${this.#id}">${this.label}${indicator}</label>
-        ${helperText}
-      `;
-    }
-
-    if (this.showCharCount) {
-      let valueLength = this.value ? this.value.length : 0;
-      let charCountValue = `${this.maxlength ? `${valueLength}/${this.maxlength}` : valueLength}`;
-
-      if (valueLength && valueLength === Number(this.maxlength)) {
-        this.#handleMaxlength();
-      }
-
-      charCount = html`
-        <p class="counter" aria-hidden="true">${charCountValue}</p>
-      `;
-    }
-
-    if (this.invalid && this.errorText) {
-      errorText = html`
-        <p id="jh-input-error-${this.#id}" class="error-text">
-          ${this.errorText}
-        </p>
-      `;
-    }
-
-    if ((this.invalid && this.errorText) || this.showCharCount) {
-      footer = html`
-        <div class="footer-content">
-          ${errorText}
-          ${charCount}
-        </div>
-      `;
-    }
-
-    if (helperText || errorText || charCount) {
-      describedby = this.#getDescribedby();
-    }
-
-    input = html`
-        <textarea
-          id="jh-input-${this.#id}"
-          aria-describedby=${describedby}
-          aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
-          aria-label=${ifDefined(
-            this.accessibleLabel === '' ? null : this.accessibleLabel
-          )}
-          autocomplete=${ifDefined(
-            this.autocomplete === '' ? null : this.autocomplete
-          )}          
-          cols=${ifDefined(this.cols === '' ? null : this.cols)}
-          ?disabled=${this.disabled}
-          enterkeyhint=${ifDefined(
-            this.enterkeyhint === '' ? null : this.enterkeyhint
-          )}
-          inputmode=${ifDefined(this.inputmode === '' ? null : this.inputmode)}
-          maxlength=${ifDefined(this.maxlength === '' ? null : this.maxlength)}
-          minlength=${ifDefined(this.minlength === '' ? null : this.minlength)}
-          name=${ifDefined(this.name === '' ? null : this.name)}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          rows=${ifDefined(this.rows === '' ? null : this.rows)}
-          .value=${this.value}
-          wrap=${ifDefined(this.wrap === '' ? null : this.wrap)}
-          @change=${this.#handleChange}
-          @select=${this.#handleSelect}
-          @input=${this.#handleInput}
-        ></textarea>
-    `;
-
+  renderInput() {
     return html`
-      ${label} ${input} ${footer}
-    `;
+      <textarea
+        id="jh-input-${this.#id}"
+        aria-describedby=${this._getDescribedby()}
+        aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
+        aria-label=${ifDefined(this.accessibleLabel === '' ? null : this.accessibleLabel)}
+        autocomplete=${ifDefined(this.autocomplete === '' ? null : this.autocomplete)}
+        cols=${ifDefined(this.cols ? Number(this.cols) : null)}
+        ?disabled=${this.disabled}
+        enterkeyhint=${ifDefined(this.enterkeyhint || null)}
+        inputmode=${ifDefined(this.inputmode || null)}
+        maxlength=${ifDefined(this.maxlength ? Number(this.maxlength) : null)}
+        minlength=${ifDefined(this.minlength ? Number(this.minlength) : null)}
+        name=${ifDefined(this.name || null)}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        rows=${ifDefined(this.rows ? Number(this.rows) : null)}
+        .value=${this.value}
+        wrap=${ifDefined(this.wrap || null)}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
+        @select=${this._handleSelect}
+        ></textarea>
+    `
   }
 }
-customElements.define('jh-input-textarea', JhInputTextarea);
+customElements.define('jh-input-textarea', JhInputTextarea);

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

@@ -120,7 +120,10 @@ export class JhListItem extends LitElement {
         border-left-width: var(--jh-border-selected-width);
       }
       :host([tabindex][selected]) .list-item {
-        padding-left: var(--jh-dimension-400);
+        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);

package/components/notification/notification.js

@@ -136,7 +136,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 +149,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 +204,8 @@ export class JhNotification extends LitElement {
     .stacked-container,
     .inline-container {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
+      line-height: 0;
     }
     `;
   }
@@ -295,6 +296,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 +313,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 +322,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}

package/components/select/filtering.js

@@ -0,0 +1,92 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Jack Henry
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// TODO for tagged multi-select we will need to filter out already selected items from the list of options.
+
+// returns a filtered list of terms that include the search term in the specified key (default is 'label')
+export const JhFilter = {
+  filterList(items, searchTerm, key = 'label') {
+    if (!items || items.length === 0) {
+      return [];
+    }
+    if (!searchTerm) {
+      return items;
+    }
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return items.filter((item) =>
+      String(item[key] || '')
+        .toLowerCase()
+        .includes(lowerSearchTerm),
+    );
+  },
+
+  // returns the first term that includes the search term in the specified key (default is 'label'), or null if not found.
+  // Skip disabled items in the inline suggestions as they are not selectable.
+  filterInline(items, searchTerm, key = 'label') {
+    if (!searchTerm || !items || items.length === 0) {
+      return null;
+    }
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return (
+      items.find(
+        (item) =>
+          !item.disabled &&
+          String(item[key] || '')
+            .toLowerCase()
+            .startsWith(lowerSearchTerm),
+      ) || null
+    );
+  },
+  //returns the index of the first term that starts with the buffer, or -1 if not found
+  // exclude disabled items from the search as they are not selectable.
+  // when it is a multi-select, return selected items as well, so users can deselect easily.
+
+  jumpAhead(items, buffer, activeIndex, key = 'label') {
+    if (!buffer || !items || items.length === 0) {
+      return -1;
+    }
+    // more than one character that are same.
+    const allCharsSame = (str) => {
+      if (str.length <= 1) return false;
+      return str.split('').every((char) => char === str[0]);
+    };
+
+    const safeActiveIndex = activeIndex ?? -1;
+    const lowerBuffer = buffer.toLowerCase();
+    const char = lowerBuffer[0];
+    const isCycling = allCharsSame(lowerBuffer);
+
+    if (isCycling) {
+      // Find the next item that starts with the character after the active index
+      const nextIndex = items.findIndex(
+        (item, index) =>
+          index > safeActiveIndex &&
+          !item.disabled &&
+          String(item[key] || '')
+            .toLowerCase()
+            .startsWith(char),
+      );
+      if (nextIndex !== -1) {
+        return nextIndex;
+      }
+      // If not found, wrap around and search from the beginning up to the active index
+      return items.findIndex(
+        (item) =>
+          !item.disabled &&
+          String(item[key] || '')
+            .toLowerCase()
+            .startsWith(char),
+      );
+    }
+    return items.findIndex(
+      (item) =>
+        !item.disabled &&
+        String(item[key] || '')
+          .toLowerCase()
+          .startsWith(lowerBuffer),
+    );
+  },
+};