@descope/web-components-ui 1.0.291 → 1.0.293

package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1842],{395:(t,e,n)=>{n.d(e,{f:()=>l,o:()=>b});var i=n(4567),s=n(2061),r=n(1e3),a=n(5857),o=n(2481),d=n(4201);const l=(0,i.iY)("new-password"),{host:p,label:h,internalInputsWrapper:c,errorMessage:u,helperText:w,passwordInput:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},internalInputsWrapper:{selector:"descope-new-password-internal .wrapper"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},passwordInput:{selector:"descope-password"}},b=(0,s.qC)((0,r.yk)({mappings:{fontSize:[p,{},{selector:o.v.componentName,property:o.v.cssVarList.fontSize}],fontFamily:[h,u,w],errorMessageTextColor:{...u,property:"color"},hostWidth:{...p,property:"width"},hostMinWidth:{...p,property:"min-width"},hostDirection:[{...p,property:"direction"},{...f,property:o.v.cssVarList.hostDirection}],inputsRequiredIndicator:{...p,property:"content"},spaceBetweenInputs:{...c,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),(t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="new-password"\n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,i.oP)(this,this.inputElement,{includeAttrs:["password-label","password-placeholder","confirm-label","confirm-placeholder","full-width","size","bordered","label","has-confirm","invalid","readonly","draggable"]})}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: 100%;\n\t\t\tbox-sizing: border-box;\n\t\t}\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n\t\t${(0,d.bi)(o.v.cssVarList)}\n\t\tvaadin-text-field {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tmin-height: 0;\n\t\t\tbackground: transparent;\n\t\t\tbox-shadow: none;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field)::after {\n\t\t\tbackground: transparent;\n\t\t\topacity: 0;\n\t\t}\n\t\tdescope-new-password-internal {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tpadding: 0;\n\t\t}\n\t\tdescope-new-password-internal > .wrapper {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\tdescope-password {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\t\tdescope-new-password-internal vaadin-password-field::before {\n\t\t\theight: initial;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},5857:(t,e,n)=>{n.d(e,{f:()=>i});const i=(0,n(4567).iY)("new-password-internal")},1545:(t,e,n)=>{n.r(e);var i=n(3878),s=n(4567),r=n(395),a=n(5857);const o=/^password-/,d=/^confirm-/,l=(t,e)=>t.replace(e,""),p=["password-label","password-placeholder"],h=["confirm-label","confirm-placeholder"],c=["disabled","bordered","size","full-width","maxlength","invalid","readonly","draggable","autocomplete"],u=[].concat(c,p,h),w=(0,i.P)({componentName:a.f,baseSelector:"div"});customElements.define(a.f,class extends w{static get observedAttributes(){return["has-confirm"].concat(w.observedAttributes||[],u)}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper"></div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper")}get value(){return this.passwordInput?.value||""}set value(t){t!==this.value&&(this.value=t)}get hasConfirm(){return"true"===this.getAttribute("has-confirm")}getValidity(){if(this.isRequired&&!this.value)return{valueMissing:!0};if(this.hasConfirm&&this.confirmInput&&this.value!==this.confirmInput.value)return{patternMismatch:!0};const t=this.getAttribute("minlength"),e=parseInt(t,10)||0;return this.value.length>=e?{}:{tooShort:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.passwordInput.focus()})),super.init?.(),this.renderInputs(this.hasConfirm)}renderInputs(t){let e='<descope-password data-id="password"></descope-password>';t&&(e+='<descope-password data-id="confirm"></descope-password>'),this.wrapperEle.innerHTML=e,this.passwordInput=this.querySelector('[data-id="password"]'),this.confirmInput=this.querySelector('[data-id="confirm"]'),this.inputs=[this.passwordInput,this.confirmInput],this.initInputs(),[...p,...h,...c].forEach((t=>{this.attributeChangedCallback(t,null,this.getAttribute(t))}))}handleIndicatorStyle(){this.inputs.forEach((t=>{const e=document.createElement("style");e.innerHTML=`\n\t\t\t\t:host ::part(required-indicator)::after {\n\t\t\t\t\tcontent: var(${r.o.cssVarList.inputsRequiredIndicator});\n          width: 1em;\n          text-align: center;\n\t\t\t\t}\n        :host ::part(required-indicator) {\n          display: inline-flex;\n        }\n\t\t\t\t`,t?.shadowRoot.appendChild(e)}))}get isInvalid(){return this.hasAttribute("invalid")&&"false"!==this.getAttribute("invalid")}handleInputsInvalidAttribute(){this.inputs.forEach((t=>{t&&(0,s.FX)(t,(e=>{if(e.includes("invalid")){const e=t.getAttribute("invalid"),n=this.getAttribute("invalid");this.isInvalid&&n!==e&&t.setAttribute("invalid","true")}}),{})}))}initInputs(){this.handleIndicatorStyle(),this.handleInputsInvalidAttribute(),this.handleFocusEventsDispatching(this.inputs)}toggleBooleanAttribute(t,e,n){null===n?t?.removeAttribute(e):t?.setAttribute(e,n)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("has-confirm"===t?this.renderInputs(null!==n&&"false"!==n):c.includes(t)?this.inputs.forEach((e=>this.toggleBooleanAttribute(e,t,n))):p.includes(t)?this.toggleBooleanAttribute(this.passwordInput,l(t,o),n):h.includes(t)&&this.toggleBooleanAttribute(this.confirmInput,l(t,d),n))}})}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1842],{395:(t,e,i)=>{i.d(e,{f:()=>p,o:()=>m});var n=i(4567),s=i(2061),a=i(1e3),r=i(5857),o=i(2481),l=i(4201),d=i(7028);const p=(0,n.iY)("new-password"),c=d.PolicyValidationClass.cssVarList,{host:h,label:u,internalInputsWrapper:v,errorMessage:w,helperText:b,passwordInput:g,policyPreview:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},internalInputsWrapper:{selector:"descope-new-password-internal .wrapper"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},passwordInput:{selector:"descope-password"},policyPreview:{selector:"descope-policy-validation"}},m=(0,s.qC)((0,a.yk)({mappings:{fontSize:[h,{},{selector:o.v.componentName,property:o.v.cssVarList.fontSize}],fontFamily:[u,w,b],errorMessageTextColor:{...w,property:"color"},hostWidth:{...h,property:"width"},hostMinWidth:{...h,property:"min-width"},hostDirection:[{...h,property:"direction"},{...g,property:o.v.cssVarList.hostDirection}],inputsRequiredIndicator:{...h,property:"content"},spaceBetweenInputs:{...v,property:"gap"},policyPreviewBackgroundColor:{...f,property:c.backgroundColor},policyPreviewPadding:{...f,property:c.padding}}}),a.e4,(0,a.dj)({proxyProps:["value","selectionStart"]}),(t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${r.f}\n\t\t\t\tname="new-password"\n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${r.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.f),(0,n.oP)(this,this.inputElement,{includeAttrs:["password-label","password-placeholder","confirm-label","confirm-placeholder","full-width","size","bordered","label","has-confirm","invalid","readonly","draggable","has-validation","policy-label","active-policies","available-policies","data-password-policy-value-minlength"]})}}))((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: 100%;\n\t\t\tbox-sizing: border-box;\n\t\t}\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n\t\t${(0,l.bi)(o.v.cssVarList)}\n\t\tvaadin-text-field {\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t\tvaadin-text-field::part(input-field) {\n\t\t\tmin-height: 0;\n\t\t\tbackground: transparent;\n\t\t\tbox-shadow: none;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-text-field::part(input-field)::after {\n\t\t\tbackground: transparent;\n\t\t\topacity: 0;\n\t\t}\n\t\tdescope-new-password-internal {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0;\n\t\t}\n\t\tdescope-new-password-internal > .wrapper {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\tdescope-password {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\t\tdescope-new-password-internal vaadin-password-field::before {\n\t\t\theight: initial;\n\t\t}\n    descope-policy-validation {\n      margin-top: 8px;\n      display: flex;\n    }\n    descope-policy-validation.hidden {\n      display: none;\n    }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))},5857:(t,e,i)=>{i.d(e,{f:()=>n});const n=(0,i(4567).iY)("new-password-internal")},1545:(t,e,i)=>{i.r(e);var n=i(3878),s=i(4567),a=i(395),r=i(5857);const o=/^password-/,l=/^confirm-/,d=(t,e)=>t.replace(e,""),p=["password-label","password-placeholder"],c=["confirm-label","confirm-placeholder"],h=["disabled","bordered","size","full-width","maxlength","invalid","readonly","draggable","autocomplete"],u=[].concat(h,p,c,["has-validation"]),v=(0,n.P)({componentName:r.f,baseSelector:"div"});customElements.define(r.f,class extends v{static get observedAttributes(){return["has-confirm"].concat(v.observedAttributes||[],u)}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper"></div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper")}get value(){return this.passwordInput?.value||""}set value(t){t!==this.value&&(this.value=t)}get hasConfirm(){return"true"===this.getAttribute("has-confirm")}get hasValidation(){return"true"===this.getAttribute("has-validation")}getValidity(){if(!this.policyPanel.isValid)return{patternMismatch:!0};if(this.isRequired&&!this.value)return{valueMissing:!0};if(this.hasConfirm&&this.confirmInput&&this.value!==this.confirmInput.value)return{patternMismatch:!0};const t=this.getAttribute("minlength"),e=parseInt(t,10)||0;return this.value.length>=e?{}:{tooShort:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.passwordInput.focus()})),super.init?.(),this.renderInputs(this.hasConfirm)}renderInputs(t){let e='\n      <div>\n        <descope-password data-id="password"></descope-password>\n        <descope-policy-validation></descope-policy-validation>\n      </div>\n    ';t&&(e+='<descope-password data-id="confirm"></descope-password>'),this.wrapperEle.innerHTML=e,this.passwordInput=this.querySelector('[data-id="password"]'),this.confirmInput=this.querySelector('[data-id="confirm"]'),this.policyPanel=this.querySelector("descope-policy-validation"),this.inputs=[this.passwordInput,this.confirmInput],this.initInputs(),[...p,...c,...h].forEach((t=>{this.attributeChangedCallback(t,null,this.getAttribute(t))})),this.passwordInput.addEventListener("input",(t=>{this.policyPanel.setAttribute("value",t.target.value)})),(0,s.oP)(this,this.policyPanel,{includeAttrs:["policy-label","available-policies","active-policies","data-password-policy-value-minlength"],mapAttrs:{"policy-label":"label","available-policies":"data"}})}handleIndicatorStyle(){this.inputs.forEach((t=>{const e=document.createElement("style");e.innerHTML=`\n\t\t\t\t:host ::part(required-indicator)::after {\n\t\t\t\t\tcontent: var(${a.o.cssVarList.inputsRequiredIndicator});\n          width: 1em;\n          text-align: center;\n\t\t\t\t}\n        :host ::part(required-indicator) {\n          display: inline-flex;\n        }\n\t\t\t\t`,t?.shadowRoot.appendChild(e)}))}get isInvalid(){return this.hasAttribute("invalid")&&"false"!==this.getAttribute("invalid")}handleInputsInvalidAttribute(){this.inputs.forEach((t=>{t&&(0,s.FX)(t,(e=>{if(e.includes("invalid")){const e=t.getAttribute("invalid"),i=this.getAttribute("invalid");this.isInvalid&&i!==e&&t.setAttribute("invalid","true")}}),{})}))}initInputs(){this.handleIndicatorStyle(),this.handleInputsInvalidAttribute(),this.handleFocusEventsDispatching(this.inputs)}toggleBooleanAttribute(t,e,i){null===i?t?.removeAttribute(e):t?.setAttribute(e,i)}hidePolicy(){this.policyPanel.classList.add("hidden")}showPolicy(){this.policyPanel.classList.remove("hidden")}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("has-confirm"===t?this.renderInputs(null!==i&&"false"!==i):h.includes(t)?this.inputs.forEach((e=>this.toggleBooleanAttribute(e,t,i))):p.includes(t)?this.toggleBooleanAttribute(this.passwordInput,d(t,o),i):c.includes(t)&&this.toggleBooleanAttribute(this.confirmInput,d(t,l),i),"has-validation"===t&&("true"===i?this.showPolicy():this.hidePolicy()))}})}}]);

package/dist/umd/descope-new-password-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7055],{8974:(e,s,c)=>{c.r(s),c.d(s,{NewPasswordClass:()=>o.o});var o=c(395);c(9357),c(9279),c(1545),customElements.define(o.f,o.o)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7055],{8974:(e,s,c)=>{c.r(s),c.d(s,{NewPasswordClass:()=>o.o});var o=c(395);c(9357),c(9279),c(7028),c(1545),customElements.define(o.f,o.o)}}]);

package/dist/umd/descope-policy-validation-index-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4570],{7028:(e,i,t)=>{t.r(i),t.d(i,{PolicyValidationClass:()=>y});var l=t(1e3),a=t(2561),s=t(2061),r=t(4567);const o=(e,i)=>e.replace(/{{(\w+)+}}/g,((e,t)=>i?.[t]||e)),n=(0,r.iY)("policy-validation"),d=["data","active-policies","overrides","data-password-policy-value-minlength"],c=["label","value",...d];class p extends((0,a.s)({componentName:n,baseSelector:":host > div"})){#e;#i=[];#t;static get observedAttributes(){return c}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <div>\n      <div class="label"></div>\n      <ul></ul>\n    </div>\n    <style>\n      :host > div {\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        box-sizing: border-box;\n      }\n      .label {\n        max-width: 100%;\n        text-wrap: wrap;\n        overflow-wrap: break-word;\n      }\n      .hide-label .label {\n        display: none;\n      }\n      ul {\n        display: flex;\n        flex-direction: column;\n        padding: 0;\n        margin: 0;\n      }\n      ul, li {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n      li::before {\n        display: inline-block;\n        width: 1em;\n        text-align: center;\n      }\n    </style>\n\t\t',this.panel=this.shadowRoot.querySelector(":host > div"),this.label=this.shadowRoot.querySelector(".label"),this.list=this.shadowRoot.querySelector("ul")}attributeChangedCallback(e,i,t){if(super.attributeChangedCallback?.(e,i,t),i!==t){if("label"===e&&this.updateLabel(t),d.includes(e)){if("data"===e)try{this.availablePolicies=JSON.parse(t)}catch{console.error("Failed to set available policies")}if("active-policies"===e&&(this.#i=(t||"").split(",")),"data-password-policy-value-minlength"===e){const e=Number(t);!Number.isNaN(e)&&e>0&&(this.#t={...this.#t,minlength:{value:`${e}`}})}}this.renderItems(this.#e,this.#i,this.#t)}}get availablePolicies(){return this.#e||[]}set availablePolicies(e){this.#e=e}get value(){return this.getAttribute("value")||""}validate(){let e=this.#e;return this.#t&&(e=this.#e.map((e=>this.#t[e.id]?{...e,data:this.#t[e.id]}:e))),this.#i.reduce(((i,t)=>{const l=e.find((e=>e.id===t));if(!l)return i;const{pattern:a,message:s,data:r}=l;if(!a||!s)return i;const n={valid:new RegExp(o(a,r)).test(this.value),message:o(s,r),id:t};return i.push(n),i}),[])}get isValid(){return!this.validate().some((({valid:e})=>!1===e))}getValidationItemTemplate({valid:e,message:i}){return`\n      <li class="item" data-valid="${this.value?e:"none"}">\n        <span class="message">${i}</span>\n      </li>\n    `}renderItems(e,i){e&&i.length&&(this.list.innerHTML=this.validate().map(this.getValidationItemTemplate.bind(this)).join(""))}updateLabel(e){e?(this.label.innerHTML=e,this.classList.remove("hide-label")):(this.classList.add("hide-label"),this.label.innerHTML="")}}const{host:h,item:b,symbolDefault:u,symbolSuccess:m,symbolError:v}={host:{selector:()=>":host > div"},item:{selector:()=>".item"},symbolDefault:{selector:()=>'.item[data-valid="none"]::before'},symbolSuccess:{selector:()=>'.item[data-valid="true"]::before'},symbolError:{selector:()=>'.item[data-valid="false"]::before'}},y=(0,s.qC)((0,l.yk)({componentNameOverride:(0,r.iY)("input-wrapper")}),(0,l.yk)({mappings:{hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},padding:{},borderWidth:{...h,property:"border-width"},borderStyle:{...h,property:"border-style"},borderColor:{...h,property:"border-color"},borderRadius:{...h,property:"border-radius"},backgroundColor:{...h,property:"background-color"},textColor:{property:"color"},labelMargin:{...h,property:"gap"},itemsSpacing:{...b,property:"line-height"},itemSymbolSuccessColor:{...m,property:"color"},itemSymbolErrorColor:{...v,property:"color"},itemSymbolDefault:{...u,property:"content"},itemSymbolSuccess:{...m,property:"content"},itemSymbolError:{...v,property:"content"}}}),l.e4,l.Ae)(p);customElements.define(n,y)}}]);

package/dist/umd/index.js

@@ -1 +1 @@
-!function(e,s){"object"==typeof exports&&"object"==typeof module?module.exports=s():"function"==typeof define&&define.amd?define([],s):"object"==typeof exports?exports.DescopeUI=s():e.DescopeUI=s()}(self,(()=>(()=>{var e,s,o,n={534:(e,s,o)=>{var n={"./boolean-fields/descope-boolean-field-internal/index.js":[6676,5910,4567,1e3,3878,769],"./boolean-fields/descope-checkbox/index.js":[3483,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,3092,4567,1e3,3878,4201,769,4803,3726],"./boolean-fields/descope-switch-toggle/index.js":[9203,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,3092,4567,1e3,3878,4201,769,4803,4483],"./button-selection-group-fields/descope-button-multi-selection-group-internal/index.js":[6793,5910,4567,1e3,3878,9214,9122],"./button-selection-group-fields/descope-button-multi-selection-group/index.js":[3795,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,3878,4201,9662,9214,6656,9434,9122,5263],"./button-selection-group-fields/descope-button-selection-group-internal/index.js":[8901,5910,4567,1e3,3878,9214,2313],"./button-selection-group-fields/descope-button-selection-group-item/index.js":[4873,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,9662,6656],"./button-selection-group-fields/descope-button-selection-group/index.js":[4887,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,3878,4201,9662,9214,6656,9434,2313,2861],"./descope-avatar/index.js":[3120,5910,7531,4226,2066,2269,6606,1037,4946,9320,9189,6091,3373,9680,6977,2106,2775,4567,1e3,8873],"./descope-badge/index.js":[4021,5910,4567,1e3,8012],"./descope-button/index.js":[2018,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,9662],"./descope-combo-box/index.js":[1294,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,262,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,4201,9483],"./descope-container/index.js":[7107,5910,4567,1e3,7317],"./descope-date-picker/index.js":[2552,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,1224,9320,9211,9189,6091,3373,9383,9092,4567,1e3,8017],"./descope-divider/index.js":[6162,5910,4567,1e3,2528,4178],"./descope-email-field/index.js":[1272,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9437,4567,1e3,4201,4447,9760],"./descope-grid/descope-grid-custom-column/index.js":[9278,7531,2066,262,4905,5517,322,4567,7044,5988],"./descope-grid/descope-grid-selection-column/index.js":[2238,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,4905,5517,3092,8623,4567,1e3,3878,4201,769,4803,3726,7487],"./descope-grid/descope-grid-text-column/index.js":[2356,7531,2066,262,4905,5517,322,4567,7044,3705],"./descope-grid/index.js":[9950,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,9189,4905,3003,9680,5517,3092,322,8623,63,4595,4567,1e3,3878,9461],"./descope-image/index.js":[8278,5910,4567,1e3,6772],"./descope-link/index.js":[5846,5910,4567,1e3,2528,58],"./descope-loader-linear/index.js":[7845,5910,4567,1e3,6453],"./descope-loader-radial/index.js":[5747,5910,4567,1e3,3072],"./descope-logo/index.js":[1034,5910,4567,1e3,3585,1984],"./descope-modal/index.js":[958,5910,7531,4226,2269,1037,262,9320,9189,6091,6687,1940,4567,1e3,4641],"./descope-multi-select-combo-box/index.js":[9393,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,262,9320,9189,4905,6091,3373,3003,9383,8866,9680,6687,63,1438,4567,1e3,4201,3840],"./descope-new-password/descope-new-password-internal/index.js":[1545,5910,4567,1e3,3878,4201,2481,1842],"./descope-new-password/index.js":[8974,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,9211,7056,4567,1e3,3878,4201,4447,2934,2481,1842,8106,7055],"./descope-notification/descope-notification-card/index.js":[5400,5910,7531,4226,1037,262,9320,6977,3951,4567,1e3,7401],"./descope-notification/index.js":[1845,5910,7531,4226,1037,262,9320,6977,3951,4567,1e3,7401,9655],"./descope-notp-image/index.js":[6016,5910,4567,1e3,3585,869],"./descope-number-field/index.js":[6916,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,5806,4567,1e3,4201,4447,2142],"./descope-passcode/descope-passcode-internal/index.js":[4775,5910,4567,1e3,3878,1841],"./descope-passcode/index.js":[4919,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9789,4567,1e3,3878,4201,4447,2934,1841,3072,939],"./descope-password/index.js":[9279,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9211,7056,4567,1e3,4201,2481,8106],"./descope-recaptcha/index.js":[8164,5910,4567,1e3,964],"./descope-text-area/index.js":[1962,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,422,9680,6770,4567,1e3,4201,3322],"./descope-text-field/index.js":[9357,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9789,4567,1e3,4201,4447,2934],"./descope-text/index.js":[1876,5910,4567,1e3,2528],"./descope-totp-image/index.js":[1331,5910,4567,1e3,3585,5364],"./descope-upload-file/index.js":[6667,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,3878,9662,5874],"./descope-user-attribute/index.js":[4199,5910,7531,4226,2066,2269,6606,3249,1037,4946,1224,9211,1721,9680,6977,7911,4567,1e3,9662,2528,8012,1722],"./mapping-fields/descope-mappings-field/descope-mapping-item/index.js":[6751,5910,4567,1e3,3878,3172],"./mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js":[3820,5910,4567,1e3,3878,5130],"./mapping-fields/descope-mappings-field/index.js":[5894,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,9320,9211,9189,4905,6091,3373,3003,9383,1721,8866,9680,7583,6977,2106,9299],"./mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js":[4115,5910,4567,1e3,3878,9656],"./mapping-fields/descope-saml-group-mappings/index.js":[3277,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,9320,9211,9189,4905,6091,3373,3003,9383,1721,8866,9680,7583,6977,2106,9299,9476],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[9240,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,262,9789,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,3878,4201,4447,9288],"./phone-fields/descope-phone-field/index.js":[6581,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,262,9789,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,3878,4201,4447,9806],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[3067,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9789,4567,1e3,3878,4201,4447,2934,4981],"./phone-fields/descope-phone-input-box-field/index.js":[9423,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,262,9789,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,3878,4201,4447,5119]};function i(e){if(!o.o(n,e))return Promise.resolve().then((()=>{var s=new Error("Cannot find module '"+e+"'");throw s.code="MODULE_NOT_FOUND",s}));var s=n[e],i=s[0];return Promise.all(s.slice(1).map(o.e)).then((()=>o(i)))}i.keys=()=>Object.keys(n),i.id=534,e.exports=i},5561:(e,s,o)=>{"use strict";o.r(s),o.d(s,{componentsThemeManager:()=>n});const n=new class{static mountOnPropName="DescopeThemeManager";#e={};#s="light";#o=new Set;#n(){this.#o.forEach((e=>e?.()))}get currentThemeName(){return this.#s}set currentThemeName(e){this.#s=e,this.#n()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#o.add(e),()=>{this.#o.delete(e)}}set themes(e){this.#e=e,this.#n()}get hasThemes(){return!!Object.keys(this.#e).length}}},7507:(e,s,o)=>{const{componentsThemeManager:n}=o(5561),i=o(534);e.exports=i.keys().reduce(((e,s)=>{const o=s.replace(/.*?([^\/]+)\/index\.js$/,"$1");return o.endsWith("-internal")||(e[o]=()=>i(s)),e}),{}),e.exports.componentsThemeManager=n}},i={};function d(e){var s=i[e];if(void 0!==s)return s.exports;var o=i[e]={exports:{}};return n[e](o,o.exports,d),o.exports}d.m=n,e=[],d.O=(s,o,n,i)=>{if(!o){var t=1/0;for(a=0;a<e.length;a++){for(var[o,n,i]=e[a],p=!0,c=0;c<o.length;c++)(!1&i||t>=i)&&Object.keys(d.O).every((e=>d.O[e](o[c])))?o.splice(c--,1):(p=!1,i<t&&(t=i));if(p){e.splice(a--,1);var r=n();void 0!==r&&(s=r)}}return s}i=i||0;for(var a=e.length;a>0&&e[a-1][2]>i;a--)e[a]=e[a-1];e[a]=[o,n,i]},d.F={},d.E=e=>{Object.keys(d.F).map((s=>{d.F[s](e)}))},d.n=e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return d.d(s,{a:s}),s},d.d=(e,s)=>{for(var o in s)d.o(s,o)&&!d.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:s[o]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((s,o)=>(d.f[o](e,s),s)),[])),d.u=e=>(({58:"descope-link-index-js",769:"boolean-fields-descope-boolean-field-internal-index-js",869:"descope-notp-image-index-js",939:"descope-passcode-index-js",964:"descope-recaptcha-index-js",1722:"descope-user-attribute-index-js",1841:"descope-passcode-descope-passcode-internal-index-js",1842:"descope-new-password-descope-new-password-internal-index-js",1984:"descope-logo-index-js",2142:"descope-number-field-index-js",2313:"button-selection-group-fields-descope-button-selection-group-internal-index-js",2528:"descope-text-index-js",2861:"button-selection-group-fields-descope-button-selection-group-index-js",2934:"descope-text-field-index-js",3072:"descope-loader-radial-index-js",3172:"mapping-fields-descope-mappings-field-descope-mapping-item-index-js",3322:"descope-text-area-index-js",3705:"descope-grid-descope-grid-text-column-index-js",3726:"boolean-fields-descope-checkbox-index-js",3840:"descope-multi-select-combo-box-index-js",4178:"descope-divider-index-js",4483:"boolean-fields-descope-switch-toggle-index-js",4641:"descope-modal-index-js",4981:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",5119:"phone-fields-descope-phone-input-box-field-index-js",5130:"mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js",5263:"button-selection-group-fields-descope-button-multi-selection-group-index-js",5364:"descope-totp-image-index-js",5874:"descope-upload-file-index-js",5988:"descope-grid-descope-grid-custom-column-index-js",6453:"descope-loader-linear-index-js",6656:"button-selection-group-fields-descope-button-selection-group-item-index-js",6772:"descope-image-index-js",7055:"descope-new-password-index-js",7317:"descope-container-index-js",7401:"descope-notification-descope-notification-card-index-js",7487:"descope-grid-descope-grid-selection-column-index-js",8012:"descope-badge-index-js",8017:"descope-date-picker-index-js",8106:"descope-password-index-js",8873:"descope-avatar-index-js",9122:"button-selection-group-fields-descope-button-multi-selection-group-internal-index-js",9288:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",9299:"mapping-fields-descope-mappings-field-index-js",9461:"descope-grid-index-js",9476:"mapping-fields-descope-saml-group-mappings-index-js",9483:"descope-combo-box-index-js",9655:"descope-notification-index-js",9656:"mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js",9662:"descope-button-index-js",9760:"descope-email-field-index-js",9806:"phone-fields-descope-phone-field-index-js"}[e]||e)+".js"),d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,s)=>Object.prototype.hasOwnProperty.call(e,s),s={},o="DescopeUI:",d.l=(e,n,i,t)=>{if(s[e])s[e].push(n);else{var p,c;if(void 0!==i)for(var r=document.getElementsByTagName("script"),a=0;a<r.length;a++){var l=r[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+i){p=l;break}}p||(c=!0,(p=document.createElement("script")).charset="utf-8",p.timeout=120,d.nc&&p.setAttribute("nonce",d.nc),p.setAttribute("data-webpack",o+i),p.src=e),s[e]=[n];var u=(o,n)=>{p.onerror=p.onload=null,clearTimeout(x);var i=s[e];if(delete s[e],p.parentNode&&p.parentNode.removeChild(p),i&&i.forEach((e=>e(n))),o)return o(n)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:p}),12e4);p.onerror=u.bind(null,p.onerror),p.onload=u.bind(null,p.onload),c&&document.head.appendChild(p)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;d.g.importScripts&&(e=d.g.location+"");var s=d.g.document;if(!e&&s&&(s.currentScript&&(e=s.currentScript.src),!e)){var o=s.getElementsByTagName("script");if(o.length)for(var n=o.length-1;n>-1&&!e;)e=o[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),d.p=e})(),(()=>{var e={4826:0};d.f.j=(s,o)=>{var n=d.o(e,s)?e[s]:void 0;if(0!==n)if(n)o.push(n[2]);else{var i=new Promise(((o,i)=>n=e[s]=[o,i]));o.push(n[2]=i);var t=d.p+d.u(s),p=new Error;d.l(t,(o=>{if(d.o(e,s)&&(0!==(n=e[s])&&(e[s]=void 0),n)){var i=o&&("load"===o.type?"missing":o.type),t=o&&o.target&&o.target.src;p.message="Loading chunk "+s+" failed.\n("+i+": "+t+")",p.name="ChunkLoadError",p.type=i,p.request=t,n[1](p)}}),"chunk-"+s,s)}},d.F.j=s=>{if(!d.o(e,s)||void 0===e[s]){e[s]=null;var o=document.createElement("link");d.nc&&o.setAttribute("nonce",d.nc),o.rel="prefetch",o.as="script",o.href=d.p+d.u(s),document.head.appendChild(o)}},d.O.j=s=>0===e[s];var s=(s,o)=>{var n,i,[t,p,c]=o,r=0;if(t.some((s=>0!==e[s]))){for(n in p)d.o(p,n)&&(d.m[n]=p[n]);if(c)var a=c(d)}for(s&&s(o);r<t.length;r++)i=t[r],d.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return d.O(a)},o=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];o.forEach(s.bind(null,0)),o.push=s.bind(null,o.push.bind(o))})(),d.O(0,[4826],(()=>{[5910,4567,1e3,3878,769,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,3092,4201,4803,3726,4483,9214,9122,9211,1721,9662,6656,9434,5263,2313,2861,9320,9189,6091,3373,9680,6977,2106,2775,8873,8012,262,4905,3003,9383,8866,7583,9483,7317,9092,8017,2528,4178,9437,4447,9760,5517,322,7044,5988,8623,7487,3705,63,4595,9461,6772,58,6453,3072,3585,1984,6687,1940,4641,1438,3840,2481,1842,7056,2934,8106,7055,3951,7401,9655,869,5806,2142,1841,939,964,6770,3322,5364,5874,7911,1722,3172,5130,9299,9656,9476,9288,9806,4981,5119].map(d.E)}),5);var t=d(7507);return d.O(t)})()));
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,s,n={534:(e,o,s)=>{var n={"./boolean-fields/descope-boolean-field-internal/index.js":[6676,5910,4567,1e3,3878,769],"./boolean-fields/descope-checkbox/index.js":[3483,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,3092,4567,1e3,3878,4201,769,4803,3726],"./boolean-fields/descope-switch-toggle/index.js":[9203,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,3092,4567,1e3,3878,4201,769,4803,4483],"./button-selection-group-fields/descope-button-multi-selection-group-internal/index.js":[6793,5910,4567,1e3,3878,9214,9122],"./button-selection-group-fields/descope-button-multi-selection-group/index.js":[3795,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,3878,4201,9662,9214,6656,9434,9122,5263],"./button-selection-group-fields/descope-button-selection-group-internal/index.js":[8901,5910,4567,1e3,3878,9214,2313],"./button-selection-group-fields/descope-button-selection-group-item/index.js":[4873,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,9662,6656],"./button-selection-group-fields/descope-button-selection-group/index.js":[4887,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,3878,4201,9662,9214,6656,9434,2313,2861],"./descope-avatar/index.js":[3120,5910,7531,4226,2066,2269,6606,1037,4946,9320,9189,6091,3373,9680,6977,2106,2775,4567,1e3,8873],"./descope-badge/index.js":[4021,5910,4567,1e3,8012],"./descope-button/index.js":[2018,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,9662],"./descope-combo-box/index.js":[1294,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,262,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,4201,9483],"./descope-container/index.js":[7107,5910,4567,1e3,7317],"./descope-date-picker/index.js":[2552,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,1224,9320,9211,9189,6091,3373,9383,9092,4567,1e3,8017],"./descope-divider/index.js":[6162,5910,4567,1e3,2528,4178],"./descope-email-field/index.js":[1272,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9437,4567,1e3,4201,4447,9760],"./descope-grid/descope-grid-custom-column/index.js":[9278,7531,2066,262,4905,5517,322,4567,7044,5988],"./descope-grid/descope-grid-selection-column/index.js":[2238,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,4905,5517,3092,8623,4567,1e3,3878,4201,769,4803,3726,7487],"./descope-grid/descope-grid-text-column/index.js":[2356,7531,2066,262,4905,5517,322,4567,7044,3705],"./descope-grid/index.js":[9950,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,9189,4905,3003,9680,5517,3092,322,8623,63,4595,4567,1e3,3878,9461],"./descope-image/index.js":[8278,5910,4567,1e3,6772],"./descope-link/index.js":[5846,5910,4567,1e3,2528,58],"./descope-loader-linear/index.js":[7845,5910,4567,1e3,6453],"./descope-loader-radial/index.js":[5747,5910,4567,1e3,3072],"./descope-logo/index.js":[1034,5910,4567,1e3,3585,1984],"./descope-modal/index.js":[958,5910,7531,4226,2269,1037,262,9320,9189,6091,6687,1940,4567,1e3,4641],"./descope-multi-select-combo-box/index.js":[9393,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,262,9320,9189,4905,6091,3373,3003,9383,8866,9680,6687,63,1438,4567,1e3,4201,3840],"./descope-new-password/descope-new-password-internal/index.js":[1545,5910,4567,1e3,3878,4201,4570,2481,1842],"./descope-new-password/index.js":[8974,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,9211,7056,4567,1e3,3878,4201,4447,2934,4570,2481,1842,8106,7055],"./descope-notification/descope-notification-card/index.js":[5400,5910,7531,4226,1037,262,9320,6977,3951,4567,1e3,7401],"./descope-notification/index.js":[1845,5910,7531,4226,1037,262,9320,6977,3951,4567,1e3,7401,9655],"./descope-notp-image/index.js":[6016,5910,4567,1e3,3585,869],"./descope-number-field/index.js":[6916,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,5806,4567,1e3,4201,4447,2142],"./descope-passcode/descope-passcode-internal/index.js":[4775,5910,4567,1e3,3878,1841],"./descope-passcode/index.js":[4919,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9789,4567,1e3,3878,4201,4447,2934,1841,3072,939],"./descope-password/index.js":[9279,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9211,7056,4567,1e3,4201,2481,8106],"./descope-policy-validation/index.js":[7028,5910,4567,1e3,4570],"./descope-recaptcha/index.js":[8164,5910,4567,1e3,964],"./descope-text-area/index.js":[1962,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,422,9680,6770,4567,1e3,4201,3322],"./descope-text-field/index.js":[9357,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9789,4567,1e3,4201,4447,2934],"./descope-text/index.js":[1876,5910,4567,1e3,2528],"./descope-totp-image/index.js":[1331,5910,4567,1e3,3585,5364],"./descope-upload-file/index.js":[6667,5910,7531,4226,2066,2269,6606,3249,1224,9211,1721,4567,1e3,3878,9662,5874],"./descope-user-attribute/index.js":[4199,5910,7531,4226,2066,2269,6606,3249,1037,4946,1224,9211,1721,9680,6977,7911,4567,1e3,9662,2528,8012,1722],"./mapping-fields/descope-mappings-field/descope-mapping-item/index.js":[6751,5910,4567,1e3,3878,3172],"./mapping-fields/descope-mappings-field/descope-mappings-field-internal/index.js":[3820,5910,4567,1e3,3878,5130],"./mapping-fields/descope-mappings-field/index.js":[5894,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,9320,9211,9189,4905,6091,3373,3003,9383,1721,8866,9680,7583,6977,2106,9299],"./mapping-fields/descope-saml-group-mappings/descope-saml-group-mappings-internal/index.js":[4115,5910,4567,1e3,3878,9656],"./mapping-fields/descope-saml-group-mappings/index.js":[3277,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,262,9789,9320,9211,9189,4905,6091,3373,3003,9383,1721,8866,9680,7583,6977,2106,9299,9476],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[9240,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,262,9789,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,3878,4201,4447,9288],"./phone-fields/descope-phone-field/index.js":[6581,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,262,9789,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,3878,4201,4447,9806],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[3067,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,9789,4567,1e3,3878,4201,4447,2934,4981],"./phone-fields/descope-phone-input-box-field/index.js":[9423,5910,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,8725,262,9789,9320,9189,4905,6091,3373,3003,9383,8866,7583,4567,1e3,3878,4201,4447,5119]};function i(e){if(!s.o(n,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=n[e],i=o[0];return Promise.all(o.slice(1).map(s.e)).then((()=>s(i)))}i.keys=()=>Object.keys(n),i.id=534,e.exports=i},5561:(e,o,s)=>{"use strict";s.r(o),s.d(o,{componentsThemeManager:()=>n});const n=new class{static mountOnPropName="DescopeThemeManager";#e={};#o="light";#s=new Set;#n(){this.#s.forEach((e=>e?.()))}get currentThemeName(){return this.#o}set currentThemeName(e){this.#o=e,this.#n()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#s.add(e),()=>{this.#s.delete(e)}}set themes(e){this.#e=e,this.#n()}get hasThemes(){return!!Object.keys(this.#e).length}}},7507:(e,o,s)=>{const{componentsThemeManager:n}=s(5561),i=s(534);e.exports=i.keys().reduce(((e,o)=>{const s=o.replace(/.*?([^\/]+)\/index\.js$/,"$1");return s.endsWith("-internal")||(e[s]=()=>i(o)),e}),{}),e.exports.componentsThemeManager=n}},i={};function d(e){var o=i[e];if(void 0!==o)return o.exports;var s=i[e]={exports:{}};return n[e](s,s.exports,d),s.exports}d.m=n,e=[],d.O=(o,s,n,i)=>{if(!s){var t=1/0;for(a=0;a<e.length;a++){for(var[s,n,i]=e[a],p=!0,c=0;c<s.length;c++)(!1&i||t>=i)&&Object.keys(d.O).every((e=>d.O[e](s[c])))?s.splice(c--,1):(p=!1,i<t&&(t=i));if(p){e.splice(a--,1);var r=n();void 0!==r&&(o=r)}}return o}i=i||0;for(var a=e.length;a>0&&e[a-1][2]>i;a--)e[a]=e[a-1];e[a]=[s,n,i]},d.F={},d.E=e=>{Object.keys(d.F).map((o=>{d.F[o](e)}))},d.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return d.d(o,{a:o}),o},d.d=(e,o)=>{for(var s in o)d.o(o,s)&&!d.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((o,s)=>(d.f[s](e,o),o)),[])),d.u=e=>(({58:"descope-link-index-js",769:"boolean-fields-descope-boolean-field-internal-index-js",869:"descope-notp-image-index-js",939:"descope-passcode-index-js",964:"descope-recaptcha-index-js",1722:"descope-user-attribute-index-js",1841:"descope-passcode-descope-passcode-internal-index-js",1842:"descope-new-password-descope-new-password-internal-index-js",1984:"descope-logo-index-js",2142:"descope-number-field-index-js",2313:"button-selection-group-fields-descope-button-selection-group-internal-index-js",2528:"descope-text-index-js",2861:"button-selection-group-fields-descope-button-selection-group-index-js",2934:"descope-text-field-index-js",3072:"descope-loader-radial-index-js",3172:"mapping-fields-descope-mappings-field-descope-mapping-item-index-js",3322:"descope-text-area-index-js",3705:"descope-grid-descope-grid-text-column-index-js",3726:"boolean-fields-descope-checkbox-index-js",3840:"descope-multi-select-combo-box-index-js",4178:"descope-divider-index-js",4483:"boolean-fields-descope-switch-toggle-index-js",4570:"descope-policy-validation-index-js",4641:"descope-modal-index-js",4981:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",5119:"phone-fields-descope-phone-input-box-field-index-js",5130:"mapping-fields-descope-mappings-field-descope-mappings-field-internal-index-js",5263:"button-selection-group-fields-descope-button-multi-selection-group-index-js",5364:"descope-totp-image-index-js",5874:"descope-upload-file-index-js",5988:"descope-grid-descope-grid-custom-column-index-js",6453:"descope-loader-linear-index-js",6656:"button-selection-group-fields-descope-button-selection-group-item-index-js",6772:"descope-image-index-js",7055:"descope-new-password-index-js",7317:"descope-container-index-js",7401:"descope-notification-descope-notification-card-index-js",7487:"descope-grid-descope-grid-selection-column-index-js",8012:"descope-badge-index-js",8017:"descope-date-picker-index-js",8106:"descope-password-index-js",8873:"descope-avatar-index-js",9122:"button-selection-group-fields-descope-button-multi-selection-group-internal-index-js",9288:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",9299:"mapping-fields-descope-mappings-field-index-js",9461:"descope-grid-index-js",9476:"mapping-fields-descope-saml-group-mappings-index-js",9483:"descope-combo-box-index-js",9655:"descope-notification-index-js",9656:"mapping-fields-descope-saml-group-mappings-descope-saml-group-mappings-internal-index-js",9662:"descope-button-index-js",9760:"descope-email-field-index-js",9806:"phone-fields-descope-phone-field-index-js"}[e]||e)+".js"),d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},s="DescopeUI:",d.l=(e,n,i,t)=>{if(o[e])o[e].push(n);else{var p,c;if(void 0!==i)for(var r=document.getElementsByTagName("script"),a=0;a<r.length;a++){var l=r[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==s+i){p=l;break}}p||(c=!0,(p=document.createElement("script")).charset="utf-8",p.timeout=120,d.nc&&p.setAttribute("nonce",d.nc),p.setAttribute("data-webpack",s+i),p.src=e),o[e]=[n];var u=(s,n)=>{p.onerror=p.onload=null,clearTimeout(x);var i=o[e];if(delete o[e],p.parentNode&&p.parentNode.removeChild(p),i&&i.forEach((e=>e(n))),s)return s(n)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:p}),12e4);p.onerror=u.bind(null,p.onerror),p.onload=u.bind(null,p.onload),c&&document.head.appendChild(p)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;d.g.importScripts&&(e=d.g.location+"");var o=d.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var s=o.getElementsByTagName("script");if(s.length)for(var n=s.length-1;n>-1&&!e;)e=s[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),d.p=e})(),(()=>{var e={4826:0};d.f.j=(o,s)=>{var n=d.o(e,o)?e[o]:void 0;if(0!==n)if(n)s.push(n[2]);else{var i=new Promise(((s,i)=>n=e[o]=[s,i]));s.push(n[2]=i);var t=d.p+d.u(o),p=new Error;d.l(t,(s=>{if(d.o(e,o)&&(0!==(n=e[o])&&(e[o]=void 0),n)){var i=s&&("load"===s.type?"missing":s.type),t=s&&s.target&&s.target.src;p.message="Loading chunk "+o+" failed.\n("+i+": "+t+")",p.name="ChunkLoadError",p.type=i,p.request=t,n[1](p)}}),"chunk-"+o,o)}},d.F.j=o=>{if(!d.o(e,o)||void 0===e[o]){e[o]=null;var s=document.createElement("link");d.nc&&s.setAttribute("nonce",d.nc),s.rel="prefetch",s.as="script",s.href=d.p+d.u(o),document.head.appendChild(s)}},d.O.j=o=>0===e[o];var o=(o,s)=>{var n,i,[t,p,c]=s,r=0;if(t.some((o=>0!==e[o]))){for(n in p)d.o(p,n)&&(d.m[n]=p[n]);if(c)var a=c(d)}for(o&&o(s);r<t.length;r++)i=t[r],d.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return d.O(a)},s=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];s.forEach(o.bind(null,0)),s.push=o.bind(null,s.push.bind(s))})(),d.O(0,[4826],(()=>{[5910,4567,1e3,3878,769,7531,4226,2066,2269,6606,3249,1037,4946,1621,3208,422,1224,8725,9789,3092,4201,4803,3726,4483,9214,9122,9211,1721,9662,6656,9434,5263,2313,2861,9320,9189,6091,3373,9680,6977,2106,2775,8873,8012,262,4905,3003,9383,8866,7583,9483,7317,9092,8017,2528,4178,9437,4447,9760,5517,322,7044,5988,8623,7487,3705,63,4595,9461,6772,58,6453,3072,3585,1984,6687,1940,4641,1438,3840,4570,2481,1842,7056,2934,8106,7055,3951,7401,9655,869,5806,2142,1841,939,964,6770,3322,5364,5874,7911,1722,3172,5130,9299,9656,9476,9288,9806,4981,5119].map(d.E)}),5);var t=d(7507);return d.O(t)})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.291",
+  "version": "1.0.293",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-new-password/NewPasswordClass.js

@@ -4,9 +4,12 @@ import { createStyleMixin, proxyInputMixin, draggableMixin, createProxy } from '
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
 import { PasswordClass } from '../descope-password/PasswordClass';
 import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import { PolicyValidationClass } from '../descope-policy-validation';
 
 export const componentName = getComponentName('new-password');
 
+const policyPreviewVars = PolicyValidationClass.cssVarList;
+
 const customMixin = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
@@ -40,18 +43,32 @@ const customMixin = (superclass) =>
           'invalid',
           'readonly',
           'draggable',
+          'has-validation',
+          'policy-label',
+          'active-policies',
+          'available-policies',
+          'data-password-policy-value-minlength',
         ],
       });
     }
   };
 
-const { host, label, internalInputsWrapper, errorMessage, helperText, passwordInput } = {
+const {
+  host,
+  label,
+  internalInputsWrapper,
+  errorMessage,
+  helperText,
+  passwordInput,
+  policyPreview,
+} = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
   passwordInput: { selector: 'descope-password' },
+  policyPreview: { selector: 'descope-policy-validation' },
 };
 
 export const NewPasswordClass = compose(
@@ -75,6 +92,11 @@ export const NewPasswordClass = compose(
       ],
       inputsRequiredIndicator: { ...host, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
+      policyPreviewBackgroundColor: {
+        ...policyPreview,
+        property: policyPreviewVars.backgroundColor,
+      },
+      policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
     },
   }),
   draggableMixin,
@@ -113,7 +135,6 @@ export const NewPasswordClass = compose(
 			-webkit-mask-image: none;
 			min-height: 0;
 			width: 100%;
-			height: 100%;
 			padding: 0;
 		}
 		descope-new-password-internal > .wrapper {
@@ -129,6 +150,13 @@ export const NewPasswordClass = compose(
 		descope-new-password-internal vaadin-password-field::before {
 			height: initial;
 		}
+    descope-policy-validation {
+      margin-top: 8px;
+      display: flex;
+    }
+    descope-policy-validation.hidden {
+      display: none;
+    }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -1,5 +1,5 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import { observeAttributes } from '../../../helpers/componentHelpers';
+import { forwardAttrs, observeAttributes } from '../../../helpers/componentHelpers';
 import { NewPasswordClass } from '../NewPasswordClass';
 import { componentName } from './componentName';
 
@@ -10,6 +10,7 @@ const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
 
 const passwordInputAttrs = ['password-label', 'password-placeholder'];
 const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
+const policyPanelAttrs = ['has-validation'];
 const commonAttrs = [
   'disabled',
   'bordered',
@@ -22,7 +23,12 @@ const commonAttrs = [
   'autocomplete',
 ];
 
-const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
+const inputRelatedAttrs = [].concat(
+  commonAttrs,
+  passwordInputAttrs,
+  confirmInputAttrs,
+  policyPanelAttrs
+);
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
@@ -54,7 +60,15 @@ class NewPasswordInternal extends BaseInputClass {
     return this.getAttribute('has-confirm') === 'true';
   }
 
+  get hasValidation() {
+    return this.getAttribute('has-validation') === 'true';
+  }
+
   getValidity() {
+    if (!this.policyPanel.isValid) {
+      return { patternMismatch: true };
+    }
+
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
     }
@@ -85,7 +99,12 @@ class NewPasswordInternal extends BaseInputClass {
   }
 
   renderInputs(shouldRenderConfirm) {
-    let template = `<descope-password data-id="password"></descope-password>`;
+    let template = `
+      <div>
+        <descope-password data-id="password"></descope-password>
+        <descope-policy-validation></descope-policy-validation>
+      </div>
+    `;
 
     if (shouldRenderConfirm) {
       template += `<descope-password data-id="confirm"></descope-password>`;
@@ -95,6 +114,7 @@ class NewPasswordInternal extends BaseInputClass {
 
     this.passwordInput = this.querySelector('[data-id="password"]');
     this.confirmInput = this.querySelector('[data-id="confirm"]');
+    this.policyPanel = this.querySelector('descope-policy-validation');
 
     this.inputs = [this.passwordInput, this.confirmInput];
 
@@ -105,6 +125,23 @@ class NewPasswordInternal extends BaseInputClass {
     [...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
       this.attributeChangedCallback(attr, null, this.getAttribute(attr));
     });
+
+    this.passwordInput.addEventListener('input', (e) => {
+      this.policyPanel.setAttribute('value', e.target.value);
+    });
+
+    forwardAttrs(this, this.policyPanel, {
+      includeAttrs: [
+        'policy-label',
+        'available-policies',
+        'active-policies',
+        'data-password-policy-value-minlength',
+      ],
+      mapAttrs: {
+        'policy-label': 'label',
+        'available-policies': 'data',
+      },
+    });
   }
 
   // the inputs are not required but we still want it to have a required
@@ -164,6 +201,14 @@ class NewPasswordInternal extends BaseInputClass {
     value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
   }
 
+  hidePolicy() {
+    this.policyPanel.classList.add('hidden');
+  }
+
+  showPolicy() {
+    this.policyPanel.classList.remove('hidden');
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -185,6 +230,9 @@ class NewPasswordInternal extends BaseInputClass {
           newValue
         );
       }
+      if (attrName === 'has-validation') {
+        newValue === 'true' ? this.showPolicy() : this.hidePolicy();
+      }
     }
   }
 }

package/src/components/descope-new-password/index.js

@@ -1,6 +1,7 @@
 import { componentName, NewPasswordClass } from './NewPasswordClass';
 import '../descope-text-field';
 import '../descope-password';
+import '../descope-policy-validation';
 import './descope-new-password-internal';
 
 customElements.define(componentName, NewPasswordClass);

package/src/components/descope-policy-validation/PolicyValidationClass.js

@@ -0,0 +1,220 @@
+// eslint-disable-next-line max-classes-per-file
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { interpolateString } from './helpers';
+
+export const componentName = getComponentName('policy-validation');
+
+const overrideAttrs = ['data-password-policy-value-minlength'];
+const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
+const policyAttrs = ['label', 'value', ...dataAttrs];
+
+class RawPolicyValidation extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  #availablePolicies;
+
+  #activePolicies = [];
+
+  #overrides;
+
+  static get observedAttributes() {
+    return policyAttrs;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div>
+      <div class="label"></div>
+      <ul></ul>
+    </div>
+    <style>
+      :host > div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
+      .label {
+        max-width: 100%;
+        text-wrap: wrap;
+        overflow-wrap: break-word;
+      }
+      .hide-label .label {
+        display: none;
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+      }
+      ul, li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      li::before {
+        display: inline-block;
+        width: 1em;
+        text-align: center;
+      }
+    </style>
+		`;
+
+    this.panel = this.shadowRoot.querySelector(':host > div');
+    this.label = this.shadowRoot.querySelector('.label');
+    this.list = this.shadowRoot.querySelector('ul');
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue !== newValue) {
+      if (attrName === 'label') {
+        this.updateLabel(newValue);
+      }
+
+      // we're don't know the order in which the attributes are forwarded, so we're trying to render every time
+      // once `data` and `active-policies` are populated, the render will be executed.
+      // once the `overrides` object is updated, we want to re-render the panel.
+      if (dataAttrs.includes(attrName)) {
+        if (attrName === 'data') {
+          try {
+            this.availablePolicies = JSON.parse(newValue);
+          } catch {
+            // eslint-disable-next-line no-console
+            console.error('Failed to set available policies');
+          }
+        }
+        if (attrName === 'active-policies') {
+          this.#activePolicies = (newValue || '').split(',');
+        }
+
+        if (attrName === 'data-password-policy-value-minlength') {
+          const ln = Number(newValue);
+          if (!Number.isNaN(ln) && ln > 0) {
+            this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
+          }
+        }
+      }
+
+      this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
+    }
+  }
+
+  get availablePolicies() {
+    return this.#availablePolicies || [];
+  }
+
+  set availablePolicies(val) {
+    this.#availablePolicies = val;
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  validate() {
+    let policies = this.#availablePolicies;
+
+    if (this.#overrides) {
+      policies = this.#availablePolicies.map((policy) =>
+        this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
+      );
+    }
+
+    return this.#activePolicies.reduce((results, id) => {
+      const policy = policies.find((p) => p.id === id);
+
+      if (!policy) {
+        return results;
+      }
+
+      const { pattern, message, data } = policy;
+
+      if (!pattern || !message) {
+        return results;
+      }
+
+      const exp = new RegExp(interpolateString(pattern, data));
+
+      const validationResult = {
+        valid: exp.test(this.value),
+        message: interpolateString(message, data),
+        id,
+      };
+
+      results.push(validationResult);
+
+      return results;
+    }, []);
+  }
+
+  get isValid() {
+    return !this.validate().some(({ valid }) => valid === false);
+  }
+
+  getValidationItemTemplate({ valid, message }) {
+    const status = !this.value ? 'none' : valid;
+    return `
+      <li class="item" data-valid="${status}">
+        <span class="message">${message}</span>
+      </li>
+    `;
+  }
+
+  renderItems(availablePolicies, activePolicies) {
+    if (!availablePolicies || !activePolicies.length) {
+      return;
+    }
+
+    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+  }
+
+  updateLabel(val) {
+    if (!val) {
+      this.classList.add('hide-label');
+      this.label.innerHTML = '';
+    } else {
+      this.label.innerHTML = val;
+      this.classList.remove('hide-label');
+    }
+  }
+}
+
+const { host, item, symbolDefault, symbolSuccess, symbolError } = {
+  host: { selector: () => ':host > div' },
+  item: { selector: () => '.item' },
+  symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
+  symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
+  symbolError: { selector: () => '.item[data-valid="false"]::before' },
+};
+
+export const PolicyValidationClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      padding: {},
+      borderWidth: { ...host, property: 'border-width' },
+      borderStyle: { ...host, property: 'border-style' },
+      borderColor: { ...host, property: 'border-color' },
+      borderRadius: { ...host, property: 'border-radius' },
+      backgroundColor: { ...host, property: 'background-color' },
+      textColor: { property: 'color' },
+      labelMargin: { ...host, property: 'gap' },
+      itemsSpacing: { ...item, property: 'line-height' },
+      itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
+      itemSymbolErrorColor: { ...symbolError, property: 'color' },
+      itemSymbolDefault: { ...symbolDefault, property: 'content' },
+      itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
+      itemSymbolError: { ...symbolError, property: 'content' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawPolicyValidation);

package/src/components/descope-policy-validation/helpers.js

@@ -0,0 +1,2 @@
+export const interpolateString = (template, values) =>
+  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);

package/src/components/descope-policy-validation/index.js

@@ -0,0 +1,5 @@
+import { componentName, PolicyValidationClass } from './PolicyValidationClass';
+
+customElements.define(componentName, PolicyValidationClass);
+
+export { PolicyValidationClass };

package/src/index.cjs.js

@@ -41,3 +41,4 @@ export { AvatarClass } from './components/descope-avatar/AvatarClass';
 export { UserAttributeClass } from './components/descope-user-attribute/UserAttributeClass';
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
 export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
+export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';

package/src/index.d.ts

@@ -44,6 +44,7 @@ export { BadgeClass } from './components/descope-badge/';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/';
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/';
 export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/';
+export { PolicyValidationClass } from './components/descope-policy-validation/';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -35,6 +35,7 @@ export * from './components/descope-avatar';
 export * from './components/mapping-fields/descope-mappings-field';
 export * from './components/descope-user-attribute';
 export * from './components/mapping-fields/descope-saml-group-mappings';
+export * from './components/descope-policy-validation';
 
 export {
   globalsThemeToStyle,

package/src/theme/components/index.js

@@ -34,6 +34,7 @@ import * as avatar from './avatar';
 import * as mappingsField from './mappingsField';
 import * as userAttribute from './userAttribute';
 import * as samlGroupMappings from './samlGroupMappings';
+import * as policyValidation from './policyValidation';
 
 const components = {
   button,
@@ -73,6 +74,7 @@ const components = {
   mappingsField,
   userAttribute,
   samlGroupMappings,
+  policyValidation,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/inputWrapper.js

@@ -8,11 +8,13 @@ const globalRefs = getThemeRefs(globals);
 const [theme, refs, vars] = createHelperVars(
   {
     labelTextColor: globalRefs.colors.surface.dark,
+    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
     valueTextColor: globalRefs.colors.surface.contrast,
     placeholderTextColor: globalRefs.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs.colors.error.main,
     helperTextColor: globalRefs.colors.surface.dark,
+    errorMessageTextColor: globalRefs.colors.error.main,
+    successMessageTextColor: globalRefs.colors.success.main,
 
     borderWidth: globalRefs.border.xs,
     borderRadius: globalRefs.radius.xs,

package/src/theme/components/newPassword.js

@@ -1,6 +1,9 @@
+import globals from '../globals';
 import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
 import { refs } from './inputWrapper';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 
+const globalRefs = getThemeRefs(globals);
 const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
@@ -11,6 +14,8 @@ const newPassword = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.spaceBetweenInputs]: '1em',
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.policyPreviewBackgroundColor]: 'none',
+  [vars.policyPreviewPadding]: globalRefs.spacing.lg,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.