carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 8.05 kB
Source Map (JSON)
{"version":3,"sources":["components/textarea/textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiB,UAAU,EAAyB,MAAM,aAAa,CAAC;AAI/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAOvE,OAAO,EAAE,yBAAyB,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;;;;;;;;QAyC9F;;WAEG;;uBAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA7CL;;;;;;WAMG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AANH;;;;;;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,4BAAqC;IAEhD;;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;IAIhB,MAAM;IA2DN,MAAM,CAAC,MAAM,MAAU;CACxB","file":"textarea.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\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 { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';\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 styles from './textarea.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as TEXTAREA_COLOR_SCHEME } from '../../globals/shared-enums';\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 = FORM_ELEMENT_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({ mode: 'open', delegatesFocus: true });\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\">\n ${this.labelText}\n </slot>\n </label>\n <div class=\"${helperTextClasses}\">\n <slot name=\"helper-text\">\n ${this.helperText}\n </slot>\n </div>\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}\"\n ></textarea>\n </div>\n <div class=\"${prefix}--form-requirement\">\n <slot name=\"validity-message\">\n ${this.validityMessage}\n </slot>\n </div>\n `;\n }\n\n static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n"]}