@ionic/core 9.0.6-dev.11790349282.1a877abd → 9.0.6-dev.11790776272.1d27d1bd

package/dist/collection/components/textarea/textarea.js

@@ -2,18 +2,37 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createClickController, createNotchController, createStartContainerController, checkInvalidState, } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
+import { getSlottedClickContent, createNotchController, createStartContainerController, checkInvalidState, reportValidityToElementInternals, } from "../../utils/forms/index";
+import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady, raf } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { getCounterText } from "../input/input.utils";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * Content that handles its own click, so clicking it should not also activate
+ * the textarea.
+ */
+const INTERACTIVE_CONTENT = 'a[href], button, details, embed, iframe, select, textarea, input:not([type="hidden"]), audio[controls], video[controls], [contenteditable]:not([contenteditable="false"]), .ion-activatable, .ion-focusable';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
  * @slot end - Content to display at the trailing edge of the textarea. (EXPERIMENTAL)
+ *
+ * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, and native textarea).
+ * @part container - The inner wrapper element that directly contains the native textarea element.
+ * @part label - The label text describing the textarea.
+ * @part native - The native textarea element.
+ * @part supporting-text - Supporting text displayed beneath the textarea label.
+ * @part helper-text - Supporting text displayed beneath the textarea label when the textarea is valid.
+ * @part error-text - Supporting text displayed beneath the textarea label when the textarea is invalid and touched.
+ * @part counter - The character counter displayed when the counter property is set.
+ * @part bottom - The container element for helper text, error text, and counter.
+ * @part start - The wrapper element for the content in the start slot.
+ * @part control - The wrapper element containing the label and the native textarea. The `"ionic"` theme flattens this wrapper, so it cannot be given a box of its own there.
+ * @part end - The wrapper element for the content in the end slot.
  */
 export class Textarea {
     constructor() {
@@ -99,6 +118,12 @@ export class Textarea {
          * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          */
         this.labelPlacement = 'start';
+        /**
+         * The size of the textarea. If "large" it will increase the height of the textarea, while
+         * "small" and "medium" provide progressively smaller heights. The default size is "medium".
+         * This property only applies to the `"ionic"` theme.
+         */
+        this.size = 'medium';
         // `Event` type is used instead of `InputEvent`
         // since the types from Stencil are not derived
         // from the element (e.g. textarea and input
@@ -115,11 +140,19 @@ export class Textarea {
             this.emitValueChange(ev);
         };
         this.onFocus = (ev) => {
+            // The textarea was not the target of this gesture, so drop the focus without reporting it.
+            if (this.rejectingFocus) {
+                this.nativeInput?.blur();
+                return;
+            }
             this.hasFocus = true;
             this.focusedValue = this.value;
             this.ionFocus.emit(ev);
         };
         this.onBlur = (ev) => {
+            if (!this.hasFocus) {
+                return;
+            }
             this.hasFocus = false;
             if (this.focusedValue !== this.value) {
                 /**
@@ -143,11 +176,48 @@ export class Textarea {
          * The textarea itself may have a slot attribute when placed in an item
          * or toolbar, which does not make its content slotted content.
          */
+        /**
+         * Whether the click that began the current gesture already reached the
+         * consumer. Clicking the label makes the browser forward a second click to
+         * the native textarea; WebKit forwards it even when the gesture began on
+         * slotted content, where it would arrive as a duplicate.
+         */
+        this.clickReachedConsumer = false;
+        /** Whether focus delegated to the native textarea belongs to slotted content instead. */
+        this.rejectingFocus = false;
+        this.onLabelPointerDown = (ev) => {
+            this.clickReachedConsumer = false;
+            if (ev.button !== 0 || !this.isInteractiveSlottedContent(ev)) {
+                return;
+            }
+            this.armFocusRejection();
+        };
         this.onLabelClick = (ev) => {
             const target = ev.target;
+            if (target === this.nativeInput) {
+                /**
+                 * Either the click the label forwarded here, or a direct click on the
+                 * textarea. Both should reach the consumer as a single click on the host,
+                 * so only drop it when something else already did.
+                 */
+                if (this.clickReachedConsumer) {
+                    ev.stopPropagation();
+                }
+                this.clickReachedConsumer = false;
+                return;
+            }
+            /**
+             * Clicks on slotted content belong to the consumer and have to keep
+             * propagating. Everything else is internal chrome (the label, the
+             * start/end containers, the wrapper padding) and is represented by the
+             * click the label forwards to the native textarea.
+             */
             const slotted = target.closest('[slot="start"], [slot="end"]');
-            if (slotted === null || slotted === this.el || !this.el.contains(slotted)) {
+            const isSlotted = slotted !== null && slotted !== this.el && this.el.contains(slotted);
+            this.clickReachedConsumer = isSlotted;
+            if (!isSlotted) {
                 ev.stopPropagation();
+                return;
             }
         };
     }
@@ -159,6 +229,12 @@ export class Textarea {
          */
         this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
     }
+    /**
+     * Update element internals when disabled prop changes
+     */
+    disabledChanged() {
+        this.updateElementInternals();
+    }
     /**
      * Update the native input element when the value changes
      */
@@ -168,8 +244,22 @@ export class Textarea {
         if (nativeInput && nativeInput.value !== value) {
             nativeInput.value = value;
         }
+        this.updateElementInternals();
         this.runAutoGrow();
     }
+    /**
+     * Update native input and element internals when required prop changes
+     */
+    requiredChanged() {
+        // Explicitly update the native element's required attribute to ensure
+        // browser validation works correctly when required changes dynamically.
+        // While the template binding should handle this, we need to update it
+        // synchronously for the browser's validation to recognize the change.
+        if (this.nativeInput) {
+            this.nativeInput.required = this.required;
+        }
+        this.updateElementInternals();
+    }
     /**
      * dir is a globally enumerated attribute.
      * As a result, creating these as properties
@@ -184,13 +274,6 @@ export class Textarea {
         };
         forceUpdate(this);
     }
-    /**
-     * This prevents the native input from emitting the click event.
-     * Instead, the click event from the ion-textarea is emitted.
-     */
-    onClickCapture(ev) {
-        this.clickController?.handleClickCapture(ev);
-    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
@@ -199,10 +282,9 @@ export class Textarea {
         });
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
         this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
-            return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
+            return Build.isBrowser && getIonTheme(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
-        this.clickController = createClickController(el, () => this.nativeInput);
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -228,6 +310,8 @@ export class Textarea {
         }
     }
     disconnectedCallback() {
+        this.disarmFocusRejection?.();
+        this.rejectingFocus = false;
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
                 detail: this.el,
@@ -259,7 +343,14 @@ export class Textarea {
     }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
+        this.updateElementInternals();
         this.runAutoGrow();
+        // Override focus() to delegate to the native textarea.
+        // This is needed for Safari and Firefox which don't properly
+        // delegate focus when calling focus() directly on the host.
+        this.el.focus = () => {
+            this.setFocus();
+        };
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
@@ -272,6 +363,8 @@ export class Textarea {
      * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
+        // An explicit focus request is never the focus a gesture delegated here.
+        this.rejectingFocus = false;
         if (this.nativeInput) {
             this.nativeInput.focus();
         }
@@ -367,12 +460,43 @@ export class Textarea {
     getValue() {
         return this.value || '';
     }
+    /**
+     * Called when the form state is restored.
+     * Restores the component's value.
+     */
+    formStateRestoreCallback(value) {
+        this.value = value;
+    }
+    /**
+     * Called when the form is reset.
+     * Resets the component's value.
+     */
+    formResetCallback() {
+        this.value = '';
+    }
+    /**
+     * Updates the form value and reports validity state to the browser via
+     * ElementInternals. This should be called when the component loads, when
+     * the required prop changes, when the disabled prop changes, and when the value
+     * changes to ensure the form value stays in sync and validation state is updated.
+     */
+    updateElementInternals() {
+        // Disabled form controls should not be included in form data
+        // Pass null to setFormValue when disabled to exclude it from form submission
+        const value = this.disabled ? null : this.getValue();
+        // ElementInternals may not be fully available in test environments
+        // so we need to check if the method exists before calling it
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(value);
+        }
+        reportValidityToElementInternals(this.nativeInput, this.internals);
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            } }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
+            }, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -390,23 +514,99 @@ export class Textarea {
     get hasLabel() {
         return this.label !== undefined || this.labelSlot !== null;
     }
+    getFill() {
+        const theme = getIonTheme(this);
+        const { fill } = this;
+        if (theme === 'ionic' && fill === undefined) {
+            return 'outline';
+        }
+        return fill;
+    }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11050): Update theme check when shapes are defined for all themes.
+        if (theme === 'ionic' && shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
+    /** Whether the click started on slotted content that handles its own click. */
+    isInteractiveSlottedContent(ev) {
+        const slotted = getSlottedClickContent(ev, this.el);
+        if (slotted === null) {
+            return false;
+        }
+        /**
+         * The composed path is used rather than `closest` so that a control which
+         * keeps its interactive element inside its own shadow root, such as
+         * `ion-datetime-button`, is still recognized.
+         */
+        const path = ev.composedPath();
+        return path.slice(0, path.indexOf(slotted) + 1).some((node) => {
+            const el = node;
+            return el.nodeType === Node.ELEMENT_NODE && el.matches(INTERACTIVE_CONTENT);
+        });
+    }
+    /**
+     * The gesture ends with the click the browser resolves from it, which can
+     * land outside the label when the pointer is released off the content, and
+     * for a drag or a release outside the window never arrives at all.
+     */
+    armFocusRejection() {
+        this.disarmFocusRejection?.();
+        this.rejectingFocus = true;
+        const events = ['click', 'dragstart', 'pointercancel'];
+        const disarm = () => {
+            this.disarmFocusRejection = undefined;
+            events.forEach((name) => document.removeEventListener(name, disarm));
+            raf(() => (this.rejectingFocus = false));
+        };
+        this.disarmFocusRejection = disarm;
+        events.forEach((name) => document.addEventListener(name, disarm));
+    }
     /**
      * Renders the outline border with a notch for the label.
      */
     renderOutlineContainer() {
-        return (h("div", { class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
+        return (h("div", { key: "outline", class: "textarea-outline-container" }, h("div", { class: "textarea-outline-start" }), h("div", { class: {
                 'textarea-outline-notch': true,
                 'textarea-outline-notch-hidden': !this.hasLabel,
             } }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "textarea-outline-end" })));
     }
+    renderNativeTextarea() {
+        const { inputId, disabled } = this;
+        return (h("textarea", { class: "native-textarea", part: "native", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, this.getValue()));
+    }
+    renderStartContainer() {
+        return (h("div", { key: "start", class: "textarea-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
+    }
+    renderEndContainer() {
+        return (h("div", { key: "end", class: "textarea-end", part: "end" }, h("slot", { name: "end" })));
+    }
+    /**
+     * Every theme renders the same label and control structure, aside from the md
+     * outline container below. The label is nested alongside the textarea so the
+     * ios and md floating label can escape the control and clear the start and
+     * end slots. The ionic theme lifts it outside the field with grid instead.
+     */
+    renderField() {
+        const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
+        return [
+            hasOutlineFill && this.renderOutlineContainer(),
+            this.renderStartContainer(),
+            h("div", { key: "control", class: "textarea-control", part: "control" }, this.renderLabel(), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el), part: "container" }, this.renderNativeTextarea())),
+            this.renderEndContainer(),
+        ];
+    }
     /**
      * Renders the helper text or error text values
      */
     renderHintText() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
-            h("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
+            h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     getHintTextID() {
@@ -424,7 +624,7 @@ export class Textarea {
         if (counter !== true || maxlength === undefined) {
             return;
         }
-        return h("div", { class: "counter" }, getCounterText(value, maxlength, counterFormatter));
+        return (h("div", { class: "counter", part: "counter" }, getCounterText(value, maxlength, counterFormatter)));
     }
     /**
      * Responsible for rendering helper text,
@@ -442,45 +642,52 @@ export class Textarea {
         if (!hasHintText && !hasCounter) {
             return;
         }
-        return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
+        return (h("div", { class: "textarea-bottom", part: "bottom" }, this.renderHintText(), this.renderCounter()));
     }
     render() {
-        const { inputId, disabled, fill, shape, labelPlacement, hasFocus } = this;
-        const mode = getIonMode(this);
-        const value = this.getValue();
+        const { inputId, disabled, readonly, size, labelPlacement, hasFocus } = this;
+        const theme = getIonTheme(this);
+        const fill = this.getFill();
+        const shape = this.getShape();
         const inItem = hostContext('ion-item', this.el);
-        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
-        const hasOutlineFill = mode === 'md' && fill === 'outline';
         /**
          * If the label is stacked, it should always sit above the textarea.
          * For floating labels, the label should move above the textarea if
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '0f01ed6565313c45beaea5e0aa429a86b9cfa1a0', class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'f55fb7b4abc8e529d3414899c1a4a7f0c348c099', class: createColorClasses(this.color, {
+                [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
                 'label-floating': labelShouldFloat,
                 [`textarea-fill-${fill}`]: fill !== undefined,
                 [`textarea-shape-${shape}`]: shape !== undefined,
+                [`textarea-size-${size}`]: true,
                 [`textarea-label-placement-${labelPlacement}`]: true,
+                'in-item': inItem,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'a59548c3d3bf66543fd6e06b5c3b6e649f963164', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '29055193d664d9fe84ba0340fdcbbc54fec0e403', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '2cc122d9541ce7ae3c2309c27123b6c6c91cbfc7', name: "start" })), h("div", { key: 'c847a6fa1eaf6ef2b296415cd72bdd3aee9828a2', class: "textarea-control" }, this.renderLabel(), h("div", { key: 'f9205f82d6346daa86dc7e0f6e1eb221c76ed7b0', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '0bdb517fa5b3a44eeb3bb2ed1f9a8eab21a9a6a1', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '1ce661b800ef12146bdb97fb193e22be227ea052', class: "textarea-end" }, h("slot", { key: 'aca5704db48fe8e0e784cf57f2978ae2d63b3edc', name: "end" })), shouldRenderHighlight && h("div", { key: 'd916816d44cbdb4bc9a05032c5490eaa9bf3ba47', class: "textarea-highlight" })), this.renderBottomContent()));
+                'textarea-readonly': readonly,
+            }) }, h("label", { key: '6fe6fdc9133b758aefc78f838cc6aa63f91ad99d', class: "textarea-wrapper", htmlFor: inputId, onMouseDown: this.onLabelPointerDown, onClick: this.onLabelClick, part: "wrapper" }, this.renderField(), shouldRenderHighlight && h("div", { key: '0d601609d364ec8b2821faf5769f8772490df1fa', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
-    static get encapsulation() { return "scoped"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "ios": ["textarea.ios.scss"],
-            "md": ["textarea.md.scss"]
+            "md": ["textarea.md.scss"],
+            "ionic": ["textarea.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["textarea.ios.css"],
-            "md": ["textarea.md.css"]
+            "md": ["textarea.md.css"],
+            "ionic": ["textarea.ionic.css"]
         };
     }
     static get properties() {
@@ -622,7 +829,7 @@ export class Textarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available when the theme is `\"md\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -780,7 +987,7 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "required",
                 "defaultValue": "false"
             },
@@ -1019,20 +1226,40 @@ export class Textarea {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the textarea. If \"round\" it will have an increased border radius."
+                    "text": "Set to `\"soft\"` for a textarea with slightly rounded corners,\n`\"round\"` for a textarea with fully rounded corners, or `\"rectangular\"`\nfor a textarea without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "shape"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the textarea. If \"large\" it will increase the height of the textarea, while\n\"small\" and \"medium\" provide progressively smaller heights. The default size is \"medium\".\nThis property only applies to the `\"ionic\"` theme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
             }
         };
     }
@@ -1176,22 +1403,20 @@ export class Textarea {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "required",
+                "methodName": "requiredChanged"
             }, {
                 "propName": "dir",
                 "methodName": "onDirChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "onClickCapture",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }];
-    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 let textareaIds = 0;