@descope/web-components-ui 1.0.109 → 1.0.110
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.
- package/dist/index.esm.js +14 -14
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggle.js +1 -1
- package/src/components/descope-button/Button.js +1 -1
- package/src/components/descope-combo-box/ComboBox.js +2 -2
- package/src/components/descope-email-field/EmailField.js +3 -3
- package/src/components/descope-link/Link.js +3 -3
- package/src/components/descope-logo/Logo.js +1 -1
- package/src/components/descope-new-password/NewPassword.js +3 -3
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +2 -2
- package/src/components/descope-number-field/NumberField.js +3 -3
- package/src/components/descope-passcode/Passcode.js +4 -4
- package/src/components/descope-phone-field/PhoneField.js +8 -8
- package/src/components/descope-text-field/TextField.js +3 -3
- package/src/theme/components/button.js +2 -2
- package/src/theme/components/checkbox.js +2 -2
- package/src/theme/components/comboBox.js +2 -2
- package/src/theme/components/container.js +3 -3
- package/src/theme/components/divider.js +2 -2
- package/src/theme/components/emailField.js +2 -2
- package/src/theme/components/image.js +2 -2
- package/src/theme/components/link.js +2 -2
- package/src/theme/components/loader/loaderLinear.js +2 -2
- package/src/theme/components/loader/loaderRadial.js +2 -2
- package/src/theme/components/logo.js +2 -2
- package/src/theme/components/newPassword.js +2 -2
- package/src/theme/components/numberField.js +2 -2
- package/src/theme/components/passcode.js +2 -2
- package/src/theme/components/passwordField.js +2 -2
- package/src/theme/components/phoneField.js +2 -2
- package/src/theme/components/switchToggle.js +2 -2
- package/src/theme/components/text.js +2 -2
- package/src/theme/components/textArea.js +2 -2
- package/src/theme/components/textField.js +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{4332:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{4332:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>f});var o=r(4567),c=r(2061),n=r(9241),a=r(818),i=r(6882);const p=(0,o.iY)("switch-toggle"),{host:l,component:d,checkboxElement:s,checkboxSurface:h,checkboxHiddenLabel:b,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"]'}},u=(0,c.qC)((0,n.yk)({mappings:{width:l,cursor:[d,b,s],fontSize:[d,k,b],trackBorderWidth:{...s,property:"border-width"},trackBorderStyle:{...s,property:"border-style"},trackBorderColor:{...s,property:"border-color"},trackBackgroundColor:{...s,property:"background-color"},trackRadius:{...s,property:"border-radius"},trackWidth:[{...s,property:"width"}],trackHeight:[{...h,property:"font-size"},{...s,property:"height"}],switchOutlineWidth:{...s,property:"outline-width"},switchOutlineOffset:{...s,property:"outline-offset"},switchOutlineColor:{...s,property:"outline-color"},switchOutlineStyle:{...s,property:"outline-style"},knobSize:[{...h,property:"width"},{...h,property:"height"}],knobTextColor:{...h,property:"color"},knobRadius:{...h,property:"border-radius"},knobTransition:{...h,property:"transition"},knobColor:{...h,property:"background-color"},knobTopOffset:{...h,property:"top"},knobPosition:{...h,property:"left"},labelMargin:[{...k,property:"padding-left"},{...b,property:"padding-left"}],labelLineHeight:[{...k,property:"line-height"},{...b,property:"line-height"}],labelFontWeight:[{...k,property:"font-weight"},{...b,property:"font-weight"}],labelTextColor:[{...k,property:"color"},{...y,property:"color"}]}}),n.e4,n.dj,n.Ae,a.h)((0,n.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t${i.Z}\n\n\t\tvaadin-text-field::part(label) {\n\t\t\tleft: calc(var(${u.cssVarList.trackWidth}) + var(${u.cssVarList.trackBorderWidth}) * 2);\n\t\t}\n\n\t\tvaadin-checkbox[active]::part(checkbox) {\n\t\t\ttransform: none;\n\t\t}\n\t\tvaadin-checkbox[checked]::part(checkbox) {\n\t\t\tbackground: none;\n\t\t}\n\t\tvaadin-checkbox::part(checkbox)::after {\n\t\t\tposition: absolute;\n\t\t\topacity: 1;\n\t\t\tcontent: '';\n\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p})),f=u;r(9515),r(9789),r(6676),customElements.define(p,f)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[662],{3029:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>u}),e(729);var r=e(2061),o=e(4567),a=e(9241);const i=(0,o.iY)("button"),{host:l,label:d}={host:{selector:()=>":host"},label:{selector:"::part(label)"}},s=(0,r.qC)((0,a.yk)({mappings:{color:{},textDecoration:d,fontSize:{},cursor:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},width:l,gap:d,verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}]}}),a.e4,a.Ae)((0,a.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${c}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i})),{color:p,fontSize:b}=
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[662],{3029:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>u}),e(729);var r=e(2061),o=e(4567),a=e(9241);const i=(0,o.iY)("button"),{host:l,label:d}={host:{selector:()=>":host"},label:{selector:"::part(label)"}},s=(0,r.qC)((0,a.yk)({mappings:{color:{},textDecoration:d,fontSize:{},cursor:{},backgroundColor:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},width:l,gap:d,verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}]}}),a.e4,a.Ae)((0,a.DM)({slots:["prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${c}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:i})),{color:p,fontSize:b}=s.cssVarList,c=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`,u=s;customElements.define(i,u)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4],{3352:(t,e,o)=>{o.d(e,{Z:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4],{3352:(t,e,o)=>{o.d(e,{Z:()=>u,f:()=>i});var r=o(2061),n=o(4567),a=o(9241);const i=(0,n.iY)("combo-box"),{host:l,input:d,placeholder:s,toggle:c,label:p}={host:{selector:()=>":host"},input:{selector:"::part(input-field)"},placeholder:{selector:"> input:placeholder-shown"},toggle:{selector:"::part(toggle-button)"},label:{selector:"::part(label)"}},b=(0,r.qC)((0,a.yk)({mappings:{width:l,height:d,padding:d,inputBackgroundColor:{...d,property:"background-color"},boxShadow:d,borderColor:d,borderWidth:d,borderStyle:d,borderRadius:d,color:[p,d],fontSize:[{},l],placeholderColor:{...s,property:"color"},toggleCursor:{...c,property:"cursor"},toggleColor:{...c,property:"color"},overlayBackground:{property:()=>b.cssVarList.overlay.backgroundColor},overlayBorder:{property:()=>b.cssVarList.overlay.border}}}),a.e4,(0,a.Iw)({name:"overlay",selector:"",mappings:{backgroundColor:{selector:"vaadin-combo-box-scroller"},cursor:{selector:"vaadin-combo-box-item"}},forward:{include:!1,attributes:["size"]}}),a.dj,a.Ae,(t=>class extends t{constructor(){super()}#t(){const t=this.shadowRoot.querySelector(this.baseSelector),e=Array.from(this.children);e.length&&(e.forEach((t=>{Object.defineProperty(t,"data-name",{value:t.getAttribute("data-name")}),Object.defineProperty(t,"data-id",{value:t.getAttribute("data-id")})})),t.items=e,t.renderer=(t,e,o)=>{t.innerHTML=o.item.outerHTML})}#e(){const t=this.baseElement.shadowRoot.querySelector("vaadin-combo-box-overlay");t._attachOverlay=function(){this.bringToFront()},t._detachOverlay=function(){},t._enterModalState=function(){}}init(){super.init?.(),this.#e(),(0,n.P$)(this,this.#t.bind(this))}}))((0,a.DM)({slots:["prefix"],wrappedEleName:"vaadin-combo-box",style:()=>'\n\t\t:host {\n\t\t\tdisplay: inline-flex;\n\t\t\tbox-sizing: border-box;\n\t\t\t-webkit-mask-image: none;\n\t\t}\n\t\tvaadin-combo-box {\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box [slot="input"] {\n\t\t\t-webkit-mask-image: none;\n\t\t\tmin-height: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field) {\n\t\t\t-webkit-mask-image: none;\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t\tvaadin-combo-box::part(input-field)::after {\n\t\t\topacity: 0;\n\t\t}\n\t\tvaadin-combo-box[readonly]::part(input-field)::after {\n\t\t\tborder: none;\n\t\t}\n\t\tvaadin-combo-box[readonly] > input:placeholder-shown {\n\t\t\topacity: 1;\n\t\t}\t\t\n\t\t',excludeAttrsSync:["tabindex","size"],componentName:i,includeForwardProps:["items","renderer","selectedItem"]})),u=b},1294:(t,e,o)=>{o.r(e),o.d(e,{ComboBoxClass:()=>r.Z}),o(9314);var r=o(3352);customElements.define(r.f,r.Z)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailFieldClass:()=>r}),e(9437);var n=e(9241),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const s=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-email-field::before {\n\t\theight: 0;\n\t}\n\tvaadin-email-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[760],{689:(t,i,e)=>{e.r(i),e.d(i,{EmailFieldClass:()=>r}),e(9437);var n=e(9241),a=e(4447),l=e(2061);const d=(0,e(4567).iY)("email-field");let o="";const s=(0,l.qC)((0,n.yk)({mappings:{...a.Z}}),n.e4,n.dj,n.Ae)((0,n.DM)({slots:["suffix"],wrappedEleName:"vaadin-email-field",style:()=>o,excludeAttrsSync:["tabindex"],componentName:d}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-email-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-email-field::before {\n\t\theight: 0;\n\t}\n\tvaadin-email-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-email-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-email-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-email-field input:-webkit-autofill,\n\tvaadin-email-field input:-webkit-autofill::first-line,\n\tvaadin-email-field input:-webkit-autofill:hover,\n\tvaadin-email-field input:-webkit-autofill:active,\n\tvaadin-email-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${s.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${s.cssVarList.height}) var(${s.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-email-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${s.cssVarList.color});\n\t}\n\tvaadin-email-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const r=s;customElements.define(d,r)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,n,e)=>{e.r(n),e.d(n,{LogoClass:()=>h});var s=e(9241),o=e(693),a=e(2061);const c=(0,e(4567).iY)("logo");let i;class l extends((0,o.s)({componentName:c,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n\t\t\t${i}\n\t\t</style>\n\t\t<div></div>`}}const r=(0,a.qC)((0,s.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},fallbackUrl:{property:"content"},url:{property:"content"}}}),s.e4,s.Ae)(l);i=`\n:host {\n\tdisplay: inline-flex;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[984],{4641:(t,n,e)=>{e.r(n),e.d(n,{LogoClass:()=>h});var s=e(9241),o=e(693),a=e(2061);const c=(0,e(4567).iY)("logo");let i;class l extends((0,o.s)({componentName:c,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n\t\t\t${i}\n\t\t</style>\n\t\t<div></div>`}}const r=(0,a.qC)((0,s.yk)({mappings:{height:{selector:()=>":host"},width:{selector:()=>":host"},fallbackUrl:{property:"content"},url:{property:"content"}}}),s.e4,s.Ae)(l);i=`\n:host {\n\tdisplay: inline-flex;\n}\n:host > div {\n\tdisplay: inline-block;\n\tcontent: var(${r.cssVarList.url}, var(${r.cssVarList.fallbackUrl}));\n\tmax-width: 100%;\n\tmax-height: 100%;\n\tobject-fit: contain;\n\tmargin: auto;\n}\n:host([draggable="true"]) > div {\n\tpointer-events: none\n}\n`;const h=r;customElements.define(c,h)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberFieldClass:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberFieldClass:()=>s}),e(5806);var i=e(9241),a=e(4447),d=e(2061);const r=(0,e(4567).iY)("number-field");let l="";const o=(0,d.qC)((0,i.yk)({mappings:{...a.Z}}),i.e4,i.dj,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-number-field",style:()=>l,excludeAttrsSync:["tabindex"],componentName:r}));l=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\tmin-width: 10em;\n\t\tmax-width: 100%;\n\t}\n\tvaadin-number-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%;\n\t}\n\tvaadin-number-field > input {\n\t\t-webkit-mask-image: none;\n\t}\n\tvaadin-number-field::part(input-field) {\n\t\tpadding: 0;\n\t}\n\tvaadin-number-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-number-field input:-webkit-autofill,\n\tvaadin-number-field input:-webkit-autofill::first-line,\n\tvaadin-number-field input:-webkit-autofill:hover,\n\tvaadin-number-field input:-webkit-autofill:active,\n\tvaadin-number-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-number-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-number-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const s=o;customElements.define(r,s)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>f,f:()=>l});var i=n(9241),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const o=["type"],r=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return o.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t\tmax-width: 100%;\n\t\tmin-width: 10em;\n\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>f,f:()=>l});var i=n(9241),a=n(4447),d=n(2061);const l=(0,n(4567).iY)("text-field");let s="";const o=["type"],r=(0,d.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.dj,i.Ae,(t=>class extends t{static get observedAttributes(){return o.concat(t.observedAttributes||[])}attributeChangedCallback(t,e,n){super.attributeChangeCallback?.(t,e,n),"type"===t&&this.baseElement._setType(n)}}))((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>s,excludeAttrsSync:["tabindex"],componentName:l}));s=`\n\t:host {\n\t\tdisplay: inline-block;\n\t\t--vaadin-field-default-width: auto;\n\t\tmax-width: 100%;\n\t\tmin-width: 10em;\n\n\t}\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbox-sizing: border-box;\n\t}\n\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field[disabled] > input:placeholder-shown,\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${r.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${r.cssVarList.height}) var(${r.cssVarList.backgroundColor}) inset;\n\t}\n\n\tvaadin-text-field > input {\n\t\t-webkit-mask-image: none;\n\t\tmin-height: 0;\n\t}\n\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tcontent: "*";\n\t\tcolor: var(${r.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field)::after {\n\t\topacity: 0 !important;\n\t}\n\n\tvaadin-text-field::before {\n\t\theight: unset;\n\t}\n`;const f=r},9357:(t,e,n)=>{n.r(e),n.d(e,{TextFieldClass:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);
|
package/package.json
CHANGED
|
@@ -101,7 +101,7 @@ const SwitchToggleClass = compose(
|
|
|
101
101
|
${commonStyles}
|
|
102
102
|
|
|
103
103
|
vaadin-text-field::part(label) {
|
|
104
|
-
left: calc(var(${
|
|
104
|
+
left: calc(var(${SwitchToggleClass.cssVarList.trackWidth}) + var(${SwitchToggleClass.cssVarList.trackBorderWidth}) * 2);
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
vaadin-checkbox[active]::part(checkbox) {
|
|
@@ -110,8 +110,8 @@ const ComboBoxClass = compose(
|
|
|
110
110
|
// so we need to use an arrow function on the selector
|
|
111
111
|
// for that to work, because ComboBox is not available
|
|
112
112
|
// at this time.
|
|
113
|
-
overlayBackground: { property: () =>
|
|
114
|
-
overlayBorder: { property: () =>
|
|
113
|
+
overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
|
|
114
|
+
overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border }
|
|
115
115
|
}
|
|
116
116
|
}),
|
|
117
117
|
draggableMixin,
|
|
@@ -61,12 +61,12 @@ overrides = `
|
|
|
61
61
|
vaadin-email-field input:-webkit-autofill:hover,
|
|
62
62
|
vaadin-email-field input:-webkit-autofill:active,
|
|
63
63
|
vaadin-email-field input:-webkit-autofill:focus {
|
|
64
|
-
-webkit-text-fill-color: var(${
|
|
65
|
-
box-shadow: 0 0 0 var(${
|
|
64
|
+
-webkit-text-fill-color: var(${EmailFieldClass.cssVarList.color});
|
|
65
|
+
box-shadow: 0 0 0 var(${EmailFieldClass.cssVarList.height}) var(${EmailFieldClass.cssVarList.backgroundColor}) inset;
|
|
66
66
|
}
|
|
67
67
|
vaadin-email-field[required]::part(required-indicator)::after {
|
|
68
68
|
content: "*";
|
|
69
|
-
color: var(${
|
|
69
|
+
color: var(${EmailFieldClass.cssVarList.color});
|
|
70
70
|
}
|
|
71
71
|
vaadin-email-field[readonly]::part(input-field)::after {
|
|
72
72
|
border: 0 solid;
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
componentNameValidationMixin,
|
|
5
5
|
} from '../../mixins';
|
|
6
6
|
import { createBaseClass } from '../../baseClasses/createBaseClass';
|
|
7
|
-
import
|
|
7
|
+
import TextClass from '../descope-text/Text';
|
|
8
8
|
import { compose } from '../../helpers';
|
|
9
9
|
import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
|
|
10
10
|
|
|
@@ -48,7 +48,7 @@ const selectors = {
|
|
|
48
48
|
host: { selector: () => ':host' },
|
|
49
49
|
anchor: {},
|
|
50
50
|
wrapper: { selector: () => ':host > div' },
|
|
51
|
-
text: { selector: () =>
|
|
51
|
+
text: { selector: () => TextClass.componentName }
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
const { anchor, text, host, wrapper } = selectors;
|
|
@@ -58,7 +58,7 @@ const LinkClass = compose(
|
|
|
58
58
|
mappings: {
|
|
59
59
|
width: host,
|
|
60
60
|
textAlign: wrapper,
|
|
61
|
-
color: [anchor, { ...text, property:
|
|
61
|
+
color: [anchor, { ...text, property: TextClass.cssVarList.color }],
|
|
62
62
|
cursor: anchor,
|
|
63
63
|
borderBottomWidth: anchor,
|
|
64
64
|
borderBottomStyle: anchor,
|
|
@@ -43,7 +43,7 @@ style = `
|
|
|
43
43
|
}
|
|
44
44
|
:host > div {
|
|
45
45
|
display: inline-block;
|
|
46
|
-
content: var(${
|
|
46
|
+
content: var(${LogoClass.cssVarList.url}, var(${LogoClass.cssVarList.fallbackUrl}));
|
|
47
47
|
max-width: 100%;
|
|
48
48
|
max-height: 100%;
|
|
49
49
|
object-fit: contain;
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
createProxy,
|
|
8
8
|
} from '../../mixins';
|
|
9
9
|
import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
|
|
10
|
-
import
|
|
10
|
+
import PasswordFieldClass from '../descope-password-field/PasswordField';
|
|
11
11
|
|
|
12
12
|
export const componentName = getComponentName('new-password');
|
|
13
13
|
|
|
@@ -63,8 +63,8 @@ const NewPasswordClass = compose(
|
|
|
63
63
|
fontSize: [
|
|
64
64
|
host,
|
|
65
65
|
{
|
|
66
|
-
selector:
|
|
67
|
-
property:
|
|
66
|
+
selector: PasswordFieldClass.componentName,
|
|
67
|
+
property: PasswordFieldClass.cssVarList.fontSize
|
|
68
68
|
}
|
|
69
69
|
],
|
|
70
70
|
componentWidth: { ...host, property: 'width' },
|
package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
|
|
2
2
|
import { observeAttributes } from '../../../helpers/componentHelpers';
|
|
3
|
-
import
|
|
3
|
+
import NewPasswordClass from '../NewPassword';
|
|
4
4
|
import { componentName } from './componentName';
|
|
5
5
|
|
|
6
6
|
const passwordAttrPrefixRegex = /^password-/
|
|
@@ -117,7 +117,7 @@ class NewPasswordInternal extends BaseInputClass {
|
|
|
117
117
|
const styleTag = document.createElement('style');
|
|
118
118
|
styleTag.innerHTML = `
|
|
119
119
|
:host::part(required-indicator)::after {
|
|
120
|
-
content: var(${
|
|
120
|
+
content: var(${NewPasswordClass.cssVarList.requiredContent});
|
|
121
121
|
}
|
|
122
122
|
`;
|
|
123
123
|
input?.shadowRoot.appendChild(styleTag);
|
|
@@ -57,12 +57,12 @@ overrides = `
|
|
|
57
57
|
vaadin-number-field input:-webkit-autofill:hover,
|
|
58
58
|
vaadin-number-field input:-webkit-autofill:active,
|
|
59
59
|
vaadin-number-field input:-webkit-autofill:focus {
|
|
60
|
-
-webkit-text-fill-color: var(${
|
|
61
|
-
box-shadow: 0 0 0 var(${
|
|
60
|
+
-webkit-text-fill-color: var(${NumberFieldClass.cssVarList.color});
|
|
61
|
+
box-shadow: 0 0 0 var(${NumberFieldClass.cssVarList.height}) var(${NumberFieldClass.cssVarList.backgroundColor}) inset;
|
|
62
62
|
}
|
|
63
63
|
vaadin-number-field[required]::part(required-indicator)::after {
|
|
64
64
|
content: "*";
|
|
65
|
-
color: var(${
|
|
65
|
+
color: var(${NumberFieldClass.cssVarList.color});
|
|
66
66
|
}
|
|
67
67
|
vaadin-number-field[readonly]::part(input-field)::after {
|
|
68
68
|
border: 0 solid;
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from '../../mixins';
|
|
8
8
|
import textFieldMappings from '../descope-text-field/textFieldMappings';
|
|
9
9
|
import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal';
|
|
10
|
-
import
|
|
10
|
+
import TextFieldClass from '../descope-text-field/TextField'
|
|
11
11
|
import { compose } from '../../helpers';
|
|
12
12
|
import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
|
|
13
13
|
|
|
@@ -64,14 +64,14 @@ const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
|
|
64
64
|
textFieldMappings;
|
|
65
65
|
|
|
66
66
|
const { digitField, label, requiredIndicator, internalWrapper, focusedDigitField } = {
|
|
67
|
-
focusedDigitField: { selector: () => `${
|
|
68
|
-
digitField: { selector: () =>
|
|
67
|
+
focusedDigitField: { selector: () => `${TextFieldClass.componentName}[focused="true"]` },
|
|
68
|
+
digitField: { selector: () => TextFieldClass.componentName },
|
|
69
69
|
label: { selector: '::part(label)' },
|
|
70
70
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
|
71
71
|
internalWrapper: { selector: 'descope-passcode-internal .wrapper' }
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
const textVars =
|
|
74
|
+
const textVars = TextFieldClass.cssVarList
|
|
75
75
|
|
|
76
76
|
const PasscodeClass = compose(
|
|
77
77
|
createStyleMixin({
|
|
@@ -7,12 +7,12 @@ import {
|
|
|
7
7
|
draggableMixin,
|
|
8
8
|
proxyInputMixin
|
|
9
9
|
} from '../../mixins';
|
|
10
|
-
import
|
|
11
|
-
import
|
|
10
|
+
import TextFieldClass from '../descope-text-field/TextField';
|
|
11
|
+
import ComboBoxClass from '../descope-combo-box/ComboBox';
|
|
12
12
|
import CountryCodes from './CountryCodes';
|
|
13
13
|
|
|
14
|
-
const textVars =
|
|
15
|
-
const comboVars =
|
|
14
|
+
const textVars = TextFieldClass.cssVarList;
|
|
15
|
+
const comboVars = ComboBoxClass.cssVarList;
|
|
16
16
|
|
|
17
17
|
export const componentName = getComponentName('phone-field');
|
|
18
18
|
|
|
@@ -81,12 +81,12 @@ const PhoneFieldClass = compose(
|
|
|
81
81
|
fontSize: [
|
|
82
82
|
host, inputWrapper,
|
|
83
83
|
{
|
|
84
|
-
selector:
|
|
85
|
-
property:
|
|
84
|
+
selector: TextFieldClass.componentName,
|
|
85
|
+
property: TextFieldClass.cssVarList.fontSize
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
|
-
selector:
|
|
89
|
-
property:
|
|
88
|
+
selector: ComboBoxClass.componentName,
|
|
89
|
+
property: ComboBoxClass.cssVarList.fontSize
|
|
90
90
|
}
|
|
91
91
|
],
|
|
92
92
|
|
|
@@ -81,8 +81,8 @@ overrides = `
|
|
|
81
81
|
vaadin-text-field input:-webkit-autofill:hover,
|
|
82
82
|
vaadin-text-field input:-webkit-autofill:active,
|
|
83
83
|
vaadin-text-field input:-webkit-autofill:focus {
|
|
84
|
-
-webkit-text-fill-color: var(${
|
|
85
|
-
box-shadow: 0 0 0 var(${
|
|
84
|
+
-webkit-text-fill-color: var(${TextFieldClass.cssVarList.color});
|
|
85
|
+
box-shadow: 0 0 0 var(${TextFieldClass.cssVarList.height}) var(${TextFieldClass.cssVarList.backgroundColor}) inset;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
vaadin-text-field > input {
|
|
@@ -92,7 +92,7 @@ overrides = `
|
|
|
92
92
|
|
|
93
93
|
vaadin-text-field[required]::part(required-indicator)::after {
|
|
94
94
|
content: "*";
|
|
95
|
-
color: var(${
|
|
95
|
+
color: var(${TextFieldClass.cssVarList.color});
|
|
96
96
|
}
|
|
97
97
|
vaadin-text-field::part(input-field)::after {
|
|
98
98
|
opacity: 0 !important;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs, createHelperVars } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import ButtonClass, { componentName } from '../../components/descope-button/Button';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
|
-
const vars =
|
|
6
|
+
const vars = ButtonClass.cssVarList;
|
|
7
7
|
|
|
8
8
|
const mode = {
|
|
9
9
|
primary: globalRefs.colors.primary,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import CheckboxClass from '../../components/boolean-fields/descope-checkbox/Checkbox';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
|
-
const vars =
|
|
6
|
+
const vars = CheckboxClass.cssVarList;
|
|
7
7
|
|
|
8
8
|
const checkbox = {
|
|
9
9
|
[vars.checkboxBackgroundColor]: globalRefs.colors.surface.main,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
|
-
import
|
|
2
|
+
import ComboBoxClass from '../../components/descope-combo-box/ComboBox';
|
|
3
3
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = ComboBoxClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
export const comboBox = {
|
|
10
10
|
[vars.borderColor]: globalRefs.colors.surface.main,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import globals from "../globals";
|
|
2
2
|
import { getThemeRefs, createHelperVars } from "../../helpers/themeHelpers";
|
|
3
|
-
import
|
|
3
|
+
import ContainerClass from "../../components/descope-container/Container";
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = ContainerClass.cssVarList
|
|
8
8
|
|
|
9
9
|
const verticalAlignment = {
|
|
10
10
|
start: { verticalAlignment: 'start' },
|
|
@@ -23,7 +23,7 @@ const [helperTheme, helperRefs, helperVars] =
|
|
|
23
23
|
verticalAlignment,
|
|
24
24
|
horizontalAlignment,
|
|
25
25
|
shadowColor: '#00000020' //if we want to support transparency vars, we should use different color format
|
|
26
|
-
},
|
|
26
|
+
}, ContainerClass.componentName)
|
|
27
27
|
|
|
28
28
|
const container = {
|
|
29
29
|
...helperTheme,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import DividerClass, { componentName } from '../../components/descope-divider/Divider';
|
|
2
2
|
import { createHelperVars, getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
3
|
import globals from '../globals';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = DividerClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
const thickness = '2px'
|
|
10
10
|
const textPaddingSize = '10px'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import EmailFieldClass from '../../components/descope-email-field/EmailField';
|
|
2
2
|
import { textField } from './textField';
|
|
3
3
|
|
|
4
4
|
const emailField = {
|
|
5
|
-
...textField(
|
|
5
|
+
...textField(EmailFieldClass.cssVarList)
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
export default emailField;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import LinkClass from '../../components/descope-link/Link';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
|
-
const vars =
|
|
6
|
+
const vars = LinkClass.cssVarList;
|
|
7
7
|
|
|
8
8
|
const link = {
|
|
9
9
|
[vars.cursor]: 'pointer',
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import LoaderLinearClass from '../../../components/descope-loader-linear/LoaderLinear';
|
|
2
2
|
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
|
3
3
|
import globals from '../../globals';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = LoaderLinearClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
const loaderLinear = {
|
|
10
10
|
[vars.display]: 'inline-block',
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import LoaderRadialClass from '../../../components/descope-loader-radial/LoaderRadial';
|
|
2
2
|
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
|
3
3
|
import globals from '../../globals';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = LoaderRadialClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
const loaderRadial = {
|
|
10
10
|
[vars.display]: 'inline-block',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import LogoClass from "../../components/descope-logo/Logo";
|
|
2
2
|
|
|
3
|
-
const vars =
|
|
3
|
+
const vars = LogoClass.cssVarList
|
|
4
4
|
|
|
5
5
|
const logo = {
|
|
6
6
|
[vars.fallbackUrl]: 'url(https://imgs.descope.com/components/no-logo-placeholder.svg)'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import NewPasswordClass from '../../components/descope-new-password/NewPassword';
|
|
2
2
|
|
|
3
|
-
const vars =
|
|
3
|
+
const vars = NewPasswordClass.cssVarList;
|
|
4
4
|
|
|
5
5
|
const newPassword = {
|
|
6
6
|
[vars.inputsGap]: '1em',
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import NumberFieldClass from '../../components/descope-number-field/NumberField';
|
|
2
2
|
import { textField } from './textField';
|
|
3
3
|
|
|
4
4
|
const numberField = {
|
|
5
|
-
...textField(
|
|
5
|
+
...textField(NumberFieldClass.cssVarList)
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
export default numberField;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import PasscodeClass from '../../components/descope-passcode/Passcode';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
3
|
import globals from '../globals';
|
|
4
4
|
|
|
5
|
-
const vars =
|
|
5
|
+
const vars = PasscodeClass.cssVarList
|
|
6
6
|
const globalRefs = getThemeRefs(globals);
|
|
7
7
|
|
|
8
8
|
const passcode = {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import PasswordFieldClass from '../../components/descope-password-field/PasswordField';
|
|
2
2
|
import globals from '../globals';
|
|
3
3
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = PasswordFieldClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
const passwordField = {
|
|
10
10
|
[vars.wrapperBorderStyle]: 'solid',
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
|
-
import
|
|
2
|
+
import PhoneFieldClass from '../../components/descope-phone-field/PhoneField';
|
|
3
3
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
|
-
const vars =
|
|
6
|
+
const vars = PhoneFieldClass.cssVarList;
|
|
7
7
|
|
|
8
8
|
const phoneField = {
|
|
9
9
|
[vars.wrapperBorderStyle]: 'solid',
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import SwitchToggleClass from '../../components/boolean-fields/descope-switch-toggle/SwitchToggle';
|
|
4
4
|
|
|
5
5
|
const knobMargin = '2px';
|
|
6
6
|
const checkboxHeight = '1.25em';
|
|
7
7
|
const trackBorderWidth = '2px';
|
|
8
8
|
|
|
9
9
|
const globalRefs = getThemeRefs(globals);
|
|
10
|
-
const vars =
|
|
10
|
+
const vars = SwitchToggleClass.cssVarList;
|
|
11
11
|
|
|
12
12
|
const switchToggle = {
|
|
13
13
|
size: {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import TextClass from '../../components/descope-text/Text';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = TextClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
const text = {
|
|
10
10
|
[vars.lineHeight]: '1em',
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import TextAreaClass from '../../components/descope-text-area/TextArea';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
|
-
const vars =
|
|
6
|
+
const vars = TextAreaClass.cssVarList;
|
|
7
7
|
|
|
8
8
|
const textArea = {
|
|
9
9
|
[vars.labelColor]: globalRefs.colors.surface.contrast,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
|
-
import
|
|
3
|
+
import TextFieldClass from '../../components/descope-text-field/TextField';
|
|
4
4
|
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
|
6
6
|
|
|
7
|
-
const vars =
|
|
7
|
+
const vars = TextFieldClass.cssVarList;
|
|
8
8
|
|
|
9
9
|
export const textField = (vars) => ({
|
|
10
10
|
[vars.padding]: '0 1em',
|