@descope/web-components-ui 1.94.0 → 1.96.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 (22) hide show
  1. package/dist/cjs/index.cjs.js +5 -1
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +5 -1
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/DescopeDev.js +1 -1
  6. package/dist/umd/DescopeDev.js.map +1 -1
  7. package/dist/umd/descope-collapsible-container.js +1 -1
  8. package/dist/umd/descope-collapsible-container.js.map +1 -1
  9. package/dist/umd/descope-date-field-index-js.js +1 -1
  10. package/dist/umd/descope-date-field-index-js.js.map +1 -1
  11. package/dist/umd/descope-icon.js +1 -1
  12. package/dist/umd/descope-icon.js.map +1 -1
  13. package/dist/umd/descope-image.js +1 -1
  14. package/dist/umd/descope-image.js.map +1 -1
  15. package/dist/umd/descope-third-party-app-logo-index-js.js +1 -1
  16. package/dist/umd/descope-third-party-app-logo-index-js.js.map +1 -1
  17. package/dist/umd/descope-timer-button.js +1 -1
  18. package/dist/umd/descope-timer-button.js.map +1 -1
  19. package/dist/umd/descope-timer.js +1 -1
  20. package/dist/umd/descope-timer.js.map +1 -1
  21. package/package.json +7 -7
  22. package/src/components/descope-date-field/DateFieldClass.js +1 -1
package/dist/umd/descope-collapsible-container.js CHANGED
@@ -1,2 +1,2 @@
1
- (self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202,2294,6367,6724],{6301:(t,e,n)=>{"use strict";n.r(e),n.d(e,{ImageClass:()=>h,componentName:()=>c});var s=n(88961),r=n(72270),i=n(63200),o=n(25964),a=n(25414);const l=t=>{const e=a.A.sanitize(t,{USE_PROFILES:{svg:!0,svgFilters:!0}});return(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg")},c=(0,o.xE)("image"),p=["src","src-dark"];class d extends((0,r.qu)({componentName:c,baseSelector:"slot"})){static get observedAttributes(){return p}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,o.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(${h.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}renderImage(){this.toggleVisibility(this.src),(async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=l(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),s=await e.text();n=l(s)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}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,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const h=(0,i.Zz)((0,s.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),s.VO,s.tQ)(d);customElements.define(c,h)},56737:(t,e,n)=>{"use strict";n.r(e),n.d(e,{IconClass:()=>s.S,componentName:()=>s.T}),n(6301);var s=n(98538);customElements.define(s.T,s.S)},63595:(t,e,n)=>{"use strict";n.r(e),n.d(e,{TextClass:()=>s.s,componentName:()=>s.T});var s=n(66434);customElements.define(s.T,s.s)},66434:(t,e,n)=>{"use strict";n.d(e,{T:()=>a,s:()=>c});var s=n(88961),r=n(63200),i=n(25964),o=n(72270);const a=(0,i.xE)("text");class l extends((0,o.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,r.Zz)((0,s.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:{}}}),s.VO,s.tQ)(l)},96945:(t,e,n)=>{"use strict";n.r(e),n.d(e,{CollapsibleContainerClass:()=>u,componentName:()=>p}),n(63595),n(56737);var s=n(88961),r=n(72270),i=n(63200),o=n(25964),a=n(97376),l=n.n(a),c=n(66434);const p=(0,o.xE)("collapsible-container");class d extends((0,r.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 <div class="icon">\n <descope-icon st-fill="currentcolor" src=${l()}></descope-icon>\n </div>\n <span></span>\n </div>\n </descope-text>\n <div class="content">\n <slot></slot>\n </div>\n </div>\n\t`,(0,o.fz)(`\n div.content {\n transition-property: max-height;\n overflow: auto;\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 .icon {\n flex-shrink: 0;\n height: var(${c.s.cssVarList.textLineHeight});\n min-height: 24px;\n display: flex;\n align-items: center;\n }\n descope-icon {\n transition-property: transform;\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,o.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",iconWrapper:()=>".icon",header:()=>".header",text:()=>"span",wrapper:()=>".wrapper",content:()=>"div.content"},u=(0,i.Zz)((0,s.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.iconWrapper,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"}}}),s.VO,s.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:()=>a,T:()=>o});var s=n(88961),r=n(25964),i=n(63200);const o=(0,r.xE)("icon"),a=(0,i.Zz)((0,s.RF)({mappings:{fill:{}}}),s.VO,s.tQ)((0,s.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n :host {\n display: inline-flex;\n }\n ",excludeAttrsSync:["tabindex","class"],componentName:o}))}}]);
1
+ (self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[1202,2294,6367,6724],{6301:(t,e,n)=>{"use strict";n.r(e),n.d(e,{ImageClass:()=>h,componentName:()=>c});var s=n(88961),i=n(72270),r=n(63200),o=n(25964),a=n(25414);const l=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,o.xE)("image"),p=["src","src-dark"];class d extends((0,i.qu)({componentName:c,baseSelector:"slot"})){static get observedAttributes(){return p}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<slot></slot>\n\t",(0,o.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(${h.cssVarList.fill}, ${t.getAttribute("fill")||"''"})`)}))}renderImage(){this.toggleVisibility(this.src),(async(t,e)=>{try{let n;if((t=>t.startsWith("data:image/svg+xml;base64,"))(t)){const e=atob(t.slice(26));n=l(e)}else if("svg"===(t=>{const e=t.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);return e?e[1]:null})(t)){const e=await fetch(t),s=await e.text();n=l(s)}else n=((t,e)=>{const n=document.createElement("img");return n.setAttribute("src",t),n.setAttribute("alt",e),n})(t,e);return n.style.setProperty("max-width","100%"),n.style.setProperty("max-height","100%"),n}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,n){super.attributeChangedCallback?.(t,e,n),e!==n&&this.shouldRender(t)&&this.renderImage()}}const h=(0,r.Zz)((0,s.RF)({mappings:{fill:{},height:{selector:()=>":host"},width:{selector:()=>":host"}}}),s.VO,s.tQ)(d);customElements.define(c,h)},56737:(t,e,n)=>{"use strict";n.r(e),n.d(e,{IconClass:()=>s.S,componentName:()=>s.T}),n(6301);var s=n(98538);customElements.define(s.T,s.S)},63595:(t,e,n)=>{"use strict";n.r(e),n.d(e,{TextClass:()=>s.s,componentName:()=>s.T});var s=n(66434);customElements.define(s.T,s.s)},66434:(t,e,n)=>{"use strict";n.d(e,{T:()=>a,s:()=>c});var s=n(88961),i=n(63200),r=n(25964),o=n(72270);const a=(0,r.xE)("text");class l extends((0,o.qu)({componentName:a,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 c=(0,i.Zz)((0,s.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:{}}}),s.VO,s.tQ)(l)},96945:(t,e,n)=>{"use strict";n.r(e),n.d(e,{CollapsibleContainerClass:()=>u,componentName:()=>p}),n(63595),n(56737);var s=n(88961),i=n(72270),r=n(63200),o=n(25964),a=n(97376),l=n.n(a),c=n(66434);const p=(0,o.xE)("collapsible-container");class d extends((0,i.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 <div class="icon">\n <descope-icon st-fill="currentcolor" src=${l()}></descope-icon>\n </div>\n <span></span>\n </div>\n </descope-text>\n <div class="content">\n <slot></slot>\n </div>\n </div>\n\t`,(0,o.fz)(`\n div.content {\n transition-property: max-height;\n overflow: auto;\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 .icon {\n flex-shrink: 0;\n height: var(${c.s.cssVarList.textLineHeight});\n min-height: 24px;\n display: flex;\n align-items: center;\n }\n descope-icon {\n transition-property: transform;\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,o.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",iconWrapper:()=>".icon",header:()=>".header",text:()=>"span",wrapper:()=>".wrapper",content:()=>"div.content"},u=(0,r.Zz)((0,s.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.iconWrapper,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"}}}),s.VO,s.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:()=>a,T:()=>o});var s=n(88961),i=n(25964),r=n(63200);const o=(0,i.xE)("icon"),a=(0,r.Zz)((0,s.RF)({mappings:{fill:{}}}),s.VO,s.tQ)((0,s.tz)({slots:[],wrappedEleName:"descope-image",style:()=>"\n :host {\n display: inline-flex;\n }\n ",excludeAttrsSync:["tabindex","class"],componentName:o}))}}]);
2
2
  //# sourceMappingURL=descope-collapsible-container.js.map
package/dist/umd/descope-collapsible-container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"descope-collapsible-container.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-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, 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 });\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 { 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 {\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 {\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({\n componentName,\n baseSelector: 'slot',\n}) {\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 <div class=\"icon\">\n <descope-icon st-fill=\"currentcolor\" src=${chevronIcon}></descope-icon>\n </div>\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 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 .icon {\n flex-shrink: 0;\n height: var(${TextClass.cssVarList.textLineHeight});\n min-height: 24px;\n display: flex;\n align-items: center;\n }\n descope-icon {\n transition-property: transform;\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 iconWrapper: () => '.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: [\n { selector: selectors.wrapper, property: 'padding-top' },\n { selector: selectors.wrapper, property: 'padding-bottom' },\n ],\n horizontalPadding: [\n { selector: selectors.wrapper, property: 'padding-left' },\n { selector: selectors.wrapper, property: 'padding-right' },\n ],\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.iconWrapper, 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: {\n selector: selectors.icon,\n property: 'transition-duration',\n },\n contentAnimationDuration: {\n selector: selectors.content,\n property: 'transition-duration',\n },\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=\"","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","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","RawText","hideWhenEmpty","hasChildren","childNodes","length","display","TextClass","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawCollapsibleContainer","header","shadowRoot","content","icon","headerText","textComponent","isCollapsible","calcContentHeight","offsetHeight","scrollHeight","isCollapsed","toggle","collapse","animated","final","maxHeight","setTimeout","expand","addEventListener","once","includeAttrs","mapAttrs","updateHeaderText","innerText","name","selectors","host","iconWrapper","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","IconClass","slots","wrappedEleName","excludeAttrsSync"],"sourceRoot":""}
1
+ {"version":3,"file":"descope-collapsible-container.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-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, 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 { 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 {\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 {\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({\n componentName,\n baseSelector: 'slot',\n}) {\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 <div class=\"icon\">\n <descope-icon st-fill=\"currentcolor\" src=${chevronIcon}></descope-icon>\n </div>\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 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 .icon {\n flex-shrink: 0;\n height: var(${TextClass.cssVarList.textLineHeight});\n min-height: 24px;\n display: flex;\n align-items: center;\n }\n descope-icon {\n transition-property: transform;\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 iconWrapper: () => '.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: [\n { selector: selectors.wrapper, property: 'padding-top' },\n { selector: selectors.wrapper, property: 'padding-bottom' },\n ],\n horizontalPadding: [\n { selector: selectors.wrapper, property: 'padding-left' },\n { selector: selectors.wrapper, property: 'padding-right' },\n ],\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.iconWrapper, 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: {\n selector: selectors.icon,\n property: 'transition-duration',\n },\n contentAnimationDuration: {\n selector: selectors.content,\n property: 'transition-duration',\n },\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=\"","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","RawText","hideWhenEmpty","hasChildren","childNodes","length","display","TextClass","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawCollapsibleContainer","header","shadowRoot","content","icon","headerText","textComponent","isCollapsible","calcContentHeight","offsetHeight","scrollHeight","isCollapsed","toggle","collapse","animated","final","maxHeight","setTimeout","expand","addEventListener","once","includeAttrs","mapAttrs","updateHeaderText","innerText","name","selectors","host","iconWrapper","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","IconClass","slots","wrappedEleName","excludeAttrsSync"],"sourceRoot":""}
package/dist/umd/descope-date-field-index-js.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9257],{6424:(e,t,r)=>{r.d(t,{A:()=>C});const{host:i,label:n,placeholder:o,requiredIndicator:s,inputField:a,input:l,inputMask:p,helperText:d,errorMessage:h,disabledPlaceholder:c,inputDisabled:u,inputIcon:g,externalInput:y,externalInputDisabled:m,externalPlaceholder:v,externalDisabledPlaceholder:b}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},C={fontSize:[{},i],fontFamily:[n,a,d,h],labelFontSize:{...n,property:"font-size"},labelFontWeight:{...n,property:"font-weight"},labelTextColor:[{...n,property:"color"},{...s,property:"color"},{...n,property:"-webkit-text-fill-color"},{...s,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputDirection:{...l,property:"direction"},inputBackgroundColor:[{...a,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...h,property:"color"},errorMessageIcon:{...h,property:"background-image"},errorMessageIconSize:{...h,property:"background-size"},errorMessageIconPadding:{...h,property:"padding-inline-start"},errorMessageIconRepeat:{...h,property:"background-repeat"},errorMessageIconPosition:{...h,property:"background-position"},errorMessageFontSize:{...h,property:"font-size"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...u,property:"-webkit-text-fill-color"},{...m,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...s,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},textAlign:{},inputTextAlign:[{...l,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...v,property:"color"},{...o,property:"color"},{...c,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],labelPosition:{...n,property:"position"},labelTopPosition:{...n,property:"top"},labelHorizontalPosition:[{...n,property:"left"},{...n,property:"right"}],inputTransformY:{...n,property:"transform"},inputTransition:{...n,property:"transition"},marginInlineStart:{...n,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...v,property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...l,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"},{...y,property:"margin-bottom"}],inputIconOffset:[{...g,property:"margin-right"},{...g,property:"margin-left"}],inputIconSize:{...g,property:"font-size"},inputIconColor:{...g,property:"color"}}},21374:(e,t,r)=>{r.r(t),r.d(t,{TextFieldClass:()=>i.w,componentName:()=>i.T}),r(11284),r(37182),r(95260);var i=r(79275);customElements.define(i.T,i.w)},64609:(e,t,r)=>{r.r(t),r.d(t,{DateFieldClass:()=>S,componentName:()=>m}),r(45992),r(88350),r(21374);var i=r(3393),n=r(79365),o=r(97810),s=r(9696),a=r(49224),l=r(64101);const p={MM:"(0?[1-9]|1[0-2])",DD:"(0?[1-9]|[12][0-9]|3[01])",YYYY:"([0-9]{4})"},d=e=>{const t=(e=>`^${e.split(l.eT).map((e=>p[e])).join("\\D")}$`)(e),r=(e=>{const t=e.split(l.eT);return e=>{const r={};return t.forEach(((t,i)=>{r[t]=e[i+1]})),[r.YYYY,r.MM,r.DD]}})(e),i=new RegExp(t);return{pattern:t,validate:e=>i.test(e),getDate:e=>((e,t,r)=>{const i=t.exec(e);if(!i)return null;const[n,o,s]=r(i);return(0,a.Nq)([n,o,s].join(l.eT))})(e,i,r)}},h=Object.fromEntries(l.SP.map((e=>[e,d(e)])));var c=r(80071);class u{#e=Object.freeze([]);constructor({id:e,min:t,max:r,placeholder:i},n){this.id=e,this.min=t,this.max=r,this.placeholder=i,this.onChange=n}get data(){return this.#e}set data(e){this.#e=Object.freeze(e),this.onChange?.()}get#t(){return this.data.length?this.numberValue:0}get numberValue(){return Number(this.stringValue)}get stringValue(){return(this.data.join("")||this.placeholder).padStart(this.length,"0")}get isFull(){return 10*this.numberValue>this.max||this.data.length===this.length}get isEmpty(){return this.stringValue===this.placeholder}get length(){return this.max.toString().length}set(e){this.data=e.toString().split("")}add(e){let t=this.data;return t=[...t,e],this.numberValue>this.max?t=[e]:this.length<t.length&&(t=t.slice(1,t.length)),this.data=t,e}del(){this.data.filter((e=>"0"!==e)).filter(Boolean).length?this.data=this.data.slice(0,this.data.length-1):this.data=[]}clear(){this.data=[]}inc(e){this.replaceValue(this.#t<this.max?Math.max(this.#t+(e||1),this.min):this.min)}dec(e){this.replaceValue(this.#t>this.min?Math.min(this.#t-(e||1),this.max):this.max)}isInRange(e){return e>=this.min&&e<=this.max}replaceValue(e){this.isInRange(e)&&(this.data=e.toString().padStart(this.length,0).split(""))}setMin(e){this.min=Number(e)}setMax(e){this.max=Number(e)}}var g=r(79275),y=r(25964);const m=(0,o.xE)("date-field"),v=(0,i.y)({componentName:m,baseSelector:"vaadin-popover"}),b=["format","opened","initial-value","readonly","disable-calendar"],C=["years-range","calendar-months","calendar-weekdays"],f=[...b,...C],x=g.w.cssVarList,{host:E,input:w,inputEleRTL:I,toggleButton:k,overlay:V,backdrop:T,errorMessage:P}={host:{selector:()=>":host"},input:{selector:()=>"descope-text-field"},inputEleRTL:{selector:()=>':host([st-host-direction="rtl"]) descope-text-field'},toggleButton:{selector:()=>".toggle-calendar"},overlay:{selector:"vaadin-popover-overlay::part(overlay)"},backdrop:{selector:"vaadin-popover-overlay::part(backdrop)"}},S=(0,s.Zz)((0,n.RF)({componentNameOverride:(0,o.xE)("input-wrapper")}),(0,n.RF)({mappings:{iconMargin:{...k,property:"margin-inline-end"},hostWidth:{...E,property:"width"},hostDirection:{...E,property:"direction"},textAlign:{...w,property:"text-align"},rtlInputDirection:{...I,property:x.inputDirection},rtlInputAlignment:{...I,property:x.inputTextAlign},overlayGap:{property:()=>S.cssVarList.overlayGap},overlayBackgroundColor:{property:()=>S.cssVarList.overlayBackgroundColor},overlayPadding:{property:()=>S.cssVarList.overlayPadding},overlayBoxShadow:{property:()=>S.overlayBoxShadow},overlayOutlineWidth:{property:()=>S.cssVarList.overlayOutlineWidth},overlayOutlineColor:{property:()=>S.cssVarList.overlayOutlineColor},overlayOutlineStyle:{property:()=>S.cssVarList.overlayOutlineStyle},errorMessageIcon:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIcon},errorMessageIconSize:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconSize},errorMessageIconPadding:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconPadding},errorMessageIconRepeat:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconRepeat},errorMessageIconPosition:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconPosition},errorMessageFontSize:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageFontSize}}}),(0,n.mA)({name:"overlay",selector:"",mappings:{marginTop:{...V,property:"margin-top"},backgroundColor:{...V},backdropBackgroundColor:{...T,property:"background-color"},backdropPointerEvents:{...T,property:"pointer-events"},padding:{...V},boxShadow:{...V},outlineWidth:{...V},outlineColor:{...V},outlineStyle:{...V}}}),n.VO,n.tQ)(class extends v{timestamp="";format=l.ui;selectedCounterIdx=0;updateCountersDisplay(){this.inputElement.value=this.countersValue}updateValue(){if(this.isCountersOutOfRange)this.updateTimestamp("");else{const e=h[this.format].getDate(this.inputElement.value);this.updateTimestamp(e.getTime())}}onDateCounterChange=()=>{this.updateCountersDisplay(),this.updateValue(),this.#r()};updateTimestamp(e){this.timestamp=e?(0,a.Nq)(e).getTime():""}dateCounters=[new u(l.rR.MONTH,this.onDateCounterChange.bind(this)),new u(l.rR.DAY,this.onDateCounterChange.bind(this)),new u(l.rR.YEAR,this.onDateCounterChange.bind(this))];static get observedAttributes(){return[].concat(v.observedAttributes||[],f)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n <div>\n <descope-text-field>\n <span slot="suffix" class="toggle-calendar">\n ${c.ki}\n </span>\n </descope-text-field>\n <vaadin-popover></vaadin-popover>\n </div>\n `,(0,y.fz)('\n :host {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n max-width: 100%;\n }\n\n :host ::slotted {\n padding: 0;\n }\n\n .toggle-calendar {\n cursor: pointer;\n display: flex;\n align-self: center;\n z-index: 1;\n height: 100%;\n align-items: center;\n }\n\n :host([readonly="true"]) .toggle-calendar {\n pointer-events: none;\n }\n\n .hidden {\n display: none;\n }\n ',this),this.inputElement=this.shadowRoot.querySelector("descope-text-field"),this.popoverToggleButton=this.inputElement.querySelector(".toggle-calendar")}get validationTarget(){return this.inputElement}get opened(){return"true"===this.getAttribute("opened")}get displayValueEpoch(){const e=h[this.format].getDate(this.inputElement.value);return(0,a.xP)(e?.getTime())?e.getTime():null}get sortedCounters(){return this.format.split(l.eT).map((e=>this.dateCounters.find((t=>t.placeholder===e))))}get activeCounter(){return this.sortedCounters[this.selectedCounterIdx]}get countersValue(){return this.sortedCounters.map((e=>e.stringValue)).join(l.eT)}get overlay(){return this.baseElement.shadowRoot?.querySelector("vaadin-popover-overlay")}get backdrop(){return this.overlay.shadowRoot?.querySelector("#backdrop")}get calendar(){return this.overlay?.querySelector("descope-calendar")}get isRTL(){const e=getComputedStyle(this.baseElement).getPropertyValue("direction");return e?"rtl"===e:"rtl"===this.getAttribute("st-host-direction")}get value(){return this.isInvalidDate()?"":this.timestamp}set value(e){e?(this.updateTimestamp(e),this.updateDateCounters((0,a.Nq)(e))):this.updateTimestamp("")}get isCountersEmpty(){return this.dateCounters.every((e=>e.isEmpty))}get isCountersOutOfRange(){return this.dateCounters.some((e=>!e.isInRange(e.numberValue)))}get disableCalendar(){return"true"===this.getAttribute("disable-calendar")}reportValidity(){this.inputElement.reportValidity()}#r(){this.inputElement.baseElement.dispatchEvent(new Event("input",{bubbles:!0}))}updateInputDisplay(){this.inputElement.value=(0,a.Ey)((0,a.Nq)(this.countersValue).getTime(),this.format)}init(){super.init?.(),this.updateFormatPattern(),this.initPopover(),this.onDateCounterChange(),this.initInputElement(),setTimeout((()=>{this.#i()}),0)}initInputElement(){this.inputElement.getValidity=this.getValidity.bind(this),this.inputElement.baseElement.checkValidity=this.checkValidity.bind(this),this.popoverToggleButton.addEventListener("click",this.onPopoverToggle.bind(this)),this.inputElement.addEventListener("focus",this.onFocus.bind(this)),this.inputElement.addEventListener("blur",this.onBlur.bind(this)),this.inputElement.addEventListener("click",this.handleMouseCaretPositionChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleArrowKeys.bind(this)),this.inputElement.addEventListener("beforeinput",this.handleInput.bind(this)),(0,o.EA)(this,this.inputElement,{includeAttrs:["label","label-type","placeholder","disabled","readonly","bordered","required","full-width","st-host-direction","pattern","bordered","data-errormessage-value-missing","data-errormessage-pattern-mismatch","data-errormessage-range-underflow","data-errormessage-range-overflow","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"]})}handleInput(e){e.preventDefault(),e.data&&(0,a.Et)(e.data)?(this.parseDigits(e.data),this.updateCountersDisplay()):e.inputType&&this.handleNavKeys(e)}initPopover(){this.baseElement.trigger=["click"],this.baseElement.withBackdrop=!0,this.baseElement.renderer=this.#n.bind(this),this.baseElement.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation()}))}#o;#n(e){e.firstChild||(this.overlay.positionTarget=this.shadowRoot.querySelector(".toggle-calendar"),e.appendChild(this.#s()),(0,a.Xs)(this.baseElement),this.backdrop.addEventListener("click",this.closePopover.bind(this))),e.style.setProperty("visibility","hidden"),setTimeout((()=>{this.#a(e),e.style.setProperty("visibility","visible"),this.updateCalendarView(e)}),100)}#a(){const e=this.shadowRoot.querySelector("vaadin-popover").shadowRoot;this.#o?.remove();const t=document.body.getBoundingClientRect(),r=this.getBoundingClientRect(),i=this.calendar.getBoundingClientRect(),n=this.isRTL?"right":"left",o=r[n]-i[n],s=i.left,a=t.width-i.right;let l;l=o>0?Math.min(o,a):-1*Math.min(Math.abs(o),s),(0,y.fz)(`\n vaadin-popover-overlay::part(overlay) {\n transform: translateX(${l}px);\n }\n `,e)}#s(){const e=document.createElement("span");e.innerHTML="<descope-calendar></descope-calendar>";const t=e.querySelector("descope-calendar");return t.addEventListener("date-submit",this.onCalendarSubmit.bind(this)),t.addEventListener("cancel",this.closePopover.bind(this)),e}#i(){this.overlay._attachOverlay=()=>this.overlay.bringToFront(),this.overlay._detachOverlay=()=>{},this.overlay._enterModalState=()=>{}}onPopoverToggle(){this.opened?this.closePopover():this.openPopover()}openPopover(){this.disableCalendar||this.setAttribute("opened","true")}closePopover(){this.removeAttribute("opened"),this.inputElement.focus()}getCounterById(e){return this.dateCounters.find((t=>t.id===e))}onCalendarSubmit(){if(!this.isReadOnly){if(!this.calendar.value)return;const e=(0,a.Nq)(this.calendar.value);this.value=e.getTime(),this.getCounterById("year").replaceValue(e.getFullYear()),this.getCounterById("month").replaceValue(e.getMonth()+1),this.getCounterById("day").replaceValue(e.getDate()),this.#r()}this.closePopover()}updateCalendarView(){const e=(0,a.xP)((0,a.Nq)(this.inputElement.value||"").getTime())&&h[this.format].validate(this.inputElement.value);this.displayValueEpoch||e?this.calendar.setAttribute("initial-value",(0,a.Ey)(this.displayValueEpoch||this.timestamp,l.wJ)):(this.calendar.clearValue(),this.calendar.setAttribute("preview",(0,a.Ey)((0,a.Ln)(),l.wJ))),(0,o.EA)(this,this.calendar,{includeAttrs:["st-host-direction","readonly","initial-month","initial-year","years-range","calendar-label-submit","calendar-label-cancel","calendar-months","calendar-weekdays","calendar-weekdays-short"]})}onFocus(){this.isReadOnly||this.inputElement.value||(this.inputElement.value=this.format,this.selectedCounterIdx=0,this.setInputSelectionRange())}onBlur(){this.opened||this.inputElement.value===this.format&&(this.inputElement.value="")}onFormatUpdate(e){Object.keys(h).includes(e)&&(this.format=e,this.updateFormatPattern())}updateFormatPattern(){const e=this.getAttribute("format")||this.format||l.ui;this.setAttribute("type","date"),this.setAttribute("pattern",h[e].pattern)}parseDigits(e){this.activeCounter.add(e),this.activeCounter.isFull&&this.selectNextCounter(),this.setInputSelectionRange()}getCounterIdx(e){const[t,r]=this.sortedCounters.map((e=>e.length));return[e<=t,e>=t&&e<=t+r+1,e>=t+r+2].indexOf(!0)}setSelectedCounterByCaretPosition(e){this.selectedCounterIdx=this.getCounterIdx(e.target.selectionStart)}selectNextCounter(){this.selectedCounterIdx<this.dateCounters.length&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx+1,2))}selectPrevCounter(){this.selectedCounterIdx>0&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx-1,1))}setInputSelectionRange(){if(this.selectedCounterIdx<0)return;const e=this.sortedCounters.slice(0,this.selectedCounterIdx).reduce(((e,t)=>e+t.length),this.selectedCounterIdx);this.inputElement.setSelectionRange(e,e+this.sortedCounters[this.selectedCounterIdx].length)}resetDateCounters(){this.dateCounters.forEach((e=>e.clear()))}updateDateCounters(e){this.dateCounters.forEach((t=>{switch(t.id){case l.rR.MONTH.id:t.set(e.getMonth()+1);break;case l.rR.YEAR.id:t.set(e.getFullYear());break;case l.rR.DAY.id:t.set(e.getDate())}}))}handleArrowKeys(e){"ArrowUp"===e.key?this.activeCounter.inc():"ArrowDown"===e.key?this.activeCounter.dec():"ArrowRight"===e.key?this.selectNextCounter():"ArrowLeft"===e.key&&this.selectPrevCounter(),setTimeout((()=>{this.setInputSelectionRange()}))}handleNavKeys(e){this.isReadOnly||(this.opened&&this.closePopover(),this.activeCounter&&("deleteContentBackward"===e.inputType&&this.handleBackspace(),this.setInputSelectionRange()))}handleBackspace(){this.activeCounter.isEmpty?(this.activeCounter.clear(),this.selectPrevCounter(),this.setInputSelectionRange()):this.activeCounter.del()}handleMouseCaretPositionChange(e){this.opened||(e.preventDefault(),this.setSelectedCounterByCaretPosition(e),this.setInputSelectionRange())}onInitialValueChange(e){this.value||setTimeout((()=>{this.value=e}))}setYearRange(e){if(!e)return;const[t,r]=e.split?.("-");if(t&&r){const e=this.getCounterById("year");e.setMin(t),e.setMax(r)}}togglePopoverAccess(e){e?this.popoverToggleButton.classList.remove("hidden"):this.popoverToggleButton.classList.add("hidden")}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&("years-range"===e&&this.setYearRange(r),"disable-calendar"===e&&this.togglePopoverAccess("true"!==r),b.includes(e)?(r&&"format"===e&&this.onFormatUpdate(r),"initial-value"===e&&this.onInitialValueChange(r)):C.includes(e)&&(r?this.calendar?.setAttribute(e,r):this.calendar?.removeAttribute(e)))}isInvalidDate(){return Object.entries(this.getDateVals()).some((([e,t])=>!t||this.getCounterById(e).numberValue!==t))}getValidity(){return this.isRequired&&this.isCountersEmpty?{valueMissing:!0}:this.isCountersOutOfRange||this.isInvalidDate()?{patternMismatch:!0}:{}}getDateVals(){const e={day:"",month:"",year:""};try{const t=(0,a.Nq)(this.timestamp);e.month=t.getMonth()+1,e.day=t.getDate(),e.year=t.getFullYear()}catch(e){}return e}});customElements.define(m,S)},79275:(e,t,r)=>{r.d(t,{T:()=>l,w:()=>d});var i=r(79365),n=r(6424),o=r(9696),s=r(97810),a=r(73551);const l=(0,s.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,i.RF)({mappings:n.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(e=>class extends e{static get observedAttributes(){return p.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,r){super.attributeChangeCallback?.(e,t,r),"type"===e&&this.baseElement._setType(r),t!==r&&("label-type"===e?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===r))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))}}]);
1
+ "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[9257],{6424:(e,t,r)=>{r.d(t,{A:()=>C});const{host:i,label:n,placeholder:o,requiredIndicator:s,inputField:a,input:l,inputMask:p,helperText:d,errorMessage:h,disabledPlaceholder:c,inputDisabled:u,inputIcon:g,externalInput:y,externalInputDisabled:m,externalPlaceholder:v,externalDisabledPlaceholder:b}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"},externalInput:{selector:()=>"::slotted(input)"},externalInputDisabled:{selector:()=>"::slotted(input:disabled)"},externalPlaceholder:{selector:()=>"::slotted(input:placeholder-shown)"},externalDisabledPlaceholder:{selector:()=>"::slotted(input:disabled::placeholder)"}},C={fontSize:[{},i],fontFamily:[n,a,d,h],labelFontSize:{...n,property:"font-size"},labelFontWeight:{...n,property:"font-weight"},labelTextColor:[{...n,property:"color"},{...s,property:"color"},{...n,property:"-webkit-text-fill-color"},{...s,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputDirection:{...l,property:"direction"},inputBackgroundColor:[{...a,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...h,property:"color"},errorMessageIcon:{...h,property:"background-image"},errorMessageIconSize:{...h,property:"background-size"},errorMessageIconPadding:{...h,property:"padding-inline-start"},errorMessageIconRepeat:{...h,property:"background-repeat"},errorMessageIconPosition:{...h,property:"background-position"},errorMessageFontSize:{...h,property:"font-size"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...u,property:"-webkit-text-fill-color"},{...m,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...l,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...s,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},textAlign:{},inputTextAlign:[{...l,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...v,property:"color"},{...o,property:"color"},{...c,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],labelPosition:{...n,property:"position"},labelTopPosition:{...n,property:"top"},labelHorizontalPosition:[{...n,property:"left"},{...n,property:"right"}],inputTransformY:{...n,property:"transform"},inputTransition:{...n,property:"transition"},marginInlineStart:{...n,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...v,property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...l,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...l,property:"margin-bottom"},{...y,property:"margin-bottom"}],inputIconOffset:[{...g,property:"margin-right"},{...g,property:"margin-left"}],inputIconSize:{...g,property:"font-size"},inputIconColor:{...g,property:"color"}}},21374:(e,t,r)=>{r.r(t),r.d(t,{TextFieldClass:()=>i.w,componentName:()=>i.T}),r(11284),r(37182),r(95260);var i=r(79275);customElements.define(i.T,i.w)},64609:(e,t,r)=>{r.r(t),r.d(t,{DateFieldClass:()=>S,componentName:()=>m}),r(45992),r(88350),r(21374);var i=r(3393),n=r(79365),o=r(97810),s=r(9696),a=r(49224),l=r(64101);const p={MM:"(0?[1-9]|1[0-2])",DD:"(0?[1-9]|[12][0-9]|3[01])",YYYY:"([0-9]{4})"},d=e=>{const t=(e=>`^${e.split(l.eT).map((e=>p[e])).join("\\D")}$`)(e),r=(e=>{const t=e.split(l.eT);return e=>{const r={};return t.forEach(((t,i)=>{r[t]=e[i+1]})),[r.YYYY,r.MM,r.DD]}})(e),i=new RegExp(t);return{pattern:t,validate:e=>i.test(e),getDate:e=>((e,t,r)=>{const i=t.exec(e);if(!i)return null;const[n,o,s]=r(i);return(0,a.Nq)([n,o,s].join(l.eT))})(e,i,r)}},h=Object.fromEntries(l.SP.map((e=>[e,d(e)])));var c=r(80071);class u{#e=Object.freeze([]);constructor({id:e,min:t,max:r,placeholder:i},n){this.id=e,this.min=t,this.max=r,this.placeholder=i,this.onChange=n}get data(){return this.#e}set data(e){this.#e=Object.freeze(e),this.onChange?.()}get#t(){return this.data.length?this.numberValue:0}get numberValue(){return Number(this.stringValue)}get stringValue(){return(this.data.join("")||this.placeholder).padStart(this.length,"0")}get isFull(){return 10*this.numberValue>this.max||this.data.length===this.length}get isEmpty(){return this.stringValue===this.placeholder}get length(){return this.max.toString().length}set(e){this.data=e.toString().split("")}add(e){let t=this.data;return t=[...t,e],this.numberValue>this.max?t=[e]:this.length<t.length&&(t=t.slice(1,t.length)),this.data=t,e}del(){this.data.filter((e=>"0"!==e)).filter(Boolean).length?this.data=this.data.slice(0,this.data.length-1):this.data=[]}clear(){this.data=[]}inc(e){this.replaceValue(this.#t<this.max?Math.max(this.#t+(e||1),this.min):this.min)}dec(e){this.replaceValue(this.#t>this.min?Math.min(this.#t-(e||1),this.max):this.max)}isInRange(e){return e>=this.min&&e<=this.max}replaceValue(e){this.isInRange(e)&&(this.data=e.toString().padStart(this.length,0).split(""))}setMin(e){this.min=Number(e)}setMax(e){this.max=Number(e)}}var g=r(79275),y=r(25964);const m=(0,o.xE)("date-field"),v=(0,i.y)({componentName:m,baseSelector:"vaadin-popover"}),b=["format","opened","initial-value","readonly","disable-calendar"],C=["years-range","calendar-months","calendar-weekdays"],f=[...b,...C],x=g.w.cssVarList,{host:E,input:w,inputEleRTL:I,toggleButton:k,overlay:V,backdrop:T,errorMessage:P}={host:{selector:()=>":host"},input:{selector:()=>"descope-text-field"},inputEleRTL:{selector:()=>':host([st-host-direction="rtl"]) descope-text-field'},toggleButton:{selector:()=>".toggle-calendar"},overlay:{selector:"vaadin-popover-overlay::part(overlay)"},backdrop:{selector:"vaadin-popover-overlay::part(backdrop)"}},S=(0,s.Zz)((0,n.RF)({componentNameOverride:(0,o.xE)("input-wrapper")}),(0,n.RF)({mappings:{iconMargin:{...k,property:"margin-inline-end"},hostWidth:{...E,property:"width"},hostDirection:{...E,property:"direction"},textAlign:{...w,property:"text-align"},rtlInputDirection:{...I,property:x.inputDirection},rtlInputAlignment:{...I,property:x.inputTextAlign},overlayGap:{property:()=>S.cssVarList.overlayGap},overlayBackgroundColor:{property:()=>S.cssVarList.overlayBackgroundColor},overlayPadding:{property:()=>S.cssVarList.overlayPadding},overlayBoxShadow:{property:()=>S.overlayBoxShadow},overlayOutlineWidth:{property:()=>S.cssVarList.overlayOutlineWidth},overlayOutlineColor:{property:()=>S.cssVarList.overlayOutlineColor},overlayOutlineStyle:{property:()=>S.cssVarList.overlayOutlineStyle},errorMessageIcon:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIcon},errorMessageIconSize:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconSize},errorMessageIconPadding:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconPadding},errorMessageIconRepeat:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconRepeat},errorMessageIconPosition:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageIconPosition},errorMessageFontSize:{selector:g.w.componentName,property:g.w.cssVarList.errorMessageFontSize}}}),(0,n.mA)({name:"overlay",selector:"",mappings:{marginTop:{...V,property:"margin-top"},backgroundColor:{...V},backdropBackgroundColor:{...T,property:"background-color"},backdropPointerEvents:{...T,property:"pointer-events"},padding:{...V},boxShadow:{...V},outlineWidth:{...V},outlineColor:{...V},outlineStyle:{...V}}}),n.VO,n.tQ)(class extends v{timestamp="";format=l.ui;selectedCounterIdx=0;updateCountersDisplay(){this.inputElement.value=this.countersValue}updateValue(){if(this.isCountersOutOfRange)this.updateTimestamp("");else{const e=h[this.format].getDate(this.inputElement.value);this.updateTimestamp(e.getTime())}}onDateCounterChange=()=>{this.updateCountersDisplay(),this.updateValue(),this.#r()};updateTimestamp(e){this.timestamp=e?(0,a.Nq)(e).getTime():""}dateCounters=[new u(l.rR.MONTH,this.onDateCounterChange.bind(this)),new u(l.rR.DAY,this.onDateCounterChange.bind(this)),new u(l.rR.YEAR,this.onDateCounterChange.bind(this))];static get observedAttributes(){return[].concat(v.observedAttributes||[],f)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n <div>\n <descope-text-field inputmode="numeric">\n <span slot="suffix" class="toggle-calendar">\n ${c.ki}\n </span>\n </descope-text-field>\n <vaadin-popover></vaadin-popover>\n </div>\n `,(0,y.fz)('\n :host {\n display: inline-block;\n box-sizing: border-box;\n user-select: none;\n max-width: 100%;\n }\n\n :host ::slotted {\n padding: 0;\n }\n\n .toggle-calendar {\n cursor: pointer;\n display: flex;\n align-self: center;\n z-index: 1;\n height: 100%;\n align-items: center;\n }\n\n :host([readonly="true"]) .toggle-calendar {\n pointer-events: none;\n }\n\n .hidden {\n display: none;\n }\n ',this),this.inputElement=this.shadowRoot.querySelector("descope-text-field"),this.popoverToggleButton=this.inputElement.querySelector(".toggle-calendar")}get validationTarget(){return this.inputElement}get opened(){return"true"===this.getAttribute("opened")}get displayValueEpoch(){const e=h[this.format].getDate(this.inputElement.value);return(0,a.xP)(e?.getTime())?e.getTime():null}get sortedCounters(){return this.format.split(l.eT).map((e=>this.dateCounters.find((t=>t.placeholder===e))))}get activeCounter(){return this.sortedCounters[this.selectedCounterIdx]}get countersValue(){return this.sortedCounters.map((e=>e.stringValue)).join(l.eT)}get overlay(){return this.baseElement.shadowRoot?.querySelector("vaadin-popover-overlay")}get backdrop(){return this.overlay.shadowRoot?.querySelector("#backdrop")}get calendar(){return this.overlay?.querySelector("descope-calendar")}get isRTL(){const e=getComputedStyle(this.baseElement).getPropertyValue("direction");return e?"rtl"===e:"rtl"===this.getAttribute("st-host-direction")}get value(){return this.isInvalidDate()?"":this.timestamp}set value(e){e?(this.updateTimestamp(e),this.updateDateCounters((0,a.Nq)(e))):this.updateTimestamp("")}get isCountersEmpty(){return this.dateCounters.every((e=>e.isEmpty))}get isCountersOutOfRange(){return this.dateCounters.some((e=>!e.isInRange(e.numberValue)))}get disableCalendar(){return"true"===this.getAttribute("disable-calendar")}reportValidity(){this.inputElement.reportValidity()}#r(){this.inputElement.baseElement.dispatchEvent(new Event("input",{bubbles:!0}))}updateInputDisplay(){this.inputElement.value=(0,a.Ey)((0,a.Nq)(this.countersValue).getTime(),this.format)}init(){super.init?.(),this.updateFormatPattern(),this.initPopover(),this.onDateCounterChange(),this.initInputElement(),setTimeout((()=>{this.#i()}),0)}initInputElement(){this.inputElement.getValidity=this.getValidity.bind(this),this.inputElement.baseElement.checkValidity=this.checkValidity.bind(this),this.popoverToggleButton.addEventListener("click",this.onPopoverToggle.bind(this)),this.inputElement.addEventListener("focus",this.onFocus.bind(this)),this.inputElement.addEventListener("blur",this.onBlur.bind(this)),this.inputElement.addEventListener("click",this.handleMouseCaretPositionChange.bind(this)),this.inputElement.addEventListener("keydown",this.handleArrowKeys.bind(this)),this.inputElement.addEventListener("beforeinput",this.handleInput.bind(this)),(0,o.EA)(this,this.inputElement,{includeAttrs:["label","label-type","placeholder","disabled","readonly","bordered","required","full-width","st-host-direction","pattern","bordered","data-errormessage-value-missing","data-errormessage-pattern-mismatch","data-errormessage-range-underflow","data-errormessage-range-overflow","st-error-message-icon","st-error-message-icon-size","st-error-message-icon-padding"]})}handleInput(e){e.preventDefault(),e.data&&(0,a.Et)(e.data)?(this.parseDigits(e.data),this.updateCountersDisplay()):e.inputType&&this.handleNavKeys(e)}initPopover(){this.baseElement.trigger=["click"],this.baseElement.withBackdrop=!0,this.baseElement.renderer=this.#n.bind(this),this.baseElement.addEventListener("click",(e=>{e.preventDefault(),e.stopPropagation()}))}#o;#n(e){e.firstChild||(this.overlay.positionTarget=this.shadowRoot.querySelector(".toggle-calendar"),e.appendChild(this.#s()),(0,a.Xs)(this.baseElement),this.backdrop.addEventListener("click",this.closePopover.bind(this))),e.style.setProperty("visibility","hidden"),setTimeout((()=>{this.#a(e),e.style.setProperty("visibility","visible"),this.updateCalendarView(e)}),100)}#a(){const e=this.shadowRoot.querySelector("vaadin-popover").shadowRoot;this.#o?.remove();const t=document.body.getBoundingClientRect(),r=this.getBoundingClientRect(),i=this.calendar.getBoundingClientRect(),n=this.isRTL?"right":"left",o=r[n]-i[n],s=i.left,a=t.width-i.right;let l;l=o>0?Math.min(o,a):-1*Math.min(Math.abs(o),s),(0,y.fz)(`\n vaadin-popover-overlay::part(overlay) {\n transform: translateX(${l}px);\n }\n `,e)}#s(){const e=document.createElement("span");e.innerHTML="<descope-calendar></descope-calendar>";const t=e.querySelector("descope-calendar");return t.addEventListener("date-submit",this.onCalendarSubmit.bind(this)),t.addEventListener("cancel",this.closePopover.bind(this)),e}#i(){this.overlay._attachOverlay=()=>this.overlay.bringToFront(),this.overlay._detachOverlay=()=>{},this.overlay._enterModalState=()=>{}}onPopoverToggle(){this.opened?this.closePopover():this.openPopover()}openPopover(){this.disableCalendar||this.setAttribute("opened","true")}closePopover(){this.removeAttribute("opened"),this.inputElement.focus()}getCounterById(e){return this.dateCounters.find((t=>t.id===e))}onCalendarSubmit(){if(!this.isReadOnly){if(!this.calendar.value)return;const e=(0,a.Nq)(this.calendar.value);this.value=e.getTime(),this.getCounterById("year").replaceValue(e.getFullYear()),this.getCounterById("month").replaceValue(e.getMonth()+1),this.getCounterById("day").replaceValue(e.getDate()),this.#r()}this.closePopover()}updateCalendarView(){const e=(0,a.xP)((0,a.Nq)(this.inputElement.value||"").getTime())&&h[this.format].validate(this.inputElement.value);this.displayValueEpoch||e?this.calendar.setAttribute("initial-value",(0,a.Ey)(this.displayValueEpoch||this.timestamp,l.wJ)):(this.calendar.clearValue(),this.calendar.setAttribute("preview",(0,a.Ey)((0,a.Ln)(),l.wJ))),(0,o.EA)(this,this.calendar,{includeAttrs:["st-host-direction","readonly","initial-month","initial-year","years-range","calendar-label-submit","calendar-label-cancel","calendar-months","calendar-weekdays","calendar-weekdays-short"]})}onFocus(){this.isReadOnly||this.inputElement.value||(this.inputElement.value=this.format,this.selectedCounterIdx=0,this.setInputSelectionRange())}onBlur(){this.opened||this.inputElement.value===this.format&&(this.inputElement.value="")}onFormatUpdate(e){Object.keys(h).includes(e)&&(this.format=e,this.updateFormatPattern())}updateFormatPattern(){const e=this.getAttribute("format")||this.format||l.ui;this.setAttribute("type","date"),this.setAttribute("pattern",h[e].pattern)}parseDigits(e){this.activeCounter.add(e),this.activeCounter.isFull&&this.selectNextCounter(),this.setInputSelectionRange()}getCounterIdx(e){const[t,r]=this.sortedCounters.map((e=>e.length));return[e<=t,e>=t&&e<=t+r+1,e>=t+r+2].indexOf(!0)}setSelectedCounterByCaretPosition(e){this.selectedCounterIdx=this.getCounterIdx(e.target.selectionStart)}selectNextCounter(){this.selectedCounterIdx<this.dateCounters.length&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx+1,2))}selectPrevCounter(){this.selectedCounterIdx>0&&(this.selectedCounterIdx=Math.min(this.selectedCounterIdx-1,1))}setInputSelectionRange(){if(this.selectedCounterIdx<0)return;const e=this.sortedCounters.slice(0,this.selectedCounterIdx).reduce(((e,t)=>e+t.length),this.selectedCounterIdx);this.inputElement.setSelectionRange(e,e+this.sortedCounters[this.selectedCounterIdx].length)}resetDateCounters(){this.dateCounters.forEach((e=>e.clear()))}updateDateCounters(e){this.dateCounters.forEach((t=>{switch(t.id){case l.rR.MONTH.id:t.set(e.getMonth()+1);break;case l.rR.YEAR.id:t.set(e.getFullYear());break;case l.rR.DAY.id:t.set(e.getDate())}}))}handleArrowKeys(e){"ArrowUp"===e.key?this.activeCounter.inc():"ArrowDown"===e.key?this.activeCounter.dec():"ArrowRight"===e.key?this.selectNextCounter():"ArrowLeft"===e.key&&this.selectPrevCounter(),setTimeout((()=>{this.setInputSelectionRange()}))}handleNavKeys(e){this.isReadOnly||(this.opened&&this.closePopover(),this.activeCounter&&("deleteContentBackward"===e.inputType&&this.handleBackspace(),this.setInputSelectionRange()))}handleBackspace(){this.activeCounter.isEmpty?(this.activeCounter.clear(),this.selectPrevCounter(),this.setInputSelectionRange()):this.activeCounter.del()}handleMouseCaretPositionChange(e){this.opened||(e.preventDefault(),this.setSelectedCounterByCaretPosition(e),this.setInputSelectionRange())}onInitialValueChange(e){this.value||setTimeout((()=>{this.value=e}))}setYearRange(e){if(!e)return;const[t,r]=e.split?.("-");if(t&&r){const e=this.getCounterById("year");e.setMin(t),e.setMax(r)}}togglePopoverAccess(e){e?this.popoverToggleButton.classList.remove("hidden"):this.popoverToggleButton.classList.add("hidden")}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),t!==r&&("years-range"===e&&this.setYearRange(r),"disable-calendar"===e&&this.togglePopoverAccess("true"!==r),b.includes(e)?(r&&"format"===e&&this.onFormatUpdate(r),"initial-value"===e&&this.onInitialValueChange(r)):C.includes(e)&&(r?this.calendar?.setAttribute(e,r):this.calendar?.removeAttribute(e)))}isInvalidDate(){return Object.entries(this.getDateVals()).some((([e,t])=>!t||this.getCounterById(e).numberValue!==t))}getValidity(){return this.isRequired&&this.isCountersEmpty?{valueMissing:!0}:this.isCountersOutOfRange||this.isInvalidDate()?{patternMismatch:!0}:{}}getDateVals(){const e={day:"",month:"",year:""};try{const t=(0,a.Nq)(this.timestamp);e.month=t.getMonth()+1,e.day=t.getDate(),e.year=t.getFullYear()}catch(e){}return e}});customElements.define(m,S)},79275:(e,t,r)=>{r.d(t,{T:()=>l,w:()=>d});var i=r(79365),n=r(6424),o=r(9696),s=r(97810),a=r(73551);const l=(0,s.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,i.RF)({mappings:n.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(e=>class extends e{static get observedAttributes(){return p.concat(e.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(e){if(!e)return void this.icon?.remove();const t={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},r={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...t}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,r),setTimeout((()=>{Object.assign(this.icon,t)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(e,t,r){super.attributeChangeCallback?.(e,t,r),"type"===e&&this.baseElement._setType(r),t!==r&&("label-type"===e?"floating"===r?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===e&&this.renderCopyToClipboard("true"===r))}}))((0,i.tz)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${d.cssVarList.inputOutlineWidth}) + var(${d.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {\n opacity: 1;\n }\n\n vaadin-text-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-text-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n ${(0,a.$J)("vaadin-text-field")}\n\t\t\t${(0,a.cy)(d.cssVarList)}\n\t\t\t${(0,a.LJ)("vaadin-text-field",d.cssVarList)}\n ${(0,a.Kl)()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:l}))}}]);
2
2
  //# sourceMappingURL=descope-date-field-index-js.js.map