@spectrum-web-components/field-label - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

custom-elements.json

@@ -132,7 +132,41 @@ {
             {
+              "kind": "field",
+              "name": "resolvedElement",
+              "privacy": "private",
+              "default": "new ElementResolutionController(this)"
+            },
+            {
               "kind": "method",
-              "name": "manageFor",
+              "name": "addTarget",
               "privacy": "private",
               "return": {
                 "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "Focusable"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "removeTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "manageTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
                   "text": "Promise<void>"
@@ -139,0 +173,0 @@ }

package.json

 {
     "name": "@spectrum-web-components/field-label",
-    "version": "0.10.1",
+    "version": "0.10.2",
     "publishConfig": {
@@ -60,6 +60,7 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.7.1",
-        "@spectrum-web-components/icon": "^0.12.3",
-        "@spectrum-web-components/icons-ui": "^0.9.3",
-        "@spectrum-web-components/shared": "^0.15.2"
+        "@spectrum-web-components/base": "^0.7.2",
+        "@spectrum-web-components/icon": "^0.12.4",
+        "@spectrum-web-components/icons-ui": "^0.9.4",
+        "@spectrum-web-components/reactive-controllers": "^0.3.4",
+        "@spectrum-web-components/shared": "^0.15.3"
     },
@@ -75,3 +76,3 @@ "devDependencies": {
     ],
-    "gitHead": "8bd87724e91e23df83dbf63a434bbbe10b8daaa6"
+    "gitHead": "370295c7ce89dd64d3d9a4373fd84e861904ec5a"
 }

src/FieldLabel.d.ts

@@ -26,3 +26,6 @@ import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
     private handleClick;
-    private manageFor;
+    private resolvedElement;
+    private addTarget;
+    private removeTarget;
+    private manageTarget;
     private get labelText();
@@ -29,0 +32,0 @@ protected render(): TemplateResult;

src/FieldLabel.dev.js

@@ -24,2 +24,10 @@ "use strict";
 import asteriskIconStyles from "@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js";
+import {
+  conditionAttributeWithId,
+  conditionAttributeWithoutId
+} from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
+import {
+  ElementResolutionController,
+  elementResolverUpdatedSymbol
+} from "@spectrum-web-components/reactive-controllers/src/ElementResolution.js";
 import styles from "./field-label.css.js";
@@ -33,2 +41,3 @@ const _FieldLabel = class extends SizedMixin(SpectrumElement) {
     this.required = false;
+    this.resolvedElement = new ElementResolutionController(this);
   }
@@ -52,9 +61,28 @@ static get styles() {
   }
-  async manageFor() {
-    if (!this.for) {
-      return;
+  addTarget(target) {
+    this.target = target.focusElement || target;
+    const targetParent = this.target.getRootNode();
+    if (targetParent === this.getRootNode()) {
+      conditionAttributeWithId(this.target, "aria-labelledby", [this.id]);
+    } else {
+      this.target.setAttribute("aria-label", this.labelText);
     }
-    const parent = this.getRootNode();
-    const target = parent.querySelector(`#${this.for}`);
+  }
+  removeTarget() {
+    if (this.target) {
+      const targetParent = this.target.getRootNode();
+      if (targetParent === this.getRootNode()) {
+        conditionAttributeWithoutId(this.target, "aria-labelledby", [
+          this.id
+        ]);
+      } else {
+        this.target.removeAttribute("aria-label");
+      }
+    }
+  }
+  async manageTarget() {
+    this.removeTarget();
+    const target = this.resolvedElement.element;
     if (!target) {
+      this.target = target;
       return;
@@ -68,12 +96,3 @@ }
     }
-    this.target = target.focusElement || target;
-    if (this.target) {
-      const targetParent = this.target.getRootNode();
-      if (targetParent === parent) {
-        this.target.setAttribute("aria-labelledby", this.id);
-      } else {
-        this.target.setAttribute("aria-label", this.labelText);
-      }
-    }
-    return Promise.resolve();
+    this.addTarget(target);
   }
@@ -93,3 +112,3 @@ get labelText() {
             <label>
-                <slot @slotchange=${this.manageFor}></slot>
+                <slot></slot>
                 ${this.required ? html`
@@ -114,5 +133,8 @@ <sp-icon-asterisk100
     }
-    if (changes.has("for") || changes.has("id")) {
-      this.manageFor();
+    if (changes.has("for")) {
+      this.resolvedElement.selector = this.for ? `#${this.for}` : "";
     }
+    if (changes.has("id") || changes.has(elementResolverUpdatedSymbol)) {
+      this.manageTarget();
+    }
   }
@@ -119,0 +141,0 @@ };

src/FieldLabel.js

@@ -1,4 +0,4 @@
-"use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var i=(u,a,t,e)=>{for(var s=e>1?void 0:e?d(a,t):a,o=u.length-1,r;o>=0;o--)(r=u[o])&&(s=(e?r(a,t,s):r(s))||s);return e&&s&&p(a,t,s),s};import{html as n,SizedMixin as f,SpectrumElement as m}from"@spectrum-web-components/base";import{property as l,query as h}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js";import g from"@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js";import b from"./field-label.css.js";const c=class extends f(m){constructor(){super(...arguments);this.disabled=!1;this.id="";this.for="";this.required=!1}static get styles(){return[b,g]}handleClick(t){if(!this.target||this.disabled||t.defaultPrevented)return;this.target.focus();const e=this.getRootNode(),s=this.target,o=s.getRootNode(),r=o.host;o===e&&s.forceFocusVisible?s.forceFocusVisible():r&&r.forceFocusVisible&&r.forceFocusVisible()}async manageFor(){if(!this.for)return;const t=this.getRootNode(),e=t.querySelector(`#${this.for}`);if(!!e)return e.localName.search("-")>0&&await customElements.whenDefined(e.localName),typeof e.updateComplete!="undefined"&&await e.updateComplete,this.target=e.focusElement||e,this.target&&(this.target.getRootNode()===t?this.target.setAttribute("aria-labelledby",this.id):this.target.setAttribute("aria-label",this.labelText)),Promise.resolve()}get labelText(){const t=this.slotEl.assignedNodes({flatten:!0});return t.length?t.map(s=>(s.textContent||"").trim()).join(" "):""}render(){return n`
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var i=(c,a,t,r)=>{for(var e=r>1?void 0:r?u(a,t):a,o=c.length-1,s;o>=0;o--)(s=c[o])&&(e=(r?s(a,t,e):s(e))||e);return r&&e&&p(a,t,e),e};import{html as n,SizedMixin as m,SpectrumElement as h}from"@spectrum-web-components/base";import{property as l,query as g}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js";import f from"@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js";import{conditionAttributeWithId as b,conditionAttributeWithoutId as v}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{ElementResolutionController as y,elementResolverUpdatedSymbol as T}from"@spectrum-web-components/reactive-controllers/src/ElementResolution.js";import E from"./field-label.css.js";const d=class extends m(h){constructor(){super(...arguments);this.disabled=!1;this.id="";this.for="";this.required=!1;this.resolvedElement=new y(this)}static get styles(){return[E,f]}handleClick(t){if(!this.target||this.disabled||t.defaultPrevented)return;this.target.focus();const r=this.getRootNode(),e=this.target,o=e.getRootNode(),s=o.host;o===r&&e.forceFocusVisible?e.forceFocusVisible():s&&s.forceFocusVisible&&s.forceFocusVisible()}addTarget(t){this.target=t.focusElement||t,this.target.getRootNode()===this.getRootNode()?b(this.target,"aria-labelledby",[this.id]):this.target.setAttribute("aria-label",this.labelText)}removeTarget(){this.target&&(this.target.getRootNode()===this.getRootNode()?v(this.target,"aria-labelledby",[this.id]):this.target.removeAttribute("aria-label"))}async manageTarget(){this.removeTarget();const t=this.resolvedElement.element;if(!t){this.target=t;return}t.localName.search("-")>0&&await customElements.whenDefined(t.localName),typeof t.updateComplete!="undefined"&&await t.updateComplete,this.addTarget(t)}get labelText(){const t=this.slotEl.assignedNodes({flatten:!0});return t.length?t.map(e=>(e.textContent||"").trim()).join(" "):""}render(){return n`
             <label>
-                <slot @slotchange=${this.manageFor}></slot>
+                <slot></slot>
                 ${this.required?n`
@@ -10,3 +10,3 @@ <sp-icon-asterisk100
             </label>
-        `}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this.handleClick)}willUpdate(t){this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${c.instanceCount++}`),(t.has("for")||t.has("id"))&&this.manageFor()}};export let FieldLabel=c;FieldLabel.instanceCount=0,i([l({type:Boolean,reflect:!0})],FieldLabel.prototype,"disabled",2),i([l({type:String})],FieldLabel.prototype,"id",2),i([l({type:String})],FieldLabel.prototype,"for",2),i([l({type:Boolean,reflect:!0})],FieldLabel.prototype,"required",2),i([h("slot")],FieldLabel.prototype,"slotEl",2),i([l({type:String,reflect:!0,attribute:"side-aligned"})],FieldLabel.prototype,"sideAligned",2);
+        `}firstUpdated(t){super.firstUpdated(t),this.addEventListener("click",this.handleClick)}willUpdate(t){this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${d.instanceCount++}`),t.has("for")&&(this.resolvedElement.selector=this.for?`#${this.for}`:""),(t.has("id")||t.has(T))&&this.manageTarget()}};export let FieldLabel=d;FieldLabel.instanceCount=0,i([l({type:Boolean,reflect:!0})],FieldLabel.prototype,"disabled",2),i([l({type:String})],FieldLabel.prototype,"id",2),i([l({type:String})],FieldLabel.prototype,"for",2),i([l({type:Boolean,reflect:!0})],FieldLabel.prototype,"required",2),i([g("slot")],FieldLabel.prototype,"slotEl",2),i([l({type:String,reflect:!0,attribute:"side-aligned"})],FieldLabel.prototype,"sideAligned",2);
 //# sourceMappingURL=FieldLabel.js.map

test/field-label.test.js

@@ -57,2 +57,44 @@ "use strict";
   });
+  it("observes based on `for` value", async () => {
+    const test = await fixture(
+      html`
+                <div>
+                    <sp-field-label for="test">Input label</sp-field-label>
+                    <input id="test" />
+                    <input id="test" />
+                </div>
+            `
+    );
+    const fieldLabel = test.querySelector("sp-field-label");
+    const el = fieldLabel;
+    const input1 = test.querySelector(
+      "input:nth-of-type(1)"
+    );
+    const input2 = test.querySelector(
+      "input:nth-of-type(2)"
+    );
+    await elementUpdated(fieldLabel);
+    expect(el.target === input1).to.be.true;
+    input1.remove();
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.true;
+    fieldLabel.insertAdjacentElement("beforebegin", input1);
+    await elementUpdated(fieldLabel);
+    expect(el.target === input1).to.be.true;
+    input1.id = "other";
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.true;
+    input2.remove();
+    await elementUpdated(fieldLabel);
+    expect(el.target).to.be.null;
+    input1.id = "test";
+    await elementUpdated(fieldLabel);
+    expect(el.target === input1).to.be.true;
+    fieldLabel.insertAdjacentElement("afterend", input2);
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.false;
+    input2.insertAdjacentElement("afterend", input1);
+    await elementUpdated(fieldLabel);
+    expect(el.target === input2).to.be.true;
+  });
   it('allows unfulfilled "for"', async () => {
@@ -67,7 +109,7 @@ const el = await fixture(
       el,
-      "manageFor"
+      "manageTarget"
     );
     manageSpy.callsFake(async (...args) => {
       try {
-        await FieldLabel.prototype.manageFor.apply(el, ...args);
+        await FieldLabel.prototype.manageTarget.apply(el, ...args);
       } catch (error) {
@@ -79,2 +121,3 @@ return "Error was thrown.";
     el.for = "not-available";
+    el.id = "force-manage-target";
     await elementUpdated(el);
@@ -81,0 +124,0 @@ const result = await manageSpy.returnValues[0];

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133936

increased by7.52%

Lines of code

1181

increased by9.55%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@spectrum-web-components/reactive-controllers@^0.3.4

• + Added@spectrum-web-components/reactive-controllers@0.3.5(transitive)

• Updated@spectrum-web-components/base@^0.7.2

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

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

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