npm - @descope/web-components-ui - Versions diffs - 1.32.0 → 1.34.0 - Mend

@descope/web-components-ui 1.32.0 → 1.34.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 (321) hide show

package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js CHANGED Viewed

@@ -1 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359],{25827:(t,e,n)=>{n.d(e,{y:()=>a});var i=n(7138),s=n(94619),r=n(70263);const a=(...t)=>(0,i.Zz)(s.XX,s._$,s.yF,s.jd)((0,r.q)(...t))},45002:(t,e,n)=>{n.d(e,{A:()=>c,T:()=>o});var i=n(62051),s=n.n(i),r=n(25827),a=n(14944),l=n(10754);const o=(0,a.xE)("passcode-internal"),p=["digits","loading"],u=["disabled","bordered","size","invalid","readonly","aria-labelledby"],d=(0,r.y)({componentName:o,baseSelector:"div"}),c=class extends d{static get observedAttributes(){return p.concat(d.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t<style>\n\t\t\t.wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: space-between;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n\n      descope-text-field {\n        direction: ltr;\n      }\n\n      .loader-container {\n        display: none;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),n=Math.min(e+1,this.inputs.length-1);return this.inputs[n]}getPrevInput(t){const e=this.getInputIdx(t),n=Math.max(e-1,0);return this.inputs[n]}fillDigits(t,e){for(let n=0;n<t.length;n+=1){e.value=t[n]??"";const i=this.getNextInput(e);if(i===e)break;e=i}(0,l.pW)(e)}parseInputValue(t,e=""){const n=e.split("");n.length?this.fillDigits(n,t):t.value=""}initInputs(){this.inputs.forEach((t=>{t.shadowRoot.appendChild((0,l.Yr)());const e=s()((e=>{this.parseInputValue(t,e),(0,l.Z)(t)}),20,{trailing:!0});t.addEventListener("input",(n=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout((()=>{"deleteContentBackward"===n?.inputType&&(0,l.pW)(this.getPrevInput(t))})),e(t.value)})),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout((()=>(0,l.pW)(this.getPrevInput(t))),0):1===e.length&&(t.value="")},(0,a.EA)(this,t,{includeAttrs:u}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&p.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===n))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},10754:(t,e,n)=>{n.d(e,{Yr:()=>o,Z:()=>p,pW:()=>a,zj:()=>l});const i="--descope-input-mask-content",s="--descope-input-mask-display",r="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},l=t=>t.replace(/\D/g,"")||"",o=()=>{const t=document.createElement("style");return t.id="input-mask",t.innerHTML=`vaadin-text-field::part(input-field)::before {\n    ${r}: '';\n    content: var(${i}, var(${r}));\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: var(${s}, none);\n    align-items: center;\n    justify-content: center;\n  }`,t},p=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(s,"flex")):(t.style.removeProperty(i),t.style.removeProperty(s))}},81443:(t,e,n)=>{n.r(e);var i=n(45002);customElements.define(i.T,i.A)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359],{3393:(t,e,i)=>{i.d(e,{y:()=>a});var n=i(9696),s=i(79365),r=i(81365);const a=(...t)=>(0,n.Zz)(s.XX,s._$,s.yF,s.jd)((0,r.q)(...t))},47168:(t,e,i)=>{i.d(e,{A:()=>h,T:()=>p});var n=i(68049),s=i.n(n),r=i(3393),a=i(97810),u=i(18280),l=i(25964);const p=(0,a.xE)("passcode-internal"),d=["digits","loading"],o=["disabled","bordered","size","invalid","readonly","aria-labelledby"],c=(0,r.y)({componentName:p,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return d.concat(c.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,u.zj)(t))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),i=Math.min(e+1,this.inputs.length-1);return this.inputs[i]}getPrevInput(t){const e=this.getInputIdx(t),i=Math.max(e-1,0);return this.inputs[i]}fillDigits(t,e){for(let i=0;i<t.length;i+=1){e.value=t[i]??"";const n=this.getNextInput(e);if(n===e)break;e=n}(0,u.pW)(e)}parseInputValue(t,e=""){const i=e.split("");i.length?this.fillDigits(i,t):t.value=""}initInputs(){this.inputs.forEach((t=>{(0,l.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${u.vz}: '';\n          content: var(${u._B}, var(${u.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${u.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=s()((e=>{this.parseInputValue(t,e),(0,u.Z)(t)}),20,{trailing:!0});t.addEventListener("input",(i=>{t.value=(0,u.zj)(t.value),t.value&&(0,u.Z)(t,t.value[0]),setTimeout((()=>{"deleteContentBackward"===i?.inputType&&(0,u.pW)(this.getPrevInput(t))})),e(t.value)})),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout((()=>(0,u.pW)(this.getPrevInput(t))),0):1===e.length&&(t.value="")},(0,a.EA)(this,t,{includeAttrs:o}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===i))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280:(t,e,i)=>{i.d(e,{Z:()=>l,_B:()=>n,n6:()=>s,pW:()=>a,vz:()=>r,zj:()=>u});const n="--descope-input-mask-content",s="--descope-input-mask-display",r="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},u=t=>t.replace(/\D/g,"")||"",l=(t,e)=>{e?(t.style.setProperty(n,`"${e}"`),t.style.setProperty(s,"flex")):(t.style.removeProperty(n),t.style.removeProperty(s))}},59053:(t,e,i)=>{i.r(e);var n=i(47168);customElements.define(n.T,n.A)}}]);
+//# sourceMappingURL=descope-passcode-descope-passcode-internal-index-js.js.map

package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"descope-passcode-descope-passcode-internal-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/index.js"],"sourcesContent":["import { compose } from '../helpers';\nimport {\n changeMixin,\n inputEventsDispatchingMixin,\n inputValidationMixin,\n normalizeBooleanAttributesMixin,\n} from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createBaseInputClass = (...args) =>\n compose(\n inputValidationMixin,\n changeMixin,\n normalizeBooleanAttributesMixin,\n inputEventsDispatchingMixin\n )(createBaseClass(...args));\n","/* eslint-disable no-param-reassign */\nimport debounce from 'lodash.debounce';\nimport { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport {\n sanitizeStr,\n focusElement,\n toggleMaskVisibility,\n INPUT_MASK_FALLBACK_PROP,\n INPUT_MASK_TEXT_PROP,\n INPUT_MASK_DISPLAY_PROP,\n} from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('passcode-internal');\n\nconst observedAttributes = ['digits', 'loading'];\n\nconst forwardAttributes = [\n 'disabled',\n 'bordered',\n 'size',\n 'invalid',\n 'readonly',\n 'aria-labelledby',\n];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PasscodeInternal extends BaseInputClass {\n static get observedAttributes() {\n return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n }\n\n constructor() {\n super();\n\n this.innerHTML = `\n\t\t<div class=\"wrapper\"></div>\n\t\t<div class=\"loader-container\">\n <descope-loader-radial size=\"xs\" mode=\"primary\"></descope-loader-radial>\n </div>\n\t\t`;\n\n this.wrapperEle = this.querySelector('.wrapper');\n this.loaderContainer = this.querySelector('.loader-container');\n }\n\n renderInputs() {\n const inputs = [...Array(this.digits).keys()].map(\n (idx) => `\n\t\t<descope-text-field\n\t\t\tdata-id=${idx}\n\t\t\ttype=\"tel\"\n\t\t\tautocomplete=\"one-time-code\"\n\t\t\tinputMode=\"numeric\"\n\t\t></descope-text-field>\n\t`\n );\n\n this.wrapperEle.innerHTML = inputs.join('');\n\n this.inputs = Array.from(this.querySelectorAll('descope-text-field'));\n\n this.initInputs();\n }\n\n handleLoadingState(isLoading) {\n if (isLoading) {\n this.setAttribute('inert', 'true');\n } else {\n this.removeAttribute('inert');\n }\n }\n\n get digits() {\n return Number.parseInt(this.getAttribute('digits'), 10) || 6;\n }\n\n get value() {\n return this.inputs?.map(({ value }) => value).join('') || '';\n }\n\n set value(val) {\n if (val === this.value) return;\n\n this.parseInputValue(this.inputs[0], sanitizeStr(val));\n }\n\n getValidity() {\n if (this.isRequired && !this.value) {\n return { valueMissing: true };\n }\n if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n return { patternMismatch: true };\n }\n\n return {};\n }\n\n init() {\n // we are adding listeners before calling to super because it's stopping the events\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[0].focus();\n });\n\n super.init?.();\n\n this.renderInputs();\n }\n\n // eslint-disable-next-line class-methods-use-this\n getInputIdx(inputEle) {\n return Number.parseInt(inputEle.getAttribute('data-id'), 10);\n }\n\n getNextInput(currInput) {\n const currentIdx = this.getInputIdx(currInput);\n const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);\n return this.inputs[newIdx];\n }\n\n getPrevInput(currInput) {\n const currentIdx = this.getInputIdx(currInput);\n const newIdx = Math.max(currentIdx - 1, 0);\n return this.inputs[newIdx];\n }\n\n fillDigits(charArr, currentInput) {\n for (let i = 0; i < charArr.length; i += 1) {\n currentInput.value = charArr[i] ?? '';\n\n const nextInput = this.getNextInput(currentInput);\n\n if (nextInput === currentInput) break;\n currentInput = nextInput;\n }\n\n focusElement(currentInput);\n }\n\n parseInputValue(input, value = '') {\n const charArr = value.split('');\n\n if (!charArr.length) {\n // if we got an invalid value we want to clear the input\n input.value = '';\n } else this.fillDigits(charArr, input);\n }\n\n initInputs() {\n this.inputs.forEach((input) => {\n // During debounced input we hide the value with a mask.\n // This allows us to hide the multiple population of the first input\n // in case of an automated input (e.g. Safari OTP Autofill or paste).\n injectStyle(\n `\n vaadin-text-field::part(input-field)::before {\n ${INPUT_MASK_FALLBACK_PROP}: '';\n content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));\n position: absolute;\n width: 100%;\n height: 100%;\n display: var(${INPUT_MASK_DISPLAY_PROP}, none);\n align-items: center;\n justify-content: center;\n }`,\n input\n );\n\n const handleParseInput = (val) => {\n this.parseInputValue(input, val);\n toggleMaskVisibility(input);\n };\n\n const debouncedHandleParseInput = debounce(handleParseInput, 20, { trailing: true });\n\n // sanitize the input\n input.addEventListener('input', (e) => {\n input.value = sanitizeStr(input.value);\n\n if (input.value) {\n toggleMaskVisibility(input, input.value[0]);\n }\n\n setTimeout(() => {\n if (e?.inputType === 'deleteContentBackward') {\n focusElement(this.getPrevInput(input));\n }\n });\n debouncedHandleParseInput(input.value);\n });\n\n // we want backspace to focus on the previous digit\n input.onkeydown = ({ key }) => {\n // when user deletes a digit, we want to focus the previous digit\n if (key === 'Backspace') {\n // if value is empty then the input element does not fire `input` event\n // if this is the case, we focus the element here.\n // otherwise, the focusElement occurs as part of the `input` event listener\n if (!input.value) {\n setTimeout(() => focusElement(this.getPrevInput(input)), 0);\n } else {\n input.setSelectionRange(1, 1);\n }\n } else if (key.length === 1) {\n // we want only characters and not command keys\n input.value = ''; // we are clearing the previous value so we can override it with the new value\n }\n };\n\n forwardAttrs(this, input, { includeAttrs: forwardAttributes });\n input.shadowRoot.querySelector('input').setAttribute('aria-label', 'passcode digit');\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n // sync attributes to inputs\n if (oldValue !== newValue) {\n if (observedAttributes.includes(attrName)) {\n if (attrName === 'digits') {\n this.renderInputs();\n }\n if (attrName === 'loading') {\n this.handleLoadingState(newValue === 'true');\n }\n }\n }\n }\n\n get pattern() {\n return `^$|^\\\\d{${this.digits},}$`;\n }\n}\n\nexport default PasscodeInternal;\n","export const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';\nexport const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';\nexport const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';\n\nexport const focusElement = (ele) => {\n ele?.focus();\n ele?.setSelectionRange?.(1, 1);\n};\n\nexport const sanitizeStr = (str) => {\n return str.replace(/\\D/g, '') || '';\n};\n\nexport const toggleMaskVisibility = (input, value) => {\n if (value) {\n input.style.setProperty(INPUT_MASK_TEXT_PROP, `\"${value}\"`);\n input.style.setProperty(INPUT_MASK_DISPLAY_PROP, 'flex');\n } else {\n input.style.removeProperty(INPUT_MASK_TEXT_PROP);\n input.style.removeProperty(INPUT_MASK_DISPLAY_PROP);\n }\n};\n","import PasscodeInternal, { componentName } from './PasscodeInternal';\n\ncustomElements.define(componentName, PasscodeInternal);\n"],"names":["createBaseInputClass","args","componentName","observedAttributes","forwardAttributes","BaseInputClass","baseSelector","concat","constructor","super","this","innerHTML","wrapperEle","querySelector","loaderContainer","renderInputs","inputs","Array","digits","keys","map","idx","join","from","querySelectorAll","initInputs","handleLoadingState","isLoading","setAttribute","removeAttribute","Number","parseInt","getAttribute","value","val","parseInputValue","getValidity","isRequired","valueMissing","pattern","RegExp","test","patternMismatch","init","addEventListener","e","isTrusted","focus","getInputIdx","inputEle","getNextInput","currInput","currentIdx","newIdx","Math","min","length","getPrevInput","max","fillDigits","charArr","currentInput","i","nextInput","input","split","forEach","debouncedHandleParseInput","trailing","setTimeout","inputType","onkeydown","key","setSelectionRange","includeAttrs","shadowRoot","handleFocusEventsDispatching","handleInputEventDispatching","attributeChangedCallback","attrName","oldValue","newValue","includes","INPUT_MASK_TEXT_PROP","INPUT_MASK_DISPLAY_PROP","INPUT_MASK_FALLBACK_PROP","focusElement","ele","sanitizeStr","str","replace","toggleMaskVisibility","style","setProperty","removeProperty","customElements","define"],"sourceRoot":""}

package/dist/umd/descope-passcode-index-js.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*! For license information please see descope-passcode-index-js.js.LICENSE.txt */
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359,5166,7163,8884],{25827:(t,e,n)=>{n.d(e,{y:()=>a});var r=n(7138),i=n(94619),o=n(70263);const a=(...t)=>(0,r.Zz)(i.XX,i._$,i.yF,i.jd)((0,o.q)(...t))},14815:(t,e,n)=>{n.d(e,{T:()=>a,l:()=>s});var r=n(94619),i=n(70263),o=n(7138);const a=(0,n(14944).xE)("loader-radial");class l extends((0,i.q)({componentName:a,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t\t@keyframes spin {\n\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tanimation-name: spin;\n\t\t\t}\n\t\t</style>\n\t\t<div></div>\n\t"}}const s=(0,o.Zz)((0,r.RF)({mappings:{hostDisplay:{property:"display"},spinnerSize:[{property:"width"},{property:"height"}],spinnerBorderWidth:{property:"border-width"},spinnerBorderStyle:{property:"border-style"},spinnerBorderRadius:{property:"border-radius"},spinnerQuadrant1Color:{property:"border-top-color"},spinnerQuadrant2Color:{property:"border-bottom-color"},spinnerQuadrant3Color:{property:"border-right-color"},spinnerQuadrant4Color:{property:"border-left-color"},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),r.VO,r.tQ)(l)},86715:(t,e,n)=>{n.r(e),n.d(e,{LoaderRadialClass:()=>r.l,componentName:()=>r.T});var r=n(14815);customElements.define(r.T,r.l)},45002:(t,e,n)=>{n.d(e,{A:()=>u,T:()=>s});var r=n(62051),i=n.n(r),o=n(25827),a=n(14944),l=n(10754);const s=(0,a.xE)("passcode-internal"),p=["digits","loading"],d=["disabled","bordered","size","invalid","readonly","aria-labelledby"],c=(0,o.y)({componentName:s,baseSelector:"div"}),u=class extends c{static get observedAttributes(){return p.concat(c.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t<style>\n\t\t\t.wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: space-between;\n        direction: ltr;\n        position: relative;\n\t\t\t}\n\n      descope-text-field {\n        direction: ltr;\n      }\n\n      .loader-container {\n        display: none;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),n=Math.min(e+1,this.inputs.length-1);return this.inputs[n]}getPrevInput(t){const e=this.getInputIdx(t),n=Math.max(e-1,0);return this.inputs[n]}fillDigits(t,e){for(let n=0;n<t.length;n+=1){e.value=t[n]??"";const r=this.getNextInput(e);if(r===e)break;e=r}(0,l.pW)(e)}parseInputValue(t,e=""){const n=e.split("");n.length?this.fillDigits(n,t):t.value=""}initInputs(){this.inputs.forEach((t=>{t.shadowRoot.appendChild((0,l.Yr)());const e=i()((e=>{this.parseInputValue(t,e),(0,l.Z)(t)}),20,{trailing:!0});t.addEventListener("input",(n=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout((()=>{"deleteContentBackward"===n?.inputType&&(0,l.pW)(this.getPrevInput(t))})),e(t.value)})),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout((()=>(0,l.pW)(this.getPrevInput(t))),0):1===e.length&&(t.value="")},(0,a.EA)(this,t,{includeAttrs:d}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&p.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===n))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},10754:(t,e,n)=>{n.d(e,{Yr:()=>s,Z:()=>p,pW:()=>a,zj:()=>l});const r="--descope-input-mask-content",i="--descope-input-mask-display",o="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},l=t=>t.replace(/\D/g,"")||"",s=()=>{const t=document.createElement("style");return t.id="input-mask",t.innerHTML=`vaadin-text-field::part(input-field)::before {\n    ${o}: '';\n    content: var(${r}, var(${o}));\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    display: var(${i}, none);\n    align-items: center;\n    justify-content: center;\n  }`,t},p=(t,e)=>{e?(t.style.setProperty(r,`"${e}"`),t.style.setProperty(i,"flex")):(t.style.removeProperty(r),t.style.removeProperty(i))}},81443:(t,e,n)=>{n.r(e);var r=n(45002);customElements.define(r.T,r.A)},40868:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>w,componentName:()=>d});var r=n(94619),i=n(45002),o=n(69473),a=n(14815),l=n(7138),s=n(14944),p=n(33177);const d=(0,s.xE)("passcode"),c=["digits"],{host:u,digitField:h,label:g,requiredIndicator:y,internalWrapper:b,focusedDigitField:m,errorMessage:f}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.w.componentName}[focused="true"]`},digitField:{selector:()=>o.w.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},v=o.w.cssVarList,x=a.l.cssVarList,w=(0,l.Zz)((0,r.RF)({mappings:{fontSize:[{...h,property:v.fontSize},u],hostWidth:{property:"width"},hostDirection:{...u,property:"direction"},fontFamily:[u,{...g}],labelTextColor:[{...g,property:"color"},{...y,property:"color"}],labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...f,property:"color"},errorMessageIcon:{...f,property:"background-image"},errorMessageIconSize:{...f,property:"background-size"},errorMessageIconPadding:{...f,property:"padding-inline-start"},errorMessageIconRepeat:{...f,property:"background-repeat"},errorMessageIconPosition:{...f,property:"background-position"},digitValueTextColor:{selector:o.w.componentName,property:v.inputValueTextColor},digitSize:[{...h,property:"height"},{...h,property:"width"}],digitPadding:{...h,property:v.inputHorizontalPadding},digitTextAlign:{...h,property:v.inputTextAlign},digitCaretTextColor:{...h,property:v.inputCaretTextColor},digitSpacing:{...b,property:"gap"},digitOutlineColor:{...h,property:v.inputOutlineColor},digitOutlineWidth:{...h,property:v.inputOutlineWidth},focusedDigitFieldOutlineColor:{...m,property:v.inputOutlineColor},overlayOpacity:{...b,property:"opacity"},spinnerSize:{selector:a.l.componentName,property:x.spinnerSize}}}),r.VO,(0,r.OZ)({proxyProps:["value","selectionStart"]}),r.tQ,(t=>class extends t{static get observedAttributes(){return c.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n      <${i.T}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n        role="textbox"\n      ><slot></slot></${i.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(i.T),(0,s.EA)(this,this.inputElement,{includeAttrs:["digits","size","loading"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&this.style.setProperty("--passcode-digits-count",n)}}))((0,r.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: calc(var(--passcode-digits-count) * 2em);\n\t\t\t}\n\t\t\t${(0,p.X6)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n      :host([loading="true"]) descope-passcode-internal .loader-container {\n        display: block;\n      }\n\n\t\t\tdescope-passcode-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal .wrapper {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tmin-height: initial;\n\t\t\t\theight: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal descope-text-field {\n\t\t\t\tmin-width: 2em;\n\t\t\t\tmax-width: var(${v.inputHeight});\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n      /* safari */\n\t\t\tvaadin-text-field::part(input-field)::after {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n      ${(0,p.$J)("vaadin-text-field")}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex"],componentName:d}));n(89348),n(86715),n(81443),customElements.define(d,w)},69473:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>d});var r=n(94619),i=n(93826),o=n(7138),a=n(14944),l=n(33177);const s=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,r.RF)({mappings:i.A}),r.VO,(0,r.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),r.tQ,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((0,r.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,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:s}))},89348:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>r.w,componentName:()=>r.T}),n(63970),n(23638),n(80201);var r=n(69473);customElements.define(r.T,r.w)},93826:(t,e,n)=>{n.d(e,{A:()=>v});const{host:r,label:i,placeholder:o,requiredIndicator:a,inputField:l,input:s,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:g,externalInput:y,externalInputDisabled:b,externalPlaceholder:m,externalDisabledPlaceholder:f}={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)"}},v={fontSize:[{},r],fontFamily:[i,l,d,c],labelFontSize:{...i,property:"font-size"},labelFontWeight:{...i,property:"font-weight"},labelTextColor:[{...i,property:"color"},{...a,property:"color"},{...i,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...r,property:"width"},hostMinWidth:{...r,property:"min-width"},hostDirection:{...r,property:"direction"},inputDirection:{...s,property:"direction"},inputBackgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...c,property:"color"},errorMessageIcon:{...c,property:"background-image"},errorMessageIconSize:{...c,property:"background-size"},errorMessageIconPadding:{...c,property:"padding-inline-start"},errorMessageIconRepeat:{...c,property:"background-repeat"},errorMessageIconPosition:{...c,property:"background-position"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...l,property:"color"},{...h,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},inputHeight:{...l,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...l,property:"outline-color"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineOffset:{...l,property:"outline-offset"},textAlign:{},inputTextAlign:[{...s,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...m,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...f,property:"-webkit-text-fill-color"}],labelPosition:{...i,property:"position"},labelTopPosition:{...i,property:"top"},labelHorizontalPosition:[{...i,property:"left"},{...i,property:"right"}],inputTransformY:{...i,property:"transform"},inputTransition:{...i,property:"transition"},marginInlineStart:{...i,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...m,property:"opacity"}],inputVerticalAlignment:[{...l,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...s,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"}}},33177:(t,e,n)=>{n.d(e,{$J:()=>u,I4:()=>a,Kl:()=>h,LJ:()=>c,Qv:()=>o,X6:()=>s,cy:()=>r,fu:()=>p,kG:()=>d,lS:()=>l,zm:()=>i});const r=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,i=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,l=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,c=(t,e)=>`\n    ${i(t)}\n    ${a(t)}\n    ${l(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,u=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},21860:(t,e,n)=>{n.d(e,{f:()=>i});var r=n(95925);class i extends r.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},60978:(t,e,n)=>{n.d(e,{a:()=>i});var r=n(60354);const i=t=>class extends((0,r.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},10056:(t,e,n)=>{n.d(e,{A:()=>h}),n(94009);var r=n(98633),i=n(65211),o=n(27150),a=n(83798),l=n(9685),s=n(57224),p=n(21860),d=n(60978),c=n(19074);const u=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new p.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new c.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(u((0,s.cp)((0,o.q)(r.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return r.qy`
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359,5166,7163,8884],{3393:(t,e,n)=>{n.d(e,{y:()=>a});var i=n(9696),r=n(79365),o=n(81365);const a=(...t)=>(0,i.Zz)(r.XX,r._$,r.yF,r.jd)((0,o.q)(...t))},74713:(t,e,n)=>{n.d(e,{T:()=>s,l:()=>d});var i=n(79365),r=n(81365),o=n(9696),a=n(97810),l=n(25964);const s=(0,a.xE)("loader-radial");class p extends((0,r.q)({componentName:s,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div></div>\n\t",(0,l.fz)("\n    @keyframes spin {\n\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tanimation-name: spin;\n\t\t\t}\n        ",this)}}const d=(0,o.Zz)((0,i.RF)({mappings:{hostDisplay:{property:"display"},spinnerSize:[{property:"width"},{property:"height"}],spinnerBorderWidth:{property:"border-width"},spinnerBorderStyle:{property:"border-style"},spinnerBorderRadius:{property:"border-radius"},spinnerQuadrant1Color:{property:"border-top-color"},spinnerQuadrant2Color:{property:"border-bottom-color"},spinnerQuadrant3Color:{property:"border-right-color"},spinnerQuadrant4Color:{property:"border-left-color"},animationDuration:{},animationTimingFunction:{},animationIterationCount:{}}}),i.VO,i.tQ)(p)},54249:(t,e,n)=>{n.r(e),n.d(e,{LoaderRadialClass:()=>i.l,componentName:()=>i.T});var i=n(74713);customElements.define(i.T,i.l)},47168:(t,e,n)=>{n.d(e,{A:()=>h,T:()=>p});var i=n(68049),r=n.n(i),o=n(3393),a=n(97810),l=n(18280),s=n(25964);const p=(0,a.xE)("passcode-internal"),d=["digits","loading"],c=["disabled","bordered","size","invalid","readonly","aria-labelledby"],u=(0,o.y)({componentName:p,baseSelector:"div"}),h=class extends u{static get observedAttributes(){return d.concat(u.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,l.zj)(t))}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),n=Math.min(e+1,this.inputs.length-1);return this.inputs[n]}getPrevInput(t){const e=this.getInputIdx(t),n=Math.max(e-1,0);return this.inputs[n]}fillDigits(t,e){for(let n=0;n<t.length;n+=1){e.value=t[n]??"";const i=this.getNextInput(e);if(i===e)break;e=i}(0,l.pW)(e)}parseInputValue(t,e=""){const n=e.split("");n.length?this.fillDigits(n,t):t.value=""}initInputs(){this.inputs.forEach((t=>{(0,s.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${l.vz}: '';\n          content: var(${l._B}, var(${l.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${l.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=r()((e=>{this.parseInputValue(t,e),(0,l.Z)(t)}),20,{trailing:!0});t.addEventListener("input",(n=>{t.value=(0,l.zj)(t.value),t.value&&(0,l.Z)(t,t.value[0]),setTimeout((()=>{"deleteContentBackward"===n?.inputType&&(0,l.pW)(this.getPrevInput(t))})),e(t.value)})),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout((()=>(0,l.pW)(this.getPrevInput(t))),0):1===e.length&&(t.value="")},(0,a.EA)(this,t,{includeAttrs:c}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===n))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280:(t,e,n)=>{n.d(e,{Z:()=>s,_B:()=>i,n6:()=>r,pW:()=>a,vz:()=>o,zj:()=>l});const i="--descope-input-mask-content",r="--descope-input-mask-display",o="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},l=t=>t.replace(/\D/g,"")||"",s=(t,e)=>{e?(t.style.setProperty(i,`"${e}"`),t.style.setProperty(r,"flex")):(t.style.removeProperty(i),t.style.removeProperty(r))}},59053:(t,e,n)=>{n.r(e);var i=n(47168);customElements.define(i.T,i.A)},54690:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>C,componentName:()=>c});var i=n(79365),r=n(47168),o=n(79275),a=n(74713),l=n(9696),s=n(97810),p=n(73551),d=n(25964);const c=(0,s.xE)("passcode"),u=["digits"],{host:h,digitField:g,label:y,requiredIndicator:b,internalWrapper:f,focusedDigitField:m,errorMessage:v}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.w.componentName}[focused="true"]`},digitField:{selector:()=>o.w.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},x=o.w.cssVarList,w=a.l.cssVarList,C=(0,l.Zz)((0,i.RF)({mappings:{fontSize:[{...g,property:x.fontSize},h],hostWidth:{property:"width"},hostDirection:{...h,property:"direction"},fontFamily:[h,{...y}],labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...v,property:"color"},errorMessageIcon:{...v,property:"background-image"},errorMessageIconSize:{...v,property:"background-size"},errorMessageIconPadding:{...v,property:"padding-inline-start"},errorMessageIconRepeat:{...v,property:"background-repeat"},errorMessageIconPosition:{...v,property:"background-position"},digitValueTextColor:{selector:o.w.componentName,property:x.inputValueTextColor},digitSize:[{...g,property:"height"},{...g,property:"width"}],digitPadding:{...g,property:x.inputHorizontalPadding},digitTextAlign:{...g,property:x.inputTextAlign},digitCaretTextColor:{...g,property:x.inputCaretTextColor},digitSpacing:{...f,property:"gap"},digitOutlineColor:{...g,property:x.inputOutlineColor},digitOutlineWidth:{...g,property:x.inputOutlineWidth},focusedDigitFieldOutlineColor:{...m,property:x.inputOutlineColor},overlayOpacity:{...f,property:"opacity"},spinnerSize:{selector:a.l.componentName,property:w.spinnerSize}}}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"]}),i.tQ,(t=>class extends t{static get observedAttributes(){return u.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.(),(0,d.fz)("\n        .wrapper {\n          display: flex;\n          width: 100%;\n          justify-content: space-between;\n          direction: ltr;\n          position: relative;\n        }\n\n        descope-text-field {\n          direction: ltr;\n        }\n\n        .loader-container {\n          display: none;\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n        }\n          ",this);const t=document.createElement("template");t.innerHTML=`\n      <${r.T}\n        bordered="true"\n        name="code"\n        tabindex="-1"\n        slot="input"\n        role="textbox"\n      ><slot></slot></${r.T}>\n      `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.T),(0,s.EA)(this,this.inputElement,{includeAttrs:["digits","size","loading"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&(this.style["--passcode-digits-count"]=n)}}))((0,i.tz)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: calc(var(--passcode-digits-count) * 2em);\n\t\t\t}\n\t\t\t${(0,p.X6)()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n      :host([loading="true"]) descope-passcode-internal .loader-container {\n        display: block;\n      }\n\n\t\t\tdescope-passcode-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal .wrapper {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tmin-height: initial;\n\t\t\t\theight: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal descope-text-field {\n\t\t\t\tmin-width: 2em;\n\t\t\t\tmax-width: var(${x.inputHeight});\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n      /* safari */\n\t\t\tvaadin-text-field::part(input-field)::after {\n        opacity: 0;\n      }\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n      ${(0,p.$J)("vaadin-text-field")}\n\t\t\t${(0,p.I4)("vaadin-text-field")}\n    \t`,excludeAttrsSync:["tabindex"],componentName:c}));n(21374),n(54249),n(59053),customElements.define(c,C)},79275:(t,e,n)=>{n.d(e,{T:()=>s,w:()=>d});var i=n(79365),r=n(6424),o=n(9696),a=n(97810),l=n(73551);const s=(0,a.xE)("text-field"),p=["type","label-type","copy-to-clipboard"],d=(0,o.Zz)((0,i.RF)({mappings:r.A}),i.VO,(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}icon;init(){super.init?.()}renderCopyToClipboard(t){if(!t)return void this.icon?.remove();const e={icon:"vaadin:copy-o",title:"Copy",style:"cursor: pointer"},n={icon:"vaadin:check-circle-o",title:"Copied",style:"cursor: initial"};this.icon=Object.assign(document.createElement("vaadin-icon"),{slot:"suffix",...e}),this.baseElement.appendChild(this.icon),this.icon.addEventListener("click",(()=>{navigator.clipboard.writeText(this.value),Object.assign(this.icon,n),setTimeout((()=>{Object.assign(this.icon,e)}),5e3)}))}onLabelClick(){this.focus()}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n),e!==n&&("label-type"===t?"floating"===n?this.addEventListener("click",this.onLabelClick):this.removeEventListener("click",this.onLabelClick):"copy-to-clipboard"===t&&this.renderCopyToClipboard("true"===n))}}))((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,l.$J)("vaadin-text-field")}\n\t\t\t${(0,l.cy)(d.cssVarList)}\n\t\t\t${(0,l.LJ)("vaadin-text-field",d.cssVarList)}\n      ${(0,l.Kl)()}\n\n      vaadin-text-field vaadin-icon {\n        align-self: center;\n      }\n\t\t`,excludeAttrsSync:["tabindex","style"],componentName:s}))},21374:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.w,componentName:()=>i.T}),n(11284),n(37182),n(95260);var i=n(79275);customElements.define(i.T,i.w)},6424:(t,e,n)=>{n.d(e,{A:()=>v});const{host:i,label:r,placeholder:o,requiredIndicator:a,inputField:l,input:s,inputMask:p,helperText:d,errorMessage:c,disabledPlaceholder:u,inputDisabled:h,inputIcon:g,externalInput:y,externalInputDisabled:b,externalPlaceholder:f,externalDisabledPlaceholder:m}={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)"}},v={fontSize:[{},i],fontFamily:[r,l,d,c],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...a,property:"color"},{...r,property:"-webkit-text-fill-color"},{...a,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputDirection:{...s,property:"direction"},inputBackgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],errorMessageTextColor:{...c,property:"color"},errorMessageIcon:{...c,property:"background-image"},errorMessageIconSize:{...c,property:"background-size"},errorMessageIconPadding:{...c,property:"padding-inline-start"},errorMessageIconRepeat:{...c,property:"background-repeat"},errorMessageIconPosition:{...c,property:"background-position"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...l,property:"color"},{...h,property:"-webkit-text-fill-color"},{...b,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...s,property:"caret-color"},{...y,property:"caret-color"}],labelRequiredIndicator:{...a,property:"content"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},inputHeight:{...l,property:"height"},inputHorizontalPadding:[{...s,property:"padding-left"},{...s,property:"padding-right"},{...y,property:"padding-left"},{...y,property:"padding-right"}],inputOutlineColor:{...l,property:"outline-color"},inputOutlineStyle:{...l,property:"outline-style"},inputOutlineWidth:{...l,property:"outline-width"},inputOutlineOffset:{...l,property:"outline-offset"},textAlign:{},inputTextAlign:[{...s,property:"text-align"},{...y,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...f,property:"color"},{...o,property:"color"},{...u,property:"-webkit-text-fill-color"},{...m,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...f,property:"opacity"}],inputVerticalAlignment:[{...l,property:"align-items"},{...y,property:"align-items"}],valueInputHeight:[{...s,property:"height"},{...y,property:"height"}],valueInputMarginBottom:[{...s,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"}}},73551:(t,e,n)=>{n.d(e,{$J:()=>u,I4:()=>a,Kl:()=>h,LJ:()=>c,Qv:()=>o,X6:()=>s,cy:()=>i,fu:()=>p,kG:()=>d,lS:()=>l,zm:()=>r});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,a=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,l=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,s=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,c=(t,e)=>`\n    ${r(t)}\n    ${a(t)}\n    ${l(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,u=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,h=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '},18330:(t,e,n)=>{n.d(e,{f:()=>r});var i=n(44099);class r extends i.r{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},37436:(t,e,n)=>{n.d(e,{a:()=>r});var i=n(44218);const r=t=>class extends((0,i.R)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},27136:(t,e,n)=>{n.d(e,{A:()=>h}),n(86689);var i=n(13256),r=n(82901),o=n(90676),a=n(81488),l=n(86314),s=n(87550),p=n(18330),d=n(37436),c=n(37720);const u=t=>class extends((0,d.a)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new p.f(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new c.q(this.inputElement,this._labelController))}};(0,s.SF)("vaadin-text-field",l.k,{moduleId:"vaadin-text-field-styles"});class h extends(u((0,s.cp)((0,o.q)(i.Pu)))){static get is(){return"vaadin-text-field"}static get template(){return i.qy`
       <style>
         [part='input-field'] {
           flex-grow: 0;
@@ -34,4 +34,5 @@
         </div>
       </div>
       <slot name="tooltip"></slot>
-    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,i.X)(h)},44085:(t,e,n)=>{n(67239);var r=n(80704);(0,n(57224).SF)("vaadin-text-field",r.k,{moduleId:"lumo-text-field-styles"}),n(10056)},63970:(t,e,n)=>{n(44085),n(10056)}}]);
+    `}static get properties(){return{maxlength:{type:Number},minlength:{type:Number}}}ready(){super.ready(),this._tooltipController=new a.I(this),this._tooltipController.setPosition("top"),this._tooltipController.setAriaTarget(this.inputElement),this.addController(this._tooltipController)}}(0,r.X)(h)},52733:(t,e,n)=>{n(27397);var i=n(47642);(0,n(87550).SF)("vaadin-text-field",i.k,{moduleId:"lumo-text-field-styles"}),n(27136)},11284:(t,e,n)=>{n(52733),n(27136)}}]);
+//# sourceMappingURL=descope-passcode-index-js.js.map

package/dist/umd/descope-passcode-index-js.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"descope-passcode-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/baseClasses/createBaseInputClass.js","webpack://@descope/web-components-ui/./src/components/descope-loader-radial/LoaderRadialClass.js","webpack://@descope/web-components-ui/./src/components/descope-loader-radial/index.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/descope-passcode-internal/index.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/PasscodeClass.js","webpack://@descope/web-components-ui/./src/components/descope-passcode/index.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/TextFieldClass.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/index.js","webpack://@descope/web-components-ui/./src/components/descope-text-field/textFieldMappings.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/field-base/src/input-controller.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/field-base/src/input-field-mixin.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/src/vaadin-text-field-mixin.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/src/vaadin-text-field.js","webpack://@descope/web-components-ui/../../../node_modules/@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js"],"sourcesContent":["import { compose } from '../helpers';\nimport {\n changeMixin,\n inputEventsDispatchingMixin,\n inputValidationMixin,\n normalizeBooleanAttributesMixin,\n} from '../mixins';\nimport { createBaseClass } from './createBaseClass';\n\nexport const createBaseInputClass = (...args) =>\n compose(\n inputValidationMixin,\n changeMixin,\n normalizeBooleanAttributesMixin,\n inputEventsDispatchingMixin\n )(createBaseClass(...args));\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('loader-radial');\n\nclass RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':host > div' }) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<div></div>\n\t`;\n\n injectStyle(\n `\n @keyframes spin {\n\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tanimation-name: spin;\n\t\t\t}\n `,\n this\n );\n }\n}\n\nexport const LoaderRadialClass = compose(\n createStyleMixin({\n mappings: {\n hostDisplay: { property: 'display' },\n spinnerSize: [{ property: 'width' }, { property: 'height' }],\n spinnerBorderWidth: { property: 'border-width' },\n spinnerBorderStyle: { property: 'border-style' },\n spinnerBorderRadius: { property: 'border-radius' },\n spinnerQuadrant1Color: { property: 'border-top-color' },\n spinnerQuadrant2Color: { property: 'border-bottom-color' },\n spinnerQuadrant3Color: { property: 'border-right-color' },\n spinnerQuadrant4Color: { property: 'border-left-color' },\n animationDuration: {},\n animationTimingFunction: {},\n animationIterationCount: {},\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawLoaderRadial);\n","import { componentName, LoaderRadialClass } from './LoaderRadialClass';\n\ncustomElements.define(componentName, LoaderRadialClass);\n\nexport { LoaderRadialClass, componentName };\n","/* eslint-disable no-param-reassign */\nimport debounce from 'lodash.debounce';\nimport { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';\nimport { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';\nimport {\n sanitizeStr,\n focusElement,\n toggleMaskVisibility,\n INPUT_MASK_FALLBACK_PROP,\n INPUT_MASK_TEXT_PROP,\n INPUT_MASK_DISPLAY_PROP,\n} from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('passcode-internal');\n\nconst observedAttributes = ['digits', 'loading'];\n\nconst forwardAttributes = [\n 'disabled',\n 'bordered',\n 'size',\n 'invalid',\n 'readonly',\n 'aria-labelledby',\n];\n\nconst BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });\n\nclass PasscodeInternal extends BaseInputClass {\n static get observedAttributes() {\n return observedAttributes.concat(BaseInputClass.observedAttributes || []);\n }\n\n constructor() {\n super();\n\n this.innerHTML = `\n\t\t<div class=\"wrapper\"></div>\n\t\t<div class=\"loader-container\">\n <descope-loader-radial size=\"xs\" mode=\"primary\"></descope-loader-radial>\n </div>\n\t\t`;\n\n this.wrapperEle = this.querySelector('.wrapper');\n this.loaderContainer = this.querySelector('.loader-container');\n }\n\n renderInputs() {\n const inputs = [...Array(this.digits).keys()].map(\n (idx) => `\n\t\t<descope-text-field\n\t\t\tdata-id=${idx}\n\t\t\ttype=\"tel\"\n\t\t\tautocomplete=\"one-time-code\"\n\t\t\tinputMode=\"numeric\"\n\t\t></descope-text-field>\n\t`\n );\n\n this.wrapperEle.innerHTML = inputs.join('');\n\n this.inputs = Array.from(this.querySelectorAll('descope-text-field'));\n\n this.initInputs();\n }\n\n handleLoadingState(isLoading) {\n if (isLoading) {\n this.setAttribute('inert', 'true');\n } else {\n this.removeAttribute('inert');\n }\n }\n\n get digits() {\n return Number.parseInt(this.getAttribute('digits'), 10) || 6;\n }\n\n get value() {\n return this.inputs?.map(({ value }) => value).join('') || '';\n }\n\n set value(val) {\n if (val === this.value) return;\n\n this.parseInputValue(this.inputs[0], sanitizeStr(val));\n }\n\n getValidity() {\n if (this.isRequired && !this.value) {\n return { valueMissing: true };\n }\n if (this.pattern && !new RegExp(this.pattern).test(this.value)) {\n return { patternMismatch: true };\n }\n\n return {};\n }\n\n init() {\n // we are adding listeners before calling to super because it's stopping the events\n this.addEventListener('focus', (e) => {\n // we want to ignore focus events we are dispatching\n if (e.isTrusted) this.inputs[0].focus();\n });\n\n super.init?.();\n\n this.renderInputs();\n }\n\n // eslint-disable-next-line class-methods-use-this\n getInputIdx(inputEle) {\n return Number.parseInt(inputEle.getAttribute('data-id'), 10);\n }\n\n getNextInput(currInput) {\n const currentIdx = this.getInputIdx(currInput);\n const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1);\n return this.inputs[newIdx];\n }\n\n getPrevInput(currInput) {\n const currentIdx = this.getInputIdx(currInput);\n const newIdx = Math.max(currentIdx - 1, 0);\n return this.inputs[newIdx];\n }\n\n fillDigits(charArr, currentInput) {\n for (let i = 0; i < charArr.length; i += 1) {\n currentInput.value = charArr[i] ?? '';\n\n const nextInput = this.getNextInput(currentInput);\n\n if (nextInput === currentInput) break;\n currentInput = nextInput;\n }\n\n focusElement(currentInput);\n }\n\n parseInputValue(input, value = '') {\n const charArr = value.split('');\n\n if (!charArr.length) {\n // if we got an invalid value we want to clear the input\n input.value = '';\n } else this.fillDigits(charArr, input);\n }\n\n initInputs() {\n this.inputs.forEach((input) => {\n // During debounced input we hide the value with a mask.\n // This allows us to hide the multiple population of the first input\n // in case of an automated input (e.g. Safari OTP Autofill or paste).\n injectStyle(\n `\n vaadin-text-field::part(input-field)::before {\n ${INPUT_MASK_FALLBACK_PROP}: '';\n content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));\n position: absolute;\n width: 100%;\n height: 100%;\n display: var(${INPUT_MASK_DISPLAY_PROP}, none);\n align-items: center;\n justify-content: center;\n }`,\n input\n );\n\n const handleParseInput = (val) => {\n this.parseInputValue(input, val);\n toggleMaskVisibility(input);\n };\n\n const debouncedHandleParseInput = debounce(handleParseInput, 20, { trailing: true });\n\n // sanitize the input\n input.addEventListener('input', (e) => {\n input.value = sanitizeStr(input.value);\n\n if (input.value) {\n toggleMaskVisibility(input, input.value[0]);\n }\n\n setTimeout(() => {\n if (e?.inputType === 'deleteContentBackward') {\n focusElement(this.getPrevInput(input));\n }\n });\n debouncedHandleParseInput(input.value);\n });\n\n // we want backspace to focus on the previous digit\n input.onkeydown = ({ key }) => {\n // when user deletes a digit, we want to focus the previous digit\n if (key === 'Backspace') {\n // if value is empty then the input element does not fire `input` event\n // if this is the case, we focus the element here.\n // otherwise, the focusElement occurs as part of the `input` event listener\n if (!input.value) {\n setTimeout(() => focusElement(this.getPrevInput(input)), 0);\n } else {\n input.setSelectionRange(1, 1);\n }\n } else if (key.length === 1) {\n // we want only characters and not command keys\n input.value = ''; // we are clearing the previous value so we can override it with the new value\n }\n };\n\n forwardAttrs(this, input, { includeAttrs: forwardAttributes });\n input.shadowRoot.querySelector('input').setAttribute('aria-label', 'passcode digit');\n });\n\n this.handleFocusEventsDispatching(this.inputs);\n this.handleInputEventDispatching();\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n // sync attributes to inputs\n if (oldValue !== newValue) {\n if (observedAttributes.includes(attrName)) {\n if (attrName === 'digits') {\n this.renderInputs();\n }\n if (attrName === 'loading') {\n this.handleLoadingState(newValue === 'true');\n }\n }\n }\n }\n\n get pattern() {\n return `^$|^\\\\d{${this.digits},}$`;\n }\n}\n\nexport default PasscodeInternal;\n","export const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';\nexport const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';\nexport const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';\n\nexport const focusElement = (ele) => {\n ele?.focus();\n ele?.setSelectionRange?.(1, 1);\n};\n\nexport const sanitizeStr = (str) => {\n return str.replace(/\\D/g, '') || '';\n};\n\nexport const toggleMaskVisibility = (input, value) => {\n if (value) {\n input.style.setProperty(INPUT_MASK_TEXT_PROP, `\"${value}\"`);\n input.style.setProperty(INPUT_MASK_DISPLAY_PROP, 'flex');\n } else {\n input.style.removeProperty(INPUT_MASK_TEXT_PROP);\n input.style.removeProperty(INPUT_MASK_DISPLAY_PROP);\n }\n};\n","import PasscodeInternal, { componentName } from './PasscodeInternal';\n\ncustomElements.define(componentName, PasscodeInternal);\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';\nimport { TextFieldClass } from '../descope-text-field/TextFieldClass';\nimport { LoaderRadialClass } from '../descope-loader-radial/LoaderRadialClass';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport {\n resetInputCursor,\n resetInputLabelPosition,\n resetInputFieldDefaultWidth,\n} from '../../helpers/themeHelpers/resetHelpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('passcode');\n\nconst observedAttributes = ['digits'];\n\nconst customMixin = (superclass) =>\n class PasscodeMixinClass extends superclass {\n static get observedAttributes() {\n return observedAttributes.concat(superclass.observedAttributes || []);\n }\n\n get digits() {\n return Number.parseInt(this.getAttribute('digits'), 10) || 6;\n }\n\n init() {\n super.init?.();\n\n injectStyle(\n `\n .wrapper {\n display: flex;\n width: 100%;\n justify-content: space-between;\n direction: ltr;\n position: relative;\n }\n\n descope-text-field {\n direction: ltr;\n }\n\n .loader-container {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n `,\n this\n );\n\n const template = document.createElement('template');\n\n template.innerHTML = `\n <${descopeInternalComponentName}\n bordered=\"true\"\n name=\"code\"\n tabindex=\"-1\"\n slot=\"input\"\n role=\"textbox\"\n ><slot></slot></${descopeInternalComponentName}>\n `;\n\n this.baseElement.appendChild(template.content.cloneNode(true));\n\n this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);\n\n forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size', 'loading'] });\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (attrName === 'digits') {\n this.style['--passcode-digits-count'] = newValue;\n }\n }\n };\n\nconst {\n host,\n digitField,\n label,\n requiredIndicator,\n internalWrapper,\n focusedDigitField,\n errorMessage,\n} = {\n host: { selector: () => ':host' },\n focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused=\"true\"]` },\n digitField: { selector: () => TextFieldClass.componentName },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n internalWrapper: { selector: 'descope-passcode-internal .wrapper' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nconst textVars = TextFieldClass.cssVarList;\nconst loaderVars = LoaderRadialClass.cssVarList;\n\nexport const PasscodeClass = compose(\n createStyleMixin({\n mappings: {\n fontSize: [{ ...digitField, property: textVars.fontSize }, host],\n hostWidth: { property: 'width' },\n hostDirection: { ...host, property: 'direction' },\n fontFamily: [host, { ...label }],\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n digitValueTextColor: {\n selector: TextFieldClass.componentName,\n property: textVars.inputValueTextColor,\n },\n digitSize: [\n { ...digitField, property: 'height' },\n { ...digitField, property: 'width' },\n ],\n digitPadding: { ...digitField, property: textVars.inputHorizontalPadding },\n digitTextAlign: { ...digitField, property: textVars.inputTextAlign },\n digitCaretTextColor: { ...digitField, property: textVars.inputCaretTextColor },\n digitSpacing: { ...internalWrapper, property: 'gap' },\n digitOutlineColor: { ...digitField, property: textVars.inputOutlineColor },\n digitOutlineWidth: { ...digitField, property: textVars.inputOutlineWidth },\n\n focusedDigitFieldOutlineColor: { ...focusedDigitField, property: textVars.inputOutlineColor },\n overlayOpacity: { ...internalWrapper, property: 'opacity' },\n spinnerSize: { selector: LoaderRadialClass.componentName, property: loaderVars.spinnerSize },\n },\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: [],\n wrappedEleName: 'vaadin-text-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: calc(var(--passcode-digits-count) * 2em);\n\t\t\t}\n\t\t\t${resetInputFieldDefaultWidth()}\n\t\t\t:host::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t\t:host::part(input-field)::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\n :host([loading=\"true\"]) descope-passcode-internal .loader-container {\n display: block;\n }\n\n\t\t\tdescope-passcode-internal {\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tmin-height: initial;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal .wrapper {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tmin-height: initial;\n\t\t\t\theight: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\n\t\t\tdescope-passcode-internal descope-text-field {\n\t\t\t\tmin-width: 2em;\n\t\t\t\tmax-width: var(${textVars.inputHeight});\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbackground-color: transparent;\n\t\t\t\tpadding: 0;\n\t\t\t\toverflow: hidden;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\n /* safari */\n\t\t\tvaadin-text-field::part(input-field)::after {\n opacity: 0;\n }\n\n\t\t\tvaadin-text-field {\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\tvaadin-text-field::before {\n\t\t\t\theight: 0;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\t\t\tborder: 0 solid;\n\t\t\t}\n\n\t\t\tvaadin-text-field::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\n ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${resetInputCursor('vaadin-text-field')}\n \t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n\nexport default PasscodeClass;\n","import { componentName, PasscodeClass } from './PasscodeClass';\nimport '../descope-text-field';\nimport '../descope-loader-radial';\nimport './descope-passcode-internal';\n\ncustomElements.define(componentName, PasscodeClass);\n\nexport { PasscodeClass, componentName };\n","import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n} from '../../mixins';\nimport textFieldMappings from './textFieldMappings';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport {\n inputFloatingLabelStyle,\n resetInputLabelPosition,\n resetInputOverrides,\n useHostExternalPadding,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('text-field');\n\nconst observedAttrs = ['type', 'label-type', 'copy-to-clipboard'];\n\nconst customMixin = (superclass) =>\n class TextFieldClass extends superclass {\n static get observedAttributes() {\n return observedAttrs.concat(superclass.observedAttributes || []);\n }\n\n icon;\n\n init() {\n super.init?.();\n }\n\n renderCopyToClipboard(shouldRender) {\n if (!shouldRender) {\n this.icon?.remove();\n return;\n }\n\n const iconInitConfig = {\n icon: 'vaadin:copy-o',\n title: 'Copy',\n style: 'cursor: pointer',\n };\n\n const iconCopiedConfig = {\n icon: 'vaadin:check-circle-o',\n title: 'Copied',\n style: 'cursor: initial',\n };\n\n this.icon = Object.assign(document.createElement('vaadin-icon'), {\n slot: 'suffix',\n ...iconInitConfig,\n });\n\n this.baseElement.appendChild(this.icon);\n this.icon.addEventListener('click', () => {\n navigator.clipboard.writeText(this.value);\n Object.assign(this.icon, iconCopiedConfig);\n\n // we want the icon to go back to the initial state after 5 seconds\n setTimeout(() => {\n Object.assign(this.icon, iconInitConfig);\n }, 5000);\n });\n }\n\n onLabelClick() {\n this.focus();\n }\n\n attributeChangedCallback(attrName, oldVal, newVal) {\n super.attributeChangeCallback?.(attrName, oldVal, newVal);\n\n // Vaadin doesn't allow to change the input type attribute.\n // We need the ability to do that, so we're overriding their\n // behavior with their private API.\n // When receiving a `type` attribute, we use their private API\n // to set it on the input.\n if (attrName === 'type') {\n this.baseElement._setType(newVal);\n }\n\n if (oldVal !== newVal) {\n if (attrName === 'label-type') {\n if (newVal === 'floating') {\n this.addEventListener('click', this.onLabelClick);\n } else {\n this.removeEventListener('click', this.onLabelClick);\n }\n } else if (attrName === 'copy-to-clipboard') {\n this.renderCopyToClipboard(newVal === 'true');\n }\n }\n }\n };\n\nexport const TextFieldClass = compose(\n createStyleMixin({\n mappings: textFieldMappings,\n }),\n draggableMixin,\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n customMixin\n)(\n createProxy({\n slots: ['prefix', 'suffix'],\n wrappedEleName: 'vaadin-text-field',\n 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(${TextFieldClass.cssVarList.inputOutlineWidth}) + var(${\n TextFieldClass.cssVarList.inputOutlineOffset\n }));\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 ${resetInputLabelPosition('vaadin-text-field')}\n\t\t\t${useHostExternalPadding(TextFieldClass.cssVarList)}\n\t\t\t${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}\n ${inputFloatingLabelStyle()}\n\n vaadin-text-field vaadin-icon {\n align-self: center;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex', 'style'],\n componentName,\n })\n);\n","import '@vaadin/text-field';\nimport '@vaadin/icons';\nimport '@vaadin/icon';\n\nimport { componentName, TextFieldClass } from './TextFieldClass';\n\ncustomElements.define(componentName, TextFieldClass);\n\nexport { TextFieldClass, componentName };\n","const {\n host,\n label,\n placeholder,\n requiredIndicator,\n inputField,\n input,\n inputMask,\n helperText,\n errorMessage,\n disabledPlaceholder,\n inputDisabled,\n inputIcon,\n externalInput,\n externalInputDisabled,\n externalPlaceholder,\n externalDisabledPlaceholder,\n} = {\n host: { selector: () => ':host' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n placeholder: [\n { selector: '> input:placeholder-shown' },\n { selector: () => ':host::slotted(input:placeholder-shown)' },\n ],\n disabledPlaceholder: { selector: '> input:disabled::placeholder' },\n inputField: { selector: '::part(input-field)' },\n input: { selector: 'input' },\n inputMask: { selector: '::part(input-field)::before' },\n inputDisabled: { selector: 'input:disabled' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n inputIcon: { selector: 'vaadin-icon' },\n externalInput: { selector: () => '::slotted(input)' },\n externalInputDisabled: { selector: () => '::slotted(input:disabled)' },\n externalPlaceholder: { selector: () => '::slotted(input:placeholder-shown)' },\n externalDisabledPlaceholder: { selector: () => '::slotted(input:disabled::placeholder)' },\n};\n\nexport default {\n // we apply font-size also on the host so we can set its width with em\n fontSize: [{}, host],\n fontFamily: [label, inputField, helperText, errorMessage],\n\n labelFontSize: { ...label, property: 'font-size' },\n labelFontWeight: { ...label, property: 'font-weight' },\n\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n { ...label, property: '-webkit-text-fill-color' },\n { ...requiredIndicator, property: '-webkit-text-fill-color' },\n ],\n\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostDirection: { ...host, property: 'direction' },\n inputDirection: { ...input, property: 'direction' },\n\n inputBackgroundColor: [\n { ...inputField, property: 'background-color' },\n { ...inputMask, property: 'background-color' },\n ],\n\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n helperTextColor: { ...helperText, property: '-webkit-text-fill-color' },\n\n inputValueTextColor: [\n { ...inputField, property: 'color' },\n { ...inputDisabled, property: '-webkit-text-fill-color' },\n { ...externalInputDisabled, property: '-webkit-text-fill-color' },\n ],\n inputCaretTextColor: [\n { ...input, property: 'caret-color' },\n { ...externalInput, property: 'caret-color' },\n ],\n\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n\n inputHeight: { ...inputField, property: 'height' },\n inputHorizontalPadding: [\n { ...input, property: 'padding-left' },\n { ...input, property: 'padding-right' },\n { ...externalInput, property: 'padding-left' },\n { ...externalInput, property: 'padding-right' },\n ],\n\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n\n textAlign: {},\n\n inputTextAlign: [\n { ...input, property: 'text-align' },\n { ...externalInput, property: 'text-align' },\n ],\n\n inputPlaceholderColor: [\n { selector: () => ':host input:placeholder-shown', property: 'color' },\n { ...externalPlaceholder, property: 'color' },\n { ...placeholder, property: 'color' },\n { ...disabledPlaceholder, property: '-webkit-text-fill-color' },\n { ...externalDisabledPlaceholder, property: '-webkit-text-fill-color' },\n ],\n\n labelPosition: { ...label, property: 'position' },\n labelTopPosition: { ...label, property: 'top' },\n labelHorizontalPosition: [\n { ...label, property: 'left' },\n { ...label, property: 'right' },\n ],\n inputTransformY: { ...label, property: 'transform' },\n inputTransition: { ...label, property: 'transition' },\n marginInlineStart: { ...label, property: 'margin-inline-start' },\n placeholderOpacity: [\n { selector: '> input:placeholder-shown', property: 'opacity' },\n { ...externalPlaceholder, property: 'opacity' },\n ],\n inputVerticalAlignment: [\n { ...inputField, property: 'align-items' },\n { ...externalInput, property: 'align-items' },\n ],\n valueInputHeight: [\n { ...input, property: 'height' },\n { ...externalInput, property: 'height' },\n ],\n valueInputMarginBottom: [\n { ...input, property: 'margin-bottom' },\n { ...externalInput, property: 'margin-bottom' },\n ],\n\n inputIconOffset: [\n { ...inputIcon, property: 'margin-right' },\n { ...inputIcon, property: 'margin-left' },\n ],\n inputIconSize: { ...inputIcon, property: 'font-size' },\n inputIconColor: { ...inputIcon, property: 'color' },\n};\n","export const useHostExternalPadding = (cssVarList) => `\n :host {\n padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n ${name}::part(input-field)::after {\n border: none;\n }\n`;\n\nexport const resetInitialHeight = (name) => `\n ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n ${name} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputContainer = (name) => `\n ${name} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputField = (name) => `\n ${name}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`;\n\nexport const resetInputCursor = (name) => `\n ${name} > label,\n ${name}::part(label),\n ${name}::part(required-indicator) {\n cursor: pointer;\n }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n ${name} input:-webkit-autofill,\n ${name} input:-webkit-autofill::first-line,\n ${name} input:-webkit-autofill:hover,\n ${name} input:-webkit-autofill:active,\n ${name} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n ${name}::part(input-field)::after {\n opacity: 0;\n }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n ${name}::part(input-field)::after {\n background: none;\n }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n ${resetInputContainer(name)}\n ${resetInputCursor(name)}\n ${resetInputPlaceholder(name)}\n ${resetInputField(name)}\n ${resetInputAutoFill(name, cssVarList)}\n ${resetInputFieldInvalidBackgroundColor(name)}\n ${resetInitialHeight(name)}\n ${resetInputElement(name)}\n ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${name} [slot=\"label\"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n return `\n :host([label-type=\"floating\"]) {\n position: relative;\n }\n :host([label-type=\"floating\"][has-label]) [slot=\"label\"] {\n padding: 0;\n }\n :host([label-type=\"floating\"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n `;\n};\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { SlotController } from '@vaadin/component-base/src/slot-controller.js';\n\n/**\n * A controller to create and initialize slotted `<input>` element.\n */\nexport class InputController extends SlotController {\n constructor(host, callback) {\n super(host, 'input', 'input', {\n initializer: (node, host) => {\n if (host.value) {\n node.value = host.value;\n }\n if (host.type) {\n node.setAttribute('type', host.type);\n }\n\n // Ensure every instance has unique ID\n node.id = this.defaultId;\n\n if (typeof callback === 'function') {\n callback(node);\n }\n },\n useUniqueId: true,\n });\n }\n}\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { InputControlMixin } from './input-control-mixin.js';\n\n/**\n * A mixin to provide logic for vaadin-text-field and related components.\n *\n * @polymerMixin\n * @mixes InputControlMixin\n */\nexport const InputFieldMixin = (superclass) =>\n class InputFieldMixinClass extends InputControlMixin(superclass) {\n static get properties() {\n return {\n /**\n * Whether the value of the control can be automatically completed by the browser.\n * List of available options at:\n * https://developer.mozilla.org/en/docs/Web/HTML/Element/input#attr-autocomplete\n */\n autocomplete: {\n type: String,\n },\n\n /**\n * This is a property supported by Safari that is used to control whether\n * autocorrection should be enabled when the user is entering/editing the text.\n * Possible values are:\n * on: Enable autocorrection.\n * off: Disable autocorrection.\n */\n autocorrect: {\n type: String,\n },\n\n /**\n * This is a property supported by Safari and Chrome that is used to control whether\n * autocapitalization should be enabled when the user is entering/editing the text.\n * Possible values are:\n * characters: Characters capitalization.\n * words: Words capitalization.\n * sentences: Sentences capitalization.\n * none: No capitalization.\n */\n autocapitalize: {\n type: String,\n reflectToAttribute: true,\n },\n };\n }\n\n static get delegateAttrs() {\n return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];\n }\n\n // Workaround for https://github.com/Polymer/polymer/issues/5259\n get __data() {\n return this.__dataValue || {};\n }\n\n set __data(value) {\n this.__dataValue = value;\n }\n\n /**\n * @param {HTMLElement} input\n * @protected\n * @override\n */\n _inputElementChanged(input) {\n super._inputElementChanged(input);\n\n if (input) {\n // Discard value set on the custom slotted input.\n if (input.value && input.value !== this.value) {\n console.warn(`Please define value on the <${this.localName}> component!`);\n input.value = '';\n }\n\n if (this.value) {\n input.value = this.value;\n }\n }\n }\n\n /**\n * Override an event listener from `FocusMixin`.\n * @param {boolean} focused\n * @protected\n * @override\n */\n _setFocused(focused) {\n super._setFocused(focused);\n\n // Do not validate when focusout is caused by document\n // losing focus, which happens on browser tab switch.\n if (!focused && document.hasFocus()) {\n this.validate();\n }\n }\n\n /**\n * Override an event listener from `InputMixin`\n * to mark as valid after user started typing.\n * @param {Event} event\n * @protected\n * @override\n */\n _onInput(event) {\n super._onInput(event);\n\n if (this.invalid) {\n this.validate();\n }\n }\n\n /**\n * Override an observer from `InputMixin` to validate the field\n * when a new value is set programmatically.\n *\n * @param {string | undefined} newValue\n * @param {string | undefined} oldValue\n * @protected\n * @override\n */\n _valueChanged(newValue, oldValue) {\n super._valueChanged(newValue, oldValue);\n\n if (oldValue === undefined) {\n return;\n }\n\n if (this.invalid) {\n this.validate();\n }\n }\n };\n","/**\n * @license\n * Copyright (c) 2021 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport { InputController } from '@vaadin/field-base/src/input-controller.js';\nimport { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';\nimport { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';\n\n/**\n * A mixin providing common text field functionality.\n *\n * @polymerMixin\n * @mixes InputFieldMixin\n */\nexport const TextFieldMixin = (superClass) =>\n class TextFieldMixinClass extends InputFieldMixin(superClass) {\n static get properties() {\n return {\n /**\n * Maximum number of characters (in Unicode code points) that the user can enter.\n */\n maxlength: {\n type: Number,\n },\n\n /**\n * Minimum number of characters (in Unicode code points) that the user can enter.\n */\n minlength: {\n type: Number,\n },\n\n /**\n * A regular expression that the value is checked against.\n * The pattern must match the entire value, not just some subset.\n */\n pattern: {\n type: String,\n },\n };\n }\n\n static get delegateAttrs() {\n return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];\n }\n\n static get constraints() {\n return [...super.constraints, 'maxlength', 'minlength', 'pattern'];\n }\n\n constructor() {\n super();\n this._setType('text');\n }\n\n /** @protected */\n get clearElement() {\n return this.$.clearButton;\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n this.addController(\n new InputController(this, (input) => {\n this._setInputElement(input);\n this._setFocusElement(input);\n this.stateTarget = input;\n this.ariaTarget = input;\n }),\n );\n this.addController(new LabelledInputController(this.inputElement, this._labelController));\n }\n };\n","/**\n * @license\n * Copyright (c) 2017 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport '@vaadin/input-container/src/vaadin-input-container.js';\nimport { html, PolymerElement } from '@polymer/polymer';\nimport { defineCustomElement } from '@vaadin/component-base/src/define.js';\nimport { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';\nimport { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';\nimport { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';\nimport { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { TextFieldMixin } from './vaadin-text-field-mixin.js';\n\nregisterStyles('vaadin-text-field', inputFieldShared, { moduleId: 'vaadin-text-field-styles' });\n\n/**\n * `<vaadin-text-field>` is a web component that allows the user to input and edit text.\n *\n * ```html\n * <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n * ```\n *\n * ### Prefixes and suffixes\n *\n * These are child elements of a `<vaadin-text-field>` that are displayed\n * inline with the input, before or after.\n * In order for an element to be considered as a prefix, it must have the slot\n * attribute set to `prefix` (and similarly for `suffix`).\n *\n * ```html\n * <vaadin-text-field label=\"Email address\">\n * <div slot=\"prefix\">Sent to:</div>\n * <div slot=\"suffix\">@vaadin.com</div>\n * </vaadin-text-field>\n * ```\n *\n * ### Styling\n *\n * The following custom properties are available for styling:\n *\n * Custom property | Description | Default\n * -------------------------------|----------------------------|---------\n * `--vaadin-field-default-width` | Default width of the field | `12em`\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ---------------------|----------------\n * `label` | The label element\n * `input-field` | The element that wraps prefix, value and suffix\n * `clear-button` | The clear button\n * `error-message` | The error message element\n * `helper-text` | The helper text element wrapper\n * `required-indicator` | The `required` state indicator element\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * --------------------|-------------|------------\n * `disabled` | Set to a disabled text field | :host\n * `has-value` | Set when the element has a value | :host\n * `has-label` | Set when the element has a label | :host\n * `has-helper` | Set when the element has helper text or slot | :host\n * `has-error-message` | Set when the element has an error message | :host\n * `invalid` | Set when the element is invalid | :host\n * `input-prevented` | Temporarily set when invalid input is prevented | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `readonly` | Set to a readonly text field | :host\n *\n * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n *\n * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.\n * @fires {Event} change - Fired when the user commits a value change.\n * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.\n * @fires {CustomEvent} value-changed - Fired when the `value` property changes.\n * @fires {CustomEvent} validated - Fired whenever the field is validated.\n *\n * @customElement\n * @extends HTMLElement\n * @mixes ElementMixin\n * @mixes ThemableMixin\n * @mixes TextFieldMixin\n */\nexport class TextField extends TextFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {\n static get is() {\n return 'vaadin-text-field';\n }\n\n static get template() {\n return html`\n <style>\n [part='input-field'] {\n flex-grow: 0;\n }\n </style>\n\n <div class=\"vaadin-field-container\">\n <div part=\"label\">\n <slot name=\"label\"></slot>\n <span part=\"required-indicator\" aria-hidden=\"true\" on-click=\"focus\"></span>\n </div>\n\n <vaadin-input-container\n part=\"input-field\"\n readonly=\"[[readonly]]\"\n disabled=\"[[disabled]]\"\n invalid=\"[[invalid]]\"\n theme$=\"[[_theme]]\"\n >\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"input\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <div id=\"clearButton\" part=\"clear-button\" slot=\"suffix\" aria-hidden=\"true\"></div>\n </vaadin-input-container>\n\n <div part=\"helper-text\">\n <slot name=\"helper\"></slot>\n </div>\n\n <div part=\"error-message\">\n <slot name=\"error-message\"></slot>\n </div>\n </div>\n <slot name=\"tooltip\"></slot>\n `;\n }\n\n static get properties() {\n return {\n /**\n * Maximum number of characters (in Unicode code points) that the user can enter.\n */\n maxlength: {\n type: Number,\n },\n\n /**\n * Minimum number of characters (in Unicode code points) that the user can enter.\n */\n minlength: {\n type: Number,\n },\n };\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n this._tooltipController = new TooltipController(this);\n this._tooltipController.setPosition('top');\n this._tooltipController.setAriaTarget(this.inputElement);\n this.addController(this._tooltipController);\n }\n}\n\ndefineCustomElement(TextField);\n","/**\n * @license\n * Copyright (c) 2017 - 2023 Vaadin Ltd.\n * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n */\nimport '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js';\nimport { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';\nimport { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n\nregisterStyles('vaadin-text-field', inputFieldShared, {\n moduleId: 'lumo-text-field-styles',\n});\n"],"names":["createBaseInputClass","args","componentName","RawLoaderRadial","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","LoaderRadialClass","mappings","hostDisplay","property","spinnerSize","spinnerBorderWidth","spinnerBorderStyle","spinnerBorderRadius","spinnerQuadrant1Color","spinnerQuadrant2Color","spinnerQuadrant3Color","spinnerQuadrant4Color","animationDuration","animationTimingFunction","animationIterationCount","customElements","define","observedAttributes","forwardAttributes","BaseInputClass","concat","wrapperEle","querySelector","loaderContainer","renderInputs","inputs","Array","digits","keys","map","idx","join","from","querySelectorAll","initInputs","handleLoadingState","isLoading","setAttribute","removeAttribute","Number","parseInt","getAttribute","value","val","parseInputValue","getValidity","isRequired","valueMissing","pattern","RegExp","test","patternMismatch","init","addEventListener","e","isTrusted","focus","getInputIdx","inputEle","getNextInput","currInput","currentIdx","newIdx","Math","min","length","getPrevInput","max","fillDigits","charArr","currentInput","i","nextInput","input","split","forEach","debouncedHandleParseInput","trailing","setTimeout","inputType","onkeydown","key","setSelectionRange","includeAttrs","shadowRoot","handleFocusEventsDispatching","handleInputEventDispatching","attributeChangedCallback","attrName","oldValue","newValue","includes","INPUT_MASK_TEXT_PROP","INPUT_MASK_DISPLAY_PROP","INPUT_MASK_FALLBACK_PROP","focusElement","ele","sanitizeStr","str","replace","toggleMaskVisibility","style","setProperty","removeProperty","host","digitField","label","requiredIndicator","internalWrapper","focusedDigitField","errorMessage","selector","TextFieldClass","textVars","cssVarList","loaderVars","PasscodeClass","fontSize","hostWidth","hostDirection","fontFamily","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","digitValueTextColor","inputValueTextColor","digitSize","digitPadding","inputHorizontalPadding","digitTextAlign","inputTextAlign","digitCaretTextColor","inputCaretTextColor","digitSpacing","digitOutlineColor","inputOutlineColor","digitOutlineWidth","inputOutlineWidth","focusedDigitFieldOutlineColor","overlayOpacity","proxyProps","superclass","template","document","createElement","baseElement","appendChild","content","cloneNode","inputElement","slots","wrappedEleName","inputHeight","excludeAttrsSync","observedAttrs","useProxyTargets","icon","renderCopyToClipboard","shouldRender","remove","iconInitConfig","title","iconCopiedConfig","Object","assign","slot","navigator","clipboard","writeText","onLabelClick","oldVal","newVal","attributeChangeCallback","_setType","removeEventListener","inputOutlineOffset","placeholder","inputField","inputMask","helperText","disabledPlaceholder","inputDisabled","inputIcon","externalInput","externalInputDisabled","externalPlaceholder","externalDisabledPlaceholder","labelFontSize","labelFontWeight","hostMinWidth","inputDirection","inputBackgroundColor","helperTextColor","inputBorderColor","inputBorderWidth","inputBorderStyle","inputBorderRadius","inputOutlineStyle","textAlign","inputPlaceholderColor","labelPosition","labelTopPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","placeholderOpacity","inputVerticalAlignment","valueInputHeight","valueInputMarginBottom","inputIconOffset","inputIconSize","inputIconColor","useHostExternalPadding","resetInputContainer","name","resetInputField","resetInputCursor","resetInputPlaceholder","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle","InputController","callback","initializer","node","type","id","defaultId","useUniqueId","InputFieldMixin","properties","autocomplete","String","autocorrect","autocapitalize","reflectToAttribute","delegateAttrs","__data","__dataValue","_inputElementChanged","console","warn","localName","_setFocused","focused","hasFocus","validate","_onInput","event","invalid","_valueChanged","undefined","TextFieldMixin","superClass","maxlength","minlength","constraints","clearElement","$","clearButton","ready","addController","_setInputElement","_setFocusElement","stateTarget","ariaTarget","_labelController","moduleId","TextField","is","_tooltipController","setPosition","setAriaTarget"],"sourceRoot":""}

package/dist/umd/descope-password-index-js.js CHANGED Viewed

@@ -1 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[6969],{14372:(t,e,n)=>{n.d(e,{M:()=>m,T:()=>l});var i=n(94619),r=n(7138),o=n(14944),s=n(43686),a=n(33177);const l=(0,o.xE)("password"),{host:p,inputField:d,inputElement:u,inputElementPlaceholder:h,revealButtonContainer:b,revealButtonIcon:c,label:g,requiredIndicator:y,errorMessage:w,helperText:f}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:()=>":host input:placeholder-shown"},revealButtonContainer:{selector:"::part(reveal-button)"},revealButtonIcon:{selector:"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},m=(0,r.Zz)((0,i.RF)({mappings:{hostWidth:{...p,property:"width"},hostMinWidth:{...p,property:"min-width"},hostDirection:{...p,property:"direction"},fontSize:[{},p],fontFamily:[g,d,w,f],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...u,property:"padding-left"},{...u,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelFontSize:{...g,property:"font-size"},labelFontWeight:{...g,property:"font-weight"},labelTextColor:[{...g,property:"color"},{...y,property:"color"}],labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},inputPlaceholderTextColor:[{...h,property:"color"},{selector:()=>":host ::slotted(input:placeholder-shown)",property:"color"}],inputValueTextColor:[{...u,property:"color"},{selector:()=>":host ::slotted(input)",property:"color"}],revealButtonOffset:[{...b,property:"margin-right"},{...b,property:"margin-left"}],revealButtonSize:{...b,property:"font-size"},revealButtonColor:{...c,property:"color"},labelPosition:{...g,property:"position"},labelTopPosition:{...g,property:"top"},labelHorizontalPosition:[{...g,property:"left"},{...g,property:"right"}],inputTransformY:{...g,property:"transform"},inputTransition:{...g,property:"transition"},marginInlineStart:{...g,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...u,property:"opacity"}],inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...u,property:"height"}}}),i.VO,(0,i.RV)({inputType:"password",inputName:"password",includeAttrs:["disabled","readonly","pattern","type","autocomplete"],noBlurDispatch:!0}),(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,s.A,(t=>class extends t{static get observedAttributes(){return["manual-visibility-toggle"]}get manualToggleVisibility(){return"true"===this.getAttribute("manual-visibility-toggle")}init(){super.init?.(),this.handleCaretOnVisibilityChange(),this.origSetPasswordVisible=this.baseElement._setPasswordVisible,this.origSetFocused=this.baseElement._setFocused,this.baseElement._setFocused=this.setFocus.bind(this),this.initExternalInput()}initExternalInput(){const t=this.createExternalInput();t&&this.handlePasswordVisibility(t)}get caretPosition(){return this.value?.length||0}handleCaretOnVisibilityChange(){const t=this.baseElement._togglePasswordVisibility.bind(this.baseElement);this.baseElement._togglePasswordVisibility=()=>{setTimeout((()=>(t(),this.inputElement.setSelectionRange(this.caretPosition,this.caretPosition),!1)))}}setFocus(t){this.manualToggleVisibility&&(this.baseElement._setPasswordVisible=()=>{}),this.origSetFocused.call(this.baseElement,t),this.baseElement._setPasswordVisible=this.origSetPasswordVisible.bind(this.baseElement)}resetPasswordVisibilityToggle(){this.baseElement._setPasswordVisible=this.origSetPasswordVisible,this.baseElement._setFocused=this.origSetFocus}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n)}handlePasswordVisibility(t){const e=this.baseElement.__boundRevealButtonMouseDown;this.baseElement.querySelector("vaadin-password-field-button").removeEventListener("mousedown",e),this.baseElement._passwordVisibleChanged=()=>{},this.baseElement._togglePasswordVisibility=()=>{"password"===t.getAttribute("type")?this.showPasswordVisibility(t):this.hidePasswordVisibility(t)}}showPasswordVisibility(t){t.setAttribute("type","text"),this.setAttribute("password-visible","true")}hidePasswordVisibility(t){t.setAttribute("type","password"),this.setAttribute("password-visible","false")}}))((0,i.tz)({slots:["","suffix"],wrappedEleName:"vaadin-password-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\tmin-width: 10em;\n        box-sizing: border-box;\n        position: relative;\n\t\t\t}\n\t\t\t${(0,a.cy)(m.cssVarList)}\n\t\t\t${(0,a.I4)("vaadin-password-field")}\n      ${(0,a.$J)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n        -webkit-mask-image: none;\n\t\t\t\tbox-sizing: border-box;\n        opacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n      :host ::slotted(input) {\n\t\t\t\tmin-height: 0;\n      }\n      :host([readonly]) ::slotted(input:placeholder-shown) {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t:host([readonly]) vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${m.cssVarList.inputOutlineColor});\n\t\t\t}\n\n      ${(0,a.Kl)()}\n    \n      ::part(reveal-button) {\n        align-self: center;\n      }\n\n      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},1279:(t,e,n)=>{n.r(e),n.d(e,{PasswordClass:()=>i.M,componentName:()=>i.T}),n(97979);var i=n(14372);customElements.define(i.T,i.M)},43686:(t,e,n)=>{n.d(e,{A:()=>i});const i=t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){super.init?.();const t=this.querySelector("input");t?.addEventListener("mousedown",(e=>{if(this.isDraggable&&this.isReadOnly){t.setAttribute("inert","true");const n=e.target,i=n.getAttribute("type");n.setAttribute("type","text"),setTimeout((()=>{n.focus()}));const r=e=>{n.setAttribute("type",i),t.removeAttribute("inert"),this.removeEventListener("mouseup",r),this.removeEventListener("dragend",r)};this.addEventListener("dragend",r,{once:!0}),this.addEventListener("mouseup",r,{once:!0})}}))}}},33177:(t,e,n)=>{n.d(e,{$J:()=>h,I4:()=>s,Kl:()=>b,LJ:()=>u,Qv:()=>o,X6:()=>l,cy:()=>i,fu:()=>p,kG:()=>d,lS:()=>a,zm:()=>r});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,s=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${r(t)}\n    ${s(t)}\n    ${a(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,h=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,b=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[6969],{5810:(t,e,n)=>{n.d(e,{M:()=>m,T:()=>l});var i=n(79365),r=n(9696),o=n(97810),s=n(16616),a=n(73551);const l=(0,o.xE)("password"),{host:p,inputField:d,inputElement:u,inputElementPlaceholder:h,revealButtonContainer:b,revealButtonIcon:c,label:g,requiredIndicator:y,errorMessage:w,helperText:f}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:()=>":host input:placeholder-shown"},revealButtonContainer:{selector:"::part(reveal-button)"},revealButtonIcon:{selector:"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},m=(0,r.Zz)((0,i.RF)({mappings:{hostWidth:{...p,property:"width"},hostMinWidth:{...p,property:"min-width"},hostDirection:{...p,property:"direction"},fontSize:[{},p],fontFamily:[g,d,w,f],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...u,property:"padding-left"},{...u,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelFontSize:{...g,property:"font-size"},labelFontWeight:{...g,property:"font-weight"},labelTextColor:[{...g,property:"color"},{...y,property:"color"}],labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...w,property:"color"},errorMessageIcon:{...w,property:"background-image"},errorMessageIconSize:{...w,property:"background-size"},errorMessageIconPadding:{...w,property:"padding-inline-start"},errorMessageIconRepeat:{...w,property:"background-repeat"},errorMessageIconPosition:{...w,property:"background-position"},inputPlaceholderTextColor:[{...h,property:"color"},{selector:()=>":host ::slotted(input:placeholder-shown)",property:"color"}],inputValueTextColor:[{...u,property:"color"},{selector:()=>":host ::slotted(input)",property:"color"}],revealButtonOffset:[{...b,property:"margin-right"},{...b,property:"margin-left"}],revealButtonSize:{...b,property:"font-size"},revealButtonColor:{...c,property:"color"},labelPosition:{...g,property:"position"},labelTopPosition:{...g,property:"top"},labelHorizontalPosition:[{...g,property:"left"},{...g,property:"right"}],inputTransformY:{...g,property:"transform"},inputTransition:{...g,property:"transition"},marginInlineStart:{...g,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"},{...u,property:"opacity"}],inputVerticalAlignment:{...d,property:"align-items"},valueInputHeight:{...u,property:"height"}}}),i.VO,(0,i.RV)({inputType:"password",inputName:"password",includeAttrs:["disabled","readonly","pattern","type","autocomplete"],noBlurDispatch:!0}),(0,i.OZ)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),i.tQ,s.A,(t=>class extends t{static get observedAttributes(){return["manual-visibility-toggle"]}get manualToggleVisibility(){return"true"===this.getAttribute("manual-visibility-toggle")}init(){super.init?.(),this.handleCaretOnVisibilityChange(),this.origSetPasswordVisible=this.baseElement._setPasswordVisible,this.origSetFocused=this.baseElement._setFocused,this.baseElement._setFocused=this.setFocus.bind(this),this.initExternalInput()}initExternalInput(){const t=this.createExternalInput();t&&this.handlePasswordVisibility(t)}get caretPosition(){return this.value?.length||0}handleCaretOnVisibilityChange(){const t=this.baseElement._togglePasswordVisibility.bind(this.baseElement);this.baseElement._togglePasswordVisibility=()=>{setTimeout((()=>(t(),this.inputElement.setSelectionRange(this.caretPosition,this.caretPosition),!1)))}}setFocus(t){this.manualToggleVisibility&&(this.baseElement._setPasswordVisible=()=>{}),this.origSetFocused.call(this.baseElement,t),this.baseElement._setPasswordVisible=this.origSetPasswordVisible.bind(this.baseElement)}resetPasswordVisibilityToggle(){this.baseElement._setPasswordVisible=this.origSetPasswordVisible,this.baseElement._setFocused=this.origSetFocus}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n)}handlePasswordVisibility(t){const e=this.baseElement.__boundRevealButtonMouseDown;this.baseElement.querySelector("vaadin-password-field-button").removeEventListener("mousedown",e),this.baseElement._passwordVisibleChanged=()=>{},this.baseElement._togglePasswordVisibility=()=>{"password"===t.getAttribute("type")?this.showPasswordVisibility(t):this.hidePasswordVisibility(t)}}showPasswordVisibility(t){t.setAttribute("type","text"),this.setAttribute("password-visible","true")}hidePasswordVisibility(t){t.setAttribute("type","password"),this.setAttribute("password-visible","false")}}))((0,i.tz)({slots:["","suffix"],wrappedEleName:"vaadin-password-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\tmin-width: 10em;\n        box-sizing: border-box;\n        position: relative;\n\t\t\t}\n\t\t\t${(0,a.cy)(m.cssVarList)}\n\t\t\t${(0,a.I4)("vaadin-password-field")}\n      ${(0,a.$J)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n        -webkit-mask-image: none;\n\t\t\t\tbox-sizing: border-box;\n        opacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n      :host ::slotted(input) {\n\t\t\t\tmin-height: 0;\n      }\n      :host([readonly]) ::slotted(input:placeholder-shown) {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t:host([readonly]) vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${m.cssVarList.inputOutlineColor});\n\t\t\t}\n\n      ${(0,a.Kl)()}\n    \n      ::part(reveal-button) {\n        align-self: center;\n      }\n\n      vaadin-password-field[external-input="true"] > input:not(:placeholder-shown) {\n        opacity: 0;\n      }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:l}))},19169:(t,e,n)=>{n.r(e),n.d(e,{PasswordClass:()=>i.M,componentName:()=>i.T}),n(51899);var i=n(5810);customElements.define(i.T,i.M)},16616:(t,e,n)=>{n.d(e,{A:()=>i});const i=t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){super.init?.();const t=this.querySelector("input");t?.addEventListener("mousedown",(e=>{if(this.isDraggable&&this.isReadOnly){t.setAttribute("inert","true");const n=e.target,i=n.getAttribute("type");n.setAttribute("type","text"),setTimeout((()=>{n.focus()}));const r=e=>{n.setAttribute("type",i),t.removeAttribute("inert"),this.removeEventListener("mouseup",r),this.removeEventListener("dragend",r)};this.addEventListener("dragend",r,{once:!0}),this.addEventListener("mouseup",r,{once:!0})}}))}}},73551:(t,e,n)=>{n.d(e,{$J:()=>h,I4:()=>s,Kl:()=>b,LJ:()=>u,Qv:()=>o,X6:()=>l,cy:()=>i,fu:()=>p,kG:()=>d,lS:()=>a,zm:()=>r});const i=t=>`\n    :host {\n        padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n    }\n`,r=t=>`\n    ${t} {\n        margin: 0;\n        padding: 0;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n    }\n`,o=t=>`\n    ${t}::part(input-field) {\n        overflow: hidden;\n        padding: 0;\n        box-shadow: none;\n    }\n`,s=t=>`\n    ${t} > label,\n    ${t}::part(label),\n    ${t}::part(required-indicator) {\n        cursor: pointer;\n    }\n`,a=(t,e="input")=>`\n    ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,l=()=>"\n    :host {\n        --vaadin-field-default-width: auto;\n        box-sizing: border-box;\n    }\n",p=t=>`\n    ${t}::part(input-field)::after {\n        opacity: 0;\n    }\n`,d=t=>`\n    ${t}::part(input-field)::after {\n        background: none;\n    }\n`,u=(t,e)=>`\n    ${r(t)}\n    ${s(t)}\n    ${a(t)}\n    ${o(t)}\n    ${((t,e)=>`\n    ${t} input:-webkit-autofill,\n    ${t} input:-webkit-autofill::first-line,\n    ${t} input:-webkit-autofill:hover,\n    ${t} input:-webkit-autofill:active,\n    ${t} input:-webkit-autofill:focus {\n        -webkit-text-fill-color: var(${e.inputValueTextColor});\n        box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n    }\n`)(t,e)}\n    ${d(t)}\n    ${(t=>`\n    ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n    ${(t=>`\n    ${t} > input {\n        -webkit-mask-image: none;\n        min-height: 0;\n        box-sizing: border-box;\n    }\n`)(t)}\n    ${(t=>`\n    ${t}::part(input-field)::after {\n        border: none;\n    }\n`)(t)}\n`,h=t=>`\n    :host ::part(error-message) {\n      direction: ltr;\n    }\n    :host([required]) ::part(required-indicator) {\n      width: 1em;\n      display: inline-flex;\n    }\n    :host([required]) ::part(required-indicator)::after {\n      position: static;\n    }\n    :host([has-label]) ::part(label) {\n      padding-right: 0;\n      padding-bottom: 0;\n      display: flex;\n      width: 100%;\n    }\n    ${t} [slot="label"] {\n      max-width: calc(100% - 1em);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      padding-bottom: 0.5em;\n    }\n`,b=()=>'\n  :host([label-type="floating"]) {\n    position: relative;\n  }\n  :host([label-type="floating"][has-label]) [slot="label"] {\n    padding: 0;\n  }\n  :host([label-type="floating"][has-label]) > ::part(label) {\n    z-index: 1;\n    padding: 0;\n    width: auto;\n  }\n  '}}]);
+//# sourceMappingURL=descope-password-index-js.js.map

package/dist/umd/descope-password-index-js.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"descope-password-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-password/PasswordClass.js","webpack://@descope/web-components-ui/./src/components/descope-password/index.js","webpack://@descope/web-components-ui/./src/components/descope-password/passwordDraggableMixin.js","webpack://@descope/web-components-ui/./src/helpers/themeHelpers/resetHelpers.js"],"sourcesContent":["import {\n createStyleMixin,\n draggableMixin,\n createProxy,\n proxyInputMixin,\n componentNameValidationMixin,\n externalInputMixin,\n} from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport passwordDraggableMixin from './passwordDraggableMixin';\nimport {\n resetInputLabelPosition,\n resetInputCursor,\n useHostExternalPadding,\n inputFloatingLabelStyle,\n} from '../../helpers/themeHelpers/resetHelpers';\n\nexport const componentName = getComponentName('password');\n\nconst customMixin = (superclass) =>\n class PasswordFieldMixinClass extends superclass {\n static get observedAttributes() {\n return ['manual-visibility-toggle'];\n }\n\n get manualToggleVisibility() {\n return this.getAttribute('manual-visibility-toggle') === 'true';\n }\n\n init() {\n super.init?.();\n this.handleCaretOnVisibilityChange();\n this.origSetPasswordVisible = this.baseElement._setPasswordVisible;\n this.origSetFocused = this.baseElement._setFocused;\n this.baseElement._setFocused = this.setFocus.bind(this);\n\n this.initExternalInput();\n }\n\n initExternalInput() {\n const externalInput = this.createExternalInput();\n if (externalInput) {\n this.handlePasswordVisibility(externalInput);\n }\n }\n\n get caretPosition() {\n return this.value?.length || 0;\n }\n\n handleCaretOnVisibilityChange() {\n const origTogglePasswordVisibility = this.baseElement._togglePasswordVisibility.bind(\n this.baseElement\n );\n this.baseElement._togglePasswordVisibility = () => {\n setTimeout(() => {\n origTogglePasswordVisibility();\n this.inputElement.setSelectionRange(this.caretPosition, this.caretPosition);\n return false;\n });\n };\n }\n\n // We use `manual-visibility-toggle` to to toggle the password's visibility\n // even if the input field is focused-out. However, on focusout - Vaadin resets\n // password visibility. Since we don't want to override Vaadin's native setFocus\n // function (which is part of their FocusMixin).\n // So, here we override the part of logic that runs within Vaadin's setFocus that reports\n // the password visibility state. This logic is part of our `manual-visibility-toggle` only.\n setFocus(focused) {\n if (this.manualToggleVisibility) {\n this.baseElement._setPasswordVisible = () => {};\n }\n this.origSetFocused.call(this.baseElement, focused);\n this.baseElement._setPasswordVisible = this.origSetPasswordVisible.bind(this.baseElement);\n }\n\n resetPasswordVisibilityToggle() {\n this.baseElement._setPasswordVisible = this.origSetPasswordVisible;\n this.baseElement._setFocused = this.origSetFocus;\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n }\n\n // override vaadin's password visibility toggle.\n // we need this override in order to to resolve the external input `focus` race condition,\n // which is caused due to the focus sync between the two inputs.\n handlePasswordVisibility(externalInput) {\n // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener\n const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;\n this.baseElement\n .querySelector('vaadin-password-field-button')\n .removeEventListener('mousedown', origBoundRevealButtonMouseDown);\n\n // disable vaadin's `_passwordVisibleChanged` observer\n this.baseElement._passwordVisibleChanged = () => {};\n\n // override vaadin's `_togglePasswordVisibility`\n this.baseElement._togglePasswordVisibility = () => {\n const currVisibility = externalInput.getAttribute('type');\n if (currVisibility === 'password') {\n this.showPasswordVisibility(externalInput);\n } else {\n this.hidePasswordVisibility(externalInput);\n }\n };\n }\n\n showPasswordVisibility(input) {\n // handle input element's type\n input.setAttribute('type', 'text');\n // handle vaadin's `password-visible` attribute\n this.setAttribute('password-visible', 'true');\n }\n\n hidePasswordVisibility(input) {\n // handle input element's type\n input.setAttribute('type', 'password');\n // handle vaadin's `password-visible` attribute\n this.setAttribute('password-visible', 'false');\n }\n };\n\nconst {\n host,\n inputField,\n inputElement,\n inputElementPlaceholder,\n revealButtonContainer,\n revealButtonIcon,\n label,\n requiredIndicator,\n errorMessage,\n helperText,\n} = {\n host: { selector: () => ':host' },\n inputField: { selector: '::part(input-field)' },\n inputElement: { selector: '> input' },\n inputElementPlaceholder: { selector: () => ':host input:placeholder-shown' },\n revealButtonContainer: { selector: '::part(reveal-button)' },\n revealButtonIcon: { selector: '::part(reveal-button)::before' },\n label: { selector: '::part(label)' },\n requiredIndicator: { selector: '[required]::part(required-indicator)::after' },\n helperText: { selector: '::part(helper-text)' },\n errorMessage: { selector: '::part(error-message)' },\n};\n\nexport const PasswordClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostMinWidth: { ...host, property: 'min-width' },\n hostDirection: { ...host, property: 'direction' },\n fontSize: [{}, host],\n fontFamily: [label, inputField, errorMessage, helperText],\n inputHeight: { ...inputField, property: 'height' },\n inputHorizontalPadding: [\n { ...inputElement, property: 'padding-left' },\n { ...inputElement, property: 'padding-right' },\n ],\n inputBackgroundColor: { ...inputField, property: 'background-color' },\n\n inputBorderStyle: { ...inputField, property: 'border-style' },\n inputBorderWidth: { ...inputField, property: 'border-width' },\n inputBorderColor: { ...inputField, property: 'border-color' },\n inputBorderRadius: { ...inputField, property: 'border-radius' },\n\n inputOutlineColor: { ...inputField, property: 'outline-color' },\n inputOutlineStyle: { ...inputField, property: 'outline-style' },\n inputOutlineOffset: { ...inputField, property: 'outline-offset' },\n inputOutlineWidth: { ...inputField, property: 'outline-width' },\n\n labelFontSize: { ...label, property: 'font-size' },\n labelFontWeight: { ...label, property: 'font-weight' },\n labelTextColor: [\n { ...label, property: 'color' },\n { ...requiredIndicator, property: 'color' },\n ],\n labelRequiredIndicator: { ...requiredIndicator, property: 'content' },\n errorMessageTextColor: { ...errorMessage, property: 'color' },\n errorMessageIcon: { ...errorMessage, property: 'background-image' },\n errorMessageIconSize: { ...errorMessage, property: 'background-size' },\n errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },\n errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },\n errorMessageIconPosition: { ...errorMessage, property: 'background-position' },\n\n inputPlaceholderTextColor: [\n { ...inputElementPlaceholder, property: 'color' },\n { selector: () => ':host ::slotted(input:placeholder-shown)', property: 'color' },\n ],\n inputValueTextColor: [\n { ...inputElement, property: 'color' },\n { selector: () => ':host ::slotted(input)', property: 'color' },\n ],\n\n revealButtonOffset: [\n { ...revealButtonContainer, property: 'margin-right' },\n { ...revealButtonContainer, property: 'margin-left' },\n ],\n revealButtonSize: { ...revealButtonContainer, property: 'font-size' },\n revealButtonColor: { ...revealButtonIcon, property: 'color' },\n\n labelPosition: { ...label, property: 'position' },\n labelTopPosition: { ...label, property: 'top' },\n labelHorizontalPosition: [\n { ...label, property: 'left' },\n { ...label, property: 'right' },\n ],\n inputTransformY: { ...label, property: 'transform' },\n inputTransition: { ...label, property: 'transition' },\n marginInlineStart: { ...label, property: 'margin-inline-start' },\n placeholderOpacity: [\n { selector: '> input:placeholder-shown', property: 'opacity' },\n { ...inputElement, property: 'opacity' },\n ],\n inputVerticalAlignment: { ...inputField, property: 'align-items' },\n valueInputHeight: { ...inputElement, property: 'height' },\n },\n }),\n draggableMixin,\n externalInputMixin({\n inputType: 'password',\n inputName: 'password',\n includeAttrs: ['disabled', 'readonly', 'pattern', 'type', 'autocomplete'],\n noBlurDispatch: true,\n }),\n proxyInputMixin({ proxyProps: ['value', 'selectionStart'], useProxyTargets: true }),\n componentNameValidationMixin,\n passwordDraggableMixin,\n customMixin\n)(\n createProxy({\n slots: ['', 'suffix'],\n wrappedEleName: 'vaadin-password-field',\n style: () => `\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tmin-width: 10em;\n box-sizing: border-box;\n position: relative;\n\t\t\t}\n\t\t\t${useHostExternalPadding(PasswordClass.cssVarList)}\n\t\t\t${resetInputCursor('vaadin-password-field')}\n ${resetInputLabelPosition('vaadin-password-field')}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n -webkit-mask-image: none;\n\t\t\t\tbox-sizing: border-box;\n opacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n :host ::slotted(input) {\n\t\t\t\tmin-height: 0;\n }\n :host([readonly]) ::slotted(input:placeholder-shown) {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t:host([readonly]) vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${PasswordClass.cssVarList.inputOutlineColor});\n\t\t\t}\n\n ${inputFloatingLabelStyle()}\n \n ::part(reveal-button) {\n align-self: center;\n }\n\n vaadin-password-field[external-input=\"true\"] > input:not(:placeholder-shown) {\n opacity: 0;\n }\n\t\t`,\n excludeAttrsSync: ['tabindex'],\n componentName,\n })\n);\n","import '@vaadin/password-field';\nimport { componentName, PasswordClass } from './PasswordClass';\n\ncustomElements.define(componentName, PasswordClass);\n\nexport { PasswordClass, componentName };\n","const passwordDraggableMixin = (superclass) =>\n class PasswordDraggableMixinClass extends superclass {\n get isReadOnly() {\n return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';\n }\n\n init() {\n // there is an issue in Chrome that input field with type password cannot be D&D\n // so in case the input is draggable & readonly, we are changing the input type to \"text\" before dragging\n // and return the original type when done\n super.init?.();\n\n const ele = this.querySelector('input');\n\n ele?.addEventListener('mousedown', (e) => {\n if (this.isDraggable && this.isReadOnly) {\n ele.setAttribute('inert', 'true');\n\n const inputEle = e.target;\n const prevType = inputEle.getAttribute('type');\n inputEle.setAttribute('type', 'text');\n setTimeout(() => {\n inputEle.focus();\n });\n\n const onComplete = (_) => {\n inputEle.setAttribute('type', prevType);\n ele.removeAttribute('inert');\n this.removeEventListener('mouseup', onComplete);\n this.removeEventListener('dragend', onComplete);\n };\n\n this.addEventListener('dragend', onComplete, { once: true });\n this.addEventListener('mouseup', onComplete, { once: true });\n }\n });\n }\n };\n\nexport default passwordDraggableMixin;\n","export const useHostExternalPadding = (cssVarList) => `\n :host {\n padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))\n }\n`;\n\nexport const resetInputFieldUnderlayingBorder = (name) => `\n ${name}::part(input-field)::after {\n border: none;\n }\n`;\n\nexport const resetInitialHeight = (name) => `\n ${name}::before {\n\t\theight: unset;\n\t}\n`;\n\nexport const resetInputElement = (name) => `\n ${name} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputContainer = (name) => `\n ${name} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputField = (name) => `\n ${name}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`;\n\nexport const resetInputCursor = (name) => `\n ${name} > label,\n ${name}::part(label),\n ${name}::part(required-indicator) {\n cursor: pointer;\n }\n`;\n\nexport const resetInputPlaceholder = (name, ele = 'input') => `\n ${name}[disabled] > ${ele}:placeholder-shown,\n\t${name}[readonly] > ${ele}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`;\n\nexport const resetInputAutoFill = (name, cssVarList) => `\n ${name} input:-webkit-autofill,\n ${name} input:-webkit-autofill::first-line,\n ${name} input:-webkit-autofill:hover,\n ${name} input:-webkit-autofill:active,\n ${name} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${cssVarList.inputValueTextColor});\n box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;\n }\n`;\n\nexport const resetInputFieldDefaultWidth = () => `\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n`;\n\nexport const resetInputReadonlyStyle = (name) => `\n ${name}::part(input-field)::after {\n opacity: 0;\n }\n`;\n\nexport const resetInputFieldInvalidBackgroundColor = (name) => `\n ${name}::part(input-field)::after {\n background: none;\n }\n`;\n\nexport const resetInputOverrides = (name, cssVarList) => `\n ${resetInputContainer(name)}\n ${resetInputCursor(name)}\n ${resetInputPlaceholder(name)}\n ${resetInputField(name)}\n ${resetInputAutoFill(name, cssVarList)}\n ${resetInputFieldInvalidBackgroundColor(name)}\n ${resetInitialHeight(name)}\n ${resetInputElement(name)}\n ${resetInputFieldUnderlayingBorder(name)}\n`;\n\n// This function is used to support RTL correctly for input components.\n// It also fixes the error message to be displayed LTR since we currently\n// don't support RTL for error messages.\nexport const resetInputLabelPosition = (name) => `\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${name} [slot=\"label\"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`;\n\nexport const inputFloatingLabelStyle = () => {\n return `\n :host([label-type=\"floating\"]) {\n position: relative;\n }\n :host([label-type=\"floating\"][has-label]) [slot=\"label\"] {\n padding: 0;\n }\n :host([label-type=\"floating\"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n `;\n};\n"],"names":["componentName","host","inputField","inputElement","inputElementPlaceholder","revealButtonContainer","revealButtonIcon","label","requiredIndicator","errorMessage","helperText","selector","PasswordClass","mappings","hostWidth","property","hostMinWidth","hostDirection","fontSize","fontFamily","inputHeight","inputHorizontalPadding","inputBackgroundColor","inputBorderStyle","inputBorderWidth","inputBorderColor","inputBorderRadius","inputOutlineColor","inputOutlineStyle","inputOutlineOffset","inputOutlineWidth","labelFontSize","labelFontWeight","labelTextColor","labelRequiredIndicator","errorMessageTextColor","errorMessageIcon","errorMessageIconSize","errorMessageIconPadding","errorMessageIconRepeat","errorMessageIconPosition","inputPlaceholderTextColor","inputValueTextColor","revealButtonOffset","revealButtonSize","revealButtonColor","labelPosition","labelTopPosition","labelHorizontalPosition","inputTransformY","inputTransition","marginInlineStart","placeholderOpacity","inputVerticalAlignment","valueInputHeight","inputType","inputName","includeAttrs","noBlurDispatch","proxyProps","useProxyTargets","superclass","observedAttributes","manualToggleVisibility","this","getAttribute","init","super","handleCaretOnVisibilityChange","origSetPasswordVisible","baseElement","_setPasswordVisible","origSetFocused","_setFocused","setFocus","bind","initExternalInput","externalInput","createExternalInput","handlePasswordVisibility","caretPosition","value","length","origTogglePasswordVisibility","_togglePasswordVisibility","setTimeout","setSelectionRange","focused","call","resetPasswordVisibilityToggle","origSetFocus","attributeChangedCallback","attrName","oldValue","newValue","origBoundRevealButtonMouseDown","__boundRevealButtonMouseDown","querySelector","removeEventListener","_passwordVisibleChanged","showPasswordVisibility","hidePasswordVisibility","input","setAttribute","slots","wrappedEleName","style","cssVarList","excludeAttrsSync","customElements","define","isReadOnly","hasAttribute","ele","addEventListener","e","isDraggable","inputEle","target","prevType","focus","onComplete","_","removeAttribute","once","useHostExternalPadding","resetInputContainer","name","resetInputField","resetInputCursor","resetInputPlaceholder","resetInputFieldDefaultWidth","resetInputReadonlyStyle","resetInputFieldInvalidBackgroundColor","resetInputOverrides","resetInputAutoFill","resetInitialHeight","resetInputElement","resetInputFieldUnderlayingBorder","resetInputLabelPosition","inputFloatingLabelStyle"],"sourceRoot":""}

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

@@ -1 +1,2 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2996],{9775:(e,t,i)=>{i.d(t,{T:()=>n,w:()=>y});var l=i(94619),a=i(70263),o=i(7138),s=i(14944),r=i(38917);const n=(0,s.xE)("policy-validation"),d=["data","active-policies","overrides","data-password-policy-value-minlength"],c=["label","value",...d];class p extends((0,a.q)({componentName:n,baseSelector:":host > div"})){#e;#t=[];#i;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,t,i){if(super.attributeChangedCallback?.(e,t,i),t!==i){if("label"===e&&this.updateLabel(i),d.includes(e)){if("data"===e)try{this.availablePolicies=JSON.parse(i)}catch{console.error("Failed to set available policies")}if("active-policies"===e&&(this.#t=(i||"").split(",")),"data-password-policy-value-minlength"===e){const e=Number(i);!Number.isNaN(e)&&e>0&&(this.#i={...this.#i,minlength:{value:`${e}`}})}}this.renderItems(this.#e,this.#t,this.#i)}}get availablePolicies(){return this.#e||[]}set availablePolicies(e){this.#e=e}get value(){return this.getAttribute("value")||""}validate(){let e=this.#e;return this.#i&&(e=this.#e.map((e=>this.#i[e.id]?{...e,data:this.#i[e.id]}:e))),this.#t.reduce(((t,i)=>{const l=e.find((e=>e.id===i));if(!l)return t;const{pattern:a,message:o,data:s}=l;if(!a||!o)return t;const n={valid:new RegExp((0,r.z)(a,s)).test(this.value),message:(0,r.z)(o,s),id:i};return t.push(n),t}),[])}get isValid(){return!this.validate().some((({valid:e})=>!1===e))}getValidationItemTemplate({valid:e,message:t}){return`\n      <li class="item" data-valid="${this.value?e:"none"}">\n        <span class="message">${t}</span>\n      </li>\n    `}renderItems(e,t){e&&t.length&&(this.list.innerHTML=this.validate().map(this.getValidationItemTemplate.bind(this)).join(""))}updateLabel(e){e?(this.label.textContent=e,this.classList.remove("hide-label")):(this.classList.add("hide-label"),this.label.textContent="")}}const{host:b,item:h,symbolDefault:m,symbolSuccess:u,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,o.Zz)((0,l.RF)({componentNameOverride:(0,s.xE)("input-wrapper")}),(0,l.RF)({mappings:{hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},padding:{},borderWidth:{...b,property:"border-width"},borderStyle:{...b,property:"border-style"},borderColor:{...b,property:"border-color"},borderRadius:{...b,property:"border-radius"},backgroundColor:{...b,property:"background-color"},textColor:{property:"color"},labelMargin:{...b,property:"gap"},itemsSpacing:{...h,property:"line-height"},itemSymbolSuccessColor:{...u,property:"color"},itemSymbolErrorColor:{...v,property:"color"},itemSymbolDefault:{...m,property:"content"},itemSymbolSuccess:{...u,property:"content"},itemSymbolError:{...v,property:"content"}}}),l.VO,l.tQ)(p)},38917:(e,t,i)=>{i.d(t,{z:()=>l});const l=(e,t)=>e.replace(/{{(\w+)+}}/g,((e,i)=>t?.[i]||e))},28184:(e,t,i)=>{i.r(t),i.d(t,{PolicyValidationClass:()=>l.w,componentName:()=>l.T});var l=i(9775);customElements.define(l.T,l.w)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2996],{10777:(e,t,i)=>{i.d(t,{T:()=>d,w:()=>g});var l=i(79365),a=i(81365),o=i(9696),s=i(97810),r=i(88191),n=i(25964);const d=(0,s.xE)("policy-validation"),c=["data","active-policies","overrides","data-password-policy-value-minlength"],p=["label","value",...c];class h extends((0,a.q)({componentName:d,baseSelector:":host > div"})){#e;#t=[];#i;static get observedAttributes(){return p}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <div>\n      <div class="label"></div>\n      <ul></ul>\n    </div>\n\t\t',(0,n.fz)("\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        ",this),this.panel=this.shadowRoot.querySelector(":host > div"),this.label=this.shadowRoot.querySelector(".label"),this.list=this.shadowRoot.querySelector("ul")}attributeChangedCallback(e,t,i){if(super.attributeChangedCallback?.(e,t,i),t!==i){if("label"===e&&this.updateLabel(i),c.includes(e)){if("data"===e)try{this.availablePolicies=JSON.parse(i)}catch{console.error("Failed to set available policies")}if("active-policies"===e&&(this.#t=(i||"").split(",")),"data-password-policy-value-minlength"===e){const e=Number(i);!Number.isNaN(e)&&e>0&&(this.#i={...this.#i,minlength:{value:`${e}`}})}}this.renderItems(this.#e,this.#t,this.#i)}}get availablePolicies(){return this.#e||[]}set availablePolicies(e){this.#e=e}get value(){return this.getAttribute("value")||""}validate(){let e=this.#e;return this.#i&&(e=this.#e.map((e=>this.#i[e.id]?{...e,data:this.#i[e.id]}:e))),this.#t.reduce(((t,i)=>{const l=e.find((e=>e.id===i));if(!l)return t;const{pattern:a,message:o,data:s}=l;if(!a||!o)return t;const n={valid:new RegExp((0,r.z)(a,s)).test(this.value),message:(0,r.z)(o,s),id:i};return t.push(n),t}),[])}get isValid(){return!this.validate().some((({valid:e})=>!1===e))}getValidationItemTemplate({valid:e,message:t}){return`\n      <li class="item" data-valid="${this.value?e:"none"}">\n        <span class="message">${t}</span>\n      </li>\n    `}renderItems(e,t){e&&t.length&&(this.list.innerHTML=this.validate().map(this.getValidationItemTemplate.bind(this)).join(""))}updateLabel(e){e?(this.label.textContent=e,this.classList.remove("hide-label")):(this.classList.add("hide-label"),this.label.textContent="")}}const{host:b,item:m,symbolDefault:u,symbolSuccess:v,symbolError:y}={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'}},g=(0,o.Zz)((0,l.RF)({componentNameOverride:(0,s.xE)("input-wrapper")}),(0,l.RF)({mappings:{hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},padding:{},borderWidth:{...b,property:"border-width"},borderStyle:{...b,property:"border-style"},borderColor:{...b,property:"border-color"},borderRadius:{...b,property:"border-radius"},backgroundColor:{...b,property:"background-color"},textColor:{property:"color"},labelMargin:{...b,property:"gap"},itemsSpacing:{...m,property:"line-height"},itemSymbolSuccessColor:{...v,property:"color"},itemSymbolErrorColor:{...y,property:"color"},itemSymbolDefault:{...u,property:"content"},itemSymbolSuccess:{...v,property:"content"},itemSymbolError:{...y,property:"content"}}}),l.VO,l.tQ)(h)},88191:(e,t,i)=>{i.d(t,{z:()=>l});const l=(e,t)=>e.replace(/{{(\w+)+}}/g,((e,i)=>t?.[i]||e))},26782:(e,t,i)=>{i.r(t),i.d(t,{PolicyValidationClass:()=>l.w,componentName:()=>l.T});var l=i(10777);customElements.define(l.T,l.w)}}]);
+//# sourceMappingURL=descope-policy-validation-index-js.js.map

package/dist/umd/descope-policy-validation-index-js.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"descope-policy-validation-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-policy-validation/PolicyValidationClass.js","webpack://@descope/web-components-ui/./src/components/descope-policy-validation/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-policy-validation/index.js"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName } from '../../helpers/componentHelpers';\nimport { interpolateString } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('policy-validation');\n\nconst overrideAttrs = ['data-password-policy-value-minlength'];\nconst dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];\nconst policyAttrs = ['label', 'value', ...dataAttrs];\n\nclass RawPolicyValidation extends createBaseClass({ componentName, baseSelector: ':host > div' }) {\n #availablePolicies;\n\n #activePolicies = [];\n\n #overrides;\n\n static get observedAttributes() {\n return policyAttrs;\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <div>\n <div class=\"label\"></div>\n <ul></ul>\n </div>\n\t\t`;\n\n injectStyle(\n `\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 `,\n this\n );\n\n this.panel = this.shadowRoot.querySelector(':host > div');\n this.label = this.shadowRoot.querySelector('.label');\n this.list = this.shadowRoot.querySelector('ul');\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n if (oldValue !== newValue) {\n if (attrName === 'label') {\n this.updateLabel(newValue);\n }\n\n // we're don't know the order in which the attributes are forwarded, so we're trying to render every time\n // once `data` and `active-policies` are populated, the render will be executed.\n // once the `overrides` object is updated, we want to re-render the panel.\n if (dataAttrs.includes(attrName)) {\n if (attrName === 'data') {\n try {\n this.availablePolicies = JSON.parse(newValue);\n } catch {\n // eslint-disable-next-line no-console\n console.error('Failed to set available policies');\n }\n }\n if (attrName === 'active-policies') {\n this.#activePolicies = (newValue || '').split(',');\n }\n\n if (attrName === 'data-password-policy-value-minlength') {\n const ln = Number(newValue);\n if (!Number.isNaN(ln) && ln > 0) {\n this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };\n }\n }\n }\n\n this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);\n }\n }\n\n get availablePolicies() {\n return this.#availablePolicies || [];\n }\n\n set availablePolicies(val) {\n this.#availablePolicies = val;\n }\n\n get value() {\n return this.getAttribute('value') || '';\n }\n\n validate() {\n let policies = this.#availablePolicies;\n\n if (this.#overrides) {\n policies = this.#availablePolicies.map((policy) =>\n this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy\n );\n }\n\n return this.#activePolicies.reduce((results, id) => {\n const policy = policies.find((p) => p.id === id);\n\n if (!policy) {\n return results;\n }\n\n const { pattern, message, data } = policy;\n\n if (!pattern || !message) {\n return results;\n }\n\n const exp = new RegExp(interpolateString(pattern, data));\n\n const validationResult = {\n valid: exp.test(this.value),\n message: interpolateString(message, data),\n id,\n };\n\n results.push(validationResult);\n\n return results;\n }, []);\n }\n\n get isValid() {\n return !this.validate().some(({ valid }) => valid === false);\n }\n\n getValidationItemTemplate({ valid, message }) {\n const status = !this.value ? 'none' : valid;\n return `\n <li class=\"item\" data-valid=\"${status}\">\n <span class=\"message\">${message}</span>\n </li>\n `;\n }\n\n renderItems(availablePolicies, activePolicies) {\n if (!availablePolicies || !activePolicies.length) {\n return;\n }\n\n this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');\n }\n\n updateLabel(val) {\n if (!val) {\n this.classList.add('hide-label');\n this.label.textContent = '';\n } else {\n this.label.textContent = val;\n this.classList.remove('hide-label');\n }\n }\n}\n\nconst { host, item, symbolDefault, symbolSuccess, symbolError } = {\n host: { selector: () => ':host > div' },\n item: { selector: () => '.item' },\n symbolDefault: { selector: () => '.item[data-valid=\"none\"]::before' },\n symbolSuccess: { selector: () => '.item[data-valid=\"true\"]::before' },\n symbolError: { selector: () => '.item[data-valid=\"false\"]::before' },\n};\n\nexport const PolicyValidationClass = compose(\n createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),\n createStyleMixin({\n mappings: {\n hostDirection: { selector: () => ':host', property: 'direction' },\n fontSize: {},\n fontFamily: {},\n padding: {},\n borderWidth: { ...host, property: 'border-width' },\n borderStyle: { ...host, property: 'border-style' },\n borderColor: { ...host, property: 'border-color' },\n borderRadius: { ...host, property: 'border-radius' },\n backgroundColor: { ...host, property: 'background-color' },\n textColor: { property: 'color' },\n labelMargin: { ...host, property: 'gap' },\n itemsSpacing: { ...item, property: 'line-height' },\n itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },\n itemSymbolErrorColor: { ...symbolError, property: 'color' },\n itemSymbolDefault: { ...symbolDefault, property: 'content' },\n itemSymbolSuccess: { ...symbolSuccess, property: 'content' },\n itemSymbolError: { ...symbolError, property: 'content' },\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawPolicyValidation);\n","export const interpolateString = (template, values) =>\n template.replace(/{{(\\w+)+}}/g, (match, key) => values?.[key] || match);\n","import { componentName, PolicyValidationClass } from './PolicyValidationClass';\n\ncustomElements.define(componentName, PolicyValidationClass);\n\nexport { PolicyValidationClass, componentName };\n"],"names":["componentName","dataAttrs","policyAttrs","RawPolicyValidation","baseSelector","observedAttributes","constructor","super","this","attachShadow","mode","innerHTML","panel","shadowRoot","querySelector","label","list","attributeChangedCallback","attrName","oldValue","newValue","updateLabel","includes","availablePolicies","JSON","parse","console","error","split","ln","Number","isNaN","minlength","value","renderItems","val","getAttribute","validate","policies","map","policy","id","data","reduce","results","find","p","pattern","message","validationResult","valid","RegExp","test","push","isValid","some","getValidationItemTemplate","activePolicies","length","bind","join","textContent","classList","remove","add","host","item","symbolDefault","symbolSuccess","symbolError","selector","PolicyValidationClass","componentNameOverride","mappings","hostDirection","property","fontSize","fontFamily","padding","borderWidth","borderStyle","borderColor","borderRadius","backgroundColor","textColor","labelMargin","itemsSpacing","itemSymbolSuccessColor","itemSymbolErrorColor","itemSymbolDefault","itemSymbolSuccess","itemSymbolError","interpolateString","template","values","replace","match","key","customElements","define"],"sourceRoot":""}