{"version":3,"sources":["components/select/select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAK/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAKvE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,yBAAyB,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI9F;;;;;;GAMG;AACH,cACM,QAAS,SAAQ,aAAoC;IACzD;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAiC;IAE1D;;OAEG;IACH,OAAO,CAAC,qBAAqB,CAA2E;IAExG;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAqB;IAExC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAepB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe,CAErB;IAEF;;;OAGG;IACH,OAAO,CAAC,YAAY;IAkCpB,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B;;;OAGG;IACH,IAAI,MAAM,WAET;IAED;;OAEG;IACH,IAAI,OAAO,0BAEV;IAED;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;OAEG;IAEH,EAAE,SAAM;IAER;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IACH,IAEI,QAAQ,YAEX;IAED;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,uBAAuB,SAAiC;IAExD;;OAEG;IACH,IACI,aAAa,WAEhB;IAED,IAAI,aAAa,CAAC,KAAK,QAAA,EAGtB;IAED;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,KAAK,SAAM;IAEX,gBAAgB;IAIhB,iBAAiB;IAUjB,oBAAoB;IAQpB,OAAO,CAAC,iBAAiB,KAAA;IASzB,MAAM;IAqEN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,QAAQ,CAAC","file":"select.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2021\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { filter } from '../../globals/internal/collection-helpers';\nimport { INPUT_SIZE } from '../input/input';\nimport styles from './select.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as SELECT_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * Select box.\n * @element bx-select\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-select`)\nclass BXSelect extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * The mutation observer DOM mutation.\n   */\n  private _observerMutation: MutationObserver | null = null;\n\n  /**\n   * The `value` for placeholder `<option>`.\n   */\n  private _placeholderItemValue = `__${prefix}-select-placeholder_${Math.random().toString(36).slice(2)}`;\n\n  /**\n   * The select box.\n   */\n  @query('select')\n  private _selectNode!: HTMLSelectElement;\n\n  /**\n   * Handles `oninput` event on the `<input>`.\n   * @param event The event.\n   */\n  private _handleInput({ target }: Event) {\n    const { value } = target as HTMLSelectElement;\n    this.value = value;\n    const { eventSelect } = this.constructor as typeof BXSelect;\n    this.dispatchEvent(\n      new CustomEvent(eventSelect, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles DOM mutation of `<bx-select-item>` or `<bx-select-item-group>` put in `<bx-select>`, or their changes.\n   * In such event, `<bx-select>` creates the corresponding `<option>` and `<optgroup>`, respectively, into shadow DOM,\n   * with `._renderItems()`.\n   * Doing so allows the shadow DOM style of `<bx-select>` to control the style of the `<option>` and `<optgroup>`,\n   * notably the disabled ones.\n   */\n  private _handleMutation = () => {\n    this.requestUpdate();\n  };\n\n  /**\n   * @param element The parent element containing pseudo `<optgroup>`/`<option>`.\n   * @returns The template containing child `<optgroup>`/`<option>` that will be rendered to shadow DOM.\n   */\n  private _renderItems(element: BXSelect | HTMLOptGroupElement) {\n    const { selectorItem, selectorLeafItem } = this.constructor as typeof BXSelect;\n    // Harvests attributes from `<bx-select-item>` and `<bx-select-item-group>`.\n    // Does not use properties to avoid delay in attribute to property mapping, which runs in custom element reaction cycle:\n    // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions\n    return html`\n      ${filter(element.childNodes, item => item.nodeType === Node.ELEMENT_NODE && (item as Element).matches(selectorItem)).map(\n        item => {\n          const disabled = item.hasAttribute('disabled');\n          const label = item.getAttribute('label');\n          const selected = item.hasAttribute('selected');\n          const value = item.getAttribute('value');\n          const { textContent } = item;\n          return item.matches(selectorLeafItem)\n            ? html`\n                <option\n                  class=\"${prefix}--select-option\"\n                  ?disabled=\"${disabled}\"\n                  label=\"${ifNonNull(label ?? textContent)}\"\n                  ?selected=\"${selected}\"\n                  value=\"${ifNonNull(value)}\">\n                  ${textContent}\n                </option>\n              `\n            : html`\n                <optgroup class=\"${prefix}--select-optgroup\" ?disabled=\"${disabled}\" label=\"${ifNonNull(label)}\">\n                  ${this._renderItems(item)}\n                </optgroup>\n              `;\n        }\n      )}\n    `;\n  }\n\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * The count of child `<option>`s.\n   * If the placeholder is in effect, it includes the `<option>` for the placeholder.\n   */\n  get length() {\n    return this._selectNode.length;\n  }\n\n  /**\n   * The child `<option>`s.\n   */\n  get options() {\n    return this._selectNode.options;\n  }\n\n  /**\n   * This form control's type.\n   */\n  get type() {\n    return this._selectNode.type;\n  }\n\n  /**\n   * Sets the select to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * Controls the disabled state of the select\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * ID to link the `label` and `select`\n   */\n  @property()\n  id = '';\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * `true` to enable multiple selection.\n   */\n  @property({ type: Boolean })\n  // eslint-disable-next-line class-methods-use-this\n  get multiple() {\n    return false;\n  }\n\n  /**\n   * Name for the select in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the select against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the select has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Controls the readonly state of the select\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * The selected index.\n   */\n  @property({ type: Number })\n  get selectedIndex() {\n    return this._selectNode.selectedIndex;\n  }\n\n  set selectedIndex(value) {\n    this._selectNode.selectedIndex = value;\n    this.value = this._selectNode.value;\n  }\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.REGULAR;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the text area.\n   */\n  @property()\n  value = '';\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observerMutation = new MutationObserver(this._handleMutation);\n    this._observerMutation.observe(this, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this._observerMutation) {\n      this._observerMutation.disconnect();\n      this._observerMutation = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('value')) {\n      const { value, _placeholderItemValue: placeholderItemValue } = this;\n      // Ensures setting the `value` after rendering child `<option>`s/`<optgroup>`s when there is a change in `value`,\n      // given reflecting `value` requires child `<option>`s/`<optgroup>`s being there beforehand\n      this._selectNode.value = !value ? placeholderItemValue : value;\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      invalid,\n      labelText,\n      placeholder,\n      size,\n      validityMessage,\n      value,\n      _placeholderItemValue: placeholderItemValue,\n      _handleInput: handleInput,\n    } = this;\n\n    const inputClasses = classMap({\n      [`${prefix}--select-input`]: true,\n      [`${prefix}--select-input--${size}`]: size,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: disabled,\n    });\n\n    const supplementalText = !invalid\n      ? html`\n          <div class=\"${helperTextClasses}\">\n            <slot name=\"helper-text\"> ${helperText} </slot>\n          </div>\n        `\n      : html`\n          <div class=\"${prefix}--form-requirement\" id=\"validity-message\">\n            <slot name=\"validity-message\"> ${validityMessage} </slot>\n          </div>\n        `;\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${labelText} </slot>\n      </label>\n      <div class=\"${prefix}--select-input__wrapper\" ?data-invalid=\"${invalid}\">\n        <select\n          id=\"input\"\n          class=\"${inputClasses}\"\n          ?disabled=\"${disabled}\"\n          aria-invalid=\"${String(Boolean(invalid))}\"\n          aria-describedby=\"${ifDefined(!invalid ? undefined : 'validity-message')}\"\n          @input=\"${handleInput}\">\n          ${!placeholder || value\n            ? undefined\n            : html`\n                <option disabled hidden class=\"${prefix}--select-option\" value=\"${placeholderItemValue}\" selected>\n                  ${placeholder}\n                </option>\n              `}\n          ${this._renderItems(this)}\n        </select>\n        ${ChevronDown16({ class: `${prefix}--select__arrow` })}\n        ${!invalid ? undefined : WarningFilled16({ class: `${prefix}--select__invalid-icon` })}\n      </div>\n      ${supplementalText}\n    `;\n  }\n\n  /**\n   * A selector selecting child pseudo `<optgroup>`/`<option>`.\n   */\n  static get selectorItem() {\n    return `${prefix}-select-item-group,${prefix}-select-item`;\n  }\n\n  /**\n   * A selector selecting child pseudo `<option>`.\n   */\n  static get selectorLeafItem() {\n    return `${prefix}-select-item`;\n  }\n\n  /**\n   * The name of the custom event fired after item is selected.\n   */\n  static get eventSelect() {\n    return `${prefix}-select-selected`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXSelect;\n"]}