@cfpb/cfpb-design-system 4.2.4 → 4.3.0

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

@@ -1,225 +0,0 @@
-@use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/base' as *;
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
-
-:host {
-  // Theme variables.
-  --select-input-border: var(--gray-60);
-  --select-input-border-hover: var(--pacific);
-  --select-input-border-focus: var(--pacific);
-  --select-input-bg: var(--white);
-  --select-input-text: var(--black);
-
-  // Initial and no-js state.
-  select.o-multiselect {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    padding: math.div(7px, $base-font-size-px) + em;
-
-    // Fixed height breaks the bottom border
-    // mid-character to indicate there's more content.
-    height: 5.5em;
-    padding-top: math.div(4px, $base-font-size-px) + em;
-    padding-bottom: math.div(4px, $base-font-size-px) + em;
-    border: 1px solid var(--select-border-default);
-
-    option {
-      padding: math.div(2px, $base-font-size-px) + em
-        math.div(6px, $base-font-size-px) + em;
-    }
-  }
-
-  .o-multiselect {
-    position: relative;
-
-    & header {
-      position: relative;
-
-      &::after {
-        // Arrow box width must be odd size to properly center the bg image
-        width: math.div($select-height, $base-font-size-px) + em;
-        box-sizing: border-box;
-        border: 1px solid var(--select-border-default);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--select-icon-bg-default);
-
-        --cfpb-background-icon-svg: 'down';
-
-        background-size: auto $cf-icon-height;
-        background-repeat: no-repeat;
-        background-position: center center;
-        content: '';
-        pointer-events: none;
-      }
-    }
-
-    & input[type='text'] {
-      width: 100%;
-      min-height: 35px;
-
-      // Reset the browser's default styling.
-      appearance: none;
-      display: inline-block;
-      padding: math.div(7px, $base-font-size-px) + em;
-      border: 1px solid var(--select-input-border);
-      outline: 0 solid var(--select-input-border);
-      background: var(--select-input-bg);
-      color: var(--select-input-text);
-      box-sizing: border-box;
-
-      &:hover,
-      &.hover {
-        border-color: var(--select-input-border-hover);
-        outline: 1px solid var(--select-input-border-hover);
-      }
-
-      &:focus,
-      &.focus {
-        border-color: var(--select-input-border-focus);
-        box-shadow: 0 0 0 1px var(--select-input-border-focus);
-        outline: 1px dotted var(--select-input-border-focus);
-        outline-offset: 2px;
-      }
-    }
-
-    & fieldset {
-      // Resets
-      border-color: var(--select-border-default);
-      border-top: none;
-      margin: 0;
-      padding: 0;
-
-      // Styles
-      box-sizing: border-box;
-      overflow-x: hidden;
-      overflow-y: scroll;
-      position: absolute;
-      z-index: 10;
-
-      max-height: 0;
-      margin-top: -1px;
-      width: 100%;
-
-      transition: max-height 0.25s ease-out;
-    }
-
-    &.u-active {
-      fieldset {
-        margin-top: 0;
-
-        // This needs to match the value set in _bindEvents in Multiselect.js.
-        // See https://github.com/cfpb/design-system/blob/4d26d5af04317bcc00b4677aa866fe8d526e82e0/packages/cfpb-forms/src/organisms/Multiselect.js#L340
-        max-height: 140px;
-
-        border-color: var(--pacific);
-        border-width: 2px;
-        border-top: 0;
-      }
-
-      // Reverse arrow when search drop-down is open.
-      header::after {
-        --cfpb-background-icon-svg: 'up';
-      }
-    }
-
-    & ul {
-      list-style-type: none;
-      background-color: var(--white);
-      padding: 0;
-      padding-top: math.div(5px, $base-font-size-px) + em;
-      padding-bottom: math.div(5px, $base-font-size-px) + em;
-
-      li {
-        margin: 0;
-      }
-
-      li:first-child {
-        .a-label {
-          padding-top: math.div(10px, $base-font-size-px) + em;
-        }
-      }
-
-      &.u-filtered li:not(.u-filter-match) {
-        display: none;
-      }
-
-      &.u-no-results,
-      &.u-max-selections {
-        padding: math.div(10px, $base-font-size-px) + em;
-        li {
-          display: none;
-        }
-
-        &::after {
-          display: list-item;
-        }
-      }
-
-      &.u-no-results::after {
-        content: 'No results found';
-      }
-
-      &.u-max-selections {
-        pointer-events: none;
-
-        &::after {
-          content: 'Reached maximum number of selections';
-        }
-      }
-    }
-  }
-
-  .u-invisible {
-    visibility: hidden;
-  }
-
-  /* button {
-    // Filter tags appear in filtered contexts, often as part of multiselects.
-    line-height: math.div(19px, $base-font-size-px);
-
-    display: flex;
-    gap: math.div(10px, $btn-font-size) + rem;
-
-    border: 1px solid var(--teal);
-    padding: 4px 6px;
-    background-color: var(--teal-20);
-    border-radius: math.div(3px, $base-font-size-px) + rem;
-    color: var(--black);
-    text-align: left;
-    min-width: fit-content;
-
-    &:hover {
-      background-color: var(--teal-40);
-      cursor: pointer;
-    }
-
-    &:focus {
-      outline: 1px dotted var(--teal);
-      outline-offset: 1px;
-    }
-
-    &:active {
-      background-color: var(--teal-60);
-    }
-  }
-
-  svg {
-    pointer-events: none;
-
-    // Prevent flexbox from squishing icon when tag text is long.
-    flex: none;
-
-    height: 1rem;
-  }
-
-  // If the contents are wrapped in a label, negate the label's display.
-  label {
-    display: contents;
-    pointer-events: none;
-  } */
-}

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

@@ -1,444 +0,0 @@
-import { html, LitElement, css, unsafeCSS } from 'lit';
-import styles from './cfpb-multiselect.component.scss';
-import { MultiselectModel } from './multiselect-model.js';
-import { CfpbFormChoice } from '../cfpb-form-choice';
-import { CfpbLabel } from '../cfpb-label';
-
-// Constants for direction.
-const DIR_PREV = 'prev';
-const DIR_NEXT = 'next';
-
-// Constants for key binding.
-const KEY_RETURN = 'Enter';
-const KEY_ESCAPE = 'Escape';
-const KEY_UP = 'ArrowUp';
-const KEY_DOWN = 'ArrowDown';
-const KEY_TAB = 'Tab';
-
-/**
- *
- * @element cfpb-multiselect.
- * @slot - The main content for the upload button.
- */
-export class CfpbMultiselect extends LitElement {
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
-
-  static get properties() {
-    return {
-      // Other properties.
-      name: { type: String },
-      options: { type: Array, state: true },
-      selectedLabel: { type: String, state: true },
-      label: { type: String, attribute: true },
-    };
-  }
-
-  // DOM references.
-  #containerDom;
-  #fieldsetDom;
-  #searchDom;
-  #optionsDom;
-  #optionItemDoms;
-
-  #model;
-  #isBlurSkipped;
-
-  constructor() {
-    super();
-    this.options = [];
-    this.selectedLabel = '';
-    this.#isBlurSkipped = false;
-  }
-
-  firstUpdated() {
-    // Set DOM references.
-    const root = this.renderRoot;
-    this.#containerDom = root.querySelector('.o-multiselect');
-    this.#fieldsetDom = root.querySelector('fieldset');
-    this.#searchDom = root.querySelector('input');
-    this.#optionsDom = root.querySelector('ul');
-  }
-
-  #slotChanged() {
-    this.#initializeFromLightDom();
-
-    this.#model = new MultiselectModel(this.options, this.name, {}).init();
-
-    // Wait for lit to finish its render cycle so we can query the list items.
-    this.updateComplete.then(() => {
-      this.#optionItemDoms = Array.from(this.renderRoot.querySelectorAll('li'));
-    });
-  }
-
-  #initializeFromLightDom() {
-    const fallbackSelect = this.querySelector('select');
-    if (fallbackSelect) {
-      this.name = fallbackSelect.name;
-
-      // Read options.
-      let index = 0;
-      this.options = Array.from(fallbackSelect.options).map((opt) => ({
-        value: opt.value,
-        label: opt.label,
-        text: opt.text,
-        checked: opt.selected,
-        index: index++,
-      }));
-
-      this.selectedLabel = fallbackSelect.selectedOptions[0]?.label || '';
-
-      // Remove or hide the fallback <select>
-      fallbackSelect.style.display = 'none';
-    }
-  }
-
-  /**
-   * Set the filtered matched state.
-   */
-  #filterMatches() {
-    this.#optionsDom.classList.remove('u-no-results');
-    this.#optionsDom.classList.add('u-filtered');
-
-    let filteredIndices = this.#model.lastFilterIndicesList;
-    for (let i = 0, len = filteredIndices.length; i < len; i++) {
-      this.#optionItemDoms[filteredIndices[i]].classList.remove(
-        'u-filter-match',
-      );
-    }
-
-    filteredIndices = this.#model.filterIndicesList;
-    for (let j = 0, len = filteredIndices.length; j < len; j++) {
-      this.#optionItemDoms[filteredIndices[j]].classList.add('u-filter-match');
-    }
-  }
-
-  /**
-   * Resets the filtered option list.
-   */
-  #resetFilter() {
-    this.#optionsDom.classList.remove('u-filtered', 'u-no-results');
-
-    for (let i = 0, len = this.#optionsDom.children.length; i < len; i++) {
-      this.#optionsDom.children[i].classList.remove('u-filter-match');
-    }
-
-    this.#model.clearFilter();
-  }
-
-  /**
-   * Updates the list of options to show the user there
-   * are no matching results.
-   */
-  #filterNoMatches() {
-    this.#optionsDom.classList.add('u-no-results');
-    this.#optionsDom.classList.remove('u-filtered');
-  }
-
-  /**
-   * Filter the options list.
-   * Every time we filter we have two lists of indices:
-   * - The matching options (filterIndices).
-   * - The matching options of the last filter (_lastFilterIndices).
-   * We need to turn off the filter for any of the last filter matches
-   * that are not in the new set, and turn on the filter for the matches
-   * that are not in the last set.
-   * @param {Array} filterIndices - List of indices to filter from the options.
-   * @returns {boolean} True if options are filtered, false otherwise.
-   */
-  #filterList(filterIndices) {
-    if (filterIndices.length > 0) {
-      this.#filterMatches();
-      return true;
-    }
-
-    this.#filterNoMatches();
-    return false;
-  }
-
-  /**
-   * Evaluates the list of options based on the user's query in the
-   * search input.
-   * @param {string} value - Text the user has entered in the search query.
-   */
-  #evaluate(value) {
-    this.#resetFilter();
-    this.#model.resetIndex();
-    const matchedIndices = this.#model.filterIndices(value);
-    this.#filterList(matchedIndices);
-  }
-
-  /**
-   * Expand the multiselect drop down.
-   */
-  expand() {
-    this.#containerDom.classList.add('u-active');
-    this.#fieldsetDom.classList.remove('u-invisible');
-    this.#fieldsetDom.setAttribute('aria-hidden', false);
-
-    const event = new Event('expandbegin', { bubbles: true, composed: true });
-    this.dispatchEvent(event);
-  }
-
-  /**
-   * Collapse the multiselect drop down.
-   */
-  collapse() {
-    this.#containerDom.classList.remove('u-active');
-    this.#fieldsetDom.classList.add('u-invisible');
-    this.#fieldsetDom.setAttribute('aria-hidden', true);
-    this.#model.resetIndex();
-
-    const event = new Event('collapsebegin', { bubbles: true, composed: true });
-    this.dispatchEvent(event);
-  }
-
-  /**
-   * Highlights an option in the list.
-   * @param {string} direction
-   *   Direction to highlight compared to the current focus.
-   */
-  #highlight(direction) {
-    if (direction === DIR_NEXT) {
-      this.#model.index = this.#model.index + 1;
-    } else if (direction === DIR_PREV) {
-      this.#model.index = this.#model.index - 1;
-    }
-
-    const index = this.#model.index;
-    if (index > -1) {
-      let filteredIndex = index;
-      const filterIndices = this.#model.filterIndicesList;
-      if (filterIndices.length > 0) {
-        filteredIndex = filterIndices[index];
-      }
-      const option = this.#model.getOption(filteredIndex);
-      const value = option.value;
-      const item = this.#optionsDom.querySelector(
-        '[data-option="' + value + '"]',
-      );
-      this.#isBlurSkipped = true;
-      item.focus();
-    } else {
-      this.#isBlurSkipped = false;
-      this.#searchDom.focus();
-    }
-  }
-
-  /**
-   * Resets the search input and filtering.
-   */
-  #resetSearch() {
-    this.#searchDom.value = '';
-    this.#resetFilter();
-  }
-
-  /**
-   * Tracks a user's selections and updates the list in the dom.
-   * @param {number} optionIndex - The index position of the chosen option.
-   */
-  #updateSelections(optionIndex) {
-    const option =
-      this.#model.getOption(optionIndex) ||
-      this.#model.getOption(this.#model.index);
-
-    if (option) {
-      if (option.checked) {
-        if (this.#optionsDom.classList.contains('u-max-selections')) {
-          this.#optionsDom.classList.remove('u-max-selections');
-        }
-      }
-    }
-
-    if (this.#model.isAtMaxSelections() && !option.checked) return;
-
-    if (this.#optionsDom.classList.contains('u-max-selections')) {
-      this.#optionsDom.classList.remove('u-max-selections');
-    }
-
-    this.#model.toggleOption(optionIndex);
-
-    this.#model.resetIndex();
-    this.#isBlurSkipped = false;
-
-    if (this.#fieldsetDom.getAttribute('aria-hidden') === 'false') {
-      this.#searchDom.focus();
-    }
-
-    // Spread is used to create a new array reference,
-    // which triggers a lit lifecycle update.
-    this.options = [...this.#model.options];
-
-    if (this.#model.isAtMaxSelections()) {
-      this.#optionsDom.classList.add('u-max-selections');
-    }
-  }
-
-  #searchInputFocus() {
-    if (this.#fieldsetDom.getAttribute('aria-hidden') === 'true') {
-      this.expand();
-    }
-  }
-
-  #searchInputBlur() {
-    if (
-      !this.#isBlurSkipped &&
-      this.#fieldsetDom.getAttribute('aria-hidden') === 'false'
-    ) {
-      this.collapse();
-    }
-  }
-
-  #searchInputKeyDown(event) {
-    const key = event.key;
-    if (
-      this.#fieldsetDom.getAttribute('aria-hidden') === 'true' &&
-      key !== KEY_TAB
-    ) {
-      this.expand();
-    }
-
-    if (key === KEY_RETURN) {
-      event.preventDefault();
-      this.#highlight(DIR_NEXT);
-    } else if (key === KEY_ESCAPE) {
-      this.#resetSearch();
-      this.collapse();
-    } else if (key === KEY_DOWN) {
-      this.#highlight(DIR_NEXT);
-    } else if (
-      key === KEY_TAB &&
-      !event.shiftKey &&
-      this.#fieldsetDom.getAttribute('aria-hidden') === 'false'
-    ) {
-      this.collapse();
-    }
-  }
-
-  /**
-   * Handles checkbox change event.
-   * @param {number} index - The index position of the checkbox within the list.
-   */
-  #onChangeCheckbox(index) {
-    //opt.checked = !opt.checked;
-    this.#resetSearch();
-    this.#updateSelections(index);
-  }
-
-  /**
-   * @param {MouseEvent} event - The key down event.
-   */
-  #onKeyDownList(event) {
-    const key = event.key;
-    const target = event.target;
-    const checked = target.checked;
-
-    if (key === KEY_RETURN) {
-      event.preventDefault();
-
-      /* Programmatically checking a checkbox does not fire a change event
-        so we need to manually create an event and dispatch it from the input.
-        */
-      target.checked = !checked;
-      //const evt = new Event('change', { bubbles: false, cancelable: true });
-      //target.dispatchEvent(evt);
-    } else if (key === KEY_ESCAPE) {
-      this.#searchDom.focus();
-      this.collapse();
-    } else if (key === KEY_UP) {
-      this.#highlight(DIR_PREV);
-    } else if (key === KEY_DOWN) {
-      this.#highlight(DIR_NEXT);
-    }
-  }
-
-  render() {
-    // Track the index position of the option in the list.
-    let index = 0;
-
-    const renderTags = [];
-    const renderChoices = [];
-
-    this.options.map((item) => {
-      renderTags.push(html`${this.#renderTag(item)}`);
-      renderChoices.push(html`${this.#renderChoice(item, index++)}`);
-    });
-
-    const label = this.label || 'Select options';
-
-    return html`
-      <!-- Fallback content like <select> and <options>s -->
-      <slot @slotchange=${this.#slotChanged}></slot>
-
-      <cfpb-label for="search-input">
-        <div slot="label">${label}</div>
-      </cfpb-label>
-      <div class="o-multiselect">
-        <cfpb-tag-group
-          @tag-click=${(evt) => {
-            this.#updateSelections(
-              Number(evt.detail.target.getAttribute('data-index')),
-            );
-          }}
-        >
-          ${renderTags}
-        </cfpb-tag-group>
-        <header>
-          <input
-            id="search-input"
-            type="text"
-            autocomplete="off"
-            aria-label="${label}"
-            value=${this.selectedLabel || ''}
-            @input=${(event) => this.#evaluate(event.target.value)}
-            @focus=${this.#searchInputFocus}
-            @blur=${this.#searchInputBlur}
-            @keydown=${this.#searchInputKeyDown}
-          />
-        </header>
-
-        <fieldset class="u-invisible" aria-hidden="true">
-          <ul role="listbox" @keydown=${this.#onKeyDownList}>
-            ${renderChoices}
-          </ul>
-        </fieldset>
-      </div>
-    `;
-  }
-
-  #renderTag(item) {
-    let htmlSnippet = html``;
-    if (item.checked === true) {
-      htmlSnippet = html`<cfpb-tag-filter data-index="${item.index}"
-        >${item.value}</cfpb-tag-filter
-      >`;
-    }
-
-    return htmlSnippet;
-  }
-
-  #renderChoice(opt, index) {
-    return html`
-      <li role="option">
-        <cfpb-form-choice
-          data-option="${opt.label}"
-          inlist="true"
-          .checked="${opt.checked}"
-          @change=${() => this.#onChangeCheckbox(index)}
-          @mousedown=${() => (this.#isBlurSkipped = true)}
-        >
-          ${opt.label}
-        </cfpb-form-choice>
-      </li>
-    `;
-  }
-
-  static init() {
-    CfpbFormChoice.init();
-    CfpbLabel.init();
-
-    window.customElements.get('cfpb-multiselect') ||
-      window.customElements.define('cfpb-multiselect', CfpbMultiselect);
-  }
-}