@spectrum-web-components/iconset 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/iconset",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "publishConfig": {
         "access": "public"
     },
@@ -60,7 +60,7 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^1.1.0"
+        "@spectrum-web-components/base": "^1.1.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
@@ -71,5 +71,5 @@
         "./stories/iconsList.json",
         "./**/*.dev.js"
     ],
-    "gitHead": "e3c6e52501451acc6fa85b10dd718267b80a01ab"
+    "gitHead": "9ee45f2dfd3ac1939072726d00195c6c05d9a562"
 }

package/src/iconset-registry.d.ts

@@ -0,0 +1,22 @@
+import { Iconset } from './iconset.js';
+export interface IconsetAddedDetail {
+    name: string;
+    iconset: Iconset;
+}
+export interface IconsetRemovedDetail {
+    name: string;
+}
+export declare class IconsetRegistry {
+    static getInstance(): IconsetRegistry;
+    private static instance;
+    private iconsetMap;
+    addIconset(name: string, iconset: Iconset): void;
+    removeIconset(name: string): void;
+    getIconset(name: string): Iconset | undefined;
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'sp-iconset-added': CustomEvent<IconsetAddedDetail>;
+        'sp-iconset-removed': CustomEvent<IconsetRemovedDetail>;
+    }
+}

package/src/iconset-registry.dev.js

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

package/src/iconset-registry.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["iconset-registry.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*/\nimport { Iconset } from './iconset.dev.js'\nexport interface IconsetAddedDetail {\n    name: string;\n    iconset: Iconset;\n}\nexport interface IconsetRemovedDetail {\n    name: string;\n}\n\nexport class IconsetRegistry {\n    // singleton getter\n    public static getInstance(): IconsetRegistry {\n        if (!IconsetRegistry.instance) {\n            IconsetRegistry.instance = new IconsetRegistry();\n        }\n        return IconsetRegistry.instance;\n    }\n    private static instance: IconsetRegistry;\n\n    private iconsetMap = new Map<string, Iconset>();\n\n    public addIconset(name: string, iconset: Iconset): void {\n        this.iconsetMap.set(name, iconset);\n\n        // dispatch a sp-iconset-added event on window to let everyone know we have a new iconset\n        // note we're using window here for efficiency since we don't need to bubble through the dom since everyone\n        // will know where to look for this event\n        const event = new CustomEvent('sp-iconset-added', {\n            bubbles: true,\n            composed: true,\n            detail: { name, iconset },\n        });\n        // we're dispatching this event in the next tick to allow the iconset to finish any slotchange or other event\n        // listeners caused by connection to the dom and first render to complete, this way any icons listening for\n        // this iconset will be able to access the completed iconset\n        setTimeout(() => window.dispatchEvent(event), 0);\n    }\n    public removeIconset(name: string): void {\n        this.iconsetMap.delete(name);\n        // dispatch a sp-iconset-removed event on window to let everyone know we have a new iconset\n        // note we're using window here for efficiency since we don't need to bubble through the dom since everyone\n        // will know where to look for this event\n        const event = new CustomEvent('sp-iconset-removed', {\n            bubbles: true,\n            composed: true,\n            detail: { name },\n        });\n        // we're dispatching this event in the next tick To keep the event model consistent with the added event\n        setTimeout(() => window.dispatchEvent(event), 0);\n    }\n    public getIconset(name: string): Iconset | undefined {\n        return this.iconsetMap.get(name);\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-iconset-added': CustomEvent<IconsetAddedDetail>;\n        'sp-iconset-removed': CustomEvent<IconsetRemovedDetail>;\n    }\n}\n"],
+  "mappings": ";AAoBO,aAAM,gBAAgB;AAAA,EAAtB;AAUH,SAAQ,aAAa,oBAAI,IAAqB;AAAA;AAAA;AAAA,EAR9C,OAAc,cAA+B;AACzC,QAAI,CAAC,gBAAgB,UAAU;AAC3B,sBAAgB,WAAW,IAAI,gBAAgB;AAAA,IACnD;AACA,WAAO,gBAAgB;AAAA,EAC3B;AAAA,EAKO,WAAW,MAAc,SAAwB;AACpD,SAAK,WAAW,IAAI,MAAM,OAAO;AAKjC,UAAM,QAAQ,IAAI,YAAY,oBAAoB;AAAA,MAC9C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,MAAM,QAAQ;AAAA,IAC5B,CAAC;AAID,eAAW,MAAM,OAAO,cAAc,KAAK,GAAG,CAAC;AAAA,EACnD;AAAA,EACO,cAAc,MAAoB;AACrC,SAAK,WAAW,OAAO,IAAI;AAI3B,UAAM,QAAQ,IAAI,YAAY,sBAAsB;AAAA,MAChD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,KAAK;AAAA,IACnB,CAAC;AAED,eAAW,MAAM,OAAO,cAAc,KAAK,GAAG,CAAC;AAAA,EACnD;AAAA,EACO,WAAW,MAAmC;AACjD,WAAO,KAAK,WAAW,IAAI,IAAI;AAAA,EACnC;AACJ;",
+  "names": []
+}

package/src/iconset-registry.js

@@ -0,0 +1,2 @@
+"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

package/src/iconset-registry.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["iconset-registry.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*/\nimport { Iconset } from './iconset.js';\nexport interface IconsetAddedDetail {\n    name: string;\n    iconset: Iconset;\n}\nexport interface IconsetRemovedDetail {\n    name: string;\n}\n\nexport class IconsetRegistry {\n    // singleton getter\n    public static getInstance(): IconsetRegistry {\n        if (!IconsetRegistry.instance) {\n            IconsetRegistry.instance = new IconsetRegistry();\n        }\n        return IconsetRegistry.instance;\n    }\n    private static instance: IconsetRegistry;\n\n    private iconsetMap = new Map<string, Iconset>();\n\n    public addIconset(name: string, iconset: Iconset): void {\n        this.iconsetMap.set(name, iconset);\n\n        // dispatch a sp-iconset-added event on window to let everyone know we have a new iconset\n        // note we're using window here for efficiency since we don't need to bubble through the dom since everyone\n        // will know where to look for this event\n        const event = new CustomEvent('sp-iconset-added', {\n            bubbles: true,\n            composed: true,\n            detail: { name, iconset },\n        });\n        // we're dispatching this event in the next tick to allow the iconset to finish any slotchange or other event\n        // listeners caused by connection to the dom and first render to complete, this way any icons listening for\n        // this iconset will be able to access the completed iconset\n        setTimeout(() => window.dispatchEvent(event), 0);\n    }\n    public removeIconset(name: string): void {\n        this.iconsetMap.delete(name);\n        // dispatch a sp-iconset-removed event on window to let everyone know we have a new iconset\n        // note we're using window here for efficiency since we don't need to bubble through the dom since everyone\n        // will know where to look for this event\n        const event = new CustomEvent('sp-iconset-removed', {\n            bubbles: true,\n            composed: true,\n            detail: { name },\n        });\n        // we're dispatching this event in the next tick To keep the event model consistent with the added event\n        setTimeout(() => window.dispatchEvent(event), 0);\n    }\n    public getIconset(name: string): Iconset | undefined {\n        return this.iconsetMap.get(name);\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'sp-iconset-added': CustomEvent<IconsetAddedDetail>;\n        'sp-iconset-removed': CustomEvent<IconsetRemovedDetail>;\n    }\n}\n"],
+  "mappings": "aAoBO,aAAM,eAAgB,CAAtB,cAUH,KAAQ,WAAa,IAAI,IARzB,OAAc,aAA+B,CACzC,OAAK,gBAAgB,WACjB,gBAAgB,SAAW,IAAI,iBAE5B,gBAAgB,QAC3B,CAKO,WAAWA,EAAcC,EAAwB,CACpD,KAAK,WAAW,IAAID,EAAMC,CAAO,EAKjC,MAAMC,EAAQ,IAAI,YAAY,mBAAoB,CAC9C,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,KAAAF,EAAM,QAAAC,CAAQ,CAC5B,CAAC,EAID,WAAW,IAAM,OAAO,cAAcC,CAAK,EAAG,CAAC,CACnD,CACO,cAAcF,EAAoB,CACrC,KAAK,WAAW,OAAOA,CAAI,EAI3B,MAAME,EAAQ,IAAI,YAAY,qBAAsB,CAChD,QAAS,GACT,SAAU,GACV,OAAQ,CAAE,KAAAF,CAAK,CACnB,CAAC,EAED,WAAW,IAAM,OAAO,cAAcE,CAAK,EAAG,CAAC,CACnD,CACO,WAAWF,EAAmC,CACjD,OAAO,KAAK,WAAW,IAAIA,CAAI,CACnC,CACJ",
+  "names": ["name", "iconset", "event"]
+}

package/src/iconset-svg.d.ts

@@ -0,0 +1,29 @@
+import { PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { Iconset } from './iconset.js';
+export declare abstract class IconsetSVG extends Iconset {
+    private iconMap;
+    private slotContainer?;
+    /**
+     * First updated handler just ensures we've processed any slotted symbols
+     */
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Applies the requested icon from this iconset instance to the given element.
+     *
+     * @param el - the element to apply the icon to
+     * @param icon - the name of the icon within this set to apply.
+     */
+    applyIconToElement(el: HTMLElement, icon: string, _size: string, label: string): Promise<void>;
+    /**
+     * Returns a list of all icons in this iconset.
+     */
+    getIconList(): string[];
+    protected prepareSvgClone(sourceSvg: SVGSymbolElement): SVGSVGElement;
+    protected getSVGIconName(icon: string): string;
+    protected getSanitizedIconName(icon: string): string;
+    protected renderDefaultContent(): TemplateResult;
+    protected render(): TemplateResult;
+    protected updateSVG(nodes: SVGElement[]): void;
+    protected getSVGNodes(slotTarget: HTMLSlotElement): SVGElement[];
+    private onSlotChange;
+}

package/src/iconset-svg.dev.js

@@ -0,0 +1,123 @@
+"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 {
+  html
+} from "@spectrum-web-components/base";
+import { query } from "@spectrum-web-components/base/src/decorators.js";
+import { Iconset } from "./iconset.dev.js";
+export class IconsetSVG extends Iconset {
+  constructor() {
+    super(...arguments);
+    this.iconMap = /* @__PURE__ */ new Map();
+  }
+  /**
+   * First updated handler just ensures we've processed any slotted symbols
+   */
+  updated(changedProperties) {
+    if (!this.slotContainer) {
+      return;
+    }
+    const currentSVGNodes = this.getSVGNodes(this.slotContainer);
+    this.updateSVG(currentSVGNodes);
+    super.updated(changedProperties);
+  }
+  /**
+   * Applies the requested icon from this iconset instance to the given element.
+   *
+   * @param el - the element to apply the icon to
+   * @param icon - the name of the icon within this set to apply.
+   */
+  async applyIconToElement(el, icon, _size, label) {
+    await this.updateComplete;
+    const iconSymbol = this.iconMap.get(icon);
+    if (!iconSymbol) {
+      throw new Error(`Unable to find icon ${icon}`);
+    }
+    const clonedNode = this.prepareSvgClone(iconSymbol);
+    clonedNode.setAttribute("role", "img");
+    if (label) {
+      clonedNode.setAttribute("aria-label", label);
+    } else {
+      clonedNode.setAttribute("aria-hidden", "true");
+    }
+    if (el.shadowRoot) {
+      el.shadowRoot.appendChild(clonedNode);
+    } else {
+      el.appendChild(clonedNode);
+    }
+  }
+  /**
+   * Returns a list of all icons in this iconset.
+   */
+  getIconList() {
+    return [...this.iconMap.keys()];
+  }
+  prepareSvgClone(sourceSvg) {
+    const content = sourceSvg.cloneNode(true);
+    const svg = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "svg"
+    );
+    const viewBox = content.getAttribute("viewBox") || "";
+    const cssText = "pointer-events: none; display: block; width: 100%; height: 100%;";
+    svg.style.cssText = cssText;
+    svg.setAttribute("viewBox", viewBox);
+    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    svg.setAttribute("focusable", "false");
+    while (content.childNodes.length > 0) {
+      svg.appendChild(content.childNodes[0]);
+    }
+    return svg;
+  }
+  getSVGIconName(icon) {
+    return icon;
+  }
+  getSanitizedIconName(icon) {
+    return icon;
+  }
+  renderDefaultContent() {
+    return html``;
+  }
+  render() {
+    return html`
+            <slot @slotchange=${this.onSlotChange}>
+                ${this.renderDefaultContent()}
+            </slot>
+        `;
+  }
+  updateSVG(nodes) {
+    const symbols = nodes.reduce((prev, svgNode) => {
+      const containedSymbols = svgNode.querySelectorAll("symbol");
+      prev.push(...containedSymbols);
+      return prev;
+    }, []);
+    symbols.forEach((symbol) => {
+      this.iconMap.set(this.getSanitizedIconName(symbol.id), symbol);
+    });
+  }
+  getSVGNodes(slotTarget) {
+    const nodes = slotTarget.assignedNodes({ flatten: true });
+    const svgNodes = nodes.filter((node) => {
+      return node.nodeName === "svg";
+    });
+    return svgNodes;
+  }
+  onSlotChange(event) {
+    const slotTarget = event.target;
+    const svgNodes = this.getSVGNodes(slotTarget);
+    this.updateSVG(svgNodes);
+  }
+}
+__decorateClass([
+  query("slot")
+], IconsetSVG.prototype, "slotContainer", 2);
+//# sourceMappingURL=iconset-svg.dev.js.map

package/src/iconset-svg.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["iconset-svg.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 {\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { query } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Iconset } from './iconset.dev.js'\n\nexport abstract class IconsetSVG extends Iconset {\n    private iconMap: Map<string, SVGSymbolElement> = new Map();\n\n    @query('slot')\n    private slotContainer?: HTMLSlotElement;\n\n    /**\n     * First updated handler just ensures we've processed any slotted symbols\n     */\n    public override updated(changedProperties: PropertyValues): void {\n        if (!this.slotContainer) {\n            return;\n        }\n        const currentSVGNodes = this.getSVGNodes(this.slotContainer);\n        this.updateSVG(currentSVGNodes);\n        super.updated(changedProperties);\n    }\n    /**\n     * Applies the requested icon from this iconset instance to the given element.\n     *\n     * @param el - the element to apply the icon to\n     * @param icon - the name of the icon within this set to apply.\n     */\n    public async applyIconToElement(\n        el: HTMLElement,\n        icon: string,\n        _size: string,\n        label: string\n    ): Promise<void> {\n        await this.updateComplete;\n        const iconSymbol = this.iconMap.get(icon);\n        if (!iconSymbol) {\n            throw new Error(`Unable to find icon ${icon}`);\n        }\n        // we cannot share a single SVG globally across shadowroot boundaries\n        // so copy the template node so we can inject it where we need it\n        const clonedNode = this.prepareSvgClone(iconSymbol);\n        clonedNode.setAttribute('role', 'img');\n        if (label) {\n            clonedNode.setAttribute('aria-label', label);\n        } else {\n            clonedNode.setAttribute('aria-hidden', 'true');\n        }\n        // append the svg to the node either in its shadowroot or directly into its dom\n        if (el.shadowRoot) {\n            el.shadowRoot.appendChild(clonedNode);\n        } else {\n            el.appendChild(clonedNode);\n        }\n    }\n\n    /**\n     * Returns a list of all icons in this iconset.\n     */\n    public getIconList(): string[] {\n        return [...this.iconMap.keys()];\n    }\n\n    protected prepareSvgClone(sourceSvg: SVGSymbolElement): SVGSVGElement {\n        const content = sourceSvg.cloneNode(true) as SVGSymbolElement;\n        // we're going to create a new svg element that will have our symbol geometry inside\n        const svg = document.createElementNS(\n            'http://www.w3.org/2000/svg',\n            'svg'\n        );\n        const viewBox = content.getAttribute('viewBox') || '';\n        // inline style isn't ideal but will work in all cases and means our icons don't need to know\n        // if they are svg or spritesheet provided\n        const cssText =\n            'pointer-events: none; display: block; width: 100%; height: 100%;';\n        svg.style.cssText = cssText;\n        // copy the viewbox and other properties into the svg\n        svg.setAttribute('viewBox', viewBox);\n        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');\n        svg.setAttribute('focusable', 'false');\n        // move all the child nodes over to the svg\n        while (content.childNodes.length > 0) {\n            svg.appendChild(content.childNodes[0]);\n        }\n        return svg;\n    }\n    protected getSVGIconName(icon: string): string {\n        return icon;\n    }\n    protected getSanitizedIconName(icon: string): string {\n        return icon;\n    }\n    protected renderDefaultContent(): TemplateResult {\n        return html``;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot @slotchange=${this.onSlotChange}>\n                ${this.renderDefaultContent()}\n            </slot>\n        `;\n    }\n\n    protected updateSVG(nodes: SVGElement[]): void {\n        // iterate over the nodes that were passed in, and find all the top level symbols\n        const symbols = nodes.reduce((prev, svgNode) => {\n            const containedSymbols = svgNode.querySelectorAll('symbol');\n            prev.push(...containedSymbols);\n            return prev;\n        }, [] as SVGSymbolElement[]);\n        symbols.forEach((symbol) => {\n            this.iconMap.set(this.getSanitizedIconName(symbol.id), symbol);\n        });\n    }\n\n    protected getSVGNodes(slotTarget: HTMLSlotElement): SVGElement[] {\n        const nodes = slotTarget.assignedNodes({ flatten: true });\n        // find all the svg nodes\n        const svgNodes = nodes.filter((node) => {\n            return node.nodeName === 'svg';\n        }) as SVGElement[];\n        return svgNodes;\n    }\n\n    private onSlotChange(event: Event): void {\n        const slotTarget = event.target as HTMLSlotElement;\n        const svgNodes = this.getSVGNodes(slotTarget);\n        this.updateSVG(svgNodes);\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EACI;AAAA,OAGG;AACP,SAAS,aAAa;AAEtB,SAAS,eAAe;AAEjB,aAAe,mBAAmB,QAAQ;AAAA,EAA1C;AAAA;AACH,SAAQ,UAAyC,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,EAQzC,QAAQ,mBAAyC;AAC7D,QAAI,CAAC,KAAK,eAAe;AACrB;AAAA,IACJ;AACA,UAAM,kBAAkB,KAAK,YAAY,KAAK,aAAa;AAC3D,SAAK,UAAU,eAAe;AAC9B,UAAM,QAAQ,iBAAiB;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAa,mBACT,IACA,MACA,OACA,OACa;AACb,UAAM,KAAK;AACX,UAAM,aAAa,KAAK,QAAQ,IAAI,IAAI;AACxC,QAAI,CAAC,YAAY;AACb,YAAM,IAAI,MAAM,uBAAuB,IAAI,EAAE;AAAA,IACjD;AAGA,UAAM,aAAa,KAAK,gBAAgB,UAAU;AAClD,eAAW,aAAa,QAAQ,KAAK;AACrC,QAAI,OAAO;AACP,iBAAW,aAAa,cAAc,KAAK;AAAA,IAC/C,OAAO;AACH,iBAAW,aAAa,eAAe,MAAM;AAAA,IACjD;AAEA,QAAI,GAAG,YAAY;AACf,SAAG,WAAW,YAAY,UAAU;AAAA,IACxC,OAAO;AACH,SAAG,YAAY,UAAU;AAAA,IAC7B;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA,EAKO,cAAwB;AAC3B,WAAO,CAAC,GAAG,KAAK,QAAQ,KAAK,CAAC;AAAA,EAClC;AAAA,EAEU,gBAAgB,WAA4C;AAClE,UAAM,UAAU,UAAU,UAAU,IAAI;AAExC,UAAM,MAAM,SAAS;AAAA,MACjB;AAAA,MACA;AAAA,IACJ;AACA,UAAM,UAAU,QAAQ,aAAa,SAAS,KAAK;AAGnD,UAAM,UACF;AACJ,QAAI,MAAM,UAAU;AAEpB,QAAI,aAAa,WAAW,OAAO;AACnC,QAAI,aAAa,uBAAuB,eAAe;AACvD,QAAI,aAAa,aAAa,OAAO;AAErC,WAAO,QAAQ,WAAW,SAAS,GAAG;AAClC,UAAI,YAAY,QAAQ,WAAW,CAAC,CAAC;AAAA,IACzC;AACA,WAAO;AAAA,EACX;AAAA,EACU,eAAe,MAAsB;AAC3C,WAAO;AAAA,EACX;AAAA,EACU,qBAAqB,MAAsB;AACjD,WAAO;AAAA,EACX;AAAA,EACU,uBAAuC;AAC7C,WAAO;AAAA,EACX;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA,gCACiB,KAAK,YAAY;AAAA,kBAC/B,KAAK,qBAAqB,CAAC;AAAA;AAAA;AAAA,EAGzC;AAAA,EAEU,UAAU,OAA2B;AAE3C,UAAM,UAAU,MAAM,OAAO,CAAC,MAAM,YAAY;AAC5C,YAAM,mBAAmB,QAAQ,iBAAiB,QAAQ;AAC1D,WAAK,KAAK,GAAG,gBAAgB;AAC7B,aAAO;AAAA,IACX,GAAG,CAAC,CAAuB;AAC3B,YAAQ,QAAQ,CAAC,WAAW;AACxB,WAAK,QAAQ,IAAI,KAAK,qBAAqB,OAAO,EAAE,GAAG,MAAM;AAAA,IACjE,CAAC;AAAA,EACL;AAAA,EAEU,YAAY,YAA2C;AAC7D,UAAM,QAAQ,WAAW,cAAc,EAAE,SAAS,KAAK,CAAC;AAExD,UAAM,WAAW,MAAM,OAAO,CAAC,SAAS;AACpC,aAAO,KAAK,aAAa;AAAA,IAC7B,CAAC;AACD,WAAO;AAAA,EACX;AAAA,EAEQ,aAAa,OAAoB;AACrC,UAAM,aAAa,MAAM;AACzB,UAAM,WAAW,KAAK,YAAY,UAAU;AAC5C,SAAK,UAAU,QAAQ;AAAA,EAC3B;AACJ;AAzHY;AAAA,EADP,MAAM,MAAM;AAAA,GAHK,WAIV;",
+  "names": []
+}

package/src/iconset-svg.js

@@ -0,0 +1,6 @@
+"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(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

package/src/iconset-svg.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["iconset-svg.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 {\n    html,\n    PropertyValues,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { query } from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Iconset } from './iconset.js';\n\nexport abstract class IconsetSVG extends Iconset {\n    private iconMap: Map<string, SVGSymbolElement> = new Map();\n\n    @query('slot')\n    private slotContainer?: HTMLSlotElement;\n\n    /**\n     * First updated handler just ensures we've processed any slotted symbols\n     */\n    public override updated(changedProperties: PropertyValues): void {\n        if (!this.slotContainer) {\n            return;\n        }\n        const currentSVGNodes = this.getSVGNodes(this.slotContainer);\n        this.updateSVG(currentSVGNodes);\n        super.updated(changedProperties);\n    }\n    /**\n     * Applies the requested icon from this iconset instance to the given element.\n     *\n     * @param el - the element to apply the icon to\n     * @param icon - the name of the icon within this set to apply.\n     */\n    public async applyIconToElement(\n        el: HTMLElement,\n        icon: string,\n        _size: string,\n        label: string\n    ): Promise<void> {\n        await this.updateComplete;\n        const iconSymbol = this.iconMap.get(icon);\n        if (!iconSymbol) {\n            throw new Error(`Unable to find icon ${icon}`);\n        }\n        // we cannot share a single SVG globally across shadowroot boundaries\n        // so copy the template node so we can inject it where we need it\n        const clonedNode = this.prepareSvgClone(iconSymbol);\n        clonedNode.setAttribute('role', 'img');\n        if (label) {\n            clonedNode.setAttribute('aria-label', label);\n        } else {\n            clonedNode.setAttribute('aria-hidden', 'true');\n        }\n        // append the svg to the node either in its shadowroot or directly into its dom\n        if (el.shadowRoot) {\n            el.shadowRoot.appendChild(clonedNode);\n        } else {\n            el.appendChild(clonedNode);\n        }\n    }\n\n    /**\n     * Returns a list of all icons in this iconset.\n     */\n    public getIconList(): string[] {\n        return [...this.iconMap.keys()];\n    }\n\n    protected prepareSvgClone(sourceSvg: SVGSymbolElement): SVGSVGElement {\n        const content = sourceSvg.cloneNode(true) as SVGSymbolElement;\n        // we're going to create a new svg element that will have our symbol geometry inside\n        const svg = document.createElementNS(\n            'http://www.w3.org/2000/svg',\n            'svg'\n        );\n        const viewBox = content.getAttribute('viewBox') || '';\n        // inline style isn't ideal but will work in all cases and means our icons don't need to know\n        // if they are svg or spritesheet provided\n        const cssText =\n            'pointer-events: none; display: block; width: 100%; height: 100%;';\n        svg.style.cssText = cssText;\n        // copy the viewbox and other properties into the svg\n        svg.setAttribute('viewBox', viewBox);\n        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');\n        svg.setAttribute('focusable', 'false');\n        // move all the child nodes over to the svg\n        while (content.childNodes.length > 0) {\n            svg.appendChild(content.childNodes[0]);\n        }\n        return svg;\n    }\n    protected getSVGIconName(icon: string): string {\n        return icon;\n    }\n    protected getSanitizedIconName(icon: string): string {\n        return icon;\n    }\n    protected renderDefaultContent(): TemplateResult {\n        return html``;\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot @slotchange=${this.onSlotChange}>\n                ${this.renderDefaultContent()}\n            </slot>\n        `;\n    }\n\n    protected updateSVG(nodes: SVGElement[]): void {\n        // iterate over the nodes that were passed in, and find all the top level symbols\n        const symbols = nodes.reduce((prev, svgNode) => {\n            const containedSymbols = svgNode.querySelectorAll('symbol');\n            prev.push(...containedSymbols);\n            return prev;\n        }, [] as SVGSymbolElement[]);\n        symbols.forEach((symbol) => {\n            this.iconMap.set(this.getSanitizedIconName(symbol.id), symbol);\n        });\n    }\n\n    protected getSVGNodes(slotTarget: HTMLSlotElement): SVGElement[] {\n        const nodes = slotTarget.assignedNodes({ flatten: true });\n        // find all the svg nodes\n        const svgNodes = nodes.filter((node) => {\n            return node.nodeName === 'svg';\n        }) as SVGElement[];\n        return svgNodes;\n    }\n\n    private onSlotChange(event: Event): void {\n        const slotTarget = event.target as HTMLSlotElement;\n        const svgNodes = this.getSVGNodes(slotTarget);\n        this.updateSVG(svgNodes);\n    }\n}\n"],
+  "mappings": "qNAYA,OACI,QAAAA,MAGG,gCACP,OAAS,SAAAC,MAAa,kDAEtB,OAAS,WAAAC,MAAe,eAEjB,aAAe,mBAAmBA,CAAQ,CAA1C,kCACH,KAAQ,QAAyC,IAAI,IAQrC,QAAQC,EAAyC,CAC7D,GAAI,CAAC,KAAK,cACN,OAEJ,MAAMC,EAAkB,KAAK,YAAY,KAAK,aAAa,EAC3D,KAAK,UAAUA,CAAe,EAC9B,MAAM,QAAQD,CAAiB,CACnC,CAOA,MAAa,mBACTE,EACAC,EACAC,EACAC,EACa,CACb,MAAM,KAAK,eACX,MAAMC,EAAa,KAAK,QAAQ,IAAIH,CAAI,EACxC,GAAI,CAACG,EACD,MAAM,IAAI,MAAM,uBAAuBH,CAAI,EAAE,EAIjD,MAAMI,EAAa,KAAK,gBAAgBD,CAAU,EAClDC,EAAW,aAAa,OAAQ,KAAK,EACjCF,EACAE,EAAW,aAAa,aAAcF,CAAK,EAE3CE,EAAW,aAAa,cAAe,MAAM,EAG7CL,EAAG,WACHA,EAAG,WAAW,YAAYK,CAAU,EAEpCL,EAAG,YAAYK,CAAU,CAEjC,CAKO,aAAwB,CAC3B,MAAO,CAAC,GAAG,KAAK,QAAQ,KAAK,CAAC,CAClC,CAEU,gBAAgBC,EAA4C,CAClE,MAAMC,EAAUD,EAAU,UAAU,EAAI,EAElCE,EAAM,SAAS,gBACjB,6BACA,KACJ,EACMC,EAAUF,EAAQ,aAAa,SAAS,GAAK,GAG7CG,EACF,mEAOJ,IANAF,EAAI,MAAM,QAAUE,EAEpBF,EAAI,aAAa,UAAWC,CAAO,EACnCD,EAAI,aAAa,sBAAuB,eAAe,EACvDA,EAAI,aAAa,YAAa,OAAO,EAE9BD,EAAQ,WAAW,OAAS,GAC/BC,EAAI,YAAYD,EAAQ,WAAW,CAAC,CAAC,EAEzC,OAAOC,CACX,CACU,eAAeP,EAAsB,CAC3C,OAAOA,CACX,CACU,qBAAqBA,EAAsB,CACjD,OAAOA,CACX,CACU,sBAAuC,CAC7C,OAAON,GACX,CAEmB,QAAyB,CACxC,OAAOA;AAAA,gCACiB,KAAK,YAAY;AAAA,kBAC/B,KAAK,qBAAqB,CAAC;AAAA;AAAA,SAGzC,CAEU,UAAUgB,EAA2B,CAE3BA,EAAM,OAAO,CAACC,EAAMC,IAAY,CAC5C,MAAMC,EAAmBD,EAAQ,iBAAiB,QAAQ,EAC1D,OAAAD,EAAK,KAAK,GAAGE,CAAgB,EACtBF,CACX,EAAG,CAAC,CAAuB,EACnB,QAASG,GAAW,CACxB,KAAK,QAAQ,IAAI,KAAK,qBAAqBA,EAAO,EAAE,EAAGA,CAAM,CACjE,CAAC,CACL,CAEU,YAAYC,EAA2C,CAM7D,OALcA,EAAW,cAAc,CAAE,QAAS,EAAK,CAAC,EAEjC,OAAQC,GACpBA,EAAK,WAAa,KAC5B,CAEL,CAEQ,aAAaC,EAAoB,CACrC,MAAMF,EAAaE,EAAM,OACnBC,EAAW,KAAK,YAAYH,CAAU,EAC5C,KAAK,UAAUG,CAAQ,CAC3B,CACJ,CAzHYC,EAAA,CADPxB,EAAM,MAAM,GAHK,WAIV",
+  "names": ["html", "query", "Iconset", "changedProperties", "currentSVGNodes", "el", "icon", "_size", "label", "iconSymbol", "clonedNode", "sourceSvg", "content", "svg", "viewBox", "cssText", "nodes", "prev", "svgNode", "containedSymbols", "symbol", "slotTarget", "node", "event", "svgNodes", "__decorateClass"]
+}

package/src/iconset.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from '@spectrum-web-components/base';
+export declare abstract class Iconset extends LitElement {
+    protected registered: boolean;
+    private _name;
+    protected firstUpdated(): void;
+    /**
+     * Name of the iconset, used by the IconsetRegistry to serve this icon set
+     * to consuming icons.
+     */
+    set name(value: string);
+    get name(): string;
+    /**
+     * Applies an icon to the given element
+     */
+    abstract applyIconToElement(el: HTMLElement, icon: string, size: string, label: string): void;
+    /**
+     * Returns a list of all icons in this iconset.
+     */
+    abstract getIconList(): string[];
+    private handleRemoved;
+    /**
+     * On updated we register the iconset if we're not already registered
+     */
+    connectedCallback(): void;
+    /**
+     * On disconnected we remove the iconset
+     */
+    disconnectedCallback(): void;
+    private addIconset;
+    private removeIconset;
+}

package/src/iconset.dev.js

@@ -0,0 +1,87 @@
+"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 { IconsetRegistry } from "./iconset-registry.dev.js";
+import { LitElement } from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+export class Iconset extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.registered = false;
+    this.handleRemoved = ({
+      detail
+    }) => {
+      if (detail.name === this.name) {
+        this.registered = false;
+        this.addIconset();
+      }
+    };
+  }
+  firstUpdated() {
+    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" }
+      );
+    }
+  }
+  set name(value) {
+    if (this.registered) {
+      if (this._name) {
+        IconsetRegistry.getInstance().removeIconset(this._name);
+      }
+      if (value) {
+        IconsetRegistry.getInstance().addIconset(value, this);
+      }
+    }
+    this._name = value;
+  }
+  get name() {
+    return this._name;
+  }
+  /**
+   * On updated we register the iconset if we're not already registered
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addIconset();
+    window.addEventListener("sp-iconset-removed", this.handleRemoved);
+  }
+  /**
+   * On disconnected we remove the iconset
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("sp-iconset-removed", this.handleRemoved);
+    this.removeIconset();
+  }
+  addIconset() {
+    if (!this.name || this.registered) {
+      return;
+    }
+    IconsetRegistry.getInstance().addIconset(this.name, this);
+    this.registered = true;
+  }
+  removeIconset() {
+    if (!this.name) {
+      return;
+    }
+    IconsetRegistry.getInstance().removeIconset(this.name);
+    this.registered = false;
+  }
+}
+__decorateClass([
+  property()
+], Iconset.prototype, "name", 1);
+//# sourceMappingURL=iconset.dev.js.map

package/src/iconset.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["iconset.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*/\nimport { IconsetRegistry } from './iconset-registry.dev.js'\n\nimport { LitElement } from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nexport abstract class Iconset extends LitElement {\n    protected registered = false;\n\n    private _name!: string;\n\n    protected override firstUpdated(): void {\n        // force no display for all iconsets\n        this.style.display = 'none';\n        if (window.__swc.DEBUG) {\n            window.__swc.warn(\n                this,\n                '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.',\n                'https://opensource.adobe.com/spectrum-web-components/components/iconset/#deprecated',\n                { level: 'deprecation' }\n            );\n        }\n    }\n\n    /**\n     * Name of the iconset, used by the IconsetRegistry to serve this icon set\n     * to consuming icons.\n     */\n    @property()\n    public set name(value: string) {\n        // if we're already registered in the iconset registry\n        // we'll need to update our registration\n        if (this.registered) {\n            if (this._name) {\n                // remove from the iconset map using the old name\n                IconsetRegistry.getInstance().removeIconset(this._name);\n            }\n\n            if (value) {\n                // set in the map using the new name\n                IconsetRegistry.getInstance().addIconset(value, this);\n            }\n        }\n        this._name = value;\n    }\n    public get name(): string {\n        return this._name;\n    }\n\n    /**\n     * Applies an icon to the given element\n     */\n    public abstract applyIconToElement(\n        el: HTMLElement,\n        icon: string,\n        size: string,\n        label: string\n    ): void;\n\n    /**\n     * Returns a list of all icons in this iconset.\n     */\n    public abstract getIconList(): string[];\n\n    private handleRemoved = ({\n        detail,\n    }: {\n        detail: { name: string };\n    }): void => {\n        if (detail.name === this.name) {\n            this.registered = false;\n            this.addIconset();\n        }\n    };\n\n    /**\n     * On updated we register the iconset if we're not already registered\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.addIconset();\n        window.addEventListener('sp-iconset-removed', this.handleRemoved);\n    }\n    /**\n     * On disconnected we remove the iconset\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        window.removeEventListener('sp-iconset-removed', this.handleRemoved);\n        this.removeIconset();\n    }\n\n    private addIconset(): void {\n        if (!this.name || this.registered) {\n            return;\n        }\n        IconsetRegistry.getInstance().addIconset(this.name, this);\n        this.registered = true;\n    }\n\n    private removeIconset(): void {\n        if (!this.name) {\n            return;\n        }\n        IconsetRegistry.getInstance().removeIconset(this.name);\n        this.registered = false;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAWA,SAAS,uBAAuB;AAEhC,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAElB,aAAe,gBAAgB,WAAW;AAAA,EAA1C;AAAA;AACH,SAAU,aAAa;AAyDvB,SAAQ,gBAAgB,CAAC;AAAA,MACrB;AAAA,IACJ,MAEY;AACR,UAAI,OAAO,SAAS,KAAK,MAAM;AAC3B,aAAK,aAAa;AAClB,aAAK,WAAW;AAAA,MACpB;AAAA,IACJ;AAAA;AAAA,EA9DmB,eAAqB;AAEpC,SAAK,MAAM,UAAU;AACrB,QAAI,MAAoB;AACpB,aAAO,MAAM;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,EAAE,OAAO,cAAc;AAAA,MAC3B;AAAA,IACJ;AAAA,EACJ;AAAA,EAOA,IAAW,KAAK,OAAe;AAG3B,QAAI,KAAK,YAAY;AACjB,UAAI,KAAK,OAAO;AAEZ,wBAAgB,YAAY,EAAE,cAAc,KAAK,KAAK;AAAA,MAC1D;AAEA,UAAI,OAAO;AAEP,wBAAgB,YAAY,EAAE,WAAW,OAAO,IAAI;AAAA,MACxD;AAAA,IACJ;AACA,SAAK,QAAQ;AAAA,EACjB;AAAA,EACA,IAAW,OAAe;AACtB,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA,EA+BgB,oBAA0B;AACtC,UAAM,kBAAkB;AACxB,SAAK,WAAW;AAChB,WAAO,iBAAiB,sBAAsB,KAAK,aAAa;AAAA,EACpE;AAAA;AAAA;AAAA;AAAA,EAIgB,uBAA6B;AACzC,UAAM,qBAAqB;AAC3B,WAAO,oBAAoB,sBAAsB,KAAK,aAAa;AACnE,SAAK,cAAc;AAAA,EACvB;AAAA,EAEQ,aAAmB;AACvB,QAAI,CAAC,KAAK,QAAQ,KAAK,YAAY;AAC/B;AAAA,IACJ;AACA,oBAAgB,YAAY,EAAE,WAAW,KAAK,MAAM,IAAI;AACxD,SAAK,aAAa;AAAA,EACtB;AAAA,EAEQ,gBAAsB;AAC1B,QAAI,CAAC,KAAK,MAAM;AACZ;AAAA,IACJ;AACA,oBAAgB,YAAY,EAAE,cAAc,KAAK,IAAI;AACrD,SAAK,aAAa;AAAA,EACtB;AACJ;AA9Ee;AAAA,EADV,SAAS;AAAA,GAtBQ,QAuBP;",
+  "names": []
+}

package/src/iconset.js

@@ -0,0 +1,2 @@
+"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

package/src/iconset.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["iconset.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*/\nimport { IconsetRegistry } from './iconset-registry.js';\n\nimport { LitElement } from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\n\nexport abstract class Iconset extends LitElement {\n    protected registered = false;\n\n    private _name!: string;\n\n    protected override firstUpdated(): void {\n        // force no display for all iconsets\n        this.style.display = 'none';\n        if (window.__swc.DEBUG) {\n            window.__swc.warn(\n                this,\n                '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.',\n                'https://opensource.adobe.com/spectrum-web-components/components/iconset/#deprecated',\n                { level: 'deprecation' }\n            );\n        }\n    }\n\n    /**\n     * Name of the iconset, used by the IconsetRegistry to serve this icon set\n     * to consuming icons.\n     */\n    @property()\n    public set name(value: string) {\n        // if we're already registered in the iconset registry\n        // we'll need to update our registration\n        if (this.registered) {\n            if (this._name) {\n                // remove from the iconset map using the old name\n                IconsetRegistry.getInstance().removeIconset(this._name);\n            }\n\n            if (value) {\n                // set in the map using the new name\n                IconsetRegistry.getInstance().addIconset(value, this);\n            }\n        }\n        this._name = value;\n    }\n    public get name(): string {\n        return this._name;\n    }\n\n    /**\n     * Applies an icon to the given element\n     */\n    public abstract applyIconToElement(\n        el: HTMLElement,\n        icon: string,\n        size: string,\n        label: string\n    ): void;\n\n    /**\n     * Returns a list of all icons in this iconset.\n     */\n    public abstract getIconList(): string[];\n\n    private handleRemoved = ({\n        detail,\n    }: {\n        detail: { name: string };\n    }): void => {\n        if (detail.name === this.name) {\n            this.registered = false;\n            this.addIconset();\n        }\n    };\n\n    /**\n     * On updated we register the iconset if we're not already registered\n     */\n    public override connectedCallback(): void {\n        super.connectedCallback();\n        this.addIconset();\n        window.addEventListener('sp-iconset-removed', this.handleRemoved);\n    }\n    /**\n     * On disconnected we remove the iconset\n     */\n    public override disconnectedCallback(): void {\n        super.disconnectedCallback();\n        window.removeEventListener('sp-iconset-removed', this.handleRemoved);\n        this.removeIconset();\n    }\n\n    private addIconset(): void {\n        if (!this.name || this.registered) {\n            return;\n        }\n        IconsetRegistry.getInstance().addIconset(this.name, this);\n        this.registered = true;\n    }\n\n    private removeIconset(): void {\n        if (!this.name) {\n            return;\n        }\n        IconsetRegistry.getInstance().removeIconset(this.name);\n        this.registered = false;\n    }\n}\n"],
+  "mappings": "qNAWA,OAAS,mBAAAA,MAAuB,wBAEhC,OAAS,cAAAC,MAAkB,gCAC3B,OAAS,YAAAC,MAAgB,kDAElB,aAAe,gBAAgBD,CAAW,CAA1C,kCACH,KAAU,WAAa,GAyDvB,KAAQ,cAAgB,CAAC,CACrB,OAAAE,CACJ,IAEY,CACJA,EAAO,OAAS,KAAK,OACrB,KAAK,WAAa,GAClB,KAAK,WAAW,EAExB,EA9DmB,cAAqB,CAEpC,KAAK,MAAM,QAAU,MASzB,CAOA,IAAW,KAAKC,EAAe,CAGvB,KAAK,aACD,KAAK,OAELJ,EAAgB,YAAY,EAAE,cAAc,KAAK,KAAK,EAGtDI,GAEAJ,EAAgB,YAAY,EAAE,WAAWI,EAAO,IAAI,GAG5D,KAAK,MAAQA,CACjB,CACA,IAAW,MAAe,CACtB,OAAO,KAAK,KAChB,CA+BgB,mBAA0B,CACtC,MAAM,kBAAkB,EACxB,KAAK,WAAW,EAChB,OAAO,iBAAiB,qBAAsB,KAAK,aAAa,CACpE,CAIgB,sBAA6B,CACzC,MAAM,qBAAqB,EAC3B,OAAO,oBAAoB,qBAAsB,KAAK,aAAa,EACnE,KAAK,cAAc,CACvB,CAEQ,YAAmB,CACnB,CAAC,KAAK,MAAQ,KAAK,aAGvBJ,EAAgB,YAAY,EAAE,WAAW,KAAK,KAAM,IAAI,EACxD,KAAK,WAAa,GACtB,CAEQ,eAAsB,CACrB,KAAK,OAGVA,EAAgB,YAAY,EAAE,cAAc,KAAK,IAAI,EACrD,KAAK,WAAa,GACtB,CACJ,CA9EeK,EAAA,CADVH,EAAS,GAtBQ,QAuBP",
+  "names": ["IconsetRegistry", "LitElement", "property", "detail", "value", "__decorateClass"]
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './iconset.js';
+export * from './iconset-svg.js';
+export * from './iconset-registry.js';

package/src/index.dev.js

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

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.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\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*/\nexport * from './iconset.dev.js'\nexport * from './iconset-svg.dev.js'\nexport * from './iconset-registry.dev.js'\n"],
+  "mappings": ";AAUA,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/src/index.js

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

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.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\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*/\nexport * from './iconset.js';\nexport * from './iconset-svg.js';\nexport * from './iconset-registry.js';\n"],
+  "mappings": "aAUA,WAAc,eACd,WAAc,mBACd,WAAc",
+  "names": []
+}

package/stories/icons-demo.js

@@ -0,0 +1,280 @@
+"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,
+  state
+} 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";
+import iconsList from "./iconsList.json";
+import {
+  SystemResolutionController,
+  systemResolverUpdatedSymbol
+} from "@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js";
+export let DelayedReady = class extends SpectrumElement {
+  render() {
+    return html`
+            <slot @slotchange=${this.handleSlotchange}></slot>
+        `;
+  }
+  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.filteredIcons = [];
+    this.unsubscribeSystemContext = null;
+    this.spectrumVersion = 1;
+    this.iconset = [];
+    this.systemResolver = new SystemResolutionController(this);
+    this.iconset = [];
+    this.handleIconSetAdded = this.handleIconSetAdded.bind(this);
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("sp-iconset-added", this.handleIconSetAdded);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("sp-iconset-added", this.handleIconSetAdded);
+    super.disconnectedCallback();
+    if (this.unsubscribeSystemContext) {
+      this.unsubscribeSystemContext();
+      this.unsubscribeSystemContext = null;
+    }
+  }
+  filterIconsBySpectrumVersion() {
+    const iconVersion = this.spectrumVersion === 2 ? "s2" : "s1";
+    let filteredIcons = this.icons;
+    if (this.name === "workflow") {
+      filteredIcons = filteredIcons.filter((icon) => {
+        const iconName = icon.name.replace(/\s/g, "").toLowerCase();
+        return iconsList[iconVersion].includes(iconName);
+      });
+    }
+    const iconSet = /* @__PURE__ */ new Set();
+    filteredIcons = filteredIcons.filter((icon) => {
+      if (iconSet.has(icon.name)) {
+        return false;
+      }
+      iconSet.add(icon.name);
+      return true;
+    });
+    this.filteredIcons = filteredIcons;
+  }
+  update(changes) {
+    if (changes.has(systemResolverUpdatedSymbol)) {
+      this.spectrumVersion = this.systemResolver.system === "spectrum-two" ? 2 : 1;
+      this.filterIconsBySpectrumVersion();
+    }
+    if (changes.has("icons")) {
+      this.filterIconsBySpectrumVersion();
+    }
+    super.update(changes);
+  }
+  handleIconSetAdded(event) {
+    const { iconset } = event.detail;
+    this.iconset = iconset.getIconList();
+    this.requestUpdate();
+  }
+  static get styles() {
+    return [
+      ...bodyStyles,
+      css`
+                :host {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                    gap: 20px;
+                    align-items: flex-start;
+                }
+                .icon {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    text-align: center;
+                    border-radius: var(
+                        --spectrum-alias-focus-ring-gap,
+                        var(--spectrum-spacing-50)
+                    );
+                }
+                :host([package]) .icon {
+                    cursor: pointer;
+                }
+                sp-icon {
+                    margin-bottom: 10px;
+                }
+                .search {
+                    grid-column-start: 1;
+                    grid-column-end: -1;
+                }
+                .icon[tabindex]:focus {
+                    outline: none;
+                }
+                .icon[tabindex]:focus-visible {
+                    outline: var(--spectrum-alias-focus-ring-size) solid
+                        var(--spectrum-alias-focus-ring-color);
+                    outline-offset: calc(
+                        var(
+                                --spectrum-alias-focus-ring-gap,
+                                var(--spectrum-spacing-50)
+                            ) * 2
+                    );
+                }
+            `
+    ];
+  }
+  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.filteredIcons.filter(
+      (icon) => icon.name.toLowerCase().includes(this.search.toLowerCase())
+    ) : this.filteredIcons;
+    return html`
+            <div class="search" part="search">
+                <sp-field-label for="search">Spectrum icons:</sp-field-label>
+                <sp-search
+                    id="search"
+                    @keydown=${this.updateSearch}
+                    @input=${this.updateSearch}
+                    @submit=${this.submit}
+                    .value=${this.search}
+                    label="Search for icons"
+                    autocomplete="off"
+                >
+                    <sp-help-text slot="help-text">
+                        Showing ${matchingIcons.length} of
+                        ${this.filteredIcons.length} available icons.
+                    </sp-help-text>
+                </sp-search>
+            </div>
+            ${matchingIcons.map((icon) => {
+      return html`
+                    <bdo
+                        class="icon"
+                        part="icon"
+                        dir="ltr"
+                        class="icon"
+                        @click=${() => this.shouldCopy(icon.tag)}
+                        @keydown=${(event) => this.handleKeydown(event, icon.tag)}
+                        tabindex=${ifDefined(this.package ? "0" : void 0)}
+                    >
+                        ${icon.story(this.size)} ${icon.tag}
+                    </bdo>
+                `;
+    })}
+        `;
+  }
+  render() {
+    return html`
+            ${this.filteredIcons.length ? this.renderSearch() : html`
+                      <slot></slot>
+                  `}
+            ${this.iconset.map(
+      (icon) => html`
+                    <bdo class="icon" dir="ltr">
+                        <sp-icon
+                            size="xl"
+                            name=${`${this.name}:${icon}`}
+                        ></sp-icon>
+                        ${icon}
+                    </bdo>
+                `
+    )}
+        `;
+  }
+};
+__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);
+__decorateClass([
+  state()
+], IconsDemo.prototype, "spectrumVersion", 2);
+IconsDemo = __decorateClass([
+  customElement("icons-demo")
+], IconsDemo);
+//# sourceMappingURL=icons-demo.js.map

package/stories/icons-demo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["icons-demo.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*/\nimport { IconsetAddedDetail } from '@spectrum-web-components/iconset';\nimport {\n    css,\n    CSSResultGroup,\n    html,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    customElement,\n    property,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { Search } from '@spectrum-web-components/search';\nimport '@spectrum-web-components/search/sp-search.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/help-text/sp-help-text.js';\n\nimport iconsList from './iconsList.json' assert { type: 'json' };\n\nimport {\n    SystemResolutionController,\n    systemResolverUpdatedSymbol,\n} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';\n\n@customElement('delayed-ready')\nexport class DelayedReady extends SpectrumElement {\n    _delayedReady!: Promise<void>;\n    _resolveDelayedReady!: () => void;\n\n    protected override render(): TemplateResult {\n        return html`\n            <slot @slotchange=${this.handleSlotchange}></slot>\n        `;\n    }\n\n    protected override firstUpdated(): void {\n        this._delayedReady = new Promise(\n            (res) => (this._resolveDelayedReady = res)\n        );\n    }\n\n    protected override async getUpdateComplete(): Promise<boolean> {\n        const complete = (await super.getUpdateComplete()) as boolean;\n        await this._delayedReady;\n        return complete;\n    }\n\n    public handleSlotchange({\n        target,\n    }: Event & { target: HTMLSlotElement }): void {\n        if (target.assignedElements({ flatten: true }).length) {\n            requestAnimationFrame(() => {\n                this._resolveDelayedReady();\n            });\n        }\n    }\n}\n\n@customElement('icons-demo')\nexport class IconsDemo extends SpectrumElement {\n    @property()\n    public name = 'ui';\n\n    @property()\n    public package = '';\n\n    @property()\n    public size = 'm';\n\n    @property()\n    public search = '';\n\n    @property({ attribute: false })\n    public icons: {\n        name: string;\n        story(size: string): TemplateResult;\n        tag: string;\n    }[] = [];\n\n    private filteredIcons: {\n        name: string;\n        story(size: string): TemplateResult;\n        tag: string;\n    }[] = [];\n\n    private unsubscribeSystemContext: (() => void) | null = null;\n\n    @state()\n    public spectrumVersion = 1;\n\n    private iconset: string[] = [];\n    public constructor() {\n        super();\n        this.iconset = [];\n        this.handleIconSetAdded = this.handleIconSetAdded.bind(this);\n    }\n\n    public override async connectedCallback(): Promise<void> {\n        super.connectedCallback();\n        window.addEventListener('sp-iconset-added', this.handleIconSetAdded);\n    }\n    public override disconnectedCallback(): void {\n        window.removeEventListener('sp-iconset-added', this.handleIconSetAdded);\n        super.disconnectedCallback();\n        if (this.unsubscribeSystemContext) {\n            this.unsubscribeSystemContext();\n            this.unsubscribeSystemContext = null;\n        }\n    }\n\n    private filterIconsBySpectrumVersion(): void {\n        const iconVersion = this.spectrumVersion === 2 ? 's2' : 's1';\n        let filteredIcons = this.icons;\n        // Filter out icons that are not in the current version for workflow icons\n        if (this.name === 'workflow') {\n            filteredIcons = filteredIcons.filter((icon) => {\n                const iconName = icon.name.replace(/\\s/g, '').toLowerCase();\n                return iconsList[iconVersion].includes(iconName);\n            });\n        }\n\n        // Use a Set to remove duplicates that may get added because of the same icon name in both versions\n        const iconSet = new Set();\n        filteredIcons = filteredIcons.filter((icon) => {\n            if (iconSet.has(icon.name)) {\n                return false;\n            }\n            iconSet.add(icon.name);\n            return true;\n        });\n\n        this.filteredIcons = filteredIcons;\n    }\n\n    private systemResolver = new SystemResolutionController(this);\n\n    protected override update(changes: PropertyValues): void {\n        if (changes.has(systemResolverUpdatedSymbol)) {\n            this.spectrumVersion =\n                this.systemResolver.system === 'spectrum-two' ? 2 : 1;\n            this.filterIconsBySpectrumVersion();\n        }\n\n        if (changes.has('icons')) {\n            this.filterIconsBySpectrumVersion();\n        }\n\n        super.update(changes);\n    }\n\n    public handleIconSetAdded(event: CustomEvent<IconsetAddedDetail>): void {\n        const { iconset } = event.detail;\n        this.iconset = iconset.getIconList();\n        this.requestUpdate();\n    }\n    public static override get styles(): CSSResultGroup {\n        return [\n            ...bodyStyles,\n            css`\n                :host {\n                    display: grid;\n                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n                    gap: 20px;\n                    align-items: flex-start;\n                }\n                .icon {\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    text-align: center;\n                    border-radius: var(\n                        --spectrum-alias-focus-ring-gap,\n                        var(--spectrum-spacing-50)\n                    );\n                }\n                :host([package]) .icon {\n                    cursor: pointer;\n                }\n                sp-icon {\n                    margin-bottom: 10px;\n                }\n                .search {\n                    grid-column-start: 1;\n                    grid-column-end: -1;\n                }\n                .icon[tabindex]:focus {\n                    outline: none;\n                }\n                .icon[tabindex]:focus-visible {\n                    outline: var(--spectrum-alias-focus-ring-size) solid\n                        var(--spectrum-alias-focus-ring-color);\n                    outline-offset: calc(\n                        var(\n                                --spectrum-alias-focus-ring-gap,\n                                var(--spectrum-spacing-50)\n                            ) * 2\n                    );\n                }\n            `,\n        ];\n    }\n    private handleKeydown(event: KeyboardEvent, tag: string): void {\n        const { code } = event;\n        if (code !== 'Enter' && code !== 'NumpadEnter' && code !== 'Space') {\n            return;\n        }\n        event.preventDefault();\n        this.shouldCopy(tag);\n    }\n\n    private shouldCopy(tag: string): void {\n        if (!this.package) return;\n        const conditionedTag = tag.slice(1, tag.length - 1);\n        const importURL = `import '@spectrum-web-components/${this.package}/icons/${conditionedTag}.js';`;\n        this.dispatchEvent(\n            new CustomEvent('copy-text', {\n                bubbles: true,\n                composed: true,\n                detail: {\n                    message: 'Import statement copied to clipboard!',\n                    text: importURL,\n                },\n            })\n        );\n    }\n    private updateSearch(event: Event & { target: Search }): void {\n        event.stopPropagation();\n        this.search = event.target.value;\n    }\n    private submit(event: Event & { target: Search }): void {\n        event.stopPropagation();\n        this.updateSearch(event);\n    }\n    private renderSearch(): TemplateResult {\n        const matchingIcons = this.search\n            ? this.filteredIcons.filter((icon) =>\n                  icon.name.toLowerCase().includes(this.search.toLowerCase())\n              )\n            : this.filteredIcons;\n\n        return html`\n            <div class=\"search\" part=\"search\">\n                <sp-field-label for=\"search\">Spectrum icons:</sp-field-label>\n                <sp-search\n                    id=\"search\"\n                    @keydown=${this.updateSearch}\n                    @input=${this.updateSearch}\n                    @submit=${this.submit}\n                    .value=${this.search}\n                    label=\"Search for icons\"\n                    autocomplete=\"off\"\n                >\n                    <sp-help-text slot=\"help-text\">\n                        Showing ${matchingIcons.length} of\n                        ${this.filteredIcons.length} available icons.\n                    </sp-help-text>\n                </sp-search>\n            </div>\n            ${matchingIcons.map((icon) => {\n                return html`\n                    <bdo\n                        class=\"icon\"\n                        part=\"icon\"\n                        dir=\"ltr\"\n                        class=\"icon\"\n                        @click=${() => this.shouldCopy(icon.tag)}\n                        @keydown=${(event: KeyboardEvent) =>\n                            this.handleKeydown(event, icon.tag)}\n                        tabindex=${ifDefined(this.package ? '0' : undefined)}\n                    >\n                        ${icon.story(this.size)} ${icon.tag}\n                    </bdo>\n                `;\n            })}\n        `;\n    }\n    protected override render(): TemplateResult {\n        return html`\n            ${this.filteredIcons.length\n                ? this.renderSearch()\n                : html`\n                      <slot></slot>\n                  `}\n            ${this.iconset.map(\n                (icon) => html`\n                    <bdo class=\"icon\" dir=\"ltr\">\n                        <sp-icon\n                            size=\"xl\"\n                            name=${`${this.name}:${icon}`}\n                        ></sp-icon>\n                        ${icon}\n                    </bdo>\n                `\n            )}\n        `;\n    }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/test/iconset.test.js

@@ -0,0 +1,105 @@
+"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 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>
+                    <sp-icon name="ui:Chevron200"></sp-icon>
+                    <sp-icons-medium></sp-icons-medium>
+                </div>
+            `
+    );
+    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

package/test/iconset.test.js.map

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