{"version":3,"sources":["../../src/elements/textarea.ts","../../src/styles/elements/textarea.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport KemetField from './field';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\nimport { stylesTextarea } from '../styles/elements/textarea';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n *\n * @prop {string} slug\n * @prop {string}  name\n * @prop {string}  placeholder\n * @prop {number}  minlength\n * @prop {number}  maxlength\n * @prop {string}  inputmode\n * @prop {boolean}  disabled\n * @prop {boolean}  readonly\n * @prop {boolean}  required\n * @prop {string}  value\n * @prop {boolean}  invalid\n * @prop {TypeStatus}  status\n * @prop {boolean}  validateOnBlur\n * @prop {TypeRoundedSizes}  rounded\n * @prop {boolean}  filled\n * @prop {number}  rows\n * @prop {boolean} autocorrect\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n */\n\n@customElement('kemet-textarea')\nexport default class KemetTextarea extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesTextarea];\n\n  @property({ type: String })\n  slug: string = 'textarea';\n\n  @property({ type: String })\n  name: string = 'textarea';\n\n  @property({ type: String })\n  placeholder: string;\n\n  @property({ type: Number })\n  minlength: number;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: String })\n  inputmode: string;\n\n  @property({ type: Boolean })\n  autofocus: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  @property({ type: Boolean })\n  readonly: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  required: boolean;\n\n  @property({ type: String })\n  value: string = '';\n\n  @property({ type: Boolean, reflect: true })\n  invalid: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: Number })\n  rows: number = 4;\n\n  @property({ type: Boolean, attribute: 'validate-on-blur' })\n  validateOnBlur: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  @property({ reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean })\n  autocorrect: boolean;\n\n  @state()\n  form: HTMLFormElement;\n\n  @state()\n  control: KemetField;\n\n  @state()\n  textarea: HTMLTextAreaElement;\n\n  @state()\n  hasFocus: boolean;\n\n  @state()\n  validity: ValidityState;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  firstUpdated() {\n    // elements\n    this.form = this.closest('form');\n    this.control = this.closest('kemet-field');\n    this.textarea = this.shadowRoot.querySelector('textarea');\n  }\n\n  render() {\n    return html`\n      <textarea\n        part=\"textarea\"\n        id=${this.slug}\n        name=${this.name}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        placeholder=${ifDefined(this.placeholder)}\n        rows=${ifDefined(this.rows)}\n        minlength=${ifDefined(this.minlength)}\n        maxlength=${ifDefined(this.maxlength)}\n        autocorrect=${ifDefined(this.autocorrect)}\n        ?autofocus=${this.autofocus}\n        spellcheck=${ifDefined(this.spellcheck)}\n        inputmode=${ifDefined(this.inputmode)}\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @invalid=${this.handleInvalid}\n      ></textarea>\n    `;\n  }\n\n  /**\n   * Handles when the textarea receives focus\n   * @private\n   */\n  handleFocus() {\n    this.hasFocus = true;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-focused', {\n        bubbles: true,\n        composed: true,\n        detail: true,\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea loses focus\n   * @private\n   */\n  handleBlur() {\n    this.hasFocus = false;\n\n    /**\n     * Fires when the input receives and loses focus\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-focused', {\n        bubbles: true,\n        composed: true,\n        detail: false,\n      }),\n    );\n\n    if (this.validateOnBlur && this.form) {\n      this.textarea.checkValidity();\n      this.validity = this.textarea.validity;\n    }\n  }\n\n  /**\n   * Handles when the textarea changes value\n   * @private\n   */\n  handleChange() {\n    this.value = this.textarea.value;\n\n    if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n      this.invalid = false;\n      this.status = EnumStatuses.Standard;\n      this.validity = this.textarea.validity;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-input-status', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            status: 'standard',\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Handles when the textarea receives input\n   * @private\n   */\n  handleInput() {\n    this.value = this.textarea.value;\n\n    /**\n     * Fires when the input receives input\n     */\n    this.dispatchEvent(\n      new CustomEvent('kemet-input-input', {\n        bubbles: true,\n        composed: true,\n        detail: this.value,\n      }),\n    );\n  }\n\n  /**\n   * Handles when the textarea has an error\n   * @private\n   */\n  handleInvalid() {\n    this.validity = this.textarea.validity;\n\n    if (this.validateOnBlur) {\n      this.invalid = true;\n      this.status = EnumStatuses.Error;\n\n      /**\n       * Fires when there's a change in status\n       */\n      this.dispatchEvent(\n        new CustomEvent('kemet-input-status', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            status: 'error',\n            validity: this.textarea.validity,\n            element: this,\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Checks the validity of the character limit for the count component\n   * @private\n   * @returns {boolean}\n   */\n  checkLimitValidity(): boolean {\n    if (this.control) {\n      const count = this.control.querySelector('kemet-count');\n      if (count) {\n        return this.value.length < count.limit;\n      }\n    }\n\n    return true;\n  }\n\n  /**\n   * Checks the validity of the standard input\n   * @public\n   * @returns {boolean}\n   */\n  checkValidity(): boolean {\n    return this.textarea.checkValidity();\n  }\n\n  /**\n   * Focuses the standard input\n   * @public\n   */\n  focus() {\n    return this.textarea.focus();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-textarea': KemetTextarea\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesTextarea = css`\n  :host {\n    --kemet-textarea-padding: 1rem;\n    --kemet-textarea-border: 1px solid rgb(var(--kemet-color-foreground));\n    --kemet-textarea-border-color-error: 1px solid rgb(var(--kemet-color-error));\n    --kemet-textarea-border-color-success: 1px solid rgb(var(--kemet-color-success));\n    --kemet-textarea-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n    --kemet-textarea-icon-left-padding: 3rem;\n    --kemet-textarea-icon-right-padding: 3rem;\n    --kemet-textarea-border-filled: none;\n    --kemet-textarea-color-filled: rgb(var(--kemet-color-white));\n    --kemet-textarea-background-color-filled: rgb(var(--kemet-color-primary));\n    --kemet-textarea-background-color-error: rgb(var(--kemet-color-error));\n    --kemet-textarea-background-color-success: rgb(var(--kemet-color-success));\n    --kemet-textarea-background-color-warning: rgb(var(--kemet-color-warning));\n    --kemet-textarea-border-radius-rounded: 0;\n\n    position: relative;\n    display: block;\n  }\n\n  textarea {\n    color: rgb(var(--kemet-color-text));\n    display: block;\n    width: 100%;\n    padding: var(--kemet-textarea-padding);\n    border: var(--kemet-textarea-border);\n    appearance: none;\n    box-sizing: border-box;\n    background: transparent;\n    border-radius: var(--kemet-textarea-border-radius-rounded);\n  }\n\n  :host([status='error']) textarea {\n    border: var(--kemet-textarea-border-color-error);\n  }\n\n  :host([status='success']) textarea {\n    border: var(--kemet-textarea-border-color-success);\n  }\n\n  :host([status='warning']) textarea {\n    border: var(--kemet-textarea-border-color-warning);\n  }\n\n  :host([disabled]) textarea {\n    opacity: 0.5;\n  }\n\n  :host([icon-left]) textarea {\n    padding-left: var(--kemet-textarea-icon-left-padding);\n  }\n\n  :host([icon-right]) textarea {\n    padding-right: var(--kemet-textarea-icon-right-padding);\n  }\n\n  :host([rounded]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) textarea {\n    --kemet-textarea-border-radius-rounded: var(--kemet-border-radius-pill);\n  }\n\n  :host([filled]) textarea {\n    border: var(--kemet-textarea-border-filled);\n    color: var(--kemet-textarea-color-filled);\n    background-color: var(--kemet-textarea-background-color-filled);\n  }\n\n  :host([filled]) textarea::placeholder {\n    color: var(--kemet-textarea-color-filled);\n  }\n\n  :host([status='error'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-error);\n  }\n\n  :host([status='success'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-success);\n  }\n\n  :host([status='warning'][filled]) textarea {\n    background-color: var(--kemet-textarea-background-color-warning);\n  }\n`;\n"],"mappings":"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","names":[]}