@pine-ds/icons 2.0.1 → 2.0.2

package/dist/cjs/pds-icon.cjs.entry.js

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b35d5b0f.js');
+const utils = require('./utils-395a38b7.js');
+
+const validateContent = (svgContent) => {
+  const div = document.createElement('div');
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  // must only have 1 root element
+  const svgElm = div.firstElementChild;
+  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+    const svgClass = svgElm.getAttribute('class') || '';
+    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
+    // root element must be an svg
+    // lets double check we've got valid elements
+    // do not allow scripts
+    if (isValid(svgElm)) {
+      return div.innerHTML;
+    }
+  }
+  return '';
+};
+const isValid = (elm) => {
+  if (elm.nodeType === 1) {
+    if (elm.nodeName.toLowerCase() === 'script') {
+      return false;
+    }
+    for (let i = 0; i < elm.attributes.length; i++) {
+      const name = elm.attributes[i].name;
+      if (utils.isStr(name) && name.toLowerCase().indexOf('on') === 0) {
+        return false;
+      }
+    }
+    for (let i = 0; i < elm.childNodes.length; i++) {
+      if (!isValid(elm.childNodes[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const pdsIconContent = new Map();
+const requests = new Map(); // eslint-disable-line @typescript-eslint/no-explicit-any
+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 || '');
+          });
+        }
+        pdsIconContent.set(url, '');
+      });
+      requests.set(url, req);
+    }
+    else {
+      pdsIconContent.set(url, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+
+const pdsIconCss = ":host{contain:strict;display:inline-block;fill:currentColor;height:1em;width:1em}:host .pdsicon{fill:currentColor}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}";
+
+const PdsIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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];
+    }
+    else {
+      return this.size;
+    }
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = utils.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;
+    }
+  }
+  loadIcon() {
+    if (this.isVisible) {
+      const url = utils.getUrl(this);
+      if (url) {
+        if (pdsIconContent.has(url)) {
+          this.svgContent = pdsIconContent.get(url);
+        }
+        else {
+          getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+        }
+      }
+    }
+    const label = utils.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 (index.h(index.Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, role: "img", style: style, class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), this.svgContent ? (index.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index.h("div", { class: "icon-inner" }))));
+  }
+  /*****
+   * Private Methods
+   ****/
+  waitUntilVisible(el, rootMargin, cb) {
+    if (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);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      cb();
+    }
+  }
+  static get assetsDirs() { return ["svg"]; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIcon"]
+  }; }
+};
+const createColorClasses = (color) => {
+  return color
+    ? {
+      'pds-color': true,
+      [`pds-color-${color}`]: true,
+    }
+    : null;
+};
+PdsIcon.style = pdsIconCss;
+
+exports.pds_icon = PdsIcon;
+
+//# sourceMappingURL=pds-icon.cjs.entry.js.map

package/dist/cjs/pds-icon.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-icon.entry.cjs.js","mappings":"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","names":["isStr","inheritAttributes","getUrl","getName","h","Host"],"sources":["src/components/pds-icon/validate.ts","src/components/pds-icon/request.ts","src/components/pds-icon/pds-icon.scss?tag=pds-icon&encapsulation=shadow","src/components/pds-icon/pds-icon.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const name = elm.attributes[i].name;\n      if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as HTMLElement)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","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",":host {\n  contain: strict;\n  display: inline-block;\n  fill: currentColor;\n  height: 1em;\n  width: 1em;\n\n  .pdsicon {\n    fill: currentColor;\n  }\n}\n\n.pds-icon-fill-none {\n  fill: none;\n}\n\n.icon-inner,\n.pds-icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n","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}

package/dist/cjs/pds-icons.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b35d5b0f.js');
+
+/*
+ Stencil Client Patch Browser v4.4.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('pds-icons.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"name":[513],"size":[513],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"name":["loadIcon"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+
+//# sourceMappingURL=pds-icons.cjs.js.map

package/dist/cjs/pds-icons.cjs.js.map

@@ -0,0 +1 @@
+{"file":"pds-icons.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAyB3B,IAAI,MAAM,UAAU,GAAG,2MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;AChCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.4.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/utils-395a38b7.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const index = require('./index-b35d5b0f.js');
+
+let CACHED_MAP;
+const addIcons = (icons) => {
+  const map = getIconMap();
+  Object.keys(icons).forEach(name => map.set(name, icons[name]));
+};
+const getIconMap = () => {
+  if (typeof window === 'undefined') {
+    return new Map();
+  }
+  else {
+    if (!CACHED_MAP) {
+      const win = window; // eslint-disable-line @typescript-eslint/no-explicit-any
+      win.PdsIcons = win.PdsIcons || {};
+      CACHED_MAP = win.PdsIcons.map = win.PdsIcons.map || new Map();
+    }
+    return CACHED_MAP;
+  }
+};
+const getName = (iconName) => {
+  if (isStr(iconName)) {
+    iconName = toLower(iconName);
+  }
+  if (!isStr(iconName) || iconName.trim() === '') {
+    return null;
+  }
+  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+  if (invalidChars != '') {
+    return null;
+  }
+  return iconName;
+};
+const getNamedUrl = (iconName) => {
+  const url = getIconMap().get(iconName);
+  if (url) {
+    return url;
+  }
+  return index.getAssetPath(`svg/${iconName}.svg`);
+};
+const getUrl = (icon) => {
+  const url = getName(icon.name);
+  if (url) {
+    return getNamedUrl(url);
+  }
+};
+const isStr = (val) => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any
+const toLower = (val) => val.toLowerCase();
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+  attributes.forEach(attr => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+
+exports.addIcons = addIcons;
+exports.getName = getName;
+exports.getUrl = getUrl;
+exports.inheritAttributes = inheritAttributes;
+exports.isStr = isStr;
+
+//# sourceMappingURL=utils-395a38b7.js.map

package/dist/cjs/utils-395a38b7.js.map

@@ -0,0 +1 @@
+{"file":"utils-395a38b7.js","mappings":";;;;AAGA,IAAI,UAA+B,CAAC;MAEvB,QAAQ,GAAG,CAAC,KAAkC;EACzD,MAAM,GAAG,GAAG,UAAU,EAAE,CAAC;EACzB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AACjE,EAAC;AAEM,MAAM,UAAU,GAAG;EACxB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;IACjC,OAAO,IAAI,GAAG,EAAE,CAAC;GAClB;OAAO;IACN,IAAI,CAAC,UAAU,EAAE;MACf,MAAM,GAAG,GAAG,MAAa,CAAC;MAC1B,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,IAAI,EAAE,CAAC;MAClC,UAAU,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC;KAC/D;IAED,OAAO,UAAU,CAAC;GACnB;AACH,CAAC,CAAA;MAEY,OAAO,GAAG,CAAC,QAA4B;EAClD,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE;IACnB,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;GAC9B;EAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;IAC9C,OAAO,IAAI,CAAC;GACb;EAED,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAC,EAAE,CAAC,CAAC;EACzD,IAAI,YAAY,IAAI,EAAE,EAAE;IAAE,OAAO,IAAI,CAAC;GAAE;EAExC,OAAO,QAAQ,CAAC;AAClB,EAAC;AAED,MAAM,WAAW,GAAG,CAAC,QAAgB;EACnC,MAAM,GAAG,GAAG,UAAU,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;EACvC,IAAI,GAAG,EAAE;IACP,OAAO,GAAG,CAAC;GACZ;EAED,OAAOA,kBAAY,CAAC,OAAO,QAAQ,MAAM,CAAC,CAAC;AAC7C,CAAC,CAAC;MAcW,MAAM,GAAG,CAAC,IAAa;EAClC,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/B,IAAI,GAAG,EAAE;IACP,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC;GACzB;AACH,EAAE;MAIW,KAAK,GAAG,CAAC,GAAQ,KAAoB,OAAO,GAAG,KAAK,SAAS;AACnE,MAAM,OAAO,GAAG,CAAC,GAAW,KAAK,GAAG,CAAC,WAAW,EAAE,CAAC;AAE1D;;;;;;;;;;MAUc,iBAAiB,GAAG,CAAC,EAAe,EAAE,aAAuB,EAAE;EAC3E,MAAM,eAAe,GAAyB,EAAE,CAAC;EAEjD,UAAU,CAAC,OAAO,CAAC,IAAI;IACrB,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;MACzB,MAAM,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MACpC,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,eAAe,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;OAC/C;MACD,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;KAC1B;GACF,CAAC,CAAC;EAEH,OAAO,eAAe,CAAC;AACzB;;;;;;;;","names":["getAssetPath"],"sources":["src/components/pds-icon/utils.ts"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { PdsIcon } from './pds-icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const addIcons = (icons: { [name: string]: string; }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach(name => map.set(name, icons[name]));\n}\n\nexport const getIconMap = (): Map<string, string> => {\n  if (typeof window === 'undefined') {\n    return new Map();\n  }  else {\n    if (!CACHED_MAP) {\n      const win = window as any; // eslint-disable-line @typescript-eslint/no-explicit-any\n      win.PdsIcons = win.PdsIcons || {};\n      CACHED_MAP = win.PdsIcons.map = win.PdsIcons.map || new Map();\n    }\n\n    return CACHED_MAP;\n  }\n}\n\nexport const getName = (iconName: string | undefined) => {\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  const invalidChars = iconName.replace(/[a-z]|-|\\d/gi,'');\n  if (invalidChars != '') { return null; }\n\n  return iconName;\n}\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n\n  return getAssetPath(`svg/${iconName}.svg`);\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n\n  return null;\n}\n\nexport const getUrl = (icon: PdsIcon) => {\n  const url = getName(icon.name);\n  if (url) {\n    return getNamedUrl(url);\n  }\n};\n\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any\nexport const toLower = (val: string) => val.toLowerCase();\n\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `ion-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\n export const inheritAttributes = (el: HTMLElement, attributes: string[] = []) => {\n  const attributeObject: { [k: string]: any } = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  attributes.forEach(attr => {\n    if (el.hasAttribute(attr)) {\n      const value = el.getAttribute(attr);\n      if (value !== null) {\n        attributeObject[attr] = el.getAttribute(attr);\n      }\n      el.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n}\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/pds-icon/pds-icon.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.4.0",
+    "typescriptVersion": "5.2.2"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,22 @@
+:host {
+  contain: strict;
+  display: inline-block;
+  fill: currentColor;
+  height: 1em;
+  width: 1em;
+}
+:host .pdsicon {
+  fill: currentColor;
+}
+
+.pds-icon-fill-none {
+  fill: none;
+}
+
+.icon-inner,
+.pds-icon,
+svg {
+  display: block;
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,186 @@
+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];
+    }
+    else {
+      return this.size;
+    }
+  }
+  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;
+    }
+  }
+  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);
+    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" }))));
+  }
+  /*****
+   * 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);
+    }
+    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
+      },
+      "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;
+};
+//# sourceMappingURL=pds-icon.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,29 @@
+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 || '');
+          });
+        }
+        pdsIconContent.set(url, '');
+      });
+      requests.set(url, req);
+    }
+    else {
+      pdsIconContent.set(url, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+//# sourceMappingURL=request.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +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');
+  });
+});
+//# sourceMappingURL=pds-icon.e2e.js.map

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

@@ -0,0 +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"]}