@pine-ds/icons 6.0.0 → 7.0.1

package/dist/pds-icons/p-91ce3f72.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["validateContent","svgContent","div","document","createElement","innerHTML","i","childNodes","length","nodeName","toLowerCase","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","trim","isValid","elm","nodeType","attributes","name","isStr","indexOf","isSvgDataUrl","url","startsWith","isEncodedDataUrl","pdsIconContent","Map","requests","parser","getSvgContent","sanitize","req","get","fetch","DOMParser","doc","parseFromString","svg","querySelector","set","outerHTML","Promise","resolve","then","rsp","ok","text","pdsIconCss","PdsIcon","this","inheritedAttributes","hasAriaHidden","el","hasAttribute","iconSize","sizes","small","regular","medium","large","size","componentWillLoad","inheritAttributes","connectedCallback","waitUntilVisible","isVisible","loadIcon","disconnectedCallback","io","disconnect","undefined","getUrl","has","label","getName","icon","ariaLabel","replace","render","style","height","width","color","h","Host","Object","assign","role","class","createColorClasses","rootMargin","cb","window","IntersectionObserver","data","isIntersecting","observe"],"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-pds-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\nexport const isSvgDataUrl = (url: string) => url.startsWith('data:image/svg+xml');\nexport const isEncodedDataUrl = (url: string) => url.indexOf(';utf8,') !== -1;\n","import { isEncodedDataUrl, isSvgDataUrl, 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\nlet parser: DOMParser;\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      if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n        if (!parser) {\n          parser = new DOMParser();\n        }\n\n        const doc = parser.parseFromString(url, 'text/html');\n        const svg = doc.querySelector('svg');\n\n        if (svg) {\n          pdsIconContent.set(url, svg.outerHTML);\n        }\n\n        return Promise.resolve();\n      } else {\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      }\n    } else {\n      pdsIconContent.set(url, '');\n      return Promise.resolve();\n    }\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   * 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  /**\n   *\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\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('src')\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"],"mappings":"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"}

package/dist/pds-icons/svg/menu-2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M15.333.667H.667v14.666h14.666V.667ZM2 14V2h12v12H2ZM12.667 4H3.333v1.333h9.334V4Zm0 3.333H3.333v1.334h9.334V7.333Zm-9.334 3.334h9.334V12H3.333v-1.333Z"/></svg>

package/dist/pds-icons/svg/package.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M5.333 0a.667.667 0 0 0 0 1.333h5.334a.667.667 0 1 0 0-1.333H5.333ZM2.667 3.333c0-.368.298-.666.666-.666h9.334a.667.667 0 1 1 0 1.333H3.333a.667.667 0 0 1-.666-.667ZM1.333 6c0-.368.299-.667.667-.667h12c.368 0 .667.299.667.667v9.333A.667.667 0 0 1 14 16H2a.667.667 0 0 1-.667-.667V6Zm1.334.667v8h10.666v-8H2.667Z"/></svg>

package/dist/svg/menu-2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M15.333.667H.667v14.666h14.666V.667ZM2 14V2h12v12H2ZM12.667 4H3.333v1.333h9.334V4Zm0 3.333H3.333v1.334h9.334V7.333Zm-9.334 3.334h9.334V12H3.333v-1.333Z"/></svg>

package/dist/svg/package.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="pdsicon"><path fill-rule="evenodd" d="M5.333 0a.667.667 0 0 0 0 1.333h5.334a.667.667 0 1 0 0-1.333H5.333ZM2.667 3.333c0-.368.298-.666.666-.666h9.334a.667.667 0 1 1 0 1.333H3.333a.667.667 0 0 1-.666-.667ZM1.333 6c0-.368.299-.667.667-.667h12c.368 0 .667.299.667.667v9.333A.667.667 0 0 1 14 16H2a.667.667 0 0 1-.667-.667V6Zm1.334.667v8h10.666v-8H2.667Z"/></svg>