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

package/components/input-email/input-email.js

@@ -9,10 +9,9 @@ import { JhInput } from '../input/input.js';
  * @customElement jh-input-email
  */
 export class JhInputEmail extends JhInput {
-  firstUpdated() {
-    super.firstUpdated();
-    let inputEl = this.shadowRoot.querySelector('input');
-    inputEl.setAttribute('type', 'email');
+  constructor() {
+    super();
+    this.inputmode = 'email';
   }
 }
 customElements.define('jh-input-email', JhInputEmail);

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

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"></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/menu/menu.js

@@ -45,6 +45,13 @@ export class JhMenu extends LitElement {
         display: flex;
         flex-direction: column;
         position: relative;
+        overflow: hidden;
+        height: 100%;
+      }
+      .menu-content {
+        flex: 1;
+        overflow-y: auto;
+        width: 100%;
       }
     `;
   }
@@ -54,7 +61,11 @@ export class JhMenu extends LitElement {
     this.#internals.role = 'menu';
   }
   render() {
-    return html`<slot></slot>`;
+    return html`
+      <div class="menu-content">
+        <slot></slot>
+      </div>
+    `;
   }
 }
 customElements.define('jh-menu', JhMenu);

package/components/radio-group/radio-group.js

@@ -17,6 +17,7 @@ let id = 0;
  * Defaults to `--jh-color-content-secondary-enabled`.
  * @cssprop --jh-radio-group-error-color-text - The error-text text color. 
  * Defaults to `--jh-color-content-negative-enabled`.
+ * @cssprop --jh-radio-group-opacity-disabled - The opacity of the radio group when disabled. Defaults to `--jh-opacity-disabled`.
  *
  * @slot default - Use to insert `<jh-radio>` components(s).
  * 
@@ -39,10 +40,14 @@ export class JhRadioGroup extends LitElement {
   static get styles() {
     return css`
       :host {
-        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);
+        --radio-group-helper-regular-font-family: var(--jh-font-helper-regular-font-family);
+        --radio-group-helper-regular-font-weight: var(--jh-font-helper-regular-font-weight);
+        --radio-group-helper-regular-font-size: var(--jh-font-helper-regular-font-size);
+        --radio-group-helper-regular-line-height: var(--jh-font-helper-regular-line-height);
+        font-family: var(--radio-group-helper-regular-font-family);
+        font-weight: var(--radio-group-helper-regular-font-weight);
+        font-size: var(--radio-group-helper-regular-font-size);
+        line-height: var(--radio-group-helper-regular-line-height);
         display: block;
       }
       /* reset styling on fieldset and legend */
@@ -51,6 +56,18 @@ export class JhRadioGroup extends LitElement {
         padding: 0;
         margin: 0;
       }
+      :host([disabled]) {
+        --group-disabled-opacity: var(--jh-radio-group-opacity-disabled, var(--jh-opacity-disabled));
+      }
+      :host([disabled]) .label,
+      :host([disabled]) .helper-text,
+      :host([disabled]) .error-text {
+        opacity: var(--group-disabled-opacity);
+        pointer-events: none;
+      }
+      :host([disabled]) ::slotted(jh-radio) {
+        --jh-radio-opacity-disabled: var(--group-disabled-opacity);
+      }
       :host legend {
         padding: 0;
       }
@@ -85,6 +102,10 @@ export class JhRadioGroup extends LitElement {
           --jh-radio-group-label-color-text,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--jh-font-helper-medium-font-family);
+        font-weight: var(--jh-font-helper-medium-font-weight);
+        font-size: var(--jh-font-helper-medium-font-size);
+        line-height: var(--jh-font-helper-medium-line-height);
       }
       .helper-text {
         color: var(
@@ -110,6 +131,10 @@ export class JhRadioGroup extends LitElement {
           --jh-radio-group-required-color-text-optional,
           var(--jh-color-content-primary-enabled)
         );
+        font-family: var(--radio-group-helper-regular-font-family);
+        font-weight: var(--radio-group-helper-regular-font-weight);
+        font-size: var(--radio-group-helper-regular-font-size);
+        line-height: var(--radio-group-helper-regular-line-height);
       }
       :host([show-indicator][required]) .indicator {
         color: var(
@@ -126,6 +151,11 @@ export class JhRadioGroup extends LitElement {
         type: String,
         attribute: 'accessible-label',
       },
+      /** Disables the radio group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT). */      
+      disabled: {
+        type: Boolean,
+        reflect: true
+      },
       /** Text to be displayed when radio group has failed validation and `invalid` is true. */
       errorText: {
         type: String,
@@ -181,17 +211,19 @@ export class JhRadioGroup extends LitElement {
     this.#internals = this.attachInternals();
     /** @type {?string} */
     this.accessibleLabel = null;
+    /** @type {boolean} */
+    this.disabled = false;
     /** @type {?string} */
     this.errorText = null;
     /** @type {?string} */
     this.helperText = null;
-    /** @type {?Boolean} */
+    /** @type {?boolean} */
     this.invalid = false;
     /** @type {?string} */
     this.label = null;
     /** @type {?string} */
     this.name = null;
-    /** @type {?Boolean} */
+    /** @type {?boolean} */
     this.required = false;
     /** @type {'vertical'|'horizontal'} */
     this.orientation = 'vertical';
@@ -210,6 +242,16 @@ export class JhRadioGroup extends LitElement {
     this.#id = id++;
   }
 
+  firstUpdated() {
+    this._syncDisabledToChildren();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('disabled')) {
+      this._syncDisabledToChildren();
+    }
+  }
+
   /**
    * Returns the radio group's parent form element.
    * @type {?HTMLFormElement}
@@ -237,6 +279,16 @@ export class JhRadioGroup extends LitElement {
     this.requestUpdate('value', oldValue);
   }
 
+  _syncDisabledToChildren() {
+    const slot = this.renderRoot.querySelector('slot');
+    if(!slot) return;
+
+    const radios = slot.assignedElements().filter((el) => el.tagName === 'JH-RADIO');
+    radios.forEach((radio) => {
+      radio.disabled = this.disabled;
+    });
+  }
+
   #getRadios() {
     return [...this.querySelectorAll('jh-radio')];
   }
@@ -260,6 +312,8 @@ export class JhRadioGroup extends LitElement {
     if (!this.#checked) {
       radios[0].tabIndex = 0;
     }
+
+    this._syncDisabledToChildren();
   }
 
   #handleChange(e) {
@@ -384,6 +438,7 @@ export class JhRadioGroup extends LitElement {
         role="radiogroup"
         id=${ifDefined(this.label ? `radio-group-label-${this.#id}` : null)}
         aria-describedby=${ifDefined(this.#getAriaDescribedBy())}
+        aria-disabled=${ifDefined(this.disabled ? 'true' : null)}
         aria-required=${ifDefined(this.required ? 'true' : 'false')}
         aria-invalid=${ifDefined(this.invalid ? 'true' : null)}
         aria-label=${ifDefined(this.accessibleLabel)}