@pine-ds/icons 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/index.cjs.js

@@ -0,0 +1 @@
+/*empty cjs*/

package/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/components/index.js

@@ -0,0 +1,4 @@
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { a as addIcons } from './utils.js';
+
+//# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ju-skinner/components",
+  "description": "Pine Icons custom element",
+  "main": "./index.cjs.js",
+  "module": ".index.js",
+  "types": "./index.d.ts",
+  "private": true
+}

package/components/pds-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsIcon extends Components.PdsIcon, HTMLElement {}
+export const PdsIcon: {
+  prototype: PdsIcon;
+  new (): PdsIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-icon.js

@@ -0,0 +1,213 @@
+import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
+import { i as isStr, b as inheritAttributes, g as getUrl, c as getName } from './utils.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 (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$1 = /*@__PURE__*/ proxyCustomElement(class PdsIcon extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 assetsDirs() { return ["svg"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "name": ["loadIcon"]
+  }; }
+  static get style() { return pdsIconCss; }
+}, [1, "pds-icon", {
+    "color": [1],
+    "name": [513],
+    "size": [513],
+    "ariaLabel": [32],
+    "isVisible": [32],
+    "svgContent": [32]
+  }, undefined, {
+    "name": ["loadIcon"]
+  }]);
+const createColorClasses = (color) => {
+  return color
+    ? {
+      'pds-color': true,
+      [`pds-color-${color}`]: true,
+    }
+    : null;
+};
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pds-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PdsIcon$1);
+      }
+      break;
+  } });
+}
+
+const PdsIcon = PdsIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsIcon, defineCustomElement };
+
+//# sourceMappingURL=pds-icon.js.map

package/components/pds-icon.js.map

@@ -0,0 +1 @@
+{"file":"pds-icon.js","mappings":"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","names":["PdsIcon"],"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/components/utils.js

@@ -0,0 +1,75 @@
+import { getAssetPath } from '@stencil/core/internal/client';
+
+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 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;
+};
+
+export { addIcons as a, inheritAttributes as b, getName as c, getUrl as g, isStr as i };
+
+//# sourceMappingURL=utils.js.map

package/components/utils.js.map

@@ -0,0 +1 @@
+{"file":"utils.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,OAAO,YAAY,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":[],"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}