@digital-realty/ix-textbox 2.0.5 → 2.1.2

package/package.json

@@ -1,94 +1,95 @@
-{
-  "name": "@digital-realty/ix-textbox",
-  "version": "2.0.5",
-  "description": "Webcomponent ix-textbox following open-wc recommendations",
-  "license": "MIT",
-  "author": "Digital Realty",
-  "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./ix-textbox.js": "./dist/src/ix-textbox.js",
-    "./IxTextbox": "./dist/src/react/IxTextbox.js"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "analyze": "cem analyze --litelement",
-    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "tsc && npm run analyze -- --exclude dist",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "test": "tsc && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
-  },
-  "dependencies": {
-    "@lit-labs/react": "^2.0.3",
-    "@material/web": "^1.0.0-pre.15",
-    "lit": "^2.7.6",
-    "react": "^18.2.0"
-  },
-  "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@open-wc/eslint-config": "^9.2.1",
-    "@open-wc/testing": "^3.1.6",
-    "@types/react": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "@web/dev-server": "^0.1.34",
-    "@web/test-runner": "^0.14.0",
-    "concurrently": "^5.3.0",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
-    "prettier": "^2.4.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.2"
-  },
-  "customElements": "custom-elements.json",
-  "eslintConfig": {
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
-    "plugins": [
-      "@typescript-eslint"
-    ],
-    "rules": {
-      "class-methods-use-this": "off",
-      "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error"
-      ],
-      "import/no-unresolved": "off",
-      "import/extensions": [
-        "error",
-        "always",
-        {
-          "ignorePackages": true
-        }
-      ]
-    }
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix",
-      "prettier --write"
-    ]
-  }
-}
+{
+  "name": "@digital-realty/ix-textbox",
+  "version": "2.1.2",
+  "description": "Webcomponent ix-textbox following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital Realty",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./ix-textbox.js": "./dist/src/ix-textbox.js",
+    "./IxTextbox": "./dist/src/react/IxTextbox.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@lit-labs/react": "^2.0.3",
+    "@material/web": "^1.0.0-pre.15",
+    "lit": "^2.7.6",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@types/react": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "class-methods-use-this": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "1e8e36ae0147d1fb0037ba85c727e3a30daebbc9"
+}

package/src/IxTextbox.ts

@@ -1,216 +1,216 @@
-import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import '@material/web/textfield/filled-text-field.js';
-import '@material/web/textfield/outlined-text-field.js';
-import {
-  TextFieldType,
-  UnsupportedTextFieldType,
-  TextChangeEvent,
-} from './types/index.js';
-
-export class IxTextbox extends LitElement {
-  @property({ type: Boolean }) outlined = true;
-
-  @property({ reflect: true })
-  type: TextFieldType | UnsupportedTextFieldType = 'text';
-
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /**
-   * Gets or sets whether or not the text field is in a visually invalid state.
-   *
-   * Calling `reportValidity()` will automatically update `error`.
-   */
-  @property({ type: Boolean, reflect: true }) error = false;
-
-  /**
-   * The error message that replaces supporting text when `error` is true. If
-   * `errorText` is an empty string, then the supporting text will continue to
-   * show.
-   *
-   * Calling `reportValidity()` will automatically update `errorText` to the
-   * native `validationMessage`.
-   */
-  @property({ attribute: 'error-text' }) errorText = '';
-
-  @property() label = '';
-
-  @property({ type: Boolean, reflect: true }) required = false;
-
-  /**
-   * The current value of the text field. It is always a string.
-   */
-  @property() value = '';
-
-  /**
-   * An optional prefix to display before the input value.
-   */
-  @property({ attribute: 'prefix-text' }) prefixText = '';
-
-  /**
-   * An optional suffix to display after the input value.
-   */
-  @property({ attribute: 'suffix-text' }) suffixText = '';
-
-  /**
-   * Whether or not the text field has a leading icon. Used for SSR.
-   */
-  @property({ type: Boolean, attribute: 'has-leading-icon' })
-  hasLeadingIcon = false;
-
-  /**
-   * Whether or not the text field has a trailing icon. Used for SSR.
-   */
-  @property({ type: Boolean, attribute: 'has-trailing-icon' })
-  hasTrailingIcon = false;
-
-  /**
-   * Conveys additional information below the text field, such as how it should
-   * be used.
-   */
-  @property({ attribute: 'supporting-text' }) supportingText = '';
-
-  /**
-   * Override the input text CSS `direction`. Useful for RTL languages that use
-   * LTR notation for fractions.
-   */
-  @property({ attribute: 'text-direction' }) textDirection = '';
-
-  /**
-   * The number of rows to display for a `type="textarea"` text field.
-   * Defaults to 2.
-   */
-  @property({ type: Number }) rows = 2;
-
-  // <input> properties
-  /**
-   * Defines the greatest value in the range of permitted values.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-   */
-  @property() max = '';
-
-  /**
-   * The maximum number of characters a user can enter into the text field. Set
-   * to -1 for none.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-   */
-  @property({ type: Number }) maxLength = -1;
-
-  /**
-   * Defines the most negative value in the range of permitted values.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-   */
-  @property() min = '';
-
-  /**
-   * The minimum number of characters a user can enter into the text field. Set
-   * to -1 for none.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-   */
-  @property({ type: Number }) minLength = -1;
-
-  /**
-   * A regular expression that the text field's value must match to pass
-   * constraint validation.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-   */
-  @property() pattern = '';
-
-  @property({ reflect: true }) placeholder = '';
-
-  /**
-   * Indicates whether or not a user should be able to edit the text field's
-   * value.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
-   */
-  @property({ type: Boolean, reflect: true }) readOnly = false;
-
-  @query('#md-textfield') mdTextfield!: HTMLInputElement;
-
-  handleChange(e: Event) {
-    const inputElement = e.target as HTMLInputElement;
-    const textChangeEvent = new CustomEvent('textChange', {
-      detail: {
-        value: inputElement.value,
-      },
-      composed: true,
-    } as TextChangeEvent);
-
-    this.dispatchEvent(textChangeEvent);
-  }
-
-  getValidityStatus() {
-    return this.mdTextfield?.reportValidity();
-  }
-
-  render() {
-    let comp;
-    if (this.outlined) {
-      comp = html`
-        <md-outlined-text-field
-          id="md-textfield"
-          ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          ?error="${this.error}"
-          error-text="${this.errorText}"
-          label="${this.label}"
-          value="${this.value}"
-          placeholder="${this.placeholder}"
-          ?readOnly="${this.readOnly}"
-          text-direction="${this.textDirection}"
-          rows="${this.rows}"
-          max="${this.max}"
-          maxLength="${this.maxLength}"
-          min="${this.min}"
-          minLength="${this.minLength}"
-          pattern="${this.pattern}"
-          prefix-text="${this.prefixText}"
-          suffix-text="${this.suffixText}"
-          supporting-text="${this.supportingText}"
-          type="${this.type}"
-          @input="${this.handleChange}"
-        >
-        </md-outlined-text-field>
-      `;
-    } else {
-      comp = html`
-        <md-filled-text-field
-          id="md-textfield"
-          ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          ?error="${this.error}"
-          error-text="${this.errorText}"
-          label="${this.label}"
-          value="${this.value}"
-          placeholder="${this.placeholder}"
-          ?readOnly="${this.readOnly}"
-          text-direction="${this.textDirection}"
-          rows="${this.rows}"
-          max="${this.max}"
-          maxLength="${this.maxLength}"
-          min="${this.min}"
-          minLength="${this.minLength}"
-          pattern="${this.pattern}"
-          prefix-text="${this.prefixText}"
-          suffix-text="${this.suffixText}"
-          supporting-text="${this.supportingText}"
-          type="${this.type}"
-          @input="${this.handleChange}"
-        >
-        </md-filled-text-field>
-      `;
-    }
-    return html` ${comp} `;
-  }
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ix-textbox': IxTextbox;
-  }
-}
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/textfield/outlined-text-field.js';
+import {
+  TextFieldType,
+  UnsupportedTextFieldType,
+  TextChangeEvent,
+} from './types/index.js';
+
+export class IxTextbox extends LitElement {
+  @property({ type: Boolean }) outlined = true;
+
+  @property({ reflect: true })
+  type: TextFieldType | UnsupportedTextFieldType = 'text';
+
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Gets or sets whether or not the text field is in a visually invalid state.
+   *
+   * Calling `reportValidity()` will automatically update `error`.
+   */
+  @property({ type: Boolean, reflect: true }) error = false;
+
+  /**
+   * The error message that replaces supporting text when `error` is true. If
+   * `errorText` is an empty string, then the supporting text will continue to
+   * show.
+   *
+   * Calling `reportValidity()` will automatically update `errorText` to the
+   * native `validationMessage`.
+   */
+  @property({ attribute: 'error-text' }) errorText = '';
+
+  @property() label = '';
+
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /**
+   * The current value of the text field. It is always a string.
+   */
+  @property() value = '';
+
+  /**
+   * An optional prefix to display before the input value.
+   */
+  @property({ attribute: 'prefix-text' }) prefixText = '';
+
+  /**
+   * An optional suffix to display after the input value.
+   */
+  @property({ attribute: 'suffix-text' }) suffixText = '';
+
+  /**
+   * Whether or not the text field has a leading icon. Used for SSR.
+   */
+  @property({ type: Boolean, attribute: 'has-leading-icon' })
+  hasLeadingIcon = false;
+
+  /**
+   * Whether or not the text field has a trailing icon. Used for SSR.
+   */
+  @property({ type: Boolean, attribute: 'has-trailing-icon' })
+  hasTrailingIcon = false;
+
+  /**
+   * Conveys additional information below the text field, such as how it should
+   * be used.
+   */
+  @property({ attribute: 'supporting-text' }) supportingText = '';
+
+  /**
+   * Override the input text CSS `direction`. Useful for RTL languages that use
+   * LTR notation for fractions.
+   */
+  @property({ attribute: 'text-direction' }) textDirection = '';
+
+  /**
+   * The number of rows to display for a `type="textarea"` text field.
+   * Defaults to 2.
+   */
+  @property({ type: Number }) rows = 2;
+
+  // <input> properties
+  /**
+   * Defines the greatest value in the range of permitted values.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+   */
+  @property() max = '';
+
+  /**
+   * The maximum number of characters a user can enter into the text field. Set
+   * to -1 for none.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+   */
+  @property({ type: Number }) maxLength = -1;
+
+  /**
+   * Defines the most negative value in the range of permitted values.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+   */
+  @property() min = '';
+
+  /**
+   * The minimum number of characters a user can enter into the text field. Set
+   * to -1 for none.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+   */
+  @property({ type: Number }) minLength = -1;
+
+  /**
+   * A regular expression that the text field's value must match to pass
+   * constraint validation.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   */
+  @property() pattern = '';
+
+  @property({ reflect: true }) placeholder = '';
+
+  /**
+   * Indicates whether or not a user should be able to edit the text field's
+   * value.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
+   */
+  @property({ type: Boolean, reflect: true }) readOnly = false;
+
+  @query('#md-textfield') mdTextfield!: HTMLInputElement;
+
+  handleChange(e: Event) {
+    const inputElement = e.target as HTMLInputElement;
+    const textChangeEvent = new CustomEvent('textChange', {
+      detail: {
+        value: inputElement.value,
+      },
+      composed: true,
+    } as TextChangeEvent);
+
+    this.dispatchEvent(textChangeEvent);
+  }
+
+  getValidityStatus() {
+    return this.mdTextfield?.reportValidity();
+  }
+
+  render() {
+    let comp;
+    if (this.outlined) {
+      comp = html`
+        <md-outlined-text-field
+          id="md-textfield"
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          ?error="${this.error}"
+          error-text="${this.errorText}"
+          label="${this.label}"
+          value="${this.value}"
+          placeholder="${this.placeholder}"
+          ?readOnly="${this.readOnly}"
+          text-direction="${this.textDirection}"
+          rows="${this.rows}"
+          max="${this.max}"
+          maxLength="${this.maxLength}"
+          min="${this.min}"
+          minLength="${this.minLength}"
+          pattern="${this.pattern}"
+          prefix-text="${this.prefixText}"
+          suffix-text="${this.suffixText}"
+          supporting-text="${this.supportingText}"
+          type="${this.type}"
+          @input="${this.handleChange}"
+        >
+        </md-outlined-text-field>
+      `;
+    } else {
+      comp = html`
+        <md-filled-text-field
+          id="md-textfield"
+          ?disabled="${this.disabled}"
+          ?required="${this.required}"
+          ?error="${this.error}"
+          error-text="${this.errorText}"
+          label="${this.label}"
+          value="${this.value}"
+          placeholder="${this.placeholder}"
+          ?readOnly="${this.readOnly}"
+          text-direction="${this.textDirection}"
+          rows="${this.rows}"
+          max="${this.max}"
+          maxLength="${this.maxLength}"
+          min="${this.min}"
+          minLength="${this.minLength}"
+          pattern="${this.pattern}"
+          prefix-text="${this.prefixText}"
+          suffix-text="${this.suffixText}"
+          supporting-text="${this.supportingText}"
+          type="${this.type}"
+          @input="${this.handleChange}"
+        >
+        </md-filled-text-field>
+      `;
+    }
+    return html` ${comp} `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ix-textbox': IxTextbox;
+  }
+}

package/src/index.ts

@@ -1 +1 @@
-export { IxTextbox } from './IxTextbox.js';
+export { IxTextbox } from './IxTextbox.js';