@kyndryl-design-system/shidoka-applications 1.48.0 → 1.48.2

package/components/reusable/dropdown/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"names":[],"mappings":"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"}

package/components/reusable/dropdown/dropdown.js

@@ -458,6 +458,10 @@ textarea[disabled] {
   display: block;
   color: var(--kd-color-text-primary);
 }
+.clear[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .clear kd-icon {
   display: block;
 }
@@ -641,6 +645,7 @@ kyn-tag-group {
                 <button
                   class="clear"
                   aria-label="Clear search text"
+                  ?disabled=${this.disabled}
                   @click=${e=>this.handleClear(e)}
                 >
                   <kd-icon .icon=${u}></kd-icon>

package/components/reusable/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport './dropdownOption';\nimport '../tag';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\nimport { deepmerge } from 'deepmerge-ts';\n\nconst _defaultTextStrings = {\n  selectedOptions: 'List of selected options',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n  static override styles = DropdownScss;\n\n  /** Update by value instead of deriving value from child selections. */\n  @property({ type: Boolean })\n  updateByValue = false;\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   */\n  @property({ type: String })\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Queries the .clear-multiple DOM element.\n   * @ignore\n   */\n  @query('.clear-multiple')\n  clearMultipleEl!: HTMLElement;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  /**\n   * Tags value/text reference.\n   * @ignore\n   */\n  @state()\n  _tags: Array<object> = [];\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  searchTextEntered: any = false;\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  prevSearchKeydownIndex = -1;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label\n          for=${this.name}\n          id=\"label-${this.name}\"\n          class=\"label-text\"\n          @click=${this._handleLabelClick}\n        >\n          ${this.required\n            ? html`\n                <abbr\n                  class=\"required\"\n                  title=${this._textStrings.required}\n                  aria-label=${this._textStrings.required}\n                >\n                  *\n                </abbr>\n              `\n            : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'input-custom': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              tabindex=${this.disabled ? '' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"${this.value\n                        .length} items selected. Clear selections\"\n                      ?disabled=${this.disabled}\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              style=\"min-width: ${this.menuMinWidth};\"\n              aria-labelledby=\"label-${this.name}\"\n              name=${this.name}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              ${this.multiple && this.selectAll\n                ? html`\n                    <kyn-dropdown-option\n                      class=\"select-all\"\n                      value=\"selectAll\"\n                      multiple\n                      ?selected=${this.selectAllChecked}\n                      ?indeterminate=${this.selectAllIndeterminate}\n                      ?disabled=${this.disabled}\n                    >\n                      ${this.selectAllText}\n                    </kyn-dropdown-option>\n                  `\n                : null}\n\n              <slot\n                id=\"children\"\n                @slotchange=${() => this.handleSlotChange()}\n              ></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          <!--\n          ${this._isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n            -->\n        </div>\n\n        ${this.multiple && !this.hideTags && this._tags.length\n          ? html`\n              <kyn-tag-group\n                filter\n                role=\"list\"\n                aria-label=${this._textStrings.selectedOptions}\n              >\n                ${this._tags.map((tag: any) => {\n                  return html`\n                    <kyn-tag\n                      role=\"listitem\"\n                      label=${tag.text}\n                      ?disabled=${this.disabled}\n                      clearTagText=\"Clear Tag ${tag.text}\"\n                      @on-close=${() => this.handleTagClear(tag.value)}\n                    ></kyn-tag>\n                  `;\n                })}\n              </kyn-tag-group>\n            `\n          : null}\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this._isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon\n                  class=\"error-info-icon\"\n                  title=${this._textStrings.error}\n                  aria-label=${this._textStrings.error}\n                  .icon=${errorIcon}\n                ></kd-icon>\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  public resetSelection() {\n    if (this.updateByValue) {\n      this._updateOptions();\n    } else {\n      this._updateChildren();\n      this.emitValue();\n    }\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      e.relatedTarget &&\n      e.relatedTarget.localName !== 'kyn-dropdown-option'\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const visibleOptions = this.options.filter(\n      (option: any) => option.style.display !== 'none'\n    );\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    let highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    const isListboxElOpened = this.open;\n    // open the listbox\n    if (target === 'button') {\n      let openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (e.target === this.clearMultipleEl) {\n        openDropdown = false;\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[highlightedIndex].selected =\n          !visibleOptions[highlightedIndex].selected;\n        highlightedIndex = 0;\n        if (keyCode !== ENTER_KEY_CODE) return;\n      }\n\n      if (openDropdown) {\n        this.open = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          visibleOptions[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n    switch (keyCode) {\n      case 0:\n      case 32:\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        visibleOptions[highlightedIndex].highlighted = true;\n        if (isListboxElOpened) {\n          if (this.multiple) {\n            visibleOptions[highlightedIndex].selected =\n              !visibleOptions[highlightedIndex].selected;\n            if (visibleOptions[highlightedIndex].selected) {\n              this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n            } else {\n              this.assistiveText = `Deselected ${visibleOptions[highlightedIndex].innerHTML}`;\n            }\n          } else {\n            visibleOptions.forEach((e) => (e.selected = false));\n            visibleOptions[highlightedIndex].selected = true;\n            this.open = false;\n            this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n          }\n        }\n        if (highlightedEl && isListboxElOpened)\n          this.updateValue(\n            visibleOptions[highlightedIndex].value,\n            visibleOptions[highlightedIndex].selected\n          );\n\n        this.emitValue();\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n\n    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n    const highlightedIndex = this.options.findIndex(\n      (option) => option.highlighted\n    );\n    this.searchTextEntered = false;\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE) {\n      this.searchTextEntered = true;\n      if (option) {\n        if (this.prevSearchKeydownIndex !== highlightedIndex) {\n          if (this.multiple) {\n            option.selected = !option.selected;\n          } else {\n            this.options.forEach((e) => (e.selected = false));\n            option.selected = true;\n            this.open = false;\n          }\n          this.updateValue(option.value, option.selected);\n        }\n\n        if (option.selected) {\n          this.assistiveText = `Selected ${option.innerHTML}`;\n          this.prevSearchKeydownIndex = highlightedIndex;\n        } else {\n          this.assistiveText = `Deselected ${option.innerHTML}`;\n        }\n      } else {\n        this.assistiveText = 'No item matched.';\n      }\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\n      // find matches\n      const options = this.options.filter((option: any) => {\n        const text = option.text;\n        return text.toLowerCase().startsWith(value.toLowerCase());\n      });\n\n      // reset options highlighted state\n      this.options.forEach((option) => (option.highlighted = false));\n\n      // option highlight and scroll\n      if (value !== '' && options.length) {\n        options[0].highlighted = true;\n        options[0].scrollIntoView({ block: 'nearest' });\n        if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n      }\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter((option) => !option.disabled)\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    this._updateSelectedOptions();\n\n    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  // private _handleFormdata(e: any) {\n  //   if (this.multiple) {\n  //     this.value.forEach((value: string) => {\n  //       e.formData.append(this.name, value);\n  //     });\n  //   } else {\n  //     e.formData.append(this.name, this.value);\n  //   }\n  // }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n    this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    // set value\n    if (this.multiple) {\n      const values =\n        this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      // set form data value\n      // if (this.multiple) {\n      //   const entries = new FormData();\n      //   this.value.forEach((value: string) => {\n      //     entries.append(this.name, value);\n      //   });\n      //   this.internals.setFormValue(entries);\n      // } else {\n      //   this.internals.setFormValue(this.value);\n      // }\n\n      if (this.updateByValue) {\n        this._updateOptions();\n      }\n\n      this._updateTags();\n\n      // update selected option text\n      const AllOptions: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n\n      if (!this.multiple) {\n        if (AllOptions.length && this.value !== '') {\n          const option = AllOptions.find(\n            (option: any) => option.value === this.value\n          );\n\n          this.text = option.textContent;\n        }\n\n        // set search input value\n        if (this.searchable && this.text) {\n          this.searchText = this.text === this.placeholder ? '' : this.text;\n          this.searchEl.value = this.searchText;\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n\n      if (this.open) {\n        if (!this.multiple) {\n          // scroll to selected option\n          this.options\n            .find((option) => option.selected)\n            ?.scrollIntoView({ block: 'nearest' });\n        }\n\n        // open dropdown upwards if closer to bottom of viewport\n        const Threshold = 0.6;\n\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * Threshold\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n\n    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n  }\n\n  // add selected options to Tags array\n  private _updateTags() {\n    if (this.multiple) {\n      const Options: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n      const Tags: Array<object> = [];\n\n      if (Options) {\n        Options.forEach((option: any) => {\n          if (option.selected) {\n            Tags.push({\n              value: option.value,\n              text: option.textContent,\n            });\n          }\n        });\n\n        this._tags = Tags;\n      }\n    }\n  }\n\n  private _updateOptions() {\n    const Options: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    Options.forEach((option: any) => {\n      // set option multiple state\n      option.multiple = this.multiple;\n\n      if (this.multiple) {\n        const Selected = this.value.includes(option.value);\n        // set option selected state\n        option.selected = Selected;\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _updateChildren() {\n    const Slot: any = this.shadowRoot?.querySelector('slot#children');\n    const Options = Slot?.assignedElements();\n\n    // get value from selected options\n    if (Options) {\n      const values: any = [];\n      let value = '';\n      Options.forEach((option: any) => {\n        option.multiple = this.multiple;\n\n        if (option.selected) {\n          if (this.multiple) {\n            values.push(option.value);\n          } else {\n            value = option.value;\n          }\n        }\n      });\n\n      // set initial values\n      if (this.multiple) {\n        this.value = values;\n      } else {\n        this.value = value;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["_defaultTextStrings","selectedOptions","required","error","Dropdown","FormMixin","LitElement","constructor","this","updateByValue","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","disabled","hideTags","selectAll","selectAllText","menuMinWidth","selectAllChecked","selectAllIndeterminate","textStrings","_textStrings","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","tag","handleTagClear","invalidText","_internalValidationMsg","firstUpdated","resetSelection","_updateOptions","_updateChildren","emitValue","focus","buttonEl","handleKeyboard","keyCode","forEach","option","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","visibleOptions","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","scrollIntoView","block","innerHTML","updateValue","nextIndex","stopPropagation","_validate","_updateSelectedOptions","event","CustomEvent","detail","dispatchEvent","_emitSearch","_a","classList","contains","_b","findIndex","toLowerCase","startsWith","_handleClick","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","shadowRoot","querySelector","assignedElements","SelectedOptions","_updateTags","AllOptions","Array","from","querySelectorAll","textContent","listboxEl","preventScroll","Threshold","getBoundingClientRect","top","window","innerHeight","Tags","Selected","Slot","styles","DropdownScss","__decorate","property","type","Boolean","prototype","String","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport './dropdownOption';\nimport '../tag';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport downIcon from '@carbon/icons/es/chevron--down/24';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\nimport clearIcon from '@carbon/icons/es/close/24';\nimport clearIcon16 from '@carbon/icons/es/close/16';\nimport { deepmerge } from 'deepmerge-ts';\n\nconst _defaultTextStrings = {\n  selectedOptions: 'List of selected options',\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot label - Slot for input label.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n  static override styles = DropdownScss;\n\n  /** Update by value instead of deriving value from child selections. */\n  @property({ type: Boolean })\n  updateByValue = false;\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   */\n  @property({ type: String })\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Queries the .clear-multiple DOM element.\n   * @ignore\n   */\n  @query('.clear-multiple')\n  clearMultipleEl!: HTMLElement;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  /**\n   * Tags value/text reference.\n   * @ignore\n   */\n  @state()\n  _tags: Array<object> = [];\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  searchTextEntered: any = false;\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  prevSearchKeydownIndex = -1;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label\n          for=${this.name}\n          id=\"label-${this.name}\"\n          class=\"label-text\"\n          @click=${this._handleLabelClick}\n        >\n          ${this.required\n            ? html`\n                <abbr\n                  class=\"required\"\n                  title=${this._textStrings.required}\n                  aria-label=${this._textStrings.required}\n                >\n                  *\n                </abbr>\n              `\n            : null}\n          <slot name=\"label\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'input-custom': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              tabindex=${this.disabled ? '' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"${this.value\n                        .length} items selected. Clear selections\"\n                      ?disabled=${this.disabled}\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <kd-icon .icon=${clearIcon16}></kd-icon>\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <kd-icon class=\"arrow-icon\" .icon=${downIcon}></kd-icon>\n            </div>\n\n            <ul\n              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              style=\"min-width: ${this.menuMinWidth};\"\n              aria-labelledby=\"label-${this.name}\"\n              name=${this.name}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              ${this.multiple && this.selectAll\n                ? html`\n                    <kyn-dropdown-option\n                      class=\"select-all\"\n                      value=\"selectAll\"\n                      multiple\n                      ?selected=${this.selectAllChecked}\n                      ?indeterminate=${this.selectAllIndeterminate}\n                      ?disabled=${this.disabled}\n                    >\n                      ${this.selectAllText}\n                    </kyn-dropdown-option>\n                  `\n                : null}\n\n              <slot\n                id=\"children\"\n                @slotchange=${() => this.handleSlotChange()}\n              ></slot>\n            </ul>\n          </div>\n\n          ${this.searchable && this.searchEl && this.searchText !== ''\n            ? html`\n                <button\n                  class=\"clear\"\n                  aria-label=\"Clear search text\"\n                  ?disabled=${this.disabled}\n                  @click=${(e: any) => this.handleClear(e)}\n                >\n                  <kd-icon .icon=${clearIcon}></kd-icon>\n                </button>\n              `\n            : null}\n          <!--\n          ${this._isInvalid\n            ? html` <kd-icon class=\"error-icon\" .icon=${errorIcon}></kd-icon> `\n            : null}\n            -->\n        </div>\n\n        ${this.multiple && !this.hideTags && this._tags.length\n          ? html`\n              <kyn-tag-group\n                filter\n                role=\"list\"\n                aria-label=${this._textStrings.selectedOptions}\n              >\n                ${this._tags.map((tag: any) => {\n                  return html`\n                    <kyn-tag\n                      role=\"listitem\"\n                      label=${tag.text}\n                      ?disabled=${this.disabled}\n                      clearTagText=\"Clear Tag ${tag.text}\"\n                      @on-close=${() => this.handleTagClear(tag.value)}\n                    ></kyn-tag>\n                  `;\n                })}\n              </kyn-tag-group>\n            `\n          : null}\n        ${this.caption !== ''\n          ? html` <div class=\"caption\">${this.caption}</div> `\n          : null}\n        ${this._isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon\n                  class=\"error-info-icon\"\n                  title=${this._textStrings.error}\n                  aria-label=${this._textStrings.error}\n                  .icon=${errorIcon}\n                ></kd-icon>\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this.resetSelection();\n  }\n\n  /**\n   * Retrieves the selected values from the list of child options and sets value property.\n   * @function\n   */\n  public resetSelection() {\n    if (this.updateByValue) {\n      this._updateOptions();\n    } else {\n      this._updateChildren();\n      this.emitValue();\n    }\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      }\n    }\n  }\n\n  private _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      e.relatedTarget &&\n      e.relatedTarget.localName !== 'kyn-dropdown-option'\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const visibleOptions = this.options.filter(\n      (option: any) => option.style.display !== 'none'\n    );\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    let highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    const isListboxElOpened = this.open;\n    // open the listbox\n    if (target === 'button') {\n      let openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (e.target === this.clearMultipleEl) {\n        openDropdown = false;\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[highlightedIndex].selected =\n          !visibleOptions[highlightedIndex].selected;\n        highlightedIndex = 0;\n        if (keyCode !== ENTER_KEY_CODE) return;\n      }\n\n      if (openDropdown) {\n        this.open = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          visibleOptions[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n    switch (keyCode) {\n      case 0:\n      case 32:\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        visibleOptions[highlightedIndex].highlighted = true;\n        if (isListboxElOpened) {\n          if (this.multiple) {\n            visibleOptions[highlightedIndex].selected =\n              !visibleOptions[highlightedIndex].selected;\n            if (visibleOptions[highlightedIndex].selected) {\n              this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n            } else {\n              this.assistiveText = `Deselected ${visibleOptions[highlightedIndex].innerHTML}`;\n            }\n          } else {\n            visibleOptions.forEach((e) => (e.selected = false));\n            visibleOptions[highlightedIndex].selected = true;\n            this.open = false;\n            this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n          }\n        }\n        if (highlightedEl && isListboxElOpened)\n          this.updateValue(\n            visibleOptions[highlightedIndex].value,\n            visibleOptions[highlightedIndex].selected\n          );\n\n        this.emitValue();\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n\n    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n    const highlightedIndex = this.options.findIndex(\n      (option) => option.highlighted\n    );\n    this.searchTextEntered = false;\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE) {\n      this.searchTextEntered = true;\n      if (option) {\n        if (this.prevSearchKeydownIndex !== highlightedIndex) {\n          if (this.multiple) {\n            option.selected = !option.selected;\n          } else {\n            this.options.forEach((e) => (e.selected = false));\n            option.selected = true;\n            this.open = false;\n          }\n          this.updateValue(option.value, option.selected);\n        }\n\n        if (option.selected) {\n          this.assistiveText = `Selected ${option.innerHTML}`;\n          this.prevSearchKeydownIndex = highlightedIndex;\n        } else {\n          this.assistiveText = `Deselected ${option.innerHTML}`;\n        }\n      } else {\n        this.assistiveText = 'No item matched.';\n      }\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\n      // find matches\n      const options = this.options.filter((option: any) => {\n        const text = option.text;\n        return text.toLowerCase().startsWith(value.toLowerCase());\n      });\n\n      // reset options highlighted state\n      this.options.forEach((option) => (option.highlighted = false));\n\n      // option highlight and scroll\n      if (value !== '' && options.length) {\n        options[0].highlighted = true;\n        options[0].scrollIntoView({ block: 'nearest' });\n        if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n      }\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter((option) => !option.disabled)\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    this._updateSelectedOptions();\n\n    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  // private _handleFormdata(e: any) {\n  //   if (this.multiple) {\n  //     this.value.forEach((value: string) => {\n  //       e.formData.append(this.name, value);\n  //     });\n  //   } else {\n  //     e.formData.append(this.name, this.value);\n  //   }\n  // }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n    this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    // set value\n    if (this.multiple) {\n      const values =\n        this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      // set form data value\n      // if (this.multiple) {\n      //   const entries = new FormData();\n      //   this.value.forEach((value: string) => {\n      //     entries.append(this.name, value);\n      //   });\n      //   this.internals.setFormValue(entries);\n      // } else {\n      //   this.internals.setFormValue(this.value);\n      // }\n\n      if (this.updateByValue) {\n        this._updateOptions();\n      }\n\n      this._updateTags();\n\n      // update selected option text\n      const AllOptions: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n\n      if (!this.multiple) {\n        if (AllOptions.length && this.value !== '') {\n          const option = AllOptions.find(\n            (option: any) => option.value === this.value\n          );\n\n          this.text = option.textContent;\n        }\n\n        // set search input value\n        if (this.searchable && this.text) {\n          this.searchText = this.text === this.placeholder ? '' : this.text;\n          this.searchEl.value = this.searchText;\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n\n      if (this.open) {\n        if (!this.multiple) {\n          // scroll to selected option\n          this.options\n            .find((option) => option.selected)\n            ?.scrollIntoView({ block: 'nearest' });\n        }\n\n        // open dropdown upwards if closer to bottom of viewport\n        const Threshold = 0.6;\n\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * Threshold\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n\n    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n  }\n\n  // add selected options to Tags array\n  private _updateTags() {\n    if (this.multiple) {\n      const Options: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n      const Tags: Array<object> = [];\n\n      if (Options) {\n        Options.forEach((option: any) => {\n          if (option.selected) {\n            Tags.push({\n              value: option.value,\n              text: option.textContent,\n            });\n          }\n        });\n\n        this._tags = Tags;\n      }\n    }\n  }\n\n  private _updateOptions() {\n    const Options: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    Options.forEach((option: any) => {\n      // set option multiple state\n      option.multiple = this.multiple;\n\n      if (this.multiple) {\n        const Selected = this.value.includes(option.value);\n        // set option selected state\n        option.selected = Selected;\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _updateChildren() {\n    const Slot: any = this.shadowRoot?.querySelector('slot#children');\n    const Options = Slot?.assignedElements();\n\n    // get value from selected options\n    if (Options) {\n      const values: any = [];\n      let value = '';\n      Options.forEach((option: any) => {\n        option.multiple = this.multiple;\n\n        if (option.selected) {\n          if (this.multiple) {\n            values.push(option.value);\n          } else {\n            value = option.value;\n          }\n        }\n      });\n\n      // set initial values\n      if (this.multiple) {\n        this.value = values;\n      } else {\n        this.value = value;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["_defaultTextStrings","selectedOptions","required","error","Dropdown","FormMixin","LitElement","constructor","this","updateByValue","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","disabled","hideTags","selectAll","selectAllText","menuMinWidth","selectAllChecked","selectAllIndeterminate","textStrings","_textStrings","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","clearIcon16","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","handleSlotChange","searchEl","handleClear","clearIcon","errorIcon","map","tag","handleTagClear","invalidText","_internalValidationMsg","firstUpdated","resetSelection","_updateOptions","_updateChildren","emitValue","focus","buttonEl","handleKeyboard","keyCode","forEach","option","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","visibleOptions","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","scrollIntoView","block","innerHTML","updateValue","nextIndex","stopPropagation","_validate","_updateSelectedOptions","event","CustomEvent","detail","dispatchEvent","_emitSearch","_a","classList","contains","_b","findIndex","toLowerCase","startsWith","_handleClick","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","shadowRoot","querySelector","assignedElements","SelectedOptions","_updateTags","AllOptions","Array","from","querySelectorAll","textContent","listboxEl","preventScroll","Threshold","getBoundingClientRect","top","window","innerHeight","Tags","Selected","Slot","styles","DropdownScss","__decorate","property","type","Boolean","prototype","String","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}

package/components/reusable/radioButton/radioButton.js

@@ -68,6 +68,8 @@ input:active {
 }
 input[disabled] {
   border-color: var(--kd-color-text-disabled);
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 input[disabled]:hover {
   background-color: transparent;

package/components/reusable/radioButton/radioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioButton.js","sources":["../../../../src/components/reusable/radioButton/radioButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport RadioButtonScss from './radioButton.scss';\n\n/**\n * Radio button.\n * @fires on-radio-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-radio-button')\nexport class RadioButton extends LitElement {\n  static override styles = RadioButtonScss;\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Radio button value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Radio button name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Radio button checked state, inherited from the parent group if value matches.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Radio button disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Radio button group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span><slot></slot></span>\n        <input\n          type=\"radio\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the radio group\n    const event = new CustomEvent('on-radio-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-radio-button': RadioButton;\n  }\n}\n"],"names":["RadioButton","LitElement","constructor","this","value","name","checked","required","disabled","invalid","render","html","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","RadioButtonScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAWLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAOPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,CAkCX,CAhCU,MAAAC,GACP,OAAOC,CAAI;yBACUR,KAAKK,qBAAqBL,KAAKM;;;;iBAIvCN,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLG,GAAWT,KAAKU,aAAaD;;;KAI/C,CAEO,YAAAC,CAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,kBAAmB,CAC/CC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNZ,QAASM,EAAEO,OAAOb,QAClBF,MAAOQ,EAAEO,OAAOf,MAChBgB,UAAWR,KAGfT,KAAKkB,cAAcP,EACpB,GA7Eed,EAAMsB,OAAGC,EAGTvB,EAAAwB,kBAAoB,IAC/BvB,EAAWuB,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP7B,EAAA8B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR7B,EAAA8B,UAAA,YAAA,GAOVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACF/B,EAAA8B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD/B,EAAA8B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD/B,EAAA8B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACF/B,EAAA8B,UAAA,eAAA,GA7CL9B,EAAW0B,EAAA,CADvBM,EAAc,qBACFhC"}
+{"version":3,"file":"radioButton.js","sources":["../../../../src/components/reusable/radioButton/radioButton.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport RadioButtonScss from './radioButton.scss';\n\n/**\n * Radio button.\n * @fires on-radio-change - Captures the change event and emits the selected value and original event details.\n * @slot unnamed - Slot for label text.\n */\n@customElement('kyn-radio-button')\nexport class RadioButton extends LitElement {\n  static override styles = RadioButtonScss;\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Radio button value. */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Radio button name, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Radio button checked state, inherited from the parent group if value matches.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  checked = false;\n\n  /**\n   * Makes the input required, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  required = false;\n\n  /**\n   * Radio button disabled state, inherited from the parent group.\n   */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /**\n   * Radio button group invalid state, inherited from the parent group.\n   * @ignore\n   */\n  @property({ type: Boolean })\n  invalid = false;\n\n  override render() {\n    return html`\n      <label ?disabled=${this.disabled} ?invalid=${this.invalid}>\n        <span><slot></slot></span>\n        <input\n          type=\"radio\"\n          name=${this.name}\n          value=${this.value}\n          .checked=${this.checked}\n          ?checked=${this.checked}\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          ?invalid=${this.invalid}\n          @change=${(e: any) => this.handleChange(e)}\n        />\n      </label>\n    `;\n  }\n\n  private handleChange(e: any) {\n    // emit selected value, bubble so it can be captured by the radio group\n    const event = new CustomEvent('on-radio-change', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        checked: e.target.checked,\n        value: e.target.value,\n        origEvent: e,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-radio-button': RadioButton;\n  }\n}\n"],"names":["RadioButton","LitElement","constructor","this","value","name","checked","required","disabled","invalid","render","html","e","handleChange","event","CustomEvent","bubbles","composed","detail","target","origEvent","dispatchEvent","styles","RadioButtonScss","shadowRootOptions","delegatesFocus","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAWLC,KAAKC,MAAG,GAORD,KAAIE,KAAG,GAOPF,KAAOG,SAAG,EAOVH,KAAQI,UAAG,EAMXJ,KAAQK,UAAG,EAOXL,KAAOM,SAAG,CAkCX,CAhCU,MAAAC,GACP,OAAOC,CAAI;yBACUR,KAAKK,qBAAqBL,KAAKM;;;;iBAIvCN,KAAKE;kBACJF,KAAKC;qBACFD,KAAKG;qBACLH,KAAKG;sBACJH,KAAKI;sBACLJ,KAAKK;qBACNL,KAAKM;oBACLG,GAAWT,KAAKU,aAAaD;;;KAI/C,CAEO,YAAAC,CAAaD,GAEnB,MAAME,EAAQ,IAAIC,YAAY,kBAAmB,CAC/CC,SAAS,EACTC,UAAU,EACVC,OAAQ,CACNZ,QAASM,EAAEO,OAAOb,QAClBF,MAAOQ,EAAEO,OAAOf,MAChBgB,UAAWR,KAGfT,KAAKkB,cAAcP,EACpB,GA7Eed,EAAMsB,OAAGC,EAGTvB,EAAAwB,kBAAoB,IAC/BvB,EAAWuB,kBACdC,gBAAgB,GAKlBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACP7B,EAAA8B,UAAA,aAAA,GAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACR7B,EAAA8B,UAAA,YAAA,GAOVJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACF/B,EAAA8B,UAAA,eAAA,GAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD/B,EAAA8B,UAAA,gBAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACD/B,EAAA8B,UAAA,gBAAA,GAOjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACF/B,EAAA8B,UAAA,eAAA,GA7CL9B,EAAW0B,EAAA,CADvBM,EAAc,qBACFhC"}

package/components/reusable/radioButton/radioButtonGroup.d.ts

@@ -34,6 +34,8 @@ export declare class RadioButtonGroup extends RadioButtonGroup_base {
      */
     radioButtons: Array<any>;
     render(): import("lit").TemplateResult<1>;
+    private _handleSlotChange;
+    private _updateChildren;
     willUpdate(changedProps: any): void;
     updated(changedProps: any): void;
     private _validate;

package/components/reusable/radioButton/radioButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;;AAQnE;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,qBAAqB;IACzD,OAAgB,MAAM,MAAwB;IAE9C,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,iCAAiC;IAEjC,WAAW;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;MAAuB;IAEnC;;;OAGG;IAEH,YAAY,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,MAAM;IAwCN,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IA8ClC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,kBAAkB;IAajB,iBAAiB;IAYjB,oBAAoB,IAAI,IAAI;CAUtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,gBAAgB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"radioButtonGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAUvC,OAAO,2DAA2D,CAAC;;AAQnE;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,qBAAqB;IACzD,OAAgB,MAAM,MAAwB;IAE9C,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB,yCAAyC;IAEzC,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,iCAAiC;IAEjC,WAAW;;;MAAuB;IAElC;;OAEG;IAEH,YAAY;;;MAAuB;IAEnC;;;OAGG;IAEH,YAAY,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,MAAM;IAwCf,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUd,UAAU,CAAC,YAAY,EAAE,GAAG;IAM5B,OAAO,CAAC,YAAY,EAAE,GAAG;IAelC,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,kBAAkB;IAajB,iBAAiB;IAYjB,oBAAoB,IAAI,IAAI;CAUtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,gBAAgB,CAAC;KAC5C;CACF"}

package/components/reusable/radioButton/radioButtonGroup.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as i,t as e,l as r,e as o}from"../../../vendor/lit-52eb9e23.js";import{i as a,x as d,s as n}from"../../../vendor/lit-element-3185f710.js";import{d as l}from"../../../vendor/deepmerge-ts-e62363e6.js";import{FormMixin as s}from"../../../common/mixins/form-input.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import{i as h}from"../../../vendor/@carbon/icons-c6f09e5f.js";var c=a`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,l as r,e as o}from"../../../vendor/lit-52eb9e23.js";import{i as a,x as d,s as n}from"../../../vendor/lit-element-3185f710.js";import{d as l}from"../../../vendor/deepmerge-ts-e62363e6.js";import{FormMixin as s}from"../../../common/mixins/form-input.js";import"@kyndryl-design-system/shidoka-foundation/components/icon";import{i as h}from"../../../vendor/@carbon/icons-c6f09e5f.js";var c=a`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -338,8 +338,8 @@ fieldset {
             `:null}
 
         <div class="${this.horizontal?"horizontal":""}">
-          <slot></slot>
+          <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
       </fieldset>
-    `}willUpdate(t){t.has("textStrings")&&(this._textStrings=l(m,this.textStrings))}updated(t){this._onUpdated(t),t.has("name")&&this.radioButtons.forEach((t=>{t.name=this.name})),t.has("value")&&this.radioButtons.forEach((t=>{t.checked=t.value===this.value})),t.has("required")&&this.radioButtons.forEach((t=>{t.required=this.required})),t.has("disabled")&&void 0!==t.get("disabled")&&this.radioButtons.forEach((t=>{t.disabled=this.disabled})),(t.has("invalidText")||t.has("internalValidationMsg"))&&this.radioButtons.forEach((t=>{t.invalid=this._isInvalid}))}_validate(t,i){const e={customError:""!==this.invalidText,valueMissing:this.required&&""===this.value},r=this.required&&""===this.value?"A selection is required.":"",o=""!==this.invalidText?this.invalidText:r;this._internals.setValidity(e,o,this.radioButtons[0]),t&&(this._internalValidationMsg=r),i&&this._internals.reportValidity()}_handleRadioChange(t){this.value=t.detail.value,this._validate(!1,!1);const i=new CustomEvent("on-radio-group-change",{detail:{value:t.detail.value}});this.dispatchEvent(i)}connectedCallback(){super.connectedCallback(),this._onConnected(),this.addEventListener("on-radio-change",(t=>this._handleRadioChange(t)))}disconnectedCallback(){this._onDisconnected(),this.removeEventListener("on-radio-change",(t=>this._handleRadioChange(t))),super.disconnectedCallback()}};g.styles=c,t([i({type:Boolean})],g.prototype,"required",void 0),t([i({type:Boolean})],g.prototype,"disabled",void 0),t([i({type:Boolean})],g.prototype,"horizontal",void 0),t([i({type:Object})],g.prototype,"textStrings",void 0),t([e()],g.prototype,"_textStrings",void 0),t([r()],g.prototype,"radioButtons",void 0),g=t([o("kyn-radio-button-group")],g);export{g as RadioButtonGroup};
+    `}_handleSlotChange(){this._updateChildren()}_updateChildren(){this.radioButtons.forEach((e=>{e.disabled=this.disabled,e.checked=e.value===this.value,e.name=this.name,e.required=this.required,e.invalid=this._isInvalid}))}willUpdate(e){e.has("textStrings")&&(this._textStrings=l(m,this.textStrings))}updated(e){this._onUpdated(e),(e.has("value")||e.has("name")||e.has("required")||e.has("disabled")||e.has("invalidText")||e.has("internalValidationMsg"))&&this._updateChildren()}_validate(e,t){const i={customError:""!==this.invalidText,valueMissing:this.required&&""===this.value},r=this.required&&""===this.value?"A selection is required.":"",o=""!==this.invalidText?this.invalidText:r;this._internals.setValidity(i,o,this.radioButtons[0]),e&&(this._internalValidationMsg=r),t&&this._internals.reportValidity()}_handleRadioChange(e){this.value=e.detail.value,this._validate(!1,!1);const t=new CustomEvent("on-radio-group-change",{detail:{value:e.detail.value}});this.dispatchEvent(t)}connectedCallback(){super.connectedCallback(),this._onConnected(),this.addEventListener("on-radio-change",(e=>this._handleRadioChange(e)))}disconnectedCallback(){this._onDisconnected(),this.removeEventListener("on-radio-change",(e=>this._handleRadioChange(e))),super.disconnectedCallback()}};g.styles=c,e([t({type:Boolean})],g.prototype,"required",void 0),e([t({type:Boolean})],g.prototype,"disabled",void 0),e([t({type:Boolean})],g.prototype,"horizontal",void 0),e([t({type:Object})],g.prototype,"textStrings",void 0),e([i()],g.prototype,"_textStrings",void 0),e([r()],g.prototype,"radioButtons",void 0),g=e([o("kyn-radio-button-group")],g);export{g as RadioButtonGroup};
 //# sourceMappingURL=radioButtonGroup.js.map

package/components/reusable/radioButton/radioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioButtonGroup.js","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport RadioButtonGroupScss from './radioButtonGroup.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\nconst _defaultTextStrings = {\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Radio button group container.\n * @fires on-radio-group-change - Captures the change event and emits the selected value.\n * @slot unnamed - Slot for individual radio buttons.\n * @slot label - Slot for label text.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-radio-button-group')\nexport class RadioButtonGroup extends FormMixin(LitElement) {\n  static override styles = RadioButtonGroupScss;\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Radio button group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Radio button group horizontal layout. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries for slotted radio buttons.\n   * @ignore\n   */\n  @queryAssignedElements()\n  radioButtons!: Array<any>;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        <legend class=\"label-text\">\n          ${this.required\n            ? html`\n                <abbr\n                  class=\"required\"\n                  title=${this._textStrings.required}\n                  aria-label=${this._textStrings.required}\n                >\n                  *\n                </abbr>\n              `\n            : null}\n          <slot name=\"label\"></slot>\n        </legend>\n        <div class=\"description-text\">\n          <slot name=\"description\"></slot>\n        </div>\n        ${this._isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon\n                  .icon=\"${errorIcon}\"\n                  title=${this._textStrings.error}\n                  aria-label=${this._textStrings.error}\n                ></kd-icon>\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <slot></slot>\n        </div>\n      </fieldset>\n    `;\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('name')) {\n      // set name for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.name = this.name;\n      });\n    }\n\n    if (changedProps.has('value')) {\n      // set checked state for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.checked = radio.value === this.value;\n      });\n    }\n\n    if (changedProps.has('required')) {\n      // set required for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.required = this.required;\n      });\n    }\n\n    if (\n      changedProps.has('disabled') &&\n      changedProps.get('disabled') !== undefined\n    ) {\n      // set disabled for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.disabled = this.disabled;\n      });\n    }\n\n    if (\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      // set invalid state for each radio button\n      this.radioButtons.forEach((radio: any) => {\n        radio.invalid = this._isInvalid;\n      });\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && this.value === '',\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && this.value === '' ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first radio\n    this._internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.radioButtons[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleRadioChange(e: any) {\n    // set selected value\n    this.value = e.detail.value;\n\n    this._validate(false, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-radio-group-change', {\n      detail: { value: e.detail.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child radio buttons change event\n    this.addEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n  }\n\n  override disconnectedCallback(): void {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-radio-button-group': RadioButtonGroup;\n  }\n}\n"],"names":["_defaultTextStrings","required","error","RadioButtonGroup","FormMixin","LitElement","constructor","this","disabled","horizontal","textStrings","_textStrings","render","html","_isInvalid","errorIcon","invalidText","_internalValidationMsg","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","radioButtons","forEach","radio","name","checked","value","undefined","get","invalid","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","_handleRadioChange","e","detail","event","CustomEvent","dispatchEvent","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","RadioButtonGroupScss","__decorate","property","type","Boolean","prototype","Object","state","queryAssignedElements","customElement"],"mappings":"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"}
+{"version":3,"file":"radioButtonGroup.js","sources":["../../../../src/components/reusable/radioButton/radioButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { deepmerge } from 'deepmerge-ts';\nimport RadioButtonGroupScss from './radioButtonGroup.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport '@kyndryl-design-system/shidoka-foundation/components/icon';\nimport errorIcon from '@carbon/icons/es/warning--filled/16';\n\nconst _defaultTextStrings = {\n  required: 'Required',\n  error: 'Error',\n};\n\n/**\n * Radio button group container.\n * @fires on-radio-group-change - Captures the change event and emits the selected value.\n * @slot unnamed - Slot for individual radio buttons.\n * @slot label - Slot for label text.\n * @slot description - Slot for description text.\n */\n@customElement('kyn-radio-button-group')\nexport class RadioButtonGroup extends FormMixin(LitElement) {\n  static override styles = RadioButtonGroupScss;\n\n  /** Makes the input required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Radio button group disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Radio button group horizontal layout. */\n  @property({ type: Boolean })\n  horizontal = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Queries for slotted radio buttons.\n   * @ignore\n   */\n  @queryAssignedElements()\n  radioButtons!: Array<any>;\n\n  override render() {\n    return html`\n      <fieldset ?disabled=${this.disabled}>\n        <legend class=\"label-text\">\n          ${this.required\n            ? html`\n                <abbr\n                  class=\"required\"\n                  title=${this._textStrings.required}\n                  aria-label=${this._textStrings.required}\n                >\n                  *\n                </abbr>\n              `\n            : null}\n          <slot name=\"label\"></slot>\n        </legend>\n        <div class=\"description-text\">\n          <slot name=\"description\"></slot>\n        </div>\n        ${this._isInvalid\n          ? html`\n              <div class=\"error\">\n                <kd-icon\n                  .icon=\"${errorIcon}\"\n                  title=${this._textStrings.error}\n                  aria-label=${this._textStrings.error}\n                ></kd-icon>\n                ${this.invalidText || this._internalValidationMsg}\n              </div>\n            `\n          : null}\n\n        <div class=\"${this.horizontal ? 'horizontal' : ''}\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </fieldset>\n    `;\n  }\n\n  private _handleSlotChange() {\n    this._updateChildren();\n  }\n\n  private _updateChildren() {\n    this.radioButtons.forEach((radio) => {\n      radio.disabled = this.disabled;\n      radio.checked = radio.value === this.value;\n      radio.name = this.name;\n      radio.required = this.required;\n      radio.invalid = this._isInvalid;\n    });\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    this._onUpdated(changedProps);\n\n    if (\n      changedProps.has('value') ||\n      changedProps.has('name') ||\n      changedProps.has('required') ||\n      changedProps.has('disabled') ||\n      changedProps.has('invalidText') ||\n      changedProps.has('internalValidationMsg')\n    ) {\n      this._updateChildren();\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing: this.required && this.value === '',\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && this.value === '' ? 'A selection is required.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to first radio\n    this._internals.setValidity(\n      Validity,\n      ValidationMessage,\n      this.radioButtons[0]\n    );\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the first checkbox to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private _handleRadioChange(e: any) {\n    // set selected value\n    this.value = e.detail.value;\n\n    this._validate(false, false);\n\n    // emit selected value\n    const event = new CustomEvent('on-radio-group-change', {\n      detail: { value: e.detail.value },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    // capture child radio buttons change event\n    this.addEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n  }\n\n  override disconnectedCallback(): void {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    this.removeEventListener('on-radio-change', (e: any) =>\n      this._handleRadioChange(e)\n    );\n\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-radio-button-group': RadioButtonGroup;\n  }\n}\n"],"names":["_defaultTextStrings","required","error","RadioButtonGroup","FormMixin","LitElement","constructor","this","disabled","horizontal","textStrings","_textStrings","render","html","_isInvalid","errorIcon","invalidText","_internalValidationMsg","_handleSlotChange","_updateChildren","radioButtons","forEach","radio","checked","value","name","invalid","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","_validate","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","_handleRadioChange","e","detail","event","CustomEvent","dispatchEvent","connectedCallback","super","_onConnected","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","styles","RadioButtonGroupScss","__decorate","property","type","Boolean","prototype","Object","state","queryAssignedElements","customElement"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.48.0",
+  "version": "1.48.2",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",