@pine-ds/icons 3.2.0 → 3.3.0

package/dist/collection/components/pds-icon/pds-icon.js

@@ -2,185 +2,206 @@ import { Build, Host, h } from "@stencil/core";
 import { getSvgContent, pdsIconContent } from "./request";
 import { getName, getUrl, inheritAttributes } from "./utils";
 export class PdsIcon {
-  constructor() {
-    this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
-    this.hasAriaHidden = () => {
-      const { el } = this;
-      return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
-    };
-    this.ariaLabel = undefined;
-    this.isVisible = false;
-    this.svgContent = undefined;
-    this.color = undefined;
-    this.name = undefined;
-    this.size = 'regular';
-  }
-  iconSize() {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const sizes = {
-      small: '12px',
-      regular: '16px',
-      medium: '20px',
-      large: '24px',
-    };
-    if (sizes[this.size]) {
-      return sizes[this.size];
+    constructor() {
+        this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+        this.hasAriaHidden = () => {
+            const { el } = this;
+            return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
+        };
+        this.ariaLabel = undefined;
+        this.isVisible = false;
+        this.svgContent = undefined;
+        this.color = undefined;
+        this.icon = undefined;
+        this.name = undefined;
+        this.size = 'regular';
     }
-    else {
-      return this.size;
+    iconSize() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const sizes = {
+            small: '12px',
+            regular: '16px',
+            medium: '20px',
+            large: '24px',
+        };
+        if (sizes[this.size]) {
+            return sizes[this.size];
+        }
+        else {
+            return this.size;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
     }
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
-  }
-  connectedCallback() {
-    this.waitUntilVisible(this.el, '50px', () => {
-      this.isVisible = true;
-      this.loadIcon();
-    });
-  }
-  disconnectedCallback() {
-    if (this.io) {
-      this.io.disconnect();
-      this.io = undefined;
+    connectedCallback() {
+        this.waitUntilVisible(this.el, '50px', () => {
+            this.isVisible = true;
+            this.loadIcon();
+        });
     }
-  }
-  loadIcon() {
-    if (Build.isBrowser && this.isVisible) {
-      const url = getUrl(this);
-      if (url) {
-        if (pdsIconContent.has(url)) {
-          this.svgContent = pdsIconContent.get(url);
+    disconnectedCallback() {
+        if (this.io) {
+            this.io.disconnect();
+            this.io = undefined;
         }
-        else {
-          getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+    }
+    loadIcon() {
+        if (Build.isBrowser && this.isVisible) {
+            const url = getUrl(this);
+            if (url) {
+                if (pdsIconContent.has(url)) {
+                    this.svgContent = pdsIconContent.get(url);
+                }
+                else {
+                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+                }
+            }
+        }
+        const label = getName(this.name, this.icon);
+        if (label) {
+            this.ariaLabel = label.replace(/\-/g, ' ');
         }
-      }
     }
-    const label = getName(this.name);
-    if (label) {
-      this.ariaLabel = label.replace(/\-/g, ' ');
+    render() {
+        const { ariaLabel, inheritedAttributes } = this;
+        const style = {
+            height: this.iconSize(),
+            width: this.iconSize(),
+            color: this.color,
+        };
+        return (h(Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, role: "img", style: style, class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
     }
-  }
-  render() {
-    const { ariaLabel, inheritedAttributes } = this;
-    const style = {
-      height: this.iconSize(),
-      width: this.iconSize(),
-      color: this.color,
-    };
-    return (h(Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, role: "img", style: style, class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
-  }
-  /*****
-   * Private Methods
-   ****/
-  waitUntilVisible(el, rootMargin, cb) {
-    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {
-      const io = (this.io = new (window).IntersectionObserver((data) => {
-        if (data[0].isIntersecting) {
-          io.disconnect();
-          this.io = undefined;
-          cb();
+    /*****
+     * Private Methods
+     ****/
+    waitUntilVisible(el, rootMargin, cb) {
+        if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {
+            const io = (this.io = new (window).IntersectionObserver((data) => {
+                if (data[0].isIntersecting) {
+                    io.disconnect();
+                    this.io = undefined;
+                    cb();
+                }
+            }, { rootMargin }));
+            io.observe(el);
         }
-      }, { rootMargin }));
-      io.observe(el);
+        else {
+            // browser doesn't support IntersectionObserver
+            // so just fallback to always show it
+            cb();
+        }
+    }
+    static get is() { return "pds-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-icon.css"]
+        };
+    }
+    static get assetsDirs() { return ["svg"]; }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\nThe color of the icon"
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "icon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This a combination of both `name` and `src`. If a `src` url is detected\nit will set the `src` property. Otherwise it assumes it's a built-in named\nSVG and set the `name` property."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to use from\nthe built-in set."
+                },
+                "attribute": "name",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the icon. This can be\n'small', 'regular', 'medium', large, or a\ncustom value (40px, 1rem, etc)"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'regular'"
+            }
+        };
     }
-    else {
-      // browser doesn't support IntersectionObserver
-      // so just fallback to always show it
-      cb();
+    static get states() {
+        return {
+            "ariaLabel": {},
+            "isVisible": {},
+            "svgContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "loadIcon"
+            }, {
+                "propName": "icon",
+                "methodName": "loadIcon"
+            }];
     }
-  }
-  static get is() { return "pds-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["pds-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["pds-icon.css"]
-    };
-  }
-  static get assetsDirs() { return ["svg"]; }
-  static get properties() {
-    return {
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "\nThe color of the icon"
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the icon to use from\nthe built-in set."
-        },
-        "attribute": "name",
-        "reflect": true
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "| 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the icon. This can be\n'small', 'regular', 'medium', large, or a\ncustom value (40px, 1rem, etc)"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "'regular'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "ariaLabel": {},
-      "isVisible": {},
-      "svgContent": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "name",
-        "methodName": "loadIcon"
-      }];
-  }
 }
 const createColorClasses = (color) => {
-  return color
-    ? {
-      'pds-color': true,
-      [`pds-color-${color}`]: true,
-    }
-    : null;
+    return color
+        ? {
+            'pds-color': true,
+            [`pds-color-${color}`]: true,
+        }
+        : null;
 };
 //# sourceMappingURL=pds-icon.js.map

package/dist/collection/components/pds-icon/pds-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-icon.js","sourceRoot":"","sources":["../../../src/components/pds-icon/pds-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes } from './utils';\n\n@Component({\n  tag: 'pds-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'pds-icon.scss',\n  shadow: true,\n})\nexport class PdsIcon {\n  private io?: IntersectionObserver;\n  private inheritedAttributes: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  @Element() el!: HTMLPdsIconElement;\n\n  @State() private ariaLabel?: string;\n  @State() private isVisible = false;\n  @State() private svgContent?: string;\n\n  /**\n   *\n   * The color of the icon\n   *\n   */\n  @Prop() color?: string;\n\n  /**\n   * The name of the icon to use from\n   * the built-in set.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The size of the icon. This can be\n   * 'small', 'regular', 'medium', large, or a\n   * custom value (40px, 1rem, etc)\n   *\n   */\n  @Prop({ reflect: true }) size?:\n    | 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string = 'regular'\n\n  private iconSize() {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const sizes: { [key: string]: any } = {\n      small: '12px',\n      regular: '16px',\n      medium: '20px',\n      large: '24px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n  }\n\n  connectedCallback() {\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  @Watch('name')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (pdsIconContent.has(url)) {\n          this.svgContent = pdsIconContent.get(url);\n        } else {\n          getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));\n        }\n      }\n    }\n\n    const label = getName(this.name);\n\n    if (label) {\n      this.ariaLabel = label.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, inheritedAttributes } = this;\n\n    const style = {\n      height: this.iconSize(),\n      width: this.iconSize(),\n      color: this.color,\n    }\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        role=\"img\"\n        style={style}\n        class={{\n          ...createColorClasses(this.color),\n        }}\n        {...inheritedAttributes}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    )\n  }\n\n  /*****\n   * Private Methods\n   ****/\n\n  private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n      const io = (this.io = new (window).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin },\n      ));\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  private hasAriaHidden = () => {\n    const { el } = this;\n\n    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n  }\n}\n\nconst createColorClasses = (color: string | undefined) => {\n  return color\n   ? {\n       'pds-color': true,\n       [`pds-color-${color}`]: true,\n     }\n   : null;\n };\n"]}
+{"version":3,"file":"pds-icon.js","sourceRoot":"","sources":["../../../src/components/pds-icon/pds-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ7D,MAAM,OAAO,OAAO;;QAEV,wBAAmB,GAAyB,EAAE,CAAC,CAAC,yDAAyD;QAsJzG,kBAAa,GAAG,GAAG,EAAE;YAC3B,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;YAEpB,OAAO,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM,CAAC;QACrF,CAAC,CAAA;;yBArJ4B,KAAK;;;;;oBAmCrB,SAAS;;IAEd,QAAQ;QACd,8DAA8D;QAC9D,MAAM,KAAK,GAA2B;YACpC,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAC;SAClB;IACH,CAAC;IACD,iBAAiB;QACf,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;YAC1C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,EAAE,EAAE;YACX,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;SACrB;IACH,CAAC;IAID,QAAQ;QACN,IAAI,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE;YACrC,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,GAAG,EAAE;gBACP,IAAI,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBAC3B,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;iBAC3C;qBAAM;oBACL,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;iBAC5E;aACF;SACF;QAED,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5C,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;SAC5C;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;QAEhD,MAAM,KAAK,GAAG;YACZ,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE;YACvB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YACtB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAA;QAED,OAAO,CAEL,EAAC,IAAI,gCACS,SAAS,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAC/E,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,oBACA,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,KAE/B,mBAAmB,GAEtB,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACpC,WAAK,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,CAAC,UAAU,GAAQ,CAC3D,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,YAAY,GAAO,CAC/B,CACI,CACR,CAAA;IACH,CAAC;IAED;;UAEM;IAEE,gBAAgB,CAAC,EAAe,EAAE,UAAkB,EAAE,EAAc;QAC1E,IAAI,KAAK,CAAC,SAAS,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,CAAC,oBAAoB,EAAE;YACrF,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,oBAAoB,CACrD,CAAC,IAAiC,EAAE,EAAE;gBACpC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE;oBAC1B,EAAE,CAAC,UAAU,EAAE,CAAC;oBAChB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;oBACpB,EAAE,EAAE,CAAC;iBACN;YACH,CAAC,EACD,EAAE,UAAU,EAAE,CACf,CAAC,CAAC;YAEH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;SAChB;aAAM;YACL,+CAA+C;YAC/C,qCAAqC;YACrC,EAAE,EAAE,CAAC;SACN;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOF;AAED,MAAM,kBAAkB,GAAG,CAAC,KAAyB,EAAE,EAAE;IACvD,OAAO,KAAK;QACX,CAAC,CAAC;YACE,WAAW,EAAE,IAAI;YACjB,CAAC,aAAa,KAAK,EAAE,CAAC,EAAE,IAAI;SAC7B;QACH,CAAC,CAAC,IAAI,CAAC;AACT,CAAC,CAAC","sourcesContent":["import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes } from './utils';\n\n@Component({\n  tag: 'pds-icon',\n  assetsDirs: ['svg'],\n  styleUrl: 'pds-icon.scss',\n  shadow: true,\n})\nexport class PdsIcon {\n  private io?: IntersectionObserver;\n  private inheritedAttributes: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  @Element() el!: HTMLPdsIconElement;\n\n  @State() private ariaLabel?: string;\n  @State() private isVisible = false;\n  @State() private svgContent?: string;\n\n  /**\n   *\n   * The color of the icon\n   *\n   */\n  @Prop() color?: string;\n\n  /**\n   * This a combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The name of the icon to use from\n   * the built-in set.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The size of the icon. This can be\n   * 'small', 'regular', 'medium', large, or a\n   * custom value (40px, 1rem, etc)\n   *\n   */\n  @Prop({ reflect: true }) size?:\n    | 'small'   // 12px\n    | 'regular'  // 16px\n    | 'medium'  // 20px\n    | 'large'   // 24px\n    | 'auto'\n    | string = 'regular'\n\n  private iconSize() {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const sizes: { [key: string]: any } = {\n      small: '12px',\n      regular: '16px',\n      medium: '20px',\n      large: '24px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n  }\n\n  connectedCallback() {\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIcon();\n    })\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  @Watch('name')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (pdsIconContent.has(url)) {\n          this.svgContent = pdsIconContent.get(url);\n        } else {\n          getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));\n        }\n      }\n    }\n\n    const label = getName(this.name, this.icon);\n\n    if (label) {\n      this.ariaLabel = label.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, inheritedAttributes } = this;\n\n    const style = {\n      height: this.iconSize(),\n      width: this.iconSize(),\n      color: this.color,\n    }\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        role=\"img\"\n        style={style}\n        class={{\n          ...createColorClasses(this.color),\n        }}\n        {...inheritedAttributes}\n      >\n        {Build.isBrowser && this.svgContent ? (\n          <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n        ) : (\n          <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    )\n  }\n\n  /*****\n   * Private Methods\n   ****/\n\n  private waitUntilVisible(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n      const io = (this.io = new (window).IntersectionObserver(\n        (data: IntersectionObserverEntry[]) => {\n          if (data[0].isIntersecting) {\n            io.disconnect();\n            this.io = undefined;\n            cb();\n          }\n        },\n        { rootMargin },\n      ));\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  private hasAriaHidden = () => {\n    const { el } = this;\n\n    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n  }\n}\n\nconst createColorClasses = (color: string | undefined) => {\n  return color\n   ? {\n       'pds-color': true,\n       [`pds-color-${color}`]: true,\n     }\n   : null;\n };\n"]}

package/dist/collection/components/pds-icon/request.js

@@ -2,28 +2,28 @@ import { validateContent } from "./validate";
 export const pdsIconContent = new Map();
 const requests = new Map(); // eslint-disable-line @typescript-eslint/no-explicit-any
 export const getSvgContent = (url, sanitize = false) => {
-  let req = requests.get(url);
-  if (!req) {
-    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {
-      // we don't have a request
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            pdsIconContent.set(url, svgContent || '');
-          });
+    let req = requests.get(url);
+    if (!req) {
+        if (typeof fetch != 'undefined' && typeof document !== 'undefined') {
+            // we don't have a request
+            req = fetch(url).then((rsp) => {
+                if (rsp.ok) {
+                    return rsp.text().then((svgContent) => {
+                        if (svgContent && sanitize !== false) {
+                            svgContent = validateContent(svgContent);
+                        }
+                        pdsIconContent.set(url, svgContent || '');
+                    });
+                }
+                pdsIconContent.set(url, '');
+            });
+            requests.set(url, req);
+        }
+        else {
+            pdsIconContent.set(url, '');
+            return Promise.resolve();
         }
-        pdsIconContent.set(url, '');
-      });
-      requests.set(url, req);
-    }
-    else {
-      pdsIconContent.set(url, '');
-      return Promise.resolve();
     }
-  }
-  return req;
+    return req;
 };
 //# sourceMappingURL=request.js.map

package/dist/collection/components/pds-icon/request.js.map

@@ -1 +1 @@
-{"version":3,"file":"request.js","sourceRoot":"","sources":["../../../src/components/pds-icon/request.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,GAAG,EAAkB,CAAC;AACxD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAwB,CAAC,CAAC,yDAAyD;AAE3G,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;EAC7D,IAAI,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;EAE5B,IAAG,CAAC,GAAG,EAAE;IACP,IAAI,OAAO,KAAK,IAAI,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;MAClE,0BAA0B;MAC1B,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;QAC5B,IAAI,GAAG,CAAC,EAAE,EAAE;UACV,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE;YACpC,IAAI,UAAU,IAAI,QAAQ,KAAK,KAAK,EAAE;cACpC,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;aAC1C;YACD,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;UAC5C,CAAC,CAAC,CAAC;SACJ;QACD,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAC9B,CAAC,CAAC,CAAC;MAEH,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;KACxB;SAAM;MACL,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAC5B,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;KAC1B;GACF;EACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAA","sourcesContent":["import { validateContent } from './validate';\n\nexport const pdsIconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>(); // eslint-disable-line @typescript-eslint/no-explicit-any\n\nexport const getSvgContent = (url: string, sanitize = false) => {\n  let req = requests.get(url);\n\n  if(!req) {\n    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n      // we don't have a request\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            pdsIconContent.set(url, svgContent || '');\n          });\n        }\n        pdsIconContent.set(url, '');\n      });\n\n      requests.set(url, req);\n    } else {\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n  return req;\n}\n"]}
+{"version":3,"file":"request.js","sourceRoot":"","sources":["../../../src/components/pds-icon/request.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,GAAG,EAAkB,CAAC;AACxD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAwB,CAAC,CAAC,yDAAyD;AAE3G,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;IAC7D,IAAI,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE5B,IAAG,CAAC,GAAG,EAAE;QACP,IAAI,OAAO,KAAK,IAAI,WAAW,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;YAClE,0BAA0B;YAC1B,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC5B,IAAI,GAAG,CAAC,EAAE,EAAE;oBACV,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE;wBACpC,IAAI,UAAU,IAAI,QAAQ,KAAK,KAAK,EAAE;4BACpC,UAAU,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;yBAC1C;wBACD,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC;oBAC5C,CAAC,CAAC,CAAC;iBACJ;gBACD,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;SACxB;aAAM;YACL,cAAc,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;YAC5B,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;SAC1B;KACF;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAA","sourcesContent":["import { validateContent } from './validate';\n\nexport const pdsIconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>(); // eslint-disable-line @typescript-eslint/no-explicit-any\n\nexport const getSvgContent = (url: string, sanitize = false) => {\n  let req = requests.get(url);\n\n  if(!req) {\n    if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n      // we don't have a request\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            pdsIconContent.set(url, svgContent || '');\n          });\n        }\n        pdsIconContent.set(url, '');\n      });\n\n      requests.set(url, req);\n    } else {\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n  return req;\n}\n"]}

package/dist/collection/components/pds-icon/svg/blog-filled.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path d="M1.333.667v14.666c0 .368.299.667.667.667h12a.667.667 0 0 0 .667-.667V.667A.667.667 0 0 0 14 0H2a.667.667 0 0 0-.667.667Zm2.334 2.666H7c.184 0 .333.15.333.334V7c0 .184-.149.333-.333.333H3.667A.333.333 0 0 1 3.333 7V3.667c0-.184.15-.334.334-.334Zm8.666 9.334H3.667a.334.334 0 0 1-.334-.334v-.666c0-.184.15-.334.334-.334h8.666c.184 0 .334.15.334.334v.666c0 .184-.15.334-.334.334Zm0-2.667H3.667a.333.333 0 0 1-.334-.333V9c0-.184.15-.333.334-.333h8.666c.184 0 .334.149.334.333v.667c0 .184-.15.333-.334.333Zm0-2.667H9A.333.333 0 0 1 8.667 7v-.667C8.667 6.15 8.816 6 9 6h3.333c.184 0 .334.15.334.333V7c0 .184-.15.333-.334.333Zm0-2.666H9a.333.333 0 0 1-.333-.334v-.666c0-.184.149-.334.333-.334h3.333c.184 0 .334.15.334.334v.666c0 .184-.15.334-.334.334Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path d="M14 0H2a.667.667 0 0 0-.667.667v14.666c0 .368.299.667.667.667h12a.667.667 0 0 0 .667-.667V.667A.667.667 0 0 0 14 0Zm-2 13c0 .184-.15.333-.333.333H4.333A.333.333 0 0 1 4 13v-.667c0-.184.15-.333.333-.333h7.334c.184 0 .333.15.333.333V13Zm0-3.333c0 .184-.15.333-.333.333H4.333A.333.333 0 0 1 4 9.667V9c0-.184.15-.333.333-.333h7.334c.184 0 .333.149.333.333v.667Zm0-3.334c0 .184-.15.334-.333.334H4.333A.333.333 0 0 1 4 6.333V3c0-.184.15-.333.333-.333h7.334c.184 0 .333.149.333.333v3.333Z"/></svg>

package/dist/collection/components/pds-icon/test/pds-icon.e2e.js

@@ -1,10 +1,10 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('pds-icon', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<pds-icon role="img" style="height: 16px; width: 16px;"></pds-icon>');
-    const element = await page.find('pds-icon');
-    expect(element).toHaveClass('hydrated');
-  });
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<pds-icon role="img" style="height: 16px; width: 16px;"></pds-icon>');
+        const element = await page.find('pds-icon');
+        expect(element).toHaveClass('hydrated');
+    });
 });
 //# sourceMappingURL=pds-icon.e2e.js.map

package/dist/collection/components/pds-icon/test/pds-icon.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-icon.e2e.js","sourceRoot":"","sources":["../../../../src/components/pds-icon/test/pds-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,qEAAqE,CAAC,CAAC;IAC7F,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('pds-icon', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n\n    await page.setContent('<pds-icon role=\"img\" style=\"height: 16px; width: 16px;\"></pds-icon>');\n    const element = await page.find('pds-icon');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}
+{"version":3,"file":"pds-icon.e2e.js","sourceRoot":"","sources":["../../../../src/components/pds-icon/test/pds-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAEhC,MAAM,IAAI,CAAC,UAAU,CAAC,qEAAqE,CAAC,CAAC;QAC7F,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('pds-icon', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n\n    await page.setContent('<pds-icon role=\"img\" style=\"height: 16px; width: 16px;\"></pds-icon>');\n    const element = await page.find('pds-icon');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/pds-icon/test/pds-icon.spec.js

@@ -1,70 +1,108 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { PdsIcon } from "../pds-icon";
 describe('pds-icon', () => {
-  it('renders', async () => {
-    const { root } = await newSpecPage({
-      components: [PdsIcon],
-      html: '<pds-icon></pds-icon>',
-    });
-    expect(root).toEqualHtml(`
+    it('renders', async () => {
+        const { root } = await newSpecPage({
+            components: [PdsIcon],
+            html: '<pds-icon></pds-icon>',
+        });
+        expect(root).toEqualHtml(`
       <pds-icon role="img" size="regular" style="height: 16px; width: 16px;">
         <mock:shadow-root>
           <div class="icon-inner"></div>
         </mock:shadow-root>
       </pds-icon>
     `);
-  });
-  it('renders the correct size when passed', async () => {
-    const { root } = await newSpecPage({
-      components: [PdsIcon],
-      html: '<pds-icon size="small"></pds-icon>',
     });
-    expect(root).toEqualHtml(`
+    it('renders the correct size when passed', async () => {
+        const { root } = await newSpecPage({
+            components: [PdsIcon],
+            html: '<pds-icon size="small"></pds-icon>',
+        });
+        expect(root).toEqualHtml(`
       <pds-icon role="img" size="small" style="height: 12px; width: 12px;">
         <mock:shadow-root>
           <div class="icon-inner"></div>
         </mock:shadow-root>
       </pds-icon>
     `);
-  });
-  it('allows custom size', async () => {
-    const { root } = await newSpecPage({
-      components: [PdsIcon],
-      html: '<pds-icon size="32px"></pds-icon>',
     });
-    expect(root).toEqualHtml(`
+    it('allows custom size', async () => {
+        const { root } = await newSpecPage({
+            components: [PdsIcon],
+            html: '<pds-icon size="32px"></pds-icon>',
+        });
+        expect(root).toEqualHtml(`
       <pds-icon role="img" size="32px" style="height: 32px; width: 32px;">
         <mock:shadow-root>
           <div class="icon-inner"></div>
         </mock:shadow-root>
       </pds-icon>
     `);
-  });
-  it('renders icon when found', async () => {
-    const { root } = await newSpecPage({
-      components: [PdsIcon],
-      html: '<pds-icon name="archive"></pds-icon>',
     });
-    expect(root).toEqualHtml(`
+    it('renders icon when found', async () => {
+        const { root } = await newSpecPage({
+            components: [PdsIcon],
+            html: '<pds-icon name="archive"></pds-icon>',
+        });
+        expect(root).toEqualHtml(`
       <pds-icon aria-label="archive" name="archive" role="img" size="regular" style="height: 16px; width: 16px;">
         <mock:shadow-root>
           <div class="icon-inner"></div>
         </mock:shadow-root>
       </pds-icon>
     `);
-  });
-  it('add correct styles when color specified', async () => {
-    const { root } = await newSpecPage({
-      components: [PdsIcon],
-      html: '<pds-icon name="archive" color="red"></pds-icon>',
     });
-    expect(root).toEqualHtml(`
+    it('add correct styles when color specified', async () => {
+        const { root } = await newSpecPage({
+            components: [PdsIcon],
+            html: '<pds-icon name="archive" color="red"></pds-icon>',
+        });
+        expect(root).toEqualHtml(`
       <pds-icon aria-label="archive" class="pds-color pds-color-red" color="red" name="archive" role="img" size="regular" style="height: 16px; width: 16px; color: red">
         <mock:shadow-root>
           <div class="icon-inner"></div>
         </mock:shadow-root>
       </pds-icon>
     `);
-  });
+    });
+    it('renders custom aria-label', async () => {
+        const { root } = await newSpecPage({
+            components: [PdsIcon],
+            html: `<pds-icon name="star" aria-label="custom label"></pds-icon>`,
+        });
+        expect(root).toEqualHtml(`
+      <pds-icon name="star" role="img" aria-label="custom label" size="regular" style="height: 16px; width: 16px;">
+        <mock:shadow-root>
+          <div class="icon-inner"></div>
+        </mock:shadow-root>
+      </pds-icon>
+    `);
+    });
+    it('renders custom label after changing source', async () => {
+        const page = await newSpecPage({
+            components: [PdsIcon],
+            html: `<pds-icon name="youtube" aria-label="custom label"></pds-icon>`,
+        });
+        const icon = page.root;
+        expect(icon).toEqualHtml(`
+      <pds-icon name="youtube" role="img" aria-label="custom label" size="regular" style="height: 16px; width: 16px;">
+        <mock:shadow-root>
+          <div class="icon-inner"></div>
+        </mock:shadow-root>
+      </pds-icon>
+    `);
+        if (icon) {
+            icon.name = 'trash';
+        }
+        await page.waitForChanges();
+        expect(icon).toEqualHtml(`
+      <pds-icon name="trash" role="img" aria-label="custom label" size="regular" style="height: 16px; width: 16px;">
+        <mock:shadow-root>
+          <div class="icon-inner"></div>
+        </mock:shadow-root>
+      </pds-icon>
+    `);
+    });
 });
 //# sourceMappingURL=pds-icon.spec.js.map