@descope/web-components-ui 1.0.218 → 1.0.220
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +120 -117
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +112 -108
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/4803.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-selection-group-index-js.js +1 -1
- package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/commonStyles.js +8 -25
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +35 -32
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +49 -33
- package/src/components/descope-button-selection-group/ButtonSelectionGroupClass.js +1 -1
- package/src/components/descope-passcode/PasscodeClass.js +7 -7
- package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js +1 -0
- package/src/theme/components/checkbox.js +4 -2
- package/src/theme/components/switchToggle.js +3 -4
- package/src/theme/components/text.js +1 -1
package/dist/umd/4803.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{init(){super.init?.();const n=document.createElement("template");n.innerHTML=`\n\t\t\t\t<${a.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(n.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(n,t,e)=>{e.d(t,{Z:()=>i});const i=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,e(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{init(){super.init?.();const n=document.createElement("template");n.innerHTML=`\n\t\t\t\t<${a.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(n.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,i.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled"]}),(0,i.Db)(this.inputElement,this,["checked"]),(0,i.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(n,t,e)=>{e.d(t,{Z:()=>i});const i=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,e(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n position: absolute;\n top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n align-self: flex-start;\n padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-right: 1em;\n}\ndescope-boolean-field-internal {\n -webkit-mask-image: none;\n min-height: initial;\n}\n`}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>k});var o=r(4567),n=r(2061),p=r(1e3),i=r(818),l=r(6882),c=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:d,checkboxElement:h,checkboxSurface:b,checkboxLabel:u,requiredIndicator:y,helperText:x,errorMessage:f}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},k=(0,n.qC)((0,p.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,h,u],fontFamily:[u,x,f],labelTextColor:{...u,property:"color"},labelSpacing:{...u,property:"padding-left"},labelLineHeight:{...u,property:"line-height"},labelFontWeight:{...u,property:"font-weight"},labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...b,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...b,property:"font-size"},{...d,property:"font-size"}]}}),p.e4,(0,p.dj)({proxyProps:["value","selectionStart"]}),p.Ae,i.h)((0,p.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${l.Z}\n ${(0,c.bi)(k.cssVarList)}\n \n :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n }\n\n vaadin-text-field {\n width: 100%;\n }\n\n descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n height: 100%;\n }\n\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(checkbox)::after {\n top: 0;\n left: 0;\n }\n `,excludeAttrsSync:["label","tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,k)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4483],{9203:(t,e,
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4483],{9203:(t,e,o)=>{o.r(e),o.d(e,{SwitchToggleClass:()=>f});var r=o(4567),n=o(2061),c=o(1e3),a=o(818),p=o(6882),i=o(4201);const l=(0,r.iY)("switch-toggle"),{host:s,component:d,checkboxElement:h,checkboxSurface:b,checkboxLabel:k,requiredIndicator:y,helperText:u,errorMessage:x}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,n.qC)((0,c.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[d,k,k],fontFamily:[k,u,x],labelTextColor:{...k,property:"color"},labelSpacing:{...k,property:"padding-left"},labelLineHeight:{...k,property:"line-height"},labelFontWeight:{...k,property:"font-weight"},labelRequiredIndicator:{...y,property:"content"},errorMessageTextColor:{...x,property:"color"},trackBorderWidth:{...h,property:"border-width"},trackBorderStyle:{...h,property:"border-style"},trackBorderColor:{...h,property:"border-color"},trackBackgroundColor:{...h,property:"background-color"},trackBorderRadius:{...h,property:"border-radius"},trackWidth:[{...h,property:"width"}],trackHeight:[{...b,property:"font-size"},{...h,property:"height"}],knobSize:[{...b,property:"width"},{...b,property:"height"}],knobTextColor:{...b,property:"color"},knobRadius:{...b,property:"border-radius"},knobTransitionDuration:{...b,property:"transition"},knobColor:{...b,property:"background-color"},knobTopOffset:{...b,property:"top"},knobLeftOffset:{...b,property:"left"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"}}}),c.e4,(0,c.dj)({proxyProps:["value","selectionStart"]}),c.Ae,a.h)((0,c.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${p.Z}\n\t\t\t${(0,i.bi)(f.cssVarList)}\n\n :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n }\n\n descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n width: 100%;\n }\n\n vaadin-text-field::part(input-field) {\n cursor: pointer;\n }\n\n vaadin-checkbox {\n cursor: pointer;\n }\n\n vaadin-checkbox [slot="label"]:not(:empty) {\n cursor: pointer;\n\t\t\t}\n\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n\t\t\t}\n\n vaadin-checkbox::part(checkbox)::before {\n content: '';\n\t\t\t}\n\n vaadin-checkbox[active]::part(checkbox) {\n\t\t\t\ttransform: none;\n\t\t\t}\n\n vaadin-checkbox::part(checkbox)::after {\n\t\t\t\tposition: absolute;\n\t\t\t\topacity: 1;\n\t\t\t\tcontent: '';\n\t\t\t}\n\t\t`,excludeAttrsSync:["label","tabindex"],componentName:l}));o(9515),o(9789),o(6676),customElements.define(l,f)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),a=n(3547),i=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n tabindex="-1"\n\t\t\t>\n <slot></slot>\n </${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.DM)({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}\n\t\t\t${(0,o.DY)()}\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\t\t\tdescope-button-selection-group-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 display:inline-block;\n\t\t\t\tmin-height: initial;\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\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\t\t\t${(0,o.Pd)("vaadin-text-field")}\n `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6699],{8086:(t,e,n)=>{n.r(e),n.d(e,{ButtonSelectionGroupClass:()=>m});var r=n(1e3),a=n(3547),i=n(2061),s=n(4567),o=n(4201);const d=(0,s.iY)("button-selection-group"),{host:l,label:p,requiredIndicator:c,internalWrapper:u,errorMessage:h}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-button-selection-group-internal slot"},errorMessage:{selector:"::part(error-message)"}},m=(0,i.qC)((0,r.yk)({mappings:{hostWidth:{...l,property:"width"},fontFamily:l,labelTextColor:[{...p,property:"color"},{...c,property:"color"}],labelRequiredIndicator:{...c,property:"content"},errorMessageTextColor:{...h,property:"color"},itemsSpacing:{...u,property:"gap"}}}),r.e4,(0,r.dj)({proxyProps:["value","selectionStart"]}),r.Ae,(t=>class extends t{#t=({value:t,label:e})=>`<descope-button-selection-group-item value="${t}">${e}</descope-button-selection-group-item>`;#e;get renderItem(){return this.#t}set renderItem(t){this.#t=t,this.renderItems()}get size(){return this.inputElement?.size}get data(){if(this.#e)return this.#e;const t=this.getAttribute("data");if(t)try{const e=JSON.parse(t);if(this.isValidDataType(e))return e}catch(t){console.error('could not parse data string from attribute "data" - ',t.message)}return[]}set data(t){this.isValidDataType(t)&&(this.#e=t,this.renderItems())}isValidDataType(t){const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e}getItemsTemplate(){return this.data?.reduce?.(((t,e)=>t+(this.renderItem?.(e||{})||"")),"")}renderItems(){const t=this.getItemsTemplate();t&&(this.innerHTML=t)}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f}\n\t\t\t\tname="button-selection-group"\n\t\t\t\tslot="input"\n tabindex="-1"\n\t\t\t>\n <slot></slot>\n </${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,s.oP)(this,this.inputElement,{includeAttrs:["size","default-value","allow-deselect"]}),this.renderItems(),(0,s.FX)(this,this.renderItems.bind(this),{includeAttrs:["data"]}),(0,s.P$)(this,(({addedNodes:t})=>{t.forEach((t=>{t.setAttribute("size",this.size)}))}))}}))((0,r.DM)({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}\n\t\t\t${(0,o.DY)()}\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\t\t\tdescope-button-selection-group-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 display: inline-block;\n\t\t\t\tmin-height: initial;\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\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\t\t\t${(0,o.Pd)("vaadin-text-field")}\n `,excludeAttrsSync:["tabindex"],componentName:d}));n(8460),customElements.define(d,m)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,s)=>{s.d(e,{f:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,s)=>{s.d(e,{f:()=>a,Z:()=>h});var i=s(3878),n=s(4567);const r=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},u=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},a=(0,n.iY)("passcode-internal"),p=["digits"],l=["disabled","bordered","size","invalid","readonly"],d=(0,i.P)({componentName:a,baseSelector:"div"}),h=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<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\t\t\t}\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector("div")}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()}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){if(t===this.value)return;const e=u(t);e.length&&this.fillDigits(e,this.inputs[0])}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),s=Math.min(e+1,this.inputs.length-1);return this.inputs[s]}getPrevInput(t){const e=this.getInputIdx(t),s=Math.max(e-1,0);return this.inputs[s]}fillDigits(t,e){for(let s=0;s<t.length;s+=1){e.value=t[s]??"";const i=this.getNextInput(e);if(i===e)break;e=i}r(e)}parseInputValue(t){const e=u(t.value);e.length?this.fillDigits(e,t):t.value=""}initInputs(){let t;this.inputs.forEach((e=>{e.addEventListener("change",(s=>{t!==s.target&&(this.parseInputValue(e),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))})),e.addEventListener("input",(s=>{t=s.target,setTimeout((()=>{t=null,"deleteContentBackward"===s.inputType&&r(this.getPrevInput(e))})),this.parseInputValue(e)})),e.onkeydown=({key:t})=>{"Backspace"===t?e.value?e.setSelectionRange(1,1):setTimeout((()=>r(this.getPrevInput(e))),0):1===t.length&&(e.value="")},(0,n.oP)(this,e,{includeAttrs:l})})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&p.includes(t)&&"digits"===t&&this.renderInputs()}get pattern(){return`^$|^\\d{${this.digits},}$`}}},4775:(t,e,s)=>{s.r(e);var i=s(7361);customElements.define(i.f,i.Z)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{4919:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>x});var i=n(1e3),r=n(7361),o=n(6417),a=n(2061),d=n(4567),s=n(4201);const l=(0,d.iY)("passcode"),p=["digits"],{host:c,digitField:u,label:g,requiredIndicator:h,internalWrapper:m,focusedDigitField:f,errorMessage:b}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.z.componentName}[focused="true"]`},digitField:{selector:()=>o.z.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},y=o.z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{fontSize:[{...u,property:y.fontSize},c],hostWidth:{property:"width"},fontFamily:[c,{...g}],labelTextColor:[{...g,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},errorMessageTextColor:{...b,property:"color"},digitValueTextColor:{selector:o.z.componentName,property:y.inputValueTextColor},digitSize:[{...u,property:"height"},{...u,property:"width"}],digitPadding:{...u,property:y.inputHorizontalPadding},digitTextAlign:{...u,property:y.inputTextAlign},digitCaretTextColor:{...u,property:y.inputCaretTextColor},digitSpacing:{...m,property:"gap"},digitOutlineColor:{...u,property:y.inputOutlineColor},digitOutlineWidth:{...u,property:y.inputOutlineWidth},focusedDigitFieldOutlineColor:{...f,property:y.inputOutlineColor}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{4919:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>x});var i=n(1e3),r=n(7361),o=n(6417),a=n(2061),d=n(4567),s=n(4201);const l=(0,d.iY)("passcode"),p=["digits"],{host:c,digitField:u,label:g,requiredIndicator:h,internalWrapper:m,focusedDigitField:f,errorMessage:b}={host:{selector:()=>":host"},focusedDigitField:{selector:()=>`${o.z.componentName}[focused="true"]`},digitField:{selector:()=>o.z.componentName},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},internalWrapper:{selector:"descope-passcode-internal .wrapper"},errorMessage:{selector:"::part(error-message)"}},y=o.z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{fontSize:[{...u,property:y.fontSize},c],hostWidth:{property:"width"},fontFamily:[c,{...g}],labelTextColor:[{...g,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},errorMessageTextColor:{...b,property:"color"},digitValueTextColor:{selector:o.z.componentName,property:y.inputValueTextColor},digitSize:[{...u,property:"height"},{...u,property:"width"}],digitPadding:{...u,property:y.inputHorizontalPadding},digitTextAlign:{...u,property:y.inputTextAlign},digitCaretTextColor:{...u,property:y.inputCaretTextColor},digitSpacing:{...m,property:"gap"},digitOutlineColor:{...u,property:y.inputOutlineColor},digitOutlineWidth:{...u,property:y.inputOutlineWidth},focusedDigitFieldOutlineColor:{...f,property:y.inputOutlineColor}}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n <${r.f}\n bordered="true"\n name="code"\n tabindex="-1"\n slot="input"\n ><slot></slot></${r.f}>\n `,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.f),(0,d.oP)(this,this.inputElement,{includeAttrs:["digits","size"]})}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"digits"===t&&this.style.setProperty("--passcode-digits-count",n)}}))((0,i.DM)({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,s.DY)()}\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\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(${y.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\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\t\t\t${(0,s.Pd)("vaadin-text-field")}\n \t`,excludeAttrsSync:["tabindex"],componentName:l}));n(9357),n(4775),customElements.define(l,x)}}]);
|
package/package.json
CHANGED
|
@@ -11,7 +11,6 @@ ${resetInputFieldDefaultWidth()}
|
|
|
11
11
|
display: flex;
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
}
|
|
14
|
-
|
|
15
14
|
vaadin-text-field {
|
|
16
15
|
position: relative;
|
|
17
16
|
padding: 0;
|
|
@@ -23,8 +22,8 @@ vaadin-text-field::before {
|
|
|
23
22
|
margin: 0;
|
|
24
23
|
}
|
|
25
24
|
vaadin-text-field::part(label) {
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
position: absolute;
|
|
26
|
+
top: 0;
|
|
28
27
|
}
|
|
29
28
|
vaadin-text-field::part(input-field) {
|
|
30
29
|
padding: 0;
|
|
@@ -32,37 +31,21 @@ vaadin-text-field::part(input-field) {
|
|
|
32
31
|
min-height: 0;
|
|
33
32
|
}
|
|
34
33
|
vaadin-text-field::part(input-field)::after {
|
|
35
|
-
|
|
34
|
+
background: none;
|
|
36
35
|
}
|
|
37
36
|
vaadin-text-field[focus-ring]::part(input-field) {
|
|
38
37
|
box-shadow: none;
|
|
39
38
|
}
|
|
40
39
|
|
|
41
40
|
vaadin-checkbox [slot="label"] {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
padding: 0;
|
|
41
|
+
align-self: flex-start;
|
|
42
|
+
padding: 0;
|
|
45
43
|
}
|
|
46
|
-
[required] vaadin-checkbox [slot="label"] {
|
|
44
|
+
[required] vaadin-checkbox [slot="label"]:not(:empty) {
|
|
47
45
|
padding-right: 1em;
|
|
48
46
|
}
|
|
49
|
-
vaadin-checkbox::part(checkbox) {
|
|
50
|
-
margin: 0;
|
|
51
|
-
}
|
|
52
|
-
vaadin-checkbox[focus-ring]::part(checkbox) {
|
|
53
|
-
box-shadow: none;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
47
|
descope-boolean-field-internal {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
padding: 0;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
[slot="label"],
|
|
63
|
-
vaadin-checkbox,
|
|
64
|
-
vaadin-checkbox::part(checkbox) {
|
|
65
|
-
height: 100%;
|
|
66
|
-
cursor: pointer;
|
|
48
|
+
-webkit-mask-image: none;
|
|
49
|
+
min-height: initial;
|
|
67
50
|
}
|
|
68
51
|
`;
|
|
@@ -18,19 +18,17 @@ const {
|
|
|
18
18
|
component,
|
|
19
19
|
checkboxElement,
|
|
20
20
|
checkboxSurface,
|
|
21
|
-
|
|
22
|
-
label,
|
|
21
|
+
checkboxLabel,
|
|
23
22
|
requiredIndicator,
|
|
24
23
|
helperText,
|
|
25
24
|
errorMessage,
|
|
26
25
|
} = {
|
|
27
26
|
host: { selector: () => ':host' },
|
|
28
|
-
|
|
29
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
27
|
+
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
|
30
28
|
component: { selector: 'vaadin-checkbox' },
|
|
31
29
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
|
32
30
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
|
33
|
-
|
|
31
|
+
checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
|
|
34
32
|
helperText: { selector: '::part(helper-text)' },
|
|
35
33
|
errorMessage: { selector: '::part(error-message)' },
|
|
36
34
|
};
|
|
@@ -40,25 +38,17 @@ export const CheckboxClass = compose(
|
|
|
40
38
|
mappings: {
|
|
41
39
|
hostWidth: { ...host, property: 'width' },
|
|
42
40
|
|
|
43
|
-
fontSize: [host, checkboxElement,
|
|
44
|
-
fontFamily: [
|
|
41
|
+
fontSize: [host, checkboxElement, checkboxLabel],
|
|
42
|
+
fontFamily: [checkboxLabel, helperText, errorMessage],
|
|
45
43
|
|
|
46
|
-
labelTextColor:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
],
|
|
44
|
+
labelTextColor: { ...checkboxLabel, property: 'color' },
|
|
45
|
+
labelSpacing: { ...checkboxLabel, property: 'padding-left' },
|
|
46
|
+
labelLineHeight: { ...checkboxLabel, property: 'line-height' },
|
|
47
|
+
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
|
51
48
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
|
49
|
+
|
|
52
50
|
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
|
53
51
|
|
|
54
|
-
labelFontWeight: [
|
|
55
|
-
{ ...label, property: 'font-weight' },
|
|
56
|
-
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
|
57
|
-
],
|
|
58
|
-
labelSpacing: [
|
|
59
|
-
{ ...label, property: 'left' },
|
|
60
|
-
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
|
61
|
-
],
|
|
62
52
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
|
63
53
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
|
64
54
|
|
|
@@ -78,9 +68,6 @@ export const CheckboxClass = compose(
|
|
|
78
68
|
{ ...checkboxElement, property: 'height' },
|
|
79
69
|
{ ...checkboxSurface, property: 'font-size' },
|
|
80
70
|
{ ...component, property: 'font-size' },
|
|
81
|
-
{ ...checkboxHiddenLabel, property: 'line-height' },
|
|
82
|
-
{ ...label, property: 'margin-left' },
|
|
83
|
-
{ ...label, property: 'line-height' },
|
|
84
71
|
],
|
|
85
72
|
},
|
|
86
73
|
}),
|
|
@@ -94,17 +81,33 @@ export const CheckboxClass = compose(
|
|
|
94
81
|
wrappedEleName: 'vaadin-text-field',
|
|
95
82
|
style: () => `
|
|
96
83
|
${commonStyles}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
84
|
+
${useHostExternalPadding(CheckboxClass.cssVarList)}
|
|
85
|
+
|
|
86
|
+
:host {
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
max-width: 100%;
|
|
89
|
+
}
|
|
101
90
|
|
|
102
|
-
vaadin-text-field
|
|
103
|
-
width:
|
|
91
|
+
vaadin-text-field {
|
|
92
|
+
width: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
descope-boolean-field-internal {
|
|
96
|
+
padding: 0;
|
|
97
|
+
width: 100%;
|
|
98
|
+
height: 100%;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
vaadin-checkbox::part(checkbox) {
|
|
102
|
+
margin: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
vaadin-checkbox::part(checkbox)::after {
|
|
106
|
+
top: 0;
|
|
107
|
+
left: 0;
|
|
104
108
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
excludeAttrsSync: ['tabindex'],
|
|
109
|
+
`,
|
|
110
|
+
excludeAttrsSync: ['label', 'tabindex'],
|
|
108
111
|
componentName,
|
|
109
112
|
})
|
|
110
113
|
);
|
|
@@ -18,19 +18,17 @@ const {
|
|
|
18
18
|
component,
|
|
19
19
|
checkboxElement: track,
|
|
20
20
|
checkboxSurface: knob,
|
|
21
|
-
|
|
22
|
-
label,
|
|
21
|
+
checkboxLabel,
|
|
23
22
|
requiredIndicator,
|
|
24
23
|
helperText,
|
|
25
24
|
errorMessage,
|
|
26
25
|
} = {
|
|
27
26
|
host: { selector: () => ':host' },
|
|
28
|
-
|
|
29
|
-
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
27
|
+
requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
|
|
30
28
|
component: { selector: 'vaadin-checkbox' },
|
|
31
29
|
checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
|
|
32
30
|
checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
|
|
33
|
-
|
|
31
|
+
checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
|
|
34
32
|
helperText: { selector: '::part(helper-text)' },
|
|
35
33
|
errorMessage: { selector: '::part(error-message)' },
|
|
36
34
|
};
|
|
@@ -39,8 +37,18 @@ export const SwitchToggleClass = compose(
|
|
|
39
37
|
createStyleMixin({
|
|
40
38
|
mappings: {
|
|
41
39
|
hostWidth: { ...host, property: 'width' },
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
|
|
41
|
+
fontSize: [component, checkboxLabel, checkboxLabel],
|
|
42
|
+
fontFamily: [checkboxLabel, helperText, errorMessage],
|
|
43
|
+
|
|
44
|
+
labelTextColor: { ...checkboxLabel, property: 'color' },
|
|
45
|
+
labelSpacing: { ...checkboxLabel, property: 'padding-left' },
|
|
46
|
+
labelLineHeight: { ...checkboxLabel, property: 'line-height' },
|
|
47
|
+
labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
|
|
48
|
+
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
|
49
|
+
|
|
50
|
+
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
|
51
|
+
|
|
44
52
|
trackBorderWidth: { ...track, property: 'border-width' },
|
|
45
53
|
trackBorderStyle: { ...track, property: 'border-style' },
|
|
46
54
|
trackBorderColor: { ...track, property: 'border-color' },
|
|
@@ -63,25 +71,6 @@ export const SwitchToggleClass = compose(
|
|
|
63
71
|
knobTopOffset: { ...knob, property: 'top' },
|
|
64
72
|
knobLeftOffset: { ...knob, property: 'left' },
|
|
65
73
|
|
|
66
|
-
labelSpacing: [
|
|
67
|
-
{ ...label, property: 'padding-left' },
|
|
68
|
-
{ ...checkboxHiddenLabel, property: 'padding-left' },
|
|
69
|
-
],
|
|
70
|
-
labelLineHeight: [
|
|
71
|
-
{ ...label, property: 'line-height' },
|
|
72
|
-
{ ...checkboxHiddenLabel, property: 'line-height' },
|
|
73
|
-
],
|
|
74
|
-
labelFontWeight: [
|
|
75
|
-
{ ...label, property: 'font-weight' },
|
|
76
|
-
{ ...checkboxHiddenLabel, property: 'font-weight' },
|
|
77
|
-
],
|
|
78
|
-
labelTextColor: [
|
|
79
|
-
{ ...label, property: 'color' },
|
|
80
|
-
{ ...requiredIndicator, property: 'color' },
|
|
81
|
-
{ ...label, property: '-webkit-text-fill-color' },
|
|
82
|
-
],
|
|
83
|
-
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
|
84
|
-
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
|
85
74
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
|
86
75
|
inputOutlineOffset: { ...track, property: 'outline-offset' },
|
|
87
76
|
inputOutlineColor: { ...track, property: 'outline-color' },
|
|
@@ -99,21 +88,48 @@ export const SwitchToggleClass = compose(
|
|
|
99
88
|
style: () => `
|
|
100
89
|
${commonStyles}
|
|
101
90
|
${useHostExternalPadding(SwitchToggleClass.cssVarList)}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
91
|
+
|
|
92
|
+
:host {
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
max-width: 100%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
descope-boolean-field-internal {
|
|
98
|
+
padding: 0;
|
|
99
|
+
width: 100%;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
vaadin-text-field::part(input-field) {
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
vaadin-checkbox {
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
vaadin-checkbox [slot="label"]:not(:empty) {
|
|
111
|
+
cursor: pointer;
|
|
106
112
|
}
|
|
107
|
-
|
|
113
|
+
|
|
114
|
+
vaadin-checkbox::part(checkbox) {
|
|
115
|
+
margin: 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
vaadin-checkbox::part(checkbox)::before {
|
|
119
|
+
content: '';
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
vaadin-checkbox[active]::part(checkbox) {
|
|
108
123
|
transform: none;
|
|
109
124
|
}
|
|
110
|
-
|
|
125
|
+
|
|
126
|
+
vaadin-checkbox::part(checkbox)::after {
|
|
111
127
|
position: absolute;
|
|
112
128
|
opacity: 1;
|
|
113
129
|
content: '';
|
|
114
130
|
}
|
|
115
131
|
`,
|
|
116
|
-
excludeAttrsSync: ['tabindex'],
|
|
132
|
+
excludeAttrsSync: ['label', 'tabindex'],
|
|
117
133
|
componentName,
|
|
118
134
|
})
|
|
119
135
|
);
|
|
@@ -33,13 +33,13 @@ const customMixin = (superclass) =>
|
|
|
33
33
|
const template = document.createElement('template');
|
|
34
34
|
|
|
35
35
|
template.innerHTML = `
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
<${descopeInternalComponentName}
|
|
37
|
+
bordered="true"
|
|
38
|
+
name="code"
|
|
39
|
+
tabindex="-1"
|
|
40
|
+
slot="input"
|
|
41
|
+
><slot></slot></${descopeInternalComponentName}>
|
|
42
|
+
`;
|
|
43
43
|
|
|
44
44
|
this.baseElement.appendChild(template.content.cloneNode(true));
|
|
45
45
|
|
|
@@ -139,6 +139,7 @@ class PasscodeInternal extends BaseInputClass {
|
|
|
139
139
|
input.addEventListener('change', (e) => {
|
|
140
140
|
if (currentInput !== e.target) {
|
|
141
141
|
this.parseInputValue(input);
|
|
142
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
142
143
|
}
|
|
143
144
|
});
|
|
144
145
|
|
|
@@ -2,6 +2,7 @@ import { CheckboxClass } from '../../components/boolean-fields/descope-checkbox/
|
|
|
2
2
|
import { refs } from './inputWrapper';
|
|
3
3
|
|
|
4
4
|
const vars = CheckboxClass.cssVarList;
|
|
5
|
+
const checkboxSize = '1.35em';
|
|
5
6
|
|
|
6
7
|
const checkbox = {
|
|
7
8
|
[vars.hostWidth]: refs.width,
|
|
@@ -10,7 +11,8 @@ const checkbox = {
|
|
|
10
11
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
11
12
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
12
13
|
[vars.labelFontWeight]: '400',
|
|
13
|
-
[vars.
|
|
14
|
+
[vars.labelLineHeight]: checkboxSize,
|
|
15
|
+
[vars.labelSpacing]: '1em',
|
|
14
16
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
15
17
|
[vars.inputOutlineWidth]: refs.outlineWidth,
|
|
16
18
|
[vars.inputOutlineOffset]: refs.outlineOffset,
|
|
@@ -21,7 +23,7 @@ const checkbox = {
|
|
|
21
23
|
[vars.inputBorderWidth]: refs.borderWidth,
|
|
22
24
|
[vars.inputBorderStyle]: refs.borderStyle,
|
|
23
25
|
[vars.inputBackgroundColor]: refs.backgroundColor,
|
|
24
|
-
[vars.inputSize]:
|
|
26
|
+
[vars.inputSize]: checkboxSize,
|
|
25
27
|
|
|
26
28
|
_checked: {
|
|
27
29
|
[vars.inputValueTextColor]: refs.valueTextColor,
|
|
@@ -10,6 +10,7 @@ const globalRefs = getThemeRefs(globals);
|
|
|
10
10
|
const vars = SwitchToggleClass.cssVarList;
|
|
11
11
|
|
|
12
12
|
const switchToggle = {
|
|
13
|
+
[vars.hostWidth]: refs.width,
|
|
13
14
|
[vars.fontSize]: refs.fontSize,
|
|
14
15
|
[vars.fontFamily]: refs.fontFamily,
|
|
15
16
|
|
|
@@ -35,13 +36,11 @@ const switchToggle = {
|
|
|
35
36
|
|
|
36
37
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
37
38
|
[vars.labelFontWeight]: '400',
|
|
38
|
-
[vars.labelLineHeight]:
|
|
39
|
-
[vars.labelSpacing]: '
|
|
39
|
+
[vars.labelLineHeight]: '1.35em',
|
|
40
|
+
[vars.labelSpacing]: '1em',
|
|
40
41
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
41
42
|
[vars.errorMessageTextColor]: refs.errorMessageTextColor,
|
|
42
43
|
|
|
43
|
-
[vars.hostWidth]: refs.width,
|
|
44
|
-
|
|
45
44
|
_checked: {
|
|
46
45
|
[vars.trackBorderColor]: refs.borderColor,
|
|
47
46
|
[vars.trackBackgroundColor]: refs.backgroundColor,
|