@spectrum-web-components/textfield 0.12.1-devmode2.0 → 0.13.1

package/test/textarea.test-vrt.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["textarea.test-vrt.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/textarea.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TextareaStories', stories);\n"],
-  "mappings": "AAYA;AACA;AAEA,eAAe,mBAAmB,OAAO;",
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,mBAAmB,OAAO;",
   "names": []
 }

package/test/textfield.test-vrt.js

@@ -1,3 +1,4 @@
+"use strict";
 import * as stories from "../stories/textfield.stories.js";
 import { regressVisuals } from "../../../test/visual/test.js";
 regressVisuals("TextfieldStories", stories);

package/test/textfield.test-vrt.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["textfield.test-vrt.ts"],
   "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/textfield.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TextfieldStories', stories);\n"],
-  "mappings": "AAYA;AACA;AAEA,eAAe,oBAAoB,OAAO;",
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,oBAAoB,OAAO;",
   "names": []
 }

package/test/textfield.test.js

@@ -1,3 +1,4 @@
+"use strict";
 import { elementUpdated, expect, html, litFixture } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
 import { sendMouse } from "../../../test/plugins/browser.js";
@@ -6,27 +7,37 @@ import "@spectrum-web-components/help-text/sp-help-text.js";
 import "@spectrum-web-components/textfield/sp-textfield.js";
 import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
 describe("Textfield", () => {
-  testForLitDevWarnings(async () => await litFixture(html`
+  testForLitDevWarnings(
+    async () => await litFixture(
+      html`
                     <sp-textfield label="Enter Your Name"></sp-textfield>
-                `));
+                `
+    )
+  );
   it("loads default textfield accessibly", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield label="Enter Your Name"></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     await expect(el).to.be.accessible();
   });
   it("loads multiline textfield accessibly", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield label="Enter your name" multiline></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     await expect(el).to.be.accessible();
   });
   it("manages tabIndex while disabled", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder="Enter Your Name"></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.tabIndex).to.equal(0);
     el.disabled = true;
@@ -47,9 +58,11 @@ describe("Textfield", () => {
   });
   it("loads", async () => {
     const testPlaceholder = "Enter your name";
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder=${testPlaceholder}></sp-textfield>
-            `);
+            `
+    );
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
     expect(input).to.not.be.null;
@@ -57,24 +70,28 @@ describe("Textfield", () => {
     expect(placeholder).to.equal(testPlaceholder);
   });
   it("multiline", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("textarea") : null;
     expect(input).to.not.be.null;
   });
   it("resizes by default", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     multiline
                     label="No resize control"
                     placeholder="No resize control"
                 ></sp-textfield>
-            `);
+            `
+    );
     const startBounds = el.getBoundingClientRect();
     await sendMouse({
       steps: [
@@ -99,14 +116,16 @@ describe("Textfield", () => {
     expect(endBounds.height).to.be.greaterThan(startBounds.height);
   });
   it("accepts resize styling", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     multiline
                     style="resize: none;"
                     label="No resize control"
                     placeholder="No resize control"
                 ></sp-textfield>
-            `);
+            `
+    );
     const startBounds = el.getBoundingClientRect();
     await sendMouse({
       steps: [
@@ -131,33 +150,38 @@ describe("Textfield", () => {
     expect(endBounds.height).equals(startBounds.height);
   });
   it("grows", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     multiline
                     grows
                 ></sp-textfield>
-            `);
+            `
+    );
     expect(el).to.not.equal(void 0);
     const sizer = el.shadowRoot ? el.shadowRoot.querySelector("#sizer") : null;
     expect(sizer).to.not.be.null;
   });
   it("valid", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
                     value="123"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - multiline", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
@@ -165,55 +189,63 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - required", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value="123"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - multiline - required", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value="123"
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - boundary-type assertions", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^[\\d]+$"
                     value="123"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - multiline - boundary-type assertions", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^[\\d]+$"
@@ -221,28 +253,32 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - unicode", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     pattern="\\p{L}{4,8}"
                     value="你的名字"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("valid - multiline - unicode", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     pattern="\\p{L}{4,8}"
@@ -250,28 +286,32 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#valid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - multiline", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="[\\d]+"
@@ -279,55 +319,63 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - required", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value=""
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - multiline - required", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     value=""
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - unicode", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="\\p{N}+"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - multiline - unicode", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="\\p{N}+"
@@ -335,28 +383,32 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - boundary-type assertions", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^\\p{N}+$"
                     value="123 not valid"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
     expect(input).to.not.be.null;
   });
   it("invalid - multiline - boundary-type assertions", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your number"
                     pattern="^\\p{N}+$"
@@ -364,7 +416,8 @@ describe("Textfield", () => {
                     required
                     multiline
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el).to.not.equal(void 0);
     const input = el.shadowRoot ? el.shadowRoot.querySelector("#invalid") : null;
@@ -377,9 +430,11 @@ describe("Textfield", () => {
       activeElement = path[0];
     };
     document.addEventListener("focusin", onFocusIn);
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder="Enter your name"></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     el.focus();
     await elementUpdated(el);
@@ -393,12 +448,14 @@ describe("Textfield", () => {
       activeElement = path[0];
     };
     document.addEventListener("focusin", onFocusIn);
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     disabled
                     placeholder="Enter your name"
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     el.focus();
     await elementUpdated(el);
@@ -413,9 +470,11 @@ describe("Textfield", () => {
   });
   it("accepts input", async () => {
     const testValue = "Test Name";
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield placeholder="Enter your name"></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     el.focusElement.value = testValue;
     el.focusElement.dispatchEvent(new Event("input"));
@@ -423,9 +482,11 @@ describe("Textfield", () => {
   });
   it("selects", async () => {
     const testValue = "Test Name";
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield value=${testValue}></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(testValue);
     el.focus();
@@ -435,9 +496,11 @@ describe("Textfield", () => {
   });
   it("setSelectionRange", async () => {
     const testValue = "Test Name";
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield value=${testValue}></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal(testValue);
     el.focus();
@@ -446,14 +509,16 @@ describe("Textfield", () => {
     expect(el.value).to.equal("Name");
   });
   it("accepts maxlength", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     maxlength="3"
                     minlength="2"
                     required
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     el.focus();
     await sendKeys({
@@ -499,12 +564,14 @@ describe("Textfield", () => {
     const onChange = (event) => {
       eventSource = event.composedPath()[0];
     };
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield
                     placeholder="Enter your name"
                     @change=${onChange}
                 ></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     el.focusElement.value = testValue;
     el.focusElement.dispatchEvent(new Event("input"));
@@ -514,18 +581,22 @@ describe("Textfield", () => {
     expect(testSource).to.equal(el);
   });
   it("passes through `autocomplete` attribute", async () => {
-    let el = await litFixture(html`
+    let el = await litFixture(
+      html`
                 <sp-textfield autocomplete="off"></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     let input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
     expect(input).to.exist;
     if (input) {
       expect(input.getAttribute("autocomplete")).to.equal("off");
     }
-    el = await litFixture(html`
+    el = await litFixture(
+      html`
                 <sp-textfield></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     input = el.shadowRoot ? el.shadowRoot.querySelector("input") : null;
     expect(input).to.exist;
@@ -534,9 +605,11 @@ describe("Textfield", () => {
     }
   });
   it("tests on `required` changes", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield value=""></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.invalid).to.be.false;
     el.required = true;
@@ -544,9 +617,11 @@ describe("Textfield", () => {
     expect(el.invalid).to.be.true;
   });
   it("manages `allowed-keys`", async () => {
-    const el = await litFixture(html`
+    const el = await litFixture(
+      html`
                 <sp-textfield allowed-keys="asdf"></sp-textfield>
-            `);
+            `
+    );
     await elementUpdated(el);
     expect(el.value).to.equal("");
     const inputElement = el.focusElement;
@@ -577,39 +652,49 @@ describe("Textfield", () => {
         "password"
       ];
       for await (const t of types) {
-        const el = await litFixture(html`
+        const el = await litFixture(
+          html`
                         <sp-textfield type=${t}></sp-textfield>
-                    `);
+                    `
+        );
         expect(el.type).equals(t);
         el.setAttribute("type", "url");
         expect(el.type).equals("url");
       }
     });
     it('represents invalid and missing attributes as "text"', async () => {
-      const el1 = await litFixture(html`
+      const el1 = await litFixture(
+        html`
                     <sp-textfield></sp-textfield>
-                `);
-      const el2 = await litFixture(html`
+                `
+      );
+      const el2 = await litFixture(
+        html`
                     <sp-textfield type="time"></sp-textfield>
-                `);
+                `
+      );
       expect(el1.type).equals("text");
       expect(el2.type).equals("text");
       el1.setAttribute("type", "submit");
       expect(el1.type).equals("text");
     });
     it("reflects valid property assignments", async () => {
-      const el = await litFixture(html`
+      const el = await litFixture(
+        html`
                     <sp-textfield type="url"></sp-textfield>
-                `);
+                `
+      );
       el.type = "email";
       await elementUpdated(el);
       expect(el.getAttribute("type")).equals("email");
       expect(el.type).equals("email");
     });
     it('reflects invalid assignments but sets state to "text"', async () => {
-      const el = await litFixture(html`
+      const el = await litFixture(
+        html`
                     <sp-textfield type="url"></sp-textfield>
-                `);
+                `
+      );
       el.type = "range";
       await elementUpdated(el);
       expect(el.getAttribute("type")).equals("range");
@@ -649,7 +734,9 @@ describe("Textfield", () => {
                     </sp-help-text>
                 </sp-textfield>
             `);
-      const negativeHelpText = el.querySelector('[slot="negative-help-text"]');
+      const negativeHelpText = el.querySelector(
+        '[slot="negative-help-text"]'
+      );
       await elementUpdated(el);
       expect(negativeHelpText.variant).to.equal("neutral");
       await findDescribedNode(name, description);
@@ -669,7 +756,9 @@ describe("Textfield", () => {
                     </sp-help-text>
                 </sp-textfield>
             `);
-      const negativeHelpText = el.querySelector('[slot="negative-help-text"]');
+      const negativeHelpText = el.querySelector(
+        '[slot="negative-help-text"]'
+      );
       await elementUpdated(el);
       expect(negativeHelpText.variant).to.equal("neutral");
       await findDescribedNode(name, description);