@descope/web-components-ui 1.0.103 → 1.0.105
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +40 -34
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/890.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.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/boolean-fields/descope-checkbox/Checkbox.js +10 -8
- 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/checkbox.js +9 -22
- 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([[726],{3570:(e,t,o)=>{o.r(t),o.d(t,{Checkbox:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3570:(e,t,o)=>{o.r(t),o.d(t,{Checkbox:()=>x});var r=o(4567),c=o(2061),p=o(9241),l=o(818),n=o(6882);const i=(0,r.iY)("checkbox"),{host:a,component:h,checkboxElement:s,checkboxSurface:b,checkboxHiddenLabel:d,label:k,requiredIndicator:y}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"::part(required-indicator)::after"},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxHiddenLabel:{selector:'vaadin-checkbox [slot="label"]'}},x=(0,c.qC)((0,p.yk)({mappings:{width:a,cursor:h,checkboxBackgroundColor:{...s,property:"background-color"},checkboxRadius:{...s,property:"border-radius"},checkboxSize:[{...s,property:"width"},{...k,property:"margin-left"},{...s,property:"height"},{...b,property:"font-size"},{...h,property:"font-size"},{...k,property:"line-height"},{...d,property:"line-height"}],checkboxOutlineWidth:{...s,property:"outline-width"},checkboxOutlineOffset:{...s,property:"outline-offset"},checkboxOutlineColor:{...s,property:"outline-color"},checkboxOutlineStyle:{...s,property:"outline-style"},checkmarkTextColor:{...b,property:"color"},labelFontSize:[{...a,property:"font-size"},{...s,property:"font-size"},{...k,property:"font-size"},{...d,property:"font-size"}],labelFontWeight:[{...k,property:"font-weight"},{...d,property:"font-weight"}],labelMargin:[{...k,property:"left"},{...d,property:"padding-left"}],labelTextColor:[{...k,property:"color"},{...y,property:"color"}]}}),p.e4,p.dj,p.Ae,l.h)((0,p.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:`\n\t\t${n.Z}\n\n\t\tvaadin-checkbox [slot="label"] {\n\t\t\theight: 100%;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i}));o(9515),o(9789),o(6676),customElements.define(i,x)}}]);
|
|
@@ -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
|
@@ -39,11 +39,16 @@ const Checkbox = compose(
|
|
|
39
39
|
// Checkbox
|
|
40
40
|
checkboxBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
|
41
41
|
checkboxRadius: { ...checkboxElement, property: 'border-radius' },
|
|
42
|
-
|
|
42
|
+
|
|
43
|
+
checkboxSize: [
|
|
43
44
|
{ ...checkboxElement, property: 'width' },
|
|
44
|
-
{ ...label, property: 'margin-left' }
|
|
45
|
+
{ ...label, property: 'margin-left' },
|
|
46
|
+
{ ...checkboxElement, property: 'height' },
|
|
47
|
+
{ ...checkboxSurface, property: 'font-size' },
|
|
48
|
+
{ ...component, property: 'font-size' },
|
|
49
|
+
{ ...label, property: 'line-height' },
|
|
50
|
+
{ ...checkboxHiddenLabel, property: 'line-height' }
|
|
45
51
|
],
|
|
46
|
-
checkboxHeight: { ...checkboxElement, property: 'height' },
|
|
47
52
|
|
|
48
53
|
checkboxOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
|
49
54
|
checkboxOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
|
@@ -51,18 +56,15 @@ const Checkbox = compose(
|
|
|
51
56
|
checkboxOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
|
52
57
|
|
|
53
58
|
// Checkmark
|
|
54
|
-
checkmarkSize: [{ ...checkboxSurface, property: 'font-size' }, { ...component, property: 'font-size' }],
|
|
55
59
|
checkmarkTextColor: { ...checkboxSurface, property: 'color' },
|
|
56
60
|
|
|
57
61
|
// Label
|
|
58
62
|
labelFontSize: [
|
|
63
|
+
{ ...host, property: 'font-size' },
|
|
64
|
+
{ ...checkboxElement, property: 'font-size' },
|
|
59
65
|
{ ...label, property: 'font-size' },
|
|
60
66
|
{ ...checkboxHiddenLabel, property: 'font-size' }
|
|
61
67
|
],
|
|
62
|
-
labelLineHeight: [
|
|
63
|
-
{ ...label, property: 'line-height' },
|
|
64
|
-
{ ...checkboxHiddenLabel, property: 'line-height' }
|
|
65
|
-
],
|
|
66
68
|
labelFontWeight: [
|
|
67
69
|
{ ...label, property: 'font-weight' },
|
|
68
70
|
{ ...checkboxHiddenLabel, property: 'font-weight' }
|
|
@@ -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)
|
|
@@ -7,43 +7,30 @@ const vars = Checkbox.cssVarList;
|
|
|
7
7
|
|
|
8
8
|
const checkbox = {
|
|
9
9
|
[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
|
|
10
|
-
|
|
11
|
-
[vars.labelFontSize]: '12px',
|
|
12
|
-
[vars.labelFontWeight]: '400',
|
|
13
|
-
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
|
14
10
|
[vars.cursor]: 'pointer',
|
|
15
11
|
|
|
16
|
-
[vars.checkboxWidth]: 'calc(1em - 2px)',
|
|
17
|
-
[vars.checkboxHeight]: 'calc(1em - 2px)',
|
|
18
|
-
[vars.labelMargin]: 'calc(1em + 5px)',
|
|
19
|
-
|
|
20
12
|
[vars.checkboxRadius]: globalRefs.radius.xs,
|
|
13
|
+
[vars.checkboxSize]: '2em',
|
|
14
|
+
|
|
15
|
+
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
|
16
|
+
[vars.labelMargin]: '0.5em',
|
|
17
|
+
[vars.labelFontWeight]: '400',
|
|
21
18
|
|
|
22
19
|
size: {
|
|
23
20
|
xs: {
|
|
24
|
-
[vars.labelFontSize]: '
|
|
25
|
-
[vars.labelLineHeight]: '1.1em',
|
|
26
|
-
[vars.checkmarkSize]: '18px',
|
|
21
|
+
[vars.labelFontSize]: '8px',
|
|
27
22
|
},
|
|
28
23
|
sm: {
|
|
29
|
-
[vars.labelFontSize]: '
|
|
30
|
-
[vars.labelLineHeight]: '1.2em',
|
|
31
|
-
[vars.checkmarkSize]: '22px',
|
|
24
|
+
[vars.labelFontSize]: '10px',
|
|
32
25
|
},
|
|
33
26
|
md: {
|
|
34
|
-
[vars.labelFontSize]: '
|
|
35
|
-
[vars.labelLineHeight]: '1.35em',
|
|
36
|
-
[vars.checkmarkSize]: '26px',
|
|
27
|
+
[vars.labelFontSize]: '14px',
|
|
37
28
|
},
|
|
38
29
|
lg: {
|
|
39
30
|
[vars.labelFontSize]: '20px',
|
|
40
|
-
[vars.labelLineHeight]: '1.5em',
|
|
41
|
-
[vars.checkmarkSize]: '34px',
|
|
42
31
|
},
|
|
43
32
|
xl: {
|
|
44
|
-
[vars.labelFontSize]: '
|
|
45
|
-
[vars.labelLineHeight]: '1.75em',
|
|
46
|
-
[vars.checkmarkSize]: '38px',
|
|
33
|
+
[vars.labelFontSize]: '25px',
|
|
47
34
|
}
|
|
48
35
|
},
|
|
49
36
|
|
|
@@ -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,
|