npm - @carbon/web-components - Versions diffs - 2.60.0 → 2.61.0 - Mend

@carbon/web-components 2.60.0 → 2.61.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/es-custom/components/text-input/text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/text-input/text-input.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\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 { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport View16 from '@carbon/icons/es/view/16.js';\nimport ViewOff16 from '@carbon/icons/es/view--off/16.js';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport {\n INPUT_COLOR_SCHEME,\n INPUT_SIZE,\n INPUT_TOOLTIP_ALIGNMENT,\n INPUT_TOOLTIP_DIRECTION,\n INPUT_TYPE,\n} from './defs';\nimport styles from './text-input.scss?lit';\n\nexport {\n INPUT_COLOR_SCHEME,\n INPUT_SIZE,\n INPUT_TOOLTIP_ALIGNMENT,\n INPUT_TOOLTIP_DIRECTION,\n INPUT_TYPE,\n};\n\n/\n Text Input element. Supports all the usual attributes for textual input types\n \n @element cds-custom-text-input\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}-text-input`)\nclass CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {\n /\n `true` if there is an AI Label.\n /\n protected _hasAILabel = false;\n\n /\n Handles `slotchange` event.\n /\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTextInput).aiLabelItem\n ) \|\|\n // remove reference to slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTextInput).slugItem\n )\n : false\n );\n\n this._hasAILabel = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n this.requestUpdate();\n }\n /\n The underlying input element\n /\n @query('input')\n protected _input!: HTMLInputElement;\n\n @query('slot[name=\"helper-text\"]')\n protected _slotHelperTextNode!: HTMLSlotElement;\n\n /\n The internal value.\n /\n protected _value = '';\n\n /\n Handles `oninput` event on the `input`.\n \n @param event The event.\n * @param event.target The event target.\n /\n protected _handleInput({ target }: Event) {\n this.value = (target as HTMLInputElement).value;\n }\n\n _handleFormdata(event: FormDataEvent) {\n const { formData } = event;\n const { disabled, name, value } = this;\n if (!disabled) {\n formData.append(name, value);\n }\n }\n\n protected _handleHelperTextSlotChange() {\n this.requestUpdate();\n }\n\n /\n May be any of the standard HTML autocomplete options\n /\n @property()\n autocomplete = '';\n\n /\n Sets the input to be focussed automatically on page load. Defaults to false\n /\n @property({ type: Boolean })\n autofocus = false;\n\n /\n Controls the disabled state of the input\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Specify whether to display the character counter\n /\n @property({ type: Boolean, attribute: 'enable-counter', reflect: true })\n enableCounter = false;\n\n /\n The helper text.\n /\n @property({ attribute: 'helper-text' })\n helperText = '';\n\n /\n Specify if the currently value is invalid.\n /\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /\n Message which is displayed if the value is invalid.\n /\n @property({ attribute: 'invalid-text' })\n invalidText = '';\n\n /\n Max character count allowed for input. This is needed in order for enableCounter to display\n /\n @property({ type: Number, attribute: 'max-count', reflect: true })\n maxCount;\n\n /\n Specify whether the control is currently in warning state\n /\n @property({ type: Boolean, reflect: true })\n warn = false;\n\n /\n Provide the text that is displayed when the control is in warning state\n /\n @property({ attribute: 'warn-text' })\n warnText = '';\n\n /\n Specify whether you want the underlying label to be visually hidden\n /\n @property({ attribute: 'hide-label', type: Boolean, reflect: true })\n hideLabel = false;\n\n /\n Generic label that will be used as the textual representation of what this field is for\n /\n @property({ attribute: 'label' })\n label = '';\n\n /\n Name for the input in the `FormData`\n /\n @property()\n name = '';\n\n /\n Pattern to validate the input against for HTML validity checking\n /\n @property()\n pattern = '';\n\n /\n Value to display when the input has an empty `value`\n /\n @property({ reflect: true })\n placeholder = '';\n\n /\n Specify if the component should be read-only\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 \"Hide password\" tooltip text on password visibility toggle\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n @property()\n hidePasswordLabel = 'Hide password';\n\n /\n \"Show password\" tooltip text on password visibility toggle\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n @property()\n showPasswordLabel = 'Show password';\n\n /\n Boolean property to render password visibility toggle\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n @property({\n type: Boolean,\n attribute: 'show-password-visibility-toggle',\n reflect: true,\n })\n showPasswordVisibilityToggle = false;\n\n /\n The input box size.\n /\n @property({ reflect: true })\n size?: INPUT_SIZE;\n\n @property({ type: Boolean })\n isFluid = false;\n\n /\n true to use the inline version.\n /\n @property({ type: Boolean, reflect: true })\n inline = false;\n\n /\n Specify the alignment of the tooltip to the icon-only button.\n * Can be one of: start, center, or end.\n /\n @property()\n tooltipAlignment = INPUT_TOOLTIP_ALIGNMENT.CENTER;\n\n /\n Specify the direction of the tooltip for icon-only buttons.\n * Can be either top, right, bottom, or left.\n /\n @property()\n tooltipDirection = INPUT_TOOLTIP_DIRECTION.BOTTOM;\n\n /\n The type of the input. Can be one of the types listed in the INPUT_TYPE enum\n /\n @property({ reflect: true })\n type = INPUT_TYPE.TEXT;\n\n /\n The validity message. If present and non-empty, this input shows the UI of its invalid state.\n /\n @property({ attribute: 'validity-message' })\n validityMessage = '';\n\n /\n The value of the input.\n /\n @property({ reflect: true })\n get value() {\n // FIXME: Figure out how to deal with TS2611\n // once we have the input we can directly query for the value\n if (this._input) {\n return this._input.value;\n }\n // but before then _value will work fine\n return this._value;\n }\n\n set value(value) {\n const oldValue = this._value;\n this._value = value;\n // make sure that lit-element updates the right properties\n this.requestUpdate('value', oldValue);\n // we set the value directly on the input (when available)\n // so that programatic manipulation updates the UI correctly\n if (this._input) {\n this._input.value = value;\n }\n }\n\n /\n Handles password visibility toggle button click\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n private togglePasswordVisibility() {\n this.type =\n this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n }\n\n render() {\n const {\n disabled,\n enableCounter,\n helperText,\n hideLabel,\n inline,\n isFluid,\n invalid,\n invalidText,\n label,\n maxCount,\n readonly,\n required,\n size,\n type,\n warn,\n warnText,\n value,\n _handleInput: handleInput,\n _hasAILabel: hasAILabel,\n _handleSlotChange: handleSlotChange,\n } = this;\n\n const invalidIcon = iconLoader(WarningFilled16, {\n class: `${prefix}--text-input__invalid-icon`,\n });\n\n const warnIcon = iconLoader(WarningAltFilled16, {\n class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`,\n });\n\n const normalizedProps: {\n disabled: boolean;\n invalid: boolean;\n warn: boolean;\n 'slot-name': string;\n 'slot-text': string;\n icon: ReturnType<typeof iconLoader>;\n } = {\n disabled: !readonly && disabled,\n invalid: !readonly && invalid,\n warn: !readonly && !invalid && warn,\n 'slot-name': '',\n 'slot-text': '',\n icon: null,\n };\n\n if (normalizedProps.invalid) {\n normalizedProps.icon = invalidIcon;\n normalizedProps['slot-name'] = 'invalid-text';\n normalizedProps['slot-text'] = invalidText;\n } else if (normalizedProps.warn) {\n normalizedProps.icon = warnIcon;\n normalizedProps['slot-name'] = 'warn-text';\n normalizedProps['slot-text'] = warnText;\n }\n\n const counterClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--text-input__label-counter`]: true,\n [`${prefix}--label--disabled`]: disabled,\n });\n\n const inputWrapperClasses = classMap({\n [`${prefix}--form-item`]: true,\n [`${prefix}--text-input-wrapper`]: true,\n [`${prefix}--text-input-wrapper--inline`]: inline,\n [`${prefix}--text-input-wrapper--readonly`]: readonly,\n [`${prefix}--text-input-wrapper--inline--invalid`]:\n inline && normalizedProps.invalid,\n });\n\n const inputClasses = classMap({\n [`${prefix}--text-input`]: true,\n [`${prefix}--text-input--invalid`]: normalizedProps.invalid,\n [`${prefix}--text-input--warning`]: normalizedProps.warn,\n [`${prefix}--text-input--${size}`]: size !== undefined, // TODO V12 - remove this class\n [`${prefix}--layout--size-${size}`]: size !== undefined,\n [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD, // TODO: deprecated, remove in v12\n });\n\n const fieldOuterWrapperClasses = classMap({\n [`${prefix}--text-input__field-outer-wrapper`]: true,\n [`${prefix}--text-input__field-outer-wrapper--inline`]: inline,\n });\n\n const fieldWrapperClasses = classMap({\n [`${prefix}--text-input__field-wrapper`]: true,\n [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,\n [`${prefix}--text-input__field-wrapper--decorator`]: hasAILabel,\n });\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--visually-hidden`]: hideLabel,\n [`${prefix}--label--disabled`]: normalizedProps.disabled,\n [`${prefix}--label--inline`]: inline,\n });\n\n const helperTextClasses = classMap({\n [`${prefix}--form__helper-text`]: true,\n [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n [`${prefix}--form__helper-text--inline`]: inline,\n });\n\n // TODO: deprecated, remove in v12\n const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;\n const passwordVisibilityIcon = passwordIsVisible\n ? iconLoader(ViewOff16, { class: `${prefix}--icon-visibility-off` })\n : iconLoader(View16, { class: `${prefix}--icon-visibility-on` });\n\n // TODO: deprecated, remove in v12\n const passwordVisibilityToggleClasses = classMap({\n [`${prefix}--text-input--password__visibility__toggle`]: true,\n [`${prefix}--btn`]: true,\n [`${prefix}--btn--icon-only`]: true,\n [`${prefix}--tooltip__trigger`]: true,\n [`${prefix}--tooltip--a11y`]: true,\n [`${prefix}--btn--disabled`]: normalizedProps.disabled,\n [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n this.tooltipAlignment,\n });\n\n // TODO: deprecated, remove in v12\n const passwordButtonLabel = html`\n <span class=\"${prefix}--assistive-text\">\n ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n </span>\n `;\n\n // TODO: deprecated, remove in v12\n const passwordVisibilityButton = () => html`\n <button\n type=\"button\"\n class=\"${passwordVisibilityToggleClasses}\"\n ?disabled=\"${normalizedProps.disabled}\"\n @click=\"${this.togglePasswordVisibility}\">\n ${!normalizedProps.disabled ? passwordButtonLabel : null}\n ${passwordVisibilityIcon}\n </button>\n `;\n\n const textCount = value?.length;\n\n const counter =\n enableCounter && maxCount\n ? html` <label class=\"${counterClasses}\">\n <slot name=\"label-text\">${textCount}/${maxCount}</slot>\n </label>`\n : null;\n\n const labelWrapper = html`<div class=\"${prefix}--text-input__label-wrapper\">\n <label class=\"${labelClasses}\">\n <slot name=\"label-text\">${label}</slot>\n </label>\n ${counter}\n </div>`;\n\n const hasHelperText =\n helperText \|\| (this._slotHelperTextNode?.assignedNodes().length ?? 0) > 0;\n\n const helper = html`<div\n class=\"${helperTextClasses}\"\n id=\"helper-text\"\n ?hidden=\"${normalizedProps.invalid \|\|\n normalizedProps.warn \|\|\n !hasHelperText}\">\n <slot\n name=\"helper-text\"\n @slotchange=\"${this._handleHelperTextSlotChange}\">\n ${helperText}\n </slot>\n </div>`;\n\n const validationMessage =\n normalizedProps.invalid \|\| normalizedProps.warn\n ? html`<div\n class=\"${prefix}--form-requirement\"\n ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n <slot name=\"${normalizedProps['slot-name']}\">\n ${normalizedProps['slot-text']}\n </slot>\n </div>`\n : null;\n\n return html`\n <div class=\"${inputWrapperClasses}\">\n ${!inline\n ? labelWrapper\n : html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n ${labelWrapper}\n </div>`}\n <div class=\"${fieldOuterWrapperClasses}\">\n <div class=\"${fieldWrapperClasses}\" ?data-invalid=\"${invalid}\">\n <input\n autocomplete=\"${this.autocomplete}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${inputClasses}\"\n ?data-invalid=\"${invalid}\"\n ?disabled=\"${disabled}\"\n ?aria-describedby=\"${hasHelperText ? 'helper-text' : undefined}\"\n id=\"input\"\n name=\"${ifNonEmpty(this.name)}\"\n pattern=\"${ifNonEmpty(this.pattern)}\"\n placeholder=\"${ifNonEmpty(this.placeholder)}\"\n ?readonly=\"${readonly}\"\n ?required=\"${required}\"\n type=\"${ifNonEmpty(type)}\"\n .value=\"${this._value}\"\n maxlength=\"${ifNonEmpty(maxCount)}\"\n @input=\"${handleInput}\" />\n ${normalizedProps.icon}\n <slot name=\"ai-label\" @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${handleSlotChange}\"></slot>\n ${this.showPasswordVisibilityToggle &&\n (type === INPUT_TYPE.PASSWORD \|\| type === INPUT_TYPE.TEXT)\n ? passwordVisibilityButton()\n : null}\n ${isFluid\n ? html`<hr class=\"${prefix}--text-input__divider\" />`\n : null}\n ${isFluid && !inline ? validationMessage : null}\n </div>\n\n ${/ Non-fluid: validation and helper outside field wrapper / ''}\n ${!isFluid && !inline ? validationMessage \|\| helper : null}\n </div>\n ${inline && !isFluid\n ? html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n ${!isFluid ? validationMessage \|\| helper : null}\n </div>`\n : null}\n </div>\n `;\n }\n\n updated() {\n this.toggleAttribute('ai-label', this._hasAILabel);\n const label = this.shadowRoot?.querySelector(\"slot[name='ai-label']\");\n\n if (label) {\n label?.classList.toggle(\n `${prefix}--slug--revert`,\n this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n );\n } else {\n this.shadowRoot\n ?.querySelector(\"slot[name='slug']\")\n ?.classList.toggle(\n `${prefix}--slug--revert`,\n this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n );\n }\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n */\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTextInput;\n"],"mappings":"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"}
1	+ {"version":3,"file":"text-input.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/text-input/text-input.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2026\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 { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport View16 from '@carbon/icons/es/view/16.js';\nimport ViewOff16 from '@carbon/icons/es/view--off/16.js';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport {\n INPUT_COLOR_SCHEME,\n INPUT_SIZE,\n INPUT_TOOLTIP_ALIGNMENT,\n INPUT_TOOLTIP_DIRECTION,\n INPUT_TYPE,\n} from './defs';\nimport styles from './text-input.scss?lit';\n\nexport {\n INPUT_COLOR_SCHEME,\n INPUT_SIZE,\n INPUT_TOOLTIP_ALIGNMENT,\n INPUT_TOOLTIP_DIRECTION,\n INPUT_TYPE,\n};\n\n/\n Text Input element. Supports all the usual attributes for textual input types\n \n @element cds-custom-text-input\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}-text-input`)\nclass CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {\n /\n `true` if there is an AI Label.\n /\n protected _hasAILabel = false;\n\n /\n Handles `slotchange` event.\n /\n protected _handleSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTextInput).aiLabelItem\n ) \|\|\n // remove reference to slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTextInput).slugItem\n )\n : false\n );\n\n this._hasAILabel = Boolean(hasContent);\n (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n this.requestUpdate();\n }\n /\n The underlying input element\n /\n @query('input')\n protected _input!: HTMLInputElement;\n\n @query('slot[name=\"helper-text\"]')\n protected _slotHelperTextNode!: HTMLSlotElement;\n\n /\n The `<slot>` element for the AI label in the shadow DOM.\n /\n @query(\"slot[name='ai-label']\")\n private _slotAILabelNode!: HTMLSlotElement;\n\n /\n The `<slot>` element for the slug in the shadow DOM.\n /\n @query(\"slot[name='slug']\")\n private _slotSlugNode!: HTMLSlotElement;\n\n /\n The internal value.\n /\n protected _value = '';\n\n /\n Handles `oninput` event on the `input`.\n \n @param event The event.\n * @param event.target The event target.\n /\n protected _handleInput({ target }: Event) {\n this.value = (target as HTMLInputElement).value;\n }\n\n /\n Handles `onchange` event on the `input`.\n \n The native `change` event is not composed, so it stops at the shadow root\n * and never reaches listeners on the host. This re-emits it as a composed event so\n * consumers can listen for `change` on `<cds-custom-text-input>` exactly as they\n * would on a native `<input>`.\n /\n protected _handleChange() {\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n _handleFormdata(event: FormDataEvent) {\n const { formData } = event;\n const { disabled, name, value } = this;\n if (!disabled) {\n formData.append(name, value);\n }\n }\n\n protected _handleHelperTextSlotChange() {\n this.requestUpdate();\n }\n\n /\n May be any of the standard HTML autocomplete options\n /\n @property()\n autocomplete = '';\n\n /\n Sets the input to be focussed automatically on page load. Defaults to false\n /\n @property({ type: Boolean })\n autofocus = false;\n\n /\n Controls the disabled state of the input\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Specify whether to display the character counter\n /\n @property({ type: Boolean, attribute: 'enable-counter', reflect: true })\n enableCounter = false;\n\n /\n The helper text.\n /\n @property({ attribute: 'helper-text' })\n helperText = '';\n\n /\n Specify if the currently value is invalid.\n /\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n /\n Message which is displayed if the value is invalid.\n /\n @property({ attribute: 'invalid-text' })\n invalidText = '';\n\n /\n Max character count allowed for input. This is needed in order for enableCounter to display\n /\n @property({ type: Number, attribute: 'max-count', reflect: true })\n maxCount;\n\n /\n Specify whether the control is currently in warning state\n /\n @property({ type: Boolean, reflect: true })\n warn = false;\n\n /\n Provide the text that is displayed when the control is in warning state\n /\n @property({ attribute: 'warn-text' })\n warnText = '';\n\n /\n Specify whether you want the underlying label to be visually hidden\n /\n @property({ attribute: 'hide-label', type: Boolean, reflect: true })\n hideLabel = false;\n\n /\n Generic label that will be used as the textual representation of what this field is for\n /\n @property({ attribute: 'label' })\n label = '';\n\n /\n Name for the input in the `FormData`\n /\n @property()\n name = '';\n\n /\n Pattern to validate the input against for HTML validity checking\n /\n @property()\n pattern = '';\n\n /\n Value to display when the input has an empty `value`\n /\n @property({ reflect: true })\n placeholder = '';\n\n /\n Specify if the component should be read-only\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 \"Hide password\" tooltip text on password visibility toggle\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n @property()\n hidePasswordLabel = 'Hide password';\n\n /\n \"Show password\" tooltip text on password visibility toggle\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n @property()\n showPasswordLabel = 'Show password';\n\n /\n Boolean property to render password visibility toggle\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n @property({\n type: Boolean,\n attribute: 'show-password-visibility-toggle',\n reflect: true,\n })\n showPasswordVisibilityToggle = false;\n\n /\n The input box size.\n /\n @property({ reflect: true })\n size?: INPUT_SIZE;\n\n @property({ type: Boolean })\n isFluid = false;\n\n /\n true to use the inline version.\n /\n @property({ type: Boolean, reflect: true })\n inline = false;\n\n /\n Specify the alignment of the tooltip to the icon-only button.\n * Can be one of: start, center, or end.\n /\n @property()\n tooltipAlignment = INPUT_TOOLTIP_ALIGNMENT.CENTER;\n\n /\n Specify the direction of the tooltip for icon-only buttons.\n * Can be either top, right, bottom, or left.\n /\n @property()\n tooltipDirection = INPUT_TOOLTIP_DIRECTION.BOTTOM;\n\n /\n The type of the input. Can be one of the types listed in the INPUT_TYPE enum\n /\n @property({ reflect: true })\n type = INPUT_TYPE.TEXT;\n\n /\n The validity message. If present and non-empty, this input shows the UI of its invalid state.\n /\n @property({ attribute: 'validity-message' })\n validityMessage = '';\n\n /\n The value of the input.\n /\n @property({ reflect: true })\n get value() {\n // FIXME: Figure out how to deal with TS2611\n // once we have the input we can directly query for the value\n if (this._input) {\n return this._input.value;\n }\n // but before then _value will work fine\n return this._value;\n }\n\n set value(value) {\n const oldValue = this._value;\n this._value = value;\n // make sure that lit-element updates the right properties\n this.requestUpdate('value', oldValue);\n // we set the value directly on the input (when available)\n // so that programatic manipulation updates the UI correctly\n if (this._input) {\n this._input.value = value;\n }\n }\n\n /\n Handles password visibility toggle button click\n \n @deprecated will be removed in the next major version, use `cds-custom-password-input` instead\n /\n private togglePasswordVisibility() {\n this.type =\n this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n }\n\n render() {\n const {\n disabled,\n enableCounter,\n helperText,\n hideLabel,\n inline,\n isFluid,\n invalid,\n invalidText,\n label,\n maxCount,\n readonly,\n required,\n size,\n type,\n warn,\n warnText,\n value,\n _handleInput: handleInput,\n _handleChange: handleChange,\n _hasAILabel: hasAILabel,\n _handleSlotChange: handleSlotChange,\n } = this;\n\n const invalidIcon = iconLoader(WarningFilled16, {\n class: `${prefix}--text-input__invalid-icon`,\n });\n\n const warnIcon = iconLoader(WarningAltFilled16, {\n class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`,\n });\n\n const normalizedProps: {\n disabled: boolean;\n invalid: boolean;\n warn: boolean;\n 'slot-name': string;\n 'slot-text': string;\n icon: ReturnType<typeof iconLoader>;\n } = {\n disabled: !readonly && disabled,\n invalid: !readonly && invalid,\n warn: !readonly && !invalid && warn,\n 'slot-name': '',\n 'slot-text': '',\n icon: null,\n };\n\n if (normalizedProps.invalid) {\n normalizedProps.icon = invalidIcon;\n normalizedProps['slot-name'] = 'invalid-text';\n normalizedProps['slot-text'] = invalidText;\n } else if (normalizedProps.warn) {\n normalizedProps.icon = warnIcon;\n normalizedProps['slot-name'] = 'warn-text';\n normalizedProps['slot-text'] = warnText;\n }\n\n const counterClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--text-input__label-counter`]: true,\n [`${prefix}--label--disabled`]: disabled,\n });\n\n const inputWrapperClasses = classMap({\n [`${prefix}--form-item`]: true,\n [`${prefix}--text-input-wrapper`]: true,\n [`${prefix}--text-input-wrapper--inline`]: inline,\n [`${prefix}--text-input-wrapper--readonly`]: readonly,\n [`${prefix}--text-input-wrapper--inline--invalid`]:\n inline && normalizedProps.invalid,\n });\n\n const inputClasses = classMap({\n [`${prefix}--text-input`]: true,\n [`${prefix}--text-input--invalid`]: normalizedProps.invalid,\n [`${prefix}--text-input--warning`]: normalizedProps.warn,\n [`${prefix}--text-input--${size}`]: size !== undefined, // TODO V12 - remove this class\n [`${prefix}--layout--size-${size}`]: size !== undefined,\n [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD, // TODO: deprecated, remove in v12\n });\n\n const fieldOuterWrapperClasses = classMap({\n [`${prefix}--text-input__field-outer-wrapper`]: true,\n [`${prefix}--text-input__field-outer-wrapper--inline`]: inline,\n });\n\n const fieldWrapperClasses = classMap({\n [`${prefix}--text-input__field-wrapper`]: true,\n [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,\n [`${prefix}--text-input__field-wrapper--decorator`]: hasAILabel,\n });\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--visually-hidden`]: hideLabel,\n [`${prefix}--label--disabled`]: normalizedProps.disabled,\n [`${prefix}--label--inline`]: inline,\n });\n\n const helperTextClasses = classMap({\n [`${prefix}--form__helper-text`]: true,\n [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n [`${prefix}--form__helper-text--inline`]: inline,\n });\n\n // TODO: deprecated, remove in v12\n const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;\n const passwordVisibilityIcon = passwordIsVisible\n ? iconLoader(ViewOff16, { class: `${prefix}--icon-visibility-off` })\n : iconLoader(View16, { class: `${prefix}--icon-visibility-on` });\n\n // TODO: deprecated, remove in v12\n const passwordVisibilityToggleClasses = classMap({\n [`${prefix}--text-input--password__visibility__toggle`]: true,\n [`${prefix}--btn`]: true,\n [`${prefix}--btn--icon-only`]: true,\n [`${prefix}--tooltip__trigger`]: true,\n [`${prefix}--tooltip--a11y`]: true,\n [`${prefix}--btn--disabled`]: normalizedProps.disabled,\n [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n this.tooltipAlignment,\n });\n\n // TODO: deprecated, remove in v12\n const passwordButtonLabel = html`\n <span class=\"${prefix}--assistive-text\">\n ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n </span>\n `;\n\n // TODO: deprecated, remove in v12\n const passwordVisibilityButton = () => html`\n <button\n type=\"button\"\n class=\"${passwordVisibilityToggleClasses}\"\n ?disabled=\"${normalizedProps.disabled}\"\n @click=\"${this.togglePasswordVisibility}\">\n ${!normalizedProps.disabled ? passwordButtonLabel : null}\n ${passwordVisibilityIcon}\n </button>\n `;\n\n const textCount = value?.length;\n\n const counter =\n enableCounter && maxCount\n ? html` <label class=\"${counterClasses}\">\n <slot name=\"label-text\">${textCount}/${maxCount}</slot>\n </label>`\n : null;\n\n const labelWrapper = html`<div class=\"${prefix}--text-input__label-wrapper\">\n <label class=\"${labelClasses}\" for=\"input\">\n <slot name=\"label-text\">${label}</slot>\n </label>\n ${counter}\n </div>`;\n\n const hasHelperText =\n helperText \|\| (this._slotHelperTextNode?.assignedNodes().length ?? 0) > 0;\n\n const helper = html`<div\n class=\"${helperTextClasses}\"\n id=\"helper-text\"\n ?hidden=\"${normalizedProps.invalid \|\|\n normalizedProps.warn \|\|\n !hasHelperText}\">\n <slot\n name=\"helper-text\"\n @slotchange=\"${this._handleHelperTextSlotChange}\">\n ${helperText}\n </slot>\n </div>`;\n\n const validationMessage =\n normalizedProps.invalid \|\| normalizedProps.warn\n ? html`<div\n class=\"${prefix}--form-requirement\"\n id=\"error-text\"\n ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n <slot name=\"${normalizedProps['slot-name']}\">\n ${normalizedProps['slot-text']}\n </slot>\n </div>`\n : null;\n\n // Mirrors `cds-custom-select`: the validation message takes precedence over the\n // helper text, which is hidden while the input is invalid or in warning.\n let describedBy: string \| undefined;\n if (normalizedProps.invalid \|\| normalizedProps.warn) {\n describedBy = 'error-text';\n } else if (hasHelperText) {\n describedBy = 'helper-text';\n }\n\n return html`\n <div class=\"${inputWrapperClasses}\">\n ${!inline\n ? labelWrapper\n : html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n ${labelWrapper}\n </div>`}\n <div class=\"${fieldOuterWrapperClasses}\">\n <div class=\"${fieldWrapperClasses}\" ?data-invalid=\"${invalid}\">\n <input\n autocomplete=\"${this.autocomplete}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${inputClasses}\"\n ?data-invalid=\"${invalid}\"\n ?disabled=\"${disabled}\"\n aria-describedby=\"${ifDefined(describedBy)}\"\n id=\"input\"\n name=\"${ifNonEmpty(this.name)}\"\n pattern=\"${ifNonEmpty(this.pattern)}\"\n placeholder=\"${ifNonEmpty(this.placeholder)}\"\n ?readonly=\"${readonly}\"\n ?required=\"${required}\"\n type=\"${ifNonEmpty(type)}\"\n .value=\"${this._value}\"\n maxlength=\"${ifNonEmpty(maxCount)}\"\n @input=\"${handleInput}\"\n @change=\"${handleChange}\" />\n ${normalizedProps.icon}\n <slot name=\"ai-label\" @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${handleSlotChange}\"></slot>\n ${this.showPasswordVisibilityToggle &&\n (type === INPUT_TYPE.PASSWORD \|\| type === INPUT_TYPE.TEXT)\n ? passwordVisibilityButton()\n : null}\n ${isFluid\n ? html`<hr class=\"${prefix}--text-input__divider\" />`\n : null}\n ${isFluid && !inline ? validationMessage : null}\n </div>\n\n ${/ Non-fluid: validation and helper outside field wrapper / ''}\n ${!isFluid && !inline ? validationMessage \|\| helper : null}\n </div>\n ${inline && !isFluid\n ? html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n ${!isFluid ? validationMessage \|\| helper : null}\n </div>`\n : null}\n </div>\n `;\n }\n\n updated() {\n this.toggleAttribute('ai-label', this._hasAILabel);\n const label = this._slotAILabelNode;\n\n if (label) {\n label?.classList.toggle(\n `${prefix}--slug--revert`,\n this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n );\n } else {\n this._slotSlugNode?.classList.toggle(\n `${prefix}--slug--revert`,\n this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n );\n }\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n */\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTextInput;\n"],"mappings":"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"}

package/es-custom/components/textarea/textarea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAKpD;;;;;;;GAOG;AACH,cACM,WAAY,SAAQ,YAAY;IACpC;;;OAGG;IACH,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,aAAa;IAgBvC;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,cAAc;IA+BtC;;;;;OAKG;IACH,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAIxC;;OAEG;IAEH,IAAI,MAAC;IAEL;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAYH,WAAW,EAAE,WAAW,GAAG,MAAM,CAAe;IAEhD;;OAEG;IAEH,EAAE,SAAM;IAER;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAK;IAET;;;OAGG;IAEH,SAAS,CAAC,SAAS,EAAG,mBAAmB,CAAC;IAE1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAA0C;IAElE;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,MAAM;~~IAmIN~~,OAAO,IAAI,IAAI;IAyBf;;;OAGG;IACH,OAAO,CAAC,eAAe;IAqBvB,oBAAoB;IAKpB,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAKpD;;;;;;;GAOG;AACH,cACM,WAAY,SAAQ,YAAY;IACpC;;;OAGG;IACH,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,aAAa;IAgBvC;;;;;;OAMG;IACH,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,cAAc;IA+BtC;;;;;OAKG;IACH,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAIxC;;OAEG;IAEH,IAAI,MAAC;IAEL;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAYH,WAAW,EAAE,WAAW,GAAG,MAAM,CAAe;IAEhD;;OAEG;IAEH,EAAE,SAAM;IAER;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAK;IAET;;;OAGG;IAEH,SAAS,CAAC,SAAS,EAAG,mBAAmB,CAAC;IAE1C;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAA0C;IAElE;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,MAAM;IAoIN,OAAO,IAAI,IAAI;IAyBf;;;OAGG;IACH,OAAO,CAAC,eAAe;IAqBvB,oBAAoB;IAKpB,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC"}

package/es-custom/components/textarea/textarea.js CHANGED Viewed

@@ -175,7 +175,8 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
           maxlength="${this.counterMode === "character" ? if_non_empty_default(this.maxCount) : ""}"
           @keydown="${this._onKeyDown}"
           @paste="${this._onPaste}"
-          @input="${this._handleInput}"></textarea>
+          @input="${this._handleInput}"
+          @change="${this._handleChange}"></textarea>
         <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
         <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
         ${this.isFluid ? html`

package/es-custom/components/textarea/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","names":["CDSTextInput","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/textarea/textarea.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2025\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 { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CDSTextInput from '../text-input/text-input';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/\n Text area.\n \n @element cds-custom-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`)\nclass CDSTextarea extends CDSTextInput {\n /\n Manually handles maxCount for counterMode = 'word'\n * @param event The keyboard event.\n /\n protected _onKeyDown(evt: KeyboardEvent) {\n if (!this.disabled && this.enableCounter && this.counterMode === 'word') {\n const currentWordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n if (\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === ' ') \|\|\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === 'Enter')\n ) {\n evt.preventDefault();\n }\n }\n }\n\n /\n Handles `onPaste` event on the `<input>`.\n * Manually handles maxCount for counterMode = 'word' when\n * the user is pasting text\n \n @param event The clipboard event.\n /\n protected _onPaste(evt: ClipboardEvent) {\n if (\n this.counterMode === 'word' &&\n this.enableCounter &&\n typeof this.maxCount !== 'undefined'\n ) {\n const existingWords: string[] =\n this._textarea.value.match(/\\p{L}+/gu) \|\| [];\n const pastedWords: string[] =\n evt.clipboardData?.getData('Text').match(/\\p{L}+/gu) \|\| [];\n\n const totalWords = existingWords.length + pastedWords.length;\n\n if (totalWords > this.maxCount) {\n evt.preventDefault();\n\n const allowedWords = existingWords\n .concat(pastedWords)\n .slice(0, this.maxCount);\n\n this._textarea.value = allowedWords.join(' ');\n this._textarea.dispatchEvent(\n new InputEvent('input', {\n inputType: 'insertFromPaste',\n data: allowedWords.join(' '),\n bubbles: true,\n })\n );\n }\n }\n }\n /\n Handles `oninput` event on the `<input>`.\n \n @param event The event.\n * @param event.target The event target.\n /\n protected _handleInput({ target }: Event) {\n this.value = (target as HTMLTextAreaElement).value;\n }\n\n /\n The number of columns for the textarea to show by default\n /\n @property({ type: Number })\n cols;\n\n /\n Specify whether the textarea is fluid or not\n /\n @property({ type: Boolean })\n isFluid = false;\n\n /\n Specify the method used for calculating the counter number\n /\n @property({\n type: String,\n reflect: true,\n hasChanged(newVal: string, oldVal: string) {\n if ((newVal === 'character' \|\| newVal === 'word') && newVal !== oldVal) {\n return true;\n }\n return false;\n },\n attribute: 'counter-mode',\n })\n counterMode: 'character' \| 'word' = 'character';\n\n /\n ID to link the `label` and `textarea`\n /\n @property()\n id = '';\n\n /\n Pattern to validate the textarea against for HTML validity checking\n /\n @property()\n pattern = '';\n\n /\n Boolean property to set the required status\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n The number of rows for the textarea to show by default\n /\n @property()\n rows = 4;\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 /\n The previous counterMode selected. This lets the counterMode state update\n * when the user toggles between both modes.\n /\n private _prevCounterMode: 'character' \| 'word' = this.counterMode;\n\n /\n Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when\n * cols is updated\n /\n private _resizeObserver?: ResizeObserver;\n\n render() {\n const { enableCounter, maxCount } = this;\n\n const textCount = this.value?.length ?? 0;\n const wordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n\n const invalidIcon = iconLoader(WarningFilled16, {\n class: `${prefix}--text-area__invalid-icon`,\n });\n\n const warnIcon = iconLoader(WarningAltFilled16, {\n class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,\n });\n\n const textareaClasses = classMap({\n [`${prefix}--text-area`]: true,\n [`${prefix}--text-area--warn`]: this.warn,\n [`${prefix}--text-area--invalid`]: this.invalid,\n [`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel,\n });\n\n const textareaWrapperClasses = classMap({\n [`${prefix}--text-area__wrapper`]: true,\n [`${prefix}--text-area__wrapper--cols`]: this.cols,\n [`${prefix}--text-area__wrapper--warn`]: this.warn,\n [`${prefix}--text-area__wrapper--readonly`]: this.readonly,\n });\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--visually-hidden`]: this.hideLabel,\n [`${prefix}--label--disabled`]: this.disabled,\n });\n\n const counterClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: this.disabled,\n [`${prefix}--text-area__label-counter`]: true,\n });\n\n const helperTextClasses = classMap({\n [`${prefix}--form__helper-text`]: true,\n [`${prefix}--form__helper-text--disabled`]: this.disabled,\n });\n\n const counter =\n enableCounter && maxCount\n ? html` <label class=\"${counterClasses}\">\n <slot name=\"label-text\"\n >${this.counterMode === 'word'\n ? wordCount\n : textCount}/${maxCount}</slot\n >\n </label>`\n : null;\n\n const icon = () => {\n if (this.invalid) {\n return invalidIcon;\n } else if (this.warn && !this.invalid) {\n return warnIcon;\n }\n return null;\n };\n\n const helper = html`\n <div class=\"${helperTextClasses}\" id=\"helper-text\">\n <slot name=\"helper-text\">${this.helperText}</slot>\n </div>\n `;\n\n const normalizedProps = {\n invalid: this.invalid,\n warn: this.warn,\n 'slot-name': this.invalid ? 'invalid-text' : 'warn-text',\n 'slot-text': this.invalid ? this.invalidText : this.warnText,\n };\n\n const validationMessage = html`\n <div\n class=\"${prefix}--form-requirement\"\n ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n <slot name=\"${normalizedProps['slot-name']}\">\n ${normalizedProps['slot-text']} ${this.isFluid ? icon() : null}\n </slot>\n </div>\n `;\n\n return html`\n <div class=\"${prefix}--text-area__label-wrapper\">\n <label class=\"${labelClasses}\" for=\"input\">\n <slot name=\"label-text\"> ${this.label} </slot>\n </label>\n ${counter}\n </div>\n <div class=\"${textareaWrapperClasses}\" ?data-invalid=\"${this.invalid}\">\n ${!this.isFluid ? icon() : null}\n <textarea\n autocomplete=\"${this.autocomplete}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${textareaClasses}\"\n cols=\"${ifDefined(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=\"${ifDefined(this.rows)}\"\n .value=\"${this.value}\"\n maxlength=\"${this.counterMode === 'character'\n ? ifNonEmpty(this.maxCount)\n : ''}\"\n @keydown=\"${this._onKeyDown}\"\n @paste=\"${this._onPaste}\"\n @input=\"${this._handleInput}\"></textarea>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.isFluid\n ? html`\n <hr class=\"${prefix}--text-area__divider\" />\n ${validationMessage}\n `\n : null}\n </div>\n ${/ Non-fluid: validation and helper outside field wrapper / ''}\n ${!this.isFluid ? html` ${helper} ${validationMessage} ` : null}\n `;\n }\n updated(): void {\n super.updated?.();\n if (this.counterMode !== this._prevCounterMode) {\n const textarea = this._textarea;\n if (textarea) {\n if (this.counterMode === 'character') {\n textarea.setAttribute('maxlength', String(this.maxCount));\n } else {\n textarea.removeAttribute('maxlength');\n }\n }\n this._prevCounterMode = this.counterMode;\n }\n\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n if (!wrapper) return;\n\n this._resizeObserver = new ResizeObserver(() => {\n this._measureWrapper();\n });\n this._resizeObserver.observe(wrapper);\n }\n\n /\n Measures the width of the wrapper and applies that to the max-width of the\n * helper-text and invalid/warn-text\n */\n private _measureWrapper() {\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n\n const wrapperWidth = wrapper?.scrollWidth;\n\n const helper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form__helper-text`\n );\n const requirement = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form-requirement`\n );\n [helper, requirement].forEach((el) => {\n if (el) {\n el.style.maxWidth = `${wrapperWidth}px`;\n el.style.overflowWrap = 'break-word';\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._resizeObserver?.disconnect();\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}
1	+ {"version":3,"file":"textarea.js","names":["CDSTextInput","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/textarea/textarea.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2019, 2025\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 { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CDSTextInput from '../text-input/text-input';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/\n Text area.\n \n @element cds-custom-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`)\nclass CDSTextarea extends CDSTextInput {\n /\n Manually handles maxCount for counterMode = 'word'\n * @param event The keyboard event.\n /\n protected _onKeyDown(evt: KeyboardEvent) {\n if (!this.disabled && this.enableCounter && this.counterMode === 'word') {\n const currentWordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n if (\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === ' ') \|\|\n (this.maxCount &&\n currentWordCount >= this.maxCount &&\n evt.key === 'Enter')\n ) {\n evt.preventDefault();\n }\n }\n }\n\n /\n Handles `onPaste` event on the `<input>`.\n * Manually handles maxCount for counterMode = 'word' when\n * the user is pasting text\n \n @param event The clipboard event.\n /\n protected _onPaste(evt: ClipboardEvent) {\n if (\n this.counterMode === 'word' &&\n this.enableCounter &&\n typeof this.maxCount !== 'undefined'\n ) {\n const existingWords: string[] =\n this._textarea.value.match(/\\p{L}+/gu) \|\| [];\n const pastedWords: string[] =\n evt.clipboardData?.getData('Text').match(/\\p{L}+/gu) \|\| [];\n\n const totalWords = existingWords.length + pastedWords.length;\n\n if (totalWords > this.maxCount) {\n evt.preventDefault();\n\n const allowedWords = existingWords\n .concat(pastedWords)\n .slice(0, this.maxCount);\n\n this._textarea.value = allowedWords.join(' ');\n this._textarea.dispatchEvent(\n new InputEvent('input', {\n inputType: 'insertFromPaste',\n data: allowedWords.join(' '),\n bubbles: true,\n })\n );\n }\n }\n }\n /\n Handles `oninput` event on the `<input>`.\n \n @param event The event.\n * @param event.target The event target.\n /\n protected _handleInput({ target }: Event) {\n this.value = (target as HTMLTextAreaElement).value;\n }\n\n /\n The number of columns for the textarea to show by default\n /\n @property({ type: Number })\n cols;\n\n /\n Specify whether the textarea is fluid or not\n /\n @property({ type: Boolean })\n isFluid = false;\n\n /\n Specify the method used for calculating the counter number\n /\n @property({\n type: String,\n reflect: true,\n hasChanged(newVal: string, oldVal: string) {\n if ((newVal === 'character' \|\| newVal === 'word') && newVal !== oldVal) {\n return true;\n }\n return false;\n },\n attribute: 'counter-mode',\n })\n counterMode: 'character' \| 'word' = 'character';\n\n /\n ID to link the `label` and `textarea`\n /\n @property()\n id = '';\n\n /\n Pattern to validate the textarea against for HTML validity checking\n /\n @property()\n pattern = '';\n\n /\n Boolean property to set the required status\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n The number of rows for the textarea to show by default\n /\n @property()\n rows = 4;\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 /\n The previous counterMode selected. This lets the counterMode state update\n * when the user toggles between both modes.\n /\n private _prevCounterMode: 'character' \| 'word' = this.counterMode;\n\n /\n Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when\n * cols is updated\n /\n private _resizeObserver?: ResizeObserver;\n\n render() {\n const { enableCounter, maxCount } = this;\n\n const textCount = this.value?.length ?? 0;\n const wordCount = this.value?.match(/\\p{L}+/gu)?.length \|\| 0;\n\n const invalidIcon = iconLoader(WarningFilled16, {\n class: `${prefix}--text-area__invalid-icon`,\n });\n\n const warnIcon = iconLoader(WarningAltFilled16, {\n class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,\n });\n\n const textareaClasses = classMap({\n [`${prefix}--text-area`]: true,\n [`${prefix}--text-area--warn`]: this.warn,\n [`${prefix}--text-area--invalid`]: this.invalid,\n [`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel,\n });\n\n const textareaWrapperClasses = classMap({\n [`${prefix}--text-area__wrapper`]: true,\n [`${prefix}--text-area__wrapper--cols`]: this.cols,\n [`${prefix}--text-area__wrapper--warn`]: this.warn,\n [`${prefix}--text-area__wrapper--readonly`]: this.readonly,\n });\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--visually-hidden`]: this.hideLabel,\n [`${prefix}--label--disabled`]: this.disabled,\n });\n\n const counterClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: this.disabled,\n [`${prefix}--text-area__label-counter`]: true,\n });\n\n const helperTextClasses = classMap({\n [`${prefix}--form__helper-text`]: true,\n [`${prefix}--form__helper-text--disabled`]: this.disabled,\n });\n\n const counter =\n enableCounter && maxCount\n ? html` <label class=\"${counterClasses}\">\n <slot name=\"label-text\"\n >${this.counterMode === 'word'\n ? wordCount\n : textCount}/${maxCount}</slot\n >\n </label>`\n : null;\n\n const icon = () => {\n if (this.invalid) {\n return invalidIcon;\n } else if (this.warn && !this.invalid) {\n return warnIcon;\n }\n return null;\n };\n\n const helper = html`\n <div class=\"${helperTextClasses}\" id=\"helper-text\">\n <slot name=\"helper-text\">${this.helperText}</slot>\n </div>\n `;\n\n const normalizedProps = {\n invalid: this.invalid,\n warn: this.warn,\n 'slot-name': this.invalid ? 'invalid-text' : 'warn-text',\n 'slot-text': this.invalid ? this.invalidText : this.warnText,\n };\n\n const validationMessage = html`\n <div\n class=\"${prefix}--form-requirement\"\n ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n <slot name=\"${normalizedProps['slot-name']}\">\n ${normalizedProps['slot-text']} ${this.isFluid ? icon() : null}\n </slot>\n </div>\n `;\n\n return html`\n <div class=\"${prefix}--text-area__label-wrapper\">\n <label class=\"${labelClasses}\" for=\"input\">\n <slot name=\"label-text\"> ${this.label} </slot>\n </label>\n ${counter}\n </div>\n <div class=\"${textareaWrapperClasses}\" ?data-invalid=\"${this.invalid}\">\n ${!this.isFluid ? icon() : null}\n <textarea\n autocomplete=\"${this.autocomplete}\"\n ?autofocus=\"${this.autofocus}\"\n class=\"${textareaClasses}\"\n cols=\"${ifDefined(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=\"${ifDefined(this.rows)}\"\n .value=\"${this.value}\"\n maxlength=\"${this.counterMode === 'character'\n ? ifNonEmpty(this.maxCount)\n : ''}\"\n @keydown=\"${this._onKeyDown}\"\n @paste=\"${this._onPaste}\"\n @input=\"${this._handleInput}\"\n @change=\"${this._handleChange}\"></textarea>\n <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.isFluid\n ? html`\n <hr class=\"${prefix}--text-area__divider\" />\n ${validationMessage}\n `\n : null}\n </div>\n ${/ Non-fluid: validation and helper outside field wrapper / ''}\n ${!this.isFluid ? html` ${helper} ${validationMessage} ` : null}\n `;\n }\n updated(): void {\n super.updated?.();\n if (this.counterMode !== this._prevCounterMode) {\n const textarea = this._textarea;\n if (textarea) {\n if (this.counterMode === 'character') {\n textarea.setAttribute('maxlength', String(this.maxCount));\n } else {\n textarea.removeAttribute('maxlength');\n }\n }\n this._prevCounterMode = this.counterMode;\n }\n\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n if (!wrapper) return;\n\n this._resizeObserver = new ResizeObserver(() => {\n this._measureWrapper();\n });\n this._resizeObserver.observe(wrapper);\n }\n\n /\n Measures the width of the wrapper and applies that to the max-width of the\n * helper-text and invalid/warn-text\n */\n private _measureWrapper() {\n const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--text-area__wrapper`\n );\n\n const wrapperWidth = wrapper?.scrollWidth;\n\n const helper = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form__helper-text`\n );\n const requirement = this.shadowRoot?.querySelector<HTMLElement>(\n `.${prefix}--form-requirement`\n );\n [helper, requirement].forEach((el) => {\n if (el) {\n el.style.maxWidth = `${wrapperWidth}px`;\n el.style.overflowWrap = 'break-word';\n }\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback?.();\n this._resizeObserver?.disconnect();\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}