{"version":3,"sources":["components/textarea/textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiB,UAAU,EAAyB,MAAM,aAAa,CAAC;AAQ/E,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAG/C,OAAO,EAAE,qBAAqB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIjC;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAoC;IAC1E;;;OAGG;IACH,OAAO,CAAC,YAAY;IAIpB,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,wBAAiC;IAE5C;;OAEG;IAEH,IAAI,SAAM;IAEV;;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;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;IAEH,IAAI,SAAK;IAET;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,CAAC,SAAS,EAAG,mBAAmB,CAAC;IAE1C,gBAAgB;IAOhB,MAAM;IAoDN,MAAM,CAAC,MAAM,MAAU;CACxB","file":"textarea.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 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 { customElement, LitElement, html, property, query } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { TEXTAREA_COLOR_SCHEME } from './defs';\nimport styles from './textarea.scss';\n\nexport { TEXTAREA_COLOR_SCHEME };\n\nconst { prefix } = settings;\n\n/**\n * Text area.\n * @element bx-textarea\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}-textarea`)\nexport default class BXTextarea extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * Handles `oninput` event on the `<input>`.\n   * @param event The event.\n   */\n  private _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\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   * May be any of the standard HTML autocomplete options\n   */\n  @property()\n  autocomplete = '';\n\n  /**\n   * Sets the textarea 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 = TEXTAREA_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The number of columns for the textarea to show by default\n   */\n  @property()\n  cols = 50;\n\n  /**\n   * Controls the disabled state of the textarea\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 `textarea`\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   * Name for the textarea in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the textarea against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the textarea has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Controls the readonly state of the textarea\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 number of rows for the textarea to show by default\n   */\n  @property()\n  rows = 4;\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  /**\n   * Get a reference to the underlying textarea so we can directly apply values.\n   * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically\n   */\n  @query('textarea')\n  protected _textarea!: HTMLTextAreaElement;\n\n  createRenderRoot() {\n    return this.attachShadow({\n      mode: 'open',\n      delegatesFocus: Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= 537,\n    });\n  }\n\n  render() {\n    const invalidIcon = WarningFilled16({ class: `${prefix}--text-area__invalid-icon` });\n\n    const textareaClasses = classMap({\n      [`${prefix}--text-area`]: true,\n      [`${prefix}--text-area--v2`]: true,\n      [`${prefix}--text-area--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-area--invalid`]: this.invalid,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${this.labelText} </slot>\n      </label>\n      <div class=\"${prefix}--text-area__wrapper\" ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : null}\n        <textarea\n          ?autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${textareaClasses}\"\n          cols=\"${ifNonNull(this.cols)}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          id=\"input\"\n          name=\"${ifNonEmpty(this.name)}\"\n          pattern=\"${ifNonEmpty(this.pattern)}\"\n          placeholder=\"${ifNonEmpty(this.placeholder)}\"\n          ?readonly=\"${this.readonly}\"\n          ?required=\"${this.required}\"\n          rows=\"${ifNonNull(this.rows)}\"\n          .value=\"${this.value}\"\n          @input=\"${this._handleInput}\"></textarea>\n      </div>\n      <div class=\"${helperTextClasses}\">\n        <slot name=\"helper-text\"> ${this.helperText} </slot>\n      </div>\n      <div class=\"${prefix}--form-requirement\">\n        <slot name=\"validity-message\"> ${this.validityMessage} </slot>\n      </div>\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n"]}