mdui 2.0.2 → 2.0.4

package/components/text-field/index.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import '@mdui/jq/methods/css.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import '@mdui/shared/icons/cancel--outlined.js';
 import '@mdui/shared/icons/error.js';
 import '@mdui/shared/icons/visibility-off.js';
@@ -8,7 +8,7 @@ import '../button-icon.js';
 import '../icon.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof LitElement;
+declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
  * @summary 文本框组件
  *
@@ -30,9 +30,9 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
  * @slot suffix - 右侧文本
  * @slot clear-button - 清空按钮
  * @slot clear-icon - 清空按钮中的图标
- * @slot toggle-password-button - 显示密码状态下，密码显示切换按钮中的图标
- * @slot show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @slot hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @slot toggle-password-button - 密码显示状态切换按钮
+ * @slot show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @slot hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @slot helper - 底部的帮助文本
  *
  * @csspart container - 文本框容器
@@ -45,25 +45,25 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
  * @csspart input - 内部的 `<input>` 或 `<textarea>` 元素
  * @csspart clear-button - 清空按钮
  * @csspart clear-icon - 清空按钮中的图标
- * @csspart toggle-password-button - 密码显示切换按钮
- * @csspart show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @csspart hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @csspart toggle-password-button - 密码显示状态切换按钮
+ * @csspart show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @csspart hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @csspart supporting - 底部辅助信息容器，包括 helper、error、counter
  * @csspart helper - 底部的帮助文本
  * @csspart error - 底部的错误描述文本
  * @csspart counter - 底部右侧的字数统计
  */
-export declare class TextField extends TextField_base implements FormControl {
+export declare class TextField extends TextField_base<TextFieldEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 文本框形状。默认为 `filled`。可选值为：
+     * 文本框的形状。默认为 `filled`。可选值包括：
      *
      * * `filled`：带背景色的文本框，视觉效果较强
      * * `outlined`：带边框的文本框，视觉效果较弱
      */
     variant: /*带背景色的文本框，视觉效果较强*/ 'filled' | /*带边框的文本框，视觉效果较弱*/ 'outlined';
     /**
-     * 文本框输入类型。默认为 `text`。可选值为：
+     * 文本框输入类型。默认为 `text`。可选值包括：
      *
      * * `text`：默认值。文本字段
      * * `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘
@@ -97,7 +97,7 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     label?: string;
     /**
-     * 提示文本
+     * 占位符文本
      */
     placeholder?: string;
     /**
@@ -105,11 +105,11 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     helper?: string;
     /**
-     * 是否仅在获得焦点时，显示底部帮助文本
+     * 是否仅在获得焦点时，显示底部的帮助文本
      */
     helperOnFocus: boolean;
     /**
-     * 是否可清空文本框
+     * 是否可清空文本框内容
      */
     clearable: boolean;
     /**
@@ -117,15 +117,15 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     clearIcon?: string;
     /**
-     * 文本是否右对齐
+     * 是否将文本右对齐
      */
     endAligned: boolean;
     /**
-     * 文本框的前缀文本。仅在聚焦状态，或文本框有值时才会显示。也可以通过 `slot="prefix"` 设置
+     * 文本框的前缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot="prefix"` 设置
      */
     prefix: string;
     /**
-     * 文本框的后缀文本。仅在聚焦状态，或文本框有值时才会显示。也可以通过 `slot="suffix"` 设置
+     * 文本框的后缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot="suffix"` 设置
      */
     suffix?: string;
     /**
@@ -141,17 +141,17 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     errorIcon?: string;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
-     * 是否为只读
+     * 是否为只读模式
      */
     readonly: boolean;
     /**
-     * 是否为禁用状态
+     * 是否禁用输入框
      */
     disabled: boolean;
     /**
@@ -159,19 +159,19 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     required: boolean;
     /**
-     * 文本框固定显示的行数
+     * 文本框的固定显示行数
      */
     rows?: number;
     /**
-     * 是否根据输入的内容自动调整文本框高度
+     * 是否根据输入内容自动调整文本框高度
      */
     autosize: boolean;
     /**
-     * `autosize` 为 `true` 时，可以通过该属性指定最小行数
+     * `autosize` 为 `true` 时，文本框的最小行数
      */
     minRows?: number;
     /**
-     * `autosize` 为 `true` 时，可以通过该属性指定最大行数
+     * `autosize` 为 `true` 时，文本框的最大行数
      */
     maxRows?: number;
     /**
@@ -183,7 +183,7 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     maxlength?: number;
     /**
-     * 是否显示字数统计。必须指定了 `maxlength` 时，该参数才有效
+     * 是否显示字数统计，只在 `maxlength` 被指定时有效
      */
     counter: boolean;
     /**
@@ -195,7 +195,7 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     max?: number;
     /**
-     * `type` 为 `number` 时，数值在增减过程固定改变的值
+     * `type` 为 `number` 时，数值增减的步长
      */
     step?: number;
     /**
@@ -203,55 +203,55 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     pattern?: string;
     /**
-     * `type` 为 `password` 时，设置该属性会添加一个切换按钮，点击时可在密文和明文之间切换
+     * `type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换
      */
     togglePassword: boolean;
     /**
-     * 含密码切换按钮时，明文密码状态下，按钮的 Material Icons 图标。也可以通过 `slot="show-password-icon"` 设置
+     * 密码切换按钮的 Material Icons 图标，当密码为明文时显示。也可以通过 `slot="show-password-icon"` 设置
      */
     showPasswordIcon?: string;
     /**
-     * 含密码切换按钮时，密文密码状态下，按钮的 Material Icons 图标。也可以通过 `slot="hide-password-icon"` 设置
+     * 密码切换按钮的 Material Icons 图标，当密码为密文时显示。也可以通过 `slot="hide-password-icon"` 设置
      */
     hidePasswordIcon?: string;
     /**
-     * iOS 的非标准属性（运行在 iOS 上的 Safari、Firefox、Chrome 都支持），文本是否自动首字母大写。在 iOS5 和之后的版本上有效。可选值为：
+     * iOS 的非标准属性，用于控制文本首字母是否自动大写。在 iOS5 及以后的版本上有效。可选值包括：
      *
      * * `none`：禁用首字母大写
-     * * `sentences`：句子的首字母大写
-     * * `words`：单词或字母的首字母大写
-     * * `characters`：全部字母大写
+     * * `sentences`：句子首字母大写
+     * * `words`：单词首字母大写
+     * * `characters`：所有字母大写
      */
-    autocapitalize: /*禁用首字母大写*/ 'none' | /*句子的首字母大写*/ 'sentences' | /*单词或字母的首字母大写*/ 'words' | /*全部字母大写*/ 'characters';
+    autocapitalize: /*禁用首字母大写*/ 'none' | /*句子首字母大写*/ 'sentences' | /*单词首字母大写*/ 'words' | /*所有字母大写*/ 'characters';
     /**
      * `input` 元素的 `autocorrect` 属性
      */
     autocorrect?: string;
     /**
-     * 是否使用浏览器的记忆功能自动填充文本。可选值为：
+     * 是否使用浏览器的自动填充功能。可选值包括：
      *
-     * * `off`：不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法
+     * * `off`：禁用浏览器的自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法
      * * `on`：浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示
      */
-    autocomplete?: /*不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法*/ 'off' | /*浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示*/ 'on';
+    autocomplete?: /*禁用浏览器的自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法*/ 'off' | /*浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示*/ 'on';
     /**
-     * `input` 元素的 `enterkeyhint` 属性。可用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值为：
+     * `input` 元素的 `enterkeyhint` 属性，用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值包括：
      *
-     * * `enter`：插入新行，多出现在多行文本框等需要输入多行的场景中
-     * * `done`：输入完成，虚拟键盘将关闭
-     * * `go`：把用户带到他们输入的文本的目标处
+     * * `enter`：插入新行
+     * * `done`：完成输入，关闭虚拟键盘
+     * * `go`：导航到输入文本的目标
      * * `next`：移动到下一个输入项
      * * `previous`：移动到上一个输入项
-     * * `search`：把用户带到搜索结果
+     * * `search`：导航到搜索结果
      * * `send`：发送文本信息
      */
-    enterkeyhint?: /*插入新行，多出现在多行文本框等需要输入多行的场景中*/ 'enter' | /*输入完成，虚拟键盘将关闭*/ 'done' | /*把用户带到他们输入的文本的目标处*/ 'go' | /*移动到下一个输入项*/ 'next' | /*移动到上一个输入项*/ 'previous' | /*把用户带到搜索结果*/ 'search' | /*发送文本信息*/ 'send';
+    enterkeyhint?: /*插入新行*/ 'enter' | /*完成输入，关闭虚拟键盘*/ 'done' | /*导航到输入文本的目标*/ 'go' | /*移动到下一个输入项*/ 'next' | /*移动到上一个输入项*/ 'previous' | /*导航到搜索结果*/ 'search' | /*发送文本信息*/ 'send';
     /**
-     * 启用拼写检查
+     * 是否启用拼写检查
      */
     spellcheck: boolean;
     /**
-     * `input` 元素的 `inputmode` 属性。用于定制使用哪种虚拟键盘。可选值为：
+     * `input` 元素的 `inputmode` 属性，用于定制虚拟键盘的类型。可选值包括：
      *
      * * `none`：无虚拟键盘。在需要实现自己的键盘输入控件时很有用
      * * `text`：标准文本输入键盘
@@ -296,11 +296,11 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     private readonlyButClearable;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     /**
@@ -338,7 +338,7 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
     /**
-     * 把文本框中特定范围的文本替换成一个新的文本
+     * 将文本框中特定范围的文本替换为新的文本
      * @param replacement 要插入的字符串
      * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引
      * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引
@@ -350,19 +350,19 @@ export declare class TextField extends TextField_base implements FormControl {
      */
     setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity(): boolean;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity(): boolean;
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message: string): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
@@ -392,6 +392,14 @@ export declare class TextField extends TextField_base implements FormControl {
     private renderHelper;
     private renderCounter;
 }
+export interface TextFieldEventMap {
+    focus: FocusEvent;
+    blur: FocusEvent;
+    change: CustomEvent<void>;
+    input: CustomEvent<void>;
+    invalid: CustomEvent<void>;
+    clear: CustomEvent<void>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'mdui-text-field': TextField;

package/components/text-field/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -9,12 +9,12 @@ import { when } from 'lit/directives/when.js';
 import { animate } from '@lit-labs/motion';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
+import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import { emit } from '@mdui/shared/helpers/event.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
@@ -48,9 +48,9 @@ import { style } from './style.js';
  * @slot suffix - 右侧文本
  * @slot clear-button - 清空按钮
  * @slot clear-icon - 清空按钮中的图标
- * @slot toggle-password-button - 显示密码状态下，密码显示切换按钮中的图标
- * @slot show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @slot hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @slot toggle-password-button - 密码显示状态切换按钮
+ * @slot show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @slot hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @slot helper - 底部的帮助文本
  *
  * @csspart container - 文本框容器
@@ -63,26 +63,26 @@ import { style } from './style.js';
  * @csspart input - 内部的 `<input>` 或 `<textarea>` 元素
  * @csspart clear-button - 清空按钮
  * @csspart clear-icon - 清空按钮中的图标
- * @csspart toggle-password-button - 密码显示切换按钮
- * @csspart show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @csspart hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @csspart toggle-password-button - 密码显示状态切换按钮
+ * @csspart show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @csspart hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @csspart supporting - 底部辅助信息容器，包括 helper、error、counter
  * @csspart helper - 底部的帮助文本
  * @csspart error - 底部的错误描述文本
  * @csspart counter - 底部右侧的字数统计
  */
-let TextField = class TextField extends FocusableMixin(LitElement) {
+let TextField = class TextField extends FocusableMixin(MduiElement) {
     constructor() {
         super(...arguments);
         /**
-         * 文本框形状。默认为 `filled`。可选值为：
+         * 文本框的形状。默认为 `filled`。可选值包括：
          *
          * * `filled`：带背景色的文本框，视觉效果较强
          * * `outlined`：带边框的文本框，视觉效果较弱
          */
         this.variant = 'filled';
         /**
-         * 文本框输入类型。默认为 `text`。可选值为：
+         * 文本框输入类型。默认为 `text`。可选值包括：
          *
          * * `text`：默认值。文本字段
          * * `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘
@@ -112,23 +112,23 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
          */
         this.defaultValue = '';
         /**
-         * 是否仅在获得焦点时，显示底部帮助文本
+         * 是否仅在获得焦点时，显示底部的帮助文本
          */
         this.helperOnFocus = false;
         /**
-         * 是否可清空文本框
+         * 是否可清空文本框内容
          */
         this.clearable = false;
         /**
-         * 文本是否右对齐
+         * 是否将文本右对齐
          */
         this.endAligned = false;
         /**
-         * 是否为只读
+         * 是否为只读模式
          */
         this.readonly = false;
         /**
-         * 是否为禁用状态
+         * 是否禁用输入框
          */
         this.disabled = false;
         /**
@@ -136,19 +136,19 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
          */
         this.required = false;
         /**
-         * 是否根据输入的内容自动调整文本框高度
+         * 是否根据输入内容自动调整文本框高度
          */
         this.autosize = false;
         /**
-         * 是否显示字数统计。必须指定了 `maxlength` 时，该参数才有效
+         * 是否显示字数统计，只在 `maxlength` 被指定时有效
          */
         this.counter = false;
         /**
-         * `type` 为 `password` 时，设置该属性会添加一个切换按钮，点击时可在密文和明文之间切换
+         * `type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换
          */
         this.togglePassword = false;
         /**
-         * 启用拼写检查
+         * 是否启用拼写检查
          */
         this.spellcheck = false;
         /**
@@ -184,13 +184,13 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         this.readonlyButClearable = false;
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity() {
         return this.inputRef.value.validity;
     }
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage() {
         return this.inputRef.value.validationMessage;
@@ -298,7 +298,7 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         this.inputRef.value.setSelectionRange(start, end, direction);
     }
     /**
-     * 把文本框中特定范围的文本替换成一个新的文本
+     * 将文本框中特定范围的文本替换为新的文本
      * @param replacement 要插入的字符串
      * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引
      * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引
@@ -313,17 +313,17 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.value !== this.inputRef.value.value) {
             this.value = this.inputRef.value.value;
             this.setTextareaHeight();
-            emit(this, 'input');
-            emit(this, 'change');
+            this.emit('input');
+            this.emit('change');
         }
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
         if (!valid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -332,14 +332,14 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
         if (this.invalid) {
-            emit(this, 'invalid', {
+            this.emit('invalid', {
                 bubbles: false,
                 cancelable: true,
                 composed: false,
@@ -349,9 +349,9 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
@@ -393,13 +393,13 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.isTextarea) {
             this.setTextareaHeight();
         }
-        emit(this, 'change');
+        this.emit('change');
     }
     onClear(event) {
         this.value = '';
-        emit(this, 'clear');
-        emit(this, 'input');
-        emit(this, 'change');
+        this.emit('clear');
+        this.emit('input');
+        this.emit('change');
         this.focus();
         event.stopPropagation();
     }
@@ -408,7 +408,7 @@ let TextField = class TextField extends FocusableMixin(LitElement) {
         if (this.isTextarea) {
             this.setTextareaHeight();
         }
-        emit(this, 'input');
+        this.emit('input');
     }
     onInvalid(event) {
         event.preventDefault();