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

Comparing version 0.8.0-devmode.0 to 0.8.0

package.json

 {
     "name": "@spectrum-web-components/field-label",
-    "version": "0.8.0-devmode.0+7b0ea531e",
+    "version": "0.8.0",
     "publishConfig": {
@@ -60,6 +60,6 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.6.0",
-        "@spectrum-web-components/icon": "^0.12.0-devmode.0+7b0ea531e",
-        "@spectrum-web-components/icons-ui": "^0.9.0-devmode.0+7b0ea531e",
-        "@spectrum-web-components/shared": "^0.15.0-devmode.0+7b0ea531e",
+        "@spectrum-web-components/base": "^0.7.0",
+        "@spectrum-web-components/icon": "^0.12.0",
+        "@spectrum-web-components/icons-ui": "^0.9.0",
+        "@spectrum-web-components/shared": "^0.15.0",
         "tslib": "^2.0.0"
@@ -76,3 +76,3 @@ },
     ],
-    "gitHead": "7b0ea531e9c7225c8964c5429bc5fd005618b80e"
+    "gitHead": "05c81318844160db3f8156144106e643507fef97"
 }

sp-field-label.js

@@ -1,3 +0,2 @@
-import { FieldLabel } from "./src/FieldLabel.js";
-customElements.define("sp-field-label", FieldLabel);
+import{FieldLabel as e}from"./src/FieldLabel.js";customElements.define("sp-field-label",e);
 //# sourceMappingURL=sp-field-label.js.map

src/field-label.css.js

@@ -1,3 +0,2 @@
-import { css } from "@spectrum-web-components/base";
-const styles = css`
+import{css as e}from"@spectrum-web-components/base";const t=e`
 :host([size=s]){--spectrum-fieldlabel-padding-top:var(
@@ -82,4 +81,3 @@ --spectrum-fieldlabel-s-padding-top,var(--spectrum-global-dimension-size-50)
 )}:host([side-aligned=start]) .required-icon{margin-top:0}
-`;
-export default styles;
+`;export default t;
 //# sourceMappingURL=field-label.css.js.map

src/FieldLabel.js

@@ -1,128 +0,11 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
-  return result;
-};
-import {
-  html,
-  SizedMixin,
-  SpectrumElement
-} from "@spectrum-web-components/base";
-import {
-  property,
-  query
-} from "@spectrum-web-components/base/src/decorators.js";
-import "@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js";
-import asteriskIconStyles from "@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js";
-import styles from "./field-label.css.js";
-const _FieldLabel = class extends SizedMixin(SpectrumElement) {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.id = "";
-    this.for = "";
-    this.required = false;
-  }
-  static get styles() {
-    return [styles, asteriskIconStyles];
-  }
-  handleClick(event) {
-    if (!this.target || this.disabled || event.defaultPrevented)
-      return;
-    this.target.focus();
-    const parent = this.getRootNode();
-    const target = this.target;
-    const targetParent = target.getRootNode();
-    const targetHost = targetParent.host;
-    if (targetParent === parent && target.forceFocusVisible) {
-      target.forceFocusVisible();
-    } else if (targetHost && targetHost.forceFocusVisible) {
-      targetHost.forceFocusVisible();
-    }
-  }
-  async manageFor() {
-    if (!this.for) {
-      return;
-    }
-    const parent = this.getRootNode();
-    const target = parent.querySelector(`#${this.for}`);
-    if (!target) {
-      return;
-    }
-    if (target.localName.search("-") > 0) {
-      await customElements.whenDefined(target.localName);
-    }
-    if (typeof target.updateComplete !== "undefined") {
-      await target.updateComplete;
-    }
-    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();
-  }
-  get labelText() {
-    const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
-    if (!assignedNodes.length) {
-      return "";
-    }
-    const labelText = assignedNodes.map((node) => (node.textContent || "").trim());
-    return labelText.join(" ");
-  }
-  render() {
-    return html`
+var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var o=(u,t,e,s)=>{for(var r=s>1?void 0:s?d(t,e):t,i=u.length-1,l;i>=0;i--)(l=u[i])&&(r=(s?l(t,e,r):l(r))||r);return s&&r&&p(t,e,r),r};import{html as n,SizedMixin as f,SpectrumElement as m}from"@spectrum-web-components/base";import{property as a,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,r=s.getRootNode(),i=r.host;r===e&&s.forceFocusVisible?s.forceFocusVisible():i&&i.forceFocusVisible&&i.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`
             <label>
                 <slot @slotchange=${this.manageFor}></slot>
-                ${this.required ? html`
+                ${this.required?n`
                           <sp-icon-asterisk100
                               class="required-icon spectrum-UIIcon-Asterisk100"
                           ></sp-icon-asterisk100>
-                      ` : html``}
+                      `:n``}
             </label>
-        `;
-  }
-  firstUpdated(changes) {
-    super.firstUpdated(changes);
-    this.addEventListener("click", this.handleClick);
-  }
-  willUpdate(changes) {
-    if (!this.hasAttribute("id")) {
-      this.setAttribute("id", `${this.tagName.toLowerCase()}-${_FieldLabel.instanceCount++}`);
-    }
-    if (changes.has("for") || changes.has("id")) {
-      this.manageFor();
-    }
-  }
-};
-export let FieldLabel = _FieldLabel;
-FieldLabel.instanceCount = 0;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], FieldLabel.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: String })
-], FieldLabel.prototype, "id", 2);
-__decorateClass([
-  property({ type: String })
-], FieldLabel.prototype, "for", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], FieldLabel.prototype, "required", 2);
-__decorateClass([
-  query("slot")
-], FieldLabel.prototype, "slotEl", 2);
-__decorateClass([
-  property({ type: String, reflect: true, 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()}-${c.instanceCount++}`),(t.has("for")||t.has("id"))&&this.manageFor()}};export let FieldLabel=c;FieldLabel.instanceCount=0,o([a({type:Boolean,reflect:!0})],FieldLabel.prototype,"disabled",2),o([a({type:String})],FieldLabel.prototype,"id",2),o([a({type:String})],FieldLabel.prototype,"for",2),o([a({type:Boolean,reflect:!0})],FieldLabel.prototype,"required",2),o([h("slot")],FieldLabel.prototype,"slotEl",2),o([a({type:String,reflect:!0,attribute:"side-aligned"})],FieldLabel.prototype,"sideAligned",2);
 //# sourceMappingURL=FieldLabel.js.map

src/index.js

@@ -1,2 +0,2 @@
-export * from "./FieldLabel.js";
+export*from"./FieldLabel.js";
 //# sourceMappingURL=index.js.map

src/spectrum-field-label.css.js

@@ -1,3 +0,2 @@
-import { css } from "@spectrum-web-components/base";
-const styles = css`
+import{css as e}from"@spectrum-web-components/base";const t=e`
 :host([size=s]){--spectrum-fieldlabel-padding-top:var(
@@ -82,4 +81,3 @@ --spectrum-fieldlabel-s-padding-top,var(--spectrum-global-dimension-size-50)
 )}
-`;
-export default styles;
+`;export default t;
 //# sourceMappingURL=spectrum-field-label.css.js.map

stories/field-label.stories.js

@@ -1,11 +0,2 @@
-import { html } from "@spectrum-web-components/base";
-import "@spectrum-web-components/textfield/sp-textfield.js";
-import "@spectrum-web-components/picker/sp-picker.js";
-import "@spectrum-web-components/field-label/sp-field-label.js";
-export default {
-  title: "Field Label",
-  component: "sp-field-label"
-};
-export const standard = () => {
-  return html`
+import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-components/textfield/sp-textfield.js";import"@spectrum-web-components/picker/sp-picker.js";import"@spectrum-web-components/field-label/sp-field-label.js";export default{title:"Field Label",component:"sp-field-label"};export const standard=()=>e`
         <sp-field-label for="lifestory-1">Life Story</sp-field-label>
@@ -24,6 +15,3 @@ <sp-textfield
         </sp-field-label>
-    `;
-};
-export const sideAlignStart = () => {
-  return html`
+    `,sideAlignStart=()=>e`
         <sp-field-label
@@ -40,6 +28,3 @@ for="lifestory"
         ></sp-textfield>
-    `;
-};
-export const sideAlignEnd = () => {
-  return html`
+    `,sideAlignEnd=()=>e`
         <sp-field-label for="lifestory" side-aligned="end" style="width: 72px;">
@@ -52,6 +37,3 @@ Life Story
         ></sp-textfield>
-    `;
-};
-export const required = () => {
-  return html`
+    `,required=()=>e`
         <sp-field-label for="lifestory-1" required>Life Story</sp-field-label>
@@ -103,6 +85,3 @@ <sp-textfield
         ></sp-textfield>
-    `;
-};
-export const picker = () => {
-  return html`
+    `,picker=()=>e`
         <sp-field-label for="country" required>
@@ -120,10 +99,6 @@ Select a Country with a very long label, too long in fact
         </sp-picker>
-    `;
-};
-export const nativeInput = () => {
-  return html`
+    `,nativeInput=()=>e`
         <sp-field-label for="lifestory-1" required>Life Story</sp-field-label>
         <input placeholder="Enter your life story" id="lifestory-1" />
     `;
-};
 //# sourceMappingURL=field-label.stories.js.map

test/benchmark/basic-test.js

@@ -1,7 +0,4 @@
-import "@spectrum-web-components/field-label/sp-field-label.js";
-import { html } from "lit";
-import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
-measureFixtureCreation(html`
+import"@spectrum-web-components/field-label/sp-field-label.js";import{html as e}from"lit";import{measureFixtureCreation as r}from"../../../../test/benchmark/helpers.js";r(e`
     <sp-field-label open></sp-field-label>
 `);
 //# sourceMappingURL=basic-test.js.map

test/field-label.test-vrt.js

@@ -1,4 +0,2 @@
-import * as stories from "../stories/field-label.stories.js";
-import { regressVisuals } from "../../../test/visual/test.js";
-regressVisuals("FieldLabelStories", stories);
+import*as r from"../stories/field-label.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("FieldLabelStories",r);
 //# sourceMappingURL=field-label.test-vrt.js.map

test/field-label.test.js

@@ -1,12 +0,2 @@
-import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
-import { stub } from "sinon";
-import "@spectrum-web-components/textfield/sp-textfield.js";
-import "@spectrum-web-components/picker/sp-picker.js";
-import "@spectrum-web-components/menu/sp-menu.js";
-import "@spectrum-web-components/menu/sp-menu-item.js";
-import "@spectrum-web-components/field-label/sp-field-label.js";
-import { FieldLabel } from "@spectrum-web-components/field-label";
-import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
-describe("FieldLabel", () => {
-  testForLitDevWarnings(async () => await fixture(html`
+import{elementUpdated as a,expect as i,fixture as s,html as o}from"@open-wc/testing";import{stub as n}from"sinon";import"@spectrum-web-components/textfield/sp-textfield.js";import"@spectrum-web-components/picker/sp-picker.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/field-label/sp-field-label.js";import{FieldLabel as d}from"@spectrum-web-components/field-label";import{testForLitDevWarnings as c}from"../../../test/testing-helpers.js";describe("FieldLabel",()=>{c(async()=>await s(o`
                     <div>
@@ -16,5 +6,3 @@ <sp-field-label for="test">Input label</sp-field-label>
                     </div>
-                `));
-  it("loads default field-label accessibly", async () => {
-    const el = await fixture(html`
+                `)),it("loads default field-label accessibly",async()=>{const e=await s(o`
                 <div>
@@ -24,8 +12,3 @@ <sp-field-label for="test">Input label</sp-field-label>
                 </div>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it("loads [required] field-label accessibly", async () => {
-    const el = await fixture(html`
+            `);await a(e),await i(e).to.be.accessible()}),it("loads [required] field-label accessibly",async()=>{const e=await s(o`
                 <div>
@@ -37,34 +20,7 @@ <sp-field-label required for="test">
                 </div>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it('loads with no "for"', async () => {
-    const el = await fixture(html`
+            `);await a(e),await i(e).to.be.accessible()}),it('loads with no "for"',async()=>{const e=await s(o`
                 <sp-field-label>Input label</sp-field-label>
-            `);
-    await elementUpdated(el);
-    await expect(el).to.be.accessible();
-  });
-  it('allows unfulfilled "for"', async () => {
-    const el = await fixture(html`
+            `);await a(e),await i(e).to.be.accessible()}),it('allows unfulfilled "for"',async()=>{const e=await s(o`
                 <sp-field-label>Input label</sp-field-label>
-            `);
-    await elementUpdated(el);
-    const manageSpy = stub(el, "manageFor");
-    manageSpy.callsFake(async (...args) => {
-      try {
-        await FieldLabel.prototype.manageFor.apply(el, ...args);
-      } catch (error) {
-        return "Error was thrown.";
-      }
-      return "No error was thrown.";
-    });
-    el.for = "not-available";
-    await elementUpdated(el);
-    const result = await manageSpy.returnValues[0];
-    expect(result).to.equal("No error was thrown.");
-  });
-  it('associates itself to an element whose "id" matches its "for" attribute', async () => {
-    const test = await fixture(html`
+            `);await a(e);const t=n(e,"manageFor");t.callsFake(async(...r)=>{try{await d.prototype.manageFor.apply(e,...r)}catch(p){return"Error was thrown."}return"No error was thrown."}),e.for="not-available",await a(e);const l=await t.returnValues[0];i(l).to.equal("No error was thrown.")}),it('associates itself to an element whose "id" matches its "for" attribute',async()=>{const e=await s(o`
                 <div>
@@ -74,11 +30,3 @@ <sp-field-label required for="test"></sp-field-label>
                 </div>
-            `);
-    const el = test.querySelector("sp-field-label");
-    const input = test.querySelector("input");
-    await elementUpdated(el);
-    expect(input.hasAttribute("aria-labelledby"));
-    expect(input.getAttribute("aria-labelledby")).to.equal(el.id);
-  });
-  it("passed clicks to assiciated form element as focus", async () => {
-    const test = await fixture(html`
+            `),t=e.querySelector("sp-field-label"),l=e.querySelector("input");await a(t),i(l.hasAttribute("aria-labelledby")),i(l.getAttribute("aria-labelledby")).to.equal(t.id)}),it("passed clicks to assiciated form element as focus",async()=>{const e=await s(o`
                 <div>
@@ -88,12 +36,3 @@ <sp-field-label required for="test"></sp-field-label>
                 </div>
-            `);
-    const el = test.querySelector("sp-field-label");
-    const input = test.querySelector("input");
-    await elementUpdated(el);
-    el.click();
-    await elementUpdated(el);
-    expect(document.activeElement).to.equal(input);
-  });
-  it('associates itself to an element with a focueElement whose "id" matches its "for" attribute', async () => {
-    const test = await fixture(html`
+            `),t=e.querySelector("sp-field-label"),l=e.querySelector("input");await a(t),t.click(),await a(t),i(document.activeElement).to.equal(l)}),it('associates itself to an element with a focueElement whose "id" matches its "for" attribute',async()=>{const e=await s(o`
                 <div>
@@ -103,11 +42,3 @@ <sp-field-label required for="test"></sp-field-label>
                 </div>
-            `);
-    const el = test.querySelector("sp-field-label");
-    const input = test.querySelector("sp-textfield").focusElement;
-    await elementUpdated(el);
-    expect(input.hasAttribute("aria-label"));
-    expect(input.getAttribute("aria-label")).to.equal((el.textContent || "").trim());
-  });
-  it("passed clicks to assiciated form element with a focueElement as focus", async () => {
-    const test = await fixture(html`
+            `),t=e.querySelector("sp-field-label"),l=e.querySelector("sp-textfield").focusElement;await a(t),i(l.hasAttribute("aria-label")),i(l.getAttribute("aria-label")).to.equal((t.textContent||"").trim())}),it("passed clicks to assiciated form element with a focueElement as focus",async()=>{const e=await s(o`
                 <div>
@@ -117,12 +48,3 @@ <sp-field-label required for="test"></sp-field-label>
                 </div>
-            `);
-    const el = test.querySelector("sp-field-label");
-    const input = test.querySelector("sp-textfield");
-    await elementUpdated(el);
-    el.click();
-    await elementUpdated(el);
-    expect(document.activeElement).to.equal(input);
-  });
-  it("forces focus visible when available", async () => {
-    const test = await fixture(html`
+            `),t=e.querySelector("sp-field-label"),l=e.querySelector("sp-textfield");await a(t),t.click(),await a(t),i(document.activeElement).to.equal(l)}),it("forces focus visible when available",async()=>{const e=await s(o`
                 <div>
@@ -134,15 +56,3 @@ <sp-field-label required for="test"></sp-field-label>
                 </div>
-            `);
-    const el = test.querySelector("sp-field-label");
-    const picker = test.querySelector("sp-picker");
-    await elementUpdated(el);
-    await elementUpdated(picker);
-    expect(picker.focused).to.be.false;
-    el.click();
-    await elementUpdated(el);
-    await elementUpdated(picker);
-    expect(document.activeElement).to.equal(picker);
-    expect(picker.focused).to.be.true;
-  });
-});
+            `),t=e.querySelector("sp-field-label"),l=e.querySelector("sp-picker");await a(t),await a(l),i(l.focused).to.be.false,t.click(),await a(t),await a(l),i(document.activeElement).to.equal(l),i(l.focused).to.be.true})});
 //# sourceMappingURL=field-label.test.js.map

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

131077

decreased by-2.75%

Lines of code

987

decreased by-18.9%

Dependency changes

• + Added@lit-labs/ssr-dom-shim@1.3.0(transitive)

• - Removed@lit-labs/ssr-dom-shim@1.2.1(transitive)

• - Removed@spectrum-web-components/base@0.6.0(transitive)

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

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

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

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