@pine-ds/icons 9.6.0 → 9.6.1

package/dist/pds-icons/p-5a3a5e3c.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","constructor","hostRef","this","didLoadIcon","iconName","inheritedAttributes","isVisible","size","hasAriaHidden","el","hasAttribute","iconSize","sizes","small","regular","medium","large","componentDidLoad","setCSSVariables","loadIcon","componentWillLoad","inheritAttributes","style","setProperty","color","connectedCallback","waitUntilVisible","disconnectedCallback","io","disconnect","undefined","updateStyles","getUrl","has","getName","icon","ariaLabel","replace","render","flipRtl","shouldIconAutoFlip","shouldRtlFlipIcon","shouldFlip","h","Host","Object","assign","key","alt","role","class","createColorClasses","isRTL","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  --dimension-icon-height: 16px;\n  --dimension-icon-width: 16px;\n  --color-icon-fill: currentColor;\n\n  contain: strict;\n  display: inline-block;\n  fill: var(--color-icon-fill);\n  flex-shrink: 0;\n  height: var(--dimension-icon-height);\n  width: var(--dimension-icon-width);\n\n  .pdsicon {\n    fill: var(--color-icon-fill);\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\n/* :host-context is supported in chromium; :dir is supported in safari & firefox */\n:host(.flip-rtl):host-context([dir='rtl']) .icon-inner {\n  transform: scaleX(-1);\n}\n\n:host(.flip-rtl:dir(rtl)) .icon-inner {\n  transform: scaleX(-1);\n}\n\n/**\n  * This is needed for WebKit otherwise the fallback\n  * will always cause the icon to be flipped if the document\n  * loads in RTL.\n  */\n:host(.flip-rtl:dir(ltr)) .icon-inner {\n  transform: scaleX(1);\n}\n\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, pdsIconContent } from './request';\nimport { getName, getUrl, inheritAttributes, isRTL, shouldRtlFlipIcon } 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 didLoadIcon = false;\n  private iconName: string | null = null;\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   * Determines if the icon should be flipped when the `dir` is right-to-left (`\"rtl\"`).\n   * This is automatically enabled for icons that are in the `ICONS_TO_FLIP` list and\n   * when the `dir` is `\"rtl\"`. If `flipRtl` is set to `false`, the icon will not be flipped\n   * even if the `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * This is 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 sets 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\n  componentDidLoad() {\n    this.setCSSVariables();\n\n    if (!this.didLoadIcon) {\n      this.loadIcon();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n    this.setCSSVariables();\n  }\n\n  setCSSVariables() {\n    this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());\n    this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());\n    this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');\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('size')\n  @Watch('color')\n  updateStyles() {\n    this.setCSSVariables();\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        this.didLoadIcon = true;\n      }\n    }\n\n    this.iconName = getName(this.name, this.icon);\n\n    if (this.iconName) {\n      this.ariaLabel = this.iconName.replace(/\\-/g, ' ');\n    }\n  }\n\n  render() {\n    const { ariaLabel, flipRtl, iconName,inheritedAttributes } = this;\n    const shouldIconAutoFlip = iconName\n      ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false\n      : false;\n    const shouldFlip = flipRtl || shouldIconAutoFlip;\n\n    return (\n\n      <Host\n        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null }\n        alt=\"\"\n        role=\"img\"\n        class={{\n          ...createColorClasses(this.color),\n          'flip-rtl': shouldFlip,\n          'icon-rtl': shouldFlip && isRTL(this.el)\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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","ignoreList":[]}