@descope/web-components-ui 1.0.119 → 1.0.120
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +3 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +3 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-passcode/PasscodeClass.js +2 -1
- package/src/theme/components/passcode.js +1 -0
|
@@ -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(9241),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:
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{4919:(t,e,n)=>{n.r(e),n.d(e,{PasscodeClass:()=>x});var i=n(9241),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:f,focusedDigitField:m}={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"}},b=o.z.cssVarList,x=(0,a.qC)((0,i.yk)({mappings:{fontSize:[{...u,property:b.fontSize},c],hostWidth:{property:"width"},fontFamily:c,labelTextColor:[{...g,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},digitValueTextColor:{selector:o.z.componentName,property:b.inputValueTextColor},digitPadding:{...u,property:b.inputPadding},digitTextAlign:{...u,property:b.inputTextAlign},digitCaretTextColor:{...u,property:b.inputCaretTextColor},digitSpacing:{...f,property:"gap"},digitOutlineColor:{...u,property:b.inputOutlineColor},digitOutlineWidth:{...u,property:b.inputOutlineWidth},focusedDigitFieldOutlineColor:{...m,property:b.inputOutlineColor}}}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return p.concat(t.observedAttributes||[])}constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${r.f} \n\t\t\t\tbordered="true" \n\t\t\t\tname="code" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${r.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(r.f),(0,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(${b.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
|
@@ -68,7 +68,7 @@ const {
|
|
|
68
68
|
internalWrapper,
|
|
69
69
|
focusedDigitField
|
|
70
70
|
} = {
|
|
71
|
-
host: () => ':host',
|
|
71
|
+
host: { selector: () => ':host' },
|
|
72
72
|
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
|
73
73
|
digitField: { selector: () => TextFieldClass.componentName },
|
|
74
74
|
label: { selector: '::part(label)' },
|
|
@@ -81,6 +81,7 @@ const textVars = TextFieldClass.cssVarList
|
|
|
81
81
|
export const PasscodeClass = compose(
|
|
82
82
|
createStyleMixin({
|
|
83
83
|
mappings: {
|
|
84
|
+
fontSize: [{ ...digitField, property: textVars.fontSize }, host],
|
|
84
85
|
hostWidth: { property: 'width' },
|
|
85
86
|
fontFamily: host,
|
|
86
87
|
labelTextColor: [
|
|
@@ -8,6 +8,7 @@ const vars = PasscodeClass.cssVarList
|
|
|
8
8
|
|
|
9
9
|
const passcode = {
|
|
10
10
|
[vars.fontFamily]: refs.fontFamily,
|
|
11
|
+
[vars.fontSize]: refs.fontSize,
|
|
11
12
|
[vars.labelTextColor]: refs.labelTextColor,
|
|
12
13
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
|
13
14
|
[vars.digitValueTextColor]: refs.valueTextColor,
|