@descope/web-components-ui 1.0.103 → 1.0.104
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +21 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/890.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-new-password/NewPassword.js +2 -1
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +3 -1
- package/src/components/descope-password-field/PasswordField.js +10 -0
- package/src/components/descope-password-field/passwordDraggableMixin.js +3 -2
- package/src/theme/components/passwordField.js +3 -0
package/dist/umd/890.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[890],{7890:(t,e,r)=>{r.d(e,{f:()=>i,Z:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[890],{7890:(t,e,r)=>{r.d(e,{f:()=>i,Z:()=>b});var o=r(9241),n=r(2061);const i=(0,r(4567).iY)("password-field"),{host:a,inputWrapper:d,inputElement:p,inputElementPlaceholder:l,revealButton:s,revealButtonIcon:u,revealButtonIconOutline:c,label:h,requiredIndicator:y}={host:{selector:()=>":host"},inputWrapper:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButton:{selector:"vaadin-password-field-button"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},revealButtonIconOutline:{selector:()=>"vaadin-password-field-button[focus-ring]"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::part(required-indicator)::after"}},b=(0,n.qC)((0,o.yk)({mappings:{width:a,wrapperBorderStyle:{...d,property:"border-style"},wrapperBorderWidth:{...d,property:"border-width"},wrapperBorderColor:{...d,property:"border-color"},wrapperBorderRadius:{...d,property:"border-radius"},revealButtonOutlineBoxShadow:[{...c,property:"box-shadow"}],labelTextColor:[{...h,property:"color"},{...y,property:"color"}],inputTextColor:[{...p,property:"color"},{...u,property:"color"}],placeholderTextColor:{...l,property:"color"},fontSize:[{},a],height:d,padding:d,pointerCursor:[{...s,property:"cursor"},{...h,property:"cursor"},{...y,property:"cursor"}],outlineColor:d,outlineStyle:d,outlineWidth:[d,{property:"padding"}],backgroundColor:d}}),o.e4,o.dj,o.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const o=t=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",o),t.target.removeEventListener("dragend",o)};t.target.addEventListener("mouseup",o,{once:!0}),t.target.addEventListener("dragend",o,{once:!0})}})),super.init?.()}}))((0,o.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:'\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmin-width: 10em;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\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}\t\n\t\t\tvaadin-password-field[required]::part(required-indicator)::after {\n\t\t\t\tcontent: "*";\n\t\t\t}\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t',excludeAttrsSync:["tabindex"],componentName:i}))}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[842],{7194:(t,e,n)=>{n.d(e,{Z:()=>c,f:()=>d});var i=n(4567),s=n(2061),r=n(9241),a=n(5857),o=n(7890);const d=(0,i.iY)("new-password"),{host:l,internalInputsWrapper:p}={host:{selector:()=>":host"},internalInputsWrapper:{selector:"descope-new-password-internal .wrapper"}},h=(0,s.qC)((0,r.yk)({mappings:{fontSize:[l,{selector:o.Z.componentName,property:o.Z.cssVarList.fontSize}],componentWidth:{...l,property:"width"},requiredContent:{...l,property:"content"},inputsGap:{...p,property:"gap"}}}),r.e4,r.dj,(t=>class extends t{constructor(){super()}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f} \n\t\t\t\tname="new-password" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,i.oP)(this,this.inputElement,{includeAttrs:["password-label","password-placeholder","confirm-label","confirm-placeholder","full-width","size","bordered","label","has-confirm","invalid","readonly"]})}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>u,excludeAttrsSync:["tabindex"],componentName:d})),u="\n\t:host {\n\t\t--vaadin-field-default-width: auto;\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-text-field {\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\tmin-height: 0;\n\t\tbackground: transparent;\n\t\toverflow: hidden;\n\t\tbox-shadow: none;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field)::after {\n\t\tbackground: transparent;\n\t\topacity: 0;\n\t}\n\tdescope-new-password-internal {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding: 0;\n\t}\n\tdescope-new-password-internal > .wrapper {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n \t\tflex-direction: column;\n\t}\n\tdescope-password-field {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\tdescope-new-password-internal vaadin-password-field::before {\n\t\theight: initial;\n\t}\n",c=h},5857:(t,e,n)=>{n.d(e,{f:()=>i});const i=(0,n(4567).iY)("new-password-internal")},1545:(t,e,n)=>{n.r(e);var i=n(3878),s=n(4567),r=n(7194),a=n(5857);const o=/^password-/,d=/^confirm-/,l=(t,e)=>t.replace(e,""),p=["password-label","password-placeholder"],h=["confirm-label","confirm-placeholder"],u=["disabled","bordered","size","full-width","maxlength","invalid","readonly"],c=[].concat(u,p,h),f=(0,i.P)({componentName:a.f,baseSelector:"div"});customElements.define(a.f,class extends f{static get observedAttributes(){return["has-confirm"].concat(f.observedAttributes||[],c)}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper"></div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper")}get value(){return this.passwordInput?.value||""}set value(t){t!==this.value&&(this.value=t)}get hasConfirm(){return"true"===this.getAttribute("has-confirm")}getValidity(){if(this.isRequired&&!this.value)return{valueMissing:!0};if(this.hasConfirm&&this.confirmInput&&this.value!==this.confirmInput.value)return{patternMismatch:!0};const t=this.getAttribute("minlength"),e=parseInt(t,10)||0;return this.value.length>=e?{}:{tooShort:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.passwordInput.focus()})),super.init?.(),this.renderInputs(this.hasConfirm)}renderInputs(t){let e='<descope-password-field data-id="password"></descope-password-field>';t&&(e+='<descope-password-field data-id="confirm"></descope-password-field>'),this.wrapperEle.innerHTML=e,this.passwordInput=this.querySelector('[data-id="password"]'),this.confirmInput=this.querySelector('[data-id="confirm"]'),this.inputs=[this.passwordInput,this.confirmInput],this.initInputs(),[...p,...h,...u].forEach((t=>{this.attributeChangedCallback(t,null,this.getAttribute(t))}))}handleIndicatorStyle(){for(const t of this.inputs){const e=document.createElement("style");e.innerHTML=`\n\t\t\t\t:host::part(required-indicator)::after {\n\t\t\t\t\tcontent: var(${r.Z.cssVarList.requiredContent});\n\t\t\t\t}\n\t\t\t\t`,t?.shadowRoot.appendChild(e)}}get isInvalid(){return this.hasAttribute("invalid")&&"false"!==this.getAttribute("invalid")}handleInputsInvalidAttribute(){this.inputs.forEach((t=>{t&&(0,s.FX)(t,(e=>{if(e.includes("invalid")){const e=t.getAttribute("invalid"),n=this.getAttribute("invalid");this.isInvalid&&n!==e&&t.setAttribute("invalid","true")}}),{})}))}initInputs(){this.handleIndicatorStyle(),this.handleInputsInvalidAttribute(),this.handleFocusEventsDispatching(this.inputs)}toggleBooleanAttribute(t,e,n){null===n?t?.removeAttribute(e):t?.setAttribute(e,n)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("has-confirm"===t?this.renderInputs(null!==n&&"false"!==n):u.includes(t)?this.inputs.forEach((e=>this.toggleBooleanAttribute(e,t,n))):p.includes(t)?this.toggleBooleanAttribute(this.passwordInput,l(t,o),n):h.includes(t)&&this.toggleBooleanAttribute(this.confirmInput,l(t,d),n))}})}}]);
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[842],{7194:(t,e,n)=>{n.d(e,{Z:()=>c,f:()=>d});var i=n(4567),s=n(2061),r=n(9241),a=n(5857),o=n(7890);const d=(0,i.iY)("new-password"),{host:l,internalInputsWrapper:p}={host:{selector:()=>":host"},internalInputsWrapper:{selector:"descope-new-password-internal .wrapper"}},h=(0,s.qC)((0,r.yk)({mappings:{fontSize:[l,{selector:o.Z.componentName,property:o.Z.cssVarList.fontSize}],componentWidth:{...l,property:"width"},requiredContent:{...l,property:"content"},inputsGap:{...p,property:"gap"}}}),r.e4,r.dj,(t=>class extends t{constructor(){super()}init(){super.init?.();const t=document.createElement("template");t.innerHTML=`\n\t\t\t<${a.f} \n\t\t\t\tname="new-password" \n\t\t\t\ttabindex="-1"\n\t\t\t\tslot="input"\n\t\t\t></${a.f}>\n\t\t\t`,this.baseElement.appendChild(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(a.f),(0,i.oP)(this,this.inputElement,{includeAttrs:["password-label","password-placeholder","confirm-label","confirm-placeholder","full-width","size","bordered","label","has-confirm","invalid","readonly","draggable"]})}}))((0,r.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>u,excludeAttrsSync:["tabindex"],componentName:d})),u="\n\t:host {\n\t\t--vaadin-field-default-width: auto;\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-text-field {\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\tmin-height: 0;\n\t\tbackground: transparent;\n\t\toverflow: hidden;\n\t\tbox-shadow: none;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field)::after {\n\t\tbackground: transparent;\n\t\topacity: 0;\n\t}\n\tdescope-new-password-internal {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding: 0;\n\t}\n\tdescope-new-password-internal > .wrapper {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n \t\tflex-direction: column;\n\t}\n\tdescope-password-field {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\tdescope-new-password-internal vaadin-password-field::before {\n\t\theight: initial;\n\t}\n",c=h},5857:(t,e,n)=>{n.d(e,{f:()=>i});const i=(0,n(4567).iY)("new-password-internal")},1545:(t,e,n)=>{n.r(e);var i=n(3878),s=n(4567),r=n(7194),a=n(5857);const o=/^password-/,d=/^confirm-/,l=(t,e)=>t.replace(e,""),p=["password-label","password-placeholder"],h=["confirm-label","confirm-placeholder"],u=["disabled","bordered","size","full-width","maxlength","invalid","readonly","draggable"],c=[].concat(u,p,h),f=(0,i.P)({componentName:a.f,baseSelector:"div"});customElements.define(a.f,class extends f{static get observedAttributes(){return["has-confirm"].concat(f.observedAttributes||[],c)}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper"></div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper")}get value(){return this.passwordInput?.value||""}set value(t){t!==this.value&&(this.value=t)}get hasConfirm(){return"true"===this.getAttribute("has-confirm")}getValidity(){if(this.isRequired&&!this.value)return{valueMissing:!0};if(this.hasConfirm&&this.confirmInput&&this.value!==this.confirmInput.value)return{patternMismatch:!0};const t=this.getAttribute("minlength"),e=parseInt(t,10)||0;return this.value.length>=e?{}:{tooShort:!0}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.passwordInput.focus()})),super.init?.(),this.renderInputs(this.hasConfirm)}renderInputs(t){let e='<descope-password-field data-id="password"></descope-password-field>';t&&(e+='<descope-password-field data-id="confirm"></descope-password-field>'),this.wrapperEle.innerHTML=e,this.passwordInput=this.querySelector('[data-id="password"]'),this.confirmInput=this.querySelector('[data-id="confirm"]'),this.inputs=[this.passwordInput,this.confirmInput],this.initInputs(),[...p,...h,...u].forEach((t=>{this.attributeChangedCallback(t,null,this.getAttribute(t))}))}handleIndicatorStyle(){for(const t of this.inputs){const e=document.createElement("style");e.innerHTML=`\n\t\t\t\t:host::part(required-indicator)::after {\n\t\t\t\t\tcontent: var(${r.Z.cssVarList.requiredContent});\n\t\t\t\t}\n\t\t\t\t`,t?.shadowRoot.appendChild(e)}}get isInvalid(){return this.hasAttribute("invalid")&&"false"!==this.getAttribute("invalid")}handleInputsInvalidAttribute(){this.inputs.forEach((t=>{t&&(0,s.FX)(t,(e=>{if(e.includes("invalid")){const e=t.getAttribute("invalid"),n=this.getAttribute("invalid");this.isInvalid&&n!==e&&t.setAttribute("invalid","true")}}),{})}))}initInputs(){this.handleIndicatorStyle(),this.handleInputsInvalidAttribute(),this.handleFocusEventsDispatching(this.inputs)}toggleBooleanAttribute(t,e,n){null===n?t?.removeAttribute(e):t?.setAttribute(e,n)}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),e!==n&&("has-confirm"===t?this.renderInputs(null!==n&&"false"!==n):u.includes(t)?this.inputs.forEach((e=>this.toggleBooleanAttribute(e,t,n))):p.includes(t)?this.toggleBooleanAttribute(this.passwordInput,l(t,o),n):h.includes(t)&&this.toggleBooleanAttribute(this.confirmInput,l(t,d),n))}})}}]);
|
package/package.json
CHANGED
|
@@ -18,6 +18,7 @@ const {
|
|
|
18
18
|
inputElementPlaceholder,
|
|
19
19
|
revealButton,
|
|
20
20
|
revealButtonIcon,
|
|
21
|
+
revealButtonIconOutline,
|
|
21
22
|
label,
|
|
22
23
|
requiredIndicator
|
|
23
24
|
} = {
|
|
@@ -27,6 +28,7 @@ const {
|
|
|
27
28
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
|
28
29
|
revealButton: { selector: 'vaadin-password-field-button' },
|
|
29
30
|
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
|
31
|
+
revealButtonIconOutline: { selector: () => 'vaadin-password-field-button[focus-ring]' },
|
|
30
32
|
label: { selector: '::part(label)' },
|
|
31
33
|
requiredIndicator: { selector: '::part(required-indicator)::after' },
|
|
32
34
|
}
|
|
@@ -39,6 +41,14 @@ const PasswordField = compose(
|
|
|
39
41
|
wrapperBorderWidth: { ...inputWrapper, property: 'border-width' },
|
|
40
42
|
wrapperBorderColor: { ...inputWrapper, property: 'border-color' },
|
|
41
43
|
wrapperBorderRadius: { ...inputWrapper, property: 'border-radius' },
|
|
44
|
+
|
|
45
|
+
revealButtonOutlineBoxShadow: [
|
|
46
|
+
{
|
|
47
|
+
...revealButtonIconOutline,
|
|
48
|
+
property: 'box-shadow'
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
|
|
42
52
|
labelTextColor: [
|
|
43
53
|
{ ...label, property: 'color' },
|
|
44
54
|
{ ...requiredIndicator, property: 'color' }
|
|
@@ -10,11 +10,12 @@ const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass
|
|
|
10
10
|
this.addEventListener('mousedown', (e) => {
|
|
11
11
|
if (this.isDraggable & this.isReadOnly) {
|
|
12
12
|
const inputEle = this.baseElement.querySelector('input');
|
|
13
|
-
|
|
14
13
|
const prevType = inputEle.getAttribute('type')
|
|
14
|
+
|
|
15
15
|
inputEle.setAttribute('type', 'text');
|
|
16
|
+
setTimeout(() => inputEle.focus());
|
|
16
17
|
|
|
17
|
-
const onComplete = () => {
|
|
18
|
+
const onComplete = (e) => {
|
|
18
19
|
inputEle.setAttribute('type', prevType)
|
|
19
20
|
|
|
20
21
|
e.target.removeEventListener('mouseup', onComplete)
|
|
@@ -17,6 +17,9 @@ const passwordField = {
|
|
|
17
17
|
[vars.outlineStyle]: 'solid',
|
|
18
18
|
[vars.outlineColor]: 'transparent',
|
|
19
19
|
|
|
20
|
+
[vars.revealButtonOutlineBoxShadow]: `0 0 0 2px ${globalRefs.colors.surface.main}`,
|
|
21
|
+
|
|
22
|
+
|
|
20
23
|
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
|
21
24
|
[vars.inputTextColor]: globalRefs.colors.surface.contrast,
|
|
22
25
|
[vars.placeholderTextColor]: globalRefs.colors.surface.main,
|