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

Comparing version 0.7.0 to 0.7.1

package.json

 {
     "name": "@spectrum-web-components/iconset",
-    "version": "0.7.0",
+    "version": "0.7.1",
     "publishConfig": {
@@ -72,3 +72,3 @@ "access": "public"
     ],
-    "gitHead": "05c81318844160db3f8156144106e643507fef97"
+    "gitHead": "15588c72c774b17cfac605b20ac52a27d123bd03"
 }

README.md

@@ -31,1 +31,5 @@ ## Description
 ```
+
+### Deprecated
+
+Iconsets have been deprecated and will be removed from the project in an upcoming version. Using a technique that ensures only the icons actually leveraged in your application are present in your build, like UI Icons (../icons-ui/) or Workflow Icons (../icons-workflow/), will ensure smaller bundles and higher performance for you visitor. For non-Spectrum icons, you can still slot SVG and image content into an [`sp-icon` element](../icon/) or sanitize the SVG to a template literal so that it can be returned from the `render()` method in an extension of `IconBase` to create your own named icon element.

src/iconset-registry.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 export class IconsetRegistry {
@@ -2,0 +3,0 @@ constructor() {

src/iconset-registry.js

@@ -1,2 +0,2 @@
-export class IconsetRegistry{constructor(){this.iconsetMap=new Map}static getInstance(){return IconsetRegistry.instance||(IconsetRegistry.instance=new IconsetRegistry),IconsetRegistry.instance}addIconset(e,t){this.iconsetMap.set(e,t);const n=new CustomEvent("sp-iconset-added",{bubbles:!0,composed:!0,detail:{name:e,iconset:t}});setTimeout(()=>window.dispatchEvent(n),0)}removeIconset(e){this.iconsetMap.delete(e);const t=new CustomEvent("sp-iconset-removed",{bubbles:!0,composed:!0,detail:{name:e}});setTimeout(()=>window.dispatchEvent(t),0)}getIconset(e){return this.iconsetMap.get(e)}}
+"use strict";export class IconsetRegistry{constructor(){this.iconsetMap=new Map}static getInstance(){return IconsetRegistry.instance||(IconsetRegistry.instance=new IconsetRegistry),IconsetRegistry.instance}addIconset(e,t){this.iconsetMap.set(e,t);const n=new CustomEvent("sp-iconset-added",{bubbles:!0,composed:!0,detail:{name:e,iconset:t}});setTimeout(()=>window.dispatchEvent(n),0)}removeIconset(e){this.iconsetMap.delete(e);const t=new CustomEvent("sp-iconset-removed",{bubbles:!0,composed:!0,detail:{name:e}});setTimeout(()=>window.dispatchEvent(t),0)}getIconset(e){return this.iconsetMap.get(e)}}
 //# sourceMappingURL=iconset-registry.js.map

src/iconset-svg.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -54,3 +55,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
     const content = sourceSvg.cloneNode(true);
-    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const svg = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "svg"
+    );
     const viewBox = content.getAttribute("viewBox") || "";
@@ -57,0 +61,0 @@ const cssText = "pointer-events: none; display: block; width: 100%; height: 100%;";

src/iconset-svg.js

@@ -1,6 +0,6 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(i,e,o,t)=>{for(var s=t>1?void 0:t?c(e,o):e,n=i.length-1,r;n>=0;n--)(r=i[n])&&(s=(t?r(e,o,s):r(s))||s);return t&&s&&d(e,o,s),s};import{html as a}from"@spectrum-web-components/base";import{query as p}from"@spectrum-web-components/base/src/decorators.js";import{Iconset as u}from"./iconset.js";export class IconsetSVG extends u{constructor(){super(...arguments);this.iconMap=new Map}updated(e){if(!this.slotContainer)return;const o=this.getSVGNodes(this.slotContainer);this.updateSVG(o),super.updated(e)}async applyIconToElement(e,o,t,s){await this.updateComplete;const n=this.iconMap.get(o);if(!n)throw new Error(`Unable to find icon ${o}`);const r=this.prepareSvgClone(n);r.setAttribute("role","img"),s?r.setAttribute("aria-label",s):r.setAttribute("aria-hidden","true"),e.shadowRoot?e.shadowRoot.appendChild(r):e.appendChild(r)}getIconList(){return[...this.iconMap.keys()]}prepareSvgClone(e){const o=e.cloneNode(!0),t=document.createElementNS("http://www.w3.org/2000/svg","svg"),s=o.getAttribute("viewBox")||"",n="pointer-events: none; display: block; width: 100%; height: 100%;";for(t.style.cssText=n,t.setAttribute("viewBox",s),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.setAttribute("focusable","false");o.childNodes.length>0;)t.appendChild(o.childNodes[0]);return t}getSVGIconName(e){return e}getSanitizedIconName(e){return e}renderDefaultContent(){return a``}render(){return a`
+"use strict";var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(l,r,t,o)=>{for(var e=o>1?void 0:o?p(r,t):r,s=l.length-1,n;s>=0;s--)(n=l[s])&&(e=(o?n(r,t,e):n(e))||e);return o&&e&&c(r,t,e),e};import{html as d}from"@spectrum-web-components/base";import{query as u}from"@spectrum-web-components/base/src/decorators.js";import{Iconset as m}from"./iconset.js";export class IconsetSVG extends m{constructor(){super(...arguments);this.iconMap=new Map}updated(t){if(!this.slotContainer)return;const o=this.getSVGNodes(this.slotContainer);this.updateSVG(o),super.updated(t)}async applyIconToElement(t,o,e,s){await this.updateComplete;const n=this.iconMap.get(o);if(!n)throw new Error(`Unable to find icon ${o}`);const i=this.prepareSvgClone(n);i.setAttribute("role","img"),s?i.setAttribute("aria-label",s):i.setAttribute("aria-hidden","true"),t.shadowRoot?t.shadowRoot.appendChild(i):t.appendChild(i)}getIconList(){return[...this.iconMap.keys()]}prepareSvgClone(t){const o=t.cloneNode(!0),e=document.createElementNS("http://www.w3.org/2000/svg","svg"),s=o.getAttribute("viewBox")||"",n="pointer-events: none; display: block; width: 100%; height: 100%;";for(e.style.cssText=n,e.setAttribute("viewBox",s),e.setAttribute("preserveAspectRatio","xMidYMid meet"),e.setAttribute("focusable","false");o.childNodes.length>0;)e.appendChild(o.childNodes[0]);return e}getSVGIconName(t){return t}getSanitizedIconName(t){return t}renderDefaultContent(){return d``}render(){return d`
             <slot @slotchange=${this.onSlotChange}>
                 ${this.renderDefaultContent()}
             </slot>
-        `}updateSVG(e){e.reduce((t,s)=>{const n=s.querySelectorAll("symbol");return t.push(...n),t},[]).forEach(t=>{this.iconMap.set(this.getSanitizedIconName(t.id),t)})}getSVGNodes(e){return e.assignedNodes({flatten:!0}).filter(s=>s.nodeName==="svg")}onSlotChange(e){const o=e.target,t=this.getSVGNodes(o);this.updateSVG(t)}}l([p("slot")],IconsetSVG.prototype,"slotContainer",2);
+        `}updateSVG(t){t.reduce((e,s)=>{const n=s.querySelectorAll("symbol");return e.push(...n),e},[]).forEach(e=>{this.iconMap.set(this.getSanitizedIconName(e.id),e)})}getSVGNodes(t){return t.assignedNodes({flatten:!0}).filter(s=>s.nodeName==="svg")}onSlotChange(t){const o=t.target,e=this.getSVGNodes(o);this.updateSVG(e)}}a([u("slot")],IconsetSVG.prototype,"slotContainer",2);
 //# sourceMappingURL=iconset-svg.js.map

src/iconset.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 var __defProp = Object.defineProperty;
@@ -30,2 +31,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
     this.style.display = "none";
+    if (true) {
+      window.__swc.warn(
+        this,
+        "Iconsets have been deprecated and will be removed from the project in an upcoming version. For default Spectrum Icons, learn more about leveraging UI Icons (https://opensource.adobe.com/spectrum-web-components/components/icons-ui/) or Workflow Icons (https://opensource.adobe.com/spectrum-web-components/components/icons-workflow/) as an alternative.",
+        "https://opensource.adobe.com/spectrum-web-components/components/iconset/#deprecated",
+        { level: "deprecation" }
+      );
+    }
   }
@@ -32,0 +41,0 @@ set name(value) {

src/iconset.js

@@ -1,2 +0,2 @@
-var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(n,e,r,i)=>{for(var t=i>1?void 0:i?m(e,r):e,o=n.length-1,a;o>=0;o--)(a=n[o])&&(t=(i?a(e,r,t):a(t))||t);return i&&t&&c(e,r,t),t};import{IconsetRegistry as s}from"./iconset-registry.js";import{LitElement as l}from"@spectrum-web-components/base";import{property as p}from"@spectrum-web-components/base/src/decorators.js";export class Iconset extends l{constructor(){super(...arguments);this.registered=!1;this.handleRemoved=({detail:e})=>{e.name===this.name&&(this.registered=!1,this.addIconset())}}firstUpdated(){this.style.display="none"}set name(e){this.registered&&(this._name&&s.getInstance().removeIconset(this._name),e&&s.getInstance().addIconset(e,this)),this._name=e}get name(){return this._name}connectedCallback(){super.connectedCallback(),this.addIconset(),window.addEventListener("sp-iconset-removed",this.handleRemoved)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("sp-iconset-removed",this.handleRemoved),this.removeIconset()}addIconset(){!this.name||this.registered||(s.getInstance().addIconset(this.name,this),this.registered=!0)}removeIconset(){!this.name||(s.getInstance().removeIconset(this.name),this.registered=!1)}}d([p()],Iconset.prototype,"name",1);
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,n,e,s)=>{for(var t=s>1?void 0:s?m(n,e):n,r=i.length-1,c;r>=0;r--)(c=i[r])&&(t=(s?c(n,e,t):c(t))||t);return s&&t&&d(n,e,t),t};import{IconsetRegistry as o}from"./iconset-registry.js";import{LitElement as p}from"@spectrum-web-components/base";import{property as l}from"@spectrum-web-components/base/src/decorators.js";export class Iconset extends p{constructor(){super(...arguments);this.registered=!1;this.handleRemoved=({detail:e})=>{e.name===this.name&&(this.registered=!1,this.addIconset())}}firstUpdated(){this.style.display="none"}set name(e){this.registered&&(this._name&&o.getInstance().removeIconset(this._name),e&&o.getInstance().addIconset(e,this)),this._name=e}get name(){return this._name}connectedCallback(){super.connectedCallback(),this.addIconset(),window.addEventListener("sp-iconset-removed",this.handleRemoved)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("sp-iconset-removed",this.handleRemoved),this.removeIconset()}addIconset(){!this.name||this.registered||(o.getInstance().addIconset(this.name,this),this.registered=!0)}removeIconset(){!this.name||(o.getInstance().removeIconset(this.name),this.registered=!1)}}a([l()],Iconset.prototype,"name",1);
 //# sourceMappingURL=iconset.js.map

src/index.dev.js

@@ -0,1 +1,2 @@
+"use strict";
 export * from "./iconset.dev.js";
@@ -2,0 +3,0 @@ export * from "./iconset-svg.dev.js";

src/index.js

@@ -1,2 +0,2 @@
-export*from"./iconset.js";export*from"./iconset-svg.js";export*from"./iconset-registry.js";
+"use strict";export*from"./iconset.js";export*from"./iconset-svg.js";export*from"./iconset-registry.js";
 //# sourceMappingURL=index.js.map

stories/icons-demo.js

@@ -1,4 +0,86 @@
-var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(n,e,t,i)=>{for(var a=i>1?void 0:i?u(e,t):e,d=n.length-1,c;d>=0;d--)(c=n[d])&&(a=(i?c(e,t,a):c(a))||a);return i&&a&&h(e,t,a),a};import{css as m,html as r,SpectrumElement as l}from"@spectrum-web-components/base";import{customElement as p,property as o}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as g}from"@spectrum-web-components/base/src/directives.js";import"@spectrum-web-components/search/sp-search.js";import"@spectrum-web-components/field-label/sp-field-label.js";import v from"@spectrum-web-components/styles/body.js";import"@spectrum-web-components/icon/sp-icon.js";import"@spectrum-web-components/help-text/sp-help-text.js";export let DelayedReady=class extends l{render(){return r`
+"use strict";
+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 {
+  css,
+  html,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import {
+  customElement,
+  property
+} from "@spectrum-web-components/base/src/decorators.js";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/search/sp-search.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import bodyStyles from "@spectrum-web-components/styles/body.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/help-text/sp-help-text.js";
+export let DelayedReady = class extends SpectrumElement {
+  render() {
+    return html`
             <slot @slotchange=${this.handleSlotchange}></slot>
-        `}firstUpdated(){this._delayedReady=new Promise(e=>this._resolveDelayedReady=e)}async getUpdateComplete(){const e=await super.getUpdateComplete();return await this._delayedReady,e}handleSlotchange({target:e}){e.assignedElements({flatten:!0}).length&&requestAnimationFrame(()=>{this._resolveDelayedReady()})}};DelayedReady=s([p("delayed-ready")],DelayedReady);export let IconsDemo=class extends l{constructor(){super();this.name="ui";this.package="";this.size="m";this.search="";this.icons=[];this.iconset=[];this.iconset=[],this.handleIconSetAdded=this.handleIconSetAdded.bind(this)}connectedCallback(){super.connectedCallback(),window.addEventListener("sp-iconset-added",this.handleIconSetAdded)}disconnectedCallback(){window.removeEventListener("sp-iconset-added",this.handleIconSetAdded),super.disconnectedCallback()}handleIconSetAdded(e){const{iconset:t}=e.detail;this.iconset=t.getIconList(),this.requestUpdate()}static get styles(){return[...v,m`
+        `;
+  }
+  firstUpdated() {
+    this._delayedReady = new Promise(
+      (res) => this._resolveDelayedReady = res
+    );
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this._delayedReady;
+    return complete;
+  }
+  handleSlotchange({
+    target
+  }) {
+    if (target.assignedElements({ flatten: true }).length) {
+      requestAnimationFrame(() => {
+        this._resolveDelayedReady();
+      });
+    }
+  }
+};
+DelayedReady = __decorateClass([
+  customElement("delayed-ready")
+], DelayedReady);
+export let IconsDemo = class extends SpectrumElement {
+  constructor() {
+    super();
+    this.name = "ui";
+    this.package = "";
+    this.size = "m";
+    this.search = "";
+    this.icons = [];
+    this.iconset = [];
+    this.iconset = [];
+    this.handleIconSetAdded = this.handleIconSetAdded.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("sp-iconset-added", this.handleIconSetAdded);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("sp-iconset-added", this.handleIconSetAdded);
+    super.disconnectedCallback();
+  }
+  handleIconSetAdded(event) {
+    const { iconset } = event.detail;
+    this.iconset = iconset.getIconList();
+    this.requestUpdate();
+  }
+  static get styles() {
+    return [
+      ...bodyStyles,
+      css`
                 :host {
@@ -43,3 +125,42 @@ display: grid;
                 }
-            `]}handleKeydown(e,t){const{code:i}=e;i!=="Enter"&&i!=="NumpadEnter"&&i!=="Space"||(e.preventDefault(),this.shouldCopy(t))}shouldCopy(e){if(!this.package)return;const t=e.slice(1,e.length-1),i=`import '@spectrum-web-components/${this.package}/icons/${t}.js';`;this.dispatchEvent(new CustomEvent("copy-text",{bubbles:!0,composed:!0,detail:{message:"Import statement copied to clipboard!",text:i}}))}updateSearch(e){e.stopPropagation(),this.search=e.target.value}submit(e){e.stopPropagation(),this.updateSearch(e)}renderSearch(){const e=this.search?this.icons.filter(t=>t.name.toLowerCase().search(this.search)!==-1):this.icons;return r`
+            `
+    ];
+  }
+  handleKeydown(event, tag) {
+    const { code } = event;
+    if (code !== "Enter" && code !== "NumpadEnter" && code !== "Space") {
+      return;
+    }
+    event.preventDefault();
+    this.shouldCopy(tag);
+  }
+  shouldCopy(tag) {
+    if (!this.package)
+      return;
+    const conditionedTag = tag.slice(1, tag.length - 1);
+    const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;
+    this.dispatchEvent(
+      new CustomEvent("copy-text", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          message: "Import statement copied to clipboard!",
+          text: importURL
+        }
+      })
+    );
+  }
+  updateSearch(event) {
+    event.stopPropagation();
+    this.search = event.target.value;
+  }
+  submit(event) {
+    event.stopPropagation();
+    this.updateSearch(event);
+  }
+  renderSearch() {
+    const matchingIcons = this.search ? this.icons.filter(
+      (icon) => icon.name.toLowerCase().search(this.search) !== -1
+    ) : this.icons;
+    return html`
             <div class="search" part="search">
@@ -57,3 +178,3 @@ <sp-field-label for="search">Spectrum icons:</sp-field-label>
                     <sp-help-text slot="help-text">
-                        Showing ${e.length} of ${this.icons.length}
+                        Showing ${matchingIcons.length} of ${this.icons.length}
                         available icons.
@@ -63,3 +184,4 @@ </sp-help-text>
             </div>
-            ${e.map(t=>r`
+            ${matchingIcons.map((icon) => {
+      return html`
                     <bdo
@@ -70,23 +192,49 @@ class="icon"
                         class="icon"
-                        @click=${()=>this.shouldCopy(t.tag)}
-                        @keydown=${i=>this.handleKeydown(i,t.tag)}
-                        tabindex=${g(this.package?"0":void 0)}
+                        @click=${() => this.shouldCopy(icon.tag)}
+                        @keydown=${(event) => this.handleKeydown(event, icon.tag)}
+                        tabindex=${ifDefined(this.package ? "0" : void 0)}
                     >
-                        ${t.story(this.size)} ${t.tag}
+                        ${icon.story(this.size)} ${icon.tag}
                     </bdo>
-                `)}
-        `}render(){return r`
-            ${this.icons.length?this.renderSearch():r`
+                `;
+    })}
+        `;
+  }
+  render() {
+    return html`
+            ${this.icons.length ? this.renderSearch() : html`
                       <slot></slot>
                   `}
-            ${this.iconset.map(e=>r`
+            ${this.iconset.map(
+      (icon) => html`
                     <bdo class="icon" dir="ltr">
                         <sp-icon
                             size="xl"
-                            name=${`${this.name}:${e}`}
+                            name=${`${this.name}:${icon}`}
                         ></sp-icon>
-                        ${e}
+                        ${icon}
                     </bdo>
-                `)}
-        `}};s([o()],IconsDemo.prototype,"name",2),s([o()],IconsDemo.prototype,"package",2),s([o()],IconsDemo.prototype,"size",2),s([o()],IconsDemo.prototype,"search",2),s([o({attribute:!1})],IconsDemo.prototype,"icons",2),IconsDemo=s([p("icons-demo")],IconsDemo);
+                `
+    )}
+        `;
+  }
+};
+__decorateClass([
+  property()
+], IconsDemo.prototype, "name", 2);
+__decorateClass([
+  property()
+], IconsDemo.prototype, "package", 2);
+__decorateClass([
+  property()
+], IconsDemo.prototype, "size", 2);
+__decorateClass([
+  property()
+], IconsDemo.prototype, "search", 2);
+__decorateClass([
+  property({ attribute: false })
+], IconsDemo.prototype, "icons", 2);
+IconsDemo = __decorateClass([
+  customElement("icons-demo")
+], IconsDemo);
 //# sourceMappingURL=icons-demo.js.map

test/iconset.test.js

@@ -1,4 +0,91 @@
-import{waitForPredicate as r}from"../../../test/testing-helpers.js";import"@spectrum-web-components/icons/sp-icons-medium.js";import"@spectrum-web-components/icon/sp-icon.js";import{IconsetRegistry as s}from"@spectrum-web-components/iconset/src/iconset-registry.js";import{elementUpdated as c,expect as n,fixture as d,html as m}from"@open-wc/testing";describe("Iconset",()=>{after(()=>{[...document.querySelectorAll("sp-icons-medium")].map(e=>e.remove())}),it("will re-register with new name",async()=>{const t=document.createElement("sp-icons-medium");document.body.append(t),t.name="first-name";const e=s.getInstance();n(e.getIconset("first-name")).to.not.be.undefined,n(e.getIconset("")).to.be.undefined,n(e.getIconset("second-name")).to.be.undefined,n(e.getIconset("ui")).to.be.undefined,t.name="",n(e.getIconset("first-name")).to.be.undefined,n(e.getIconset("")).to.be.undefined,n(e.getIconset("second-name")).to.be.undefined,n(e.getIconset("ui")).to.be.undefined,t.name="second-name",n(e.getIconset("first-name")).to.be.undefined,n(e.getIconset("")).to.be.undefined,n(e.getIconset("second-name")).to.not.be.undefined,n(e.getIconset("ui")).to.be.undefined}),it("will not re-register on (dis)connect without a name",async()=>{const t=document.createElement("sp-icons-medium");document.body.append(t);const e=s.getInstance();n(e.getIconset("ui")).to.not.be.undefined,t.name="",n(e.getIconset("ui")).to.be.undefined,t.remove(),document.body.append(t),n(e.getIconset("ui")).to.be.undefined}),it("renders after adding and removing a second iconset of same name",async()=>{const t=document.createElement("sp-icons-medium");document.body.append(t);const e=document.createElement("sp-icons-medium");document.body.append(e),e.remove(),window.dispatchEvent(new CustomEvent("sp-iconset-removed",{detail:{name:"Other Set"}}));const o=await d(m`
+"use strict";
+import { waitForPredicate } from "../../../test/testing-helpers.js";
+import "@spectrum-web-components/icons/sp-icons-medium.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import { IconsetRegistry } from "@spectrum-web-components/iconset/src/iconset-registry.js";
+import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
+import { stub } from "sinon";
+describe("Iconset", () => {
+  after(() => {
+    const sets = [...document.querySelectorAll("sp-icons-medium")];
+    sets.map((set) => set.remove());
+  });
+  it("warns in Dev Mode of deprecation", async () => {
+    const consoleWarnStub = stub(console, "warn");
+    const el = document.createElement("sp-icons-medium");
+    document.body.append(el);
+    await elementUpdated(el);
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+    expect(
+      spyCall.args.at(0).includes("deprecated"),
+      "confirm deprecation message"
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-icons-medium",
+        type: "api",
+        level: "deprecation"
+      }
+    });
+    consoleWarnStub.restore();
+  });
+  it("will re-register with new name", async () => {
+    const icons = document.createElement("sp-icons-medium");
+    document.body.append(icons);
+    icons.name = "first-name";
+    const registry = IconsetRegistry.getInstance();
+    expect(registry.getIconset("first-name")).to.not.be.undefined;
+    expect(registry.getIconset("")).to.be.undefined;
+    expect(registry.getIconset("second-name")).to.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
+    icons.name = "";
+    expect(registry.getIconset("first-name")).to.be.undefined;
+    expect(registry.getIconset("")).to.be.undefined;
+    expect(registry.getIconset("second-name")).to.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
+    icons.name = "second-name";
+    expect(registry.getIconset("first-name")).to.be.undefined;
+    expect(registry.getIconset("")).to.be.undefined;
+    expect(registry.getIconset("second-name")).to.not.be.undefined;
+    expect(registry.getIconset("ui")).to.be.undefined;
+  });
+  it("will not re-register on (dis)connect without a name", async () => {
+    const icons = document.createElement("sp-icons-medium");
+    document.body.append(icons);
+    const registry = IconsetRegistry.getInstance();
+    expect(registry.getIconset("ui")).to.not.be.undefined;
+    icons.name = "";
+    expect(registry.getIconset("ui")).to.be.undefined;
+    icons.remove();
+    document.body.append(icons);
+    expect(registry.getIconset("ui")).to.be.undefined;
+  });
+  it("renders after adding and removing a second iconset of same name", async () => {
+    const icons = document.createElement("sp-icons-medium");
+    document.body.append(icons);
+    const icons2 = document.createElement("sp-icons-medium");
+    document.body.append(icons2);
+    icons2.remove();
+    window.dispatchEvent(
+      new CustomEvent("sp-iconset-removed", {
+        detail: { name: "Other Set" }
+      })
+    );
+    const el = await fixture(
+      html`
                 <sp-icon name="ui:Chevron200"></sp-icon>
-            `);let i=o.shadowRoot?o.shadowRoot.querySelector('[role="img"]'):null;function a(){return i=o.shadowRoot?o.shadowRoot.querySelector('[role="img"]'):null,i!==null}await r(a),n(i).to.not.be.null}),it("can be after `<sp-icon/>` in the DOM order",async()=>{const t=await d(m`
+            `
+    );
+    let svg = el.shadowRoot ? el.shadowRoot.querySelector('[role="img"]') : null;
+    function getSVG() {
+      svg = el.shadowRoot ? el.shadowRoot.querySelector('[role="img"]') : null;
+      return svg !== null;
+    }
+    await waitForPredicate(getSVG);
+    expect(svg).to.not.be.null;
+  });
+  it("can be after `<sp-icon/>` in the DOM order", async () => {
+    const el = await fixture(
+      html`
                 <div>
@@ -8,3 +95,12 @@ <sp-icon name="ui:Chevron200"></sp-icon>
                 </div>
-            `),e=t.querySelector("sp-icon"),o=t.querySelector("sp-icons-medium");await c(o),await c(e);const i=e.shadowRoot?e.shadowRoot.querySelector('[role="img"]'):null;n(i).to.not.be.null})});
+            `
+    );
+    const icon = el.querySelector("sp-icon");
+    const iconSet = el.querySelector("sp-icons-medium");
+    await elementUpdated(iconSet);
+    await elementUpdated(icon);
+    const svg = icon.shadowRoot ? icon.shadowRoot.querySelector('[role="img"]') : null;
+    expect(svg).to.not.be.null;
+  });
+});
 //# sourceMappingURL=iconset.test.js.map

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

96289

increased by9.68%

Lines of code

684

increased by55.81%

Number of lines in readme file

35

increased by12.9%

No dependency changes