@cfpb/cfpb-design-system 4.2.3 → 4.3.0

package/src/elements/cfpb-icon-text/index.js

@@ -2,7 +2,6 @@ import { html, LitElement, css, unsafeCSS } from 'lit';
 import styles from './cfpb-icon-text.component.scss';
 
 /**
- *
  * @element cfpb-icon-text
  * @slot - The main content for the text and icon.
  */
@@ -15,132 +14,61 @@ export class CfpbIconText extends LitElement {
    * @property {boolean} disabled - Apply disabled styles or not.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      disabled: { type: Boolean, reflect: true },
-    };
-  }
-
-  // DOM references.
-  #svgObserver;
-  #iconClasses;
+  static properties = {
+    disabled: { type: Boolean, reflect: true },
+    iconHidden: { type: Boolean, reflect: true, attribute: 'icon-hidden' },
+  };
 
   constructor() {
     super();
-    this.#iconClasses = '';
+    this.disabled = false;
+    this.iconHidden = false;
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.#svgObserver = new MutationObserver(() => {
-      this.#processLightDom();
-    });
+  firstUpdated() {
+    const slot = this.shadowRoot.querySelector('slot');
+    this.#updateDividers();
 
-    this.#svgObserver.observe(this, {
-      childList: true,
-      subtree: false,
-    });
+    // Handle dynamically added/removed nodes.
+    slot.addEventListener('slotchange', () => this.#updateDividers());
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.#svgObserver) {
-      this.#svgObserver.disconnect();
-      this.#svgObserver = null;
+  updated(changedProps) {
+    if (changedProps.has('iconHidden')) {
+      this.#updateDividers();
     }
   }
 
-  #processLightDom() {
-    const div = this.shadowRoot.querySelector('div');
+  #updateDividers() {
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
     const slot = this.shadowRoot.querySelector('slot');
-    const nodes = slot.assignedNodes({ flatten: true });
-
-    let svgEl = null;
-    let spanEl = null;
+    const nodes = slot.assignedNodes({ flatten: true }).filter((node) => {
+      return (
+        node.nodeType === Node.ELEMENT_NODE ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim())
+      );
+    });
 
-    for (const node of nodes) {
-      if (
-        node.nodeType === Node.TEXT_NODE &&
-        node.textContent.trim().length > 0
-      ) {
-        const span = document.createElement('span');
-        span.textContent = node.textContent;
-        node.replaceWith(span);
-        if (!spanEl) spanEl = span;
-      } else if (node.nodeType === Node.ELEMENT_NODE) {
-        const tag = node.tagName.toLowerCase();
-        if (tag === 'svg' && !svgEl) {
-          svgEl = node;
-        } else if (tag === 'span' && !spanEl) {
-          spanEl = node;
-        }
-      }
-    }
+    const showLeft =
+      !this.iconHidden && nodes[0]?.tagName?.toLowerCase() === 'svg';
+    const showRight =
+      !this.iconHidden &&
+      nodes[nodes.length - 1]?.tagName?.toLowerCase() === 'svg';
 
-    if (svgEl && spanEl) {
-      div.classList.add('u-has-icon');
-      if (
-        svgEl.compareDocumentPosition(spanEl) & Node.DOCUMENT_POSITION_FOLLOWING
-      ) {
-        div.classList.add('u-has-icon--left');
-      } else {
-        div.classList.add('u-has-icon--right');
-      }
-    }
+    wrapper.classList.toggle('left-divider', showLeft);
+    wrapper.classList.toggle('right-divider', showRight);
   }
 
-  firstUpdated() {
-    this.#processLightDom();
-  }
-
-  /**
-   * Hide any icon in the slot.
-   */
   hideIcon() {
-    const icon = this.#findIconInSlot();
-    const div = this.shadowRoot.querySelector('div');
-    if (icon) {
-      this.#iconClasses = div.className;
-      div.className = '';
-    }
+    this.iconHidden = true;
   }
 
-  /**
-   * Show any icon in the slot, if it was hidden.
-   */
   showIcon() {
-    const icon = this.#findIconInSlot();
-    const div = this.shadowRoot.querySelector('div');
-    if (icon) div.className = this.#iconClasses;
-  }
-
-  /**
-   * @returns {boolean} True if it has an icon, false otherwise.
-   */
-  hasIcon() {
-    const icon = this.#findIconInSlot();
-    if (icon) return true;
-    return false;
-  }
-
-  /**
-   * Find the icon SVG in the slot.
-   * @returns {Node} The icon SVG node.
-   */
-  #findIconInSlot() {
-    const slot = this.shadowRoot.querySelector('slot');
-    const nodes = slot.assignedNodes({ flatten: true });
-
-    for (const node of nodes) {
-      if (node.tagName && node.tagName.toLowerCase() === 'svg') {
-        return node;
-      }
-    }
+    this.iconHidden = false;
   }
 
   render() {
-    return html`<div><slot></slot></div>`;
+    return html`<span class="wrapper"><slot></slot></span>`;
   }
 
   static init() {

package/src/elements/cfpb-label/cfpb-label.component.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
 :host {
   .a-label {
@@ -8,7 +8,7 @@
     }
 
     &__helper {
-      color: $label-helper;
+      color: var(--label-helper);
       font-size: math.div(16px, $base-font-size-px) + rem;
       font-weight: normal;
 

package/src/elements/cfpb-label/index.js

@@ -14,17 +14,14 @@ export class CfpbLabel extends LitElement {
   `;
 
   /**
-   * @property {string} for - Associate the label with an ID elsewhere.
    * @property {boolean} block - Whether this has block or inline helper text.
+   * @property {string} for - Associate the label with an ID elsewhere.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      // Other properties.
-      block: { type: Boolean, reflect: true },
-      for: { type: String },
-    };
-  }
+  static properties = {
+    block: { type: Boolean, reflect: true },
+    for: { type: String },
+  };
 
   constructor() {
     super();
@@ -48,7 +45,7 @@ export class CfpbLabel extends LitElement {
         for=${ifDefined(this.for && this.for.trim() ? this.for : undefined)}
       >
         <slot name="label"></slot>
-        <small class="${this.#helperClass}">
+        <small class=${this.#helperClass}>
           <slot name="helper"></slot>
         </small>
       </label>

package/src/elements/cfpb-list/cfpb-list.component.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-icons/icon';
+
+:host {
+  ::slotted(cfpb-list-item) {
+    border-bottom: 1px solid var(--gray-20);
+
+    // Overlap with the border of prior item.
+    margin-top: -1px;
+  }
+
+  ::slotted(cfpb-list-item:first-of-type) {
+    border-top: 1px solid var(--gray-20);
+
+    // Don't shift the first item.
+    margin-top: 0;
+  }
+
+  :focus {
+    outline: 1px dotted var(--pacific);
+  }
+}

package/src/elements/cfpb-list/index.js

@@ -0,0 +1,357 @@
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import styles from './cfpb-list.component.scss';
+import { CfpbListItem } from '../cfpb-list-item';
+import { parseChildData } from '../cfpb-utilities/parse-child-data';
+
+export class CfpbList extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  #container = createRef();
+  #items = [];
+  #checkedItems = [];
+  #visibleItems = [];
+  #focusedIndex = 0;
+  #internalSync = false;
+
+  // WeakMap to store per-item click listeners.
+  #clickListeners = new WeakMap();
+
+  /**
+   * @property {Array} childData - Structure data to create child components.
+   * @property {boolean} multiple - Whether the select supports multiple or not.
+   * @property {string} type - List item type: plain, check, or checkbox.
+   * @property {string} ariaLabel - The aria-label for the list container.
+   * @returns {object} The map of properties.
+   */
+  static properties = {
+    childData: { type: Array, attribute: 'childdata' },
+    multiple: { type: Boolean, reflect: true },
+    type: { type: String, reflect: true },
+    ariaLabel: { type: String, attribute: 'aria-label' },
+  };
+
+  constructor() {
+    super();
+    this.childData = '';
+    this.multiple = false;
+    this.type = 'plain';
+    this.ariaLabel = '';
+  }
+
+  firstUpdated() {
+    this.#syncItems();
+  }
+
+  updated(changedProps) {
+    if (!this.#internalSync && changedProps.has('childData')) {
+      const parsed = parseChildData(this.childData);
+      if (parsed) this.#renderItemsFromData(parsed);
+    }
+
+    if (changedProps.has('type')) {
+      this.#applyTypeToItems();
+    }
+  }
+
+  // -------------------------
+  // ITEMS ACCESS
+  // -------------------------
+  get items() {
+    return this.#items;
+  }
+
+  get checkedItems() {
+    return this.#checkedItems;
+  }
+
+  get visibleItems() {
+    return this.#visibleItems;
+  }
+
+  get visibleCheckedItems() {
+    return this.#visibleItems.filter((item) => item.checked);
+  }
+
+  // -------------------------
+  // RENDER ITEMS
+  // -------------------------
+  #renderItemsFromData(itemsArray) {
+    // Remove all children except <template> and <noscript>.
+    [...this.children].forEach((child) => {
+      if (child.tagName !== 'TEMPLATE' && child.tagName !== 'NOSCRIPT')
+        child.remove();
+    });
+
+    let firstChecked;
+    itemsArray.forEach((data) => {
+      const item = document.createElement('cfpb-list-item');
+      item.textContent = data.value ?? '';
+      if ('disabled' in data) item.disabled = data.disabled;
+      if ('hidden' in data) item.hidden = data.hidden;
+      if ('href' in data) item.href = data.href;
+      item.type = data.type ?? this.type;
+      if (this.multiple) {
+        if ('checked' in data) item.checked = data.checked;
+      } else if (!firstChecked && data.checked) {
+        firstChecked = true;
+        if ('checked' in data) item.checked = true;
+      }
+
+      this.appendChild(item);
+    });
+
+    this.#syncItems();
+  }
+
+  // -------------------------
+  // SYNC ITEMS & LISTENERS
+  // -------------------------
+  #syncItems() {
+    // Collect items.
+    this.#items = [...this.querySelectorAll('cfpb-list-item')];
+
+    // Ensure each item has a type.
+    this.#items.forEach((item) => {
+      if (!item.type) item.type = this.type;
+    });
+
+    // Visible items.
+    this.#visibleItems = this.#items.filter((item) => !item.hidden);
+
+    // Populate initial checked states.
+    if (this.multiple) {
+      this.#checkedItems = this.#items.filter((item) => item.checked);
+    } else {
+      const firstChecked = this.#items.find((item) => item.checked);
+      this.#checkedItems = firstChecked ? [firstChecked] : [];
+
+      // Uncheck all others.
+      this.#items.forEach((item) => {
+        if (item !== firstChecked) item.checked = false;
+      });
+    }
+
+    // Assign tabindex, role, listeners.
+    this.#items.forEach((item, index) => {
+      item.setAttribute('tabindex', index === 0 ? '0' : '-1');
+      item.setAttribute('role', 'option');
+
+      // Remove prior listener if present.
+      const prev = this.#clickListeners.get(item);
+      if (prev) item.removeEventListener('click-item', prev);
+
+      // Listener that toggles the item before handling.
+      const listener = (evt) => {
+        // Prevent actual click bubbling to list container.
+        evt.stopPropagation();
+
+        this.#handleToggle(item, item.checked, index);
+      };
+
+      item.addEventListener('click-item', listener);
+      this.#clickListeners.set(item, listener);
+
+      // Track focus index.
+      item.addEventListener('focus', () => {
+        this.#focusedIndex = index;
+      });
+    });
+
+    this.dispatchEvent(
+      new CustomEvent('items-ready', {
+        detail: {
+          items: this.#items,
+          checkedItems: this.#checkedItems,
+          visibleItems: this.#visibleItems,
+          visibleCheckedItems: this.visibleCheckedItems,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  #syncChildDataFromItems() {
+    const data = this.#items.map((item) => ({
+      value: item.value,
+      label: item.textContent.trim(),
+      checked: item.checked,
+      disabled: item.disabled,
+    }));
+
+    this.#internalSync = true;
+    this.childData = data;
+    this.#internalSync = false;
+  }
+
+  #applyTypeToItems() {
+    if (!['plain', 'check', 'checkbox'].includes(this.type)) {
+      console.warn(`<cfpb-list>: invalid type "${this.type}".`);
+      return;
+    }
+    this.#items.forEach((item) => (item.type = this.type));
+  }
+
+  #handleToggle(element, isChecked, index) {
+    if (this.multiple) {
+      if (isChecked) {
+        // Add if not already present.
+        if (!this.#checkedItems.includes(element)) {
+          this.#checkedItems.push(element);
+        }
+      } else {
+        // Remove cleanly.
+        this.#checkedItems = this.#checkedItems.filter(
+          (item) => item !== element,
+        );
+      }
+    } else {
+      if (isChecked) {
+        // Select this item, uncheck all others.
+        this.#items.forEach((item) => {
+          if (item !== element) item.checked = false;
+        });
+        this.#checkedItems = [element];
+      } else {
+        // Item is unchecked -> clear selection.
+        this.#checkedItems.forEach((item) => (item.checked = false));
+        this.#checkedItems = [];
+      }
+    }
+
+    this.#syncChildDataFromItems();
+
+    this.dispatchEvent(
+      new CustomEvent('item-click', {
+        detail: { index, value: element.value, element },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  // -------------------------
+  // FILTER & FOCUS
+  // -------------------------
+
+  /**
+   * @param {Array} queryList - List of search words.
+   * @returns {Array} List of visible list items.
+   */
+  filterItems(queryList) {
+    let firstIndex = 0;
+    this.#visibleItems = [];
+
+    this.items.forEach((item) => {
+      const valueLower = item.value.toLowerCase();
+      const matches = queryList.some((q) =>
+        valueLower.includes(q.toLowerCase()),
+      );
+      if (!matches) firstIndex++;
+      else this.#visibleItems.push(item);
+      item.hidden = !matches;
+    });
+
+    this.#focusedIndex = firstIndex;
+
+    this.#broadcastFiltered();
+
+    return this.#visibleItems;
+  }
+
+  showAllItems() {
+    this.items.forEach((item) => (item.hidden = false));
+    this.#focusedIndex = 0;
+    this.#visibleItems = this.#items;
+
+    this.#broadcastFiltered();
+  }
+
+  #broadcastFiltered() {
+    this.dispatchEvent(
+      new CustomEvent('items-filter', {
+        detail: {
+          items: this.#items,
+          checkedItems: this.#checkedItems,
+          visibleItems: this.#visibleItems,
+          visibleCheckedItems: this.visibleCheckedItems,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  focusItemAt(index) {
+    const visibleItems = this.items.filter((item) => !item.hidden);
+    if (!visibleItems.length) return;
+
+    const normalizedIndex =
+      ((index % visibleItems.length) + visibleItems.length) %
+      visibleItems.length;
+    const item = visibleItems[normalizedIndex];
+    item.focus();
+    this.#focusedIndex = normalizedIndex;
+  }
+
+  #onFocus(evt) {
+    // If the focus is on the container itself (not an item), set index to -1.
+    if (evt.target === this.#container.value) {
+      this.#focusedIndex = -1;
+    }
+  }
+
+  // -------------------------
+  // KEYBOARD NAVIGATION
+  // -------------------------
+  #onKeyDown(evt) {
+    const visibleItems = this.items.filter((item) => !item.hidden);
+    if (!visibleItems.length) return;
+    const last = visibleItems.length - 1;
+
+    switch (evt.key) {
+      case 'ArrowDown':
+        evt.preventDefault();
+        this.focusItemAt(this.#focusedIndex + 1);
+        break;
+      case 'ArrowUp':
+        evt.preventDefault();
+        this.focusItemAt(this.#focusedIndex - 1);
+        break;
+      case 'Home':
+        evt.preventDefault();
+        this.focusItemAt(0);
+        break;
+      case 'End':
+        evt.preventDefault();
+        this.focusItemAt(last);
+        break;
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        role="listbox"
+        tabindex="0"
+        @keydown=${this.#onKeyDown}
+        @focus=${this.#onFocus}
+        aria-label=${this.ariaLabel}
+        ?aria-multiselectable=${this.multiple}
+        ${ref(this.#container)}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static init() {
+    CfpbListItem.init();
+    if (!window.customElements.get('cfpb-list')) {
+      window.customElements.define('cfpb-list', CfpbList);
+    }
+  }
+}