npm - @descope/web-components-ui - Versions diffs - 1.69.0 → 1.71.0 - Mend

@descope/web-components-ui 1.69.0 → 1.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/cjs/index.cjs.js +3 -3
package/dist/cjs/index.cjs.js.map +1 -1
package/dist/index.esm.js +3 -3
package/dist/index.esm.js.map +1 -1
package/dist/umd/DescopeDev.js +1 -1
package/dist/umd/DescopeDev.js.map +1 -1
package/dist/umd/descope-collapsible-container.js +1 -1
package/dist/umd/descope-collapsible-container.js.map +1 -1
package/package.json +2 -2

package/dist/umd/descope-collapsible-container.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,6367,6724],{31004:(t,e,n)=>{"use strict";n.d(e,{w:()=>i});var o=n(25414);const s=t=>{const e=o.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},i=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=s(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),o=await n.text();e=s(o)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},56737:(t,e,n)=>{"use strict";n.r(e),n.d(e,{IconClass:()=>o.S,componentName:()=>o.T});var o=n(98538);customElements.define(o.T,o.S)},63595:(t,e,n)=>{"use strict";n.r(e),n.d(e,{TextClass:()=>o.s,componentName:()=>o.T});var o=n(66434);customElements.define(o.T,o.s)},66434:(t,e,n)=>{"use strict";n.d(e,{T:()=>a,s:()=>c});var o=n(88961),s=n(63200),i=n(25964),r=n(72270);const a=(0,i.xE)("text");class l extends((0,r.qu)({componentName:a,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,i.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,i.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const c=(0,s.Zz)((0,o.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:{}}}),o.VO,o.tQ)(l)},96945:(t,e,n)=>{"use strict";n.r(e),n.d(e,{CollapsibleContainerClass:()=>u,componentName:()=>p}),n(63595),n(56737);var o=n(88961),s=n(72270),i=n(63200),r=n(25964),a=n(97376),l=n.n(a),c=n(66434);const p=(0,r.xE)("collapsible-container");class d extends((0,s.qu)({componentName:p,baseSelector:"slot"})){static get observedAttributes(){return["collapsed","collapsible","text"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n    <div class="wrapper">\n      <descope-text st-host-direction="ltr">\n        <div class="header">\n          <descope-icon st-align-items="center" st-fill="currentcolor" src=${l()}></descope-icon>\n          <span></span>\n        </div>\n      </descope-text>\n      <div class="content">\n        <slot></slot>\n      </div>\n    </div>\n\t`,(0,r.fz)(`\n      div.content {\n        transition-property: max-height;\n        overflow: auto;\n        transition-property: max-height;\n        height: auto;\n\t\t\t}\n\t\t\tslot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n      slot:focus-visible {\n        outline: none;\n      }\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      .header {\n          user-select: none;\n          display: flex;\n          align-items: baseline;\n      }\n      descope-icon {\n          transition-property: transform;\n          flex-shrink: 0;\n          height: var(${c.s.cssVarList.textLineHeight});\n          min-height: 24px;\n      }\n      .rotate {\n          transform: rotate(-180deg);\n      }\n      descope-text {\n        width: 100%;\n        display: flex;\n      }\n      span {\n        align-self: center;\n        word-break: break-word;\n      }\n      span:empty {\n        display: none;\n      }\n      .wrapper {\n        overflow: hidden;\n        display: inline-flex;\n        width: 100%;\n        flex-direction: column;\n      }\n  `,this),this.header=this.shadowRoot.querySelector(".header"),this.content=this.shadowRoot.querySelector("div.content"),this.icon=this.header.querySelector("descope-icon"),this.headerText=this.header.querySelector("span"),this.textComponent=this.shadowRoot.querySelector("descope-text")}get isCollapsible(){return"true"===this.getAttribute("collapsible")}calcContentHeight(){return this.content.offsetHeight||this.content.scrollHeight}get isCollapsed(){return"true"===this.getAttribute("collapsed")}toggle(){this.setAttribute("collapsed",this.isCollapsed?"false":"true")}collapse(t=!1){const e=()=>{this.content.style.maxHeight="0px"};if(this.icon.classList.add("rotate"),!t)return e();this.content.style.maxHeight=this.calcContentHeight()+"px",setTimeout(e)}expand(t=!1){const e=()=>{this.content.style.maxHeight=""};if(this.icon.classList.remove("rotate"),!t)return e();this.content.addEventListener("transitionend",e,{once:!0}),this.content.style.maxHeight=this.calcContentHeight()+"px"}#t=!1;init(){super.init?.(),this.#t=!0,this.header.addEventListener("click",(()=>{this.isCollapsible&&this.toggle()})),(0,r.EA)(this,this.textComponent,{includeAttrs:["text-align","text-variant","text-mode"],mapAttrs:{"text-mode":"mode","text-variant":"variant"}})}updateHeaderText(){const t=this.getAttribute("text")||"";this.headerText.innerText=t}attributeChangedCallback(t,e,n){"text"!==t?this.isCollapsed&&this.isCollapsible?this.collapse(this.#t):this.expand(this.#t):this.updateHeaderText()}}const h={host:()=>":host",icon:()=>"descope-icon",header:()=>".header",text:()=>"span",wrapper:()=>".wrapper",content:()=>"div.content"},u=(0,i.Zz)((0,o.RF)({mappings:{hostWidth:{selector:h.host,property:"width"},hostDirection:{selector:h.host,property:"direction"},verticalPadding:[{selector:h.wrapper,property:"padding-top"},{selector:h.wrapper,property:"padding-bottom"}],horizontalPadding:[{selector:h.wrapper,property:"padding-left"},{selector:h.wrapper,property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:[{},{property:"margin-top"}],backgroundColor:{selector:h.wrapper},backgroundImage:{selector:h.wrapper},backgroundPositionX:{selector:h.wrapper},backgroundPositionY:{selector:h.wrapper},backgroundSize:{selector:h.wrapper},backgroundRepeat:{selector:h.wrapper},borderRadius:{selector:h.wrapper},borderColor:{selector:h.wrapper},borderStyle:{selector:h.wrapper},borderWidth:{selector:h.wrapper},boxShadow:{selector:h.wrapper},headerIconOrder:{selector:h.icon,property:"order"},headerJustifyContent:{selector:h.header,property:"justify-content"},headerCursor:{selector:h.header,property:"cursor"},headerGap:{selector:h.header,property:"gap"},textDirection:{selector:h.text,property:"direction"},iconAnimationDuration:{selector:h.icon,property:"transition-duration"},contentAnimationDuration:{selector:h.content,property:"transition-duration"}}}),o.VO,o.tQ)(d);customElements.define(p,u)},97376:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+IDwvc3ZnPiA="},98538:(t,e,n)=>{"use strict";n.d(e,{S:()=>p,T:()=>l});var o=n(88961),s=n(72270),i=n(63200),r=n(25964),a=n(31004);const l=(0,r.xE)("icon");class c extends((0,s.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#e;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,r.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const p=(0,i.Zz)((0,o.RF)({mappings:{fill:{},alignItems:{}}}),o.VO,o.tQ)(c)}}]);
+(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,6367,6724],{31004:(t,e,n)=>{"use strict";n.d(e,{w:()=>i});var o=n(25414);const s=t=>{const e=o.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},i=async t=>{try{let e;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const n=atob(t.slice(26));e=s(n)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const n=await fetch(t),o=await n.text();e=s(o)}else e=(t=>{const e=document.createElement("img");return e.setAttribute("src",t),e})(t);return e.style.setProperty("max-width","100%"),e.style.setProperty("max-height","100%"),e}catch{return null}}},56737:(t,e,n)=>{"use strict";n.r(e),n.d(e,{IconClass:()=>o.S,componentName:()=>o.T});var o=n(98538);customElements.define(o.T,o.S)},63595:(t,e,n)=>{"use strict";n.r(e),n.d(e,{TextClass:()=>o.s,componentName:()=>o.T});var o=n(66434);customElements.define(o.T,o.s)},66434:(t,e,n)=>{"use strict";n.d(e,{T:()=>a,s:()=>c});var o=n(88961),s=n(63200),i=n(25964),r=n(72270);const a=(0,i.xE)("text");class l extends((0,r.qu)({componentName:a,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <slot part="text-wrapper"></slot>\n    ',(0,i.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,i.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const c=(0,s.Zz)((0,o.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:{}}}),o.VO,o.tQ)(l)},96945:(t,e,n)=>{"use strict";n.r(e),n.d(e,{CollapsibleContainerClass:()=>u,componentName:()=>p}),n(63595),n(56737);var o=n(88961),s=n(72270),i=n(63200),r=n(25964),a=n(97376),l=n.n(a),c=n(66434);const p=(0,r.xE)("collapsible-container");class d extends((0,s.qu)({componentName:p,baseSelector:"slot"})){static get observedAttributes(){return["collapsed","collapsible","text"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n    <div class="wrapper">\n      <descope-text st-host-direction="ltr">\n        <div class="header">\n          <descope-icon st-align-items="center" st-fill="currentcolor" src=${l()}></descope-icon>\n          <span></span>\n        </div>\n      </descope-text>\n      <div class="content">\n        <slot></slot>\n      </div>\n    </div>\n\t`,(0,r.fz)(`\n      div.content {\n        transition-property: max-height;\n        overflow: auto;\n        transition-property: max-height;\n        height: auto;\n\t\t\t}\n\t\t\tslot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n      slot:focus-visible {\n        outline: none;\n      }\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n      .header {\n          user-select: none;\n          display: flex;\n          align-items: baseline;\n      }\n      descope-icon {\n          transition-property: transform;\n          flex-shrink: 0;\n          height: var(${c.s.cssVarList.textLineHeight});\n          min-height: 24px;\n      }\n      .rotate {\n          transform: rotate(-180deg);\n      }\n      descope-text {\n        width: 100%;\n        display: flex;\n      }\n      span {\n        align-self: center;\n        word-break: break-word;\n      }\n      span:empty {\n        display: none;\n      }\n      .wrapper {\n        overflow: hidden;\n        display: inline-flex;\n        width: 100%;\n        flex-direction: column;\n      }\n  `,this),this.header=this.shadowRoot.querySelector(".header"),this.content=this.shadowRoot.querySelector("div.content"),this.icon=this.header.querySelector("descope-icon"),this.headerText=this.header.querySelector("span"),this.textComponent=this.shadowRoot.querySelector("descope-text")}get isCollapsible(){return"true"===this.getAttribute("collapsible")}calcContentHeight(){return this.content.offsetHeight||this.content.scrollHeight}get isCollapsed(){return"true"===this.getAttribute("collapsed")}toggle(){this.setAttribute("collapsed",this.isCollapsed?"false":"true")}collapse(t=!1){const e=()=>{this.content.style.maxHeight="0px"};if(this.icon.classList.add("rotate"),!t)return e();this.content.style.maxHeight=this.calcContentHeight()+"px",setTimeout(e)}expand(t=!1){const e=()=>{this.content.style.maxHeight=""};if(this.icon.classList.remove("rotate"),!t)return e();this.content.addEventListener("transitionend",e,{once:!0}),this.content.style.maxHeight=this.calcContentHeight()+"px"}#t=!1;init(){super.init?.(),this.#t=!0,this.header.addEventListener("click",(()=>{this.isCollapsible&&this.toggle()})),(0,r.EA)(this,this.textComponent,{includeAttrs:["text-align","text-variant","text-mode"],mapAttrs:{"text-mode":"mode","text-variant":"variant"}})}updateHeaderText(){const t=this.getAttribute("text")||"";this.headerText.innerText=t}attributeChangedCallback(t,e,n){"text"!==t?this.isCollapsed&&this.isCollapsible?this.collapse(this.#t):this.expand(this.#t):this.updateHeaderText()}}const h={host:()=>":host",icon:()=>"descope-icon",header:()=>".header",text:()=>"span",wrapper:()=>".wrapper",content:()=>"div.content"},u=(0,i.Zz)((0,o.RF)({mappings:{hostWidth:{selector:h.host,property:"width"},hostDirection:{selector:h.host,property:"direction"},verticalPadding:[{selector:h.wrapper,property:"padding-top"},{selector:h.wrapper,property:"padding-bottom"}],horizontalPadding:[{selector:h.wrapper,property:"padding-left"},{selector:h.wrapper,property:"padding-right"}],flexDirection:{},justifyContent:{},alignItems:{},gap:[{},{property:"margin-top"}],backgroundColor:{selector:h.wrapper},backgroundImage:{selector:h.wrapper},backgroundPositionX:{selector:h.wrapper},backgroundPositionY:{selector:h.wrapper},backgroundSize:{selector:h.wrapper},backgroundRepeat:{selector:h.wrapper},borderRadius:{selector:h.wrapper},borderColor:{selector:h.wrapper},borderStyle:{selector:h.wrapper},borderWidth:{selector:h.wrapper},boxShadow:{selector:h.wrapper},headerIconOrder:{selector:h.icon,property:"order"},headerCursor:{selector:h.header,property:"cursor"},headerGap:{selector:h.header,property:"gap"},textGrow:{selector:h.text,property:"flex-grow"},textDirection:{selector:h.text,property:"direction"},iconAnimationDuration:{selector:h.icon,property:"transition-duration"},contentAnimationDuration:{selector:h.content,property:"transition-duration"}}}),o.VO,o.tQ)(d);customElements.define(p,u)},97376:t=>{t.exports="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+IDwvc3ZnPiA="},98538:(t,e,n)=>{"use strict";n.d(e,{S:()=>p,T:()=>l});var o=n(88961),s=n(72270),i=n(63200),r=n(25964),a=n(31004);const l=(0,r.xE)("icon");class c extends((0,s.qu)({componentName:l,baseSelector:"slot"})){static get observedAttributes(){return["src"]}#e;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,r.fz)("\n\t\t\t:host > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n  ",this)}init(){super.init?.(),this.toggleVisibility(this.src)}toggleVisibility(t){this.style.display=t?"":"none"}get src(){return this.getAttribute("src")}updateFillColor(t){[t,...t.querySelectorAll("*[fill]")].forEach((t=>{t.setAttribute("fill",`var(${p.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&"src"===t&&(this.toggleVisibility(n),(0,a.w)(this.src).then((t=>{if(this.innerHTML="",t){const e=t.cloneNode(!0);this.updateFillColor(e),this.appendChild(e)}})))}}const p=(0,i.Zz)((0,o.RF)({mappings:{fill:{},alignItems:{}}}),o.VO,o.tQ)(c)}}]);
 //# sourceMappingURL=descope-collapsible-container.js.map

package/dist/umd/descope-collapsible-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"descope-collapsible-container.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","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-collapsible-container/src/component/CollapsibleContainerClass.js","webpack://@descope/web-components-ui/../components/descope-collapsible-container/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-collapsible-container/src/component/chevron.svg","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) => {\n const ele = document.createElement('img');\n ele.setAttribute('src', src);\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, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n const parser = new DOMParser();\n const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n return ele;\n};\n\nexport const createIcon = async (src) => {\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);\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, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","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\nexport const TextClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDirection: { selector: () => ':host', property: 'direction' },\n fontSize: {},\n textColor: { property: 'color' },\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 { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n forwardAttrs,\n getComponentName,\n injectStyle\n} from '@descope-ui/common/components-helpers';\nimport chevronIcon from './chevron.svg';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('collapsible-container');\n\nclass RawCollapsibleContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n static get observedAttributes() {\n return ['collapsed', 'collapsible', 'text'];\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <div class=\"wrapper\">\n <descope-text st-host-direction=\"ltr\">\n <div class=\"header\">\n <descope-icon st-align-items=\"center\" st-fill=\"currentcolor\" src=${chevronIcon}></descope-icon>\n <span></span>\n </div>\n </descope-text>\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n\t`;\n\n injectStyle(\n `\n div.content {\n transition-property: max-height;\n overflow: auto;\n transition-property: max-height;\n height: auto;\n\t\t\t}\n\t\t\tslot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n slot:focus-visible {\n outline: none;\n }\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n .header {\n user-select: none;\n display: flex;\n align-items: baseline;\n }\n descope-icon {\n transition-property: transform;\n flex-shrink: 0;\n height: var(${TextClass.cssVarList.textLineHeight});\n min-height: 24px;\n }\n .rotate {\n transform: rotate(-180deg);\n }\n descope-text {\n width: 100%;\n display: flex;\n }\n span {\n align-self: center;\n word-break: break-word;\n }\n span:empty {\n display: none;\n }\n .wrapper {\n overflow: hidden;\n display: inline-flex;\n width: 100%;\n flex-direction: column;\n }\n `,\n this\n );\n\n this.header = this.shadowRoot.querySelector('.header');\n this.content = this.shadowRoot.querySelector('div.content');\n this.icon = this.header.querySelector('descope-icon')\n this.headerText = this.header.querySelector('span');\n this.textComponent = this.shadowRoot.querySelector('descope-text');\n }\n\n get isCollapsible() {\n return this.getAttribute('collapsible') === 'true'\n }\n\n calcContentHeight() {\n return this.content.offsetHeight \|\| this.content.scrollHeight;\n }\n\n get isCollapsed() {\n return this.getAttribute('collapsed') === 'true';\n }\n\n toggle() {\n this.setAttribute('collapsed', this.isCollapsed ? 'false' : 'true');\n }\n\n collapse(animated = false) {\n const final = () => {\n this.content.style.maxHeight = '0px'\n }\n this.icon.classList.add('rotate');\n if (!animated) return final();\n\n this.content.style.maxHeight = this.calcContentHeight() + 'px';\n setTimeout(final);\n }\n\n expand(animated = false) {\n const final = () => {\n this.content.style.maxHeight = '';\n }\n this.icon.classList.remove('rotate');\n if (!animated) return final();\n\n this.content.addEventListener('transitionend', final, { once: true });\n this.content.style.maxHeight = this.calcContentHeight() + 'px';\n }\n\n #isComponentMounted = false;\n\n init() {\n super.init?.();\n // we want to animate the collapse/expand only after the first time the component is connected\n // so when setting a default value for the collapsed attribute, it will not animate\n this.#isComponentMounted = true;\n\n this.header.addEventListener('click', () => {\n if (!this.isCollapsible) return;\n this.toggle()\n });\n forwardAttrs(this, this.textComponent, {\n includeAttrs: ['text-align', 'text-variant', 'text-mode'],\n mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' }\n });\n }\n\n updateHeaderText() {\n const text = this.getAttribute('text') \|\| '';\n this.headerText.innerText = text;\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'text') {\n this.updateHeaderText();\n return\n }\n const collapsed = this.isCollapsed && this.isCollapsible;\n if (collapsed) {\n this.collapse(this.#isComponentMounted);\n } else {\n this.expand(this.#isComponentMounted);\n }\n }\n}\n\nconst selectors = {\n host: () => ':host',\n icon: () => 'descope-icon',\n header: () => '.header',\n text: () => 'span',\n wrapper: () => '.wrapper',\n content: () => 'div.content',\n}\n\nexport const CollapsibleContainerClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: selectors.host, property: 'width' },\n hostDirection: { selector: selectors.host, property: 'direction' },\n verticalPadding: [{ selector: selectors.wrapper, property: 'padding-top' }, { selector: selectors.wrapper, property: 'padding-bottom' }],\n horizontalPadding: [{ selector: selectors.wrapper, property: 'padding-left' }, { selector: selectors.wrapper, property: 'padding-right' }],\n\n flexDirection: {},\n justifyContent: {},\n alignItems: {},\n gap: [{}, { property: 'margin-top' }],\n\n backgroundColor: { selector: selectors.wrapper },\n backgroundImage: { selector: selectors.wrapper },\n backgroundPositionX: { selector: selectors.wrapper },\n backgroundPositionY: { selector: selectors.wrapper },\n backgroundSize: { selector: selectors.wrapper },\n backgroundRepeat: { selector: selectors.wrapper },\n\n borderRadius: { selector: selectors.wrapper },\n borderColor: { selector: selectors.wrapper },\n borderStyle: { selector: selectors.wrapper },\n borderWidth: { selector: selectors.wrapper },\n\n boxShadow: { selector: selectors.wrapper },\n\n headerIconOrder: { selector: selectors.icon, property: 'order' },\n headerJustifyContent: { selector: selectors.header, property: 'justify-content' },\n headerCursor: { selector: selectors.header, property: 'cursor' },\n headerGap: { selector: selectors.header, property: 'gap' },\n textDirection: { selector: selectors.text, property: 'direction' },\n iconAnimationDuration: { selector: selectors.icon, property: 'transition-duration' },\n contentAnimationDuration: { selector: selectors.content, property: 'transition-duration' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawCollapsibleContainer);\n","import '@descope-ui/descope-text'\nimport '@descope-ui/descope-icon'\nimport { componentName, CollapsibleContainerClass } from './CollapsibleContainerClass';\n\ncustomElements.define(componentName, CollapsibleContainerClass);\n\nexport { CollapsibleContainerClass, componentName };\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+IDwvc3ZnPiA=\"","/* eslint-disable no-use-before-define /\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } 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 { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n static get observedAttributes() {\n return ['src'];\n }\n\n #icon;\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 > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n `,\n this\n );\n }\n\n init() {\n super.init?.();\n this.toggleVisibility(this.src);\n }\n\n toggleVisibility(isVisible) {\n this.style.display = isVisible ? '' : 'none';\n }\n\n get src() {\n return this.getAttribute('src');\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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') \|\| \"''\"})`\n );\n });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (oldValue === newValue) return;\n\n if (attrName === 'src') {\n this.toggleVisibility(newValue);\n\n createIcon(this.src).then((res) => {\n this.innerHTML = '';\n if (res) {\n const clonedNode = res.cloneNode(true);\n this.updateFillColor(clonedNode);\n this.appendChild(clonedNode);\n }\n });\n }\n }\n}\n\nexport const IconClass = compose(\n createStyleMixin({\n mappings: {\n fill: {},\n alignItems: {}\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawIcon);\n"],"names":["createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","setAttribute","createImgEle","style","setProperty","customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","display","TextClass","mappings","hostWidth","selector","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawCollapsibleContainer","observedAttributes","cssVarList","header","shadowRoot","content","icon","headerText","textComponent","isCollapsible","calcContentHeight","offsetHeight","scrollHeight","isCollapsed","toggle","collapse","animated","final","maxHeight","classList","add","setTimeout","expand","remove","addEventListener","once","includeAttrs","mapAttrs","updateHeaderText","innerText","attributeChangedCallback","name","oldValue","newValue","selectors","host","wrapper","CollapsibleContainerClass","verticalPadding","horizontalPadding","flexDirection","justifyContent","alignItems","gap","backgroundColor","backgroundImage","backgroundPositionX","backgroundPositionY","backgroundSize","backgroundRepeat","borderRadius","boxShadow","headerIconOrder","headerJustifyContent","headerCursor","headerGap","textDirection","iconAnimationDuration","contentAnimationDuration","module","exports","RawIcon","toggleVisibility","isVisible","updateFillColor","node","querySelectorAll","forEach","IconClass","fill","attrName","then","res","clonedNode","cloneNode","appendChild"],"sourceRoot":""}
1	+ {"version":3,"file":"descope-collapsible-container.js","mappings":"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","sources":["webpack://@descope/web-components-ui/../components/descope-icon/src/component/helpers.js","webpack://@descope/web-components-ui/../components/descope-icon/src/component/index.js","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-collapsible-container/src/component/CollapsibleContainerClass.js","webpack://@descope/web-components-ui/../components/descope-collapsible-container/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-collapsible-container/src/component/chevron.svg","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) => {\n const ele = document.createElement('img');\n ele.setAttribute('src', src);\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, { USE_PROFILES: { svg: true, svgFilters: true } });\n\n const parser = new DOMParser();\n const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');\n return ele;\n};\n\nexport const createIcon = async (src) => {\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);\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, IconClass } from './IconClass';\n\ncustomElements.define(componentName, IconClass);\n\nexport { IconClass, componentName };\n","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\nexport const TextClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDirection: { selector: () => ':host', property: 'direction' },\n fontSize: {},\n textColor: { property: 'color' },\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 { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n forwardAttrs,\n getComponentName,\n injectStyle\n} from '@descope-ui/common/components-helpers';\nimport chevronIcon from './chevron.svg';\nimport { TextClass } from '@descope-ui/descope-text/class';\n\nexport const componentName = getComponentName('collapsible-container');\n\nclass RawCollapsibleContainer extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n static get observedAttributes() {\n return ['collapsed', 'collapsible', 'text'];\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <div class=\"wrapper\">\n <descope-text st-host-direction=\"ltr\">\n <div class=\"header\">\n <descope-icon st-align-items=\"center\" st-fill=\"currentcolor\" src=${chevronIcon}></descope-icon>\n <span></span>\n </div>\n </descope-text>\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n\t`;\n\n injectStyle(\n `\n div.content {\n transition-property: max-height;\n overflow: auto;\n transition-property: max-height;\n height: auto;\n\t\t\t}\n\t\t\tslot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n slot:focus-visible {\n outline: none;\n }\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n .header {\n user-select: none;\n display: flex;\n align-items: baseline;\n }\n descope-icon {\n transition-property: transform;\n flex-shrink: 0;\n height: var(${TextClass.cssVarList.textLineHeight});\n min-height: 24px;\n }\n .rotate {\n transform: rotate(-180deg);\n }\n descope-text {\n width: 100%;\n display: flex;\n }\n span {\n align-self: center;\n word-break: break-word;\n }\n span:empty {\n display: none;\n }\n .wrapper {\n overflow: hidden;\n display: inline-flex;\n width: 100%;\n flex-direction: column;\n }\n `,\n this\n );\n\n this.header = this.shadowRoot.querySelector('.header');\n this.content = this.shadowRoot.querySelector('div.content');\n this.icon = this.header.querySelector('descope-icon')\n this.headerText = this.header.querySelector('span');\n this.textComponent = this.shadowRoot.querySelector('descope-text');\n }\n\n get isCollapsible() {\n return this.getAttribute('collapsible') === 'true'\n }\n\n calcContentHeight() {\n return this.content.offsetHeight \|\| this.content.scrollHeight;\n }\n\n get isCollapsed() {\n return this.getAttribute('collapsed') === 'true';\n }\n\n toggle() {\n this.setAttribute('collapsed', this.isCollapsed ? 'false' : 'true');\n }\n\n collapse(animated = false) {\n const final = () => {\n this.content.style.maxHeight = '0px'\n }\n this.icon.classList.add('rotate');\n if (!animated) return final();\n\n this.content.style.maxHeight = this.calcContentHeight() + 'px';\n setTimeout(final);\n }\n\n expand(animated = false) {\n const final = () => {\n this.content.style.maxHeight = '';\n }\n this.icon.classList.remove('rotate');\n if (!animated) return final();\n\n this.content.addEventListener('transitionend', final, { once: true });\n this.content.style.maxHeight = this.calcContentHeight() + 'px';\n }\n\n #isComponentMounted = false;\n\n init() {\n super.init?.();\n // we want to animate the collapse/expand only after the first time the component is connected\n // so when setting a default value for the collapsed attribute, it will not animate\n this.#isComponentMounted = true;\n\n this.header.addEventListener('click', () => {\n if (!this.isCollapsible) return;\n this.toggle()\n });\n forwardAttrs(this, this.textComponent, {\n includeAttrs: ['text-align', 'text-variant', 'text-mode'],\n mapAttrs: { 'text-mode': 'mode', 'text-variant': 'variant' }\n });\n }\n\n updateHeaderText() {\n const text = this.getAttribute('text') \|\| '';\n this.headerText.innerText = text;\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'text') {\n this.updateHeaderText();\n return\n }\n const collapsed = this.isCollapsed && this.isCollapsible;\n if (collapsed) {\n this.collapse(this.#isComponentMounted);\n } else {\n this.expand(this.#isComponentMounted);\n }\n }\n}\n\nconst selectors = {\n host: () => ':host',\n icon: () => 'descope-icon',\n header: () => '.header',\n text: () => 'span',\n wrapper: () => '.wrapper',\n content: () => 'div.content',\n}\n\nexport const CollapsibleContainerClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: selectors.host, property: 'width' },\n hostDirection: { selector: selectors.host, property: 'direction' },\n verticalPadding: [{ selector: selectors.wrapper, property: 'padding-top' }, { selector: selectors.wrapper, property: 'padding-bottom' }],\n horizontalPadding: [{ selector: selectors.wrapper, property: 'padding-left' }, { selector: selectors.wrapper, property: 'padding-right' }],\n\n flexDirection: {},\n justifyContent: {},\n alignItems: {},\n gap: [{}, { property: 'margin-top' }],\n\n backgroundColor: { selector: selectors.wrapper },\n backgroundImage: { selector: selectors.wrapper },\n backgroundPositionX: { selector: selectors.wrapper },\n backgroundPositionY: { selector: selectors.wrapper },\n backgroundSize: { selector: selectors.wrapper },\n backgroundRepeat: { selector: selectors.wrapper },\n\n borderRadius: { selector: selectors.wrapper },\n borderColor: { selector: selectors.wrapper },\n borderStyle: { selector: selectors.wrapper },\n borderWidth: { selector: selectors.wrapper },\n\n boxShadow: { selector: selectors.wrapper },\n\n headerIconOrder: { selector: selectors.icon, property: 'order' },\n headerCursor: { selector: selectors.header, property: 'cursor' },\n headerGap: { selector: selectors.header, property: 'gap' },\n textGrow: { selector: selectors.text, property: 'flex-grow' },\n textDirection: { selector: selectors.text, property: 'direction' },\n iconAnimationDuration: { selector: selectors.icon, property: 'transition-duration' },\n contentAnimationDuration: { selector: selectors.content, property: 'transition-duration' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawCollapsibleContainer);\n","import '@descope-ui/descope-text'\nimport '@descope-ui/descope-icon'\nimport { componentName, CollapsibleContainerClass } from './CollapsibleContainerClass';\n\ncustomElements.define(componentName, CollapsibleContainerClass);\n\nexport { CollapsibleContainerClass, componentName };\n","module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0xNy4yMTkzIDkuMjcyODNDMTcuNjU4NCA4Ljg3OTEyIDE4LjMzMzQgOC45MTU4NyAxOC43MjcyIDkuMzU0OTJDMTkuMTIwOSA5Ljc5Mzk3IDE5LjA4NDEgMTAuNDY5MSAxOC42NDUxIDEwLjg2MjhDMTguNjQ1MSAxMC44NjI4IDEzLjA0NTcgMTYuMDAyMiAxMi42NCAxNi4zNjZDMTIuMjM0MyAxNi43Mjk4IDExLjc2MDggMTYuNzI5OCAxMS4zNTUyIDE2LjM2Nkw1LjM1NDkyIDEwLjg2MjhDNC45MTU4NyAxMC40NjkxIDQuODc5MTIgOS43OTM5NyA1LjI3MjgzIDkuMzU0OTJDNS42NjY1NSA4LjkxNTg3IDYuMzQxNjQgOC44NzkxMiA2Ljc4MDY5IDkuMjcyODNMMTIgMTQuMTM2OEwxNy4yMTkzIDkuMjcyODNaIi8+IDwvc3ZnPiA=\"","/* eslint-disable no-use-before-define /\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } 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 { createIcon } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('icon');\n\nclass RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {\n static get observedAttributes() {\n return ['src'];\n }\n\n #icon;\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 > slot {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n `,\n this\n );\n }\n\n init() {\n super.init?.();\n this.toggleVisibility(this.src);\n }\n\n toggleVisibility(isVisible) {\n this.style.display = isVisible ? '' : 'none';\n }\n\n get src() {\n return this.getAttribute('src');\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(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') \|\| \"''\"})`\n );\n });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (oldValue === newValue) return;\n\n if (attrName === 'src') {\n this.toggleVisibility(newValue);\n\n createIcon(this.src).then((res) => {\n this.innerHTML = '';\n if (res) {\n const clonedNode = res.cloneNode(true);\n this.updateFillColor(clonedNode);\n this.appendChild(clonedNode);\n }\n });\n }\n }\n}\n\nexport const IconClass = compose(\n createStyleMixin({\n mappings: {\n fill: {},\n alignItems: {}\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawIcon);\n"],"names":["createSvgEle","text","clean","sanitize","USE_PROFILES","svg","svgFilters","DOMParser","parseFromString","querySelector","createIcon","async","src","ele","startsWith","isBase64Svg","svgXml","atob","slice","base64Prefix","path","match","getFileExtension","fetchedSrc","fetch","document","createElement","setAttribute","createImgEle","style","setProperty","customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","display","TextClass","mappings","hostWidth","selector","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawCollapsibleContainer","observedAttributes","cssVarList","header","shadowRoot","content","icon","headerText","textComponent","isCollapsible","calcContentHeight","offsetHeight","scrollHeight","isCollapsed","toggle","collapse","animated","final","maxHeight","classList","add","setTimeout","expand","remove","addEventListener","once","includeAttrs","mapAttrs","updateHeaderText","innerText","attributeChangedCallback","name","oldValue","newValue","selectors","host","wrapper","CollapsibleContainerClass","verticalPadding","horizontalPadding","flexDirection","justifyContent","alignItems","gap","backgroundColor","backgroundImage","backgroundPositionX","backgroundPositionY","backgroundSize","backgroundRepeat","borderRadius","boxShadow","headerIconOrder","headerCursor","headerGap","textGrow","textDirection","iconAnimationDuration","contentAnimationDuration","module","exports","RawIcon","toggleVisibility","isVisible","updateFillColor","node","querySelectorAll","forEach","IconClass","fill","attrName","then","res","clonedNode","cloneNode","appendChild"],"sourceRoot":""}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.69.0",
+  "version": "1.71.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -87,7 +87,7 @@
     "@descope-ui/descope-timer": "0.0.4",
     "@descope-ui/descope-timer-button": "0.0.6",
     "@descope-ui/descope-password-strength": "0.0.2",
-    "@descope-ui/descope-collapsible-container": "0.0.4"
+    "@descope-ui/descope-collapsible-container": "0.0.5"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",