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

Comparing version 0.3.3 to 0.3.4

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## [0.3.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/textfield@0.3.3...@spectrum-web-components/textfield@0.3.4) (2020-03-25)
+
+### Bug Fixes
+
+-   **textfield:** update validation path, add "allowed-keys" ([ae9f85d](https://github.com/adobe/spectrum-web-components/commit/ae9f85d))
+
 ## [0.3.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/textfield@0.3.2...@spectrum-web-components/textfield@0.3.3) (2020-03-11)
@@ -8,0 +14,0 @@

custom-elements.json

@@ -8,2 +8,7 @@ {
         {
+          "name": "allowed-keys",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
           "name": "invalid",
@@ -64,2 +69,8 @@ "type": "boolean",
         {
+          "name": "allowedKeys",
+          "attribute": "allowed-keys",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
           "name": "invalid",
@@ -66,0 +77,0 @@ "attribute": "invalid",

lib/textfield.d.ts

@@ -10,3 +10,4 @@ import { CSSResultArray, TemplateResult, PropertyValues } from 'lit-element';
 export declare class Textfield extends Focusable {
-    static readonly styles: CSSResultArray;
+    static get styles(): CSSResultArray;
+    allowedKeys: string;
     private inputElement;
@@ -24,3 +25,3 @@ invalid: boolean;
     autocomplete?: HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'];
-    readonly focusElement: HTMLInputElement | HTMLTextAreaElement;
+    get focusElement(): HTMLInputElement | HTMLTextAreaElement;
     protected onInput(): void;
@@ -27,0 +28,0 @@ protected onChange(): void;

lib/textfield.js

@@ -28,2 +28,3 @@ /*
         super(...arguments);
+        this.allowedKeys = '';
         this.invalid = false;
@@ -51,2 +52,13 @@ this.label = '';
     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;
@@ -125,3 +137,4 @@ }
     updated(changedProperties) {
-        if (changedProperties.has('value')) {
+        if (changedProperties.has('value') ||
+            (changedProperties.has('required') && this.required)) {
             this.checkValidity();
@@ -131,3 +144,3 @@ }
     checkValidity() {
-        if (this.value && (this.pattern || this.required)) {
+        if (this.required || (this.value && this.pattern)) {
             let validity = this.inputElement.checkValidity();
@@ -152,2 +165,5 @@ if ((this.disabled || this.multiline) && this.pattern) {
 __decorate([
+    property({ attribute: 'allowed-keys' })
+], Textfield.prototype, "allowedKeys", void 0);
+__decorate([
     query('#input')
@@ -154,0 +170,0 @@ ], Textfield.prototype, "inputElement", void 0);

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.3.3",
+    "version": "0.3.4",
     "description": "",
@@ -50,3 +50,3 @@ "main": "lib/index.js",
     },
-    "gitHead": "d5b370be9515cb1458c436fd4b7c8689e2bfb933"
+    "gitHead": "cab535e19d13e706a77695266bdffe7648881df6"
 }

src/textfield.ts

@@ -46,2 +46,5 @@ /*
 
+    @property({ attribute: 'allowed-keys' })
+    allowedKeys = '';
+
     @query('#input')
@@ -90,2 +93,16 @@ private inputElement!: HTMLInputElement | HTMLTextAreaElement;
     protected onInput(): void {
+        if (this.allowedKeys && this.inputElement.value) {
+            const regExp = new RegExp(`^[${this.allowedKeys}]*$`);
+            if (!regExp.test(this.inputElement.value)) {
+                const selectionStart = this.inputElement
+                    .selectionStart as number;
+                const nextSelectStart = selectionStart - 1;
+                this.inputElement.value = this.value;
+                this.inputElement.setSelectionRange(
+                    nextSelectStart,
+                    nextSelectStart
+                );
+                return;
+            }
+        }
         this.value = this.inputElement.value;
@@ -169,3 +186,6 @@ }
     protected updated(changedProperties: PropertyValues): void {
-        if (changedProperties.has('value')) {
+        if (
+            changedProperties.has('value') ||
+            (changedProperties.has('required') && this.required)
+        ) {
             this.checkValidity();
@@ -176,3 +196,3 @@ }
     public checkValidity(): boolean {
-        if (this.value && (this.pattern || this.required)) {
+        if (this.required || (this.value && this.pattern)) {
             let validity = this.inputElement.checkValidity();
@@ -179,0 +199,0 @@ if ((this.disabled || this.multiline) && this.pattern) {

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

146483

increased by2.41%

Lines of code

1605

increased by3.02%

No dependency changes