dap-design-system 0.61.0 → 0.61.1
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.
- package/dist/components/textarea/textarea.component.js +2 -2
- package/dist/components/textarea/textarea.component.js.map +1 -1
- package/dist/manifest/types/vue/index.d.ts +610 -610
- package/dist/manifest/vscode.html-custom-data.json +562 -562
- package/dist/manifest/web-types.json +1049 -1049
- package/dist/react/index.d.ts +20 -20
- package/dist/react-types.ts +21 -21
- package/dist/react.js +184 -184
- package/package.json +1 -1
|
@@ -58,10 +58,10 @@ const i = (a = class extends C {
|
|
|
58
58
|
super.attributeChangedCallback(t, e, n), t === "value" && this.input && (this.input.value = n);
|
|
59
59
|
}
|
|
60
60
|
onInput() {
|
|
61
|
-
|
|
61
|
+
this.count = this.input.value.length, this.value = this.input.value, super.onInput(), this.emit("dds-count-change", { value: this.count }), this.setValidity();
|
|
62
62
|
}
|
|
63
63
|
onChange() {
|
|
64
|
-
|
|
64
|
+
this.count = this.input.value.length, this.value = this.input.value, super.onChange(), this.emit("dds-count-change", { value: this.count }), this.setValidity();
|
|
65
65
|
}
|
|
66
66
|
onSelect(t) {
|
|
67
67
|
const e = t.target, n = e.value.substring(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n static tagName = 'dap-ds-textarea'\n\n static dependencies = {\n 'dap-ds-typography': DapDSTypography,\n 'dap-ds-feedback': DapDSFeedback,\n }\n\n private static nextId = 0\n\n private readonly inputId: string\n private readonly labelId: string\n private readonly descriptionId: string\n private readonly counterId: string\n\n /**@ignore */\n @query('.textarea__control') input!: HTMLTextAreaElement\n /** Hide character counter. */\n @property({ type: Boolean, reflect: true }) hideCounter = false\n /** The minimum length of the textarea. */\n @property({ type: Number }) minlength?: number\n /** The maximum length of the textarea. */\n @property({ type: Number }) maxlength?: number\n /** The number of rows in the textarea. */\n @property({ type: Number }) rows?: number = 6\n /** The number of columns in the textarea. */\n @property({ type: Number }) cols?: number\n /** The placeholder of the textarea. */\n @property() placeholder = ''\n /** Indicates how the control should wrap the value for form submission. */\n @property() wrap: 'hard' | 'soft'\n\n /**@ignore */\n @state() count = 0\n\n static readonly styles = unsafeCSS(styles)\n\n constructor() {\n super()\n DapDSTextarea.nextId++\n const uniqueSuffix =\n typeof crypto !== 'undefined' && crypto.randomUUID\n ? crypto.randomUUID().slice(0, 8)\n : Date.now().toString(36)\n this.inputId = `input-${DapDSTextarea.nextId}-${uniqueSuffix}`\n this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n this.descriptionId = `description-${DapDSTextarea.nextId}-${uniqueSuffix}`\n this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n // Initialize the feedbackId from FeedbackMixin\n this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n }\n\n get focusElement() {\n return this.input\n }\n\n private _handleSlotChange(event: Event) {\n const target = event?.target as HTMLInputElement\n target.setAttribute('slot', 'icon')\n }\n\n async connectedCallback() {\n super.connectedCallback()\n\n await this.updateComplete\n this.input.value = this.value ?? ''\n this.count = this.input.value.length\n }\n\n attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n super.attributeChangedCallback(name, oldValue, newValue)\n\n if (name === 'value' && this.input) {\n this.input.value = newValue\n }\n }\n\n onInput() {\n super.onInput()\n\n this.count = this.input.value.length\n this.value = this.input.value\n this.emit('dds-count-change', { value: this.count })\n\n this.setValidity()\n }\n\n onChange() {\n super.onChange()\n\n this.count = this.input.value.length\n this.value = this.input.value\n this.emit('dds-count-change', { value: this.count })\n\n this.setValidity()\n }\n\n onSelect(e: Event) {\n const target = e.target as HTMLTextAreaElement\n const selection = target.value.substring(\n target.selectionStart,\n target.selectionEnd,\n )\n this.emit('dds-select', { value: selection })\n }\n\n formResetCallback() {\n this.internals.setValidity({})\n this.internals.setFormValue(this.defaultValue || '')\n this.value = this.defaultValue || ''\n this.input.value = this.defaultValue || ''\n }\n\n handleInvalid(event: Event) {\n event.preventDefault()\n }\n\n private _renderFooter() {\n const counter = !this.hideCounter\n ? html`\n <dap-ds-typography\n part=\"counter\"\n exportparts=\"base: counter-base\"\n class=${clsx('textarea__counter', {\n 'textarea__counter--error': this.status === 'error',\n })}\n variant=\"caption\"\n size=\"${this.size as CommonFormElementSize}\"\n id=${this.counterId}\n aria-hidden=\"true\">\n ${this.count}\n </dap-ds-typography>\n </div>\n `\n : nothing\n\n return html`\n <div class=\"textarea__footer\" part=\"footer\">\n ${this.feedback && this._renderFeedback()}\n <span part=\"counter-container\">${counter}</span>\n </div>\n `\n }\n\n render() {\n return this.renderLabel(\n this.labelId,\n html`\n <div\n part=\"base\"\n class=${clsx(\n 'textarea',\n `textarea--${this.effectiveSize}`,\n { 'textarea--success': this.status === 'success' },\n { 'textarea--error': this.status === 'error' },\n { 'textarea--disabled': this.disabled },\n { 'textarea--readonly': this.readonly },\n { 'textarea--optional': this.optional },\n )}>\n <textarea\n id=${this.inputId}\n part=\"input\"\n class=\"textarea__control\"\n aria-disabled=${this.disabled}\n aria-describedby=\"${ifDefined(\n this.description ? this.descriptionId : nothing,\n )} ${this.feedback ? this.feedbackId : nothing}\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n wrap=${ifDefined(this.wrap)}\n cols=${ifDefined(this.cols)}\n rows=${ifDefined(this.rows)}\n placeholder=${ifDefined(this.placeholder)}\n ?autofocus=${this.autofocus}\n ?value=${this.value}\n aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n @input=${this.onInput}\n @keydown=${this.onKeydown}\n @change=${this.onChange}\n @blur=${this.onBlur}\n @focus=${this.onFocus}\n @select=${this.onSelect}\n @invalid=${this.handleInvalid}></textarea>\n\n ${this._renderFooter()}\n </div>\n `,\n )\n }\n\n private _renderFeedback() {\n return html`\n <dap-ds-feedback\n part=\"feedback\"\n feedbackType=${ifDefined(this.feedbackType)}\n feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n class=${clsx('textarea__feedback', {\n 'textarea__feedback--sm': this.effectiveSize === 'sm',\n })}\n id=${ifDefined(this.feedbackId)}\n exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n .subtle=${this.subtle}>\n <slot\n name=\"feedback-icon\"\n @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.feedback}\n </dap-ds-feedback>\n `\n }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n static tagName = 'dap-ds-textarea'\n\n static dependencies = {\n 'dap-ds-typography': DapDSTypography,\n 'dap-ds-feedback': DapDSFeedback,\n }\n\n private static nextId = 0\n\n private readonly inputId: string\n private readonly labelId: string\n private readonly descriptionId: string\n private readonly counterId: string\n\n /**@ignore */\n @query('.textarea__control') input!: HTMLTextAreaElement\n /** Hide character counter. */\n @property({ type: Boolean, reflect: true }) hideCounter = false\n /** The minimum length of the textarea. */\n @property({ type: Number }) minlength?: number\n /** The maximum length of the textarea. */\n @property({ type: Number }) maxlength?: number\n /** The number of rows in the textarea. */\n @property({ type: Number }) rows?: number = 6\n /** The number of columns in the textarea. */\n @property({ type: Number }) cols?: number\n /** The placeholder of the textarea. */\n @property() placeholder = ''\n /** Indicates how the control should wrap the value for form submission. */\n @property() wrap: 'hard' | 'soft'\n\n /**@ignore */\n @state() count = 0\n\n static readonly styles = unsafeCSS(styles)\n\n constructor() {\n super()\n DapDSTextarea.nextId++\n const uniqueSuffix =\n typeof crypto !== 'undefined' && crypto.randomUUID\n ? crypto.randomUUID().slice(0, 8)\n : Date.now().toString(36)\n this.inputId = `input-${DapDSTextarea.nextId}-${uniqueSuffix}`\n this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n this.descriptionId = `description-${DapDSTextarea.nextId}-${uniqueSuffix}`\n this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n // Initialize the feedbackId from FeedbackMixin\n this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n }\n\n get focusElement() {\n return this.input\n }\n\n private _handleSlotChange(event: Event) {\n const target = event?.target as HTMLInputElement\n target.setAttribute('slot', 'icon')\n }\n\n async connectedCallback() {\n super.connectedCallback()\n\n await this.updateComplete\n this.input.value = this.value ?? ''\n this.count = this.input.value.length\n }\n\n attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n super.attributeChangedCallback(name, oldValue, newValue)\n\n if (name === 'value' && this.input) {\n this.input.value = newValue\n }\n }\n\n onInput() {\n // Sync the host `value` property BEFORE emitting dds-input. super.onInput()\n // dispatches dds-input synchronously, so consumers that read the host `value`\n // in that listener (e.g. RHF bindings) would otherwise see the previous value\n // and lag one keystroke behind. Matches dap-ds-input's ordering.\n this.count = this.input.value.length\n this.value = this.input.value\n\n super.onInput()\n\n this.emit('dds-count-change', { value: this.count })\n\n this.setValidity()\n }\n\n onChange() {\n // Same ordering as onInput: update the host `value` before super emits dds-change.\n this.count = this.input.value.length\n this.value = this.input.value\n\n super.onChange()\n\n this.emit('dds-count-change', { value: this.count })\n\n this.setValidity()\n }\n\n onSelect(e: Event) {\n const target = e.target as HTMLTextAreaElement\n const selection = target.value.substring(\n target.selectionStart,\n target.selectionEnd,\n )\n this.emit('dds-select', { value: selection })\n }\n\n formResetCallback() {\n this.internals.setValidity({})\n this.internals.setFormValue(this.defaultValue || '')\n this.value = this.defaultValue || ''\n this.input.value = this.defaultValue || ''\n }\n\n handleInvalid(event: Event) {\n event.preventDefault()\n }\n\n private _renderFooter() {\n const counter = !this.hideCounter\n ? html`\n <dap-ds-typography\n part=\"counter\"\n exportparts=\"base: counter-base\"\n class=${clsx('textarea__counter', {\n 'textarea__counter--error': this.status === 'error',\n })}\n variant=\"caption\"\n size=\"${this.size as CommonFormElementSize}\"\n id=${this.counterId}\n aria-hidden=\"true\">\n ${this.count}\n </dap-ds-typography>\n </div>\n `\n : nothing\n\n return html`\n <div class=\"textarea__footer\" part=\"footer\">\n ${this.feedback && this._renderFeedback()}\n <span part=\"counter-container\">${counter}</span>\n </div>\n `\n }\n\n render() {\n return this.renderLabel(\n this.labelId,\n html`\n <div\n part=\"base\"\n class=${clsx(\n 'textarea',\n `textarea--${this.effectiveSize}`,\n { 'textarea--success': this.status === 'success' },\n { 'textarea--error': this.status === 'error' },\n { 'textarea--disabled': this.disabled },\n { 'textarea--readonly': this.readonly },\n { 'textarea--optional': this.optional },\n )}>\n <textarea\n id=${this.inputId}\n part=\"input\"\n class=\"textarea__control\"\n aria-disabled=${this.disabled}\n aria-describedby=\"${ifDefined(\n this.description ? this.descriptionId : nothing,\n )} ${this.feedback ? this.feedbackId : nothing}\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n wrap=${ifDefined(this.wrap)}\n cols=${ifDefined(this.cols)}\n rows=${ifDefined(this.rows)}\n placeholder=${ifDefined(this.placeholder)}\n ?autofocus=${this.autofocus}\n ?value=${this.value}\n aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n @input=${this.onInput}\n @keydown=${this.onKeydown}\n @change=${this.onChange}\n @blur=${this.onBlur}\n @focus=${this.onFocus}\n @select=${this.onSelect}\n @invalid=${this.handleInvalid}></textarea>\n\n ${this._renderFooter()}\n </div>\n `,\n )\n }\n\n private _renderFeedback() {\n return html`\n <dap-ds-feedback\n part=\"feedback\"\n feedbackType=${ifDefined(this.feedbackType)}\n feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n class=${clsx('textarea__feedback', {\n 'textarea__feedback--sm': this.effectiveSize === 'sm',\n })}\n id=${ifDefined(this.feedbackId)}\n exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n .subtle=${this.subtle}>\n <slot\n name=\"feedback-icon\"\n @slotchange=\"${this._handleSlotChange}\"></slot>\n ${this.feedback}\n </dap-ds-feedback>\n `\n }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}
|