@descope/web-components-ui 1.109.0 → 1.111.0

package/dist/umd/descope-icon.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202,6724],{6301:(t,e,s)=>{s.r(e),s.d(e,{ImageClass:()=>u,componentName:()=>c});var i=s(88961),n=s(72270),r=s(63200),l=s(25964),a=s(25414);const o=t=>{const e=a.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},c=(0,l.xE)("image"),h=["src","src-dark"];class d extends((0,n.qu)({componentName:c,baseSelector:"slot"})){static get observedAttributes(){return h}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get src(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${u.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}renderImage(){this.toggleVisibility(this.src),(async(t,e)=>{try{let s;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));s=o(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();s=o(i)}else s=((t,e)=>{const s=document.createElement("img");return s.setAttribute("src",t),s.setAttribute("alt",e),s})(t,e);return s.style.setProperty("max-width","100%"),s.style.setProperty("max-height","100%"),s}catch{return null}})(this.src,this.altText).then((t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))}))}shouldRender(t){const e=this.getAttribute(t);return this.src===e}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&this.shouldRender(t)&&this.renderImage()}}const u=(0,r.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(d);customElements.define(c,u)},56737:(t,e,s)=>{s.r(e),s.d(e,{IconClass:()=>i.S,componentName:()=>i.T}),s(6301);var i=s(98538);customElements.define(i.T,i.S)},98538:(t,e,s)=>{s.d(e,{S:()=>a,T:()=>l});var i=s(88961),n=s(25964),r=s(63200);const l=(0,n.xE)("icon"),a=(0,r.Zz)((0,i.RF)({mappings:{fill:{}}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n      }\n      ",excludeAttrsSync:["tabindex","class"],componentName:l}))}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202,6724],{8512:(t,e,s)=>{s.d(e,{T:()=>o,q:()=>d});var i=s(88961),n=s(72270),r=s(63200),l=s(25964),a=s(18782);const o=(0,l.xE)("image"),c=["src","src-dark"];class h extends((0,n.qu)({componentName:o,baseSelector:"slot"})){static get observedAttributes(){return c}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get src(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${d.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}renderImage(){this.toggleVisibility(this.src),(0,a.m)(this.src,this.altText).then((t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))}))}shouldRender(t){const e=this.getAttribute(t);return this.src===e}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&this.shouldRender(t)&&this.renderImage()}}const d=(0,r.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(h)},18782:(t,e,s)=>{s.d(e,{m:()=>r});var i=s(25414);const n=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},r=async(t,e)=>{try{let s;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));s=n(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();s=n(i)}else s=((t,e)=>{const s=document.createElement("img");return s.setAttribute("src",t),s.setAttribute("alt",e),s})(t,e);return s.style.setProperty("max-width","100%"),s.style.setProperty("max-height","100%"),s}catch{return null}}},53455:(t,e,s)=>{s.r(e),s.d(e,{ImageClass:()=>i.q,componentName:()=>i.T});var i=s(8512);customElements.define(i.T,i.q)},56737:(t,e,s)=>{s.r(e),s.d(e,{IconClass:()=>i.S,componentName:()=>i.T}),s(53455);var i=s(98538);customElements.define(i.T,i.S)},98538:(t,e,s)=>{s.d(e,{S:()=>o,T:()=>a});var i=s(88961),n=s(25964),r=s(8512),l=s(63200);const a=(0,n.xE)("icon"),o=(0,l.Zz)((0,i.RF)({mappings:{fill:[{},{property:r.q.cssVarList.fill}]}}),i.VO,i.tQ)((0,i.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n      :host {\n        display: inline-flex;\n      }\n      ",excludeAttrsSync:["tabindex","class"],componentName:a}))}}]);
 //# sourceMappingURL=descope-icon.js.map

package/dist/umd/descope-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-icon.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-image/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/ImageClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js"],"sourcesContent":["import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n  const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n  return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src, altText) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\n  ele.setAttribute('alt', altText);\n  return ele;\n};\n\nconst createSvgEle = (text) => {\n  // we want to purify the SVG to avoid XSS attacks\n  const clean = DOMPurify.sanitize(text, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // allow image to render\n    ADD_TAGS: ['image'],\n    // forbid interactiviy via `use` tags (which are sanitized by default)\n    FORBID_TAGS: ['defs']\n  });\n\n  const parser = new DOMParser();\n  const ele = parser\n    .parseFromString(clean, 'image/svg+xml')\n    .querySelector('svg');\n  return ele;\n};\n\nexport const createImage = async (src, altText) => {\n  try {\n    let ele;\n    if (isBase64Svg(src)) {\n      // handle base64 source\n      const svgXml = atob(src.slice(base64Prefix.length));\n      ele = createSvgEle(svgXml);\n    } else if (getFileExtension(src) === 'svg') {\n      // handle urls\n      const fetchedSrc = await fetch(src);\n      const text = await fetchedSrc.text();\n      ele = createSvgEle(text);\n    } else {\n      // handle binary\n      ele = createImgEle(src, altText);\n    }\n\n    ele.style.setProperty('max-width', '100%');\n    ele.style.setProperty('max-height', '100%');\n\n    return ele;\n  } catch {\n    return null;\n  }\n};\n","/* eslint-disable no-use-before-define */\nimport {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createImage } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('image');\n\nconst srcAttrs = ['src', 'src-dark'];\n\nclass RawImage extends createBaseClass({\n  componentName,\n  baseSelector: 'slot',\n}) {\n  static get observedAttributes() {\n    return srcAttrs;\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n    injectStyle(\n      `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      `,\n      this,\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  onThemeChange() {\n    this.renderImage();\n  }\n\n  toggleVisibility(isVisible) {\n    if (isVisible) {\n      this.classList.remove('hidden');\n    } else {\n      this.classList.add('hidden');\n    }\n  }\n\n  get altText() {\n    return this.getAttribute('alt') || '';\n  }\n\n  get legacySrc() {\n    return this.getAttribute('src');\n  }\n\n  get themeSrc() {\n    return this.getAttribute(`src-${this.currentThemeName}`);\n  }\n\n  get src() {\n    return this.themeSrc || this.legacySrc;\n  }\n\n  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n  // with the value from the `st-fill` attribute\n  // eslint-disable-next-line class-methods-use-this\n  updateFillColor(node) {\n    // set fill to root node and all its relevant selectors\n    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n    elementsToReplace.forEach((ele) => {\n      ele.setAttribute(\n        'fill',\n        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`,\n      );\n    });\n  }\n\n  renderImage() {\n    this.toggleVisibility(this.src);\n\n    createImage(this.src, this.altText).then((res) => {\n      this.innerHTML = '';\n      if (res) {\n        this.updateFillColor(res);\n        this.appendChild(res);\n      }\n    });\n  }\n\n  // render only when src attribute matches current theme\n  shouldRender(src) {\n    const srcVal = this.getAttribute(src);\n    return this.src === srcVal;\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (this.shouldRender(attrName)) {\n      this.renderImage();\n    }\n  }\n}\n\nexport const ImageClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawImage);\n","import { componentName, ImageClass } from './ImageClass';\n\ncustomElements.define(componentName, ImageClass);\n\nexport { ImageClass, componentName };\n","import '@descope-ui/descope-image';\n\nimport { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","import {\n  componentNameValidationMixin,\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('icon');\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'descope-image',\n    style: () => `\n      :host {\n        display: inline-flex;\n      }\n      `,\n    excludeAttrsSync: ['tabindex', 'class'],\n    componentName,\n  }),\n);\n"],"names":["createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","ADD_TAGS","FORBID_TAGS","DOMParser","parseFromString","querySelector","componentName","srcAttrs","RawImage","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","init","toggleVisibility","src","onThemeChange","renderImage","isVisible","classList","remove","add","altText","getAttribute","legacySrc","themeSrc","currentThemeName","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","ImageClass","cssVarList","fill","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","style","setProperty","createImage","then","res","appendChild","shouldRender","srcVal","attributeChangedCallback","attrName","oldValue","newValue","mappings","height","selector","width","customElements","define","IconClass","slots","wrappedEleName","excludeAttrsSync"],"sourceRoot":""}
+{"version":3,"file":"descope-icon.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-image/src/component/ImageClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/IconClass.js"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createImage } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('image');\n\nconst srcAttrs = ['src', 'src-dark'];\n\nclass RawImage extends createBaseClass({\n  componentName,\n  baseSelector: 'slot',\n}) {\n  static get observedAttributes() {\n    return srcAttrs;\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n    injectStyle(\n      `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      `,\n      this,\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  onThemeChange() {\n    this.renderImage();\n  }\n\n  toggleVisibility(isVisible) {\n    if (isVisible) {\n      this.classList.remove('hidden');\n    } else {\n      this.classList.add('hidden');\n    }\n  }\n\n  get altText() {\n    return this.getAttribute('alt') || '';\n  }\n\n  get legacySrc() {\n    return this.getAttribute('src');\n  }\n\n  get themeSrc() {\n    return this.getAttribute(`src-${this.currentThemeName}`);\n  }\n\n  get src() {\n    return this.themeSrc || this.legacySrc;\n  }\n\n  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n  // with the value from the `st-fill` attribute\n  // eslint-disable-next-line class-methods-use-this\n  updateFillColor(node) {\n    // set fill to root node and all its relevant selectors\n    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n    elementsToReplace.forEach((ele) => {\n      ele.setAttribute(\n        'fill',\n        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`,\n      );\n    });\n  }\n\n  renderImage() {\n    this.toggleVisibility(this.src);\n\n    createImage(this.src, this.altText).then((res) => {\n      this.innerHTML = '';\n      if (res) {\n        this.updateFillColor(res);\n        this.appendChild(res);\n      }\n    });\n  }\n\n  // render only when src attribute matches current theme\n  shouldRender(src) {\n    const srcVal = this.getAttribute(src);\n    return this.src === srcVal;\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (this.shouldRender(attrName)) {\n      this.renderImage();\n    }\n  }\n}\n\nexport const ImageClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawImage);\n","import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n  const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n  return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src, altText) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\n  ele.setAttribute('alt', altText);\n  return ele;\n};\n\nconst createSvgEle = (text) => {\n  // we want to purify the SVG to avoid XSS attacks\n  const clean = DOMPurify.sanitize(text, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // allow image to render\n    ADD_TAGS: ['image'],\n    // forbid interactiviy via `use` tags (which are sanitized by default)\n    FORBID_TAGS: ['defs']\n  });\n\n  const parser = new DOMParser();\n  const ele = parser\n    .parseFromString(clean, 'image/svg+xml')\n    .querySelector('svg');\n  return ele;\n};\n\nexport const createImage = async (src, altText) => {\n  try {\n    let ele;\n    if (isBase64Svg(src)) {\n      // handle base64 source\n      const svgXml = atob(src.slice(base64Prefix.length));\n      ele = createSvgEle(svgXml);\n    } else if (getFileExtension(src) === 'svg') {\n      // handle urls\n      const fetchedSrc = await fetch(src);\n      const text = await fetchedSrc.text();\n      ele = createSvgEle(text);\n    } else {\n      // handle binary\n      ele = createImgEle(src, altText);\n    }\n\n    ele.style.setProperty('max-width', '100%');\n    ele.style.setProperty('max-height', '100%');\n\n    return ele;\n  } catch {\n    return null;\n  }\n};\n","import { componentName, ImageClass } from './ImageClass';\n\ncustomElements.define(componentName, ImageClass);\n\nexport { ImageClass, componentName };\n","import '@descope-ui/descope-image';\n\nimport { componentName, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","import {\n  componentNameValidationMixin,\n  createProxy,\n  createStyleMixin,\n  draggableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { ImageClass } from '@descope-ui/descope-image/class';\nimport { compose } from '@descope-ui/common/utils';\n\nexport const componentName = getComponentName('icon');\n\nexport const IconClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: [{}, { property: ImageClass.cssVarList.fill }],\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(\n  createProxy({\n    slots: [],\n    wrappedEleName: 'descope-image',\n    style: () => `\n      :host {\n        display: inline-flex;\n      }\n      `,\n    excludeAttrsSync: ['tabindex', 'class'],\n    componentName,\n  }),\n);\n"],"names":["componentName","srcAttrs","RawImage","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","init","toggleVisibility","src","onThemeChange","renderImage","isVisible","classList","remove","add","altText","getAttribute","legacySrc","themeSrc","currentThemeName","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","ImageClass","cssVarList","fill","then","res","appendChild","shouldRender","srcVal","attributeChangedCallback","attrName","oldValue","newValue","mappings","height","selector","width","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","ADD_TAGS","FORBID_TAGS","DOMParser","parseFromString","querySelector","createImage","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","style","setProperty","customElements","define","IconClass","property","slots","wrappedEleName","excludeAttrsSync"],"sourceRoot":""}

package/dist/umd/descope-image.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202],{6301:(t,e,s)=>{s.r(e),s.d(e,{ImageClass:()=>u,componentName:()=>o});var i=s(88961),r=s(72270),n=s(63200),l=s(25964),a=s(25414);const h=t=>{const e=a.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},o=(0,l.xE)("image"),c=["src","src-dark"];class d extends((0,r.qu)({componentName:o,baseSelector:"slot"})){static get observedAttributes(){return c}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get src(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${u.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}renderImage(){this.toggleVisibility(this.src),(async(t,e)=>{try{let s;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));s=h(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();s=h(i)}else s=((t,e)=>{const s=document.createElement("img");return s.setAttribute("src",t),s.setAttribute("alt",e),s})(t,e);return s.style.setProperty("max-width","100%"),s.style.setProperty("max-height","100%"),s}catch{return null}})(this.src,this.altText).then((t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))}))}shouldRender(t){const e=this.getAttribute(t);return this.src===e}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&this.shouldRender(t)&&this.renderImage()}}const u=(0,n.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(d);customElements.define(o,u)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202],{8512:(t,e,s)=>{s.d(e,{T:()=>h,q:()=>d});var i=s(88961),r=s(72270),n=s(63200),l=s(25964),a=s(18782);const h=(0,l.xE)("image"),o=["src","src-dark"];class c extends((0,r.qu)({componentName:h,baseSelector:"slot"})){static get observedAttributes(){return o}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,l.fz)("\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}onThemeChange(){this.renderImage()}toggleVisibility(t){t?this.classList.remove("hidden"):this.classList.add("hidden")}get altText(){return this.getAttribute("alt")||""}get legacySrc(){return this.getAttribute("src")}get themeSrc(){return this.getAttribute(`src-${this.currentThemeName}`)}get src(){return this.themeSrc||this.legacySrc}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${d.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}renderImage(){this.toggleVisibility(this.src),(0,a.m)(this.src,this.altText).then((t=>{this.innerHTML="",t&&(this.updateFillColor(t),this.appendChild(t))}))}shouldRender(t){const e=this.getAttribute(t);return this.src===e}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&this.shouldRender(t)&&this.renderImage()}}const d=(0,n.Zz)((0,i.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),i.VO,i.tQ)(c)},18782:(t,e,s)=>{s.d(e,{m:()=>n});var i=s(25414);const r=t=>{const e=i.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0},ADD_TAGS:["image"],FORBID_TAGS:["defs"]});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},n=async(t,e)=>{try{let s;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));s=r(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),i=await e.text();s=r(i)}else s=((t,e)=>{const s=document.createElement("img");return s.setAttribute("src",t),s.setAttribute("alt",e),s})(t,e);return s.style.setProperty("max-width","100%"),s.style.setProperty("max-height","100%"),s}catch{return null}}},53455:(t,e,s)=>{s.r(e),s.d(e,{ImageClass:()=>i.q,componentName:()=>i.T});var i=s(8512);customElements.define(i.T,i.q)}}]);
 //# sourceMappingURL=descope-image.js.map

package/dist/umd/descope-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-image.js","mappings":"wPAEA,MAgBMA,EAAgBC,IAEpB,MAAMC,EAAQ,IAAUC,SAASF,EAAM,CACrCG,aAAc,CAAEC,KAAK,EAAMC,YAAY,GAEvCC,SAAU,CAAC,SAEXC,YAAa,CAAC,UAOhB,OAJe,IAAIC,WAEhBC,gBAAgBR,EAAO,iBACvBS,cAAc,MACP,ECpBCC,GAAgB,QAAiB,SAExCC,EAAW,CAAC,MAAO,YAEzB,MAAMC,WAAiB,QAAgB,CACrCF,gBACAG,aAAc,UAEd,6BAAWC,GACT,OAAOH,CACT,CAEA,WAAAI,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,2BAIhD,QACE,6UAoBAH,KAEJ,CAEA,IAAAI,GACEL,MAAMK,SACNJ,KAAKK,iBAAiBL,KAAKM,IAC7B,CAEA,aAAAC,GACEP,KAAKQ,aACP,CAEA,gBAAAH,CAAiBI,GACXA,EACFT,KAAKU,UAAUC,OAAO,UAEtBX,KAAKU,UAAUE,IAAI,SAEvB,CAEA,WAAIC,GACF,OAAOb,KAAKc,aAAa,QAAU,EACrC,CAEA,aAAIC,GACF,OAAOf,KAAKc,aAAa,MAC3B,CAEA,YAAIE,GACF,OAAOhB,KAAKc,aAAa,OAAOd,KAAKiB,mBACvC,CAEA,OAAIX,GACF,OAAON,KAAKgB,UAAYhB,KAAKe,SAC/B,CAKA,eAAAG,CAAgBC,GAEY,CAACA,KAASA,EAAKC,iBAAiB,YAExCC,SAASC,IACzBA,EAAIC,aACF,OACA,OAAOC,EAAWC,WAAWC,SAASJ,EAAIR,aAAa,SAAW,QACnE,GAEL,CAEA,WAAAN,GACER,KAAKK,iBAAiBL,KAAKM,KDtEJqB,OAAOrB,EAAKO,KACrC,IACE,IAAIS,EACJ,GA7BgB,CAAChB,GAAQA,EAAIsB,WAFZ,8BA+BbC,CAAYvB,GAAM,CAEpB,MAAMwB,EAASC,KAAKzB,EAAI0B,MAAMC,KAC9BX,EAAMzC,EAAaiD,EACrB,MAAO,GAA8B,QAxChB,CAACI,IACxB,MAAMC,EAAQD,EAAKC,MAAM,8BACzB,OAAOA,EAAQA,EAAM,GAAK,IAAI,EAsCjBC,CAAiB9B,GAAgB,CAE1C,MAAM+B,QAAmBC,MAAMhC,GACzBxB,QAAauD,EAAWvD,OAC9BwC,EAAMzC,EAAaC,EACrB,MAEEwC,EAtCe,EAAChB,EAAKO,KACzB,MAAMS,EAAMiB,SAASC,cAAc,OAGnC,OAFAlB,EAAIC,aAAa,MAAOjB,GACxBgB,EAAIC,aAAa,MAAOV,GACjBS,CAAG,EAkCAmB,CAAanC,EAAKO,GAM1B,OAHAS,EAAIoB,MAAMC,YAAY,YAAa,QACnCrB,EAAIoB,MAAMC,YAAY,aAAc,QAE7BrB,CACT,CAAE,MACA,OAAO,IACT,GCiDEsB,CAAY5C,KAAKM,IAAKN,KAAKa,SAASgC,MAAMC,IACxC9C,KAAKG,UAAY,GACb2C,IACF9C,KAAKkB,gBAAgB4B,GACrB9C,KAAK+C,YAAYD,GACnB,GAEJ,CAGA,YAAAE,CAAa1C,GACX,MAAM2C,EAASjD,KAAKc,aAAaR,GACjC,OAAON,KAAKM,MAAQ2C,CACtB,CAEA,wBAAAC,CAAyBC,EAAUC,EAAUC,GAC3CtD,MAAMmD,2BAA2BC,EAAUC,EAAUC,GAEjDD,IAAaC,GAEbrD,KAAKgD,aAAaG,IACpBnD,KAAKQ,aAET,EAGK,MAAMgB,GAAa,SACxB,QAAiB,CACf8B,SAAU,CACR5B,KAAM,CAAC,EACP6B,OAAQ,CAAEC,SAAU,IAAM,SAC1BC,MAAO,CAAED,SAAU,IAAM,YAG7B,KACA,KATwB,CAUxB7D,GC7IF+D,eAAeC,OAAOlE,EAAe+B,E","sources":["webpack://@descope/web-components-ui/../components/descope-image/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/ImageClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/index.js"],"sourcesContent":["import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n  const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n  return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src, altText) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\n  ele.setAttribute('alt', altText);\n  return ele;\n};\n\nconst createSvgEle = (text) => {\n  // we want to purify the SVG to avoid XSS attacks\n  const clean = DOMPurify.sanitize(text, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // allow image to render\n    ADD_TAGS: ['image'],\n    // forbid interactiviy via `use` tags (which are sanitized by default)\n    FORBID_TAGS: ['defs']\n  });\n\n  const parser = new DOMParser();\n  const ele = parser\n    .parseFromString(clean, 'image/svg+xml')\n    .querySelector('svg');\n  return ele;\n};\n\nexport const createImage = async (src, altText) => {\n  try {\n    let ele;\n    if (isBase64Svg(src)) {\n      // handle base64 source\n      const svgXml = atob(src.slice(base64Prefix.length));\n      ele = createSvgEle(svgXml);\n    } else if (getFileExtension(src) === 'svg') {\n      // handle urls\n      const fetchedSrc = await fetch(src);\n      const text = await fetchedSrc.text();\n      ele = createSvgEle(text);\n    } else {\n      // handle binary\n      ele = createImgEle(src, altText);\n    }\n\n    ele.style.setProperty('max-width', '100%');\n    ele.style.setProperty('max-height', '100%');\n\n    return ele;\n  } catch {\n    return null;\n  }\n};\n","/* eslint-disable no-use-before-define */\nimport {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createImage } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('image');\n\nconst srcAttrs = ['src', 'src-dark'];\n\nclass RawImage extends createBaseClass({\n  componentName,\n  baseSelector: 'slot',\n}) {\n  static get observedAttributes() {\n    return srcAttrs;\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n    injectStyle(\n      `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      `,\n      this,\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  onThemeChange() {\n    this.renderImage();\n  }\n\n  toggleVisibility(isVisible) {\n    if (isVisible) {\n      this.classList.remove('hidden');\n    } else {\n      this.classList.add('hidden');\n    }\n  }\n\n  get altText() {\n    return this.getAttribute('alt') || '';\n  }\n\n  get legacySrc() {\n    return this.getAttribute('src');\n  }\n\n  get themeSrc() {\n    return this.getAttribute(`src-${this.currentThemeName}`);\n  }\n\n  get src() {\n    return this.themeSrc || this.legacySrc;\n  }\n\n  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n  // with the value from the `st-fill` attribute\n  // eslint-disable-next-line class-methods-use-this\n  updateFillColor(node) {\n    // set fill to root node and all its relevant selectors\n    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n    elementsToReplace.forEach((ele) => {\n      ele.setAttribute(\n        'fill',\n        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`,\n      );\n    });\n  }\n\n  renderImage() {\n    this.toggleVisibility(this.src);\n\n    createImage(this.src, this.altText).then((res) => {\n      this.innerHTML = '';\n      if (res) {\n        this.updateFillColor(res);\n        this.appendChild(res);\n      }\n    });\n  }\n\n  // render only when src attribute matches current theme\n  shouldRender(src) {\n    const srcVal = this.getAttribute(src);\n    return this.src === srcVal;\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (this.shouldRender(attrName)) {\n      this.renderImage();\n    }\n  }\n}\n\nexport const ImageClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawImage);\n","import { componentName, ImageClass } from './ImageClass';\n\ncustomElements.define(componentName, ImageClass);\n\nexport { ImageClass, componentName };\n"],"names":["createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","ADD_TAGS","FORBID_TAGS","DOMParser","parseFromString","querySelector","componentName","srcAttrs","RawImage","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","init","toggleVisibility","src","onThemeChange","renderImage","isVisible","classList","remove","add","altText","getAttribute","legacySrc","themeSrc","currentThemeName","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","ImageClass","cssVarList","fill","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","style","setProperty","createImage","then","res","appendChild","shouldRender","srcVal","attributeChangedCallback","attrName","oldValue","newValue","mappings","height","selector","width","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"descope-image.js","mappings":"4NAYO,MAAMA,GAAgB,QAAiB,SAExCC,EAAW,CAAC,MAAO,YAEzB,MAAMC,WAAiB,QAAgB,CACrCF,gBACAG,aAAc,UAEd,6BAAWC,GACT,OAAOH,CACT,CAEA,WAAAI,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,2BAIhD,QACE,6UAoBAH,KAEJ,CAEA,IAAAI,GACEL,MAAMK,SACNJ,KAAKK,iBAAiBL,KAAKM,IAC7B,CAEA,aAAAC,GACEP,KAAKQ,aACP,CAEA,gBAAAH,CAAiBI,GACXA,EACFT,KAAKU,UAAUC,OAAO,UAEtBX,KAAKU,UAAUE,IAAI,SAEvB,CAEA,WAAIC,GACF,OAAOb,KAAKc,aAAa,QAAU,EACrC,CAEA,aAAIC,GACF,OAAOf,KAAKc,aAAa,MAC3B,CAEA,YAAIE,GACF,OAAOhB,KAAKc,aAAa,OAAOd,KAAKiB,mBACvC,CAEA,OAAIX,GACF,OAAON,KAAKgB,UAAYhB,KAAKe,SAC/B,CAKA,eAAAG,CAAgBC,GAEY,CAACA,KAASA,EAAKC,iBAAiB,YAExCC,SAASC,IACzBA,EAAIC,aACF,OACA,OAAOC,EAAWC,WAAWC,SAASJ,EAAIR,aAAa,SAAW,QACnE,GAEL,CAEA,WAAAN,GACER,KAAKK,iBAAiBL,KAAKM,MAE3B,OAAYN,KAAKM,IAAKN,KAAKa,SAASc,MAAMC,IACxC5B,KAAKG,UAAY,GACbyB,IACF5B,KAAKkB,gBAAgBU,GACrB5B,KAAK6B,YAAYD,GACnB,GAEJ,CAGA,YAAAE,CAAaxB,GACX,MAAMyB,EAAS/B,KAAKc,aAAaR,GACjC,OAAON,KAAKM,MAAQyB,CACtB,CAEA,wBAAAC,CAAyBC,EAAUC,EAAUC,GAC3CpC,MAAMiC,2BAA2BC,EAAUC,EAAUC,GAEjDD,IAAaC,GAEbnC,KAAK8B,aAAaG,IACpBjC,KAAKQ,aAET,EAGK,MAAMgB,GAAa,SACxB,QAAiB,CACfY,SAAU,CACRV,KAAM,CAAC,EACPW,OAAQ,CAAEC,SAAU,IAAM,SAC1BC,MAAO,CAAED,SAAU,IAAM,YAG7B,KACA,KATwB,CAUxB3C,E,kDC7IF,MAgBM6C,EAAgBC,IAEpB,MAAMC,EAAQ,IAAUC,SAASF,EAAM,CACrCG,aAAc,CAAEC,KAAK,EAAMC,YAAY,GAEvCC,SAAU,CAAC,SAEXC,YAAa,CAAC,UAOhB,OAJe,IAAIC,WAEhBC,gBAAgBR,EAAO,iBACvBS,cAAc,MACP,EAGCC,EAAcC,MAAO/C,EAAKO,KACrC,IACE,IAAIS,EACJ,GA7BgB,CAAChB,GAAQA,EAAIgD,WAFZ,8BA+BbC,CAAYjD,GAAM,CAEpB,MAAMkD,EAASC,KAAKnD,EAAIoD,MAAMC,KAC9BrC,EAAMkB,EAAagB,EACrB,MAAO,GAA8B,QAxChB,CAACI,IACxB,MAAMC,EAAQD,EAAKC,MAAM,8BACzB,OAAOA,EAAQA,EAAM,GAAK,IAAI,EAsCjBC,CAAiBxD,GAAgB,CAE1C,MAAMyD,QAAmBC,MAAM1D,GACzBmC,QAAasB,EAAWtB,OAC9BnB,EAAMkB,EAAaC,EACrB,MAEEnB,EAtCe,EAAChB,EAAKO,KACzB,MAAMS,EAAM2C,SAASC,cAAc,OAGnC,OAFA5C,EAAIC,aAAa,MAAOjB,GACxBgB,EAAIC,aAAa,MAAOV,GACjBS,CAAG,EAkCA6C,CAAa7D,EAAKO,GAM1B,OAHAS,EAAI8C,MAAMC,YAAY,YAAa,QACnC/C,EAAI8C,MAAMC,YAAY,aAAc,QAE7B/C,CACT,CAAE,MACA,OAAO,IACT,E,yFCxDFgD,eAAeC,OAAO,IAAe,I","sources":["webpack://@descope/web-components-ui/../components/descope-image/src/component/ImageClass.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-image/src/component/index.js"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { createImage } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('image');\n\nconst srcAttrs = ['src', 'src-dark'];\n\nclass RawImage extends createBaseClass({\n  componentName,\n  baseSelector: 'slot',\n}) {\n  static get observedAttributes() {\n    return srcAttrs;\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<slot></slot>\n\t`;\n\n    injectStyle(\n      `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      :host > slot {\n        width: 100%;\n        height: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n      ::slotted(*) {\n        width: 100%;\n\t\t\t}\n\n      .hidden {\n        display: none;\n      }\n      `,\n      this,\n    );\n  }\n\n  init() {\n    super.init?.();\n    this.toggleVisibility(this.src);\n  }\n\n  onThemeChange() {\n    this.renderImage();\n  }\n\n  toggleVisibility(isVisible) {\n    if (isVisible) {\n      this.classList.remove('hidden');\n    } else {\n      this.classList.add('hidden');\n    }\n  }\n\n  get altText() {\n    return this.getAttribute('alt') || '';\n  }\n\n  get legacySrc() {\n    return this.getAttribute('src');\n  }\n\n  get themeSrc() {\n    return this.getAttribute(`src-${this.currentThemeName}`);\n  }\n\n  get src() {\n    return this.themeSrc || this.legacySrc;\n  }\n\n  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes\n  // with the value from the `st-fill` attribute\n  // eslint-disable-next-line class-methods-use-this\n  updateFillColor(node) {\n    // set fill to root node and all its relevant selectors\n    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];\n\n    elementsToReplace.forEach((ele) => {\n      ele.setAttribute(\n        'fill',\n        `var(${ImageClass.cssVarList.fill}, ${ele.getAttribute('fill') || \"''\"})`,\n      );\n    });\n  }\n\n  renderImage() {\n    this.toggleVisibility(this.src);\n\n    createImage(this.src, this.altText).then((res) => {\n      this.innerHTML = '';\n      if (res) {\n        this.updateFillColor(res);\n        this.appendChild(res);\n      }\n    });\n  }\n\n  // render only when src attribute matches current theme\n  shouldRender(src) {\n    const srcVal = this.getAttribute(src);\n    return this.src === srcVal;\n  }\n\n  attributeChangedCallback(attrName, oldValue, newValue) {\n    super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n    if (oldValue === newValue) return;\n\n    if (this.shouldRender(attrName)) {\n      this.renderImage();\n    }\n  }\n}\n\nexport const ImageClass = compose(\n  createStyleMixin({\n    mappings: {\n      fill: {},\n      height: { selector: () => ':host' },\n      width: { selector: () => ':host' },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawImage);\n","import DOMPurify from 'dompurify';\n\nconst getFileExtension = (path) => {\n  const match = path.match(/\\.([0-9a-z]+)(?:[\\\\?#]|$)/i);\n  return match ? match[1] : null;\n};\n\nconst base64Prefix = 'data:image/svg+xml;base64,';\n\nconst isBase64Svg = (src) => src.startsWith(base64Prefix);\n\nconst createImgEle = (src, altText) => {\n  const ele = document.createElement('img');\n  ele.setAttribute('src', src);\n  ele.setAttribute('alt', altText);\n  return ele;\n};\n\nconst createSvgEle = (text) => {\n  // we want to purify the SVG to avoid XSS attacks\n  const clean = DOMPurify.sanitize(text, {\n    USE_PROFILES: { svg: true, svgFilters: true },\n    // allow image to render\n    ADD_TAGS: ['image'],\n    // forbid interactiviy via `use` tags (which are sanitized by default)\n    FORBID_TAGS: ['defs']\n  });\n\n  const parser = new DOMParser();\n  const ele = parser\n    .parseFromString(clean, 'image/svg+xml')\n    .querySelector('svg');\n  return ele;\n};\n\nexport const createImage = async (src, altText) => {\n  try {\n    let ele;\n    if (isBase64Svg(src)) {\n      // handle base64 source\n      const svgXml = atob(src.slice(base64Prefix.length));\n      ele = createSvgEle(svgXml);\n    } else if (getFileExtension(src) === 'svg') {\n      // handle urls\n      const fetchedSrc = await fetch(src);\n      const text = await fetchedSrc.text();\n      ele = createSvgEle(text);\n    } else {\n      // handle binary\n      ele = createImgEle(src, altText);\n    }\n\n    ele.style.setProperty('max-width', '100%');\n    ele.style.setProperty('max-height', '100%');\n\n    return ele;\n  } catch {\n    return null;\n  }\n};\n","import { componentName, ImageClass } from './ImageClass';\n\ncustomElements.define(componentName, ImageClass);\n\nexport { ImageClass, componentName };\n"],"names":["componentName","srcAttrs","RawImage","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","init","toggleVisibility","src","onThemeChange","renderImage","isVisible","classList","remove","add","altText","getAttribute","legacySrc","themeSrc","currentThemeName","updateFillColor","node","querySelectorAll","forEach","ele","setAttribute","ImageClass","cssVarList","fill","then","res","appendChild","shouldRender","srcVal","attributeChangedCallback","attrName","oldValue","newValue","mappings","height","selector","width","createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","ADD_TAGS","FORBID_TAGS","DOMParser","parseFromString","querySelector","createImage","async","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","createImgEle","style","setProperty","customElements","define"],"sourceRoot":""}

package/dist/umd/descope-link.js

@@ -1,2 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,4159],{63595:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.s,componentName:()=>n.T});var n=o(66434);customElements.define(n.T,n.s)},66434:(t,e,o)=>{o.d(e,{T:()=>h,s:()=>c});var n=o(88961),s=o(63200),r=o(25964),i=o(72270);const h=(0,r.xE)("text");class l extends((0,i.qu)({componentName:h,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,r.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const{host:p}={host:{selector:()=>":host"}},c=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(l)},74778:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>x,componentName:()=>l});var n=o(88961),s=o(63200),r=o(25964),i=o(72270),h=o(66434);const l=(0,r.xE)("link");class p extends((0,i.qu)({componentName:l,baseSelector:":host a"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t",(0,r.fz)("\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      ",this),(0,r.EA)(this,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),(0,r.EA)(this,this.shadowRoot.querySelector("descope-text"),{includeAttrs:["mode","variant"]})}}const c={host:{selector:()=>":host"},link:{selector:()=>":host a"},anchor:{},wrapper:{selector:()=>":host > div"},text:{selector:()=>h.s.componentName}},{anchor:a,text:d,host:m,wrapper:y,link:u}=c,x=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{...m,property:"width"},hostDirection:{...d,property:"direction"},textAlign:y,textDecoration:{...u,property:"text-decoration",fallback:"none"},textColor:[{...a,property:"color"},{...d,property:h.s.cssVarList.textColor}],cursor:a}}),n.VO,n.tQ)(p);o(63595),customElements.define(l,x)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,4159],{63595:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.s,componentName:()=>n.T});var n=o(66434);customElements.define(n.T,n.s)},66434:(t,e,o)=>{o.d(e,{T:()=>h,s:()=>c});var n=o(88961),s=o(63200),r=o(25964),i=o(72270);const h=(0,r.xE)("text");class p extends((0,i.qu)({componentName:h,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,r.fz)("\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const{host:l}={host:{selector:()=>":host"}},c=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{...l,property:"width"},hostDirection:{...l,property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(p)},74778:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>x,componentName:()=>p});var n=o(88961),s=o(63200),r=o(25964),i=o(72270),h=o(66434);const p=(0,r.xE)("link");class l extends((0,i.qu)({componentName:p,baseSelector:":host a"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t",(0,r.fz)("\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      ",this),(0,r.EA)(this,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),(0,r.EA)(this,this.shadowRoot.querySelector("descope-text"),{includeAttrs:["mode","variant"]})}}const c={host:{selector:()=>":host"},link:{selector:()=>":host a"},anchor:{},wrapper:{selector:()=>":host > div"},text:{selector:()=>h.s.componentName}},{anchor:a,text:d,host:m,wrapper:y,link:u}=c,x=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{...m,property:"width"},hostDirection:{...d,property:"direction"},textAlign:y,textDecoration:{...u,property:"text-decoration",fallback:"none"},textColor:[{...a,property:"color"},{...d,property:h.s.cssVarList.textColor}],cursor:a}}),n.VO,n.tQ)(l);o(63595),customElements.define(p,x)}}]);
 //# sourceMappingURL=descope-link.js.map

package/dist/umd/descope-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"descope-link.js","mappings":"qNAEAA,eAAeC,OAAO,IAAe,I,2FCW9B,MAAMC,GAAgB,QAAiB,QAE9C,MAAMC,WAAgB,QAAgB,CACpCD,gBACAE,aAAc,kBAEd,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,iDAIhD,QAAY,iLASTH,KACL,CAEA,iBAAII,GACF,MAAgD,SAAzCJ,KAAKK,aAAa,kBAC3B,CAEA,IAAAC,GACEP,MAAMO,QAEN,QAAgBN,MAAM,KACpB,MAAMO,IAAgBP,KAAKQ,WAAWC,OACtCT,KAAKU,MAAMC,SAAWJ,GAAeP,KAAKI,cAAgB,OAAS,EAAE,GAEzE,EAGF,MAAM,KAAEQ,GAAS,CACfA,KAAM,CAAEC,SAAU,IAAM,UAGbC,GAAY,SACvB,QAAiB,CACfC,SAAU,CACRC,UAAW,CAAEH,SAAU,IAAM,QAASI,SAAU,SAChDC,cAAe,CAAEL,SAAU,IAAM,QAASI,SAAU,aACpDE,SAAU,CAAC,EACXC,UAAW,CACT,CAAEH,SAAU,UAEdI,eAAgB,CAAEJ,SAAU,eAC5BK,kBAAmB,CAAEL,SAAU,kBAC/BM,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,cAAe,CAAC,EAChBC,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,WAAY,CAAC,EACbC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,YAAa,CAAC,KAGlB,KACA,KAvBuB,CAwBvBnC,E,iIClEK,MAAMD,GAAgB,QAAiB,QAE9C,MAAMqC,WAAgB,QAAgB,CAAErC,gBAAeE,aAAc,aACnE,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,kIAUhD,QACE,oIASAH,OAGF,QAAaA,KAAMA,KAAKiC,WAAWC,cAAc,KAAM,CACrDC,aAAc,CAAC,OAAQ,SAAU,WACjCC,SAAU,CACRC,QAAS,YAIb,QAAarC,KAAMA,KAAKiC,WAAWC,cAAc,gBAAiB,CAChEC,aAAc,CAAC,OAAQ,YAE3B,EAGF,MAAMG,EAAY,CAChB1B,KAAM,CAAEC,SAAU,IAAM,SACxB0B,KAAM,CAAE1B,SAAU,IAAM,WACxB2B,OAAQ,CAAC,EACTC,QAAS,CAAE5B,SAAU,IAAM,eAC3B6B,KAAM,CAAE7B,SAAU,IAAMC,EAAA,EAAUnB,iBAG5B6C,OAAM,OAAM,wBAAqB,GAAKF,EAEjCK,GAAY,SACvB,QAAiB,CACf5B,SAAU,CACRC,UAAW,IAAKJ,EAAMK,SAAU,SAChCC,cAAe,IAAK,EAAMD,SAAU,aACpCO,UAAWiB,EACXG,eAAgB,IAAK,EAAM3B,SAAU,kBAAmB4B,SAAU,QAClEzB,UAAW,CACT,IAAK,EAAQH,SAAU,SACvB,IAAK,EAAMA,SAAUH,EAAA,EAAUgC,WAAW1B,YAE5C2B,OAAQ,KAGZ,KACA,KAfuB,CAgBvBf,G,SC/EFvC,eAAeC,OAAOC,EAAegD,E","sources":["webpack://@descope/web-components-ui/../components/descope-text/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-text/src/component/TextClass.js","webpack://@descope/web-components-ui/../components/descope-link/src/component/LinkClass.js","webpack://@descope/web-components-ui/../components/descope-link/src/component/index.js"],"sourcesContent":["import { componentName, TextClass } from './TextClass';\n\ncustomElements.define(componentName, TextClass);\n\nexport { TextClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n  observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('text');\n\nclass RawText extends createBaseClass({\n  componentName,\n  baseSelector: ':host > slot',\n}) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <slot part=\"text-wrapper\"></slot>\n    `;\n\n    injectStyle(`\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    `, this);\n  }\n\n  get hideWhenEmpty() {\n    return this.getAttribute('hide-when-empty') === 'true';\n  }\n\n  init() {\n    super.init();\n\n    observeChildren(this, () => {\n      const hasChildren = !!this.childNodes.length;\n      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';\n    });\n  }\n}\n\nconst { host } = {\n  host: { selector: () => ':host' }\n}\n\nexport const TextClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      hostDirection: { selector: () => ':host', property: 'direction' },\n      fontSize: {},\n      textColor: [\n        { property: 'color' }\n      ],\n      textLineHeight: { property: 'line-height' },\n      textLetterSpacing: { property: 'letter-spacing' },\n      textShadow: {},\n      textAlign: {},\n      textTransform: {},\n      fontFamily: {},\n      fontStyle: {},\n      fontWeight: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderColor: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawText);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  forwardAttrs,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('link');\n\nclass RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t`;\n\n    injectStyle(\n      `\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      `,\n      this\n    );\n\n    forwardAttrs(this, this.shadowRoot.querySelector('a'), {\n      includeAttrs: ['href', 'target', 'tooltip'],\n      mapAttrs: {\n        tooltip: 'title',\n      },\n    });\n\n    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {\n      includeAttrs: ['mode', 'variant'],\n    });\n  }\n}\n\nconst selectors = {\n  host: { selector: () => ':host' },\n  link: { selector: () => ':host a' },\n  anchor: {},\n  wrapper: { selector: () => ':host > div' },\n  text: { selector: () => TextClass.componentName },\n};\n\nconst { anchor, text, host, wrapper, link } = selectors;\n\nexport const LinkClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...text, property: 'direction' },\n      textAlign: wrapper,\n      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },\n      textColor: [\n        { ...anchor, property: 'color' },\n        { ...text, property: TextClass.cssVarList.textColor },\n      ],\n      cursor: anchor,\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawLink);\n","import { componentName, LinkClass } from './LinkClass';\nimport '@descope-ui/descope-text';\n\ncustomElements.define(componentName, LinkClass);\n\nexport { LinkClass, componentName };\n"],"names":["customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","style","display","host","selector","TextClass","mappings","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawLink","shadowRoot","querySelector","includeAttrs","mapAttrs","tooltip","selectors","link","anchor","wrapper","text","LinkClass","textDecoration","fallback","cssVarList","cursor"],"sourceRoot":""}
+{"version":3,"file":"descope-link.js","mappings":"qNAEAA,eAAeC,OAAO,IAAe,I,2FCW9B,MAAMC,GAAgB,QAAiB,QAE9C,MAAMC,WAAgB,QAAgB,CACpCD,gBACAE,aAAc,kBAEd,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,iDAIhD,QAAY,iLASTH,KACL,CAEA,iBAAII,GACF,MAAgD,SAAzCJ,KAAKK,aAAa,kBAC3B,CAEA,IAAAC,GACEP,MAAMO,QAEN,QAAgBN,MAAM,KACpB,MAAMO,IAAgBP,KAAKQ,WAAWC,OACtCT,KAAKU,MAAMC,SAAWJ,GAAeP,KAAKI,cAAgB,OAAS,EAAE,GAEzE,EAGF,MAAM,KAAEQ,GAAS,CACfA,KAAM,CAAEC,SAAU,IAAM,UAGbC,GAAY,SACvB,QAAiB,CACfC,SAAU,CACRC,UAAW,IAAKJ,EAAMK,SAAU,SAChCC,cAAe,IAAKN,EAAMK,SAAU,aACpCE,SAAU,CAAC,EACXC,UAAW,CACT,CAAEH,SAAU,UAEdI,eAAgB,CAAEJ,SAAU,eAC5BK,kBAAmB,CAAEL,SAAU,kBAC/BM,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,cAAe,CAAC,EAChBC,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,WAAY,CAAC,EACbC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,YAAa,CAAC,KAGlB,KACA,KAvBuB,CAwBvBnC,E,iIClEK,MAAMD,GAAgB,QAAiB,QAE9C,MAAMqC,WAAgB,QAAgB,CAAErC,gBAAeE,aAAc,aACnE,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,kIAUhD,QACE,oIASAH,OAGF,QAAaA,KAAMA,KAAKiC,WAAWC,cAAc,KAAM,CACrDC,aAAc,CAAC,OAAQ,SAAU,WACjCC,SAAU,CACRC,QAAS,YAIb,QAAarC,KAAMA,KAAKiC,WAAWC,cAAc,gBAAiB,CAChEC,aAAc,CAAC,OAAQ,YAE3B,EAGF,MAAMG,EAAY,CAChB1B,KAAM,CAAEC,SAAU,IAAM,SACxB0B,KAAM,CAAE1B,SAAU,IAAM,WACxB2B,OAAQ,CAAC,EACTC,QAAS,CAAE5B,SAAU,IAAM,eAC3B6B,KAAM,CAAE7B,SAAU,IAAMC,EAAA,EAAUnB,iBAG5B6C,OAAM,OAAM,wBAAqB,GAAKF,EAEjCK,GAAY,SACvB,QAAiB,CACf5B,SAAU,CACRC,UAAW,IAAKJ,EAAMK,SAAU,SAChCC,cAAe,IAAK,EAAMD,SAAU,aACpCO,UAAWiB,EACXG,eAAgB,IAAK,EAAM3B,SAAU,kBAAmB4B,SAAU,QAClEzB,UAAW,CACT,IAAK,EAAQH,SAAU,SACvB,IAAK,EAAMA,SAAUH,EAAA,EAAUgC,WAAW1B,YAE5C2B,OAAQ,KAGZ,KACA,KAfuB,CAgBvBf,G,SC/EFvC,eAAeC,OAAOC,EAAegD,E","sources":["webpack://@descope/web-components-ui/../components/descope-text/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-text/src/component/TextClass.js","webpack://@descope/web-components-ui/../components/descope-link/src/component/LinkClass.js","webpack://@descope/web-components-ui/../components/descope-link/src/component/index.js"],"sourcesContent":["import { componentName, TextClass } from './TextClass';\n\ncustomElements.define(componentName, TextClass);\n\nexport { TextClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  injectStyle,\n  observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('text');\n\nclass RawText extends createBaseClass({\n  componentName,\n  baseSelector: ':host > slot',\n}) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <slot part=\"text-wrapper\"></slot>\n    `;\n\n    injectStyle(`\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n    `, this);\n  }\n\n  get hideWhenEmpty() {\n    return this.getAttribute('hide-when-empty') === 'true';\n  }\n\n  init() {\n    super.init();\n\n    observeChildren(this, () => {\n      const hasChildren = !!this.childNodes.length;\n      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';\n    });\n  }\n}\n\nconst { host } = {\n  host: { selector: () => ':host' }\n}\n\nexport const TextClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...host, property: 'direction' },\n      fontSize: {},\n      textColor: [\n        { property: 'color' }\n      ],\n      textLineHeight: { property: 'line-height' },\n      textLetterSpacing: { property: 'letter-spacing' },\n      textShadow: {},\n      textAlign: {},\n      textTransform: {},\n      fontFamily: {},\n      fontStyle: {},\n      fontWeight: {},\n      borderWidth: {},\n      borderStyle: {},\n      borderColor: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n)(RawText);\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  forwardAttrs,\n  injectStyle,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('link');\n\nclass RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t`;\n\n    injectStyle(\n      `\n    :host {\n\t\t\tdisplay: inline-block;\n      line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n      `,\n      this\n    );\n\n    forwardAttrs(this, this.shadowRoot.querySelector('a'), {\n      includeAttrs: ['href', 'target', 'tooltip'],\n      mapAttrs: {\n        tooltip: 'title',\n      },\n    });\n\n    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {\n      includeAttrs: ['mode', 'variant'],\n    });\n  }\n}\n\nconst selectors = {\n  host: { selector: () => ':host' },\n  link: { selector: () => ':host a' },\n  anchor: {},\n  wrapper: { selector: () => ':host > div' },\n  text: { selector: () => TextClass.componentName },\n};\n\nconst { anchor, text, host, wrapper, link } = selectors;\n\nexport const LinkClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { ...host, property: 'width' },\n      hostDirection: { ...text, property: 'direction' },\n      textAlign: wrapper,\n      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },\n      textColor: [\n        { ...anchor, property: 'color' },\n        { ...text, property: TextClass.cssVarList.textColor },\n      ],\n      cursor: anchor,\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawLink);\n","import { componentName, LinkClass } from './LinkClass';\nimport '@descope-ui/descope-text';\n\ncustomElements.define(componentName, LinkClass);\n\nexport { LinkClass, componentName };\n"],"names":["customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","style","display","host","selector","TextClass","mappings","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawLink","shadowRoot","querySelector","includeAttrs","mapAttrs","tooltip","selectors","link","anchor","wrapper","text","LinkClass","textDecoration","fallback","cssVarList","cursor"],"sourceRoot":""}

package/dist/umd/descope-list-item.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[461],{24542:(e,o,n)=>{n.r(o),n.d(o,{ListItemClass:()=>s.O,componentName:()=>s.T});var s=n(93895);customElements.define(s.T,s.O)},93895:(e,o,n)=>{n.d(o,{O:()=>l,T:()=>d});var s=n(88961),t=n(63200),r=n(25964),i=n(72270);const d=(0,r.xE)("list-item"),l=(0,t.Zz)((0,s.RF)({mappings:{padding:{},backgroundColor:{},borderColor:{},borderStyle:{},borderWidth:{},borderRadius:{},outline:{},cursor:{},gap:{},maxWidth:{selector:()=>":host"},alignItems:{},flexDirection:{},transition:{}}}),s.VO,s.tQ,(e=>class extends e{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n      <slot></slot>\n    ",(0,r.fz)("\n      slot {\n          width: 100%;\n          display: flex;\n          overflow: hidden;\n          box-sizing: border-box;\n      }\n      :host {\n        display: block;\n      }\n        ",this)}}),s.y)((0,i.qu)({componentName:d,baseSelector:"slot"}))}}]);
+//# sourceMappingURL=descope-list-item.js.map

package/dist/umd/descope-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descope-list-item.js","mappings":"mNAEAA,eAAeC,OAAO,IAAe,I,2FCS9B,MAAMC,GAAgB,QAAiB,aA4BjCC,GAAgB,SAC3B,QAAiB,CACfC,SAAU,CACRC,QAAS,CAAC,EACVC,gBAAiB,CAAC,EAClBC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,aAAc,CAAC,EACfC,QAAS,CAAC,EACVC,OAAQ,CAAC,EACTC,IAAK,CAAC,EACNC,SAAU,CAAEC,SAAU,IAAM,SAC5BC,WAAY,CAAC,EACbC,cAAe,CAAC,EAChBC,WAAY,CAAC,KAGjB,KACA,MA7CmBC,GACnB,cAAiCA,EAC/B,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,+BAIhD,QACE,uMAWAH,KAEJ,IAwBF,IArB2B,EAsB3B,QAAgB,CAAEpB,gBAAewB,aAAc,S","sources":["webpack://@descope/web-components-ui/../components/descope-list-item/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-list-item/src/component/ListItemClass.js"],"sourcesContent":["import { componentName, ListItemClass } from './ListItemClass';\n\ncustomElements.define(componentName, ListItemClass);\n\nexport { ListItemClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n  activeableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('list-item');\n\nconst customMixin = (superclass) =>\n  class ListItemMixinClass extends superclass {\n    constructor() {\n      super();\n\n      this.attachShadow({ mode: 'open' }).innerHTML = `\n      <slot></slot>\n    `;\n\n      injectStyle(\n        `\n      slot {\n          width: 100%;\n          display: flex;\n          overflow: hidden;\n          box-sizing: border-box;\n      }\n      :host {\n        display: block;\n      }\n        `,\n        this\n      );\n    }\n  };\n\nexport const ListItemClass = compose(\n  createStyleMixin({\n    mappings: {\n      padding: {},\n      backgroundColor: {},\n      borderColor: {},\n      borderStyle: {},\n      borderWidth: {},\n      borderRadius: {},\n      outline: {},\n      cursor: {},\n      gap: {},\n      maxWidth: { selector: () => ':host' },\n      alignItems: {},\n      flexDirection: {},\n      transition: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n  customMixin,\n  activeableMixin\n)(createBaseClass({ componentName, baseSelector: 'slot' }));\n"],"names":["customElements","define","componentName","ListItemClass","mappings","padding","backgroundColor","borderColor","borderStyle","borderWidth","borderRadius","outline","cursor","gap","maxWidth","selector","alignItems","flexDirection","transition","superclass","constructor","super","this","attachShadow","mode","innerHTML","baseSelector"],"sourceRoot":""}

package/dist/umd/descope-list.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[461,4551],{7720:(t,e,n)=>{n.d(e,{T:()=>l,x:()=>p});var o=n(88961),s=n(63200),r=n(25964),i=n(93895),a=n(72270);const l=(0,r.xE)("list");class d extends((0,a.qu)({componentName:l,baseSelector:".wrapper"})){static get observedAttributes(){return["variant","readonly"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <div class="wrapper">\n    <slot></slot>\n    <slot name="empty-state">\n      No item...\n    </slot>\n    </div>\n\t',(0,r.fz)('\n    .wrapper {\n        overflow: auto;\n        display: grid;\n        max-height: 100%;\n        width: 100%;\n      }\n\n      :host {\n        display: inline-flex;\n        width: 100%;\n      }\n      slot[name="empty-state"] {\n        justify-content: center;\n        align-items: center;\n        display: flex;\n        flex-grow: 1;\n      }\n\n      :host slot[name="empty-state"] {\n        display: none;\n      }\n      :host([empty]) slot[name="empty-state"] {\n        display: flex;\n      }\n      ::slotted(:not([slot])) {\n        width: 100%;\n      }\n        ',this)}get items(){return this.shadowRoot.querySelector("slot").assignedElements()}#t(){0===this.items.length?this.setAttribute("empty","true"):this.removeAttribute("empty")}get variant(){return this.getAttribute("variant")||"list"}#e(){this.items.forEach((t=>{let e=t;e.localName!==i.O.componentName&&(e=t.querySelector(i.O.componentName));const n="tiles"===this.variant?"tile":"row";e.setAttribute("variant",n)}))}init(){super.init?.(),(0,r.Ge)(this,(()=>{this.#t(),this.#e(),this.#n()}))}get isReadOnly(){return"true"===this.getAttribute("readonly")}#n(){this.items.forEach((t=>{this.isReadOnly?t.setAttribute("inert",""):t.removeAttribute("inert")}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),n!==e&&("variant"===t?this.#e():"readonly"===t&&this.#n())}}const p=(0,s.Zz)((0,o.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},maxHeight:{selector:()=>":host"},minHeight:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],hostDirection:{selector:()=>":host",property:"direction"},fontFamily:{},gap:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},boxShadow:{},gridTemplateColumns:{},maxItemsWidth:{selector:()=>"::slotted(:not([slot]))",property:"max-width"},minItemsWidth:{selector:()=>"::slotted(:not([slot]))",property:"min-width"},itemsHorizontalAlign:{selector:()=>"::slotted(*)",property:"justify-self"},emptyStateTextColor:{selector:()=>'slot[name="empty-state"]',property:"color"},emptyStateTextFontFamily:{selector:()=>'slot[name="empty-state"]',property:"font-family"}}}),o.VO,o.tQ)(d)},24542:(t,e,n)=>{n.r(e),n.d(e,{ListItemClass:()=>o.O,componentName:()=>o.T});var o=n(93895);customElements.define(o.T,o.O)},45400:(t,e,n)=>{n.r(e),n.d(e,{ListClass:()=>o.x,componentName:()=>o.T}),n(24542);var o=n(7720);customElements.define(o.T,o.x)},93895:(t,e,n)=>{n.d(e,{O:()=>l,T:()=>a});var o=n(88961),s=n(63200),r=n(25964),i=n(72270);const a=(0,r.xE)("list-item"),l=(0,s.Zz)((0,o.RF)({mappings:{padding:{},backgroundColor:{},borderColor:{},borderStyle:{},borderWidth:{},borderRadius:{},outline:{},cursor:{},gap:{},maxWidth:{selector:()=>":host"},alignItems:{},flexDirection:{},transition:{}}}),o.VO,o.tQ,(t=>class extends t{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n      <slot></slot>\n    ",(0,r.fz)("\n      slot {\n          width: 100%;\n          display: flex;\n          overflow: hidden;\n          box-sizing: border-box;\n      }\n      :host {\n        display: block;\n      }\n        ",this)}}),o.y)((0,i.qu)({componentName:a,baseSelector:"slot"}))}}]);
+//# sourceMappingURL=descope-list.js.map

package/dist/umd/descope-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"descope-list.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-list/src/component/ListClass.js","webpack://@descope/web-components-ui/../components/descope-list-item/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-list/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-list-item/src/component/ListItemClass.js"],"sourcesContent":["import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n  getComponentName,\n  observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { ListItemClass } from '@descope-ui/descope-list-item/class';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('list');\n\nclass RawList extends createBaseClass({ componentName, baseSelector: '.wrapper' }) {\n  static get observedAttributes() {\n    return ['variant', 'readonly'];\n  }\n\n  constructor() {\n    super();\n\n    this.attachShadow({ mode: 'open' }).innerHTML = `\n    <div class=\"wrapper\">\n    <slot></slot>\n    <slot name=\"empty-state\">\n      No item...\n    </slot>\n    </div>\n\t`;\n\n    injectStyle(\n      `\n    .wrapper {\n        overflow: auto;\n        display: grid;\n        max-height: 100%;\n        width: 100%;\n      }\n\n      :host {\n        display: inline-flex;\n        width: 100%;\n      }\n      slot[name=\"empty-state\"] {\n        justify-content: center;\n        align-items: center;\n        display: flex;\n        flex-grow: 1;\n      }\n\n      :host slot[name=\"empty-state\"] {\n        display: none;\n      }\n      :host([empty]) slot[name=\"empty-state\"] {\n        display: flex;\n      }\n      ::slotted(:not([slot])) {\n        width: 100%;\n      }\n        `,\n      this\n    );\n  }\n\n  get items() {\n    return this.shadowRoot.querySelector('slot').assignedElements();\n  }\n\n  #handleEmptyState() {\n    if (this.items.length === 0) {\n      this.setAttribute('empty', 'true');\n    } else {\n      this.removeAttribute('empty');\n    }\n  }\n\n  get variant() {\n    return this.getAttribute('variant') || 'list';\n  }\n\n  #handleItemsVariant() {\n    this.items.forEach((item) => {\n      let listItem = item;\n      if (listItem.localName !== ListItemClass.componentName) {\n        listItem = item.querySelector(ListItemClass.componentName);\n      }\n\n      const listItemVariant = this.variant === 'tiles' ? 'tile' : 'row';\n      listItem.setAttribute('variant', listItemVariant);\n    });\n  }\n\n  init() {\n    super.init?.();\n\n    // we want new items to get the size\n    observeChildren(this, () => {\n      this.#handleEmptyState();\n      this.#handleItemsVariant();\n      this.#handleReadOnly();\n    });\n  }\n\n  get isReadOnly() {\n    return this.getAttribute('readonly') === 'true';\n  }\n\n  #handleReadOnly() {\n    this.items.forEach((item) => {\n      if (this.isReadOnly) item.setAttribute('inert', '');\n      else item.removeAttribute('inert');\n    });\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    super.attributeChangedCallback?.(name, oldValue, newValue);\n\n    if (newValue === oldValue) return;\n\n    if (name === 'variant') {\n      this.#handleItemsVariant();\n    } else if (name === 'readonly') {\n      this.#handleReadOnly();\n    }\n  }\n}\n\nexport const ListClass = compose(\n  createStyleMixin({\n    mappings: {\n      hostWidth: { selector: () => ':host', property: 'width' },\n      maxHeight: { selector: () => ':host' },\n      minHeight: {},\n      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],\n      horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],\n      hostDirection: { selector: () => ':host', property: 'direction' },\n      fontFamily: {},\n      gap: {},\n\n      backgroundColor: {},\n      borderRadius: {},\n      borderColor: {},\n      borderStyle: {},\n      borderWidth: {},\n\n      boxShadow: {},\n      gridTemplateColumns: {},\n      maxItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'max-width' },\n      minItemsWidth: { selector: () => '::slotted(:not([slot]))', property: 'min-width' },\n      itemsHorizontalAlign: { selector: () => '::slotted(*)', property: 'justify-self' },\n      emptyStateTextColor: { selector: () => 'slot[name=\"empty-state\"]', property: 'color' },\n      emptyStateTextFontFamily: {\n        selector: () => 'slot[name=\"empty-state\"]',\n        property: 'font-family',\n      },\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin\n)(RawList);\n","import { componentName, ListItemClass } from './ListItemClass';\n\ncustomElements.define(componentName, ListItemClass);\n\nexport { ListItemClass, componentName };\n","import '@descope-ui/descope-list-item';\n\nimport { componentName, ListClass } from './ListClass';\n\ncustomElements.define(componentName, ListClass);\n\nexport { ListClass, componentName };\n","import {\n  createStyleMixin,\n  draggableMixin,\n  componentNameValidationMixin,\n  activeableMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport { getComponentName } from '@descope-ui/common/components-helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('list-item');\n\nconst customMixin = (superclass) =>\n  class ListItemMixinClass extends superclass {\n    constructor() {\n      super();\n\n      this.attachShadow({ mode: 'open' }).innerHTML = `\n      <slot></slot>\n    `;\n\n      injectStyle(\n        `\n      slot {\n          width: 100%;\n          display: flex;\n          overflow: hidden;\n          box-sizing: border-box;\n      }\n      :host {\n        display: block;\n      }\n        `,\n        this\n      );\n    }\n  };\n\nexport const ListItemClass = compose(\n  createStyleMixin({\n    mappings: {\n      padding: {},\n      backgroundColor: {},\n      borderColor: {},\n      borderStyle: {},\n      borderWidth: {},\n      borderRadius: {},\n      outline: {},\n      cursor: {},\n      gap: {},\n      maxWidth: { selector: () => ':host' },\n      alignItems: {},\n      flexDirection: {},\n      transition: {},\n    },\n  }),\n  draggableMixin,\n  componentNameValidationMixin,\n  customMixin,\n  activeableMixin\n)(createBaseClass({ componentName, baseSelector: 'slot' }));\n"],"names":["componentName","RawList","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","items","shadowRoot","querySelector","assignedElements","length","setAttribute","removeAttribute","variant","getAttribute","forEach","item","listItem","localName","listItemVariant","init","isReadOnly","attributeChangedCallback","name","oldValue","newValue","ListClass","mappings","hostWidth","selector","property","maxHeight","minHeight","verticalPadding","horizontalPadding","hostDirection","fontFamily","gap","backgroundColor","borderRadius","borderColor","borderStyle","borderWidth","boxShadow","gridTemplateColumns","maxItemsWidth","minItemsWidth","itemsHorizontalAlign","emptyStateTextColor","emptyStateTextFontFamily","customElements","define","ListItemClass","padding","outline","cursor","maxWidth","alignItems","flexDirection","transition","superclass"],"sourceRoot":""}