@cfpb/cfpb-design-system 4.2.4 → 4.3.1

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

@@ -0,0 +1,371 @@
+import { html, LitElement, css, unsafeCSS, nothing } from 'lit';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import styles from './cfpb-select.component.scss';
+import expandIcon from '../../components/cfpb-icons/icons/down.svg';
+import collapseIcon from '../../components/cfpb-icons/icons/up.svg';
+import { CfpbFormSearchInput } from '../cfpb-form-search-input';
+import { SearchService } from '../cfpb-utilities/search-service.js';
+import { MaxHeightTransition } from '../../utilities/transition/max-height-transition';
+import { FlyoutMenu } from '../../utilities/behavior/flyout-menu';
+import { CfpbList } from '../cfpb-list';
+import { CfpbTagGroup } from '../cfpb-tag-group';
+
+import { SingleSelectEventProxy } from './single-select-event-proxy.js';
+import { MultipleSelectEventProxy } from './multiple-select-event-proxy.js';
+
+/**
+ *
+ * @element cfpb-select
+ * @slot - The main content for the select.
+ */
+export class CfpbSelect extends LitElement {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  #eventProxy;
+  #flyoutMenu;
+  #transition;
+  #search;
+  #root = createRef();
+  #headerDom = createRef();
+  #contentDom = createRef();
+  #input = createRef();
+  #tagGroup = createRef();
+  #list = createRef();
+  #displayLabel = createRef();
+  #boundOnOutsideFocus;
+  #noResults = false;
+
+  /**
+   * @property {boolean} multiple - Whether the select supports multiple or not.
+   * @property {boolean} isExpanded - Whether the select is expanded or not.
+   * @property {Array} selectedTexts - Text of selected options.
+   * @returns {object} The map of properties.
+   */
+  static get properties() {
+    return {
+      multiple: { type: Boolean, reflect: true },
+      disabled: { type: Boolean },
+      validation: { type: String },
+      label: { type: String },
+      name: { type: String },
+      title: { type: Boolean, attribute: true },
+      value: { type: String },
+      maxlength: { type: Number },
+      placeholder: { type: String },
+      ariaLabelInput: { type: String, attribute: 'aria-label-input' },
+      ariaLabelList: { type: String, attribute: 'aria-label-list' },
+
+      isExpanded: { type: Boolean, attribute: 'open', reflect: true },
+      selectedTexts: { type: Array },
+      optionList: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.multiple = false;
+    this.options = [];
+    this.selectedTexts = [];
+    this.optionList = [];
+
+    this.#boundOnOutsideFocus = this.#onFocusOutside.bind(this);
+  }
+
+  firstUpdated() {
+    this.#initFlyoutMenu();
+
+    this.addEventListener('focus', () => {
+      this.#eventProxy.onFocus();
+    });
+
+    this.addEventListener('keydown', (evt) => {
+      this.#eventProxy.onKeyDown(evt, this);
+    });
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('pointerdown', this.#boundOnOutsideFocus);
+    document.removeEventListener('focusin', this.#boundOnOutsideFocus);
+    super.disconnectedCallback();
+  }
+
+  #onFocusOutside(evt) {
+    const path = evt.composedPath();
+    if (!path.includes(this)) {
+      this.isExpanded = false;
+    }
+  }
+
+  #onSlotChange(evt) {
+    const slot = evt.target;
+
+    const list = slot
+      .assignedNodes({ flatten: true })
+      .filter(
+        (node) =>
+          node.nodeType === Node.ELEMENT_NODE &&
+          (node.tagName === 'UL' || node.tagName === 'OL'),
+      );
+
+    if (!list || !list[0]) {
+      return;
+    }
+
+    // Extract list items (with their text or link info)
+    const items = [...list[0].querySelectorAll('li')].map((li) => {
+      const checked =
+        li.hasAttribute('data-checked') || li.hasAttribute('checked');
+
+      const itemValue = li.textContent.trim();
+
+      if (checked) {
+        if (!this.multiple) this.#displayLabel.value.textContent = itemValue;
+        return {
+          value: itemValue,
+          checked: 'true',
+        };
+      }
+
+      return { value: itemValue };
+    });
+
+    this.optionList = items;
+
+    this.#search = new SearchService(
+      items.map((item) => {
+        return item.value;
+      }),
+    );
+  }
+
+  #onInput(evt) {
+    this.#flyoutMenu.suspend();
+    if (!this.isExpanded) this.isExpanded = true;
+    const visibleItems = this.#list.value.filterItems(
+      this.#search.search(evt.target.value),
+    );
+
+    if (visibleItems.length === 0) {
+      this.#noResults = true;
+      this.requestUpdate();
+    } else {
+      this.#noResults = false;
+      this.requestUpdate();
+      this.#flyoutMenu.resume();
+    }
+  }
+
+  #onClear() {
+    this.#list.value.showAllItems();
+  }
+
+  #initFlyoutMenu() {
+    const root = this.#root.value;
+    const contentDom = this.#contentDom.value;
+
+    // If it's expanded we don't set an initial height,
+    // as it will be calculated internally.
+    const initialClass = this.isExpanded
+      ? MaxHeightTransition.CLASSES.MH_DEFAULT
+      : MaxHeightTransition.CLASSES.MH_ZERO;
+    this.#transition = new MaxHeightTransition(contentDom).init(initialClass);
+
+    this.#flyoutMenu = new FlyoutMenu(root);
+
+    this.#flyoutMenu.setTransition(
+      this.#transition,
+      this.#transition.maxHeightZero,
+      this.#transition.maxHeightDynamic,
+    );
+
+    this.#flyoutMenu.init(this.isExpanded);
+
+    // Add events.
+    this.#flyoutMenu.addEventListener('expandbegin', () => {
+      this.isExpanded = true;
+      contentDom.classList.remove('u-hidden');
+      this.dispatchEvent(
+        new CustomEvent('expandbegin', {
+          detail: { target: this },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    });
+    this.#flyoutMenu.addEventListener('collapseend', () => {
+      this.isExpanded = false;
+      contentDom.classList.add('u-hidden');
+
+      // Remove direction classes.
+      this.#root.value.classList.remove(`o-select--up`);
+      this.#root.value.classList.remove(`o-select--down`);
+    });
+
+    this.#transition.addEventListener('transitiondir', (evt) => {
+      this.#root.value.classList.add(`o-select--${evt.dir}`);
+    });
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('multiple')) {
+      this.#eventProxy = this.#createEventProxy();
+    }
+
+    if (changedProps.has('isExpanded')) {
+      const oldVal = changedProps.get('isExpanded');
+      const newVal = this.isExpanded;
+
+      if (newVal !== oldVal) {
+        if (newVal) {
+          this.#flyoutMenu.expand();
+          document.addEventListener('pointerdown', this.#boundOnOutsideFocus);
+          document.addEventListener('focusin', this.#boundOnOutsideFocus);
+        } else {
+          this.#flyoutMenu.collapse();
+          document.removeEventListener(
+            'pointerdown',
+            this.#boundOnOutsideFocus,
+          );
+          document.removeEventListener('focusin', this.#boundOnOutsideFocus);
+        }
+      }
+    }
+  }
+
+  #createEventProxy() {
+    const common = {
+      list: this.#list.value,
+      flyout: () => this.#flyoutMenu,
+    };
+
+    return this.multiple
+      ? new MultipleSelectEventProxy({
+          ...common,
+          input: this.#input.value,
+          tagGroup: this.#tagGroup.value,
+        })
+      : new SingleSelectEventProxy({
+          ...common,
+          displayLabel: this.#displayLabel.value,
+          header: this.#headerDom.value,
+        });
+  }
+
+  #onClick(evt) {
+    this.#eventProxy?.onClick(evt, this);
+  }
+
+  #onItemClick(evt) {
+    this.#eventProxy?.onItemClick(evt, this);
+  }
+
+  #onTagClick(evt) {
+    this.#eventProxy?.onTagClick(evt, this);
+  }
+
+  render() {
+    return html`
+      <!--Light DOM content-->
+      <slot @slotchange=${this.#onSlotChange}></slot>
+
+      ${this.multiple
+        ? html`<cfpb-tag-group
+            ${ref(this.#tagGroup)}
+            .childData=${this.optionList
+              .filter((item) => {
+                return item.checked;
+              })
+              .map((item) => {
+                return { text: item.value, tagName: 'cfpb-tag-filter' };
+              })}
+            @tag-click=${this.#onTagClick}
+          >
+          </cfpb-tag-group>`
+        : nothing}
+
+      <div
+        class="o-select o-select--border"
+        data-js-hook="behavior_flyout-menu"
+        ${ref(this.#root)}
+      >
+        ${this.#renderInput()}
+
+        <button
+          class="o-select__header"
+          title="Expand content"
+          data-js-hook="behavior_flyout-menu_trigger"
+          ${ref(this.#headerDom)}
+        >
+          <span class="o-select__cues" @click=${this.#onClick}>
+            <span class="o-select__cue-open" role="img" aria-label="Show">
+              ${unsafeSVG(expandIcon)}
+              <span class="u-visually-hidden">Show</span>
+            </span>
+            <span class="o-select__cue-close" role="img" aria-label="Hide">
+              ${unsafeSVG(collapseIcon)}
+              <span class="u-visually-hidden">Hide</span>
+            </span>
+          </span>
+        </button>
+        <div
+          class="o-select__content"
+          data-js-hook="behavior_flyout-menu_content"
+          ${ref(this.#contentDom)}
+        >
+          <cfpb-list
+            @item-click=${this.#onItemClick}
+            ?multiple=${this.multiple}
+            .childData=${this.optionList}
+            type=${this.multiple ? 'checkbox' : 'check'}
+            aria-label=${this.ariaLabelList
+              ? this.ariaLabelList
+              : 'Choose an item…'}
+            ${ref(this.#list)}
+          >
+          </cfpb-list>
+          <div class=${this.#noResults ? 'no-results' : 'u-hidden'}>
+            No results found
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  #renderInput() {
+    return this.multiple
+      ? html`
+          <cfpb-form-search-input
+            ${ref(this.#input)}
+            borderless
+            ?name=${this.name}
+            ?value=${this.value}
+            ?placeholder=${this.placeholder}
+            title=${this.title}
+            ?maxlength=${this.maxlength}
+            aria-label=${this.ariaLabelInput}
+            ?validation=${this.validation}
+            @clear=${this.#onClear}
+            @input=${this.#onInput}
+            @click=${this.#onClick}
+          ></cfpb-form-search-input>
+        `
+      : html`<div
+          class="o-select__label"
+          ${ref(this.#displayLabel)}
+          @click=${this.#onClick}
+        ></div>`;
+  }
+
+  static init() {
+    CfpbFormSearchInput.init();
+    CfpbList.init();
+    CfpbTagGroup.init();
+
+    window.customElements.get('cfpb-select') ||
+      window.customElements.define('cfpb-select', CfpbSelect);
+  }
+}

package/src/elements/cfpb-select/multiple-select-event-proxy.js

@@ -0,0 +1,88 @@
+export class MultipleSelectEventProxy {
+  constructor({ list, input, tagGroup, flyout }) {
+    this.list = list;
+    this.input = input;
+    this.tagGroup = tagGroup;
+    this.flyout = flyout;
+  }
+
+  onClick(evt, host) {
+    const target = evt.currentTarget;
+
+    if (target.tagName === 'CFPB-FORM-SEARCH-INPUT') {
+      host.isExpanded ? this.flyout()?.suspend() : this.flyout()?.expand();
+    } else {
+      this.flyout()?.resume();
+    }
+  }
+
+  onItemClick(evt, host) {
+    host.optionList = this.list.childData ?? [];
+    evt.currentTarget.focusItemAt(evt.detail.index);
+    //host.requestUpdate();
+  }
+
+  onTagClick(evt, host) {
+    const remaining =
+      this.tagGroup.tagList.filter((tag) => tag !== evt.detail.target) ?? [];
+
+    host.optionList = host.optionList.map((item) => ({
+      ...item,
+      checked: remaining.some((tag) => tag.value === item.value),
+    }));
+
+    //host.requestUpdate();
+  }
+
+  onKeyDown(evt, host) {
+    const focused = host.shadowRoot.activeElement.tagName;
+
+    if (focused === 'CFPB-FORM-SEARCH-INPUT') {
+      switch (evt.key) {
+        case 'Tab':
+          evt.preventDefault();
+          if (evt.shiftKey) {
+            if (host.isExpanded) host.isExpanded = false;
+            this.input.focus();
+          } else {
+            if (!host.isExpanded) host.isExpanded = true;
+            this.list.focusItemAt(0);
+          }
+          break;
+        case 'ArrowDown':
+          evt.preventDefault();
+          if (!host.isExpanded) host.isExpanded = true;
+          else this.list.focusItemAt(0);
+          break;
+        case 'Enter':
+          evt.preventDefault();
+          host.isExpanded = !host.isExpanded;
+          break;
+      }
+    }
+
+    if (focused === 'CFPB-LIST-ITEM') {
+      switch (evt.key) {
+        case 'Tab':
+          if (evt.shiftKey) {
+            if (this.list.focusedIndex === 0) {
+              //host.shadowRoot.activeElement.blur();
+              evt.preventDefault();
+              this.list.focusItemAt(-1);
+              this.input.focus();
+            }
+          }
+          break;
+      }
+    }
+
+    if (evt.key === 'Escape') {
+      evt.preventDefault();
+      host.isExpanded = false;
+    }
+  }
+
+  onFocus() {
+    this.input.focus();
+  }
+}

package/src/elements/cfpb-select/single-select-event-proxy.js

@@ -0,0 +1,47 @@
+export class SingleSelectEventProxy {
+  constructor({ list, displayLabel, header }) {
+    this.list = list;
+    this.displayLabel = displayLabel;
+    this.header = header;
+  }
+
+  onClick(evt, host) {
+    if (evt.currentTarget.classList.contains('o-select__label')) {
+      this.header.focus();
+      host.isExpanded = !host.isExpanded;
+    }
+  }
+
+  onItemClick(evt, host) {
+    const selected = this.list.checkedItems[0]?.value ?? '';
+
+    if (this.displayLabel) {
+      this.displayLabel.textContent = selected;
+    }
+
+    host.optionList = host.optionList.map((item) => ({
+      ...item,
+      checked: item.value === selected,
+    }));
+
+    //host.requestUpdate();
+    host.isExpanded = false;
+  }
+
+  onKeyDown(evt, host) {
+    const focused = host.shadowRoot.activeElement.tagName;
+    if (focused === 'BUTTON') {
+      switch (evt.key) {
+        case 'ArrowDown':
+          evt.preventDefault();
+          host.isExpanded = true;
+          this.list.querySelector('cfpb-list-item')?.focus();
+          break;
+      }
+    }
+  }
+
+  onFocus() {
+    // Additional actions done on focus can be added here.
+  }
+}

package/src/elements/cfpb-tag-filter/cfpb-tag-filter.component.scss

@@ -1,15 +1,18 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/vars' as *;
 
 :host {
   button {
+    // This line-height isn't 19 or 22, as 20 creates a 30px high tag.
+    line-height: math.div(20px, $base-font-size-px);
+
     // Filter tags appear in filtered contexts, often as part of multiselects.
-    line-height: math.div(19px, $base-font-size-px);
     font-size: math.div(16px, $btn-font-size) + rem;
 
     display: flex;
     gap: math.div(10px, $btn-font-size) + rem;
+    align-items: center;
 
     border: 1px solid var(--teal);
     padding: 4px 6px;

package/src/elements/cfpb-tag-filter/index.js

@@ -17,15 +17,15 @@ export class CfpbTagFilter extends LitElement {
    * @property {string} for - Associate the label with an ID elsewhere.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      for: { type: String },
-    };
-  }
+  static properties = {
+    for: { type: String },
+    value: { type: String },
+  };
 
   constructor() {
     super();
     this.for = '';
+    this.value = '';
   }
 
   #onClick() {
@@ -38,11 +38,19 @@ export class CfpbTagFilter extends LitElement {
     );
   }
 
+  #onSlotChange() {
+    const slot = this.shadowRoot.querySelector('slot');
+    this.value = slot
+      .assignedNodes({ flatten: true })
+      .map((node) => node.textContent.trim())
+      .join(' ');
+  }
+
   render() {
     const slot =
       this.for === ''
-        ? html`<slot></slot>`
-        : html`<label for="${this.for}"><slot></slot></label>`;
+        ? html`<slot @slotchange=${this.#onSlotChange}></slot>`
+        : html`<label for=${this.for}><slot></slot></label>`;
     return html`<button @click=${this.#onClick}>
       ${slot} ${unsafeHTML(icon)}
     </button>`;

package/src/elements/cfpb-tag-group/cfpb-tag-group.component.scss

@@ -1,6 +1,6 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/elements/cfpb-button/vars' as *;
 
 :host {
   // Tag group sets the spacing between tags.

package/src/elements/cfpb-tag-group/index.js

@@ -1,5 +1,6 @@
 import { html, LitElement, css, unsafeCSS } from 'lit';
 import styles from './cfpb-tag-group.component.scss';
+import { parseChildData } from '../cfpb-utilities/parse-child-data';
 
 const SUPPORTED_TAG_LIST = ['CFPB-TAG-FILTER', 'CFPB-TAG-TOPIC'];
 
@@ -21,16 +22,16 @@ export class CfpbTagGroup extends LitElement {
   `;
 
   /**
+   * @property {string} childData - Structure data to create child components.
    * @property {boolean} stacked - Whether to stack the tags vertically.
    * @property {Array} tagList - List of the tags in the tag group.
    * @returns {object} The map of properties.
    */
-  static get properties() {
-    return {
-      stacked: { type: Boolean, reflect: true },
-      tagList: { type: Array },
-    };
-  }
+  static properties = {
+    childData: { type: String, attribute: 'childdata' },
+    stacked: { type: Boolean, reflect: true },
+    tagList: { type: Array },
+  };
 
   // Private properties.
   #observer;
@@ -39,6 +40,7 @@ export class CfpbTagGroup extends LitElement {
 
   constructor() {
     super();
+    this.childData = '';
     this.stacked = false;
     this.tagList = [];
     this.#observer = new MutationObserver(this.#onMutation.bind(this));
@@ -67,6 +69,51 @@ export class CfpbTagGroup extends LitElement {
     });
   }
 
+  updated(changedProps) {
+    if (changedProps.has('childData')) {
+      const parsed = parseChildData(this.childData);
+      if (parsed) {
+        this.#renderTagsFromData(parsed);
+      }
+    }
+  }
+
+  #renderTagsFromData(arr) {
+    if (!Array.isArray(arr)) return;
+
+    this.#clearAllTags();
+
+    arr.forEach((data, index) => {
+      const tag = document.createElement(data.tagName);
+      // e.g. 'cfpb-tag-filter' or 'cfpb-tag-topic'
+      if (data.text) tag.textContent = data.text;
+      if (data.href) tag.href = data.href;
+      // any other props from `data`
+      this.addTag(tag, index);
+    });
+  }
+
+  /**
+   * Remove all previous tags from shadow DOM and light DOM.
+   */
+  #clearAllTags() {
+    // Remove shadow DOM wrappers.
+    if (this.#tagMap) {
+      this.#tagMap.forEach((wrapped) => {
+        if (wrapped.parentElement) wrapped.remove();
+      });
+      this.#tagMap.clear();
+    }
+
+    // Remove light DOM tags.
+    [...this.children].forEach((child) => {
+      if (SUPPORTED_TAG_LIST.includes(child.tagName)) child.remove();
+    });
+
+    // Reset tagList
+    this.tagList = [];
+  }
+
   /**
    * Set up a MutationObserver to watch changes in the light DOM.
    */

package/src/elements/cfpb-tag-topic/cfpb-tag-topic.component.scss

@@ -1,6 +1,6 @@
 @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/elements/base' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-typography/mixins' as *;