@spectrum-web-components/textfield - npm Package Compare versions

Comparing version 0.3.8 to 0.3.9

CHANGELOG.md

@@ -6,2 +6,6 @@ # Change Log
 
+## [0.3.9](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/textfield@0.3.8...@spectrum-web-components/textfield@0.3.9) (2020-06-08)
+
+**Note:** Version bump only for package @spectrum-web-components/textfield
+
 ## [0.3.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/textfield@0.3.7...@spectrum-web-components/textfield@0.3.8) (2020-05-08)
@@ -8,0 +12,0 @@

custom-elements.json

@@ -1,178 +0,1 @@
-{
-  "version": "experimental",
-  "tags": [
-    {
-      "name": "sp-textfield",
-      "path": "./src/index.ts",
-      "attributes": [
-        {
-          "name": "allowed-keys",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "invalid",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "label",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "placeholder",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "pattern",
-          "type": "string | undefined"
-        },
-        {
-          "name": "grows",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "maxlength",
-          "type": "number | undefined"
-        },
-        {
-          "name": "minlength",
-          "type": "number | undefined"
-        },
-        {
-          "name": "multiline",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "valid",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "quiet",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "required",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "autocomplete",
-          "type": "string | undefined"
-        }
-      ],
-      "properties": [
-        {
-          "name": "allowedKeys",
-          "attribute": "allowed-keys",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "invalid",
-          "attribute": "invalid",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "label",
-          "attribute": "label",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "pattern",
-          "attribute": "pattern",
-          "type": "string | undefined"
-        },
-        {
-          "name": "grows",
-          "attribute": "grows",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "maxlength",
-          "attribute": "maxlength",
-          "type": "number | undefined"
-        },
-        {
-          "name": "minlength",
-          "attribute": "minlength",
-          "type": "number | undefined"
-        },
-        {
-          "name": "multiline",
-          "attribute": "multiline",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "valid",
-          "attribute": "valid",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "value",
-          "attribute": "value",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "quiet",
-          "attribute": "quiet",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "required",
-          "attribute": "required",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "autocomplete",
-          "attribute": "autocomplete",
-          "type": "string | undefined"
-        },
-        {
-          "name": "disabled",
-          "description": "Disable this control. It will not receive focus or events",
-          "type": "boolean"
-        },
-        {
-          "name": "autofocus",
-          "description": "When this control is rendered, focus it automatically",
-          "type": "boolean"
-        },
-        {
-          "name": "tabIndex",
-          "description": "The tab index to apply to this control. See general documentation about\nthe tabindex HTML property",
-          "type": "number"
-        },
-        {
-          "name": "focusElement",
-          "type": "HTMLInputElement | HTMLTextAreaElement"
-        }
-      ]
-    }
-  ]
-}
+{"version":"experimental","tags":[{"name":"sp-textfield","path":"./src/index.ts","attributes":[{"name":"allowed-keys","type":"string","default":"\"\""},{"name":"invalid","type":"boolean","default":"false"},{"name":"label","type":"string","default":"\"\""},{"name":"placeholder","type":"string","default":"\"\""},{"name":"pattern","type":"string | undefined"},{"name":"grows","type":"boolean","default":"false"},{"name":"maxlength","type":"number | undefined"},{"name":"minlength","type":"number | undefined"},{"name":"multiline","type":"boolean","default":"false"},{"name":"valid","type":"boolean","default":"false"},{"name":"value","type":"string","default":"\"\""},{"name":"quiet","type":"boolean","default":"false"},{"name":"required","type":"boolean","default":"false"},{"name":"autocomplete","type":"string | undefined"}],"properties":[{"name":"allowedKeys","attribute":"allowed-keys","type":"string","default":"\"\""},{"name":"invalid","attribute":"invalid","type":"boolean","default":"false"},{"name":"label","attribute":"label","type":"string","default":"\"\""},{"name":"placeholder","attribute":"placeholder","type":"string","default":"\"\""},{"name":"pattern","attribute":"pattern","type":"string | undefined"},{"name":"grows","attribute":"grows","type":"boolean","default":"false"},{"name":"maxlength","attribute":"maxlength","type":"number | undefined"},{"name":"minlength","attribute":"minlength","type":"number | undefined"},{"name":"multiline","attribute":"multiline","type":"boolean","default":"false"},{"name":"valid","attribute":"valid","type":"boolean","default":"false"},{"name":"value","attribute":"value","type":"string","default":"\"\""},{"name":"quiet","attribute":"quiet","type":"boolean","default":"false"},{"name":"required","attribute":"required","type":"boolean","default":"false"},{"name":"autocomplete","attribute":"autocomplete","type":"string | undefined"},{"name":"disabled","description":"Disable this control. It will not receive focus or events","type":"boolean"},{"name":"autofocus","description":"When this control is rendered, focus it automatically","type":"boolean"},{"name":"tabIndex","description":"The tab index to apply to this control. See general documentation about\nthe tabindex HTML property","type":"number"},{"name":"focusElement","type":"HTMLInputElement | HTMLTextAreaElement"}],"cssProperties":[{"name":"--spectrum-textfield-border-size","default":"var(--spectrum-alias-border-size-thin)","type":""},{"name":"--spectrum-textfield-border-radius","default":"var(--spectrum-alias-border-radius-regular)","type":""},{"name":"--spectrum-textfield-padding-top","default":"var(--spectrum-global-dimension-size-75)","type":""},{"name":"--spectrum-textfield-padding-x","default":"var(--spectrum-global-dimension-size-150)","type":""},{"name":"--spectrum-textfield-padding-bottom","default":"var(--spectrum-global-dimension-size-115)","type":""},{"name":"--spectrum-textfield-min-width","default":"var(--spectrum-global-dimension-size-600)","type":""},{"name":"--spectrum-textfield-height","default":"var(--spectrum-alias-single-line-height)","type":""},{"name":"--spectrum-alias-single-line-width","default":"var(--spectrum-global-dimension-size-2400)","type":""},{"name":"--spectrum-alias-body-text-font-family","default":"var(--spectrum-global-font-family-base)","type":""},{"name":"--spectrum-textfield-text-size","default":"var(--spectrum-alias-font-size-default)","type":""},{"name":"--spectrum-textfield-text-line-height","default":"var(--spectrum-alias-body-text-line-height)","type":""},{"name":"--spectrum-textfield-placeholder-text-font-weight","default":"var(--spectrum-global-font-weight-regular)","type":""},{"name":"--spectrum-textfield-placeholder-text-font-style","default":"var(--spectrum-global-font-style-italic)","type":""},{"name":"--spectrum-icon-alert-medium-width","default":"var(--spectrum-global-dimension-size-225)","type":""},{"name":"--spectrum-icon-alert-medium-height","default":"var(--spectrum-global-dimension-size-225)","type":""},{"name":"--spectrum-textfield-quiet-border-size","default":"var(--spectrum-alias-border-size-thin)","type":""},{"name":"--spectrum-textfield-icon-margin-left","default":"var(--spectrum-global-dimension-size-150)","type":""},{"name":"--spectrum-icon-checkmark-medium-width","default":"undefined","type":""},{"name":"--spectrum-icon-checkmark-medium-height","default":"undefined","type":""},{"name":"--spectrum-textarea-padding-top","default":"var(--spectrum-global-dimension-size-75)","type":""},{"name":"--spectrum-textarea-border-size","default":"var(--spectrum-alias-border-size-thin)","type":""},{"name":"--spectrum-textarea-padding-x","default":"var(--spectrum-global-dimension-size-150)","type":""},{"name":"--spectrum-textarea-padding-bottom","default":"var(--spectrum-global-dimension-size-115)","type":""},{"name":"--spectrum-textfield-quiet-border-radius","default":"0px","type":""},{"name":"--spectrum-textfield-quiet-padding-x","default":"0","type":""},{"name":"--spectrum-textfield-background-color","default":"var(--spectrum-global-color-gray-50)","type":""},{"name":"--spectrum-textfield-border-color","default":"var(--spectrum-global-color-gray-300)","type":""},{"name":"--spectrum-textfield-text-color","default":"var(--spectrum-alias-text-color)","type":""},{"name":"--spectrum-textfield-placeholder-text-color","default":"var(--spectrum-alias-placeholder-text-color)","type":""},{"name":"--spectrum-textfield-border-color-hover","default":"var(--spectrum-global-color-gray-400)","type":""},{"name":"--spectrum-textfield-placeholder-text-color-hover","default":"var(--spectrum-alias-placeholder-text-color-hover)","type":""},{"name":"--spectrum-textfield-border-color-down","default":"var(--spectrum-alias-border-color-down)","type":""},{"name":"--spectrum-textfield-border-color-key-focus","default":"var(--spectrum-alias-border-color-focus)","type":""},{"name":"--spectrum-textfield-background-color-disabled","default":"var(--spectrum-global-color-gray-200)","type":""},{"name":"--spectrum-textfield-border-color-disabled","default":"var(--spectrum-alias-border-color-transparent)","type":""},{"name":"--spectrum-textfield-text-color-disabled","default":"var(--spectrum-alias-text-color-disabled)","type":""},{"name":"--spectrum-textfield-placeholder-text-color-disabled","default":"var(--spectrum-alias-text-color-disabled)","type":""},{"name":"--spectrum-textfield-border-color-error","default":"var(--spectrum-global-color-red-500)","type":""},{"name":"--spectrum-textfield-quiet-background-color","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-textfield-quiet-border-color","default":"var(--spectrum-global-color-gray-300)","type":""},{"name":"--spectrum-textfield-quiet-border-color-hover","default":"var(--spectrum-global-color-gray-400)","type":""},{"name":"--spectrum-textfield-quiet-border-color-down","default":"var(--spectrum-alias-border-color-down)","type":""},{"name":"--spectrum-textfield-quiet-border-color-key-focus","default":"var(--spectrum-alias-border-color-focus)","type":""},{"name":"--spectrum-textfield-quiet-background-color-disabled","default":"var(--spectrum-alias-background-color-transparent)","type":""},{"name":"--spectrum-textfield-quiet-border-color-disabled","default":"var(--spectrum-alias-border-color-mid)","type":""}]}]}

lib/textfield.js

@@ -22,50 +22,51 @@ /*
 import { nothing } from 'lit-html';
-export class Textfield extends Focusable {
-    constructor() {
-        super(...arguments);
-        this.allowedKeys = '';
-        this.invalid = false;
-        this.label = '';
-        this.placeholder = '';
-        this.grows = false;
-        this.multiline = false;
-        this.valid = false;
-        this.value = '';
-        this.quiet = false;
-        this.required = false;
-    }
-    static get styles() {
-        return [
-            ...super.styles,
-            textfieldStyles,
-            checkmarkSmallStyles,
-            alertSmallStyles,
-        ];
-    }
-    get focusElement() {
-        return this.inputElement;
-    }
-    onInput() {
-        if (this.allowedKeys && this.inputElement.value) {
-            const regExp = new RegExp(`^[${this.allowedKeys}]*$`);
-            if (!regExp.test(this.inputElement.value)) {
-                const selectionStart = this.inputElement
-                    .selectionStart;
-                const nextSelectStart = selectionStart - 1;
-                this.inputElement.value = this.value;
-                this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
-                return;
+let Textfield = /** @class */ (() => {
+    class Textfield extends Focusable {
+        constructor() {
+            super(...arguments);
+            this.allowedKeys = '';
+            this.invalid = false;
+            this.label = '';
+            this.placeholder = '';
+            this.grows = false;
+            this.multiline = false;
+            this.valid = false;
+            this.value = '';
+            this.quiet = false;
+            this.required = false;
+        }
+        static get styles() {
+            return [
+                ...super.styles,
+                textfieldStyles,
+                checkmarkSmallStyles,
+                alertSmallStyles,
+            ];
+        }
+        get focusElement() {
+            return this.inputElement;
+        }
+        onInput() {
+            if (this.allowedKeys && this.inputElement.value) {
+                const regExp = new RegExp(`^[${this.allowedKeys}]*$`);
+                if (!regExp.test(this.inputElement.value)) {
+                    const selectionStart = this.inputElement
+                        .selectionStart;
+                    const nextSelectStart = selectionStart - 1;
+                    this.inputElement.value = this.value;
+                    this.inputElement.setSelectionRange(nextSelectStart, nextSelectStart);
+                    return;
+                }
             }
+            this.value = this.inputElement.value;
         }
-        this.value = this.inputElement.value;
-    }
-    onChange() {
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    renderStateIcons() {
-        if (this.invalid) {
-            return html `
+        onChange() {
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        renderStateIcons() {
+            if (this.invalid) {
+                return html `
                 <sp-icon id="invalid" class="alert-small">
@@ -75,5 +76,5 @@ ${AlertSmallIcon({ hidden: true })}
             `;
-        }
-        else if (this.valid) {
-            return html `
+            }
+            else if (this.valid) {
+                return html `
                 <sp-icon id="valid" class="checkmark-small">
@@ -83,13 +84,13 @@ ${CheckmarkSmallIcon({ hidden: true })}
             `;
+            }
+            return nothing;
         }
-        return nothing;
-    }
-    render() {
-        if (this.multiline) {
-            return html `
+        render() {
+            if (this.multiline) {
+                return html `
                 ${this.grows
-                ? html `
+                    ? html `
                           <div id="sizer">${this.value}</div>
                       `
-                : nothing}
+                    : nothing}
                 <!-- @ts-ignore -->
@@ -112,4 +113,4 @@ <textarea
             `;
-        }
-        return html `
+            }
+            return html `
             <!-- @ts-ignore -->
@@ -132,67 +133,70 @@ <input
         `;
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('value') ||
-            (changedProperties.has('required') && this.required)) {
-            this.checkValidity();
         }
-    }
-    checkValidity() {
-        let validity = this.inputElement.checkValidity();
-        if (this.required || (this.value && this.pattern)) {
-            if ((this.disabled || this.multiline) && this.pattern) {
-                const regex = new RegExp(this.pattern);
-                validity = regex.test(this.value);
+        updated(changedProperties) {
+            if (changedProperties.has('value') ||
+                (changedProperties.has('required') && this.required)) {
+                this.checkValidity();
             }
-            this.valid = validity;
-            this.invalid = !validity;
         }
-        return validity;
+        checkValidity() {
+            let validity = this.inputElement.checkValidity();
+            if (this.required || (this.value && this.pattern)) {
+                if ((this.disabled || this.multiline) && this.pattern) {
+                    const regex = new RegExp(this.pattern);
+                    validity = regex.test(this.value);
+                }
+                this.valid = validity;
+                this.invalid = !validity;
+            }
+            return validity;
+        }
     }
-}
-__decorate([
-    property({ attribute: 'allowed-keys' })
-], Textfield.prototype, "allowedKeys", void 0);
-__decorate([
-    query('#input')
-], Textfield.prototype, "inputElement", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Textfield.prototype, "invalid", void 0);
-__decorate([
-    property()
-], Textfield.prototype, "label", void 0);
-__decorate([
-    property()
-], Textfield.prototype, "placeholder", void 0);
-__decorate([
-    property()
-], Textfield.prototype, "pattern", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Textfield.prototype, "grows", void 0);
-__decorate([
-    property({ type: Number })
-], Textfield.prototype, "maxlength", void 0);
-__decorate([
-    property({ type: Number })
-], Textfield.prototype, "minlength", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Textfield.prototype, "multiline", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Textfield.prototype, "valid", void 0);
-__decorate([
-    property({ type: String })
-], Textfield.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Textfield.prototype, "quiet", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], Textfield.prototype, "required", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], Textfield.prototype, "autocomplete", void 0);
+    __decorate([
+        property({ attribute: 'allowed-keys' })
+    ], Textfield.prototype, "allowedKeys", void 0);
+    __decorate([
+        query('#input')
+    ], Textfield.prototype, "inputElement", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Textfield.prototype, "invalid", void 0);
+    __decorate([
+        property()
+    ], Textfield.prototype, "label", void 0);
+    __decorate([
+        property()
+    ], Textfield.prototype, "placeholder", void 0);
+    __decorate([
+        property()
+    ], Textfield.prototype, "pattern", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Textfield.prototype, "grows", void 0);
+    __decorate([
+        property({ type: Number })
+    ], Textfield.prototype, "maxlength", void 0);
+    __decorate([
+        property({ type: Number })
+    ], Textfield.prototype, "minlength", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Textfield.prototype, "multiline", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Textfield.prototype, "valid", void 0);
+    __decorate([
+        property({ type: String })
+    ], Textfield.prototype, "value", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Textfield.prototype, "quiet", void 0);
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], Textfield.prototype, "required", void 0);
+    __decorate([
+        property({ type: String, reflect: true })
+    ], Textfield.prototype, "autocomplete", void 0);
+    return Textfield;
+})();
+export { Textfield };
 //# sourceMappingURL=textfield.js.map

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.3.8",
+    "version": "0.3.9",
     "description": "",
@@ -49,8 +49,8 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/icon": "^0.4.7",
-        "@spectrum-web-components/icons-ui": "^0.1.1",
-        "@spectrum-web-components/shared": "^0.4.6",
-        "tslib": "^1.10.0"
+        "@spectrum-web-components/icon": "^0.4.8",
+        "@spectrum-web-components/icons-ui": "^0.1.2",
+        "@spectrum-web-components/shared": "^0.4.7",
+        "tslib": "^2.0.0"
     },
-    "gitHead": "4068602ee6a355db24878fad4762815eacc0a730"
+    "gitHead": "16b57d15356859cee73278cdf796274e3245320b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181273

increased by4.62%

Number of package files

27

increased by3.85%

Worsened metrics

Lines of code

1638

decreased by-7.04%

Dependency changes

• - Removedtslib@1.14.1(transitive)

• Updated@spectrum-web-components/icon@^0.4.8

• Updated@spectrum-web-components/icons-ui@^0.1.2

• Updated@spectrum-web-components/shared@^0.4.7

• Updatedtslib@^2.0.0