@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/multi-select/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\n/* eslint-disable no-duplicate-imports */\n/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { html, nothing, } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Down.svg?raw';\nimport svgClear from '@tmorrow/cre8-wc/icons/System/Regular/Clear_X.svg?raw';\nimport styles from './multi-select.styles.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../remove-tag/remove-tag';\nimport '../field-note/field-note';\nimport '../button/button';\nimport '../checkbox-field-item/checkbox-field-item';\n// eslint-disable-next-line import/no-named-as-default\nimport Cre8CheckboxFieldItem from '../checkbox-field-item/checkbox-field-item';\n\n/**\n * Multiselect is used when multiple options can be chosen from a static dropdown\n * This component has a list of items in the dropdown that can be added as \"selected tags\"\n * The checkbox will always reflect the selected nature of the item and is not removed\n * from the dropdown when clicked, the tags will be added and removed based on their state.\n *\n * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the\n * current list after the change is given in the detail.\n */\nexport class Cre8MultiSelect extends Cre8Element {\n  static styles = [styles];\n\n\n  /**\n   * The list of string items the user can choose in the dropdown\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  items: string[] = [];\n\n  @state()\n  selectedTagItems: string[] = [];\n\n  /**\n   * The list of string items that are initially in the selected list of tags\n   * Note: This list MUST be a subset of the array of items to function.\n   * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid\n   * while preselectedItems=['cat', 'goat'] is not and will break the component.\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  preselectedItems: string[];\n\n  @state()\n  dropdownOpen: boolean = false;\n\n  /**\n   * The required label that appears above the multiselect\n   * @attr {string}\n   */\n  @property()\n  label: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /* Life Cycle Methods */\n\n  constructor() {\n    super();\n    this._handleOnClick = this._handleOnClick.bind(this);\n  }\n\n  firstUpdated() {\n    if (this.preselectedItems) this.setPreselectedItemsinDropdown();\n    this.selectedTagItems = this.preselectedItems || [];\n    this._initializeAria();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('click', this._handleOnClick, false);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this._handleOnClick, false);\n  }\n\n  /* HTML Content functions */\n\n  private _renderDropdownItems() {\n    return this.items.map(\n      // Note: Keyboard can already navigate to the checkbox\n      // eslint-disable-next-line lit-a11y/click-events-have-key-events\n      (item, index) => html`<li\n        @click=\"${(e: MouseEvent) => this._handleListItemClick(e, index)}\"\n      >\n        <cre8-checkbox-field-item\n          .checked=\"${!!this.selectedTagItems.includes(item)}\"\n          label=${item}\n          id=${index}\n          @input=\"${(e: InputEvent) => this._handleDropdownItemInput(item, e)}\"\n        >\n        </cre8-checkbox-field-item>\n      </li>`\n    );\n  }\n\n  private _renderSelectedTags() {\n    if (!this.selectedTagItems.length) {\n      return nothing;\n    }\n    return this.selectedTagItems.map(\n      (item) => html`<li>\n        <cre8-remove-tag\n          text=\"${item}\"\n          color=\"neutral\"\n          shape=\"square\"\n          ?disabled=\"${this.disabled}\"\n          @removeTagClicked=\"${() => this._handleRemoveTagClick(item)}\"\n        ></cre8-remove-tag>\n      </li>`\n    );\n  }\n\n  /* Helper Functions */\n\n  private setPreselectedItemsinDropdown() {\n    this.preselectedItems.forEach((item) => {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    });\n  }\n\n  private clearAllTags() {\n    if (!this.disabled) {\n      if (this.dropdownOpen) {\n        this.selectedTagItems.forEach((item) => {\n          this.shadowRoot\n            ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n            .shadowRoot?.querySelector('input')\n            .click();\n        });\n      }\n      this.selectedTagItems = [];\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private emitSelectedItems(): void {\n    const customEvent = new CustomEvent('selectedItemsChange', {\n      detail: {\n        selectedItems: this.selectedTagItems,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  private toggleDropDown(): void {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  /* Click Event Functions */\n\n  private _handleOnClick(event?: MouseEvent) {\n    if (!this.shadowRoot?.host) {\n      throw Error(\n        'Could not determine navigation context during click handler'\n      );\n    }\n\n    const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n    const label = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__label'\n    );\n    const buttonsWrapper = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__icons-wrapper'\n    );\n    const removeTagWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__tag-wrapper'\n    );\n    const dropdownWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__dropdown'\n    );\n\n    if (!didClickInside) {\n      this.dropdownOpen = false;\n    } else if (\n      !event.composedPath().includes(label)\n      && !event.composedPath().includes(removeTagWrapper)\n      && !event.composedPath().includes(buttonsWrapper)\n      && !event.composedPath().includes(dropdownWrapper)\n      && !this.disabled\n    ) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleListItemClick(e: MouseEvent, index: number) {\n    if (\n      e.target\n      !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n    ) {\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n    }\n  }\n\n  private _handleDropdownItemInput(item: string, e: InputEvent) {\n    const targetCheckbox = e.target as Cre8CheckboxFieldItem;\n\n    if (targetCheckbox.checked) {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    } else {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n    }\n\n    this.emitSelectedItems();\n  }\n\n  private async _handleRemoveTagClick(item: string) {\n    if (!this.disabled) {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n      await this.updateComplete;\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private dropdownArrowClick() {\n    if (!this.disabled) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleButtonToListKeydown(e: KeyboardEvent): void {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n\n  private _handleListKeydown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-success\"\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames(\n      'cre8-c-multi-select',\n      {\n        'cre8-is-error': this.isError,\n        'cre8-is-success': this.isSuccess,\n        'cre8-is-disabled': this.disabled,\n        'cre8-c-multi-select--no-clear-icon': !this.selectedTagItems.length,\n      }\n    );\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-multi-select__label\" id=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-multi-select__body\" ?disabled=${this.disabled}>\n          <div\n            class=\"cre8-c-multi-select__content\"\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n          >\n            <ul\n              class=\"cre8-c-multi-select__tag-wrapper\"\n              aria-label=\"selected items\"\n            >\n              ${this._renderSelectedTags()}\n            </ul>\n          </div>\n          <div class=\"cre8-c-multi-select__icons-wrapper\">\n            <cre8-button\n              ?hideText=${true}\n              svg=\"${svgClear}\"\n              text=\"Clear All\"\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__clear_icon\"\n              @click=\"${this.clearAllTags}\"\n            >\n            </cre8-button>\n            <cre8-button\n              hideText\n              svg=${svgCaretDown}\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__down_icon\"\n              @click=\"${this.dropdownArrowClick}\"\n              @keydown=\"${this._handleButtonToListKeydown}\"\n              aria-label=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n              aria-labelledby=\"${this.fieldId}\"\n            >\n            </cre8-button>\n          </div>\n        </div>\n        ${this.dropdownOpen\n        ? html`\n            <fieldset class=\"cre8-c-multi-select__dropdown\" aria-describedby=\"${this.fieldId}\">\n              <ul\n                aria-label=\"available items\"\n                @keydown=\"${this._handleListKeydown}\"\n              >\n                ${this._renderDropdownItems()}\n              </ul>\n            </fieldset>`\n        : nothing}\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-multi-select__field-note\"\n          >\n            <slot name=\"fieldNote\">${this.fieldNote}</slot>\n          </cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-multi-select') === undefined) {\n  customElements.define('cre8-multi-select', Cre8MultiSelect);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-multi-select': Cre8MultiSelect;\n  }\n}\n\nexport default Cre8MultiSelect;\n"]}

package/lib/components/multi-select/multi-select.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=multi-select.styles.d.ts.map

package/lib/components/multi-select/multi-select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.styles.d.ts","sourceRoot":"","sources":["../../../components/multi-select/multi-select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAyzBV,CAAC;AACH,eAAe,MAAM,CAAC"}